/* ============================================================================
   Proof of Hands — foundation
   Tokens · theme (light/dark) · reset · type · layout

   SHAPE LANGUAGE (deliberate, applied everywhere)
     · ROUND (pill)  = things you can DO — buttons, chips, tags, toggles.
                       Round reads as safe, touchable, reversible.
     · SQUARE (0–2px)= things that ARE — evidence, images, data, tables.
                       Square reads as fixed, documentary, not up for debate.
     Nothing is "sort of rounded". A 12px radius says neither thing.
   ========================================================================= */

/* ---------------------------------------------------------------- RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
::selection{background:var(--haldi);color:#14120F}

/* ------------------------------------------------------------ 01 TOKENS */
:root{
  /* — pigments: every colour is a real dyestuff or metal — */
  --indigo-500:#2E5286; --indigo-400:#4B7AB8; --indigo-300:#7FA8DC;
  --haldi-700:#8C5F1B;  --haldi-600:#A9762A;  --haldi-500:#D69A2D;  --haldi-400:#E7B85C;
  --madder-600:#9B3520; --madder-500:#C24A31; --madder-400:#E07B63;
  --verd-600:#255A4D;   --verd-500:#37806E;   --verd-400:#6BB39F;
  /* the ruling in an account book: dry vermilion, not a UI accent */
  --rule-600:#A6321F;   --rule-500:#C0442E;   --rule-400:#D8654E;

  /* — type — */
  /* THREE VOICES, because a ledger has three.
     Eczar   — the hand that writes the entry. Cut by Vaibhav Singh for
               Devanagari and Latin together, so बही and Proof of Hands are one face,
               not a transliteration. Used loud and used rarely.
     Newsreader — the printed page you actually read.
     Spline Sans Mono — the column: anything the system recorded rather than
               anyone declared. Tabular figures, so numbers stack. */
  --serif:"Eczar","Hoefler Text",Georgia,serif;      /* display / declared  */
  --sans:"Newsreader",Georgia,"Times New Roman",serif;/* reading            */
  --mono:"Spline Sans Mono","SF Mono",ui-monospace,monospace; /* recorded   */
  --deva:"Eczar",var(--sans);

  /* — space: one scale, no clamp soup — */
  --s1:4px; --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px; --s10:120px;

  /* — layout: MOBILE FIRST, and fluid —
     These were three fixed values re-declared at 1080, 860 and 560px, which is
     a desktop design cut down twice; the phone got whatever fell out at the
     bottom. Written the other way round now: the first number in each clamp IS
     the phone, and the page grows into the desktop continuously — so there is
     no width at which the layout sits between two designs. Each ramp is the
     line through its two anchors, 375px and 1280px. */
  --maxw:1240px;
  --gut:clamp(20px, 11.7px + 2.21vw, 40px);        /* 20 @375 -> 40 @1280 */
  /* THREE section rhythms, alternated. One repeating value is flat by
     construction however good each section is on its own. */
  --sec:clamp(68px, 49.8px + 4.86vw, 112px);       /* standard       */
  --sec-open:clamp(88px, 58.0px + 7.96vw, 160px);  /* let it breathe */
  --sec-dense:clamp(56px, 39.4px + 4.42vw, 96px);  /* pull it tight  */
  --nav-h:clamp(56px, 54.3px + 0.44vw, 60px);
  --sub-h:clamp(48px, 46.3px + 0.44vw, 52px);
  /* the floor for anything the system RECORDED — mono caps, labels, folios.
     11px uppercase at .14em tracking is a desktop density; on a phone it is a
     smudge, and half of what this site prints is in that register. */
  --micro:clamp(12px, 11.6px + 0.11vw, 13px);

  /* — radius: only two values exist — */
  --r-pill:999px;          /* actions */
  --r-flat:2px;            /* evidence */

  /* — motion — */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  --t1:.18s; --t2:.32s; --t3:.6s;
}

/* Eczar maps U+00D7 (×) to a solid-diamond-looking glyph, which shows up in
   object titles like "16 × 12 in". Carve just that one code point out to a
   system face that has a normal multiplication sign; everything else in
   --serif still renders in Eczar.
   font-weight:1 999 matters: Google's Eczar ships as discrete weight=400/
   500/600/700 faces, each separately covering U+00D7 in their latin subset.
   Headings render at weight 600 (.d1/.d2), so without a weight range here
   this rule only ever wins the 400 bucket and the 600 bucket's real Eczar
   glyph still shows through as the diamond. The effective copy of this rule
   is in market.css (loaded last of the four stylesheets) — theme.css's own
   @import of Eczar loads after this file and re-covers U+00D7, so a copy
   placed only here loses that cascade regardless of this weight range. Kept
   here too so the intent lives beside the other font tokens. */
@font-face{font-family:"Eczar";src:local("Helvetica Neue"),local("Arial"),local("Georgia");unicode-range:U+00D7;font-weight:1 999;}

/* ------------------------------------------------------------- 02 THEME */
/* dark is the default; light is a first-class equal, not an afterthought */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#131211;
  --bg-2:#1A1815;
  --bg-3:#221F1B;
  --fg:#F4EFE7;
  --fg-2:#B4AA9B;
  --fg-3:#918575;
  --line:rgba(244,239,231,.12);
  --line-2:rgba(244,239,231,.07);
  --line-3:rgba(244,239,231,.24);
  --indigo:var(--indigo-300);
  --haldi:var(--haldi-500);
  --haldi-ink:var(--haldi-500);   /* text-safe on dark */
  --madder:var(--madder-400);
  --verd:var(--verd-400);
  --rule:var(--rule-400);
  --focus:var(--indigo-300);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.34);
  --img-filter:contrast(1.02);
  --grain-op:.04;
  --grain-blend:overlay;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FAF7F1;
  --bg-2:#F2EDE3;
  --bg-3:#E9E2D4;
  --fg:#16140F;
  --fg-2:#57503F;
  --fg-3:#6B6458;
  --line:rgba(22,20,15,.14);
  --line-2:rgba(22,20,15,.07);
  --line-3:rgba(22,20,15,.3);
  --indigo:var(--indigo-500);
  --haldi:var(--haldi-600);
  --haldi-ink:var(--haldi-700);   /* text-safe on light */
  --madder:var(--madder-600);
  --verd:var(--verd-600);
  --rule:var(--rule-600);
  --focus:var(--indigo-500);
  --shadow:0 1px 2px rgba(22,20,15,.06),0 10px 30px rgba(22,20,15,.08);
  --img-filter:contrast(1.01) saturate(1.02);
  --grain-op:.03;
  --grain-blend:multiply;
}
/* DEFAULT IS LIGHT — a committed art direction, not a system follow.
   This is a ledger. Ledgers are paper. Dark stays a first-class equal but it
   is now the deliberate choice rather than the thing you land on. A site that
   opens dark-on-serif by default is the single most over-served look on the
   web right now, and this one has a better idea available to it. */
:root:not([data-theme]){
  color-scheme:light;
  --bg:#FAF7F1; --bg-2:#F2EDE3; --bg-3:#E9E2D4;
  --fg:#16140F; --fg-2:#57503F; --fg-3:#6B6458;
  --line:rgba(22,20,15,.14); --line-2:rgba(22,20,15,.07); --line-3:rgba(22,20,15,.3);
  --indigo:var(--indigo-500); --haldi:var(--haldi-600); --haldi-ink:var(--haldi-700);
  --madder:var(--madder-600); --verd:var(--verd-600);
  --rule:var(--rule-600); --focus:var(--indigo-500);
  --shadow:0 1px 2px rgba(22,20,15,.06),0 10px 30px rgba(22,20,15,.08);
  --img-filter:contrast(1.01) saturate(1.02);
  --grain-op:.03; --grain-blend:multiply;
}
html{background:var(--bg)}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;
  font-optical-sizing:auto;
  font-feature-settings:"kern","liga";
  font-variant-numeric:oldstyle-nums;   /* text figures in prose */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color var(--t2) var(--ease),color var(--t2) var(--ease);
}
/* the two surfaces. Alternating them is the page's rhythm. */
.band{background:var(--bg)}
.band-alt{background:var(--bg-2)}
.band,.band-alt{position:relative}

.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:var(--grain-op);
  mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 03 LAYOUT */
/* ONE container. Every band, every filter bar, every grid uses it, so
   nothing on any page can drift out of alignment with anything else.    */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec-open{padding-block:var(--sec-open)}
.sec-dense{padding-block:var(--sec-dense)}
.sec-sm{padding-block:var(--s7)}
.sec-tight{padding-block:var(--s6)}
.hair{border-top:1px solid var(--line)}
.hair-b{border-bottom:1px solid var(--line)}

.grid{display:grid;gap:var(--s5)}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* editorial split: type left, visual right (or reversed) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:var(--s8);align-items:center}
.split-t{align-items:start}
.split-r>:first-child{order:2}

/* section head: eyebrow + title + optional action, always the same shape */
.shead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s7)}
.shead>div{max-width:44ch}

/* --------------------------------------------------------------- 04 TYPE */
/* Hierarchy is carried by WEIGHT, not by swapping families about. Newsreader
   does the ranking at 300/400/500/600; Eczar appears only where the page is
   allowed to raise its voice. Steps are widely separated on purpose — sizes
   bunched within a few pixels read as indecision, not as a scale.
   d1 sits at 600 rather than 700: at 92px a heavier cut looks blunt, so the
   weight is pulled back to compensate optically. */
/* FLUID, PHONE FIRST. Each clamp is the line through 375px and 1280px, so the
   size the phone gets is a decision rather than a leftover, and no heading
   jumps a step mid-drag. Tracking rides the same ramp: loose at phone sizes,
   tightening only once the type is big enough to need it. */
.d1{font-family:var(--serif);font-weight:600;
  font-size:clamp(40px, 18.4px + 5.75vw, 92px);line-height:.94;
  letter-spacing:clamp(-.026em, -.0125em - .36vw, -.020em);text-wrap:balance}
.d2{font-family:var(--serif);font-weight:600;
  font-size:clamp(31px, 20.6px + 2.76vw, 56px);line-height:1.04;
  letter-spacing:clamp(-.022em, -.0135em - .23vw, -.016em);text-wrap:balance}
.d3{font-family:var(--sans);font-weight:600;
  font-size:clamp(23px, 18.4px + 1.22vw, 34px);line-height:1.18;
  letter-spacing:-.018em;text-wrap:balance}
.d4{font-family:var(--sans);font-weight:600;
  font-size:clamp(21px, 18.9px + 0.55vw, 26px);line-height:1.3;
  letter-spacing:-.012em;text-wrap:balance}
h1,h2,h3,h4{font-weight:inherit}
.h{font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.34;letter-spacing:-.008em}

.lede{font-size:21px;line-height:1.5;color:var(--fg-2);font-weight:400;max-width:52ch}
p{max-width:66ch}
.p{color:var(--fg-2);font-size:17px;line-height:1.66;font-weight:400}
/* the quiet register — 300 is a rank, not an accident */
.p.aside,.aside{color:var(--fg-3);font-weight:300}
.p-sm{color:var(--fg-2);font-size:14px;line-height:1.62;font-weight:400}
.tight{max-width:42ch}
.wide{max-width:none}

/* the two registers — the product thesis as typography */
.declared{font-family:var(--serif);font-weight:400;font-variation-settings:"SOFT" 6,"WONK" 1;
  color:var(--haldi)}
.recorded{font-family:var(--mono);font-weight:500;font-size:.94em;letter-spacing:-.01em;
  color:var(--indigo)}

.mono{font-family:var(--mono);font-size:14px;letter-spacing:-.01em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.deva{font-family:var(--deva)}
.micro{font-family:var(--mono);font-size:var(--micro);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.eyebrow{display:block;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)}
.dim{color:var(--fg-2)} .faint{color:var(--fg-3)}
.center{text-align:center}

/* ----------------------------------------------------------- 05 REVEALS */
[data-rv]{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}

/* --------------------------------------------------------- 06 UTILITIES */
.flex{display:flex}.ac{align-items:center}.ab{align-items:baseline}
.jb{justify-content:space-between}.jc{justify-content:center}
.wrapf{flex-wrap:wrap}.col{flex-direction:column}
.g2p{gap:8px}.g3p{gap:12px}.g4p{gap:16px}.g5p{gap:24px}
.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}.mt5{margin-top:24px}
.mt6{margin-top:32px}.mt7{margin-top:48px}.mt8{margin-top:64px}
.mb3{margin-bottom:12px}.mb4{margin-bottom:16px}.mb5{margin-bottom:24px}
.mb6{margin-bottom:32px}.mb7{margin-bottom:48px}
.full{grid-column:1/-1}
.nowrap{white-space:nowrap}
.only-lg{display:initial}
.only-sm{display:none}

/* ------------------------------------------------- 07 RESPONSIVE
   MOBILE FIRST. Type and space are fluid in §01 and §04 and are not touched
   here — a clamp needs no breakpoint. What is left is the only thing a
   breakpoint is actually for: the point at which there is room for a second
   column. Every query below is min-width, and each one earns its place by
   changing a LAYOUT, never a size.

   The base state — the one you get with no query matching at all — is the
   phone: one column, everything full-bleed to the gutter, nothing hidden.
   ------------------------------------------------------------------------ */

/* the base, restated so it cannot be read as an accident */
.split{grid-template-columns:minmax(0,1fr);gap:var(--s6);align-items:start}
.split-r>:first-child{order:0}
.g2,.g3{grid-template-columns:minmax(0,1fr)}
.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
/* two columns leaves an odd tile alone on the last row; let it span instead */
.g4>*:last-child:nth-child(odd),.g5>*:last-child:nth-child(odd){grid-column:span 2}
.shead{margin-bottom:var(--s6)}
p,.p,.p-sm,.lede,.tight{max-width:none}
.only-lg{display:none}
.only-sm{display:initial}

/* HARD-CODED LINE BREAKS ARE A DESKTOP DECISION.
   Eight <br> in headings were placed to balance lines at 56px. At 31px on a
   phone they fight the natural wrap and leave two-word orphan lines — the
   single most visible thing wrong with this site on a handset. They are
   suppressed until there is a measure wide enough for them to mean anything;
   text-wrap:balance does the job below that. */
h1 br,h2 br,h3 br,.d1 br,.d2 br,.d3 br,.claim-sub br,.lede br{display:none}

@media (min-width:561px){
  .g4,.g5{gap:var(--s4)}
  .only-lg{display:initial}
  .only-sm{display:none}
}

@media (min-width:861px){
  h1 br,h2 br,h3 br,.d1 br,.d2 br,.d3 br,.claim-sub br,.lede br{display:initial}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:var(--s7);
    align-items:center}
  .split-t{align-items:start}
  .split-r>:first-child{order:2}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4>*:last-child:nth-child(odd),.g5>*:last-child:nth-child(odd){grid-column:auto}
  .shead{margin-bottom:var(--s7)}
  p,.p{max-width:66ch}
  .p-sm{max-width:66ch}
  .lede{max-width:52ch}
  .tight{max-width:42ch}
}

@media (min-width:1081px){
  .split{gap:var(--s8)}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ----------------------------------------------------------- 08 PRINT */
@media print{
  .nav,.subnav,.menu,.grain,.progress,.stickybuy,.btn,.tlink,.foot{display:none!important}
  :root{--bg:#fff;--bg-2:#fff;--fg:#000;--fg-2:#333;--fg-3:#666;
    --line:#ccc;--line-2:#e6e6e6;--line-3:#999}
  .sec,.sec-sm{padding-block:16px}
  [data-rv]{opacity:1!important;transform:none!important}
}

/* five tiles in two columns: the odd last tile spans, no empty hole beside it */
#crafts-grid>*:last-child:nth-child(odd){grid-column:1/-1}