/* =========================================================
   ANIRUDH KAPOOR — HOMEPAGE
   Blend: A · The Archive (system) + B · The Maison (restraint)
   ========================================================= */
@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=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --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) 26%, transparent);
  --serif:'Spectral',Georgia,serif; --display:'Cormorant Garamond',Georgia,serif;
  --sans:'Archivo','Helvetica Neue',Helvetica,sans-serif; --mono:'IBM Plex Mono',monospace;
  --maxw:1280px;
}
*{ 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; }
::selection{ background:var(--sage); color:var(--paper); }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:56px; }
.eyebrow{ font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--sage); }
.mono{ font-family:var(--mono); font-size:12.5px; letter-spacing:.01em; color:var(--ink-soft); }
.muted{ color:var(--ink-soft); }
em,i{ font-style:italic; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1.05em; text-wrap:pretty; }

/* ---- nav ---- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 56px; background:color-mix(in oklch, var(--paper) 80%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .4s, padding .4s; }
.nav.scrolled{ border-bottom-color:var(--line); padding:15px 56px; }
.nav .wm{ display:flex; align-items:center; gap:13px; font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.22em; }
.nav .wm img{ height:27px; width:auto; display:block; }
.nav .links{ display:flex; gap:30px; font-family:var(--sans); font-size:12.5px; letter-spacing:.1em; color:var(--ink-soft); text-transform:uppercase; }
.nav .links a{ transition:color .25s; }
.nav .links a:hover{ color:var(--ink); }
.nav .menu{ display:none; font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }

/* ---- hero ---- */
.hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; padding-top:clamp(134px,17vh,210px); padding-bottom:54px; }
.hero .kick{ margin-bottom:30px; }
.hero h1{ font-family:var(--display); font-weight:300; font-size:clamp(64px,13vw,184px); line-height:.92; letter-spacing:-.015em; }
.hero h1 em{ font-style:italic; }
.hero .sub{ font-family:var(--serif); font-weight:300; font-size:clamp(20px,2.3vw,27px); line-height:1.5; color:var(--ink-2); max-width:40ch; margin-top:clamp(34px,5vh,64px); }
.hero .rail{ display:flex; gap:40px; flex-wrap:wrap; margin-top:auto; padding-top:clamp(40px,7vh,72px); }
.hero .rail span{ font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); }
.hero .rail b{ color:var(--ink); font-weight:500; }

/* full-bleed band */
.band{ width:100%; }
.plate{ position:relative; background:
   repeating-linear-gradient(135deg, color-mix(in oklch, var(--ink) 6%, transparent) 0 1px, transparent 1px 12px), var(--paper-deep);
   border-block:1px solid var(--line); display:flex; align-items:flex-end; overflow:hidden; }
.plate.dk{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px), #20231e; border-color:rgba(255,255,255,.12); }
.plate .cap{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); padding:11px 14px; background:color-mix(in oklch, var(--paper) 80%, transparent); border-top:1px solid var(--line); border-right:1px solid var(--line); }
.plate.dk .cap{ color:#a7ab9f; background:rgba(20,22,18,.5); border-color:rgba(255,255,255,.1); }
.hero-band{ height:72vh; }

/* ---- sections ---- */
.sec{ padding:130px 0; }
.sec.tight{ padding:92px 0; }
.opener{ font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--sage); display:flex; gap:16px; align-items:baseline; }
.opener .num{ font-family:var(--mono); color:var(--ink-soft); letter-spacing:.02em; }

/* statement */
.statement{ font-family:var(--display); font-weight:300; font-size:clamp(34px,5vw,68px); line-height:1.08; letter-spacing:-.012em; max-width:20ch; margin:34px 0 0; }
.statement em{ font-style:italic; color:var(--sage); }
.triad{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:72px; }
.triad > div{ border-top:1px solid var(--line-strong); padding:20px 30px 0 0; }
.triad .t{ font-family:var(--display); font-weight:400; font-size:38px; }
.triad p{ font-size:16px; color:var(--ink-soft); margin-top:8px; max-width:30ch; }

/* selected work */
.work-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:14px; margin-bottom:64px; }
.work-head a{ font-family:var(--mono); font-size:13px; color:var(--sage); }
.proj{ display:grid; grid-template-columns:1fr; gap:0; }
.proj-row{ display:grid; grid-template-columns:1.25fr 1fr; gap:60px; align-items:center; padding:64px 0; border-top:1px solid var(--line); }
.proj-row:first-child{ border-top:0; padding-top:0; }
.proj-row.flip{ direction:rtl; }
.proj-row.flip > *{ direction:ltr; }
.proj-plate{ height:480px; }
.proj-info .num{ font-family:var(--mono); font-size:13px; color:var(--sage); }
.proj-info h3{ font-family:var(--display); font-weight:400; font-size:clamp(36px,4vw,56px); line-height:1.0; letter-spacing:-.01em; margin:18px 0 14px; }
.proj-info .meta{ font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px; }
.proj-info p{ font-size:17px; color:var(--ink-2); max-width:46ch; }
.proj-info .read{ font-family:var(--mono); font-size:12.5px; color:var(--sage); display:inline-block; margin-top:14px; border-bottom:1px solid var(--line-strong); padding-bottom:2px; }

/* fields index */
.fields{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:48px; margin-top:56px; }
.field{ display:grid; grid-template-columns:42px 1fr; gap:14px; padding:17px 0; border-top:1px solid var(--line); align-items:baseline; }
.field .n{ font-family:var(--mono); font-size:11.5px; color:var(--sage); }
.field .nm{ font-family:var(--serif); font-size:19px; }
.field:hover .nm{ color:var(--sage); }

/* the witness */
.witness-sec{ background:var(--ink); color:var(--paper); }
.witness-sec .eyebrow,.witness-sec .opener{ color:var(--sage-2); }
.witness-sec .opener .num{ color:#8a8f82; }
.witness-bar{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--sage-2); border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:16px; margin-top:46px; }
.witness-q{ font-family:var(--serif); font-weight:300; font-size:clamp(26px,3.6vw,46px); line-height:1.32; letter-spacing:-.005em; color:var(--paper); max-width:24ch; margin:48px 0; }
.witness-q em{ font-style:italic; color:#aeb6a4; }
.witness-prov{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:#8a8f82; border-top:1px solid rgba(255,255,255,.14); padding-top:18px; }

/* contact / footer */
.foot{ background:var(--paper-deep); }
.foot .big{ font-family:var(--display); font-weight:300; font-size:clamp(58px,11vw,150px); line-height:.92; letter-spacing:-.015em; }
.foot .big em{ font-style:italic; }
.foot .row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:64px; padding-top:26px; border-top:1px solid var(--line-strong); }
.foot .row a{ font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.foot .row a:hover{ color:var(--sage); }
.foot .legal{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:60px; }
.foot-mark{ height:46px; width:auto; display:block; flex:0 0 auto; }

/* reveal */
.rv{ opacity:0; transform:translateY(18px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s 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; } }

@media (max-width:980px){
  .wrap{ padding-inline:28px; }
  .nav{ padding:18px 28px; }
  .nav.scrolled{ padding:14px 28px; }
  .nav .links{ display:none; }
  .nav .menu{ display:block; }
  .triad,.fields{ grid-template-columns:1fr; }
  .proj-row{ grid-template-columns:1fr; gap:28px; padding:48px 0; }
  .proj-row.flip{ direction:ltr; }
  .proj-plate{ height:300px; }
  .sec{ padding:84px 0; }
  .hero-band{ height:50vh; }
}
@media print{ .nav{ position:static; } .rv{ opacity:1!important; transform:none!important; } }
