/* ============================================================
   doublestandard.xyz — bisected manifesto
   Palette:
     #0A0A0A Ink Black     | A foreground
     #F2EBE0 Bone Cream    | A background
     #FFFFFF Page White    | B background
     #1F1F1F Char Grey     | B foreground
     #E8FF3D Citron Alarm  | seam divergence accent
     #FF4040 Errata Red    | strikethrough
     #9A9A9A Ash           | seam ticks, footer coda
   ============================================================ */

:root {
  --ink: #0A0A0A;
  --bone: #F2EBE0;
  --paper: #FFFFFF;
  --char: #1F1F1F;
  --citron: #E8FF3D;
  --errata: #FF4040;
  --ash: #9A9A9A;
  --topbar-h: 56px;
  --footer-h: 220px;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  --seam-pos: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  font-family: "Space Mono", monospace;
  color: var(--ink);
  cursor: none;
}

.defs-only { width: 0; height: 0; position: absolute; pointer-events: none; }

/* ---------- TOP BAR ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--ink);
  color: var(--paper);
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--ink);
}
.topbar::before {
  content: "";
  grid-column: 2;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--paper), var(--paper));
  display: block;
}
.nav-a {
  grid-column: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  background: var(--ink);
  padding: 0 24px;
}
.nav-a a {
  font-family: "DM Mono", "Space Mono", monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--bone);
  text-decoration: none;
  padding: 6px 4px;
  position: relative;
}
.nav-a a::before {
  content: "[";
  margin-right: 4px;
  color: var(--bone);
  opacity: 0.5;
}
.nav-a a::after {
  content: "]";
  margin-left: 4px;
  color: var(--bone);
  opacity: 0.5;
}
.nav-a a:hover { color: var(--bone); }
.nav-a a:hover::before, .nav-a a:hover::after { opacity: 1; }

.nav-b {
  grid-column: 3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  background: var(--paper);
  padding: 0 24px;
}
.nav-b a {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--char);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 6px 4px;
  transition: color 220ms ease;
}
.nav-b a:hover { color: var(--errata); }
.nav-b a:visited { color: var(--citron); }

/* ---------- FRAME / TWO COLUMNS ---------- */
.frame {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: var(--footer-h);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  background: var(--bone);
}

.standard-a, .standard-b {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.standard-a {
  grid-column: 1;
  background: var(--bone);
  color: var(--ink);
  scrollbar-color: var(--ink) var(--bone);
}
.standard-a::-webkit-scrollbar { width: 6px; }
.standard-a::-webkit-scrollbar-thumb { background: var(--ink); }
.standard-a::-webkit-scrollbar-track { background: var(--bone); }

.standard-b {
  grid-column: 3;
  background: var(--paper);
  color: var(--char);
  font-family: "Lora", serif;
  scrollbar-color: var(--char) var(--paper);
}
.standard-b::-webkit-scrollbar { width: 6px; }
.standard-b::-webkit-scrollbar-thumb { background: var(--char); }
.standard-b::-webkit-scrollbar-track { background: var(--paper); }

/* ---------- COLUMN INNER ---------- */
.col-inner {
  padding: 64px 7vw 80px;
  max-width: 100%;
}
.standard-a .col-inner {
  padding-left: 8vw;
  padding-right: 5vw;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 24px;
  row-gap: 0;
}
.standard-a .a-section,
.standard-a .hero {
  grid-column: 1 / -1;
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--ink);
}
.standard-a .hero { padding-top: 24px; }

.standard-b .col-inner {
  padding-left: 5vw;
  padding-right: 8vw;
}
.standard-b .b-section {
  padding: 76px 0 76px;
  position: relative;
}
.standard-b .hero { padding-top: 24px; }

.standard-b .b-section:nth-child(1) { transform: rotate(-0.6deg); }
.standard-b .b-section:nth-child(2) { transform: rotate(1.1deg); padding-left: 11px; }
.standard-b .b-section:nth-child(3) { transform: rotate(-1.4deg); padding-right: 21px; }
.standard-b .b-section:nth-child(4) { transform: rotate(2.2deg); padding-left: 34px; }
.standard-b .b-section:nth-child(5) { transform: rotate(-0.9deg); padding-right: 41px; }

/* ---------- SECTION TAGS (A) ---------- */
.section-tag {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 18px;
  font-family: "DM Mono", "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.section-tag .num {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  background: var(--ink);
  color: var(--bone);
  padding: 3px 8px;
  position: relative;
}
.section-tag .num::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 2.5px;
  height: 60%;
  background: var(--bone);
  transform: translateY(-50%);
}
.section-tag .redact {
  display: inline-block;
  background: var(--ink);
  color: var(--ink);
  padding: 2px 4px;
  letter-spacing: 0;
  font-weight: 700;
  position: relative;
}
.section-tag .redact::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 0;
  height: 100%;
  width: 2.5px;
  background: var(--bone);
}

/* ---------- SECTION TAGS (B) ---------- */
.section-tag-b {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--char);
}
.word-tag {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  color: var(--char);
}
.speaker-b { color: var(--char); opacity: 0.62; font-size: 12px; }

/* ---------- BRIDGE HEADLINES ---------- */
.bridge {
  position: relative;
  display: flex;
  align-items: baseline;
  margin: 8px 0 28px;
  line-height: 1;
  white-space: nowrap;
}
.bridge-a {
  font-family: "Big Shoulders Stencil Display", "Big Shoulders Stencil", sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 7.6vw, 6.2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: uppercase;
  display: inline-block;
  transform: translateX(-12px);
  opacity: 0;
  transition: opacity 460ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 460ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bridge-b {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  letter-spacing: 0;
  color: var(--char);
  display: inline-block;
  transform: translateX(12px);
  opacity: 0;
  transition: opacity 720ms ease-in-out, transform 720ms ease-in-out;
  text-shadow: 0 4px 0 rgba(31,31,31,0.06);
  align-self: flex-end;
  margin-bottom: 4px;
}
.standard-a .bridge { padding-left: 0; }
.standard-b .bridge { padding-left: 0; padding-right: 0; }

.bridge.in-view .bridge-a,
.bridge.in-view .bridge-b {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- BODY TYPOGRAPHY (A) ---------- */
.standard-a .lede {
  grid-column: 1 / -1;
  font-family: "Space Mono", monospace;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 28px;
  border-left: 6px solid var(--ink);
  padding-left: 14px;
}
.standard-a p {
  font-family: "Space Mono", monospace;
  font-size: 14.5px;
  line-height: 1.72;
  font-feature-settings: "kern" off;
  margin-bottom: 22px;
  color: var(--ink);
}
.standard-a .byline {
  margin-top: 36px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  padding-top: 14px;
}

/* ---------- BODY TYPOGRAPHY (B) ---------- */
.standard-b .lede-b {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 24px;
  color: var(--char);
}
.standard-b p {
  font-family: "Lora", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.55;
  margin-bottom: 22px;
  color: var(--char);
}
.standard-b strong, .standard-b .em-roman {
  font-style: normal;
  font-weight: 600;
}
.standard-b .byline-b {
  margin-top: 28px;
  font-size: 13px;
  color: var(--char);
  opacity: 0.72;
  border-top: 1px solid var(--char);
  padding-top: 14px;
}

/* ---------- MARGINALIA GLOSS (B only) ---------- */
.gloss {
  font-family: "Caveat", cursive;
  font-size: 19px !important;
  line-height: 1.2 !important;
  color: var(--char);
  opacity: 0.64;
  margin: 4px 0 18px !important;
  padding-left: 18px;
  display: block;
  font-style: normal !important;
  transform: rotate(-3deg);
  border-left: 1px solid var(--char);
  border-left-color: rgba(31,31,31,0.3);
  position: relative;
}
.b-section:nth-child(odd) .gloss { transform: rotate(-2deg); }
.b-section:nth-child(even) .gloss { transform: rotate(-4.5deg); }

/* ---------- CLAIMS / STRIKETHROUGH ---------- */
.claim {
  position: relative;
  display: inline;
  background-image: linear-gradient(transparent calc(50% - 1px), transparent calc(50% - 1px));
}
.claim::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.5px;
  background: var(--errata);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms cubic-bezier(0.6, 0, 0.4, 1);
  pointer-events: none;
  box-shadow: 0 0 0 0 var(--errata);
  /* hand-jittered approximation */
  filter: url(#jitter);
}
.claim.struck::after {
  transform: scaleX(1);
}
.claim.struck {
  color: inherit;
}

/* ---------- STENCIL DIVIDERS (A) ---------- */
.stencil-rule {
  grid-column: 1 / -1;
  margin: 28px 0 0;
  height: 22px;
  background:
    linear-gradient(to right, var(--ink) 0 30%, transparent 30% 32.5%, var(--ink) 32.5% 60%, transparent 60% 62.5%, var(--ink) 62.5% 100%);
}

/* ---------- PHOTOS ---------- */
.photo-pair { margin: 12px 0 26px; position: relative; }
.photo-a .halftone-img {
  width: 100%;
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle at 22% 28%, transparent 0 18%, var(--ink) 18% 19%, transparent 19% 100%) 0 0/14px 14px,
    radial-gradient(circle at 70% 70%, transparent 0 22%, var(--ink) 22% 23%, transparent 23% 100%) 0 0/12px 12px,
    repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 4px),
    var(--bone);
  border: 1px solid var(--ink);
  filter: contrast(1.1);
}
.photo-a .halftone-img-2 {
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 15%, transparent 16% 100%) 0 0/10px 10px,
    repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 5px),
    var(--bone);
  filter: contrast(1.2) brightness(1.05);
}
.photo-a figcaption {
  font-family: "DM Mono", "Space Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 8px;
  color: var(--ink);
}

.photo-b .duotone-img {
  width: 100%;
  aspect-ratio: 4/3;
  background:
    radial-gradient(ellipse at 32% 38%, rgba(31,31,31,0.7) 0%, rgba(31,31,31,0.1) 56%),
    radial-gradient(ellipse at 70% 60%, rgba(31,31,31,0.55) 0%, rgba(31,31,31,0.05) 60%),
    linear-gradient(135deg, rgba(31,31,31,0.3) 0%, rgba(255,255,255,0.4) 100%),
    var(--paper);
  border: none;
  position: relative;
  overflow: hidden;
  filter: contrast(1.05);
}
.photo-b .duotone-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.photo-b .duotone-img-2 {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(31,31,31,0.65) 0%, rgba(31,31,31,0.08) 65%),
    radial-gradient(ellipse at 25% 70%, rgba(31,31,31,0.45) 0%, rgba(31,31,31,0.05) 60%),
    linear-gradient(45deg, rgba(31,31,31,0.25) 0%, rgba(255,255,255,0.45) 100%),
    var(--paper);
}
.photo-b figcaption {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 13px;
  margin-top: 6px;
  color: var(--char);
  opacity: 0.78;
  transform: rotate(-0.6deg);
  margin-left: -8px;
}

/* ---------- SEAM ---------- */
.seam {
  grid-column: 2;
  position: relative;
  width: 1px;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.seam-rail {
  position: relative;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to right,
    var(--ink) 0 50%,
    var(--paper) 50% 100%
  );
  /* base color is duotone but visually a line; we then color-shift on divergence */
  transition: background 360ms ease;
}
body[data-divergence-high="true"] .seam-rail {
  background: var(--citron);
  width: 2px;
  margin-left: -0.5px;
}
.seam-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--citron);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--ink);
  transition: top 200ms ease, opacity 240ms ease;
  opacity: 0.85;
}
.seam-tick {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 1px;
  background: var(--ash);
  opacity: 0.6;
}

/* ---------- FOOTER ---------- */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  height: var(--footer-h);
  background: var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 30;
  overflow: hidden;
}
.footer-half { height: 100%; }
.footer-a { background: var(--ink); }
.footer-b { background: var(--paper); }
.footer-mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.footer-mark .bridge-a,
.footer-mark .bridge-b {
  opacity: 1;
  transform: none;
  transition: none;
}
.footer-mark {
  font-size: 0;
}
.footer-bridge-a {
  font-family: "Big Shoulders Stencil Display", "Big Shoulders Stencil", sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6.5rem);
  letter-spacing: -0.02em;
  color: var(--bone);
  text-transform: uppercase;
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  z-index: 2;
}
.footer-slash {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 500;
  color: var(--ash);
  display: inline-block;
  margin: 0 6px;
  position: relative;
  z-index: 2;
}
.footer-bridge-b {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  color: var(--char);
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  z-index: 2;
}
.footer-strike {
  position: absolute;
  top: 46%;
  left: 8%;
  width: 84%;
  height: 16px;
  z-index: 3;
  pointer-events: none;
}
.footer-coda {
  position: absolute;
  bottom: 22px;
  width: 100%;
  text-align: center;
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ash);
  letter-spacing: 0.04em;
  z-index: 4;
}

/* ---------- CURSOR ---------- */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  border: 1px solid var(--ink);
  background: transparent;
  transform: translate3d(calc(var(--cursor-x) - 11px), calc(var(--cursor-y) - 11px), 0);
  transition: background-color 200ms ease, border-color 200ms ease, width 220ms ease, height 220ms ease;
  mix-blend-mode: normal;
}
body[data-cursor-side="b"] .cursor-ring {
  border-color: var(--char);
}
body[data-cursor-on-bridge="true"] .cursor-ring {
  background: rgba(232, 255, 61, 0.35);
  width: 30px;
  height: 30px;
  transform: translate3d(calc(var(--cursor-x) - 15px), calc(var(--cursor-y) - 15px), 0);
}

/* ---------- MOBILE / VERTICAL SPLIT ---------- */
@media (max-width: 720px) {
  .frame {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1px 1fr;
  }
  .standard-a { grid-column: 1; grid-row: 1; }
  .seam {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 1px;
  }
  .seam-rail {
    width: 100%;
    height: 1px;
    background: linear-gradient(to bottom, var(--ink) 0 50%, var(--paper) 50% 100%);
  }
  .seam-dot {
    left: 50%;
    top: 50%;
  }
  .seam-tick {
    width: 1px;
    height: 7px;
    left: 12%;
    top: -3px;
  }
  .standard-b { grid-column: 1; grid-row: 3; }

  .topbar {
    grid-template-columns: 1fr 1px 1fr;
    height: 48px;
  }
  .nav-a a, .nav-b a { font-size: 12px; }

  .bridge {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .standard-a .bridge { align-items: flex-start; }
  .standard-b .bridge { align-items: flex-end; }

  .standard-a .col-inner,
  .standard-b .col-inner {
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .standard-a .col-inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-bridge-a, .footer-slash {
    font-size: clamp(2rem, 12vw, 3.6rem);
  }
  .footer-bridge-b {
    font-size: clamp(1.6rem, 9vw, 2.6rem);
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .bridge-a, .bridge-b {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .claim::after {
    transition: none;
  }
  .standard-a, .standard-b { scroll-behavior: auto; }
  .seam-dot { transition: none; }
}