/* ─────────────────────────────────────────────────────────────
   Vikram Rathour · Executive Editorial design system
   Shared by every page. Tokens from Stitch DESIGN.md.
   ───────────────────────────────────────────────────────────── */

:root{
  /* surfaces */
  --canvas:#F7F6F2;
  --vellum:#FFFFFF;
  --recess:#EDEBE4;
  --wash:#F0EFEA;
  /* inks */
  --ink:#121A24;
  --ink-hover:#1F2B3A;
  --ink-2:#4E5866;
  --ink-3:#656D7A;
  /* accents */
  --terra:#C2633E;          /* large text + decoration only */
  --terra-dk:#9A4522;       /* small text on light (AA) */
  --terra-pale:#FBE9E0;
  --terra-lt:#E8A184;       /* on dark ink */
  --sage:#2B5C57;
  --sage-pale:#E1EEEC;
  /* lines + depth */
  --hair:rgba(18,26,36,.08);
  --hair-2:rgba(18,26,36,.15);
  --hair-hot:rgba(194,99,62,.35);
  --shadow:0 16px 36px -8px rgba(18,26,36,.06),0 4px 12px -2px rgba(18,26,36,.03);
  --shadow-lift:0 22px 44px -10px rgba(18,26,36,.12),0 6px 14px -4px rgba(18,26,36,.05);
  /* type */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* layout */
  --max:80rem;
  --margin:3rem;
  --gutter:2rem;
  --read:45rem;
  --r:4px;
  --r-card:6px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:767px){
  :root{--margin:1.25rem;--gutter:1rem}
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* scale with the screen: 16px up to 1440x900, then grows with the viewport
   (width or height, whichever runs out first) so large and wide screens are
   filled instead of showing a narrow column. Sizes are in rem so they follow. */
html{font-size:max(16px,min(100vw / 90,100vh / 50));scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:inherit}
::selection{background:var(--terra-pale);color:var(--ink)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--margin)}
.read{max-width:var(--read);margin:0 auto;padding-inline:var(--margin)}

/* ── type scale ── */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(2.35rem,5vw,3.5rem);line-height:1.12;letter-spacing:-.02em;margin:0}
.h-xl{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1.18;letter-spacing:-.015em;margin:0}
.h-lg{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.6vw,2rem);line-height:1.25;margin:0}
.h-md{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.3;margin:0}
.h-sm{font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.35;margin:0}
.display em,.h-xl em,.h-lg em{font-style:italic;color:var(--terra-dk)}
.body-xl{font-family:var(--serif);font-size:1.375rem;line-height:1.55;letter-spacing:.005em;color:var(--ink-2)}
.lede{font-size:1.0625rem;line-height:1.7;color:var(--ink-2);max-width:62ch}
.small{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.label{font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.label-md{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mono{font-family:var(--mono);font-size:.75rem}
.eyebrow{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-dk);margin-bottom:.75rem}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.875rem;font-weight:600;line-height:1;padding:.85rem 1.4rem;border-radius:var(--r);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-pri{background:var(--ink);color:var(--canvas)}
.btn-pri:hover{background:var(--ink-hover);transform:translateY(-1px)}
.btn-sec{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-sec:hover{background:var(--wash)}
.btn-terra{background:transparent;color:var(--terra-dk);border-color:var(--terra)}
.btn-terra:hover{background:var(--terra-pale)}
.btn-light{background:var(--canvas);color:var(--ink)}
.btn-light:hover{background:#fff;transform:translateY(-1px)}
.btn-ghost-light{background:transparent;color:var(--canvas);border-color:rgba(247,246,242,.35)}
.btn-ghost-light:hover{border-color:var(--terra-lt);color:#fff}
.card-foot .tlink{white-space:nowrap}
.tlink{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9375rem;color:var(--ink);text-decoration:none;background:linear-gradient(var(--terra),var(--terra)) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size .35s var(--ease),color .2s}
.tlink:hover{background-size:100% 1.5px;color:var(--terra-dk)}
.tlink svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:100;background:rgba(247,246,242,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hair)}
.nav-in{max-width:var(--max);margin:0 auto;padding:.85rem var(--margin);display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand img{width:auto;height:2.25rem;display:block}
.brand-t{display:flex;flex-direction:column;line-height:1.15}
.brand-n{font-family:var(--serif);font-size:1.2rem;font-weight:500;letter-spacing:-.01em}
.brand-s{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.nav-links{display:flex;gap:1.35rem;list-style:none;margin:0 0 0 auto;padding:0}
.nav-links a{font-size:.8125rem;font-weight:500;color:var(--ink-2);text-decoration:none;padding:.35rem 0;position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-cta{flex-shrink:0;padding:.7rem 1.1rem;font-size:.8125rem}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--hair-2);border-radius:var(--r);width:2.625rem;height:2.625rem;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:1080px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--canvas);border-bottom:1px solid var(--hair);padding:.5rem var(--margin) 1rem;margin:0;box-shadow:var(--shadow)}
  .nav-links a{display:block;padding:.8rem 0;font-size:.9375rem;border-bottom:1px solid var(--hair)}
  .nav-links a::after{display:none}
  .nav.open .nav-links{display:flex}
  .nav-cta{display:none}
}
@media (max-width:480px){.brand-s{display:none}}

/* ── sections ── */
.sec{padding-block:clamp(4.5rem,9vw,7.5rem)}
.sec + .sec{border-top:1px solid var(--hair)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 3rem;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.sec-head > div{max-width:45rem}
.sec-head .lede{max-width:44ch;margin:0}
.sec-alt{background:var(--vellum)}

/* ── cards ── */
.card{background:var(--vellum);border:1px solid var(--hair);border-radius:var(--r-card);padding:2rem;display:flex;flex-direction:column;transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
a.card{text-decoration:none;color:inherit}
a.card:hover,.card.hov:hover{border-color:var(--hair-hot);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.card-mast{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.tag{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:var(--r);background:var(--terra-pale);color:var(--terra-dk)}
.tag.sage{background:var(--sage-pale);color:var(--sage)}
.tag.ink{background:var(--recess);color:var(--ink-2)}
.num{font-size:.6875rem;font-weight:600;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.card h3{margin:0 0 .6rem}
.card .quote-line{font-family:var(--serif);font-style:italic;color:var(--terra-dk);font-size:1.05rem;line-height:1.45;margin:0 0 .85rem}
.card p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--ink-2)}
.card-foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.8125rem;color:var(--ink-2)}
.card-body{flex:1;margin-bottom:1.4rem}
.divider{width:36px;height:2px;background:var(--terra);border:0;margin:0 0 1rem}

.card.dark{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.card.dark p{color:rgba(247,246,242,.74)}
.card.dark .quote-line{color:var(--terra-lt)}
.card.dark .tag{background:rgba(232,161,132,.14);color:var(--terra-lt)}
.card.dark .card-foot{border-color:rgba(247,246,242,.14);color:rgba(247,246,242,.7)}
.card.dark .tlink{color:var(--canvas)}
.card.dark .tlink:hover{color:var(--terra-lt)}
a.card.dark:hover{border-color:var(--terra);box-shadow:0 26px 50px -14px rgba(18,26,36,.4)}

.card.recess{background:var(--recess);border-color:transparent}
a.card.recess:hover{background:#E6E3DA;border-color:var(--hair-hot)}

.grid{display:grid;gap:var(--gutter)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── chips ── */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.8125rem;font-weight:600;padding:.55rem 1rem;border-radius:999px;background:var(--recess);color:var(--ink-2);border:1px solid var(--hair);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--hair-hot);color:var(--ink)}
.chip[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip[aria-selected="true"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--terra)}

/* ── pills ── */
.pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--hair-2);background:var(--vellum);color:var(--ink-2)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 3px rgba(194,99,62,.18);animation:pulse 2.6s ease-in-out infinite}
.pill.sage{background:var(--sage-pale);color:var(--sage);border-color:transparent}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(194,99,62,0)}}

/* ── thesis quote ── */
.thesis{margin:0;padding:.25rem 0 .25rem 1.5rem;border-left:2px solid var(--terra);font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.5;color:var(--ink)}
.thesis cite{display:block;margin-top:.9rem;font-family:var(--sans);font-style:normal;font-size:.8125rem;color:var(--ink-2)}

/* ── footer ── */
.foot{background:var(--ink);color:rgba(247,246,242,.72);padding-block:4rem 2rem;font-size:.875rem}
.foot a{color:rgba(247,246,242,.82);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--terra-lt)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.5rem}
.foot-brand .brand-n{color:var(--canvas);font-size:1.5rem}
.foot .brand img{height:2.5rem}
.foot-brand p{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.55;margin:.9rem 0 0;max-width:34ch;color:rgba(247,246,242,.78)}
.foot h4{margin:0 0 1rem;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-lt)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(247,246,242,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;font-size:.8125rem;color:rgba(247,246,242,.6)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ── reveal ── */
.r{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.r.s{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}
.no-js .r{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}