/* =====================================================================
   INNER PAGES — b2 bold concept
   (about · work-with-me + 5 pathways · testimonials · blog · contact · 404)

   Loads AFTER styles.css. Reuses its tokens, railnav (+ mobile top-bar),
   type scale, .btn, .reveal motion, grain + focus rings, and every shared
   component (.cards/.fixes/.pq/.list/.voices/.video/.stats/.dropcap...).

   These are VERTICAL-scroll pages (NOT the home's .htrack experiment), so
   nothing here touches the byte-locked home. Desktop = clean editorial,
   offset by the fixed left rail. Mobile = the learned b2 patterns:
   statement hero (no CTA), section-contrast panels, organic line-field
   background on light panels, scroll reveals, end-of-page CTA only.
   ===================================================================== */

.page-body{background:var(--paper);}

/* page shell clears the fixed left rail on desktop (rail = 0 on mobile) */
.page{padding-left:var(--rail);}

/* ---- sections ---- */
.phero,.psec,.pcta{position:relative;overflow:hidden;}
.psec{padding-block:clamp(56px,8vh,120px);background:var(--paper);border-top:1px solid var(--hairline);}
.psec--sand{background:var(--paper-3);}
/* darker brass eyebrow on sand panels so the 12px label clears AA (accent #8E5D26 is only 4.01:1 on sand) */
.psec--sand .eyebrow{color:var(--accent-deep);}
.psec--plain{border-top:0;}                 /* first section under a hero: no double seam */
.phero .frame,.psec .frame,.pcta .frame{position:relative;z-index:1;}
/* the line-field canvas sits above the panel, below the copy */
.phero > .bgwave,.psec > .bgwave{position:absolute;left:0;top:-120px;width:100%;height:auto;z-index:0;pointer-events:none;will-change:transform;}

/* ---- statement hero (no CTA — client rule) ---- */
.phero{min-height:clamp(440px,80vh,720px);display:flex;align-items:center;
  padding-block:clamp(96px,16vh,180px);}
/* full-viewport hero: only the headline + subheadline show on load, body reveals on scroll (About) */
.phero.phero--full{min-height:100svh;}
.phero .backlink{margin-bottom:var(--s3);}
.phero h1{max-width:18ch;font-weight:900;text-transform:uppercase;letter-spacing:-0.02em;word-spacing:.14em;line-height:.98;text-wrap:balance;}  /* bold uppercase hero; word-spacing keeps word boundaries readable at 900 weight */
.phero .lead{margin-top:var(--s4);}
.phero__rule{display:block;width:0;height:2px;background:var(--brass);margin:0 0 var(--s4);}  /* brass, not ember — client: consistency */
.js.ready .phero__rule{width:60px;transition:width 1s cubic-bezier(.16,.8,.24,1) .15s;}
/* DESKTOP load order fix: the lead/eyebrow used to paint instantly at full opacity while the
   split headline was still hidden behind .ready + its word stagger — the headline then
   blur-popped in late, which read as a load glitch (worst on reload). Enter the copy as ONE
   unit: backlink/eyebrow -> headline words -> lead. Mobile keeps its own pRise cascade. */
@media(min-width:681px){
  html.js .phero .backlink,html.js .phero .eyebrow,html.js .lenshero__copy .eyebrow{
    opacity:0;animation:pheroRise .7s ease .1s both;}
  html.js .phero .lead,html.js .lenshero__copy .lead{
    opacity:0;animation:pheroRise .8s ease .55s both;}
}
@keyframes pheroRise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  html.js .phero .backlink,html.js .phero .eyebrow,html.js .phero .lead,
  html.js .lenshero__copy .eyebrow,html.js .lenshero__copy .lead{animation:none;opacity:1;}
}

/* ---- portrait variant: circular headshot above the eyebrow (case-study hero, Bec/San).
   Left-aligned, same margin as the backlink/eyebrow/h1 below it, so the .frame stays on its
   existing centre-axis (the frame column is centred on the page; its content is left-set).
   Static, no reveal/stagger: always visible even if the load-order JS never runs. ---- */
.phero__portrait{margin:0 0 var(--s3);}
.phero__portrait img{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--brass),0 14px 30px rgba(23,19,16,.18);}
@media(min-width:681px){
  .phero__portrait img{width:120px;height:120px;}
}
@media(min-width:1150px){
  .phero__portrait img{width:132px;height:132px;}
}

/* ---- ember punchline statement: the one earned tension moment per section
        (client direction, applied across About / WWM / pathway pages).
        Colour alone carries it — no box, no italics, no rule. ---- */
.prose p.punch,.punch{font-family:var(--serif);font-weight:600;color:var(--ember);
  font-size:clamp(1.5rem,2.7vw,2.1rem);line-height:1.3;letter-spacing:-0.015em;max-width:none;margin:var(--s4) 0;}
@media(min-width:1150px){.measure .punch{margin-inline:-7vw;}}   /* stretch into the page wings */
/* split punchline: the setup stays ink/white, only the tension half burns ember */
.prose p.punch--split,.punch--split{color:var(--ink);}
.punch--split .fire{color:var(--ember);font-style:normal;}
/* video prompt lines ("Hear it directly from Filimon") sit quiet: warm grey, never brass/ember */
.prose p.videoprompt{color:var(--ink-3);}
/* short stacked lines (de-boxed lists): plain text, tighter rhythm, no borders/numbers */
.prose.plainlines p{margin-block:0 12px;}
/* plain numbered lines (de-boxed .vbreak): normal numbered points, brass numeral only */
.numlist{list-style:none;margin:var(--s4) 0 0;padding:0;counter-reset:nl;display:grid;gap:12px;}
.numlist li{counter-increment:nl;position:relative;padding-left:38px;color:var(--ink-2);font-size:1.05rem;line-height:1.6;max-width:60ch;}
.numlist li strong{color:var(--ink);font-weight:600;}
.numlist li::before{content:counter(nl) ".";position:absolute;left:0;top:0;
  font-family:var(--serif);font-weight:500;color:var(--accent);}
/* de-boxed statement that should take the full column, not the 15ch clamp */
.sband.sband--wide p{max-width:none;font-size:clamp(1.7rem,4.6vw,2.7rem);line-height:1.2;}
@media(min-width:1150px){.measure .sband--wide p{margin-inline:-7vw;}}   /* claim the wings — same stretch as the punchlines, so it reads in-family */
/* hero punch lead ("Good. You should.") — ember + a size up so it reads like a punchline */
.phero .lead.lead--punch{color:var(--ember);font-family:var(--serif);font-weight:600;
  font-size:clamp(1.35rem,2.1vw,1.75rem);letter-spacing:-0.01em;}

/* ---- bold design-variation: make the shared "key point" components
        read large + statement-driven (avatar: serious, not gentle) ---- */
.psec .fixes{font-family:var(--serif);font-weight:500;line-height:1.32;color:var(--ink);
  font-size:clamp(1.7rem,3.6vw,2.6rem);margin:var(--s4) 0;}
.psec .fixes span{display:block;}
.psec .fixes span:last-child{color:var(--accent);}
.psec .fixes span.fire,.psec .fixes span.fire:last-child{color:var(--ember);}   /* ember when the closing line is the tension point */
/* long closing line: sized down a step so it holds ONE line in the column (desktop);
   mobile lets it wrap naturally rather than shrink below its siblings */
.psec .fixes span.fit{white-space:nowrap;font-size:.82em;}
@media(max-width:680px){.psec .fixes span.fit{white-space:normal;font-size:1em;}}

/* numbered key-point list — converts long "what we work on" prose into bold blocks.
   number spans both rows in col 1; title (row 1) + description (row 2) stack in col 2 */
.kpoints{list-style:none;margin:var(--s5) 0 0;padding:0;counter-reset:kp;}
.kpoints li{counter-increment:kp;display:grid;grid-template-columns:auto 1fr;column-gap:var(--s4);
  align-items:start;padding:var(--s4) 0;border-top:1px solid var(--hairline);}
.kpoints li:last-child{border-bottom:1px solid var(--hairline);}
.kpoints li::before{content:counter(kp,decimal-leading-zero);grid-column:1;grid-row:1 / span 2;
  font-family:var(--serif);font-weight:500;font-size:1.6rem;line-height:1;color:var(--accent);}
.kpoints li h3{grid-column:2;grid-row:1;font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--ink);margin:0 0 8px;}
.kpoints li p{grid-column:2;grid-row:2;color:var(--ink-2);font-size:1.05rem;line-height:1.6;margin:0;max-width:60ch;}

/* a single oversized "what changed" statement block */
.bigstate{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.6vw,3.4rem);
  line-height:1.12;letter-spacing:-0.018em;color:var(--ink);max-width:18ch;margin:0;}
.bigstate .it{font-style:italic;color:var(--accent);}

/* ---- end-of-page CTA (dark) + footer ---- */
.pcta{background:var(--dark);color:var(--on-dark);padding-block:clamp(64px,12vh,150px);}
.pcta .eyebrow{color:#C79A5E;}
.pcta h2{max-width:20ch;color:var(--on-dark);}
.pcta .lead{color:var(--on-dark);}   /* white like the headline (client: muted beige read as faded) */
.pcta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.pcta .btn:hover{background:transparent;color:var(--paper);}

.pfoot{background:var(--dark);color:var(--on-dark);padding:0 0 clamp(36px,6vh,64px);}
.pfoot .frame{padding-top:var(--s5);border-top:1px solid rgba(242,236,224,.14);}
.pfoot .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s4);}
.pfoot .brand{color:var(--on-dark);}
.pfoot .foot__links{display:flex;gap:26px;flex-wrap:wrap;}
.pfoot .foot__links a{color:var(--on-dark-2);text-decoration:none;font-size:14px;}
.pfoot .foot__links a:hover{color:var(--on-dark);}
.pfoot .foot__base{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(242,236,224,.14);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--on-dark-2);}
.pfoot .foot__base a{color:var(--on-dark-2);}

/* contact: real form fields on the light page */
.cform{margin-top:var(--s5);max-width:640px;display:grid;gap:var(--s3);}
.cform .field{display:flex;flex-direction:column;gap:7px;}
.cform .field span{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink-2);}
.cform .field input,.cform .field textarea,.nform .field input{font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--hairline);border-radius:6px;padding:13px 14px;outline:none;
  transition:border-color .2s;width:100%;}
.cform .field input:focus,.cform .field textarea:focus,.nform .field input:focus{border-color:var(--accent);}
.cform .field textarea{resize:vertical;min-height:130px;}
.cform .note{font-size:13px;color:var(--ink-2);letter-spacing:.04em;margin:0;}

/* signature sign-off (client-provided Photologo script wordmark) */
.sig{margin-top:clamp(30px,5vh,52px);}
.sig img{display:block;width:clamp(200px,55vw,300px);height:auto;}
.sig--end{margin-top:clamp(36px,6vh,64px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--hairline);}

/* example portrait — fills a framed .portrait slot with the existing cut-out
   (placeholder/example until the client supplies real photography) */
.portrait--photo{background-image:url("portrait-fil.webp?v=2");background-repeat:no-repeat;
  background-size:cover;background-position:center 20%;background-color:var(--paper-3);
  font-size:0;color:transparent;}
.cform .form__confirm{margin:0;}

/* inline page photograph — breaks long copy with an editorial image.
   Sits wider than the .measure text column; reveals on scroll (about-concepts.js). */
.pfig{margin:clamp(28px,6vh,68px) 0 0;border-radius:5px;overflow:hidden;background:var(--paper-3);
  box-shadow:0 20px 54px rgba(23,19,16,.12);
  opacity:0;transform:translateY(20px) scale(.992);
  transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);}
.pfig.in{opacity:1;transform:none;}
.pfig img{display:block;width:100%;height:auto;}
.pfig figcaption{padding:11px 16px 13px;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);}

/* testimonial quote block (testimonials page) */
/* short-quote grid (pulled from the promo booklet) — tight + flat: plain text with a thin
   brass rule, first-name small-caps brass attribution. Site energy, not booklet energy. */
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.2vw,42px);margin-top:clamp(40px,7vh,64px);}
.qgrid figure{margin:0;padding:0 0 16px;border-bottom:1px solid var(--brass);}
.qgrid blockquote{margin:0;font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.45;color:var(--ink);}
.qgrid cite{display:block;margin-top:12px;font-style:normal;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);}
@media(min-width:1400px){.qgrid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:680px){.qgrid{grid-template-columns:1fr;gap:26px;}}

.tquote{margin:0;padding:0;}
.tquote blockquote{margin:0;position:relative;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.3rem,3vw,1.85rem);line-height:1.32;letter-spacing:-0.01em;color:var(--ink);max-width:34ch;}
.tquote cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);}

/* breakdown list — turns an enumeration-in-prose into scannable rows (mobile readability).
   Copy verbatim: the lead phrase is emphasised, the sentence is unchanged. */
.bdlist{list-style:none;margin:var(--s4) 0 0;padding:0;}
.bdlist li{padding:clamp(13px,2.2vh,18px) 0;border-top:1px solid var(--hairline);
  color:var(--ink-2);font-size:1.05rem;line-height:1.55;}
.bdlist li:last-child{border-bottom:1px solid var(--hairline);}
.bdlist li b{display:block;margin-bottom:3px;font-family:var(--serif);font-weight:500;
  font-size:1.18rem;line-height:1.2;color:var(--ink);}
/* tag row — formats/options as chips instead of a comma list */
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s4) 0 0;list-style:none;padding:0;}
.tagrow li{font-family:var(--sans);font-size:.92rem;letter-spacing:.01em;color:var(--ink);
  background:var(--paper-3);border:1px solid var(--hairline);border-radius:999px;padding:8px 15px;}

/* visual breakdown — enumeration as designed cards (more visual than .bdlist):
   card surface + brass accent edge + big ghosted index numeral + serif lead.
   Wrap in .stagger for the reveal. Copy verbatim (lead + consequence split only). */
.vbreak{display:grid;gap:12px;margin:var(--s4) 0 0;}
.vbreak__item{position:relative;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:10px;
  padding:clamp(18px,2.6vh,24px) clamp(18px,3vw,26px);box-shadow:0 12px 30px rgba(23,19,16,.07);}
.vbreak__item::before{content:attr(data-n);position:absolute;top:0;right:14px;
  font-family:var(--serif);font-weight:500;font-size:clamp(3rem,13vw,4.4rem);line-height:1;
  color:var(--accent);opacity:.13;pointer-events:none;}
.vbreak__lead{position:relative;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.25rem,5vw,1.55rem);line-height:1.16;color:var(--ink);margin:0 0 7px;max-width:15ch;}
.vbreak__cons{position:relative;font-family:var(--sans);font-size:1rem;line-height:1.55;
  color:var(--ink-2);margin:0;max-width:42ch;}

/* ---- pull-quote statement (Fil copy insertions, reusable across pages) ----
   Sits alone on its own line, bold, SAME sans body font as prose (client: no separate
   display font — deliberately not .pq/.wq/.punch, which are all --serif). A brass/accent
   left rule marks it as a pull-quote, not a subheading. No rendered quotation marks —
   copy is inserted plain; the rule + weight carry the "statement" read.
   Three size steps on one class: default = section, modifiers for subtitle / sub-section. */
.pullquote{display:block;font-family:var(--sans);font-weight:700;color:var(--ink);
  line-height:1.42;letter-spacing:-0.005em;max-width:38ch;margin:var(--s4) 0;
  padding-left:var(--s3);border-left:3px solid var(--accent);
  font-size:clamp(1.2rem,1.7vw,1.4rem);}                 /* default: "section" step */
.pullquote--subtitle{font-size:clamp(1.55rem,2.8vw,2.05rem);max-width:32ch;}
.pullquote--sub{font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:40ch;}

/* ---- "that's the work" rhythm block (Work With Me hub only) ----
   Five short lines, stacked, unbulleted, regular weight, generous spacing between them.
   A rhythm device — deliberately distinct from .pullquote: no bold, no border/rule. */
.rhythm{margin:var(--s4) 0;max-width:54ch;}
.rhythm p{font-family:var(--sans);font-weight:400;font-size:clamp(1.1rem,1.5vw,1.3rem);
  line-height:1.75;color:var(--ink);margin:0 0 1.05em;max-width:none;}
.rhythm p:last-child{margin-bottom:0;}

/* ---- WWM hub grid variant (b): pull-quote intro folded into the .cards--num grid as its
   first cell. The card's own left accent edge + padding already marks the block off, so the
   nested pull-quote drops its own rule/indent (avoids a doubled line). No data-n attribute
   -> no ghost numeral (it isn't one of the five numbered pathways). Not a link, so no
   hover-lift / pointer cursor. */
.card--intro{cursor:default;}
.card--intro:hover{transform:none;box-shadow:0 12px 30px rgba(23,19,16,.07);border-color:var(--hairline);}
.card--intro .pullquote{border-left:0;padding-left:0;max-width:none;}
.card--intro .rhythm{margin-top:var(--s3);}

/* =====================================================================
   MOBILE (<=680px) — learned b2 patterns
   ===================================================================== */
@media(max-width:680px){
  .page{padding-left:0;}
  .phero,.psec,.pcta{padding-inline:24px;}

  /* sections: tighter editorial rhythm */
  .psec{padding-block:clamp(40px,5.5vh,52px);}
  .pcta{padding-block:clamp(48px,8vh,64px);}

  /* ----- section contrast: alternate warm panels so each reads as a block ----- */
  .psec{background:var(--paper);}
  .psec--sand{background:var(--paper-3);}

  /* ----- statement hero: statement-led, intro cascade -----
     was min-height:88svh — client feedback: too much empty white space around the
     headline on mobile. Shrunk the box so the headline sits with a tasteful margin
     instead of floating; padding-top stays ~96px so the fixed nav never overlaps.
     (.phero--full pages, e.g. About, keep their own 100svh via the higher-specificity
     .phero.phero--full rule above — untouched, that's the intentional full-viewport
     reveal-on-scroll pattern, not this dead-space bug.) */
  .phero{min-height:clamp(420px,62svh,580px);padding-top:96px;padding-bottom:clamp(32px,5vh,56px);
    display:flex;flex-direction:column;justify-content:center;}
  .phero .frame{width:100%;}
  .phero .backlink{margin-bottom:18px;}
  /* DEFAULT is now bigger (client feedback: short/medium headlines should fill the
     width, not sit small in the box). clamp(1.7rem,8.2vw,3.6rem) was the old safe
     ceiling, sized down to protect the sporting/blog pages' single unbreakable long
     word ("consistently"/"responsibility") from overflowing at 360-430px.
     That old smaller size now lives on the .phero--long modifier below — add
     `phero--long` to a page's .phero element (tested empirically at 360/390/430px)
     only when its longest word actually overflows or crowds the edge at the bigger
     default. overflow-wrap stays as a safety net on both sizes, not the primary fix. */
  .phero h1{max-width:100%;font-size:clamp(2rem,9.5vw,4.2rem);line-height:.98;letter-spacing:-0.03em;word-spacing:.14em;overflow-wrap:break-word;}
  /* clamp(1.7rem,8.2vw,3.6rem) was the old site-wide ceiling, but tested empirically it still
     mid-word-breaks "RESPONSIBILITY," (blog) at 360-390px -- that word (with its trailing comma)
     is wider than "CONSISTENTLY", the word the old ceiling was actually tuned against. Sized this
     down further so every --long page's longest word (blog/sporting/bec) renders on one line
     with real margin at 360-430px, verified via range.getClientRects() per word, not just
     scrollWidth (a mid-word break doesn't trip scrollWidth but still reads as broken). */
  .phero.phero--long h1{font-size:clamp(1.5rem,7.2vw,3.3rem);}
  .phero .eyebrow{margin-bottom:16px;}
  .phero .lead{margin-top:22px;}
  .phero__rule{display:none;}

  /* intro cascade (mirrors the home's name-first landing) */
  html.js .phero .eyebrow{opacity:0;animation:pRise .7s cubic-bezier(.16,1,.3,1) .15s both;}
  html.js .phero h1{opacity:0;animation:pName .9s cubic-bezier(.16,1,.3,1) .3s both;}
  html.js .phero .lead{opacity:0;animation:pRise .7s cubic-bezier(.16,1,.3,1) .8s both;}
  html.js .phero .backlink{opacity:0;animation:pRise .7s cubic-bezier(.16,1,.3,1) .05s both;}
  @keyframes pName{from{opacity:0;transform:translateY(22px) scale(.985);}to{opacity:1;transform:none;}}
  @keyframes pRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

  /* ----- type: editorial scale (match the home mobile system) ----- */
  .psec h2{font-size:clamp(1.95rem,7.6vw,2.45rem);line-height:1.1;letter-spacing:-0.02em;}
  .psec h3{font-size:1.3rem;}
  .prose p,.lead,.psec .prose .em{max-width:100%;}
  .prose p{font-size:1.05rem;line-height:1.62;}
  .prose .em{font-size:1.2rem;}
  .pq{font-size:clamp(1.6rem,6.6vw,2.1rem);line-height:1.18;max-width:100%;}
  .psec .fixes{font-size:clamp(1.55rem,6.4vw,2.1rem);margin:var(--s3) 0;}
  .dropcap::first-letter{font-size:3.6rem;}

  /* bold key points stay punchy on mobile */
  .kpoints{margin-top:var(--s4);}
  .kpoints li{padding:var(--s3) 0;column-gap:var(--s3);}
  .kpoints li::before{font-size:1.3rem;}
  .kpoints li h3{font-size:1.2rem;}
  .bigstate{font-size:clamp(1.9rem,8vw,2.6rem);max-width:100%;}

  /* cards stack full-width with a clear accent edge */
  .cards{grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4);}
  .card{padding:var(--s4) var(--s3);border-left:3px solid var(--accent);}
  .card .go{min-height:44px;display:inline-flex;align-items:center;}

  /* pull-quote / rhythm block: hold readable size, tighter left rule indent */
  .pullquote{font-size:1.3rem;padding-left:var(--s2);max-width:100%;}
  .pullquote--subtitle{font-size:1.6rem;}
  .pullquote--sub{font-size:1.15rem;}
  .rhythm p{font-size:1.1rem;line-height:1.65;max-width:100%;}

  /* video placeholder: intentional caption + sensible height */
  .video{aspect-ratio:auto;height:190px;}
  .video .vl{font-size:0;letter-spacing:0;}
  .video .vl::after{content:"Coming soon";font-size:12px;letter-spacing:.16em;color:var(--ink-2);}

  /* stats band */
  .stats{grid-template-columns:repeat(3,1fr);gap:var(--s2);}
  .stat .n{font-size:clamp(1.5rem,6.5vw,2.1rem);}
  .stat .l{color:var(--ink-2);}     /* AA contrast for tiny captions */

  /* portrait keeps proportion, not a tall empty box */
  .portrait{aspect-ratio:4/5;}
  .statement{min-height:auto;}
  .split{gap:var(--s4);}

  /* lists / writing index */
  .list .item h3{font-size:1.2rem;}
  .toc li,.cat ul li{font-size:1.05rem;}

  /* ----- end CTA + footer ----- */
  .pcta h2{font-size:clamp(1.95rem,7.6vw,2.45rem);}
  .pfoot .frame{padding-top:var(--s4);}
  .pfoot .foot{flex-direction:column;align-items:flex-start;gap:var(--s3);}
  .pfoot .foot__links{gap:2px 18px;}
  .pfoot .foot__links a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;}
  .pfoot .foot__base{flex-direction:column;align-items:flex-start;gap:6px;}

  /* contact form: iOS-safe inputs */
  .cform{margin-top:var(--s4);}
  .cform .field input,.cform .field textarea{font-size:16px;min-height:48px;}
  .cform .btn{min-height:48px;}

  /* every tappable hits 44px */
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;}
  .backlink{min-height:44px;display:inline-flex;align-items:center;}
}

/* ----- mobile scroll-reveal (class added by pages.js) ----- */
.m-rev{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.m-rev.m-in{opacity:1;transform:none;}

/* line-field canvas + content stacking on mobile light panels */
@media(max-width:680px){
  .phero > *:not(.bgwave),.psec > *:not(.bgwave),.pcta > *{position:relative;z-index:1;}
}

/* reduced-motion: guarantee hero + revealed content are visible (not stuck hidden) */
@media(max-width:680px) and (prefers-reduced-motion:reduce){
  html.js .phero .eyebrow,html.js .phero h1,html.js .phero .lead,
  html.js .phero .backlink{opacity:1!important;animation:none!important;transform:none!important;}
  .m-rev{opacity:1!important;transform:none!important;}
}