:root{
  --parchment:#F3E8D8;
  --paper:#FBF7F0;
  --ember:#C65A2E;
  --ember-deep:#A8461F;
  --espresso:#261D18;   /* typography only */
  --cocoa:#3C2C23;      /* dark fields: warmer than espresso, never reads as black */
  --umber:#5A463A;
  --clay:#D8B8A3;
  --taupe:#A68F7A;
  --sand:#EFE3D0;       /* deeper beige field, sits between parchment and clay */
  --warm-gray:#6F6862;

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --measure:34rem;
  --gutter:clamp(1.5rem,6vw,7.5rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  background:var(--paper);
  color:var(--espresso);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,0.95rem + 0.2vw,1.0625rem);
  line-height:1.72;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- shared ---------- */
.wrap{max-width:76rem;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding:clamp(5rem,11vw,9.5rem) 0}

.eyebrow{
  font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:2rem;display:flex;align-items:center;gap:.875rem;
}
.eyebrow::after{content:"";height:1px;width:3rem;flex:none;background:var(--ember);opacity:.55}
.on-dark .eyebrow{color:var(--clay)}
/* The rule strands itself once the label wraps, so retire it on narrow screens. */
@media(max-width:620px){.eyebrow::after{display:none}}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.005em}
h2{
  font-size:clamp(2rem,1.15rem + 3.4vw,3.5rem);
  line-height:1.14;max-width:22ch;
}
h3{font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);line-height:1.25}
.lede{max-width:var(--measure);color:var(--umber);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.75}
.on-dark .lede{color:var(--clay)}
p + p{margin-top:1.5rem}

.reflect{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  line-height:1.34;max-width:26ch;color:var(--espresso);
}
.on-dark .reflect{color:var(--parchment)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  /* The bar carries its own field at all times. It travels over parchment,
     paper and the chocolate bands, so it can never depend on the section
     beneath it, nor on the scroll script below, to stay readable. */
  background:rgba(247,240,229,.90);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .4s ease,border-color .4s ease,padding .4s ease,box-shadow .4s ease;
  border-bottom:1px solid rgba(90,70,58,.10);padding:1.5rem 0;
}
/* Scrolled state only tightens what is already there. */
.nav.stuck{
  background:rgba(247,240,229,.96);
  border-bottom-color:rgba(90,70,58,.16);
  box-shadow:0 1px 24px -12px rgba(38,29,24,.45);
  padding:1rem 0;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.mark{font-family:var(--display);font-size:1.25rem;letter-spacing:.01em;text-decoration:none;line-height:1.1}
/* Deeper ember in the wordmark: the bar is translucent, so this has to hold
   up over the chocolate bands as well as the light ones. */
.mark em{font-style:italic;color:var(--ember-deep)}
.nav-links{display:flex;align-items:center;gap:2.25rem;list-style:none}
.nav-links a{
  text-decoration:none;font-size:.8125rem;font-weight:400;letter-spacing:.05em;color:var(--umber);
  padding-bottom:.25rem;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.nav-links a:hover{color:var(--espresso);border-bottom-color:var(--ember)}
@media(max-width:820px){.nav-links li:not(:last-child){display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--body);font-size:.8125rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:1.0625rem 2rem;border:1px solid var(--ember);background:var(--ember);color:var(--paper);
  text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{background:var(--ember-deep);border-color:var(--ember-deep)}
.btn-ghost{background:transparent;color:var(--espresso);border-color:rgba(90,70,58,.32)}
.btn-ghost:hover{background:transparent;color:var(--ember);border-color:var(--ember)}
.btn .arw{transition:transform .3s}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{
  background:var(--parchment);
  padding:clamp(9.5rem,18vw,15rem) 0 clamp(6rem,11vw,9rem);
  position:relative;overflow:hidden;isolation:isolate;
}
.hero .wrap{position:relative;z-index:3}

/* -- hero photograph, drifting slowly -- */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

/* Inset past the edges so the slow pan never exposes a seam. */
.hero-photo{
  position:absolute;inset:-4%;
  background-image:url("../images/hero-drift.jpg.jpeg");
  background-repeat:no-repeat;background-size:cover;background-position:74% 50%;
  transform-origin:72% 50%;
  animation:heroPan 52s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroPan{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to{transform:scale(1.075) translate3d(-1.1%,.5%,0)}
}
/* On narrow screens hold the figure in frame rather than cropping to the wall. */
@media(max-width:940px){
  .hero-photo{background-position:78% 42%}
}

/* Paper grain, kept under the guide's 8-12% ceiling. */
.hero-grain{
  position:absolute;inset:0;z-index:2;opacity:.09;mix-blend-mode:multiply;
}
/* A light wash over the left wall: enough to guarantee the type, not so much
   that the photograph goes flat. The figure on the right stays untouched. */
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(243,232,216,.82) 0%,rgba(243,232,216,.66) 34%,rgba(243,232,216,.3) 55%,rgba(243,232,216,0) 76%);
}
@media(max-width:940px){
  .hero-veil{background:linear-gradient(175deg,rgba(243,232,216,.93) 0%,rgba(243,232,216,.86) 42%,rgba(243,232,216,.55) 70%,rgba(243,232,216,.28) 100%)}
}
@media(prefers-reduced-motion:reduce){
  .hero-photo{animation:none}
}

.hero h1{
  font-size:clamp(2.75rem,1.35rem + 5.4vw,5.5rem);
  line-height:1.04;max-width:15ch;margin-bottom:2rem;
}
.hero h1 em{font-style:italic;color:var(--ember)}
.hero .lede{margin-bottom:2.75rem;max-width:33rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.875rem}

.drift-svg{width:100%;height:auto;overflow:visible}
.dpath{fill:none;stroke-linecap:round}
.dtrue{stroke:var(--taupe);stroke-width:1;stroke-dasharray:3 7;opacity:.65}
.dactual{stroke:var(--ember);stroke-width:1.75}
/* The diagram draws itself on load. When JS is running it waits until the
   figure is actually on screen, which is why every rule is duplicated under
   html.anim rather than replaced. */
.draw{stroke-dasharray:760;stroke-dashoffset:760;animation:draw 2.6s cubic-bezier(.33,.9,.36,1) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dnode{fill:var(--ember);opacity:0;animation:fadein .8s ease 2.5s forwards}
.dnode-q{fill:none;stroke:var(--ember);stroke-width:1;opacity:0;animation:fadein .8s ease 2.7s forwards}
@keyframes fadein{to{opacity:1}}
.dlabel{
  font-family:var(--body);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--taupe);opacity:0;animation:fadein 1s ease 2.2s forwards;
}
.dlabel.em{fill:var(--ember)}
.dgap{stroke:var(--umber);stroke-width:.75;stroke-dasharray:2 4;opacity:0;animation:fadein 1s ease 2.9s forwards}

html.anim .fig-rv:not(.in) .draw{animation:none}
html.anim .fig-rv:not(.in) .dnode,
html.anim .fig-rv:not(.in) .dnode-q,
html.anim .fig-rv:not(.in) .dlabel,
html.anim .fig-rv:not(.in) .dgap{animation:none;opacity:0}

@media(prefers-reduced-motion:reduce){
  .draw,.dnode,.dnode-q,.dlabel,.dgap,
  html.anim .fig-rv:not(.in) .draw,
  html.anim .fig-rv:not(.in) .dnode,
  html.anim .fig-rv:not(.in) .dnode-q,
  html.anim .fig-rv:not(.in) .dlabel,
  html.anim .fig-rv:not(.in) .dgap{animation:none;stroke-dashoffset:0;opacity:1}
}

/* ---------- definition ---------- */
.def{background:var(--paper)}
.def h2{
  font-size:clamp(1.75rem,1.15rem + 2.1vw,2.625rem);
  line-height:1.18;max-width:19ch;margin-bottom:0;
}
.def h2 em{font-style:italic;color:var(--ember)}

/* Claim on the left, the drift diagram proving it on the right. */
.def-head{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);
  align-items:center;margin-bottom:clamp(3rem,6vw,4.5rem);
}
@media(max-width:880px){.def-head{grid-template-columns:1fr;gap:2.75rem}}
.def-figure{position:relative}
.def-cap{
  margin-top:1.25rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--taupe);display:flex;align-items:center;gap:.75rem;
}
.def-cap::before{content:"";width:1.75rem;height:1px;flex:none;background:var(--ember);opacity:.6}

.def-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,4vw,3.5rem)}
@media(max-width:880px){.def-grid{grid-template-columns:1fr;gap:2.5rem}}
.def-item{padding-top:1.5rem;border-top:1px solid rgba(90,70,58,.2)}
.def-item h3{font-style:italic;color:var(--ember);margin-bottom:.875rem}
.def-item p{color:var(--umber);font-size:.9688rem;line-height:1.7}

/* ---------- image slots ----------
   Each slot lists the photograph first and a warm gradient second. A missing
   file simply is not painted, so the slot degrades to a tonal panel instead of
   a broken image. Drop the named file into images/ and it appears. */
.ph{
  background-color:var(--clay);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  border:1px solid rgba(90,70,58,.12);
}
/* Wide band: the composition depends on the empty wall to the left of the
   figure, so it is never cropped to a narrow column. */
/* Recognition runs the photograph behind its opening text, the way the hero
   does. The image occupies the header band and dissolves into parchment
   before the signals list begins. */
.sig-bg{
  position:absolute;top:0;left:0;right:0;z-index:0;
  height:clamp(33rem,52vw,47rem);
  background-image:url("../images/recognition.jpg.jpeg");
  background-repeat:no-repeat;background-size:cover;background-position:70% 26%;
}
.sig-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(243,232,216,.92) 0%,rgba(243,232,216,.76) 33%,rgba(243,232,216,.34) 57%,rgba(243,232,216,0) 80%),
    linear-gradient(to bottom,rgba(243,232,216,0) 38%,rgba(243,232,216,.8) 76%,var(--parchment) 97%);
}
@media(max-width:940px){
  .sig-bg{height:clamp(26rem,70vw,34rem);background-position:74% 24%}
  .sig-bg::after{background:
    linear-gradient(175deg,rgba(243,232,216,.9) 0%,rgba(243,232,216,.78) 44%,rgba(243,232,216,.5) 72%,var(--parchment) 98%)}
}
.ph-return{
  aspect-ratio:3/2;
  background-image:url("../images/return.jpg.jpeg");
    linear-gradient(155deg,rgba(251,247,240,.95),rgba(216,184,163,.7) 48%,rgba(166,143,122,.55));
}
/* Slot matches the headshot's native ratio so the face is never cropped. */
.ph-author{
  aspect-ratio:542/638;
  background-image:url("../images/marut.jpg.jpeg");
    linear-gradient(160deg,rgba(243,232,216,.95),rgba(216,184,163,.78) 50%,rgba(90,70,58,.4));
}

/* ---------- signals ---------- */
.signals{background:var(--parchment);position:relative;overflow:hidden;isolation:isolate}
.signals .wrap{position:relative;z-index:2}
.signals h2{margin-bottom:1.75rem}
.signals .lede{margin-bottom:clamp(4rem,9vw,7.5rem)}
.sig-list{list-style:none;max-width:52rem}
.sig-list li{
  display:grid;grid-template-columns:3.25rem 1fr;gap:1.5rem;align-items:baseline;
  padding:1.75rem 0;border-top:1px solid rgba(90,70,58,.18);
}
.sig-list li:last-child{border-bottom:1px solid rgba(90,70,58,.18)}
.sig-n{
  font-family:var(--body);font-size:.6875rem;font-weight:500;letter-spacing:.14em;
  color:var(--ember);padding-top:.35rem;
}
.sig-list p{font-size:1.0625rem;line-height:1.62;color:var(--espresso);max-width:44ch}
@media(max-width:600px){.sig-list li{grid-template-columns:1fr;gap:.5rem}}

.sig-close{margin-top:4rem;padding-left:clamp(0rem,4vw,3.5rem);border-left:1px solid var(--ember)}
.sig-close .reflect{max-width:34ch;padding-left:clamp(1rem,2vw,2rem)}

/* ---------- unseen ---------- */
.unseen{background:var(--paper)}
.unseen-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.5rem,7vw,6rem);align-items:start}
@media(max-width:940px){.unseen-grid{grid-template-columns:1fr;gap:3rem}}
.unseen p{color:var(--umber);max-width:40ch}
.pull{
  margin:2.5rem 0;padding:1.75rem 0;border-top:1px solid var(--ember);border-bottom:1px solid rgba(90,70,58,.18);
  font-family:var(--display);font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);font-style:italic;
  line-height:1.36;color:var(--espresso);max-width:30ch;
}
.praise{list-style:none;margin-top:.5rem}
.praise li{
  padding:1rem 0 1rem 1.75rem;border-bottom:1px solid rgba(90,70,58,.14);
  position:relative;color:var(--umber);font-size:.9688rem;line-height:1.6;
}
.praise li::before{
  content:"";position:absolute;left:0;top:1.55rem;width:.5rem;height:1px;background:var(--ember);
}
.praise b{font-weight:500;color:var(--espresso)}

/* ---------- cost (dark anchor) ---------- */
.cost{background:var(--cocoa);color:var(--parchment)}
.cost h2{color:var(--parchment);margin-bottom:2rem}
.cost .lede{margin-bottom:4.5rem}
.ev{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,4vw,3.25rem)}
@media(max-width:880px){.ev{grid-template-columns:1fr;gap:2.75rem}}
.ev-item{border-top:1px solid rgba(243,232,216,.22);padding-top:1.75rem}
.ev-claim{font-size:.9375rem;line-height:1.55;color:var(--parchment);margin-bottom:1.5rem;max-width:26ch}
.ev-num{
  font-family:var(--display);font-size:clamp(3rem,2.2rem + 2.6vw,4.25rem);line-height:1;
  color:var(--ember);margin-bottom:.625rem;
}
.ev-num small{font-size:.34em;letter-spacing:.02em}
.ev-src{font-size:.8125rem;line-height:1.65;color:var(--clay);opacity:.85}
.cost-foot{
  margin-top:4.5rem;padding-top:2.25rem;border-top:1px solid rgba(243,232,216,.22);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:baseline;
}
@media(max-width:760px){.cost-foot{grid-template-columns:1fr;gap:1rem}}
.cost-foot .tag{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);white-space:nowrap;
}
.cost-foot p{color:var(--parchment);max-width:52ch;font-size:1.0625rem;line-height:1.65}

/* ---------- return ---------- */
.ret{background:var(--sand)}
.ret h2{margin-bottom:2rem}
.ret h2 em{font-style:italic;color:var(--ember)}
.ret .lede{margin-bottom:0;color:var(--umber)}
/* Mirrors the pattern section: claim left, image right, detail beneath. */
.ret-head{
  display:grid;grid-template-columns:1fr .9fr;gap:clamp(2rem,6vw,5rem);
  align-items:center;margin-bottom:clamp(3rem,6vw,4.5rem);
}
@media(max-width:880px){.ret-head{grid-template-columns:1fr;gap:2.75rem}}
.ret-cap{
  margin-top:1rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--taupe);display:flex;align-items:center;gap:.75rem;
}
.ret-cap::before{content:"";width:1.75rem;height:1px;flex:none;background:var(--ember);opacity:.6}
.arc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,4vw,3.25rem)}
@media(max-width:880px){.arc{grid-template-columns:1fr;gap:2.5rem}}
.arc-item{border-top:1px solid rgba(90,70,58,.3);padding-top:1.75rem}
.arc-k{
  font-family:var(--display);font-size:3.25rem;line-height:1;color:var(--ember);opacity:.36;margin-bottom:1rem;
}
.arc-item h3{margin-bottom:.75rem}
.arc-item p{color:var(--umber);font-size:.9688rem;line-height:1.68}
.ret-close{margin-top:4.5rem;text-align:center}
.ret-close .reflect{max-width:30ch;margin:0 auto}
.ret-rule{width:1px;height:3rem;background:var(--ember);margin:0 auto 2.25rem}

/* ---------- book ---------- */
.book{background:var(--paper)}
.book-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}
@media(max-width:880px){.book-grid{grid-template-columns:1fr;gap:3rem}}
.book-img{position:relative}
/* Cover art ships on a white field; multiply drops it onto the warm page. */
.book-img img{width:100%;mix-blend-mode:multiply}
.book h2{margin-bottom:1.75rem}
.book .lede{margin-bottom:2rem}
.book-meta{
  display:flex;flex-wrap:wrap;gap:.625rem 2rem;margin-bottom:2.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(90,70,58,.2);
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--taupe);
}

/* ---------- assessment ---------- */
.ask{background:var(--parchment)}
.ask-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,6rem);align-items:start}
@media(max-width:940px){.ask-grid{grid-template-columns:1fr;gap:3rem}}
.ask h2{margin-bottom:1.75rem}
.ask .lede{margin-bottom:2rem}
.ask-pts{list-style:none;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid rgba(90,70,58,.2)}
.ask-pts li{
  padding:.5rem 0 .5rem 1.75rem;position:relative;color:var(--umber);font-size:.9375rem;line-height:1.62;
}
.ask-pts li::before{content:"";position:absolute;left:0;top:1.05rem;width:.5rem;height:1px;background:var(--ember)}

form{background:var(--paper);padding:clamp(1.75rem,4vw,2.75rem);border:1px solid rgba(90,70,58,.18)}
.f-row{margin-bottom:1.375rem}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:1.375rem}
@media(max-width:520px){.f-two{grid-template-columns:1fr}}
label{
  display:block;font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--umber);margin-bottom:.625rem;
}
input,textarea{
  width:100%;font-family:var(--body);font-size:.9375rem;font-weight:300;color:var(--espresso);
  background:transparent;border:0;border-bottom:1px solid rgba(90,70,58,.32);
  padding:.625rem 0;transition:border-color .3s;
}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--ember)}
input::placeholder,textarea::placeholder{color:var(--taupe);opacity:.75}
textarea{resize:vertical;min-height:4.5rem;line-height:1.6}
form .btn{width:100%;justify-content:center;margin-top:1.75rem}
.f-note{margin-top:1.25rem;font-size:.75rem;line-height:1.6;color:var(--taupe)}

/* ---------- about ---------- */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(2rem,6vw,4.5rem);align-items:start}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:2.25rem}}
@media(min-width:821px){.about-portrait{max-width:23rem}}
.about h3{margin-bottom:.5rem}
.about p{color:var(--umber);max-width:56ch}
.about-role{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);
  margin-bottom:1.75rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(90,70,58,.18);
}

/* ---------- footer ---------- */
footer{background:var(--cocoa);color:var(--clay);padding:clamp(3.5rem,7vw,5rem) 0 2.5rem}
.f-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(243,232,216,.16)}
.f-mark{font-family:var(--display);font-size:1.5rem;color:var(--parchment);line-height:1.2}
.f-mark em{font-style:italic;color:var(--ember)}
.f-tag{font-size:.8125rem;color:rgba(216,184,163,.82);margin-top:.625rem;max-width:30ch;line-height:1.6}
.f-links{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start}
.f-links a{font-size:.8125rem;color:var(--clay);text-decoration:none;transition:color .25s}
.f-links a:hover{color:var(--ember)}
.f-bot{padding-top:2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.75rem;color:rgba(216,184,163,.78)}

/* ---------- reveal ----------
   Content is visible by default. The hidden state is applied only by the
   script below, and only once it has confirmed it can reveal it again.
   If JS never runs, the page still reads in full. */
html.anim .rv{opacity:0;transform:translateY(18px)}
html.anim .rv{transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
html.anim .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.anim .rv{opacity:1;transform:none;transition:none}
}