/* ═══════════════════════════════════════════════════════════════
   components.css — every repeated piece of the site, once.
   Depends on tokens.css. Pages add only what is unique to them.

   Section compositions live at the bottom. A section picks one of
   three shapes — split, overlay or wide — so no two sections in a
   row run the same rhythm.
   ═══════════════════════════════════════════════════════════════ */

/* ── base ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-variation-settings:"wdth" 100;
  font-size:var(--t0);
  line-height:var(--body-lh);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,dl,dd,dt,figure,blockquote{margin:0;padding:0;}
ul{list-style:none;}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible{
  outline:2px solid currentColor;outline-offset:4px;border-radius:2px;
}
::selection{background:var(--ink);color:var(--ground);}

/* ── layout ──────────────────────────────────────────────────── */
.wrap{width:min(100% - (var(--gutter) * 2), var(--measure));margin-inline:auto;}
.wrap-read{width:min(100% - (var(--gutter) * 2), var(--measure-read));margin-inline:auto;}

/* ── type roles ──────────────────────────────────────────────── */
.disp{
  font-variation-settings:"wdth" var(--disp-wdth),"wght" var(--disp-wght);
  line-height:.98;letter-spacing:-.028em;text-wrap:balance;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.quiet{color:var(--ink-50);}

/* ── header ──────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:var(--hair) solid var(--rule);
}
.topbar > *{display:flex;align-items:center;gap:1.25rem;min-height:3.5rem;}
.wordmark{
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:calc(var(--tm) * 1.1);text-decoration:none;margin-right:auto;
}
.topnav{display:flex;gap:1.1rem;font-size:var(--tm);}
.topnav a{
  text-decoration:none;color:var(--ink-50);
  border-bottom:var(--hair) solid transparent;padding-block:.15rem;
  transition:color .18s, border-color .18s;
}
.topnav a:hover{color:var(--ink);border-bottom-color:currentColor;}
.topnav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink);}
/* at phone width the wordmark would wrap mid-name and double the bar's
   height; below ~376px the name and the nav stop fitting on one line at
   all, so the bar takes two rows on purpose rather than overflowing */
@media (max-width:30rem){
  .wordmark{white-space:nowrap;}
  .topnav{gap:.7rem;font-size:calc(var(--tm) * .92);}
}
@media (max-width:23.5rem){
  .topbar > *{flex-wrap:wrap;row-gap:.2rem;padding-block:.55rem;min-height:0;}
  .wordmark{flex-basis:100%;margin-right:0;}
  .topnav{width:100%;}
}

/* ── state chip ──────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--tm);font-weight:500;
  padding:.25rem .65rem .3rem;border-radius:999px;
  border:var(--hair) solid var(--sc, currentColor);
  color:var(--sc, currentColor);
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.chip.active::before{animation:chip-blink 2.4s ease-in-out infinite;}
@keyframes chip-blink{0%,100%{opacity:1;}50%{opacity:.2;}}

/* ── buttons ─────────────────────────────────────────────────── */
.btn-primary{
  font-size:var(--tm);font-weight:600;padding:.5rem 1.1rem .55rem;
  border-radius:var(--radius);background:var(--ink);color:var(--ground);
}
.btn-primary[disabled]{opacity:.35;cursor:not-allowed;}
.btn-quiet{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--tm);font-weight:500;padding:.55rem 1.05rem .6rem;
  border-radius:var(--radius);border:var(--hair) solid var(--ink);
  text-decoration:none;transition:background .18s, color .18s;
}
.btn-quiet:hover{background:var(--ink);color:var(--ground);}
.btn-want{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--tm);font-weight:500;padding:.45rem .9rem .5rem;
  border:var(--hair) solid var(--rule);border-radius:999px;background:var(--ground);
  transition:border-color .18s, background .18s, color .18s;
}
.btn-want:hover{border-color:var(--ink-50);}
.btn-want .tick{
  width:14px;height:14px;border-radius:50%;flex:none;
  border:1.5px solid var(--ink-30);display:grid;place-items:center;
}
.btn-want[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink);}
.btn-want[aria-pressed="true"] .tick{border-color:var(--ground);background:var(--ground);}
.btn-want[aria-pressed="true"] .tick::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);
}

/* ── spec table ──────────────────────────────────────────────── */
.spec{display:grid;border-top:var(--hair) solid currentColor;max-width:30rem;}
.spec div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-block:.7rem;border-bottom:var(--hair) solid currentColor;
  font-size:var(--tm);
}
.spec dd{
  margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:calc(var(--tm) * .92);text-align:right;
}
.draft{opacity:.62;}
.draft::after{content:" \25C7";font-size:.8em;}

/* ── metric row ──────────────────────────────────────────────── */
.metrics{
  display:grid;gap:calc(var(--rhythm) * 1.75) calc(var(--rhythm) * 2);
  grid-template-columns:repeat(auto-fit, minmax(9.5rem, 1fr));
}
.metric .v{
  display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--d-head);font-weight:500;line-height:1;letter-spacing:-.04em;
}
.metric .v .u{font-size:.5em;color:var(--ink-30);margin-left:.15em;letter-spacing:0;}
.metric .k{
  display:block;margin-top:.6rem;font-size:var(--tm);
  color:var(--ink-50);max-width:18ch;line-height:1.35;
}

/* ── question block ──────────────────────────────────────────── */
.ask{
  margin-top:calc(var(--rhythm) * 1.4);max-width:62ch;
  background:var(--raise);
  border-left:3px solid var(--sc, var(--ink));
  padding:1.1rem 1.25rem 1.2rem;
  border-radius:0 var(--radius) var(--radius) 0;
}
.ask .lab{
  display:block;font-size:calc(var(--tm) * .85);letter-spacing:.07em;
  text-transform:uppercase;color:var(--sc, var(--ink));font-weight:600;
  margin-bottom:.5rem;
}
.ask p{
  font-variation-settings:"wdth" 102,"wght" 500;
  font-size:var(--t0);line-height:1.45;color:var(--ink);
}

/* ── queue bar ───────────────────────────────────────────────── */
.qbar{display:flex;flex-wrap:wrap;gap:3px;}
.qbar .seg{
  flex:1 1 auto;min-width:8.5rem;
  display:flex;flex-direction:column;gap:.15rem;
  padding:.7rem .8rem .75rem;background:var(--raise);
  border-top:3px solid var(--sc, var(--ink-30));text-align:left;
  transition:background .18s;
}
.qbar .seg:hover{background:var(--sunk);}
.qbar .seg .n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:var(--t2);line-height:1;color:var(--sc);
}
.qbar .seg .l{font-size:var(--tm);color:var(--ink-50);}
.qbar .seg[aria-pressed="true"]{background:var(--ink);}
.qbar .seg[aria-pressed="true"] .l{color:#BFC9C5;}

/* ── discussion ──────────────────────────────────────────────── */
.thread{
  margin-top:calc(var(--rhythm) * 1.5);max-width:62ch;
  border-left:var(--hair) solid var(--rule-soft);padding-left:1.25rem;
  display:grid;gap:1.35rem;
}
.thread[hidden]{display:none;}
.cmt .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .7rem;font-size:var(--tm);}
.cmt .who b{font-weight:600;}
.cmt .who time{color:var(--ink-30);}
.cmt .who .tag{
  font-size:calc(var(--tm) * .8);letter-spacing:.05em;text-transform:uppercase;
  color:var(--s-building);border:var(--hair) solid currentColor;
  padding:.05rem .4rem .1rem;border-radius:2px;
}
.cmt p{margin-top:.3rem;color:var(--ink-70);line-height:1.5;}
.composer textarea{
  width:100%;min-height:5.5rem;resize:vertical;
  font:inherit;font-size:var(--tm);line-height:1.5;color:var(--ink);
  background:var(--ground);border:var(--hair) solid var(--rule);
  border-radius:var(--radius);padding:.75rem .85rem;
}
.composer textarea::placeholder{color:var(--ink-30);}
.composer-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.6rem;}

/* ── colophon ────────────────────────────────────────────────── */
.colophon{padding-block:var(--step) 3rem;}
.colophon .colo{
  display:grid;gap:2.5rem;padding-top:2rem;
  border-top:var(--hair) solid var(--rule);
}
@media (min-width:52rem){ .colophon .colo{grid-template-columns:1.2fr 1fr;} }
.colophon h2{font-size:var(--d-stmt);max-width:14ch;}
.colophon h3{font-size:var(--tm);font-variation-settings:"wdth" 106,"wght" 650;margin-bottom:.6rem;}
.colophon p,.colophon li{font-size:var(--tm);color:var(--ink-50);line-height:1.5;}
.colophon ul{display:grid;gap:.45rem;margin-top:.5rem;}
.colophon li::before{content:"\25C7 ";color:var(--ink-30);}
.notice{
  background:var(--raise);border-left:2px solid var(--ink-30);
  padding:1.25rem 1.35rem;
}
.foot{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  margin-top:3rem;padding-top:1.25rem;
  border-top:var(--hair) solid var(--rule);
  font-size:var(--tm);color:var(--ink-30);
}
.foot span:last-child{margin-left:auto;}

/* ═══ section compositions ════════════════════════════════════
   Three shapes. A section picks one. The point is that they are
   structurally different, not the same grid in different colours.
   ═══════════════════════════════════════════════════════════════ */

.sec{padding-block:var(--step);}

/* split — the claim on the left, the evidence beside it.
   Use when a section has something concrete to show. */
.sec-split .inner{display:grid;gap:clamp(2.5rem,5vw,4rem);}
@media (min-width:56rem){
  .sec-split .inner{grid-template-columns:5fr 6fr;align-items:center;}
}

/* overlay — the visual is the ground, the words sit low in it.
   No second column, no table. Use when the medium is the message. */
.sec-overlay{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(28rem,58vh,40rem);
  display:flex;align-items:flex-end;
}
.sec-overlay > canvas,.sec-overlay > .bed{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;
}
/* no width here: .wrap owns width and gutter, and a more specific
   selector setting width:100% would silently cancel the side gutter */
.sec-overlay .inner{position:relative;z-index:2;}
.sec-overlay .say{max-width:34ch;}

/* wide — a statement across the full measure, facts under a rule,
   then the evidence full width beneath. Use when the thing speaks
   for itself and does not need arguing beside. */
.sec-wide .statement{
  font-variation-settings:"wdth" var(--disp-wdth),"wght" var(--disp-wght);
  font-size:var(--d-stmt);line-height:1;letter-spacing:-.03em;
  max-width:20ch;text-wrap:balance;
}
.sec-wide .metarow{
  display:flex;flex-wrap:wrap;gap:.5rem clamp(1.5rem,4vw,3.5rem);
  margin-top:calc(var(--rhythm) * 1.6);padding-top:1rem;
  border-top:var(--hair) solid currentColor;
  font-family:var(--mono);font-size:calc(var(--tm) * .95);
}
.sec-wide .band{
  margin-top:calc(var(--rhythm) * 2.75);
  display:flex;justify-content:center;
}

/* ── motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .chip.active::before{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* ── name mark ────────────────────────────────────────────────
   Karta and Raksha are named in Sanskrit and the names mean
   something the products are actually about, so the page leads
   with the word itself rather than a screenshot neither has.
   Devanagari carries a headline stroke across the top, so it
   takes none of the negative tracking the Latin display uses. */
.name-mark .deva{
  display:block;
  font-family:"Noto Sans Devanagari",var(--sans);
  font-weight:700;
  /* this is the hero mark on its page, so it leads rather than matches
     the claim under it */
  font-size:clamp(3.4rem, 9vw, var(--t7));
  line-height:1.2;
  letter-spacing:0;
}
.name-mark .roman{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;
  margin-top:.55rem;
}
.name-mark .roman b{
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:var(--t2);letter-spacing:-.02em;font-weight:400;
}
.name-mark .gloss{
  font-family:var(--mono);font-size:var(--tm);
  color:var(--sc,currentColor);
}

/* ── paired distinctions ──────────────────────────────────────
   "this, not that" rows. Used where the point of a section is a
   contrast rather than a list. */
.pairs{display:grid;border-top:var(--hair) solid currentColor;}
.pairs .pair{
  display:grid;gap:.3rem 2rem;padding-block:1.15rem;
  border-bottom:var(--hair) solid currentColor;
}
@media (min-width:46rem){ .pairs .pair{grid-template-columns:13rem 1fr;align-items:baseline;} }
.pairs .lhs{
  font-family:var(--mono);font-size:var(--tm);
  color:var(--sc,currentColor);
}
.pairs .rhs{font-size:var(--tm);line-height:1.5;max-width:56ch;}