/* ============================================================================
   Proof of Hands — components
   Nav · buttons · tags · cards · lists · panels · footer
   ========================================================================= */

/* parked above the page, not to the left: a negative left offset widened the
   document by 62px on phones and let the whole page pan sideways */
.skip{position:absolute;left:12px;top:-9999px;z-index:100;background:var(--haldi);
  color:#14120F;padding:12px 20px;font-family:var(--mono);font-size:var(--micro);font-weight:600}
.skip:focus{top:12px}

/* ═══════════════════════════════════════════════════════════════ NAV ═══ */
/* A real bar, pinned, full width, sitting ON the page — not floating above
   it. Two tiers: utility on top, category chips beneath where relevant.  */
.nav{
  position:relative;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease);
}
.nav.float{
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.nav-in{
  display:flex;align-items:center;gap:var(--s5);
  height:var(--nav-h);
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
.brand{display:flex;align-items:center;gap:10px;flex:none;margin-right:var(--s2)}
.brand-mark{width:22px;height:22px;flex:none;color:var(--fg)}
.brand-name{display:block;font-family:var(--serif);font-weight:500;font-size:17px;
  letter-spacing:.13em;line-height:1;text-transform:uppercase;white-space:nowrap}
.brand-sub{display:block;font-family:var(--sans);font-size:var(--micro);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin-top:3px}

.nav-links{display:flex;align-items:center;gap:2px;margin-right:auto}
.nav-links a{
  position:relative;padding:8px 12px;font-size:14px;color:var(--fg-2);
  border-radius:var(--r-pill);
  transition:color var(--t1) var(--ease),background var(--t1) var(--ease);
}
.nav-links a:hover{color:var(--fg);background:var(--bg-2)}
.nav-links a.on{color:var(--fg)}
.nav-links a.on::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--haldi);
}
.nav-right{display:flex;align-items:center;gap:var(--s2);flex:none}

/* icon button — round, because it is an action */
.iconbtn{
  width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--fg-2);border:1px solid transparent;
  transition:background var(--t1) var(--ease),color var(--t1) var(--ease);
}
.iconbtn:hover{background:var(--bg-2);color:var(--fg)}
.iconbtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none}
/* The icon shows the theme you are IN. Light is now the unconditional default,
   so the no-attribute case is light too — this used to hang off a
   prefers-color-scheme query, which meant a dark-OS reader saw a moon on a
   light page until they touched the toggle. */
.theme-t .sun{display:none}
:root[data-theme="light"] .theme-t .sun,
:root:not([data-theme]) .theme-t .sun{display:block}
:root[data-theme="light"] .theme-t .moon,
:root:not([data-theme]) .theme-t .moon{display:none}

.burger{width:40px;height:40px;border-radius:var(--r-pill);position:relative;display:none;
  transition:background var(--t1) var(--ease)}
.burger:hover{background:var(--bg-2)}
.burger b{position:absolute;left:11px;width:18px;height:1.5px;background:var(--fg);
  transition:transform .45s var(--ease),opacity var(--t2) var(--ease)}
.burger b:nth-child(1){top:16px}
.burger b:nth-child(2){top:23px}
body.menu-open .burger b:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger b:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ── subnav: category chips. Same container as content, so it aligns. ── */
.subnav{
  position:sticky;top:var(--nav-h);z-index:49;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.subnav.float{background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.subnav-in{
  display:flex;align-items:center;gap:var(--s4);min-height:var(--sub-h);
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
.chiprow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-block:8px;flex:1}
@media (max-width:1130px){
  .chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
    mask-image:linear-gradient(90deg,#000 92%,transparent)}
}
.chiprow::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:start;
  padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:14px;color:var(--fg-2);white-space:nowrap;
  transition:border-color var(--t1) var(--ease),color var(--t1) var(--ease),
             background var(--t1) var(--ease);
}
.chip:hover{border-color:var(--line-3);color:var(--fg)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.subnav-end{flex:none;display:flex;align-items:center;gap:var(--s3)}
@media (max-width:760px){
  .subnav-in{gap:var(--s2)}
  .subnav-end select.field{
    padding:6px 26px 6px 10px;font-size:var(--micro);
    background-position:calc(100% - 13px) 52%,calc(100% - 9px) 52%;
    max-width:120px;
  }
}
@media (max-width:420px){
  .subnav-end select.field{max-width:96px;font-size:var(--micro)}
}

/* ── mobile menu ── */
.menu{
  position:fixed;inset:0;z-index:55;background:var(--bg);
  opacity:0;pointer-events:none;transition:opacity var(--t2) var(--ease),visibility 0s linear var(--t2);
  /* visibility takes it out of the tab order too. Without this, nine invisible
     menu links sat between the burger and the page content on every page. */
  visibility:hidden;
  display:flex;flex-direction:column;padding-top:var(--nav-h);overflow-y:auto;
}
body.menu-open{overflow:hidden}
body.menu-open .menu{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.menu-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:var(--s6) var(--gut) var(--s8)}
.menu-list a{
  display:flex;align-items:baseline;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line-2);
  font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.1;
  letter-spacing:-.024em;font-variation-settings:"SOFT" 6,"WONK" 1;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.menu-list a em{font-family:var(--mono);font-style:normal;font-size:var(--micro);
  font-weight:500;letter-spacing:.14em;color:var(--fg-3);flex:none;width:22px}
body.menu-open .menu-list a{opacity:1;transform:none}
body.menu-open .menu-list a:nth-child(1){transition-delay:.04s}
body.menu-open .menu-list a:nth-child(2){transition-delay:.08s}
body.menu-open .menu-list a:nth-child(3){transition-delay:.12s}
body.menu-open .menu-list a:nth-child(4){transition-delay:.16s}
body.menu-open .menu-list a:nth-child(5){transition-delay:.20s}
body.menu-open .menu-list a:nth-child(6){transition-delay:.24s}
body.menu-open .menu-list a:nth-child(7){transition-delay:.28s}
body.menu-open .menu-list a:nth-child(8){transition-delay:.32s}

/* Below the desktop breakpoint the bar carries only: brand · theme · menu.
   Everything else lives in the menu, so the bar can never crowd or overflow. */
@media (max-width:980px){
  .nav-links{display:none}
  .burger{display:block}
  .nav .btn,
  .nav .iconbtn[href]{display:none}
}
@media (max-width:400px){
  .brand-sub{display:none}
  .nav-in{gap:var(--s3)}
}

/* ═══════════════════════════════════════════════════════════ BUTTONS ═══ */
/* Round. Always round. They are actions. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:44px;padding:0 22px;border-radius:var(--r-pill);
  background:var(--fg);color:var(--bg);
  font-size:14px;font-weight:550;letter-spacing:-.005em;white-space:nowrap;
  transition:transform var(--t1) var(--ease),opacity var(--t1) var(--ease),
             background var(--t1) var(--ease),border-color var(--t1) var(--ease);
}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.975)}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;flex:none;
  transition:transform var(--t2) var(--spring)}
.btn:hover svg{transform:translateX(3px)}
.btn-out{background:transparent;color:var(--fg);border:1px solid var(--line-3)}
.btn-out:hover{background:var(--bg-2);opacity:1;border-color:var(--fg-3)}
.btn-ind{background:var(--indigo-500);color:#fff}
:root[data-theme="light"] .btn-ind{background:var(--indigo-500);color:#fff}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn-lg{height:50px;padding:0 28px;font-size:17px}
.btn-full{width:100%}

.tlink{
  display:inline-flex;align-items:center;gap:8px;position:relative;
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg);padding-bottom:4px;white-space:nowrap;
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:right;transform:scaleX(.2);
  transition:transform var(--t3) var(--ease)}
.tlink:hover::after{transform-origin:left;transform:scaleX(1)}
.tlink svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none;
  transition:transform var(--t2) var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
/* Inside running prose a .tlink must behave like text — inline, and free to
   wrap — not like the standalone inline-flex button above. That default
   refused to wrap and blew how.html's layout out sideways at 375px. Two
   classes outrank the bare .tlink rule above regardless of source order or
   pointer type, so this wins at every width, not just @media(pointer:coarse). */
.p .tlink,p .tlink,li .tlink{display:inline;white-space:normal}

/* ══════════════════════════════════════════════════════════════ TAGS ═══ */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2);white-space:nowrap;
}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.tag-ok{color:var(--verd);border-color:color-mix(in srgb,var(--verd) 40%,transparent)}
.tag-flag{color:var(--madder);border-color:color-mix(in srgb,var(--madder) 40%,transparent)}
.tag-dec{color:var(--haldi-ink);border-color:color-mix(in srgb,var(--haldi) 40%,transparent)}
.tag-rec{color:var(--indigo);border-color:color-mix(in srgb,var(--indigo) 40%,transparent)}
.tag-plain::before{display:none}
/* A tag long enough to be a sentence ("1 flag · stays public, no action
   available") cannot honour white-space:nowrap on a 375px phone — it pushed
   the document 1px wider than the viewport, which is enough to make the whole
   page scroll sideways. Below the phone breakpoint a tag is allowed to wrap.
   The pill shape survives; only the single-line promise is dropped. */
@media (max-width:560px){
  .tag{white-space:normal;max-width:100%;align-items:flex-start;line-height:1.4}
  .tag::before{margin-top:5px}
}

/* ═══════════════════════════════════════════════════ EVIDENCE / SQUARE ═══ */
/* Images, data, records. Flat corners. */
.fig{position:relative;overflow:hidden;background:var(--bg-3);border-radius:var(--r-flat)}
.fig img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.fig-cap{
  position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  background:linear-gradient(transparent,rgba(15,13,11,.86));
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.04em;color:#F4EFE7;
}
.fig-label{
  position:absolute;left:10px;top:10px;z-index:2;
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#F4EFE7;
  background:rgba(15,13,11,.7);backdrop-filter:blur(6px);padding:4px 9px;
  border-radius:var(--r-pill);
}

/* the data card — square, hairline, no shadow. It is a fact, not an offer. */
.card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-flat);
  padding:var(--s5);
}
.band-alt .card{background:var(--bg)}
.card-k{display:block;min-width:0;overflow-wrap:anywhere;font-family:var(--sans);font-size:var(--micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s4)}
.card-rule{border-left:2px solid var(--haldi)}
.card-flag{border-left:2px solid var(--madder)}
.card-ok{border-left:2px solid var(--verd)}

/* the panel — a soft container for interactive things (round-ish, inviting) */
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-flat);padding:var(--s5)}
.band-alt .panel{background:var(--bg)}

/* ═══════════════════════════════════════════════════════ RULED LIST ═══ */
/* Replaces boxed grids. Hairlines, numbers in the margin. Calmer, denser,
   and it reads as a document rather than a pile of tiles.                */
.rlist{border-top:1px solid var(--line)}
.rlist>li,.rlist>div{
  display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--line);align-items:start;
}
.rlist .n{font-family:var(--sans);font-size:var(--micro);font-weight:500;letter-spacing:.12em;
  color:var(--fg-3);padding-top:4px}
.rlist h3{margin-bottom:8px}
.rlist-2>li,.rlist-2>div{grid-template-columns:56px minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:860px){
  .entry{margin-top:var(--s7)}
  .rlist>li,.rlist>div,.rlist-2>li,.rlist-2>div{
    grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s5) 0}
  .rlist .n{padding-top:0}
}

/* fact list — ✓ / ⚠ rows */
.facts>li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);
  font-size:14px;color:var(--fg-2);line-height:1.55}
.facts>li:last-child{border-bottom:0}
.facts>li>b{flex:none;width:14px;text-align:center;font-size:var(--micro);line-height:1.6}
.facts>li.ok>b{color:var(--verd)} .facts>li.flag>b{color:var(--madder)}
.facts strong{color:var(--fg);font-weight:550}

/* key/value */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 20px;
  font-size:14px;align-items:baseline}
.kv dt{font-family:var(--sans);font-size:var(--micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap;padding-top:3px}
.kv dd{color:var(--fg);overflow-wrap:anywhere}
@media (max-width:560px){
  .anim-cap{font-size:var(--micro);letter-spacing:.06em;padding:8px 10px}
  .kv{grid-template-columns:minmax(0,1fr);gap:0}
  .kv dt{padding-top:14px;white-space:normal;overflow-wrap:anywhere}
  .kv dd{padding-bottom:5px;border-bottom:1px solid var(--line-2)}
  .kv dd:last-child{border-bottom:0}
}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-flat);overflow:hidden}
.stats>div{padding:var(--s5) var(--s4);border-right:1px solid var(--line);min-width:0}
.stats>div:last-child{border-right:0}
.stats b{display:block;font-family:var(--mono);font-weight:600;font-size:26px;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;color:var(--fg);
  white-space:nowrap}
/* direct child only — a counter <span> inside <b> must not inherit the label style */
.stats>div>span{display:block;margin-top:8px;font-family:var(--mono);font-size:var(--micro);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.stats b span{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;
  display:inline;margin:0}
@media (max-width:700px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>div:nth-child(2n){border-right:0}
  .stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stats b{font-size:21px}
}

/* table */
.tbl{width:100%;font-size:14px}
.tbl th{text-align:left;padding:12px 20px 12px 0;border-bottom:1px solid var(--line-3);
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap;vertical-align:bottom}
.tbl td{padding:16px 20px 16px 0;border-bottom:1px solid var(--line-2);
  vertical-align:top;color:var(--fg-2);line-height:1.6}
.tbl td:first-child{color:var(--fg);font-weight:500;white-space:nowrap;width:1%}
.tbl tr:last-child td{border-bottom:0}
.scroller{overflow-x:auto;scrollbar-width:thin;min-width:0}
@media (max-width:760px){
  .scroller{margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);position:relative;
    min-width:0;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
  }
  .tbl{min-width:620px}
  /* the third column sits past the fold on a phone; say so, once, above it */
  .scroller::before{
    content:"scroll for more \2192";display:block;margin-bottom:8px;
    font-family:var(--mono);font-size:var(--micro);letter-spacing:.1em;
    text-transform:uppercase;color:var(--fg-3);
  }
}

/* code / manifest */
pre.manifest{
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-flat);
  padding:20px;overflow:auto;max-height:440px;
  font-family:var(--mono);font-size:var(--micro);line-height:1.72;color:var(--fg-2);
}
pre.manifest .k{color:var(--indigo)}
pre.manifest .s{color:var(--haldi-ink)}
pre.manifest .n{color:var(--verd)}
@media (max-width:560px){
  pre.manifest{padding:14px;font-size:var(--micro);max-height:320px;
    white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
}

/* accordion */
.acc{border-bottom:1px solid var(--line)}
.acc-h{width:100%;text-align:left;display:flex;gap:20px;align-items:baseline;
  padding:20px 0;cursor:pointer}
.acc-h .t{flex:1;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3;
  letter-spacing:-.014em;font-variation-settings:"SOFT" 4;color:var(--fg)}
.acc-h .s{flex:none;width:20px;height:20px;position:relative;color:var(--fg-3)}
.acc-h .s::before,.acc-h .s::after{content:"";position:absolute;background:currentColor;
  transition:transform var(--t2) var(--ease)}
.acc-h .s::before{left:0;top:9.5px;width:20px;height:1.5px}
.acc-h .s::after{left:9.5px;top:0;width:1.5px;height:20px}
.acc.open .acc-h .s::after{transform:rotate(90deg)}
.acc-b{overflow:hidden;height:0;transition:height var(--t3) var(--ease)}
.acc-b>div{padding:0 0 24px;max-width:70ch}

/* tabs */
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:var(--s6);
  overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{padding:12px 16px;font-family:var(--mono);font-size:var(--micro);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.tabbar button:hover{color:var(--fg-2)}
.tabbar button.on{color:var(--fg);border-bottom-color:var(--haldi)}

/* form controls */
.field{width:100%;background:var(--bg);border:1px solid var(--line-3);
  border-radius:var(--r-flat);padding:12px 14px;color:var(--fg);font-size:14px;
  transition:border-color var(--t1) var(--ease)}
.band-alt .field{background:var(--bg-2)}
.field:focus{border-color:var(--focus)}
.field:focus:not(:focus-visible){outline:none}
.field:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
select.field{cursor:pointer;padding-right:34px;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--line-3);cursor:pointer;margin:18px 0 6px}
input[type=range]:focus:not(:focus-visible){outline:none}
input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--haldi);border:3px solid var(--bg);cursor:grab;
  box-shadow:0 0 0 1px var(--haldi)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--haldi);border:3px solid var(--bg);cursor:grab;box-shadow:0 0 0 1px var(--haldi)}

/* ══════════════════════════════════════════════════════════ ANIMATION ═══ */
/* Lottie holders. Given real size and a surface so they are actually seen. */
.anim{
  position:relative;width:100%;              /* must be explicit: with margin-inline:auto
                                                a grid item otherwise shrinks to content */
  border:1px solid var(--line);border-radius:var(--r-flat);
  overflow:hidden;
  /* Deliberately dark in BOTH themes. The animations are drawn in off-white
     and indigo on dark — on a light surface they would simply disappear.
     Reading them as a small instrument screen is also on-brand.            */
  background:#17150F;
  --fg-3:#8A8171;
}
.anim .anim-cap{background:rgba(23,21,15,.9);border-top-color:rgba(244,239,231,.1);
  color:#8A8171}
.anim>div{display:block}
.anim>div{width:100%;height:100%}
.anim-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);border-top:1px solid var(--line-2);background:var(--bg-2)}

/* ═════════════════════════════════════════════════════════════ FOOTER ═══ */
.foot{border-top:1px solid var(--line);padding-block:var(--s8) var(--s6);background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:var(--s7)}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,1fr);gap:var(--s6)}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr;gap:var(--s6)}}
.foot .foot-h{font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s4)}
.foot li{margin-bottom:9px}
.foot li a{font-size:14px;color:var(--fg-2);transition:color var(--t1) var(--ease)}
.foot li a:hover{color:var(--fg)}
.foot-base{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.04em;color:var(--fg-3)}
@media (max-width:640px){.foot-base{flex-direction:column;gap:8px}}


/* ═════════════════════════════════════════════════════ WORD-SPREAD ═══ */
/* Words pushed edge to edge with even gaps. Quiet, editorial, and it
   makes a short label feel deliberate rather than decorative.          */
.spread{
  display:block;text-align:justify;text-align-last:justify;
  font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3;
  letter-spacing:.01em;font-variation-settings:"SOFT" 4;
  max-width:640px;margin-inline:auto;
}
.spread::after{content:"";display:inline-block;width:100%}
.spread-sm{font-family:var(--mono);font-size:var(--micro);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);max-width:520px}
@media (max-width:560px){
  .spread{font-size:17px;max-width:none}
  .spread-sm{font-size:var(--micro)}
}

/* ══════════════════════════════════════════════════ PROCESS BAND ═══ */
/* Full-bleed documentary photography used as a section break. This is
   where the workshop belongs — not competing with product cards.      */
.band-img{position:relative;width:100%;overflow:hidden;background:var(--bg-3)}
.band-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:var(--img-filter)}
.band-img.tall{aspect-ratio:21/9}
.band-img.short{aspect-ratio:32/9}
@media (max-width:760px){
  .band-img.tall{aspect-ratio:4/3}
  .band-img.short{aspect-ratio:16/9}
}
.band-img figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px var(--gut);
  background:linear-gradient(transparent,rgba(15,13,11,.82));
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(244,239,231,.86);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
@media (max-width:768px){
  /* On a narrow strip the location label and the "N artisans" label were
     both shrinking to fit one row and going illegible. Stack them instead —
     left label on top, right label under it — with room to breathe. */
  .band-img figcaption{
    flex-direction:column;align-items:flex-start;gap:4px;
    padding:12px var(--gut) 14px;
  }
}

/* ═════════════════════════════════════════════════ 01 THE OPENING ═══ */
/* A handshake, not an explanation. The page opens on one entry from the book,
   large, with its figures showing — because the figures ARE the argument and
   burying them under a "learn more" button would be the timid version. */
/* one column split, declared once, used by every child of the opening */
section.open{--open-cols:minmax(0,1.78fr) minmax(0,1fr);--open-gap:var(--s7);
  padding-block:132px 128px;position:relative}
.folio{
  font-family:var(--mono);font-size:var(--micro);font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s6);
}
.folio [lang="hi"]{font-family:var(--deva);font-size:17px;letter-spacing:0;
  text-transform:none;color:var(--fg-2);vertical-align:-1px;margin-right:4px}

/* WEIGHT IS THE HIERARCHY, so use some of its range. Eczar is loaded at
   400;500;600;700 and Newsreader at 300..600, and the hero was using 600, 400
   and 500 — nothing heavy, nothing light, which is the flat-weight tell. The
   assertion goes to 700; the word anyone can write drops to Newsreader 300 and
   grey, so it reads as printed on a tag rather than written by a hand. */
.claim{max-width:none;font-weight:700;letter-spacing:-.03em}
.claim em{font-style:normal;font-family:var(--sans);font-weight:300;
  color:var(--fg-3);letter-spacing:-.018em}
/* Ismail's line was a second 21px .lede, identical to the one three lines
   above it, so the two read as one paragraph split by accident. It moves to
   the display face at the 26px step that already exists — Eczar 400 against
   Newsreader 600 — which gains the scale a voice rather than an orphan size. */
.claim-sub{margin-top:var(--s7);max-width:32ch;
  font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;
  letter-spacing:-.014em;color:var(--fg)}

.open-cta{display:flex;align-items:center;gap:var(--s6);margin-top:var(--s8);flex-wrap:wrap}

/* ── the entry: image left, figures right, ruled like a page of accounts ── */
.entry{
  display:grid;grid-template-columns:var(--open-cols);
  gap:var(--open-gap);align-items:stretch;margin-top:var(--s8);
}
/* THE PLATE, NOT THE STICKER.
   This carried a blurred translucent capsule floating on the photograph
   (rgba + backdrop-filter + a pill radius) and a 1.2s zoom on hover. Three
   things wrong with that on this site in particular: a frosted pill is the
   single most-shipped generated-page flourish going; the pill radius is
   reserved here for things you DO, and a recorded capture is a thing that IS;
   and silently scaling the one image presented as sealed evidence contradicts
   the entire product. A caption now hangs under the frame the way a plate is
   captioned in a book, and the frame stops cropping — the source is 16:9 and
   was being cut to 16:10, throwing away a tenth of the recorded frame to make
   the box a rounder number. */
.entry-fig{position:relative;display:block;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-flat);
  background:var(--bg-3);aspect-ratio:16/9}
.entry-fig img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
/* the one gesture a ledger has: a rule struck down the edge of the row you
   are reading. Same duration and easing as every other hoverable row here. */
.entry-fig::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--rule);opacity:0;transition:opacity var(--t1) var(--ease-out)}
.entry-fig:hover::after,.entry-fig:focus-visible::after{opacity:1}
.entry-plate{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s4);margin-top:9px;padding-bottom:7px;
  border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-3);
  font-variant-numeric:tabular-nums lining-nums}
.entry-plate b{font-weight:500;color:var(--fg-2)}
.entry-plate b::before{content:"\25AA\00a0\00a0";color:var(--rule)}
.entry-plate time{letter-spacing:.02em}
.entry-rows{
  display:flex;flex-direction:column;justify-content:space-between;
  border-top:1.5px solid var(--fg);
}
/* MOBILE FIRST: the three register rows stack their key, figure and gloss
   rather than holding a 74px label column on a phone. flex:1 also forced three
   genuinely unequal facts into three equal cells to match the image height —
   real registers rag, so that only applies once the two are side by side. */
.entry-rows .erow{display:grid;align-content:start}
@media (min-width:861px){
  .entry-rows .erow{flex:1;align-content:center}
}
/* phone: one column, the key above its figure. The 74px label column only
   exists once the row is wide enough to read across. */
.erow{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  padding:var(--s4) 0;border-bottom:1px solid var(--line-2);align-items:baseline;
}
@media (min-width:561px){
  .erow{grid-template-columns:74px minmax(0,1fr);gap:2px var(--s4)}
  .erow>span{grid-column:2}
}
.erow b{
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);
}
.erow i{
  font-style:normal;font-family:var(--mono);font-size:21px;font-weight:400;
  color:var(--fg);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em;
}
.erow>span{grid-column:1;font-size:14px;font-weight:300;color:var(--fg-3);line-height:1.5}
.erow.is-ask i{font-size:26px;font-weight:500}
.erow.is-ask{border-bottom:0}

/* ── the argument column: one heading held against its own prose ── */
.argue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s8)}
.argue h2{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
.argue-body>.p+.p{margin-top:var(--s5)}
.argue-body .lead-p{font-size:21px;line-height:1.5;color:var(--fg);font-weight:400}
.argue-body em{font-style:italic;color:var(--fg)}

/* a flat definition list — no boxes, the rules do the work */
.rlist-flat{display:block;border-top:1px solid var(--line)}
/* .rlist above puts its first child in a 56px margin column for the numeral.
   A flat list has no numeral, so it has to undo the grid — without this the
   dt was being squeezed into 56px on every page that uses both classes. */
.rlist-flat>div{display:block;padding:var(--s5) 0;border-bottom:1px solid var(--line-2)}
.rlist-flat dt{font-family:var(--sans);font-weight:600;font-size:21px;
  letter-spacing:-.01em;color:var(--fg);margin-bottom:6px}
.rlist-flat dd{color:var(--fg-2);font-size:17px;line-height:1.62;font-weight:300;max-width:64ch}

@media (max-width:980px){
  .entry{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .argue{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .argue h2{position:static}
}
@media (max-width:860px){
  section.open{padding-block:84px 80px}
  /* hand the tracking back to the responsive ramp — the non-media .claim rule
     above outranks core.css at every width, since media queries add no
     specificity of their own */
  .claim{max-width:none;letter-spacing:-.022em}
  .claim-sub{margin-top:var(--s5);font-size:21px;max-width:none}
  .open-cta{gap:var(--s5);margin-top:var(--s7)}
}

/* the opening: one column — claim, what this is, the terms, the case */
.open-head{max-width:none}
.claim-lede{margin-top:var(--s6);font-weight:400;color:var(--fg-2);max-width:44ch}
.claim-terms{margin-top:var(--s5);font-family:var(--mono);font-size:var(--micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}



/* four figures in a narrow column: 2×2, and no box — the rules carry it */
.stats-4{grid-template-columns:repeat(2,minmax(0,1fr));border:0;border-top:1px solid var(--line)}
.stats-4>div{border-right:0;border-bottom:1px solid var(--line-2);padding-left:0}
.stats-4>div:nth-child(even){padding-left:var(--s5);border-left:1px solid var(--line-2)}
.stats-4>div:nth-last-child(-n+2){border-bottom:0}

/* the buyer has earned an ask by this point; the maker ask follows it */
.buyer-ask{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s6);
  flex-wrap:wrap;padding-bottom:var(--s8);margin-bottom:var(--s8);
  border-bottom:1px solid var(--line)}
.buyer-ask .d3{max-width:none}

.topbar{position:sticky;top:0;z-index:60}

/* THE MENU SEAM.
   .abar sits above .topbar in the flow and is deliberately NOT sticky — the
   two doors belong at the top of a page, not permanently over it, and pinning
   another 39px would cost a quarter of a 390px viewport. But .topbar carries
   z-index:60 and the menu overlay only 55, so with the menu open at scroll 0
   the overlay covered the audience bar while the nav stayed where the flow put
   it — 39px down, floating over a band of bare page.
   The bar going inert and hidden under a modal is correct; a detached nav is
   not. So while the menu is open the header is lifted out of the flow to the
   top edge, which is where a modal's own chrome belongs anyway. */
body.menu-open .topbar{position:fixed;top:0;left:0;right:0}
@media (max-width:760px){
  /* the strip plus the nav was taking a quarter of a 390px viewport */
}

/* the two filter groups read as one row but are named separately */
.chipgroup{display:contents}
.chipsep{width:1px;height:20px;background:var(--line);flex:none;margin-inline:6px}

/* ── touch targets ────────────────────────────────────────────────────────
   The visual sizes are deliberate and stay; the *interactive* box grows to
   44x44 on pointers that need it. `pointer:coarse` keeps desktop density
   exactly as designed — this only fires on touch. */
@media (pointer:coarse){
  .iconbtn,.burger{position:relative}
  .iconbtn::after,.burger::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;border-radius:var(--r-pill);
  }
  .chip{padding-block:11px}                 /* 38-40px -> 44px */
  .btn-sm{height:44px}
  .foot ul a{display:inline-block;padding-block:11px}
  /* padding-block on an INLINE box does not change its height, so this rule
     read as a 44px target in the stylesheet and measured 17px in the browser.
     A standalone .tlink becomes inline-flex so the padding is real; one
     sitting inside running prose stays inline, where WCAG 2.5.8 exempts it
     and where boxing it would break the line. */
  .tlink{display:inline-flex;align-items:center;min-height:44px}
  /* only RUNNING PROSE is exempt. A bare <p> is not evidence of prose here —
     .open-cta is a <p> used as a button row, and it was swallowing its own
     secondary link back down to 19px. The prose classes are the honest test. */
  .p .tlink,.p-sm .tlink,.lede .tlink,li .tlink,dd .tlink,td .tlink{
    display:inline;min-height:0;padding-block:0}
  .skip{min-height:44px;display:inline-flex;align-items:center}
  .notepad button,.note{min-height:44px}
  /* the two doors are the first control on every page and measured 38px */
  .abar-in{min-height:44px}
  .abar a{min-height:44px}
  .crumbs a,a.micro{display:inline-block;padding-block:14px}
  .tabbar button{padding-block:15px}
  .brand{padding-block:11px}
  .rungs button,.rung{min-height:44px}
  .gal-thumbs button,.rail-cell{min-height:44px}
  .menu-list a{padding-block:4px}
  select.field,.subnav-end select,#sort{min-height:44px}
  /* a 20px thumb is hard to hit; the track stays visually thin */
  input[type=range]::-webkit-slider-thumb{width:28px;height:28px}
  input[type=range]::-moz-range-thumb{width:28px;height:28px}
}

/* ── the work reel ────────────────────────────────────────────────────────
   Three looped clips of the work itself, where a block of text used to go. */
.workreel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wr{margin:0}
.wr video{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:var(--r-flat);
  background:var(--bg-3);filter:var(--img-filter);
}
.wr figcaption{
  display:flex;justify-content:space-between;gap:8px;padding-top:8px;
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-3);
}
@media (max-width:760px){
  .workreel{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* SHA-256 digest rows on verify — the hash column must survive 390px */
/* MOBILE FIRST: a label above its digest, because a 64-character hash and its
   name cannot share a 375px line. The two-column form starts once there is
   room. The digest itself wraps rather than being set smaller — a hash exists
   to be compared by eye, so shrinking it to 10.5px defeats its only purpose. */
.digrow{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  padding:9px 0;border-bottom:1px solid var(--line-2)}
.digrow>*:first-child{padding-bottom:2px}
.digrow .mono,.digrow-3 .mono{font-size:var(--micro);line-height:1.5;
  overflow-wrap:anywhere;word-break:break-all}
.digrow-3{align-items:start}
@media (min-width:561px){
  .digrow{grid-template-columns:minmax(0,150px) 1fr;gap:12px;padding:7px 0}
  .digrow>*:first-child{padding-bottom:0}
  .digrow-3{grid-template-columns:minmax(0,130px) 1fr 16px;align-items:center;padding:8px 0}
}

/* the #orgs ruled list carries word-labels (CONSENT), not two-digit numerals */
#orgs .rlist>li{grid-template-columns:76px minmax(0,1fr)}
@media (max-width:860px){#orgs .rlist>li{grid-template-columns:minmax(0,1fr)}}

/* ============================================================================
   LEDGER IDENTITY — v2
   ----------------------------------------------------------------------------
   The complaint the first build earned was fair: dark ground, big serif,
   one gold accent, every section the same shape. That is the house style of
   every generated site on the internet right now, and it was burying an idea
   that has a much more specific form available to it.

   So: the page is paper by default, and it is RULED. A bahi khata is not
   decorated — it is ruled in vermilion, written in indigo, and its margin
   carries the folio. Those three facts are the whole design language, and
   nothing here is applied that a real account book does not do.
   ========================================================================= */

/* ── 1. THE RULING ────────────────────────────────────────────────────────
   Section boundaries stop being a neutral hairline and become the double
   red rule that opens a page in an account book. Thick over thin, always. */
.hair{border-top:0;position:relative}
.hair::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--rule);opacity:.5}
.hair::after{content:"";position:absolute;top:4px;left:0;right:0;height:1px;
  background:var(--rule);opacity:.22}

/* ── 2. THE MARGIN ────────────────────────────────────────────────────────
   Every section head carries a folio in the left margin, set in the recorded
   voice, with a vermilion tick. Set via data-folio so the markup says what
   the number means instead of hiding it in a pseudo-element counter. */
.shead{position:relative}
.shead[data-folio]::before{
  content:attr(data-folio);position:absolute;left:-56px;top:2px;
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.1em;
  color:var(--rule);opacity:.75}
/* The numeral hangs 56px into the left margin. The margin only exists once the
   viewport is wider than the 1240px measure plus its 40px gutters plus that 56
   plus a little air — below 1280px it was being clipped by the container edge
   rather than hidden. */
@media (max-width:1279px){.shead[data-folio]::before{display:none}}
/* .shead.bare opens on the display line with no eyebrow above it, so the
   numeral drops from the eyebrow's x-height to the cap line of the .d2 */
.shead.bare[data-folio]::before{top:13px}

/* the eyebrow gets the tick that a ruled column head gets */
.eyebrow{display:flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:14px;height:2px;background:var(--rule);
  opacity:.75;flex:none}

/* ── 3. THE AUDIENCE BAR ──────────────────────────────────────────────────
   The single biggest thing wrong with the IA was that a buyer and a maker
   landed on the same undifferentiated page and had to work out which half of
   the site was theirs. Now the two doors are the first thing above the nav,
   they persist on every page, and the one you are standing in is marked. */
.abar{background:var(--fg);color:var(--bg);border-bottom:1px solid var(--fg)}
.abar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:stretch;gap:0;min-height:38px}
/* CONTRAST, NOT OPACITY.
   These were dimmed with opacity:.55 and .42, which measured 2.70:1 and 3.90:1
   against the bar — a fail at 10.5px, where AA wants 4.5:1. Opacity is the wrong
   tool for de-emphasis on a coloured ground: it blends toward the background and
   takes the contrast with it. The inactive door is now a solid mixed colour
   picked to clear 4.5:1, the active one is full strength, and the aside — which
   is not a control and not essential — is set at a measured 4.6:1 rather than
   left to fade. Sizes go to 11px so the mono caps are legible at all.
   Measured on #FAF7F1 text over the #16140F bar:
     inactive  78% mix -> 8.9:1     active on --rule 600  -> 5.6:1
     aside     62% mix -> 4.6:1 */
.abar a{display:flex;align-items:center;gap:8px;padding:0 18px;
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--bg) 78%,var(--fg));
  border-right:1px solid color-mix(in srgb,var(--bg) 22%,transparent);
  transition:color var(--t1) var(--ease),background-color var(--t1) var(--ease)}
.abar a:first-child{border-left:1px solid color-mix(in srgb,var(--bg) 22%,transparent)}
.abar a:hover{color:var(--bg);background:color-mix(in srgb,var(--bg) 9%,transparent)}
.abar a[aria-current]{background:var(--rule-600);color:#FFF8F2}
.abar a i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.abar .abar-say{margin-left:auto;display:flex;align-items:center;
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.1em;
  text-transform:uppercase;padding-left:18px;
  color:color-mix(in srgb,var(--bg) 62%,var(--fg))}
@media (max-width:780px){
  /* Tighten the padding, not the type. This used to drop to 9.5px, which threw
     away the contrast headroom the colours above were chosen for and put mono
     caps below the size anyone can read on a phone. The aside goes instead —
     it is the one thing here that is not a control. */
  .abar a{padding:0 13px;letter-spacing:.09em}
  .abar .abar-say{display:none}
}

/* ── 4. THE TWO DOORS ─────────────────────────────────────────────────────
   The home-page version of the same split, at full size, so nobody has to
   infer what this site is for. Two ruled columns, not two rounded cards. */
/* Two equal columns, equal type, equal padding, one neutral hairline between
   them — the shape of every generated "two options" block there has ever been.
   The two sides are NOT the same object: one is a buyer being invited in, the
   other is a maker being handed a tool. So the columns are unequal, the maker
   column drops 88px so the eye travels diagonally instead of straight across,
   the divider is promoted from a neutral hairline to the vermilion gutter rule
   a bahi actually has, and the two heads are set in genuinely different
   registers. Colour becomes a role: indigo buys, haldi makes. */
.doors{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  align-items:start}
.doors>div{padding:var(--s6) var(--s7) var(--s7) 0;
  border-right:1px solid var(--rule)}
.doors>div:last-child{padding:var(--s10) 0 var(--s7) var(--s7);border-right:0}
.doors>div:first-child h3{font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,3.2vw,40px);line-height:1.02;letter-spacing:-.026em;
  color:var(--fg)}
.doors>div:last-child h3{font-family:var(--sans);font-weight:300;
  font-size:clamp(20px,2.1vw,25px);line-height:1.22;letter-spacing:-.008em;
  color:var(--fg-2)}
.doors>div:first-child .door-k{color:var(--indigo)}
.doors>div:last-child .door-k{color:var(--haldi-ink)}
.doors .door-k{font-family:var(--mono);font-size:var(--micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rule);
  display:block;margin-bottom:var(--s4)}
.doors h3{margin-bottom:var(--s4)}
.doors ul{margin:var(--s5) 0 var(--s6)}
.doors li{position:relative;padding-left:22px;color:var(--fg-2);font-size:16px;
  line-height:1.6;margin-bottom:10px;max-width:44ch}
.doors li::before{content:"";position:absolute;left:0;top:11px;width:11px;
  height:1px;background:var(--rule);opacity:.6}
@media (max-width:860px){
  .doors{grid-template-columns:minmax(0,1fr)}
  .doors>div{padding:var(--s6) 0;border-right:0;border-bottom:1px solid var(--rule)}
  .doors>div:last-child{padding:var(--s6) 0 0;border-bottom:0}
}

/* ── 5. THE OFFER TABLE ───────────────────────────────────────────────────
   "What exactly does this website do" answered as a table, because a table
   is the one format that cannot waffle. */
/* A bahi is RULED in red and WRITTEN in ink; the entries themselves are never
   red. This block had vermilion six times over — the section boundary, the
   eyebrow tick, the folio, the table's own top border and four column labels —
   at which point it stops reading as ruling and starts reading as an accent
   colour applied everywhere, which is the thing it was introduced to avoid.
   The table opens on a neutral rule and its labels are set in ink. */
.offer{width:100%;border-top:1px solid var(--line-3);margin-top:var(--s6)}
.offer tr:last-child{border-bottom-color:var(--line-3)}
.offer tr{border-bottom:1px solid var(--line)}
.offer th{text-align:left;vertical-align:top;padding:var(--s5) var(--s5) var(--s5) 0;
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg);width:180px}
.offer td{padding:var(--s5) 0;vertical-align:top}
.offer td b{display:block;font-family:var(--sans);font-weight:600;font-size:19px;
  color:var(--fg);margin-bottom:6px;letter-spacing:-.01em}
.offer td span{display:block;color:var(--fg-2);font-size:15.5px;line-height:1.6;
  max-width:62ch}
.offer td em{display:block;font-style:normal;font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.06em;color:var(--fg-3);margin-top:8px}
@media (max-width:760px){
  .offer th{display:block;width:auto;padding:var(--s5) 0 4px}
  .offer td{display:block;padding:0 0 var(--s5)}
}

/* ── 6. INDIGO BACK IN ────────────────────────────────────────────────────
   The build had one accent doing every job, which is why every section felt
   the same. Links in prose are indigo — the colour a ledger is written in —
   and gold is demoted to what it always was: the metal, used on evidence. */
.p a:not(.btn):not(.tlink),.lede a:not(.btn):not(.tlink),
.doors li a,.offer td a{
  color:var(--indigo);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--indigo) 38%,transparent);
  transition:text-decoration-color var(--t1) var(--ease)}
.p a:not(.btn):not(.tlink):hover{text-decoration-color:var(--indigo)}

/* The reel's pause control (WCAG 2.2.2). Built by js/app.js so any page that
   grows a reel gets one. A pill, because it is something you DO. */
.reel-pause{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0 14px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--fg) 88%,transparent);color:var(--bg);
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;
  transition:background-color var(--t1) var(--ease)}
.reel-pause:hover{background:var(--fg)}
.reel-pause span{font-size:var(--micro);letter-spacing:0}
.workreel{position:relative}
@media (max-width:560px){.reel-pause{min-height:44px;padding:0 16px}}

/* ── TWO-DOOR — the buyer/artisan split, right after the hero claim ───────
   Client feedback (Pinky, 15 Sep): the distinction between the buyer side and
   the artisan side "is not very clear" anywhere on the page. The persistent
   .abar strip above the nav says it in eleven words; this is the same split
   said in full, as the first thing under the claim, so nobody has to notice
   a thin bar to find their door. Two full cards, square (a container of
   facts, same shape as .card/.panel), the doing part left round (.btn). */
.two-door{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s6);margin-top:var(--s8)}
.two-card{display:flex;flex-direction:column;align-items:start;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-flat);
  padding:var(--s7) var(--s6)}
.two-eyebrow{display:block;font-family:var(--mono);font-size:var(--micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s4)}
.two-h{font-family:var(--serif);font-weight:600;font-size:clamp(24px,1.6vw + 20px,32px);
  line-height:1.08;letter-spacing:-.016em;color:var(--fg);margin-bottom:var(--s3)}
.two-line{color:var(--fg-2);font-size:16px;line-height:1.55;max-width:34ch;margin-bottom:var(--s6)}
.two-card .btn{margin-top:auto}
.two-sub{margin-top:var(--s4)}
@media (max-width:860px){
  .two-door{grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:var(--s6)}
  .two-card{padding:var(--s6) var(--s5)}
}

/* ── STORY PAGE ("The person behind it") ───────────────────────────────────
   The timeline is a vertical ruled ledger: mono year in the margin (recorded),
   serif title against it (declared) — the same split the whole site is built
   on, applied to one person's own record instead of an object's. */
.st-video{position:relative;overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line);border-radius:var(--r-flat);
  aspect-ratio:16/9;max-width:860px;margin-inline:auto}
.st-video iframe,.st-video video{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;object-fit:cover;background:var(--bg-3)}
.st-ledger{border-top:1px solid var(--line)}
.st-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s5);
  padding:var(--s6) 0;border-bottom:1px solid var(--line);align-items:start}
.st-year{font-family:var(--mono);font-size:15px;font-weight:500;letter-spacing:.04em;
  color:var(--fg-3);padding-top:4px;font-variant-numeric:tabular-nums lining-nums}
.st-title{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.012em;
  color:var(--fg);margin-bottom:6px}
.st-body{color:var(--fg-2);font-size:16px;line-height:1.6;max-width:56ch;font-weight:400}
@media (max-width:640px){
  .st-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:var(--s5) 0}
}

/* ── ARTISAN SIGN-IN GATE ───────────────────────────────────────────────────
   js/gate.js sets [data-gating] on <html> before it asks /api/me who is
   signed in, and clears it only after the page has been repainted for that
   maker (or the visitor has been sent to the login page). Nav and footer stay
   visible; only the content that would otherwise show a hardcoded demo maker
   is held back, and layout height is preserved so nothing jumps on reveal. */
[data-gating] #main{visibility:hidden}

/* ── maker page: videos from the field visit ───────────────────────────────
   Phone recordings, mostly portrait. Each sits in a fixed 16:9 frame with the
   record's 2px radius; the player letterboxes the portrait ones itself.    */
.mk-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--s4)}
.mk-video{margin:0;position:relative;aspect-ratio:16/9;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-flat);overflow:hidden}
.mk-video iframe,.mk-video video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.mk-play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg-3);color:var(--fg);border:0;cursor:pointer;font:inherit;font-size:var(--fs-sm,14px)}
.mk-play:hover,.mk-play:focus-visible{background:var(--bg-2,var(--bg-3));outline:2px solid currentColor;outline-offset:-2px}
.mk-play-ic{width:56px;height:56px;border-radius:50%;border:1.5px solid currentColor;position:relative}
.mk-play-ic::after{content:"";position:absolute;left:21px;top:16px;border-left:16px solid currentColor;border-top:11px solid transparent;border-bottom:11px solid transparent}

/* ── work reel, as stills ────────────────────────────────────────────────
   The three looped clips this reel once held were generated video; the
   replacement is three real photographs from the field visits, so the reel
   needs an <img> rule of its own — `.wr video` above never matches an <img>. */
.wr img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:var(--r-flat);
  background:var(--bg-3);filter:var(--img-filter);
}