:root{
  --night:#100E0A;--night-2:#161310;--night-3:#1C1813;--forest:#1E2418;
  --cream:#F2ECE0;--cream-2:#C5BDAB;--dim:#8A8270;
  --ember:#C98B4B;--ember-soft:#E0AC74;
  --hair:rgba(242,236,224,.14);--hair-2:rgba(242,236,224,.075);
  --serif:'Instrument Serif',Georgia,serif;--sans:'Manrope',system-ui,-apple-system,sans-serif;
  --wrap:1300px;--gut:clamp(22px,4.4vw,68px);
  --sec-y:clamp(74px,9.5vh,124px);
  --rail-w:210px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:.98;margin:0}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.18;letter-spacing:-.012em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* film grain */
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.micro{font-size:.66rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.label{margin:0 0 20px;display:flex;align-items:center;gap:13px}
.label::before{content:"";width:22px;height:1px;background:var(--ember);opacity:.8;flex:none}

.rv{opacity:0;transform:translateY(18px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .45s ease,border-color .45s ease}
.nav.solid{background:rgba(16,14,10,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair-2)}
.nav-in{display:flex;align-items:center;gap:clamp(22px,3.4vw,42px);height:72px;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.brand{font-weight:600;font-size:.8rem;letter-spacing:.15em;color:var(--cream);text-decoration:none;flex:none}
.nav-links{display:flex;gap:clamp(20px,2.8vw,36px);margin-left:auto}
.nav-links a{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,236,224,.8);text-decoration:none;padding:10px 0;transition:color .25s ease}
.nav-links a:hover{color:var(--ember-soft)}
.nav-links a[aria-current=page]{color:var(--cream);border-bottom:1px solid var(--ember)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:54px;padding:16px 32px;
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--ember);background:var(--ember);color:var(--night);cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.btn:hover{background:var(--ember-soft);border-color:var(--ember-soft);color:var(--night)}
.btn-sm{min-height:40px;padding:9px 20px;font-size:.68rem}
.note{margin:0;font-size:.8rem;color:var(--dim)}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:clamp(580px,92svh,860px);display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--hair-2)}
/* the photograph runs most of the width. A portrait source in a landscape box
   crops hard, so it stops short of full bleed to keep the framing intact. */
/* Two layers. The source photograph is portrait, so a single cover-cropped image
   in a landscape hero over-scales and eats the body. Layer one is a blurred copy
   for width and atmosphere. Layer two is the portrait at its true proportions,
   anchored right and feathered on its left edge so the join is invisible. */
.hero-bg{position:absolute;inset:0;overflow:hidden;background:var(--night)}
.hero-blur{position:absolute;top:-8%;left:-8%;width:116%;height:116%;
  object-fit:cover;object-position:50% 28%;
  filter:blur(38px) saturate(.62) brightness(.46)}
/* The element's aspect ratio already equals the source image's, so object-fit
   has nothing to crop and object-position is inert. The vertical offset is the
   only real control: it lifts the frame past the empty foliage above his head
   so more of him is in shot. Mobile resets this with inset:0. */
.hero-subject{position:absolute;top:-13%;right:0;height:100%;width:auto;max-width:none;
  transform-origin:100% 12%;
  filter:saturate(.96) contrast(1.02) brightness(1.06);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 12%,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 12%,#000 34%);
  animation:heroSettle 2s cubic-bezier(.16,1,.3,1) both}
@keyframes heroSettle{from{transform:scale(1.34)}to{transform:scale(1.26)}}
/* the image bleeds under the copy. The scrim holds only as far as the text runs,
   then releases fast so the face and the foliage stay open. */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(16,14,10,.92) 0%,rgba(16,14,10,.88) 18%,rgba(16,14,10,.72) 32%,
    rgba(16,14,10,.42) 44%,rgba(16,14,10,.14) 56%,rgba(16,14,10,0) 68%),
  linear-gradient(180deg,rgba(16,14,10,.42) 0%,rgba(16,14,10,.04) 18%,rgba(16,14,10,.04) 68%,rgba(16,14,10,.5) 92%,rgba(16,14,10,.78) 100%)}
.hero-in{position:relative;z-index:2;width:100%;
  padding-left:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
  padding-right:clamp(360px,45%,700px);padding-top:64px;
  /* the rail is pinned to the bottom of the hero, so the copy has to clear it.
     On a short viewport the hero grows past min-height rather than overlap. */
  padding-bottom:clamp(92px,11svh,116px)}
.hero h1{font-size:clamp(2.7rem,5.4vw,5.6rem);max-width:15ch;margin:0 0 26px;line-height:.99;
  letter-spacing:-.022em;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--ember)}
.hero-sub{font-size:clamp(1.02rem,1.2vw,1.14rem);color:var(--cream-2);max-width:44ch;margin-bottom:32px}
.hero-sub p{margin:0 0 .78em}
.hero-sub p:last-child{margin-bottom:0}
.hero-sub .turn{color:var(--cream)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

.hero-rail{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid var(--hair-2)}
.hero-rail-in{max-width:var(--wrap);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:clamp(12px,1.9vw,32px)}
.hero-rail span{white-space:nowrap}
/* four items plus the cue will not fit under ~1200px, so the cue steps aside */
@media (max-width:1200px){.hero-rail .hero-rail-in .cue{display:none}}
@media (max-width:1000px){
  .hero-rail .hero-rail-in{gap:clamp(10px,1.6vw,22px);font-size:.6rem;letter-spacing:.16em}}
.hero-rail .sep{width:3px;height:3px;border-radius:50%;background:var(--ember);opacity:.7;flex:none}
.hero-rail .cue{margin-left:auto;display:flex;align-items:center;gap:10px}
.hero-rail .cue i{display:block;width:34px;height:1px;background:var(--hair);position:relative;overflow:hidden}
.hero-rail .cue i::after{content:"";position:absolute;inset:0;background:var(--ember);
  animation:cue 2.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}

/* ---------- interior page hero ---------- */
.phero{padding:calc(72px + clamp(56px,9vh,110px)) 0 clamp(46px,6vw,78px);border-bottom:1px solid var(--hair-2)}
.phero h1{font-size:clamp(2.6rem,6vw,5.4rem);line-height:1;max-width:17ch;letter-spacing:-.022em}
.phero h1 em{font-style:italic;color:var(--ember)}
.phero .sub{margin-top:clamp(22px,2.6vw,32px);font-size:clamp(1.04rem,1.3vw,1.2rem);
  color:var(--cream-2);max-width:46ch}

/* ---------- sections + index rail ---------- */
.sec{padding:var(--sec-y) 0;background:var(--night-2);border-bottom:1px solid var(--hair-2)}
.sec.alt{background:var(--night)}
.sec.warm{background:var(--night-3)}

/* timestamp: drops the reader into a specific moment before the question */
.stamp{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember);opacity:.85;margin:0 0 clamp(18px,2.2vw,28px)}
.sec.light .stamp{color:var(--ember);opacity:1}

/* ---------- light sections: the page alternates dark / cream ---------- */
.sec.light{background:var(--cream);color:var(--night);border-bottom-color:rgba(16,14,10,.14)}
.sec.light h2,.sec.light h3{color:var(--night)}
.sec.light .micro{color:rgba(16,14,10,.52)}
.sec.light .rail .num,.sec.light .bio-id .num{color:var(--ember);opacity:.8}
.sec.light .rail hr,.sec.light .bio-id hr,.sec.light .list,
.sec.light .facts,.sec.light .aside{border-color:rgba(16,14,10,.16)}
.sec.light .list li{border-bottom-color:rgba(16,14,10,.16)}
.sec.light .list li b{color:var(--ember);opacity:.85}
.sec.light .list li span,.sec.light .prose{color:#3E392F}
.sec.light .list li:hover{background:rgba(16,14,10,.035)}
.sec.light .list li:hover span{color:var(--night)}
.sec.light .end,.sec.light .prose .em{color:var(--night)}
.sec.light .end em{color:var(--ember)}
.sec.light .lede{color:rgba(16,14,10,.6)}
.sec.light .facts div{border-right-color:rgba(16,14,10,.16);border-bottom-color:rgba(16,14,10,.16)}
.sec.light .facts b{color:var(--ember)}
.sec.light .facts p,.sec.light .bio-shot figcaption,.sec.light .aside{color:rgba(16,14,10,.58)}
.rail hr{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.16,1,.3,1) .2s}
.rail.in hr{transform:scaleX(1)}
.sec h2{font-size:clamp(2.2rem,4.6vw,3.8rem);max-width:16ch;margin-bottom:clamp(34px,4vw,52px);line-height:1.03}
.sec h2 em{font-style:italic;color:var(--ember)}

.grid2{display:grid;grid-template-columns:var(--rail-w) 1fr;gap:clamp(28px,5vw,84px);align-items:start}
.rail{position:sticky;top:104px}
.rail .num{font-family:var(--serif);font-size:2.6rem;color:var(--ember);opacity:.45;line-height:1;margin-bottom:12px}
.rail hr{border:0;border-top:1px solid var(--hair-2);margin:18px 0 0}

/* ---------- recognition list ---------- */
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-2)}
.list li{border-bottom:1px solid var(--hair-2);display:grid;grid-template-columns:70px 1fr;
  gap:12px;align-items:baseline;padding:20px 16px 20px 4px;position:relative;
  transition:background-color .3s ease,padding-left .35s cubic-bezier(.16,1,.3,1)}
.list li::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--ember);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.list li:hover{background:rgba(242,236,224,.026);padding-left:16px}
.list li:hover::before{transform:scaleY(1)}
.list li b{font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--ember);opacity:.72;
  font-variant-numeric:tabular-nums}
.list li span{font-size:clamp(1.04rem,1.4vw,1.2rem);color:var(--cream-2);line-height:1.48;
  transition:color .3s ease;max-width:48ch}
.list li:hover span{color:var(--cream)}
/* 22ch stacked this into five or six lines of very large type. Wider measure
   and a slightly smaller size lets it breathe across fewer, longer lines. */
.end{margin-top:clamp(36px,4.4vw,56px);font-family:var(--serif);font-size:clamp(1.55rem,2.6vw,2.2rem);
  line-height:1.22;max-width:34ch;color:var(--cream);letter-spacing:-.014em}
.end em{font-style:italic;color:var(--ember)}

/* ---------- mid-page cta band ---------- */
.cta-band{background:var(--forest);border-bottom:1px solid var(--hair-2);padding:clamp(38px,6vh,62px) 0}
.cta-band-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 44px}
.cta-band p{margin:0;max-width:42ch;font-family:var(--serif);color:var(--cream);
  font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.22;letter-spacing:-.012em}
.cta-band .sub{font-family:var(--sans);font-size:.86rem;color:rgba(242,236,224,.62);
  line-height:1.5;margin-top:10px;letter-spacing:0}
.cta-band .btn{flex:none}

/* ---------- wrapping ----------
   Headings balance, so lines come out even lengths instead of one long and one
   short. Body copy uses pretty, which stops a paragraph ending on a single
   orphaned word. Both fall back to normal wrapping where unsupported. */
h1,h2,h3,.turnline,.end,.qa-end,.bio-h,.pull blockquote,.tq blockquote,
.stmt p,.qs-done-lead{text-wrap:balance}
p,li,.lede,.prose p,.qs-lede,.aside,.facts p,.work-list p,
.breathe-lede,.breathe-foot{text-wrap:pretty}

/* ---------- lede ---------- */
.lede{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--dim);line-height:1.62;
  max-width:50ch;margin:0 0 clamp(30px,3.6vw,44px)}
.sec h2 + .lede{margin-top:calc(-1 * clamp(16px,2vw,26px))}
.lede + .lede{margin-top:calc(-1 * clamp(14px,1.6vw,22px))}
/* same breath rhythm as the story: one thought per line, air between */
.lede.beats p{margin:0 0 .85em}
.lede.beats p:last-child{margin:0}

/* the sentence where the page stops being read and starts being felt.
   Sized between body copy and a heading so it registers as a change of address. */
.turnline{margin:clamp(30px,3.6vw,44px) 0 0;font-family:var(--serif);
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2;letter-spacing:-.014em;
  color:var(--cream);max-width:26ch}
.turnline em{font-style:italic;color:var(--ember)}
.sec.light .turnline{color:var(--night)}

/* ---------- breath practice ----------
   The page stops asking him to read and asks him to do one thing. Ten breaths
   at four in, six out, which is the ratio taught in the work itself. */
.breathe{background:#0C0A08;text-align:center}
.breathe-in{max-width:560px;display:flex;flex-direction:column;align-items:center}
.breathe .label{justify-content:center}
.breathe h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.14;margin:0 0 14px;
  max-width:20ch;letter-spacing:-.016em}
.breathe-lede{font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.6;color:var(--dim);
  margin:0 0 clamp(38px,5vw,54px);max-width:38ch}

.breathe-stage{position:relative;width:min(74vw,300px);height:min(74vw,300px);
  display:grid;place-items:center;margin-bottom:clamp(30px,3.6vw,40px)}
.breathe-halo,.breathe-ring{position:absolute;inset:0;border-radius:50%;
  grid-area:1/1;animation-duration:10s;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-play-state:paused}
.breathe-halo{background:radial-gradient(circle,rgba(201,139,75,.5) 0%,rgba(201,139,75,0) 68%);
  opacity:.16;animation-name:breatheHalo}
.breathe-ring{border:1px solid rgba(224,172,116,.5);
  background:radial-gradient(circle at 50% 45%,rgba(224,172,116,.13),rgba(201,139,75,.05));
  transform:scale(.58);animation-name:breatheRing}
/* 40% in, 60% out. Four and six. */
@keyframes breatheRing{0%{transform:scale(.58)}40%{transform:scale(1)}100%{transform:scale(.58)}}
@keyframes breatheHalo{0%{opacity:.16;transform:scale(.7)}40%{opacity:.48;transform:scale(1.1)}100%{opacity:.16;transform:scale(.7)}}

.breathe-read{position:relative;grid-area:1/1;display:flex;flex-direction:column;
  align-items:center;gap:8px}
.breathe-phase{font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--cream)}
.breathe-count{font-family:var(--serif);font-size:1rem;color:var(--dim)}

.breathe-btn{font:inherit;font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  color:var(--cream);background:none;border:1px solid var(--hair);
  padding:17px 38px;min-height:52px;
  transition:border-color .3s ease,color .3s ease}
.breathe-btn:hover{border-color:var(--ember-soft);color:var(--ember-soft)}
.breathe-btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.breathe-foot{font-size:.84rem;line-height:1.6;color:var(--dim);
  margin:clamp(24px,2.8vw,30px) 0 0;max-width:34ch}

/* the scale is the instruction, so it stays. The halo is decoration and goes. */
@media (prefers-reduced-motion:reduce){
  .breathe-halo{animation:none;opacity:.22}
  .breathe-btn{transition:none}
}

/* ---------- four questions opt in ---------- */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.qs{margin-top:clamp(52px,6.5vw,84px);padding-top:clamp(34px,4vw,48px);
  border-top:1px solid var(--hair-2);max-width:52ch}
/* the opt-in lives in its own section now (after the breath practice, so the
   page gives before it asks). The rule and offsets were for its old life as a
   block inside section 01. */
.qs-solo{margin-top:0;padding-top:0;border-top:0}

/* ---------- essays (/writing) ----------
   Dark title band flowing into a cream body, matching the homepage's rhythm.
   Index rows and the keep-reading block share the slider's arrow language. */
.es-hero{background:var(--night);padding:calc(72px + clamp(46px,8vh,88px)) 0 clamp(46px,6vw,76px);
  border-bottom:1px solid var(--hair-2)}
.es-hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.022em;
  max-width:17ch;text-wrap:balance}
.es-hero h1 em{font-style:italic;color:var(--ember)}
.essay .prose.beats p{max-width:52ch}
.essay-foot{margin-top:clamp(40px,5vw,60px);font-size:.82rem;color:rgba(16,14,10,.45)}

.wlist{list-style:none;margin:0;padding:0}
.wlist li+li{border-top:1px solid rgba(16,14,10,.14)}
.wlist a{display:grid;grid-template-columns:clamp(52px,7vw,84px) 1fr 46px;
  gap:clamp(16px,3vw,34px);align-items:center;padding:clamp(28px,4vw,44px) 0;text-decoration:none}
.wlist .n{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--ember);opacity:.6;line-height:1}
.wlist b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08;letter-spacing:-.018em;
  color:var(--night);text-wrap:balance;transition:color .3s ease}
.wlist p{margin:8px 0 0;font-size:.98rem;line-height:1.55;color:rgba(16,14,10,.55);max-width:52ch}
.wlist .go{width:46px;height:46px;border-radius:50%;border:1px solid rgba(16,14,10,.2);
  display:grid;place-items:center;color:rgba(16,14,10,.5);
  transition:border-color .3s ease,color .3s ease}
.wlist .go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.wlist a:hover b{color:#B87A3C}
.wlist a:hover .go{border-color:var(--ember);color:#B87A3C}
.wlist a:hover .go svg{transform:translateX(3px)}

.more{margin-top:clamp(46px,6vw,68px)}
.more a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;
  border-top:1px solid rgba(16,14,10,.14);text-decoration:none;font-family:var(--serif);
  font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:-.012em;color:var(--night);
  transition:color .3s ease}
.more a:last-of-type{border-bottom:1px solid rgba(16,14,10,.14)}
.more svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.more a:hover{color:#B87A3C}
.more a:hover svg{transform:translateX(3px)}

@media (max-width:640px){
  .wlist a{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .wlist .n{font-size:1.05rem;opacity:.7}
  .wlist .go{display:none}
}
.qs h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--cream);margin:0 0 clamp(18px,2vw,26px);max-width:18ch}
.qs-lede{font-size:clamp(1rem,1.2vw,1.1rem);color:var(--dim);line-height:1.66;margin:0 0 1em}
.qs-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,32px)}
/* display:flex beats the UA [hidden] rule, so the form lingered after success */
.qs-form[hidden]{display:none}
.qs-form input[type=email]{flex:1 1 240px;min-width:0;
  background:rgba(242,236,224,.04);border:1px solid var(--hair);color:var(--cream);
  font:inherit;font-size:1rem;padding:15px 18px;border-radius:0;
  transition:border-color .3s ease,background-color .3s ease}
.qs-form input[type=email]::placeholder{color:var(--dim)}
.qs-form input[type=email]:focus{outline:none;border-color:var(--ember);
  background:rgba(242,236,224,.06)}
.qs-form .btn{flex:none}
.qs-form .btn[disabled]{opacity:.55;pointer-events:none}
/* bots fill this, men do not */
.qs-pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* interaction-only renders nothing until Cloudflare wants a challenge, so this
   collapses to zero height on the common path */
.qs-turnstile{flex:1 0 100%}
.qs-turnstile:empty{display:none}
.qs-note{font-size:.84rem;color:var(--dim);margin:14px 0 0;line-height:1.6}
.qs-err{font-size:.88rem;color:var(--ember-soft);margin:14px 0 0}

.qs-done-lead{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.2;color:var(--cream);margin:0 0 20px;max-width:22ch}

.sec.light .qs h3,.sec.light .qs-done-lead{color:var(--night)}
.sec.light .qs-lede,.sec.light .qs-note{color:rgba(16,14,10,.58)}
.sec.light .qs-form input[type=email]{background:rgba(16,14,10,.03);
  border-color:rgba(16,14,10,.18);color:var(--night)}

/* ---------- statement band ---------- */
.stmt{background:var(--forest);padding:clamp(80px,12vh,132px) 0;border-bottom:1px solid var(--hair-2)}
.stmt-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,60px);align-items:end}
.stmt p{font-family:var(--serif);font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1;
  max-width:16ch;margin:0;letter-spacing:-.02em;color:var(--cream)}
.stmt p em{font-style:italic;color:var(--ember-soft)}
.stmt .side{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;line-height:1.9;max-width:none;text-align:right;
  color:rgba(242,236,224,.42);padding-bottom:10px}

/* ---------- prose ---------- */
.prose{max-width:58ch;font-size:clamp(1.02rem,1.18vw,1.12rem);color:var(--cream-2);line-height:1.75}
.prose .em{color:var(--cream);font-family:var(--serif);font-size:clamp(1.45rem,2.5vw,2.05rem);
  line-height:1.2;letter-spacing:-.015em;margin:.9em 0;max-width:20ch}
.prose strong{color:var(--cream);font-weight:600}
/* breath rhythm: one thought per line, air between, so the story reads as
   exhalations rather than as paragraphs */
.prose.beats p{margin-bottom:.92em;max-width:46ch}
.prose.beats p:last-child{margin-bottom:0}
.prose.beats .em{margin:.7em 0 .8em}
.aside{margin-top:32px;padding-top:20px;border-top:1px solid var(--hair-2);
  font-size:.92rem;color:var(--dim);line-height:1.65;max-width:46ch}
.aside a{color:var(--ember);text-decoration:none;font-weight:600}
.aside a:hover{color:var(--ember-soft)}

/* ---------- four-up ---------- */
.tried{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,38px);
  border-top:1px solid var(--hair-2);padding-top:30px}
.tried h3{margin-bottom:12px}
.tried p{font-size:.94rem;color:var(--dim);line-height:1.62}

/* ---------- the work list ---------- */
.work-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-2)}
.work-list li{border-bottom:1px solid var(--hair-2);padding:clamp(20px,2.6vw,30px) 0;
  display:grid;grid-template-columns:64px minmax(0,16ch) 1fr;gap:clamp(14px,3vw,44px);align-items:baseline}
.work-list .n{font-family:var(--serif);font-size:1rem;color:var(--ember);opacity:.72}
.work-list h3{font-size:clamp(1.3rem,2.2vw,1.75rem)}
.work-list p{font-size:1rem;color:var(--dim);line-height:1.6;max-width:44ch}
.work-end{margin-top:clamp(30px,3.6vw,46px);font-size:1.02rem;color:var(--cream-2);max-width:58ch}

/* ---------- changes ---------- */
/* One column. Two halved the measure to ~410px, which wrapped every item onto a
   second line ending in one or two words. At full width each outcome is a
   single line, which is also how they are read. */
.changes{list-style:none;margin:0;padding:0}
.changes li{break-inside:avoid;position:relative;padding:0 0 22px 30px;
  font-size:clamp(1.02rem,1.35vw,1.14rem);color:var(--cream-2);line-height:1.5}
/* a short ember tick, matching the label marks, so the outcomes read as a list
   rather than stacked paragraphs */
.changes li::before{content:"";position:absolute;left:0;top:.72em;width:15px;height:1px;
  background:var(--ember);opacity:.85}
.changes.tight li{padding-bottom:14px;font-size:1rem;line-height:1.45}

/* ---------- beliefs (about) ---------- */
.beliefs{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-2)}
.beliefs li{border-bottom:1px solid var(--hair-2);padding:clamp(24px,3vw,34px) 0;
  display:grid;grid-template-columns:64px 1fr;gap:clamp(14px,3vw,40px);align-items:start}
.beliefs .n{font-family:var(--serif);font-size:1rem;color:var(--ember);opacity:.72;padding-top:8px}
.beliefs h3{font-size:clamp(1.35rem,2.4vw,1.95rem);margin-bottom:12px;max-width:24ch;line-height:1.12}
.beliefs p{font-size:1rem;color:var(--dim);line-height:1.66;max-width:58ch}

/* ---------- pull quote ---------- */
.pull{margin:clamp(38px,4.4vw,56px) 0 0;padding:clamp(26px,3vw,36px) 0 0;
  border-top:1px solid var(--hair-2)}
.pull blockquote{margin:0 0 14px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.55rem,3vw,2.4rem);line-height:1.12;letter-spacing:-.018em;
  color:var(--cream);max-width:22ch}
.pull cite{font-style:normal;font-size:.8rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* ---------- credential row: photo + facts ----------
   Palette rule: photography stays in colour. The grade is a light warm pass
   only (a touch of desaturation and warmth), enough to stop stage lighting
   fighting the palette without turning the picture into a graphic. */
.bio{display:grid;grid-template-columns:minmax(0,36%) 1fr;
  column-gap:clamp(22px,2.8vw,40px);align-items:start}
.bio-shot{margin:clamp(24px,2.8vw,34px) 0 0}
.bio-id{margin-top:0}
/* This top margin existed to push the prose down level with the photo back when
   the section had no heading. The heading does that job now, so the margin was
   only opening a hole under it. */
.bio .prose{margin:0}
.bio .facts{margin-top:clamp(30px,3.4vw,44px)}
/* the story had no heading, so its opening line was doing headline work in
   body type. This promotes that line and the prose starts after it. */
.bio-h{margin:0 0 clamp(24px,2.8vw,34px)}
/* the Wineland credential sits under the photograph it refers to */
.facts-solo{margin-top:clamp(22px,2.4vw,30px)}
.facts-solo div{border-right:0;padding-right:0}
.bio-id .num{font-family:var(--serif);font-size:2.2rem;color:var(--ember);opacity:.45;line-height:1;margin-bottom:10px}
.bio-id hr{border:0;border-top:1px solid var(--hair-2);margin:16px 0 0;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.16,1,.3,1) .2s}
.bio-id.in hr{transform:scaleX(1)}

.bio-shot .frame{overflow:hidden;background:var(--night-2)}
.bio-shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 44%;
  transform:scale(1.58);transform-origin:43% 56%;
  filter:saturate(.86) contrast(1.03) brightness(1.02) sepia(.08)}
.bio-shot figcaption{margin-top:13px;font-size:.78rem;line-height:1.5;color:var(--dim)}

@media (max-width:820px){
  /* mobile keeps the original reading order: label, story, photo, facts */
  .bio{display:flex;flex-direction:column;gap:24px}
  .bio-col-a,.bio-col-b{display:contents}
  .bio-id{order:1;margin-top:0}
  .bio-h{order:2;margin-bottom:0}
  .bio .prose{order:3;margin-top:0}
  .bio-shot{order:4;margin-top:0}
  .bio .facts-solo{order:5;margin-top:0}
  .bio .facts{order:6;margin-top:0}
  .bio-shot img{aspect-ratio:3/2;transform:scale(1.46);transform-origin:43% 54%}
  .bio-id .num{display:none}
  .bio-id hr{display:none}
}

/* ---------- facts band ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  margin-top:clamp(34px,4vw,48px);border-top:1px solid var(--hair-2)}
.facts div{padding:24px clamp(18px,2.4vw,32px) 4px 0;border-right:1px solid var(--hair-2)}
.facts div:last-child{border-right:0;padding-right:0}
.facts b{display:block;font-family:var(--serif);font-weight:400;line-height:1;
  font-size:clamp(1.5rem,2.4vw,2.05rem);color:var(--ember);margin-bottom:11px;letter-spacing:-.015em}
.facts p{font-size:.87rem;color:var(--dim);line-height:1.52;margin:0}
@media (max-width:760px){
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0;border-bottom:1px solid var(--hair-2);padding:20px 0 18px}
  .facts div:last-child{border-bottom:0}
}

/* ---------- portrait band ---------- */
.pband{overflow:hidden;background:var(--night-2);border-bottom:1px solid var(--hair-2)}
.pband img{width:100%;height:clamp(220px,30vw,380px);object-fit:cover;object-position:56% 72%;
  filter:saturate(.82) brightness(.9)}

/* ---------- featured testimonial ---------- */
.tq{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,64px);align-items:center;margin:0}
.tq blockquote{margin:0 0 22px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.18;letter-spacing:-.015em;
  color:var(--cream);max-width:30ch}
.tq figcaption{font-size:.84rem;color:var(--dim);line-height:1.5}
.tq .who{display:block;font-weight:700;color:var(--cream);font-size:.92rem;letter-spacing:.02em}
.tq-face{width:clamp(132px,15vw,190px);flex:none}
.tq-face img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;
  filter:saturate(.9) contrast(1.02)}

.tq-mono{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:50%;
  border:1px solid var(--hair);font-family:var(--serif);
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;color:var(--ember)}

/* one quote in the slot at a time. The slides share a single grid cell so the
   block holds the height of the tallest and nothing jumps on the way across. */
.tqs-track{display:grid}
.tqs-track>.tq{grid-area:1/1}
.tqs.is-ready .tqs-track>.tq{opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility .5s}
.tqs.is-ready .tqs-track>.tq.is-on{opacity:1;visibility:visible;transform:none}

.tqs-nav{display:none;align-items:center;gap:12px;
  margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--hair-2)}
.tqs.is-ready .tqs-nav{display:flex}
.tqs-count{margin:0 auto 0 0;color:var(--dim)}
.tqs-count b{color:var(--cream);font-weight:700}
.tqs-btn{width:46px;height:46px;border-radius:50%;flex:none;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--hair);color:var(--cream-2);
  transition:border-color .3s ease,color .3s ease,background-color .3s ease}
.tqs-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.tqs-btn:hover{border-color:var(--ember);color:var(--ember)}
.tqs-btn[data-dir="1"]:hover svg{transform:translateX(3px)}
.tqs-btn[data-dir="-1"]:hover svg{transform:translateX(-3px)}
.tqs-btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

@media (max-width:760px){
  .tq{grid-template-columns:1fr;gap:26px}
  .tq-face{order:-1;width:112px}
  .tq blockquote{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .tqs.is-ready .tqs-track>.tq{transition:none;transform:none}
  .tqs-btn svg{transition:none}
}

/* ---------- not for ---------- */
.nf{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-2)}
.nf li{padding:17px 0;border-bottom:1px solid var(--hair-2);color:var(--cream-2);
  font-size:1.02rem;line-height:1.52}

/* ---------- invite (inverted, the one light block on the site) ---------- */
.invite{background:var(--cream);color:var(--night);border-bottom:0}
.invite h2,.invite .end{color:var(--night)}
.invite .micro{color:rgba(16,14,10,.5)}
.invite .rail .num{color:var(--ember);opacity:.85}
.invite .rail hr,.invite .steps{border-color:rgba(16,14,10,.16)}
.invite p{color:#3E392F}
.invite .qa-end{color:var(--night);font-family:var(--serif)}
.invite .qa-end em{color:var(--ember)}
/* the button is ember everywhere, so gold reads as the one action colour */
.invite .btn{background:var(--ember);border-color:var(--ember);color:var(--night)}
.invite .btn:hover{background:#B87A3C;border-color:#B87A3C;color:var(--night)}
.invite .note{color:rgba(16,14,10,.52)}
.invite .note a{color:inherit}
/* the questions section: the spine of the page */
.qa{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-2);counter-reset:qa}
.qa li{counter-increment:qa;border-bottom:1px solid var(--hair-2);
  padding:clamp(26px,3.6vw,42px) 0;display:grid;grid-template-columns:70px 1fr;gap:14px}
.qa .n{font-family:var(--serif);font-size:1rem;color:var(--ember);opacity:.72;
  font-variant-numeric:tabular-nums}
.qa h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,3vw,2.35rem);
  line-height:1.1;letter-spacing:-.015em;color:var(--cream);max-width:24ch;margin:0 0 12px}
.qa p{font-size:.94rem;color:var(--dim);line-height:1.55;max-width:44ch;margin:0}
.qa-end{margin-top:clamp(34px,4vw,50px);font-family:var(--serif);
  font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.16;max-width:24ch;
  color:var(--cream);letter-spacing:-.015em}
.qa-end em{font-style:italic;color:var(--ember)}
@media (max-width:700px){.qa li{grid-template-columns:1fr;gap:6px}.qa .n{opacity:.5}}

.steps{list-style:none;margin:clamp(44px,5.5vw,68px) 0 0;padding:30px 0 0;
  border-top:1px solid rgba(16,14,10,.16);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.6vw,44px);counter-reset:s}
.steps li{counter-increment:s;font-size:.95rem;color:#4A443A;line-height:1.55}
.steps li::before{content:"0" counter(s);display:block;font-family:var(--serif);font-size:.9rem;
  color:var(--ember);margin-bottom:9px}

/* ---------- footer ---------- */
.foot{padding:44px 0 40px;background:var(--night)}
.foot-in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.foot a{color:var(--dim);text-decoration:none;font-size:.84rem;transition:color .25s ease}
.foot a:hover{color:var(--cream)}
.foot-links{display:flex;flex-wrap:wrap;gap:24px}
.fine{margin:30px 0 0;font-size:.76rem;color:rgba(138,130,112,.75);max-width:74ch;line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .grid2{grid-template-columns:150px 1fr}
  .rail .num{font-size:2rem}
  .tried{grid-template-columns:repeat(2,1fr);gap:30px}
}
@media (max-width:880px){
  .grid2{grid-template-columns:1fr;gap:22px}
  .rail{position:static}
  .rail .num{display:none}
  .rail hr{display:none}
  .work-list li{grid-template-columns:1fr;gap:7px}
  .beliefs li{grid-template-columns:1fr;gap:8px}
  .beliefs .n{padding-top:0;opacity:.5}
  .steps{grid-template-columns:1fr;gap:20px}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav{background:rgba(16,14,10,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair-2)}
  .nav-in{height:62px}
  /* A taller band with a lower crop, so the frame reaches his chest and hand
     rather than stopping at the collar. The scrim also holds off longer: at the
     old stops it was 72% opaque by two thirds down and was burying the body the
     extra height was there to show. */
  .hero{display:block;min-height:0;padding-top:47svh;border-bottom:0}
  .hero-bg{left:0;right:0;width:auto;height:61svh;bottom:auto}
  /* on a phone the hero is a band, so the single cover image is correct again */
  .hero-blur{display:none}
  .hero-subject{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 36%;
    transform:none;animation:none;-webkit-mask-image:none;mask-image:none}
  .hero-bg::after{background:linear-gradient(180deg,
    rgba(16,14,10,.44) 0%,rgba(16,14,10,.06) 16%,rgba(16,14,10,.08) 58%,
    rgba(16,14,10,.5) 74%,rgba(16,14,10,.9) 86%,rgba(16,14,10,1) 94%)}
  .hero-in{padding:22px var(--gut) 26px}
  .hero h1{font-size:clamp(2.5rem,9.4vw,3.4rem);max-width:none;margin-bottom:20px}
  .hero-sub{max-width:none;margin-bottom:26px}
  .hero-cta .btn{width:100%}
  .hero-cta .note{width:100%}
  .hero-rail{position:static}
  .hero-rail-in{flex-wrap:wrap;gap:10px 16px;padding:14px var(--gut)}
  .hero-rail .cue{display:none}
  .phero{padding-top:calc(62px + 46px)}
  .stmt-in{grid-template-columns:1fr}
  .stmt .side{text-align:left;padding-bottom:0}
  .list li{grid-template-columns:1fr;gap:5px;padding:18px 0}
  .list li:hover{padding-left:0}
  .list li b{display:none}
}
@media (max-width:560px){.tried{grid-template-columns:1fr;gap:26px}}

/* ---------- phone pass ----------
   Most men read this on a phone. Tighter vertical rhythm so there is less
   scrolling between ideas, slightly larger body text, shorter measures, and
   headings that stop competing with the copy. */
@media (max-width:640px){
  :root{--sec-y:clamp(58px,8vh,80px);--gut:24px}
  body{font-size:17.5px;line-height:1.66}

  .sec h2{font-size:clamp(1.95rem,7.6vw,2.5rem);margin-bottom:clamp(26px,5vw,34px);line-height:1.08}
  .hero h1{font-size:clamp(2.4rem,9.6vw,3.1rem);line-height:1.03;margin-bottom:22px}
  .hero-sub{font-size:17.5px;line-height:1.62}
  .hero-in{padding-bottom:30px}

  .micro{font-size:11px;letter-spacing:.19em}
  .label{margin-bottom:16px;gap:10px}
  .label::before{width:16px}

  .lede{font-size:17.5px;line-height:1.62;margin-bottom:26px}
  .prose{font-size:18px;line-height:1.7}
  .prose .em{font-size:24px;line-height:1.24;margin:.85em 0;max-width:none}
  .aside{margin-top:26px;padding-top:18px;font-size:15.5px;line-height:1.62}

  .list li{padding:17px 0}
  .list li span{font-size:17.5px;line-height:1.5;max-width:none}
  .end,.qa-end{font-size:25px;line-height:1.2;max-width:none;margin-top:30px}
  .turnline{font-size:23px;line-height:1.24;max-width:none;margin-top:30px}
  .breathe h2{font-size:27px;line-height:1.18}
  .breathe-lede{font-size:16px}
  .breathe-foot{font-size:14.5px}

  .work-list li{padding:20px 0}
  .work-list h3{font-size:20px}
  .work-list p{font-size:16.5px;line-height:1.58;max-width:none}
  .work-end{font-size:17px;margin-top:26px;max-width:none}
  .changes li,.changes.tight li{font-size:17.5px;line-height:1.52;padding-bottom:17px}

  .pull{margin-top:32px;padding-top:24px}
  .pull blockquote{font-size:24px;line-height:1.18;max-width:none}


  .facts b{font-size:22px}
  .facts p{font-size:15.5px;line-height:1.55}
  .bio-shot figcaption{font-size:14px}

  .btn{width:100%;min-height:58px;font-size:13.5px;letter-spacing:.1em}
  .nav-in .btn{width:auto}
  .foot-links{gap:18px;row-gap:10px}
  .fine{font-size:.76rem}
}
/* tablet range: the photo band is much wider than tall, so it needs a lower crop */
@media (min-width:601px) and (max-width:900px){
  .hero{padding-top:36svh}
  .hero-bg{height:48svh}
  .hero-subject{object-position:50% 30%}
}
/* short phones: the band is only ~330px tall, so the crop has to sit higher or
   the head goes out of frame. Still lower than it was, to keep some chest. */
@media (max-width:900px) and (max-height:700px){
  .hero{padding-top:40svh}
  .hero-bg{height:53svh}
  .hero-subject{object-position:50% 26%}
}