/* =========================================================
   ANIRUDH KAPOOR — STRATEGIC BLUEPRINT
   Stone & Sage · Serif + Grotesque · Museum / Archive
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Archivo:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Stone & sage */
  --paper:        #ece9e3;
  --paper-deep:   #e3e0d8;
  --panel:        #f3f1ec;
  --ink:          #20231e;
  --ink-2:        #3b3f38;
  --ink-soft:     #5d615a;
  --sage:         #3f4f3f;
  --sage-2:       #566656;
  --sage-pale:    #d7ddd2;
  --line:         color-mix(in oklch, var(--ink) 13%, transparent);
  --line-strong:  color-mix(in oklch, var(--ink) 28%, transparent);

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --display: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --grotesk: 'Space Grotesk', 'Archivo', sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --maxw: 1180px;
  --col: 740px;
}

*{ box-sizing: border-box; }
html{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
  font-weight:400;
}
::selection{ background:var(--sage); color:var(--paper); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 48px; }
.col{ max-width:var(--col); }
.bleed{ width:100%; }
section{ position:relative; }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--sage);
}
.eyebrow .n{ color:var(--ink-soft); margin-right:1.2em; }

h1,h2,h3,h4{ font-weight:400; margin:0; }
.display{
  font-family:var(--display);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.01em;
}
h2.sec{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(34px, 4.4vw, 58px);
  line-height:1.02;
  letter-spacing:-.012em;
  margin:.1em 0 .4em;
  max-width:18ch;
}
h3.head{
  font-family:var(--serif);
  font-weight:500;
  font-size:23px;
  line-height:1.25;
  letter-spacing:.002em;
}
.lede{
  font-size:23px;
  line-height:1.5;
  font-weight:300;
  color:var(--ink-2);
  max-width:30ch;
}
p{ margin:0 0 1.05em; text-wrap:pretty; }
p.body{ color:var(--ink-2); max-width:64ch; }
.small{ font-size:16px; line-height:1.55; }
.muted{ color:var(--ink-soft); }
em,i{ font-style:italic; }
a{ color:inherit; }

.mono{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.01em;
  color:var(--ink-soft);
}
.label{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- rules / structure ---------- */
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule-strong{ height:1px; background:var(--line-strong); border:0; }
.sec-pad{ padding:118px 0; }
.sec-pad-sm{ padding:76px 0; }
.sechead{ display:flex; gap:30px; align-items:baseline; margin-bottom:54px; }
.sechead .idx{
  font-family:var(--mono); font-size:13px; color:var(--sage);
  flex:0 0 auto; padding-top:8px;
}

/* ---------- grids ---------- */
.grid{ display:grid; gap:34px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }

/* ---------- placeholder plates ---------- */
.plate{
  position:relative;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklch, var(--ink) 6%, transparent) 0 1px,
      transparent 1px 11px),
    var(--paper-deep);
  border:1px solid var(--line);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.plate .cap{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-soft);
  padding:11px 13px; background:color-mix(in oklch, var(--paper) 78%, transparent);
  border-top:1px solid var(--line); border-right:1px solid var(--line);
  backdrop-filter:blur(2px);
}
.plate.dark{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0 1px, transparent 1px 11px),
    #1a1d18;
  border-color:rgba(255,255,255,.12);
}
.plate.dark .cap{ color:#a7ab9f; background:rgba(20,22,18,.6); border-color:rgba(255,255,255,.1); }
.ar-21{ aspect-ratio:2/1; }
.ar-43{ aspect-ratio:4/3; }
.ar-11{ aspect-ratio:1/1; }
.ar-32{ aspect-ratio:3/2; }
.ar-916{ aspect-ratio:9/16; }
.ar-45{ aspect-ratio:4/5; }

/* ---------- tags ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; border:1px solid var(--line-strong); border-radius:100px;
  color:var(--ink-2);
}
.tag.solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tag.sage{ background:var(--sage-pale); border-color:transparent; color:var(--sage); }

/* ---------- definition rows ---------- */
.dl{ display:grid; grid-template-columns:170px 1fr; gap:0; }
.dl > div{ display:contents; }
.dl dt{
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sage);
  padding:16px 0; border-top:1px solid var(--line);
}
.dl dd{
  margin:0; padding:16px 0; border-top:1px solid var(--line);
  font-size:17px; color:var(--ink-2);
}

/* ---------- numbered list ---------- */
.steps{ counter-reset:s; display:grid; gap:0; }
.step{
  counter-increment:s; display:grid; grid-template-columns:64px 1fr;
  gap:24px; padding:26px 0; border-top:1px solid var(--line); align-items:start;
}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:13px; color:var(--sage); padding-top:4px;
}
.step h4{ font-family:var(--serif); font-weight:500; font-size:20px; margin-bottom:5px; }
.step p{ margin:0; color:var(--ink-soft); font-size:16px; max-width:60ch; }

/* ---------- callout / card ---------- */
.card{
  background:var(--panel); border:1px solid var(--line);
  padding:30px 32px;
}
.card .label{ color:var(--sage); margin-bottom:14px; display:block; }

/* ---------- direction frames ---------- */
.dir{ border-top:1px solid var(--line-strong); padding-top:0; }
.dir-meta{ display:flex; gap:30px; align-items:baseline; padding:30px 0 34px; flex-wrap:wrap; }
.dir-meta .no{ font-family:var(--mono); font-size:13px; color:var(--sage); }
.dir-meta .nm{ font-family:var(--display); font-weight:400; font-size:38px; line-height:1; letter-spacing:-.01em; }
.dir-meta .desc{ font-size:16px; color:var(--ink-soft); max-width:42ch; margin-left:auto; }
.frame{
  border:1px solid var(--line-strong);
  background:var(--panel);
  overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(32,35,30,.5);
}
.frame .bar{
  height:38px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px; padding:0 14px;
  font-family:var(--mono); font-size:11px; color:var(--ink-soft);
  background:color-mix(in oklch, var(--panel) 60%, var(--paper));
}
.dot{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--paper); }
.foot a{ color:var(--paper); }
.foot .eyebrow{ color:var(--sage-2); }

/* ---------- top progress / masthead nav ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.topbar .wm{ font-weight:600; color:var(--ink); letter-spacing:.18em; }
.topbar .pg{ font-family:var(--mono); letter-spacing:.02em; text-transform:none; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  body{ font-size:18px; }
  .wrap{ padding:0 26px; }
  .g2,.g3,.g4,.split{ grid-template-columns:1fr; }
  .sec-pad{ padding:78px 0; }
  .sechead{ flex-direction:column; gap:10px; margin-bottom:36px; }
  .dl{ grid-template-columns:1fr; }
  .dl dt{ padding-bottom:2px; border-top:1px solid var(--line); }
  .dl dd{ border-top:0; padding-top:4px; }
  .dir-meta .desc{ margin-left:0; }
  .topbar{ display:none; }
}

/* ---------- print ---------- */
@media print{
  .topbar{ display:none; }
  .rv{ opacity:1 !important; transform:none !important; }
  body{ background:#fff; font-size:11pt; }
  .sec-pad{ padding:36px 0; }
  .frame{ box-shadow:none; }
  section{ break-inside:avoid; }
}