/* ============================================================
   paudelanuj.com.np — brutalist-but-readable
   Anchor: Brutalist (web-design-engineer skill) + neo-brutalist vocabulary
   Act 1 is DELIBERATELY the corporate default — that's the joke.
   ============================================================ */

/* ---------- fonts (self-hosted) ---------- */
@font-face { font-family:'Archivo Black'; src:url('../fonts/ArchivoBlack-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('../fonts/SpaceMono-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('../fonts/SpaceMono-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Noto Serif Devanagari'; src:url('../fonts/NotoSerifDevanagari-700-dev.woff2') format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF; }

/* ---------- tokens ---------- */
:root{
  --paper:#F2EDE3;          /* warm off-white, never #FFF */
  --ink:#141310;
  --crimson:#C41E3A;        /* Nepal-flag crimson — the one accent */
  --hl:#FFD23F;             /* highlight/selection only */
  --line:#141310;
  --focus:#1D4ED8;          /* focus ring only — never decorative */
  --display:'Archivo Black',sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --dev:'Noto Serif Devanagari',serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;
  --bw:3px;                 /* canonical border */
  --shadow:6px 6px 0 0 var(--ink);
  --shadow-lg:10px 10px 0 0 var(--ink);
  --dur:120ms;
}

/* ---------- reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h, 52px) + var(--s4)); }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.6; }
img,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ line-height:1.1; margin:0 0 var(--s4); }
p{ margin:0 0 var(--s4); }
::selection{ background:var(--hl); color:var(--ink); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:var(--s2) var(--s4); z-index:99; }
.skip-link:focus{ left:0; }

/* ---------- header ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:var(--s6);
  padding:var(--s2) var(--s4);
  background:var(--paper); border-bottom:var(--bw) solid var(--line);
  font-family:var(--mono); font-size:.8125rem;
}
.site-head .mark{
  font-family:var(--display); font-size:1.25rem; text-decoration:none; color:var(--paper);
  background:var(--ink); padding:2px 8px; border:var(--bw) solid var(--ink);
}
.site-head nav{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; }
/* padding-block lifts the hit area to the WCAG 2.2 AA 24px floor. These are
   standalone targets in a bar, so the inline-link exception does not apply.
   It costs no header height: the AP mark is still the tallest child. */
.site-head nav a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-transform:uppercase; letter-spacing:.06em; padding-block:var(--s1); }
.site-head nav a:hover{ background:var(--hl); }
.site-head nav a[aria-current="page"]{ background:var(--hl); box-shadow:0 2px 0 0 var(--crimson); }
.head-meta{ margin:0 0 0 auto; letter-spacing:.05em; }

/* Narrow screens: nine links wrap to three rows and the header eats the hero.
   Drop the secondary routes here. They are still reachable from the work
   index and the contact block, and they all come back at 700px. */
@media (max-width:700px){
  .head-meta{ display:none; }
  .site-head{ gap:var(--s3); padding:var(--s2) var(--s3); }
  .site-head nav{ gap:var(--s3); flex-wrap:nowrap; }
  .site-head nav a[href="/graphics/"],
  .site-head nav a[href="/travel/"],
  .site-head nav a[href="#skills"],
  .site-head nav a[href="#dimension"]{ display:none; }
}
/* Services is the widest label and the one that earns its place on a phone,
   so Films yields to it here. The header is fixed: anything past the viewport
   edge is unreachable, not merely clipped, and scrollWidth cannot detect it. */
@media (max-width:430px){
  .site-head nav{ gap:var(--s2); }
  .site-head nav a[href="/gallery/"],
  .site-head nav a[href="/films/"]{ display:none; }
}

.scroll-readout{
  position:fixed; right:var(--s3); bottom:var(--s3); z-index:50;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  background:var(--ink); color:var(--paper); padding:2px 8px; margin:0;
  font-variant-numeric:tabular-nums;
}
/* on phones the fixed badge collides with the stacked display type — drop it */
@media (max-width:760px){ .scroll-readout{ display:none; } }

/* ============================================================
   HERO 2 — bold type-first
   ============================================================ */
/* offset is derived from the real header height (--head-h, set in main.js) so a
   wrapping nav can never sit on top of the title. The fallback covers JS-off. */
.hero2{ padding-top:calc(var(--head-h, 52px) + var(--s6)); border-bottom:var(--bw) solid var(--line);
  overflow-x:clip; /* the rotated photo card's corners must not create page scroll */ }
.hero2-grid{
  /* full-bleed: the type shares the SAME 16px grid line as the AP mark */
  max-width:none; margin:0; padding:var(--s6) var(--s4) var(--s12);
  /* photo column also capped by viewport HEIGHT — it, not the type, drives hero height */
  display:grid; grid-template-columns:1fr minmax(220px, min(26vw, 55vh)); gap:var(--s8);
  align-items:end;
}
.hero2-title{
  grid-column:1; font-family:var(--display); font-weight:400;
  /* scales with viewport WIDTH, but never taller than the viewport allows —
     the vh term keeps the CTAs above the fold on short/ultrawide screens */
  /* The last term is a fit guard: the three lines never wrap and .hero2 clips
     rather than scrolling, so type must never outgrow the title column. That
     column is roughly 74vw minus the gap and padding; 6.4 is the longest
     line's width in em plus a buffer. Re-measure it if the headline changes. */
  font-size:clamp(3rem, min(12vw, 22vh, (74vw - 80px) / 6.4), 24rem);
  font-size:clamp(3rem, min(12vw, 22svh, (74vw - 80px) / 6.4), 24rem);
  line-height:.88; letter-spacing:-.015em;
  text-transform:uppercase; margin:0;
}
.hero2-title .line{ display:block; white-space:nowrap; }
.hero2-title .ln2{ color:var(--crimson); }
.hero2-title .ln3{ -webkit-text-stroke:2px var(--ink); color:transparent; }
.cursor{
  /* terminal UNDERSCORE cursor — a vertical bar reads as the letter I at display sizes */
  display:inline-block; width:.5em; height:.09em; margin-left:.08em;
  background:var(--crimson); color:transparent; -webkit-text-stroke:0;
  overflow:hidden; vertical-align:baseline;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 0%,65%{ opacity:1; } 66%,100%{ opacity:0; } }
.hero2-photo{
  grid-column:2; grid-row:1 / span 2; margin:0; position:relative;
  /* align-self:start closes the empty band between the nav rule and the card */
  align-self:start; margin-top:var(--s6);
  border:var(--bw) solid var(--line); box-shadow:var(--shadow-lg);
  transform:rotate(2deg); background:var(--paper);
}
.hero2-photo img{ display:block; }
.hero2-photo figcaption{ padding:var(--s2) var(--s3); border-top:var(--bw) solid var(--line); }
.stamp-hero{ top:-22px; right:-18px; }
.hero2-meta{ grid-column:1; max-width:56ch; }
.hero2-sub{ font-size:1.2rem; }
.hero2-ctas{ display:flex; gap:var(--s4); flex-wrap:wrap; }
.nb-btn{
  display:inline-block; font-family:var(--mono); font-weight:700; text-decoration:none;
  color:var(--paper); background:var(--ink); border:var(--bw) solid var(--ink);
  padding:.7em 1.2em; box-shadow:var(--shadow);
  transition:transform var(--dur) ease-out, box-shadow var(--dur) ease-out;
}
.nb-btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
.nb-btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 0 var(--ink); }
.nb-btn.ghost{ background:var(--paper); color:var(--ink); }
@media (max-width:820px){
  .hero2{ padding-top:calc(var(--head-h, 52px) + var(--s8)); }
  .hero2-grid{ grid-template-columns:1fr; padding-block:var(--s4) var(--s8); }
  /* Single column here, so the guard tracks the full width minus padding.
     Same 6.4 divisor as the base rule; 14vw still wins at every phone width. */
  .hero2-title{ font-size:clamp(1.8rem, min(14vw, (100vw - 2*var(--s4)) / 6.4), 10rem); }
  .hero2-photo{ grid-column:1; grid-row:auto; max-width:250px; margin-top:var(--s4); }
}

/* image cards */
.nb-card.img-card{ padding:0; overflow:visible; }
.img-card img{ width:100%; border-bottom:var(--bw) solid var(--line); }
.img-card img.tall{ max-height:300px; object-fit:cover; object-position:top; }
.img-card img.logo-img{ max-width:140px; border:0; margin:var(--s6) auto 0; }
.img-card-body{ padding:var(--s4) var(--s6) var(--s6); }
.nb-card.stat-card{ background:var(--ink); color:var(--paper); }
.nb-card.stat-card .nb-link{ color:var(--paper); }
.stat-num{
  font-family:var(--display); font-size:clamp(3rem,6vw,4.5rem); line-height:1;
  color:var(--crimson); margin:0;
}
.stat-card .stat-num{ color:var(--hl); }
.stat-block{ margin:0 0 var(--s6); }
.stat-block .mono-tag{ display:block; margin-top:var(--s1); }
.ai-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s8); align-items:start; }
@media (max-width:820px){ .ai-grid{ grid-template-columns:1fr; } }
/* grid items must be allowed to shrink below their content's intrinsic width,
   or a wide <pre> blows the track past the viewport */
.ai-grid > *, .gita-grid > *, .card-grid > *, .hero2-grid > *{ min-width:0; }
.term{ max-width:100%; }
.ai-note{ max-width:48ch; }
.gita-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--s12); align-items:start; }
@media (max-width:820px){ .gita-grid{ grid-template-columns:1fr; } }
.contact-mail{ font-family:var(--display); font-size:clamp(1.3rem,4.2vw,2.8rem); word-break:break-all; }

/* skills — segmented blocks, each with receipts */
.skill-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--s6); }
.skill-block{
  border:var(--bw) solid var(--line); background:var(--paper);
  box-shadow:var(--shadow); padding:var(--s4) var(--s6) var(--s6);
}
.skill-block h3{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.08em;
  border-bottom:2px solid var(--line); padding-bottom:var(--s2); margin-bottom:var(--s3);
  color:var(--crimson);
}
.skill-block ul{ list-style:none; margin:0; padding:0; }
.skill-block li{ padding:var(--s1) 0 var(--s1) var(--s4); position:relative; font-size:.9375rem; }
.skill-block li::before{ content:"■"; position:absolute; left:0; top:.5em; font-size:.5em; color:var(--crimson); }

.dimension .yt-grid{ margin-top:var(--s8); }

/* neb receipts */
.neb-wide{ max-width:none; }
.neb-stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:var(--s6); margin-bottom:var(--s4); }
.neb-stat-row .stat-block{ margin:0; }

/* gallery */
.gal-filter{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s8); position:sticky; top:52px; z-index:10; background:var(--paper); padding:var(--s3) 0; border-bottom:2px solid var(--line); }
.gal-filter button{
  font-family:var(--mono); font-weight:700; font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase;
  background:var(--paper); color:var(--ink); border:var(--bw) solid var(--line); padding:.4em .9em; cursor:pointer;
  box-shadow:3px 3px 0 0 var(--ink); transition:transform var(--dur) ease-out, box-shadow var(--dur) ease-out;
}
.gal-filter button:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 0 var(--ink); }
.gal-filter button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.gallery-wall .paper{ cursor:zoom-in; }
.gallery-wall .paper[hidden]{ display:none; }
#lightbox{ border:var(--bw) solid var(--line); box-shadow:var(--shadow-lg); padding:0; background:var(--ink); max-width:min(92vw,1100px); }
#lightbox::backdrop{ background:rgba(20,19,16,.85); }
#lightbox img{ max-height:82vh; width:auto; max-width:100%; margin-inline:auto; }
#lightbox figure{ margin:0; }
#lightbox figcaption{ font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; color:var(--paper); padding:var(--s2) var(--s3); }
#lightbox .close-x{ position:absolute; top:var(--s2); right:var(--s2); font-family:var(--mono); font-weight:700; background:var(--paper); color:var(--ink); border:2px solid var(--line); cursor:pointer; padding:.1em .5em; }
.lb-counter{ position:absolute; left:var(--s3); top:var(--s2); margin:0; color:var(--paper); background:var(--ink); padding:2px 8px; border:2px solid var(--paper); }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-weight:700; font-size:1.4rem;
  background:var(--paper); color:var(--ink); border:2px solid var(--line);
  cursor:pointer; padding:.2em .5em;
}
.lb-prev{ left:var(--s2); } .lb-next{ right:var(--s2); }
.lb-nav:hover{ background:var(--hl); }

/* gag ad-cards — always visible, unapologetic */
.paper.gag{ background:var(--ink); color:var(--paper); cursor:default; }
.paper.gag img{ border-bottom:var(--bw) solid var(--paper); filter:grayscale(.2); }
.gag-body{ padding:var(--s4) var(--s4) var(--s6); }
.gag-q{ font-family:var(--display); font-size:1.3rem; text-transform:uppercase; margin:0 0 var(--s2); color:var(--hl); }
.gag-a{ font-size:.9375rem; margin:0 0 var(--s4); color:var(--paper); }
.gag-cta{ font-size:.8125rem; background:var(--crimson); border-color:var(--crimson); box-shadow:4px 4px 0 0 var(--paper); }
.gag-cta:hover{ box-shadow:6px 6px 0 0 var(--paper); }

/* route pages */
.route-hero{ padding:calc(var(--head-h, 52px) + var(--s12)) var(--s4) var(--s8); max-width:1100px; margin-inline:auto; }
.route-hero h1{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.4rem,8vw,6rem); line-height:.92; letter-spacing:-.01em; margin:0 0 var(--s4);
}
.route-hero .crumb{ font-family:var(--mono); font-size:.8125rem; letter-spacing:.06em; }
.route-hero .lede{ font-size:1.15rem; max-width:60ch; }
.flow-rows{ list-style:none; margin:0; padding:0; counter-reset:f; }
.flow-rows li{ counter-increment:f; display:grid; grid-template-columns:3.5rem 1fr; gap:var(--s4); border-bottom:2px solid var(--line); padding:var(--s4) var(--s2); }
.flow-rows li::before{ content:"0" counter(f); font-family:var(--display); font-size:1.4rem; color:var(--crimson); }
.flow-rows strong{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:var(--s1); }
.flow-rows span{ display:block; max-width:64ch; }
.flow-rows li:hover{ background:var(--hl); }

/* ============================================================
   ACT 1 — deliberate corporate default (the setup)
   ============================================================ */
.act1{
  min-height:100vh; min-height:100dvh;
  background:#FAFBFC; color:#111827;
  display:grid; place-items:center;
  padding:calc(var(--s16) + var(--s8)) var(--s4) var(--s16);
}
.act1-inner{ max-width:680px; text-align:center; }
.act1-eyebrow{ font-size:.75rem; letter-spacing:.22em; color:#6B7280; text-transform:uppercase; }
.tmpl-tag{ font-family:var(--mono); color:#9CA3AF; letter-spacing:0; }
.act1 h1{ font-family:var(--body); font-weight:700; font-size:clamp(2rem,5.5vw,3.4rem); letter-spacing:-0.02em; color:#111827; }
.act1-sub{ color:#4B5563; max-width:54ch; margin-inline:auto; }
.act1-ctas{ display:flex; gap:var(--s3); justify-content:center; margin:var(--s6) 0; flex-wrap:wrap; }
.act1-btn{
  display:inline-block; padding:.7em 1.4em; border-radius:10px; text-decoration:none;
  border:1px solid #D1D5DB; color:#111827; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.08); transition:box-shadow var(--dur) ease-out;
}
.act1-btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,.12); }
.act1-btn.primary{ background:#2563EB; border-color:#2563EB; color:#fff; }
.act1-card{ margin:var(--s8) auto 0; max-width:290px; }
.act1-card img{ border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.act1-card figcaption{ font-size:.8125rem; color:#6B7280; margin-top:var(--s2); }

/* ============================================================
   THE TEAR — the signature moment
   ============================================================ */
.tear{ background:var(--ink); color:var(--paper); text-align:center; padding:var(--s16) var(--s4); position:relative; }
.tear-zig{
  position:absolute; left:0; right:0; height:28px; top:-28px;
  background:var(--ink);
  clip-path:polygon(0 100%,4% 40%,9% 90%,14% 30%,19% 85%,25% 20%,31% 90%,36% 45%,42% 95%,47% 25%,53% 80%,58% 35%,64% 95%,69% 30%,75% 85%,80% 15%,86% 90%,91% 45%,96% 95%,100% 30%,100% 100%);
}
.tear-zig.flip{ top:auto; bottom:-28px; transform:scaleY(-1); }
.tear-small{ font-family:var(--mono); letter-spacing:.08em; opacity:.75; }
.tear-big{
  font-family:var(--display);
  font-size:clamp(2rem,7.5vw,6rem); line-height:.95; text-transform:uppercase;
  margin:var(--s8) auto; max-width:16ch;
}
.tear-big span{ color:var(--hl); }

/* ============================================================
   ACT 2 — the real site
   ============================================================ */
.act2{ border-top:var(--bw) solid var(--line); }
.act2 section{ padding:var(--s24) var(--s4); max-width:1100px; margin-inline:auto; }
@media (max-width:700px){ .act2 section{ padding:var(--s16) var(--s4); } }

.sec-h{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.8rem,4.5vw,3.2rem); letter-spacing:-.01em;
  border-bottom:var(--bw) solid var(--line); padding-bottom:var(--s3); margin-bottom:var(--s8);
}
.sec-sub{ display:block; font-family:var(--mono); font-size:.8125rem; font-weight:400; letter-spacing:.04em; text-transform:none; margin-top:var(--s2); opacity:.8; }
.sub-h{ font-family:var(--display); text-transform:uppercase; font-size:1.25rem; margin:var(--s12) 0 var(--s4); }
.mono-tag{ font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }

/* ticker */
.ticker{ overflow:hidden; white-space:nowrap; border-block:var(--bw) solid var(--line); background:var(--hl);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.ticker-track{ display:inline-block; animation:ticker 32s linear infinite; font-family:var(--display); font-size:1.1rem; padding:var(--s2) 0; text-transform:uppercase; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* views */
.view-list{ list-style:none; margin:0; padding:0; counter-reset:v; }
.view-list li{
  counter-increment:v; border-bottom:2px solid var(--line); padding:var(--s6) 0 var(--s6) var(--s16); position:relative;
}
.view-list li::before{
  content:"0" counter(v); position:absolute; left:0; top:var(--s6);
  font-family:var(--mono); font-weight:700; font-size:1rem; color:var(--crimson);
}
.view-list strong{
  display:block; font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.15rem,2.8vw,1.9rem); line-height:1.15; margin-bottom:var(--s2);
}
.view-list span{ max-width:60ch; display:block; }
.view-list li:hover{ background:linear-gradient(to right, var(--hl) 0, var(--hl) 100%) no-repeat; }

/* story timeline */
.time-rows{ list-style:none; margin:0; padding:0; }
.time-rows li{
  display:grid; grid-template-columns:6rem 1fr; gap:var(--s4);
  border-bottom:2px solid var(--line); padding:var(--s6) var(--s2);
}
.time-rows .num{ font-family:var(--mono); font-weight:700; color:var(--crimson); font-variant-numeric:tabular-nums; }
.time-rows strong{ display:block; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.2rem; margin-bottom:var(--s1); }
.time-rows div span{ display:block; max-width:62ch; }
.time-rows li:hover{ background:var(--hl); }
@media (max-width:560px){ .time-rows li{ grid-template-columns:1fr; gap:var(--s1); } }

/* the system (brand colophon) */
.swatch-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); gap:var(--s6); margin-bottom:var(--s12); }
.swatch{ display:flex; flex-direction:column; gap:var(--s2); }
.chip{ display:block; height:88px; border:var(--bw) solid var(--line); box-shadow:var(--shadow); }
.chip-lokta{ background:#F2EDE3; } .chip-ink{ background:#141310; }
.chip-sindoor{ background:#C41E3A; } .chip-marigold{ background:#FFD23F; }
.type-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:var(--s6); border-block:2px solid var(--line); padding:var(--s6) 0; margin-bottom:var(--s8); }
.spec{ margin:0; font-size:1.5rem; line-height:1.3; }
.spec span{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin-top:var(--s2); }
.spec-display{ font-family:var(--display); }
.spec-body{ font-family:var(--body); font-weight:700; }
.spec-mono{ font-family:var(--mono); }
.spec-dev{ font-family:var(--dev); font-weight:700; font-size:2rem; }
.system-note{ max-width:62ch; }
.foot-mark{ display:inline-block; margin-bottom:var(--s2); }

/* work index */
.index-rows{ list-style:none; margin:0; padding:0; }
.index-rows a{
  display:grid; grid-template-columns:4rem 1fr auto; align-items:baseline; gap:var(--s4);
  padding:var(--s4) var(--s2); border-bottom:2px solid var(--line);
  text-decoration:none; color:var(--ink);
}
.index-rows a:hover{ background:var(--hl); }
.index-rows .num{ font-family:var(--display); font-size:1.6rem; }
.index-rows .what{ font-weight:700; }
.index-rows .tag{ font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; border:2px solid var(--line); padding:2px 8px; }
@media (max-width:600px){ .index-rows a{ grid-template-columns:3rem 1fr; } .index-rows .tag{ display:none; } }

/* cards */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--s8); }
.nb-card{
  background:var(--paper); border:var(--bw) solid var(--line); box-shadow:var(--shadow);
  padding:var(--s6); position:relative;
  transition:transform var(--dur) ease-out, box-shadow var(--dur) ease-out;
}
.nb-card:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
.nb-card h3{ font-family:var(--display); text-transform:uppercase; font-size:1.35rem; }
.nb-card .mono-tag{ color:var(--crimson); margin-bottom:var(--s3); }
.tilt-l{ transform:rotate(-1.2deg); } .tilt-r{ transform:rotate(1.1deg); }
.tilt-l:hover,.tilt-r:hover{ transform:rotate(0) translate(-2px,-2px); }
.nb-link{ color:var(--ink); font-family:var(--mono); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.nb-link:hover{ background:var(--hl); }

.stamp{
  position:absolute; margin:0; right:var(--s4); top:-18px; z-index:2;
  transform:rotate(-6deg);
  font-family:var(--mono); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-align:center;
  border:var(--bw) solid var(--crimson); color:var(--crimson); border-radius:50%;
  padding:1.1em .8em; background:var(--paper);
}
.apps{ position:relative; }

/* terminal */
.term{ border:var(--bw) solid var(--line); box-shadow:var(--shadow); background:var(--ink); color:var(--paper); }
.term-bar{
  display:flex; justify-content:space-between; margin:0;
  font-family:var(--mono); font-size:.8125rem; padding:var(--s2) var(--s3);
  background:var(--paper); color:var(--ink); border-bottom:var(--bw) solid var(--line);
}
.term-body{ padding:var(--s4) var(--s6); overflow-x:auto; }
.term-body pre{ font-family:var(--mono); font-size:.8125rem; line-height:1.7; margin:0 0 var(--s4); }
.term-note{ font-size:.9375rem; max-width:70ch; margin:0; }
.term-note strong{ color:var(--hl); }

/* films */
.loop-wall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--s8); }
.loop{ margin:0; border:var(--bw) solid var(--line); box-shadow:var(--shadow); background:var(--ink); }
.loop video{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.loop figcaption,.paper figcaption{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  padding:var(--s2) var(--s3); background:var(--paper); border-top:var(--bw) solid var(--line);
}
.yt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--s8); }
.yt-facade{
  position:relative; aspect-ratio:16/9; border:var(--bw) solid var(--line); box-shadow:var(--shadow);
  background:var(--poster) center/cover no-repeat, var(--ink); cursor:pointer; padding:0;
  transition:transform var(--dur) ease-out, box-shadow var(--dur) ease-out;
}
.yt-facade:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); }
.yt-facade:active{ transform:translate(4px,4px); box-shadow:0 0 0 0 var(--ink); }
.yt-label{
  position:absolute; left:0; bottom:0; right:auto; max-width:100%;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-align:left;
  background:var(--paper); color:var(--ink); padding:var(--s1) var(--s3); border-top:var(--bw) solid var(--line); border-right:var(--bw) solid var(--line);
}
.yt-play{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:2.2rem; color:var(--paper); text-shadow:0 0 0 var(--ink);
  background:rgba(20,19,16,.25);
}
.yt-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.edu-strip{ margin-top:var(--s8); font-size:1rem; max-width:70ch; }

/* graphics wall */
.paper-wall{ column-count:3; column-gap:var(--s8); }
@media (max-width:900px){ .paper-wall{ column-count:2; } }
@media (max-width:560px){ .paper-wall{ column-count:1; } }
.paper{
  margin:0 0 var(--s8); break-inside:avoid;
  border:var(--bw) solid var(--line); box-shadow:var(--shadow); background:var(--paper);
  transition:transform var(--dur) ease-out;
}
.paper:hover{ transform:rotate(0) scale(1.01); }

/* gita */
.gita-block{
  margin:0 0 var(--s8); padding:var(--s12) var(--s8);
  background:var(--ink); color:var(--paper);
  border:var(--bw) solid var(--line); box-shadow:var(--shadow-lg);
  position:relative;
}
.gita-block::before{
  content:"२.४७"; position:absolute; top:var(--s3); right:var(--s4);
  font-family:var(--dev); color:var(--crimson); font-size:1.4rem;
}
.gita-dev{ font-family:var(--dev); font-weight:700; font-size:clamp(1.4rem,3.6vw,2.4rem); line-height:1.7; }
.gita-translit{ font-family:var(--mono); letter-spacing:.04em; color:var(--hl); }
.gita-en{ font-size:1.1rem; max-width:56ch; }
.gita-block cite{ font-family:var(--mono); font-style:normal; font-size:.8125rem; opacity:.8; }
.gita-gloss{ max-width:62ch; font-size:1.05rem; margin-bottom:var(--s12); }
.photo-block{ margin:0; max-width:560px; border:var(--bw) solid var(--line); box-shadow:var(--shadow-lg); transform:rotate(-1deg); }
.photo-block img{ filter:grayscale(1); transition:filter 300ms ease-out; }
.photo-block:hover img, .photo-block:focus-within img{ filter:none; }
.photo-block figcaption{ padding:var(--s2) var(--s3); border-top:var(--bw) solid var(--line); }

/* overlord */
.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0; opacity:0; pointer-events:none;
}
.glitch:hover::before{ opacity:.8; color:var(--crimson); animation:gl-a 300ms steps(2) infinite; }
.glitch:hover::after{ opacity:.8; color:var(--focus); animation:gl-b 300ms steps(2) infinite; }
@keyframes gl-a{ to{ transform:translate(-3px,2px);} }
@keyframes gl-b{ to{ transform:translate(3px,-2px);} }
.overlord-intro{ max-width:62ch; }
.disclaimer{ opacity:.75; margin-bottom:var(--s4); }
.wwad-item{ border:var(--bw) solid var(--line); background:var(--paper); margin-bottom:var(--s3); box-shadow:var(--shadow); }
.wwad-item summary{
  font-family:var(--mono); font-weight:700; padding:var(--s3) var(--s4); cursor:pointer;
  list-style:none;
}
.wwad-item summary::-webkit-details-marker{ display:none; }
.wwad-item summary:hover{ background:var(--hl); }
.wwad-item[open] summary{ border-bottom:2px solid var(--line); background:var(--ink); color:var(--paper); }
.wwad-item p{ padding:var(--s3) var(--s4); margin:0; max-width:70ch; }

/* contact */
.contact-big{ font-family:var(--display); font-size:clamp(1.2rem,3.4vw,2.2rem); line-height:1.5; }
.contact-note{ font-size:1rem; max-width:60ch; }
.site-foot{
  border-top:var(--bw) solid var(--line); padding:var(--s6) var(--s4);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-align:center;
}
.site-foot p{ margin:0; }

/* ============================================================
   SERVICES — the sales surface.
   Same anchor (Brutalist, brand-applied). No new colors, no new
   faces, no new elevation tiers — every value below traces to the
   token block at the top of this file.
   Contrast note: crimson-on-marigold is only 4.03:1, so any row
   that highlights to --hl swaps its crimson key to --ink on hover;
   on --ink surfaces the accent is --hl (13:1), never crimson (3.2:1).
   ============================================================ */

/* ---------- services hero: asymmetric, thesis left / offer right ---------- */
.svc-hero{ overflow-x:clip; }   /* the tilted offer card must not scroll the page */
.svc-hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,25rem);
  gap:var(--s12); align-items:start; margin-top:var(--s8);
}
@media (max-width:900px){ .svc-hero-grid{ grid-template-columns:1fr; gap:var(--s8); } }
.svc-ctas{ display:flex; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s8); }
.svc-offer{
  margin:0; border:var(--bw) solid var(--line); box-shadow:var(--shadow-lg);
  background:var(--ink); color:var(--paper); transform:rotate(-1.4deg);
}
.svc-offer h2{
  font-family:var(--display); text-transform:uppercase; font-size:1.15rem; margin:0;
  padding:var(--s4) var(--s6); border-bottom:var(--bw) solid var(--paper); color:var(--hl);
}
.svc-offer dl{
  margin:0; padding:var(--s6);
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3) var(--s4);
  font-family:var(--mono); font-size:.8125rem; line-height:1.5;
}
.svc-offer dt{ font-weight:700; color:var(--hl); font-variant-numeric:tabular-nums; white-space:nowrap; }
.svc-offer dd{ margin:0; }
@media (max-width:900px){ .svc-offer{ transform:rotate(-1deg); max-width:25rem; } }

/* ---------- ledger: the shapes of repeated work ---------- */
.ledger{ list-style:none; margin:0; padding:0; border-top:2px solid var(--line); }
.ledger li{
  display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:var(--s4);
  border-bottom:2px solid var(--line); padding:var(--s4) var(--s2);
  transition:background var(--dur) ease-out;
}
.ledger li:hover{ background:var(--hl); }
.lg-k{
  font-family:var(--mono); font-weight:700; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--crimson);
  transition:color var(--dur) ease-out;
}
.ledger li:hover .lg-k{ color:var(--ink); }   /* crimson on marigold is 4.03:1 — below AA */
.lg-v{ display:block; max-width:64ch; }
@media (max-width:640px){ .ledger li{ grid-template-columns:1fr; gap:var(--s1); } }

/* ---------- THE RIDGE — signature: the brand's ridgeline as process spine ---------- */
.ridge{ margin-top:var(--s8); }
.ridge-crest{
  height:34px; background:var(--ink);
  clip-path:polygon(0 100%,4% 40%,9% 90%,14% 30%,19% 85%,25% 20%,31% 90%,36% 45%,42% 95%,47% 25%,53% 80%,58% 35%,64% 95%,69% 30%,75% 85%,80% 15%,86% 90%,91% 45%,96% 95%,100% 30%,100% 100%);
}
.ridge-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:var(--bw) solid var(--line); box-shadow:var(--shadow);
}
.ridge-steps li{
  padding:var(--s6); border-right:var(--bw) solid var(--line);
  transition:background var(--dur) ease-out;
}
.ridge-steps li:last-child{ border-right:0; }
.ridge-steps li:hover{ background:var(--hl); }
.ridge-when{
  font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--crimson); margin:0 0 var(--s2);
  font-variant-numeric:tabular-nums; transition:color var(--dur) ease-out;
}
.ridge-steps li:hover .ridge-when{ color:var(--ink); }
.ridge-steps h3{ font-family:var(--display); text-transform:uppercase; font-size:1.3rem; margin:0 0 var(--s3); }
.ridge-steps p:last-child{ margin:0; font-size:.9375rem; }
@media (max-width:860px){
  .ridge-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ridge-steps li:nth-child(2n){ border-right:0; }
  .ridge-steps li:nth-child(-n+2){ border-bottom:var(--bw) solid var(--line); }
}
@media (max-width:560px){
  .ridge-steps{ grid-template-columns:1fr; }
  .ridge-steps li{ border-right:0; border-bottom:var(--bw) solid var(--line); }
  .ridge-steps li:last-child{ border-bottom:0; }
}

/* ---------- the audit panel: what gets watched (lives inside .term) ---------- */
.watch-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:var(--s6); }
.watch-k{
  font-family:var(--mono); font-weight:700; font-size:.8125rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hl); margin:0 0 var(--s2);
}
.watch-v{ margin:0; font-size:.9375rem; }
.watch-out{
  margin:var(--s6) 0 0; padding-top:var(--s4); border-top:2px solid var(--paper);
  font-size:.9375rem; max-width:70ch;
}
.watch-out strong{ color:var(--hl); }

/* ---------- lanes: full-width, content-differentiated (never an icon-tile row) ---------- */
.lane{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--s8);
  padding:var(--s8); margin-bottom:var(--s8);
  border:var(--bw) solid var(--line); box-shadow:var(--shadow); background:var(--paper);
}
.lane:last-child{ margin-bottom:0; }
@media (max-width:820px){ .lane{ grid-template-columns:1fr; gap:var(--s6); padding:var(--s6); } }
.lane h3{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.4rem,3.4vw,2rem); margin:0 0 var(--s2); }
.lane-tag{ font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--crimson); margin:0 0 var(--s4); }
.lane-thesis{ margin:0; max-width:42ch; }
.lane-list{ list-style:none; margin:0; padding:0; }
.lane-list li{ padding:var(--s2) 0 var(--s2) var(--s6); position:relative; font-size:.9375rem; }
.lane-list li::before{ content:"■"; position:absolute; left:0; top:.85em; font-size:.5em; color:var(--crimson); }
/* the proven lane inverts — the inversion means "this one has receipts", not decoration */
.lane.proof{ background:var(--ink); color:var(--paper); }
.lane.proof .lane-tag{ color:var(--hl); }
.lane.proof .lane-list li::before{ color:var(--hl); }
.lane-proof{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); gap:var(--s4);
  margin:var(--s6) 0 0; padding-top:var(--s4); border-top:2px solid var(--paper);
}
.lane-proof p{ margin:0; }
.lane-proof b{
  display:block; font-family:var(--display); font-size:1.6rem; color:var(--hl);
  line-height:1; font-variant-numeric:tabular-nums;
}
.lane-proof span{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- the keys: trust rules, unnumbered (no fake sequence) ---------- */
.keys{ list-style:none; margin:0; padding:0; border-top:2px solid var(--line); }
.keys li{ border-bottom:2px solid var(--line); padding:var(--s4) var(--s2); transition:background var(--dur) ease-out; }
.keys li:hover{ background:var(--hl); }
.keys strong{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:var(--s1); }
.keys span{ display:block; max-width:66ch; }

/* ---------- reach: direct contact, big targets, always a copyable fallback ---------- */
.reach{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:var(--s6); }
.reach a{
  display:grid; align-content:center; gap:var(--s2);
  min-height:7rem; padding:var(--s6); text-decoration:none;
  border:var(--bw) solid var(--line); box-shadow:var(--shadow);
  background:var(--paper); color:var(--ink);
  transition:transform var(--dur) ease-out, box-shadow var(--dur) ease-out, background var(--dur) ease-out;
}
.reach a:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-lg); background:var(--hl); }
.reach a:active{ transform:translate(4px,4px); box-shadow:0 0 0 0 var(--ink); }
.reach a.primary{ background:var(--crimson); border-color:var(--crimson); color:var(--paper); }
.reach a.primary:hover{ background:var(--crimson); }
.r-k{ font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; }
.r-v{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1rem,2.4vw,1.35rem); line-height:1.15; overflow-wrap:anywhere; }
.reach-alt{ margin-top:var(--s6); max-width:70ch; }

/* ---------- homepage services band ---------- */
.svcband-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); align-items:start; }
@media (max-width:820px){ .svcband-grid{ grid-template-columns:1fr; } }
.svc-lanes{ list-style:none; margin:0 0 var(--s6); padding:0; }
.svc-lanes li{
  border-bottom:2px solid var(--line); padding:var(--s3) 0;
  font-family:var(--display); text-transform:uppercase; font-size:1.05rem;
}
.svc-lanes li span{ display:block; font-family:var(--body); font-weight:400; text-transform:none; font-size:.9375rem; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ticker-track{ animation:none; }
  .glitch:hover::before,.glitch:hover::after{ animation:none; opacity:0; }
  .nb-card,.yt-facade,.paper,.loop,.tilt-l,.tilt-r{ transition:none; }
  .photo-block img{ filter:none; transition:none; }
  .ledger li,.ridge-steps li,.keys li,.reach a,.lg-k,.ridge-when{ transition:none; }
}