/* ============================================================================
   refine.css — juanvegarra.com v23
   Art-direction layer. Loads AFTER site.css and after index.html's inline CSS.
   Everything here is additive or corrective; nothing in the base is deleted.

   Contents
   01  Typefaces
   02  Tokens — spacing scale, optical values
   03  Type system
   04  Kickers / eyebrows — hanging labels
   05  Composition — asymmetric grid, section rhythm, rules
   06  Material — paper grain, duotone, hairlines
   07  Numerals — stat treatment
   08  Cards — restraint pass
   09  Notebook — editorial hierarchy
   10  The book — real 3D, real light
   11  Header, announcement bar
   12  Motion
   13  Interactions & focus
   14  Responsive
   15  Diagram component
   ========================================================================== */

/* -- 01  Typefaces ---------------------------------------------------------
   Display: Instrument Serif — high-contrast, real voice at large sizes.
   Text:    Newsreader — retained; it reads well at 19px and has true italics.
   UI:      Instrument Sans — replaces Plus Jakarta Sans.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/instrument-sans.woff2') format('woff2-variations'),
      url('/assets/fonts/instrument-sans.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/instrument-serif-italic.woff2') format('woff2')}

:root{
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --display:"Instrument Serif","Newsreader",Georgia,serif;
}

/* -- 02  Tokens ----------------------------------------------------------- */
:root{
  /* Non-obvious scale. Nothing here sits on 4/8/16/24/32/48/64/96. */
  --s1:6px; --s2:10px; --s3:14px; --s4:22px; --s5:34px;
  --s6:52px; --s7:84px; --s8:118px; --s9:168px; --s10:220px;

  --maxw:1180px;
  --rule:rgba(20,20,20,.13);
  --rule-strong:rgba(20,20,20,.22);
  --paper-shade:rgba(20,20,20,.045);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --radius:16px;
}

/* -- 03  Type system ------------------------------------------------------ */
body{
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}

.hero h1,.page-hero h1,h1{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.018em;
  text-wrap:balance;
  hanging-punctuation:first last;
}
.hero h1{
  font-size:clamp(46px,6.4vw,88px);
  line-height:.96;
  letter-spacing:-.028em;
  margin-bottom:var(--s4);
  max-width:16ch;
}
.page-hero h1{
  font-size:clamp(40px,5.6vw,72px);
  line-height:1.0;
  letter-spacing:-.024em;
  max-width:18ch;
}
h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(30px,3.5vw,50px);
  line-height:1.04;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h3{font-family:var(--display);font-weight:400;letter-spacing:-.012em}
.q-card h3,.fw-card h3,.talk-card h3,.move-card h3,.start-card h3,
.step-panel h3,.tool-card h4,.ext-item h4,.cv-role-head h3{
  font-family:var(--display);font-weight:400;letter-spacing:-.012em;line-height:1.12
}
.q-card h3{font-size:clamp(24px,2.6vw,31px)}
.step-panel h3{font-size:clamp(28px,3.2vw,38px)}

/* Italic emphasis inside headlines: hero only. Elsewhere it became a tic. */
h1 em{font-family:var(--display);font-style:italic}
h2 em{font-style:italic;color:var(--accent)}
.no-em em{font-style:normal;color:inherit}

/* Reading text */
.hero-lede,.page-lede{
  font-family:var(--serif);
  font-size:clamp(18px,1.5vw,20.5px);
  line-height:1.58;
  max-width:52ch;
  color:var(--ink-2);
}
.article-body p{font-size:19.5px;line-height:1.66;max-width:64ch}
.article-body{max-width:none}
.thesis-body{font-size:clamp(18px,1.7vw,21.5px);line-height:1.56;max-width:62ch}
.thesis-body.wide{font-size:clamp(20px,2.1vw,27px);line-height:1.42;max-width:34ch}

/* Body copy measure discipline */
.q-teaser,.essay-card p,.fw-card p,.start-card p,.move-card p{max-width:44ch;line-height:1.58}
.step-panel p{max-width:56ch}

/* Small caps labels get real tracking, everything else loses it */
.btn{font-size:12px;letter-spacing:.07em;font-weight:600;padding:15px 28px;border-radius:2px}
.btn-solid:hover{transform:none;box-shadow:none;background:var(--accent) !important}
.btn-ghost{border-radius:2px}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--bg) !important}

/* -- 04  Kickers ----------------------------------------------------------
   Was: 11–12px uppercase, .18em tracking, on every section. Template signature.
   Now: sentence-case serif italic, no tracking, hung in the left margin.
   -------------------------------------------------------------------------- */
.eyebrow,.page-kicker,.hero-kicker,.essay-topic,.panel-kicker,.tool-label,
.q-num,.pill,.start-num,.rn-label,.ext-mark,.sources-label,.cv-card h4{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  font-size:15px;
  color:var(--accent);
}
.q-num,.pill,.start-num{
  background:transparent !important;border:0;padding:0;border-radius:0;display:block;margin-bottom:var(--s3)
}
.essay-topic{font-size:14.5px;margin-bottom:var(--s2)}
.cv-card h4{font-size:15px;margin-bottom:var(--s3)}
.rn-label,.ext-mark,.tool-label,.sources-label{font-size:14px}
.hero-kicker{color:var(--ink-3);font-size:15.5px;margin-bottom:var(--s4)}
.filter-btn{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;font-weight:600;
  text-transform:none;border-radius:2px;padding:9px 16px
}

/* Hanging label: kicker sits in the left margin at the heading's baseline. */
@media (min-width:1080px){
  .section-head{position:relative;padding-left:0}
  .wrap > .section-head > .eyebrow{
    position:absolute;left:-146px;top:.55em;width:124px;text-align:right;
    display:block;margin:0;line-height:1.3
  }
  .section-head{margin-left:0}
  .wrap > .section-head,.wrap .split-head > div{padding-left:0}
}

/* -- 05  Composition ------------------------------------------------------
   Break the centred stack. Content sits off-centre; sections breathe unevenly.
   -------------------------------------------------------------------------- */
.wrap{max-width:1280px;padding:0 var(--s6)}
.wrap-narrow{max-width:780px;padding:0 var(--s6)}

@media (min-width:1080px){
  /* Off-centre frame. Narrow and wide sections share the SAME content edges,
     so a text-only section lines up with the grid sections above and below it
     instead of ending short and looking broken. Reading measure is capped on
     the prose itself, not on the container. */
  .wrap,.wrap-narrow{
    display:block;
    max-width:1320px;
    margin:0 auto;
    padding-left:168px;
    padding-right:92px;
  }
  .wrap-narrow > p,
  .wrap-narrow > p.move-sub,
  .wrap-narrow > p.thesis-body,
  .wrap-narrow > ul,
  .wrap-narrow > ol{max-width:70ch}
  .hero-grid,.book-grid,.stats-grid,.q-grid,.essay-grid,
  .grid-3,.photo-grid,.fact-grid,.stepper,.ext-list,.related-grid,.cv-grid,.start-grid{
    display:grid
  }
  .footer-grid,.split-head,.cta-row,.chip-row,.filter-row,.sub-row,.nb-controls{display:flex}
  .header-inner{display:flex}
  .hero-grid{grid-template-columns:1.22fr .78fr;gap:var(--s7)}
}

/* Section rhythm — deliberately uneven. */
.section{padding:var(--s8) 0}
.section + .section{border-top:0}
.section.tint{padding:var(--s9) 0}
#free-tool{padding-top:0;padding-bottom:var(--s7)}
.hero{padding:var(--s7) 0 var(--s6)}
.answer-band{padding:var(--s6) 0 var(--s3) !important}
.stats{padding:var(--s5) 0 var(--s8)}
.quote{padding:var(--s4) 0 var(--s8)}
#notebook{padding-top:var(--s9)}
#conversation{padding-bottom:var(--s9)}

/* Hairline rules do the section-separating work borders used to. */
.section.ruled{position:relative}
.section.ruled::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule)
}

/* Full-bleed hairline above section heads on wide screens */
@media (min-width:1080px){
  .section-head::before{
    content:"";position:absolute;top:-38px;left:-168px;right:-92px;height:1px;
    background:var(--rule);opacity:.9
  }
  .section-head{margin-bottom:var(--s6)}
}

.split-head{align-items:baseline;margin-bottom:var(--s6)}
.split-head .all{
  font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;
  font-weight:400;text-transform:none;color:var(--accent);padding-bottom:0
}
.section-head p,.pattern-intro{max-width:46ch;font-size:16.5px}

/* Hero portrait: bleeds off the right edge, type overlaps it. */
@media (min-width:1080px){
  .hero{overflow:visible}
  .hero .portrait{
    border-radius:0;border:0;box-shadow:none;
    margin-right:-92px;margin-top:-40px;
    position:relative;z-index:0
  }
  .hero .portrait img{aspect-ratio:4/5.1}
  .hero-grid > div:first-child{position:relative;z-index:2}
  .hero h1{position:relative;z-index:2}
}
.portrait::after{background:linear-gradient(180deg,rgba(20,20,20,0) 58%,rgba(20,20,20,.55) 100%)}
.portrait-tag,.photo-tag{
  border-radius:0;border:0;background:rgba(20,20,20,.72);
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;font-size:14px;padding:8px 14px
}
.portrait-tag b,.photo-tag b{font-style:normal;font-weight:600;color:#E8CFA9}

/* Industry strip — rule-separated, no arrow chain on small screens. */
.industry-strip{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;font-weight:600;
  gap:0;margin-bottom:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);
  max-width:44rem
}
.industry-strip .arrow{margin:0 12px;opacity:.55}

/* -- 06  Material ---------------------------------------------------------
   Paper grain, duotone archive, hairlines. No 3D, no gradients, no blobs.
   -------------------------------------------------------------------------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* Kill the inherited radial glows — they read as template atmosphere. */
.hero::before,.page-hero::before{display:none !important}

/* Photographs stay in colour. Juan's archive is the one thing on this site
   nobody else has; treating it as texture threw away what makes it his. */
.photo-card,.portrait{position:relative}
.photo-card img,.portrait img{filter:none}
.photo-card,.arc-frame{border-radius:2px}
.photo-card{box-shadow:none;border-color:var(--rule)}
.photo-card:hover{transform:none;box-shadow:0 20px 46px rgba(20,20,20,.13)}
.photo-grid{gap:2px}

/* -- 07  Numerals ---------------------------------------------------------
   Figure and unit given different optical weight so the number reads designed.
   -------------------------------------------------------------------------- */
.stats-grid{grid-template-columns:repeat(2,1fr);gap:0;max-width:920px;border-top:1px solid var(--rule)}
.stat{
  border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent !important;
  box-shadow:none;padding:var(--s5) var(--s5) var(--s5) 0;min-height:0
}
.stat:hover{transform:none;box-shadow:none;border-color:var(--rule)}
.stat:nth-child(odd){border-right:1px solid var(--rule);padding-right:var(--s6)}
.stat:nth-child(even){padding-left:var(--s6)}
.stat-num{
  font-family:var(--display);font-weight:400;
  font-size:clamp(52px,6vw,84px);line-height:.86;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums lining-nums;
  padding-bottom:var(--s3);margin-bottom:var(--s2)
}
.stat-num sup,.stat-num .u{
  font-size:.42em;vertical-align:.62em;color:var(--accent);opacity:.72;
  letter-spacing:0;font-weight:400
}
.stat-label{
  font-size:15px;color:var(--ink-2);line-height:1.5;min-height:0;max-width:30ch;
  font-family:var(--serif)
}
.cv-stat b{font-family:var(--display);font-weight:400;font-size:30px}

/* -- 08  Cards — restraint pass ------------------------------------------
   Was: 20px radius, drop shadow, 4px lift, colour-shifting border on every card.
   Now: hairline, no shadow, a copper rule that grows on hover.
   -------------------------------------------------------------------------- */
.q-card,.essay-card,.fw-card,.talk-card,.move-card,.fact-card,.start-card,
.tool-card,.ext-item,.cv-card,.tool-list li,.read-next,.bio-card,.sub-box{
  border-radius:2px;box-shadow:none;border-color:var(--rule);
  background:var(--bg-card)
}
.q-card:hover,.essay-card:hover,.fw-card:hover,.talk-card:hover,.move-card:hover,
.start-card:hover,.tool-card:hover,.ext-item:hover,.read-next:hover{
  transform:none;box-shadow:none;border-color:var(--rule-strong)
}
.q-card,.essay-card,.start-card{position:relative;padding:var(--s5) var(--s5) var(--s5)}
.q-card::after,.essay-card::after,.start-card::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);
  transition:width .42s var(--ease-out)
}
.q-card:hover::after,.essay-card:hover::after,.start-card:hover::after{width:100%}
.q-grid,.essay-grid{gap:2px}
.grid-3,.ext-list,.related-grid,.start-grid{gap:2px}
.featured{
  border-radius:2px;background:transparent;border:0;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);padding:var(--s6) 0;margin-bottom:var(--s7)
}
.featured .pill{background:transparent !important}
.featured h2,.featured h3{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);line-height:1.02;letter-spacing:-.02em}
.featured p{max-width:50ch;font-family:var(--serif);font-size:18.5px;line-height:1.55}
.featured p + p{margin-top:var(--s3)}
.step-panel{border-radius:2px;box-shadow:none;border-color:var(--rule);padding:var(--s6)}
.sub-box{border-radius:2px;border-left-width:2px;padding:var(--s6)}
.sub-row input[type=email]{border-radius:2px}
.btn{border-radius:2px}
.chip{border-radius:2px;font-family:var(--sans);font-size:11.5px;letter-spacing:.04em}
.fw-glyph{border-radius:2px}
/* Testimonials run 60+ words. Display leading (1.14) and 42px type were tuned
   for a short pull-quote and turn a real endorsement into a wall of text.
   Default is now a readable treatment; .display is opt-in for short quotes. */
.quote-card{border-left-width:2px;padding-left:var(--s5);max-width:820px}
.quote-card blockquote{
  font-family:var(--display);font-style:italic;
  font-size:clamp(20px,2.15vw,28px);line-height:1.36;letter-spacing:-.012em;
  text-wrap:pretty;max-width:730px
}
.quote-card.display{max-width:760px}
.quote-card.display blockquote{
  font-size:clamp(24px,3vw,38px);line-height:1.18;letter-spacing:-.022em;max-width:690px
}
.quote-card figcaption{font-family:var(--serif);font-size:15.5px;margin-top:var(--s4)}

/* -- 09  Notebook — editorial hierarchy ----------------------------------- */
.essay-grid.lead{grid-template-columns:1.35fr 1fr;gap:var(--s6)}
.essay-card.is-lead{
  border:0;border-top:2px solid var(--ink);padding:var(--s5) 0 0;background:transparent
}
.essay-card.is-lead::after{display:none}
.essay-card.is-lead h3{font-family:var(--display);font-size:clamp(32px,3.9vw,50px);line-height:1.0;letter-spacing:-.022em;margin-bottom:var(--s3)}
.essay-card.is-lead p{font-family:var(--serif);font-size:19px;line-height:1.55;max-width:38ch}
.essay-stack{display:grid;gap:0;align-content:start}
.essay-stack .essay-card{
  border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:var(--s4) 0;background:transparent
}
.essay-stack .essay-card:first-child{border-top:1px solid var(--rule)}
.essay-stack .essay-card h3{font-size:21px;line-height:1.14}
.essay-stack .essay-card p{
  display:block;font-size:15px;line-height:1.5;max-width:46ch;margin-bottom:var(--s2)
}
.essay-stack .essay-card .read{display:inline-block;margin-top:var(--s2)}
.essay-stack .essay-card::after{height:1px}

/* -- 10  The book — the only legitimate 3D object on the site -------------- */
.book-stage{perspective:2000px;perspective-origin:58% 42%;padding:var(--s6) 0 var(--s7)}
.book{
  width:min(330px,78%);
  transform:rotateY(-19deg) rotateX(3.5deg) rotateZ(-.6deg);
  transition:transform .9s var(--ease-out)
}
.book-stage:hover .book{transform:rotateY(-11deg) rotateX(1.5deg) rotateZ(-.2deg)}
.book img{
  border-radius:1px 4px 4px 1px;
  /* key light upper-left ~35°, plus the gutter shading a real cover has */
  box-shadow:
    inset 26px 0 34px -26px rgba(0,0,0,.55),
    inset -2px 0 2px -1px rgba(255,255,255,.28);
}
.book::before{ /* spine */
  width:38px;
  background:linear-gradient(90deg,#1A1A1A 0%,#2E2620 46%,#161616 100%);
  transform:rotateY(-90deg) translateX(-19px) translateZ(19px);
  border-radius:2px 0 0 2px;
  box-shadow:inset -6px 0 10px -4px rgba(0,0,0,.6)
}
.book::after{ /* page block */
  right:-11px;width:11px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,0) 40%),
    repeating-linear-gradient(180deg,#F4F0E7 0 1.5px,#D8D1C1 1.5px 2.6px);
  transform:rotateY(34deg);
  border-radius:0 1px 1px 0
}
.book-shadow{ /* contact shadow — tight and close, not an ambient float */
  left:4%;right:2%;bottom:-16px;height:26px;
  background:radial-gradient(60% 100% at 46% 50%,rgba(20,20,20,.42),rgba(20,20,20,0) 72%);
  filter:blur(9px);transform:none
}
.book-stage::after{ /* cast shadow, offset down-right from the key light */
  content:"";position:absolute;z-index:-1;
  left:18%;right:6%;bottom:6%;height:40px;
  background:radial-gradient(closest-side,rgba(20,20,20,.16),transparent 78%);
  filter:blur(18px)
}
.book-stage{position:relative}

/* -- 11  Header + announcement bar ---------------------------------------- */
.site-header{border-bottom:1px solid transparent;transition:border-color .3s var(--ease-io)}
.header-inner{height:76px;transition:height .32s var(--ease-io);padding:0 var(--s6);max-width:1320px}
@media (min-width:1080px){
  /* the logo has to sit on the same left edge as the page content */
  .header-inner{padding-left:168px;padding-right:92px}
}
.site-header.scrolled .header-inner{height:56px}
.site-header.scrolled{border-bottom-color:var(--rule)}
.logo{
  font-family:var(--display);font-weight:400;font-size:19px;
  letter-spacing:.01em;text-transform:none
}
.logo em{display:none} /* the accent period. retired. */
.nav a{
  font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-2);
  position:relative;padding-bottom:3px
}
.nav a::after{
  content:"";position:absolute;left:0;right:auto;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width .22s var(--ease-io)
}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.lang-pill{border-radius:2px;border-color:var(--rule);font-family:var(--sans);letter-spacing:.04em}
.lang-pill a{opacity:.55;transition:opacity .2s}
.lang-pill a:hover{opacity:1;background:transparent}

.announce{
  background:var(--ink);color:#F2EADC;text-align:center;font-size:13.5px;
  letter-spacing:.01em;padding:10px 52px 10px 20px;line-height:1.4;position:relative;
  font-family:var(--serif)
}
.announce a{color:#DFAE72;border-bottom:1px solid rgba(223,174,114,.42)}
.announce em{font-style:italic}
.announce-x{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#B9A88F;cursor:pointer;font-size:18px;line-height:1;
  padding:6px 10px;font-family:var(--sans)
}
.announce-x:hover{color:#F2EADC}
html.announce-off .announce{display:none}

/* -- 12  Motion -----------------------------------------------------------
   Removed: liquid-motion.js entirely (hero wave, drifting blobs, click ripple,
   button liquid fill), the staggered translateY reveal, and hover lift on cards.
   Kept: one masked headline reveal, one honest fade, one signature stepper.
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(9px);transition:opacity .52s var(--ease-out),transform .52s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* Masked headline reveal — clip, not fade. Runs once, no delay chain. */
.mask-in{clip-path:inset(0 0 106% 0);animation:maskIn .72s var(--ease-out) .06s forwards}
@keyframes maskIn{to{clip-path:inset(0 0 -12% 0)}}

/* Stepper — the one signature interaction. Physical, with overshoot. */
.step-btn{border-radius:0;transition:background .2s var(--ease-io)}
.step-node{
  border-radius:0;width:30px;height:30px;font-family:var(--sans);font-size:11px;
  transition:border-color .34s cubic-bezier(.34,1.36,.64,1),color .34s var(--ease-out),box-shadow .34s var(--ease-out)
}
.step-btn.active .step-node{box-shadow:none;border-color:var(--accent);background:var(--accent);color:#FBF6EC}
.step-rail::after{
  transition:height .46s cubic-bezier(.34,1.28,.64,1);
  background:var(--accent)
}
.step-rail::before,.step-rail::after{left:14px;width:1px}
.step-name{font-family:var(--sans);font-size:14.5px;font-weight:500}
.step-years{font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0;text-transform:none}
.step-panel{animation:panelIn .26s var(--ease-out) both}
@keyframes panelIn{from{opacity:0;transform:scale(.987)}to{opacity:1;transform:none}}

/* Links: a copper rule that grows from the left. Never an underline slide. */
.hero-contact a,.footer-id a,.article-foot a,.related a,.q-drawer-inner a{
  border-bottom:1px solid var(--rule);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;
  transition:background-size .18s var(--ease-io),color .18s var(--ease-io)
}
.hero-contact a:hover,.footer-id a:hover,.article-foot a:hover,
.related a:hover,.q-drawer-inner a:hover{background-size:100% 1px;color:var(--accent)}

.readbar{height:2px;background:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .mask-in{animation:none;clip-path:none}
  .step-panel{animation:none}
  .reveal{opacity:1;transform:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* -- 13  Interactions & focus --------------------------------------------- */
::selection{background:var(--accent);color:#FBF6EC}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px
}
html{scroll-behavior:smooth}
:target,[id]{scroll-margin-top:104px}

/* Disclosure chevron: SVG, rotates 90°. Replaces the raw ▸ glyph. */
.q-toggle{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:15.5px;
  letter-spacing:0;margin-top:var(--s4)
}
.q-toggle .chev{
  width:9px;height:9px;display:inline-block;font-size:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l5 4-5 4z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l5 4-5 4z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .2s var(--ease-io)
}
.q-card.open .q-toggle .chev{transform:rotate(90deg)}
.q-drawer{transition:max-height .38s var(--ease-out),opacity .3s var(--ease-out)}
.q-drawer-inner p{font-family:var(--serif);font-size:16px;line-height:1.55}

.rooms-list li{font-family:var(--serif);font-style:italic;font-size:16.5px;letter-spacing:0;text-transform:none;font-weight:400}
.nb-search{border-radius:2px;font-family:var(--sans)}
.dx-opt{border-radius:2px}
.dx-opt:hover{transform:none;border-color:var(--accent);box-shadow:none}
.dx-q,.dx-verdict{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.04}
.dx-step{font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none;font-size:14.5px}

/* Footer */
.site-footer{padding:var(--s7) 0 var(--s7)}
.footer-id{font-family:var(--sans);font-size:14px;line-height:1.85}
.footer-note{
  font-family:var(--display);font-style:italic;font-size:clamp(19px,2vw,26px);
  line-height:1.18;max-width:16ch;color:var(--ink-2);text-align:right
}

/* -- 14  Responsive ------------------------------------------------------- */
@media (max-width:1079px){
  .wrap,.wrap-narrow{padding-left:var(--s5);padding-right:var(--s5)}
  .section-head > .eyebrow{position:static;width:auto;text-align:left;margin-bottom:var(--s2)}
}
@media (max-width:980px){
  .hero .portrait{margin:0;max-width:460px}
  .essay-grid.lead{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:720px){
  .section{padding:var(--s7) 0}
  .section.tint{padding:var(--s7) 0}
  #notebook,#conversation{padding-top:var(--s7);padding-bottom:var(--s7)}
  .wrap,.wrap-narrow{padding-left:var(--s4);padding-right:var(--s4)}
  .hero h1{font-size:clamp(38px,10.5vw,54px);max-width:none}
  .hero-lede{font-size:18px}
  .header-inner{height:60px;padding:0 var(--s4)}
  .site-header.scrolled .header-inner{height:52px}

  /* Stats stay 2×2 — never a six-screen scroll of numbers. */
  .stats-grid{grid-template-columns:1fr 1fr;gap:0}
  .stat{padding:var(--s4) var(--s3) var(--s4) 0}
  .stat:nth-child(odd){padding-right:var(--s4)}
  .stat:nth-child(even){padding-left:var(--s4)}
  .stat-num{font-size:clamp(38px,11vw,52px)}
  .stat-label{font-size:13.5px}

  /* Arrow chain would ladder-wrap. Rule-separated stack instead. */
  .industry-strip{display:block;font-size:11px;line-height:2.1}
  .industry-strip .arrow{display:none}
  .industry-strip b{display:block;border-bottom:1px solid var(--rule);padding:5px 0}
  .industry-strip b:last-child{border-bottom:0}

  /* Field notes: horizontal snap rail with peek, not ten full-width images. */
  .photo-grid{
    display:flex;overflow-x:auto;gap:2px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-right:calc(-1 * var(--s4));padding-right:var(--s4)
  }
  .photo-grid::-webkit-scrollbar{display:none}
  .photo-grid .photo-card{flex:0 0 78%;scroll-snap-align:start}
  .photo-grid .wide{grid-column:auto}

  .footer-note{text-align:left;max-width:24ch;margin-top:var(--s4)}
  .quote-card,.quote-card.display{max-width:none}
  .quote-card blockquote,.quote-card.display blockquote{max-width:none}
  .quote-card.display blockquote{font-size:26px;line-height:1.24}
  .thesis-body{max-width:none}
  .thesis-body.wide{font-size:21px}
  .book-stage{padding:var(--s5) 0 var(--s6)}
  .btn{padding:14px 22px;min-height:44px}
  .hero-contact{line-height:2.2}
  .hero-contact a{display:inline-block;min-height:32px}
}

/* -- 15  Diagram component ------------------------------------------------
   Bold pass. The first version drew in hairlines and read as a chart. These
   are consultancy plates: heavy ink structure, copper mass, reversed blocks,
   and a poster header. They should survive being screenshotted into a deck.
   -------------------------------------------------------------------------- */
.diagram{
  margin:var(--s7) 0;padding:var(--s4) 0 var(--s4);
  border-top:4px solid var(--ink);border-bottom:1px solid var(--rule);
  background:transparent
}
.diagram-index{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 var(--s2)
}
.diagram-title{
  font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(26px,3vw,38px);line-height:1.02;color:var(--ink);
  margin:0 0 var(--s5)
}
.diagram figcaption{
  font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--ink-2);
  margin-top:var(--s5);max-width:62ch;
  padding-top:var(--s3);border-top:1px solid var(--rule)
}
.diagram svg{width:100%;height:auto;display:block;overflow:visible}

/* Drawing weights. Every value here is deliberate; the copper carries the
   argument and the ink carries the structure. */
.diagram .d-label{
  font-family:"Instrument Sans",sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.10em;fill:#3A342C;text-transform:uppercase
}
.diagram .d-title{font-family:"Newsreader",serif;font-style:italic;font-size:19px;fill:#141414}
.diagram .d-rev{font-family:"Newsreader",serif;font-style:italic;font-size:19px;fill:#F7F1E6}
.diagram .d-line{stroke:#141414;stroke-width:2.4;fill:none;stroke-linecap:square}
.diagram .d-accent{stroke:#6B3A16;fill:none;stroke-linecap:square;stroke-linejoin:miter}
.diagram .d-fill{fill:#6B3A16}
.diagram .d-node{fill:#141414}
.diagram .d-mass{fill:#6B3A16;stroke:none}
.diagram .d-block{fill:#141414;stroke:none}
.diagram .d-dash{stroke:#141414;stroke-width:1.8;stroke-dasharray:4 6;opacity:.45;fill:none}

/* -- 16  Additions from the content pass ---------------------------------- */
.q-grid.three{grid-template-columns:repeat(3,1fr);gap:2px}
.q-grid.three .q-card{padding:var(--s5) var(--s4) var(--s5) 0;border:0;border-top:1px solid var(--rule);background:transparent !important}
.q-grid.three .q-card:not(:last-child){border-right:1px solid var(--rule);padding-right:var(--s5)}
.q-grid.three .q-card:not(:first-child){padding-left:var(--s5)}
@media (max-width:900px){
  .q-grid.three{grid-template-columns:1fr}
  .q-grid.three .q-card,.q-grid.three .q-card:not(:last-child),.q-grid.three .q-card:not(:first-child){
    padding:var(--s4) 0;border-right:0;padding-left:0
  }
}
@media (max-width:980px){
  .essay-stack .essay-card p{max-width:none}
}
/* Toolkit block: three beats, last one is the line that lands */
.featured p:last-of-type{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.2vw,27px);line-height:1.2;color:var(--ink);margin-top:var(--s4)}

/* -- 17  Framework glyphs -------------------------------------------------
   The .fw-glyph slot held a dashed box with a text placeholder. It now holds
   the card-size diagram. Same slot, real drawing.
   -------------------------------------------------------------------------- */
.fw-glyph.fw-svg{
  border:0;background:transparent;padding:0 0 var(--s3);margin-bottom:var(--s4);
  border-bottom:1px solid var(--rule)
}
.fw-glyph.fw-svg svg{width:100%;height:auto;display:block}
.fw-glyph.fw-svg .d-label{font-family:"Instrument Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;fill:#3A342C;text-transform:uppercase}
.fw-glyph.fw-svg .d-title{font-family:"Newsreader",serif;font-style:italic;font-size:13px;fill:#141414}
.fw-glyph.fw-svg .d-rev{font-family:"Newsreader",serif;font-style:italic;font-size:13px;fill:#F7F1E6}
.fw-glyph.fw-svg .d-line{stroke:#141414;stroke-width:1.8;fill:none;stroke-linecap:square}
.fw-glyph.fw-svg .d-accent{stroke:#6B3A16;fill:none;stroke-linecap:square;stroke-linejoin:miter}
.fw-glyph.fw-svg .d-fill{fill:#6B3A16}
.fw-glyph.fw-svg .d-node{fill:#141414}
.fw-glyph.fw-svg .d-mass{fill:#6B3A16;stroke:none}
.fw-glyph.fw-svg .d-block{fill:#141414;stroke:none}
.fw-glyph.fw-svg .d-dash{stroke:#141414;stroke-width:1.4;stroke-dasharray:3 5;opacity:.4;fill:none}
.fw-glyph.fw-svg{border-bottom-width:2px;border-bottom-color:var(--ink)}
.fw-card{padding:var(--s5) var(--s5) var(--s5)}

@media (max-width:720px){
  .diagram{padding:var(--s4) 0 var(--s3);margin:var(--s5) 0}
  .diagram svg{min-width:520px}
  .diagram > svg{min-width:0}
  .diagram{overflow-x:auto}
}


/* -- 18  Homepage book block ---------------------------------------------
   The cover used to sit first in the DOM, so on any narrow screen a visitor
   met a bare book image before a single word of context. Copy leads now; the
   cover follows on mobile and sits to the right on desktop.
   -------------------------------------------------------------------------- */
.book-grid{grid-template-columns:1.28fr .72fr;gap:var(--s7);align-items:center}
.book-copy .eyebrow{display:block;margin-bottom:var(--s3)}
.book-copy h2{margin-bottom:var(--s4)}
.book-copy .serif-pull{
  font-family:var(--display);font-style:italic;
  font-size:clamp(21px,2.1vw,27px);line-height:1.22;
  margin-bottom:var(--s4);max-width:34ch
}
.book-copy p{max-width:58ch}
@media (max-width:980px){
  .book-grid{grid-template-columns:1fr;gap:var(--s5)}
  .book-stage{order:2}
  .book-copy{order:1}
}


/* -- 19  Width discipline -------------------------------------------------
   The frame was capped at 1320px with a 168px indent, which left a lot of a
   1440px+ window unused and squeezed button rows into wrapping. Widen the
   container on large screens and let the indent scale rather than sit fixed.
   -------------------------------------------------------------------------- */
@media (min-width:1080px){
  .wrap,.wrap-narrow{max-width:1500px;padding-left:clamp(96px,11vw,190px);padding-right:clamp(56px,6vw,110px)}
  .wrap-narrow > p,.wrap-narrow > p.move-sub,.wrap-narrow > p.thesis-body,
  .wrap-narrow > ul,.wrap-narrow > ol{max-width:74ch}
  .header-inner{max-width:1500px;padding-left:clamp(96px,11vw,190px);padding-right:clamp(56px,6vw,110px)}
  .wrap > .section-head > .eyebrow{left:clamp(-168px,-9.6vw,-92px);width:clamp(78px,8vw,142px)}
  .section-head::before{left:clamp(-190px,-11vw,-96px);right:clamp(-110px,-6vw,-56px)}
  .hero .portrait{margin-right:clamp(-110px,-6vw,-56px)}
}
/* Button rows should fill the line they are on, not orphan a third button. */
.cta-row{gap:var(--s3) var(--s3)}
.book-copy .cta-row .btn{padding-left:22px;padding-right:22px}


/* -- 20  Card affordance discipline ---------------------------------------
   One rule across the site: the heading is the link, and one trailing link
   states the action. Nothing else in a card is clickable.
     ->  navigates to another page
     v   jumps down the current page
   The homepage question cards used to carry a linked heading, an expand
   toggle AND a link inside the drawer — three affordances, two behaviours.
   Flattened: the answer is short enough to show.
   -------------------------------------------------------------------------- */
.q-answer{font-size:15.5px;color:var(--ink-2);line-height:1.55;max-width:44ch;margin-top:var(--s2)}
.q-card .read{margin-top:var(--s4);display:inline-block}
.essay-card .read,.q-card .read,.fw-card .card-link,.talk-card .read,.start-card .read{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink)
}
.essay-card .read:hover,.q-card .read:hover,.fw-card .card-link:hover{color:var(--accent)}
/* the whole card lifts its rule on hover, so the link reads as the card's own */
.q-card:hover .read,.essay-card:hover .read,.fw-card:hover .card-link{color:var(--accent)}


/* -- 21  Filling the frame on a large monitor -----------------------------
   Several blocks were set to a phone-friendly measure and then left alone in
   a full-width section, so on a 1440px+ display two thirds of the row sat
   empty and the page read as unfinished. Measures below are still within a
   comfortable reading range; they just stop pretending the window is narrow.
   -------------------------------------------------------------------------- */
@media (min-width:1080px){
  /* Thesis: heading holds the left column, the argument holds the right. */
  .thesis-split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:var(--s7);align-items:start}
  .thesis-split .thesis-head h2{max-width:14ch;margin:0}
  .thesis-split .thesis-copy .thesis-body.wide{max-width:44ch}

  /* Page ledes and section subheads sat at ~380–530px in a 1195px row. */
  .page-lede{max-width:62ch}
  .section-head p,.pattern-intro{max-width:58ch}
  .section-head{max-width:none}
  .featured p{max-width:64ch}
  .diagram figcaption{max-width:74ch}
}
@media (max-width:1079px){
  .thesis-split{display:block}
  .thesis-split .thesis-head h2{max-width:16ch}
}

/* --------------------------------------------------------------------------
   v27 · Visible focus indicators on text inputs
   Previously these set outline:none and signalled focus only by changing the
   border colour, which is not a sufficient indicator for keyboard users.
   -------------------------------------------------------------------------- */
.nb-search:focus-visible,
.sub-row input[type=email]:focus-visible,
.capture-form input[type=email]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color:var(--accent);
}