/* ===================================================================
   redesign.css — additions for the 2026 redesign.
   Loaded AFTER site.css. Nothing in site.css is modified.

   Holds three things site.css has no vocabulary for:
     1. the three-lens color system (Receiver / Signal / Transmission)
     2. the misregistration + seam-bar cover devices
     3. responsive two-column splits (site.css only has cols-2/3/4)
   =================================================================== */

:root {
  /* Lens colors, in CMY press order. Cyan = Receiver, amber = Signal,
     magenta = Transmission. Signal is the brand color and is never
     misregistered — it is the thing you are trying to see clearly. */
  --lens-r: #00A9E0;
  --lens-s: #F8A030;
  --lens-t: #EC008C;

  /* Off-register plates, used ONLY on words that name the problem. */
  --mis:  -7px -5px 0 var(--lens-r), 6px 4px 0 var(--lens-t), 11px -7px 0 var(--lens-s);
  --mis2: -2px -1px 0 var(--lens-r);
}

/* --- Misregistration ------------------------------------------------ */
.mis  { text-shadow: var(--mis); }
.mis2 { text-shadow: var(--mis2); }

@media (max-width: 640px) {
  /* The offsets are absolute px; at phone sizes they swamp the letterforms. */
  :root { --mis: -4px -3px 0 var(--lens-r), 3px 2px 0 var(--lens-t), 6px -4px 0 var(--lens-s); }
}
@media (prefers-reduced-motion: reduce) {
  .mis, .mis2 { text-shadow: none; }
}

/* --- The four-segment seam bar -------------------------------------- */
/* Replaces the 1px .amber-rule between sections. Reads as a press
   registration strip: three lenses plus the espresso ground. */
.seam {
  display: flex;
  gap: 1px;
  height: 6px;
  background: #EDE6DF;
  flex-shrink: 0;
}
.seam > i { flex: 1; display: block; }
.seam-r { background: var(--lens-r); }
.seam-t { background: var(--lens-t); }
.seam-s { background: var(--lens-s); }
.seam-k { background: #130D08; }

/* Short version, used inline under the book title. */
.seam-inline { width: 300px; height: 4px; background: #D8D4C8; }

/* On an espresso ground the fourth segment IS the ground, so it disappears.
   Invert it to the paper color — the device still reads as three lenses
   plus the ground, just the other way round. */
.seam-dark { background: #2A1E10; }
.seam-dark .seam-k { background: #EDE6DF; }

/* --- Scan lines ------------------------------------------------------ */
/* 1px verticals at 5px pitch — the halftone the cover treatment implies.
   Cyan on light grounds, amber on espresso. */
.scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(0,169,224,0.13) 0 1px, transparent 1px 5px);
}
.scan-amber {
  background-image: repeating-linear-gradient(90deg, rgba(248,160,48,0.10) 0 1px, transparent 1px 5px);
}

/* --- Uppercase display headline ------------------------------------- */
.hero-uc {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.02;
}

/* --- Responsive splits ---------------------------------------------- */
/* site.css tops out at cols-2/3/4; these are the asymmetric ones. */
.split { display: grid; gap: 64px; }
.split-hero    { grid-template-columns: minmax(0,1fr) minmax(0,480px); align-items: end; }
.split-book    { grid-template-columns: 400px minmax(0,1fr); gap: 80px; align-items: start; }
.split-strip   { grid-template-columns: 260px minmax(0,1fr); align-items: center; }
.split-sheet   { grid-template-columns: minmax(0,460px) minmax(0,1fr); align-items: center; }
.split-about   { grid-template-columns: minmax(0,1fr) 380px; gap: 72px; align-items: start; }
.split-contact { grid-template-columns: minmax(0,1fr) minmax(0,480px); gap: 80px; align-items: start; }

@media (max-width: 980px) {
  .split-hero, .split-book, .split-strip, .split-sheet,
  .split-about, .split-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .split-book > .book-cover,
  .split-strip > .book-cover { max-width: 300px; }
  .split-about > .portrait-col { max-width: 380px; }
  /* The sheet preview bleeds off the right edge on desktop; pull it back. */
  .sheet-preview { margin-right: 0 !important; border-right: 1px solid #3A2E22 !important; }
}

/* --- Lens columns --------------------------------------------------- */
.lens-col { padding-top: 28px; }
.lens-col-r { border-top: 2px solid var(--lens-r); }
.lens-col-s { border-top: 2px solid var(--lens-s); }
.lens-col-t { border-top: 2px solid var(--lens-t); }
.lens-icon  { height: 45px; margin-bottom: 18px; display: flex; align-items: center; }

/* --- Phase card, dark variant --------------------------------------- */
/* The 2px amber spine + dark card. site.css's .phase-card is white-only. */
.phase-dark { display: flex; }
.phase-dark > .spine { flex: 0 0 2px; background: var(--amber); }
.phase-dark > .card-dark { flex: 1; min-width: 0; }

/* --- Pull quote, amber left rule ------------------------------------ */
.rule-quote {
  font-style: italic;
  padding-left: 24px;
  border-left: 2px solid var(--amber);
  text-wrap: pretty;
}

/* --- Assessment section rows ---------------------------------------- */
.zone-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid #2A1E10;
}
.zone-row > .zone-num {
  flex: 0 0 auto;
  width: 30px;
  padding-top: 5px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--amber);
}
.zone-row > .zone-name { flex: 0 0 220px; }
.zone-row > .zone-body { flex: 1; margin: 0; }
@media (max-width: 760px) {
  .zone-row { flex-wrap: wrap; gap: 10px 22px; }
  .zone-row > .zone-name { flex: 1 1 auto; }
  .zone-row > .zone-body { flex: 1 1 100%; }
}

/* --- Definition rows (book: the three places) ----------------------- */
.def-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid #2A1E10;
}
.def-row:last-child { border-bottom: none; }
.def-row > .def-chip { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 9px; }

/* --- Sheet zone bands ----------------------------------------------- */
.zone-band { padding-top: 22px; }
.zone-band-noise {
  border-top: 3px solid #8A7860;
  background-image: repeating-linear-gradient(-45deg, rgba(138,120,96,0.05) 0 1px, transparent 1px 7px);
}
.zone-band-practice { border-top: 3px solid #130D08; }
.zone-sub { font-style: italic; color: var(--on-light-dim); margin: 0; }
.zone-field { border-top: 1px solid #C9C3B6; padding-top: 12px; }
.zone-field-lt { border-top: 1px solid #D8D4C8; padding-top: 10px; }

/* --- Book cover ----------------------------------------------------- */
/* One flat wrap image, cropped to the front face. */
/* A real <img> with srcset, not a background, so the browser can pick a file
   that matches the device instead of downscaling one big image. Each size was
   resampled by progressive halving from the native 1808px crop — a single
   large downscale uses too short a filter kernel and softens the 1px scan
   lines and the subtitle. */
.book-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid #D8D4C8;
}

/* --- Hero waveform canvas ------------------------------------------- */
.wave-canvas { width: 100%; height: 150px; display: block; }
.wave-legend { display: flex; gap: 28px; margin-top: 14px; color: var(--on-light-dim); }

/* --- Misc ----------------------------------------------------------- */
.mw-420 { max-width: 420px; }
.mw-640 { max-width: 640px; }
.mw-780 { max-width: 780px; }
.mw-820 { max-width: 820px; }
.mw-880 { max-width: 880px; }
.inner  { max-width: 1080px; margin: 0 auto; }
.inner-wide { max-width: 1400px; margin: 0 auto; }
.text-wrap-pretty { text-wrap: pretty; }

/* Espresso section, flat — no engineering grid.
   site.css's .section-grid paints a 52px amber grid at 7% on dark sections.
   At normal viewport widths those 1px lines read as artifacting rather than
   texture, so every dark section on the site uses this instead. To bring the
   grid back, swap class="section-espresso" for class="section-grid". */
.section-espresso { background: #130D08; color: var(--on-dark); position: relative; }
/* Warm-gray band, used for the two "send it" strips. */
.section-band { background: #EDEBE4; border-top: 1px solid #D8D4C8; }

/* --- The assessment instrument -------------------------------------- */
/* Card + rail. The rail holds the mini-sheet and the section markers. */
[data-flow-shell] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 40px;
  align-items: stretch;
  height: 704px;
}
@media (max-width: 820px) {
  [data-flow-shell] { grid-template-columns: minmax(0, 1fr); height: auto; }
  [data-flow-rail]  { order: -1; }
}

/* Printing the finished sheet: only the sheet, full bleed. */
@media print {
  body * { visibility: hidden !important; }
  [data-print-sheet], [data-print-sheet] * { visibility: visible !important; }
  [data-print-sheet] {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 24px !important;
    background: #FBFAF7 !important;
    border: 0 !important;
  }
  [data-noprint] { display: none !important; }
}

/* --- Containment fix for the light-section noise film ----------------
   site.css gives .section-light the noise texture via an absolutely
   positioned ::before with inset: 0, but never sets position on
   .section-light itself (the original markup always paired it with
   .section / .section-narrow, which do). Used alone, that ::before
   resolves against the nearest positioned ancestor — the espresso
   section above it — and paints its grain over a dark ground, which
   reads as "some espresso has noise and some doesn't".
   Establishing a containing block on every section keeps each
   section's texture inside that section. */
section { position: relative; }

/* --- Symptom carousel (home) ----------------------------------------
   One felt need at a time, at quote scale, in an instrument-readout
   frame. All slides stay in the DOM for crawlers; only the active one
   is shown. Fixed min-height so advancing never shifts the layout. */
.symptom-carousel { display: flex; flex-direction: column; }

.symptom-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #D8D4C8;
}
.symptom-count { color: var(--on-light-muted); letter-spacing: 0.18em; }

.symptom-stage {
  list-style: none;
  margin: 0;
  padding: 30px 0 26px;
  min-height: 210px;
  display: flex;
  align-items: center;
}
.symptom-slide { display: none; margin: 0; width: 100%; }
.symptom-slide.is-active { display: block; animation: symptom-in 0.34s ease both; }

/* Fade and a 7px rise. No scale, no bounce — the shortest motion that
   still reads as "this just changed". */
@keyframes symptom-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes symptom-sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Matches .rule-quote elsewhere on the page — the amber left rule is already
   this site's pullquote device, so the carousel borrows it instead of using
   curly quote marks. */
.symptom-quote {
  margin: 0;
  padding-left: 24px;
  border-left: 2px solid var(--amber);
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.45;
  color: var(--on-light);
  text-wrap: pretty;
}

.symptom-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  border-top: 1px solid #D8D4C8;
}
.symptom-ticks { display: flex; gap: 7px; }
.symptom-tick {
  position: relative;
  overflow: hidden;
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* 3.05:1 on the white card — these are role="tab" controls, so the
     inactive state has to be visible as a target, not just as a hint. */
  background: #8E877A;
  cursor: pointer;
  transition: width 0.25s ease, background 0.2s;
}
.symptom-tick:hover { background: #5C6055; }
.symptom-tick.is-active { width: 46px; }

/* The active tick doubles as the timer: amber sweeps across it over the
   interval, so the motion tells you something is about to change rather
   than just reporting that it did. */
.symptom-tick.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--amber-dk);
  transform-origin: left center;
  transform: scaleX(1);
}
.symptom-carousel.is-auto .symptom-tick.is-active::after {
  animation: symptom-sweep 4500ms linear forwards;
}
.symptom-carousel.is-auto.is-paused .symptom-tick.is-active::after {
  animation-play-state: paused;
}
.symptom-tick:focus-visible { outline: 2px solid var(--amber-dk); outline-offset: 3px; }

.symptom-arrows { display: flex; gap: 8px; }
.symptom-arrow {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #D8D4C8;
  border-radius: 2px;
  background: transparent;
  color: var(--on-light-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.symptom-arrow:hover {
  border-color: var(--amber-dk);
  color: var(--on-light);
  background: rgba(248, 160, 48, 0.07);
}
.symptom-arrow:focus-visible { outline: 2px solid var(--amber-dk); outline-offset: 2px; }

@media (max-width: 560px) {
  .symptom-stage { min-height: 240px; }
  .symptom-controls { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .symptom-slide.is-active { animation: none; }
  .symptom-tick.is-active::after { animation: none !important; transform: scaleX(1); }
}

/* --- Article prose ---------------------------------------------------
   site.css has no long-form styles — it was built for landing pages.
   Scoped to .prose so nothing else on the site is affected. */
.prose { max-width: 680px; }
.prose > * { max-width: 680px; }
.prose p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--on-light);
  margin: 0 0 1.55em;
  text-wrap: pretty;
}
/* Lede: the first paragraph carries the reader in. */
.prose > p:first-of-type { font-size: 21px; line-height: 1.62; font-weight: 500; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--on-light);
  margin: 2.2em 0 0.7em;
  line-height: 1.14;
}
.prose h2 { font-size: 30px; }
.prose h3 { font-size: 24px; }
.prose h4 { font-size: 20px; }
.prose strong { font-weight: 600; color: var(--on-light); }
.prose em { font-style: italic; }
.prose a { color: var(--amber-dk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a:hover { color: #8A5A14; }
.prose blockquote {
  margin: 2em 0;
  padding: 0 0 0 26px;
  border-left: 2px solid var(--amber);
}
.prose blockquote p {
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--on-light-muted);
  margin: 0 0 0.6em;
}
.prose ul, .prose ol { margin: 0 0 1.55em; padding-left: 0; list-style: none; }
.prose ol { counter-reset: prose-ol; }
.prose li {
  position: relative;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--on-light);
  margin: 0 0 0.75em;
  padding-left: 26px;
  text-wrap: pretty;
}
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 4px; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber-dk);
}
.prose ol > li { counter-increment: prose-ol; }
.prose ol > li::before {
  content: counter(prose-ol) '.';
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 2.05;
  color: var(--amber-dk);
}
.prose hr {
  border: 0;
  height: 1px;
  background: var(--light-border);
  margin: 2.6em 0;
}
.prose > *:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .prose p, .prose li { font-size: 17px; }
  .prose > p:first-of-type { font-size: 19px; }
  .prose h2 { font-size: 25px; }
  .prose h3 { font-size: 21px; }
}

/* --- Writing index --------------------------------------------------- */
.art-card {
  display: block;
  padding: 26px 0;
  border-top: 1px solid var(--light-border);
  text-decoration: none;
}
.art-card:hover .art-title { color: var(--amber-dk); }
.art-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: 0.02em;
  line-height: 1.12;
  color: var(--on-light);
  margin: 0 0 9px;
  transition: color 0.15s;
}
.art-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 11px;
}
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-light-muted);
  background: transparent;
  border: 1px solid var(--light-border2);
  border-radius: 2px;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filter-chip:hover { color: var(--on-light); border-color: var(--amber-dk); }
.filter-chip[aria-pressed="true"] {
  color: var(--on-light);
  border-color: var(--amber-dk);
  background: rgba(248,160,48,0.10);
}
.art-card[hidden] { display: none; }

/* --- Touch + legibility on small screens -----------------------------
   Two blocks, each pinned to a breakpoint the site already uses, rather
   than an arbitrary one:

     980px — where .split-* collapse to a single column. Everything from
             here down is a stacked, touch-shaped layout, which includes
             iPad portrait (810px) and iPad mini (744px). Hit targets and
             label sizes belong here.
     680px — where site.css swaps the desktop nav for the hamburger
             (.nav-desktop{display:none}). Only things that exist below
             that line belong here.

   Getting this wrong the first time left a dead zone at 641–680px — the
   hamburger was showing but none of its fixes applied, which covers
   iPhone SE/8 in landscape at 667px. Desktop above 980px is untouched. */
@media (max-width: 980px) {

  /* Buttons rendered at 39px. Pad the target; don't restyle it. */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Syne micro-labels are 9px. Inside the design system's stated 8.5–11px
     range, so not a violation — but at 9px with wide tracking on a touch
     device they're guesswork. 11px is the top of the same range. A few of
     the longer ones wrap; legible and wrapped beats compact and unreadable. */
  .label-text { font-size: 11px; }
  .label-lg { font-size: 12px; }

  .filter-chip { min-height: 44px; padding: 10px 14px; }

  /* Carousel controls. The progress ticks are a 4px bar by design — they
     read as a progress indicator, not a button — but they ARE role="tab"
     buttons, and 4px is not tappable with a thumb. Overlaying a taller hit
     area doesn't work (the tick has overflow:hidden for the timer sweep and
     would clip it), so instead the button is 44px tall and its painted
     background is clipped to a 4px content box: the box is tappable, the
     bar still reads as 4px. */
  .symptom-tick {
    height: 44px;
    padding: 20px 0;
    box-sizing: border-box;
    background-clip: content-box;
  }
  /* Keep the amber timer sweep on the visible bar, not the padding. */
  .symptom-tick.is-active::after { inset: 20px 0; }
  .symptom-ticks { gap: 10px; align-items: center; }

  /* The arrows were 34px. */
  .symptom-arrow { width: 44px; height: 44px; }
}

@media (max-width: 680px) {

  /* The hamburger was 36 x 28 — the most-tapped control on the mobile site,
     well under 44px. The bars stay 24 x 2; the tappable box grows around
     them. Tied to 680px because that's where the control appears at all. */
  .nav-hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
  }

  .btn-full { width: 100%; }

  /* Long series labels on the writing index get their own line rather than
     crowding the date and read time. */
  .art-meta { gap: 6px 14px; }
  .art-title { font-size: 23px; }
}

/* --- Series strip -----------------------------------------------------
   Sits in the article masthead, on espresso. Replaces the "if you missed
   part 1, read it first" openers the newsletter needed: orientation before
   the first sentence rather than an instruction inside it. */
/* Grid, not flex: with flex-basis a 4-part series wrapped 3-up and left the
   last part alone on a full-width row. auto-fit gives equal columns at any
   part count, and grid items stretch to the row height so the boxes match
   even when one title runs to two lines. */
.series-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px;
  margin-top: 30px;
  border-top: 1px solid #2A1E10;
  padding-top: 22px;
}
.series-part {
  min-width: 0;
  display: block;
  padding: 13px 16px;
  border-left: 2px solid #3A2E22;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
a.series-part:hover { border-left-color: var(--amber); background: rgba(248,160,48,0.06); }
.series-part.is-here {
  border-left-color: var(--amber);
  background: rgba(248,160,48,0.10);
}
/* Syne, not Barlow: this is a micro-label, and it sits inches below the
   masthead eyebrow and byline doing the same job in the same typeface.
   9px matches those .label-text siblings exactly. */
.series-num {
  display: block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 6px;
}
.series-part.is-here .series-num { color: var(--amber); }
.series-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--on-dark);
  text-wrap: pretty;
}

/* Tracks .label-text's own 11px bump at the same breakpoint. This has to sit
   AFTER the base .series-num rule above — the touch/legibility media block
   earlier in this file comes before it, so a copy of this rule up there
   loses the cascade to the 9px declaration. */
@media (max-width: 980px) {
  .series-num { font-size: 11px; }
}

@media (max-width: 680px) {
  .series-strip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .series-part { padding: 12px 14px; }
}