/* ============================================================================
   Proof of Hands — marketplace surfaces
   Product cards · grids · filters · listing · maker
   ========================================================================= */

/* Eczar renders U+00D7 (×) as a solid diamond — visible in object titles like
   "16 × 12 in". core.css declares this same override right after its font
   tokens, but theme.css's own @import of the Eczar webfont loads AFTER
   core.css and re-covers U+00D7 in its "latin" subset, so that later rule
   was winning the cascade for this code point. market.css loads last of all
   four stylesheets, so redeclaring it here is what actually makes it stick.
   font-weight:1 999 is the other half of the fix: Google serves Eczar as
   separate discrete faces per weight (400/500/600/700), each covering
   U+00D7 on its own, and object/heading titles render at weight 600 — a
   weightless override here only wins the 400 bucket and 600 still shows
   the diamond. The wide range makes this rule match whatever weight asks
   for it. */
@font-face{font-family:"Eczar";src:local("Helvetica Neue"),local("Arial"),local("Georgia");unicode-range:U+00D7;font-weight:1 999;}

/* ═════════════════════════════════════════════════════ PRODUCT CARD ═══ */
/* The one thing already working. Refined, not redesigned:
   image dominant, square (it is evidence), text quiet underneath.      */
.pcard{
  display:flex;flex-direction:column;position:relative;
  border-radius:var(--r-flat);
  transition:transform var(--t3) var(--ease);
}
.pcard:hover{transform:translateY(-3px)}
.pcard-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-3);
  flex:none;border:1px solid var(--line);border-radius:var(--r-flat)}
/* the catalogue images share one bench and one light, so a very slight
   unifying wash keeps a whole grid reading as one shoot                 */
.pcard-img img{filter:var(--img-filter) saturate(.96)}
.pcard-img img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);
  transition:transform 1s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.04)}

.seal-chip{
  position:absolute;left:9px;top:9px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:#F4EFE7;
  background:rgba(15,13,11,.72);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border:1px solid rgba(244,239,231,.16);
}
.seal-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--verd-400)}
.seal-chip.open::before{background:var(--haldi-500)}
.seal-chip.weak::before{background:var(--madder-400)}

/* stage ticks — proof at a glance, sitting on the image edge */
/* Stage completeness is NOT a score, so it must not look like a health bar.
   A green bar filling up says "quality: good". What the data actually says is
   "an entry was made here, and here, and not here" - so it is drawn as the
   boxes of a ruled column: inked where a capture exists, left blank where it
   does not. Blank is not failure. It is an empty line in a book. */
.ticks{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:2px;
  height:9px;padding:0 2px 3px}
.ticks i{flex:1;background:#F4EFE7;box-shadow:inset 0 0 0 1px rgba(20,18,15,.35)}
.ticks i.off{background:transparent;box-shadow:inset 0 0 0 1px rgba(244,239,231,.34)}
.ticks i.warn{background:var(--haldi-400)}      /* recorded, but weakly */

.pcard-b{padding:13px 2px 0;display:flex;flex-direction:column;flex:1;gap:4px}
.pcard-craft{font-family:var(--sans);font-size:var(--micro);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3)}

/* ── maker line: a monogram + a name. The single clearest signal that a
      different person made this. Colour is keyed to the craft family, so a
      row of cards reads as different people AND different disciplines.   */
.pcard-maker{display:flex;align-items:center;gap:8px;margin-top:2px}
.mono-av{
  width:24px;height:24px;flex:none;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;position:relative;
  font-family:var(--mono);font-size:var(--micro);font-weight:600;letter-spacing:.02em;
  color:var(--tone-fg);background:var(--tone-bg);
  border:1.5px solid var(--tone-bd);
}
.mono-av.has-img{background:var(--bg-3)}
/* The portraits are square and so is this circle, so object-fit:cover shows the
   whole head-and-shoulders and the face lands far too small to read at 24px
   (object-position does nothing when the aspect ratios already match).
   Every portrait is cropped to the same standard — face 33% of frame width,
   eyes at 36% of frame height, centred — which puts the face centre at 38.6%.
   So one fixed transform frames the face correctly for every maker: shift that
   point to the middle, then zoom until the face fills ~70% of the circle. */
.mono-av img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);
  transform:scale(2.1) translateY(11.4%)}
.mono-av.lg{width:48px;height:48px;font-size:17px;border-width:2px}
/* craft tones — muted, so eight of them can sit together without shouting */
[data-tone="metal"]  {--tone-fg:#8FA9C9;--tone-bg:rgba(78,123,184,.16);--tone-bd:rgba(78,123,184,.34)}
[data-tone="textile"]{--tone-fg:#D2A05C;--tone-bg:rgba(214,154,45,.16); --tone-bd:rgba(214,154,45,.34)}
[data-tone="paint"]  {--tone-fg:#D9856C;--tone-bg:rgba(194,74,49,.16);  --tone-bd:rgba(194,74,49,.34)}
[data-tone="clay"]   {--tone-fg:#7BB6A4;--tone-bg:rgba(55,128,110,.16); --tone-bd:rgba(55,128,110,.34)}
[data-tone="wood"]   {--tone-fg:#B39A78;--tone-bg:rgba(150,120,80,.18); --tone-bd:rgba(150,120,80,.36)}
/* fibre — jute and dried grass: a muted olive-gold, distinct from textile's
   warmer amber so a fibre/basketry card never reads as a textile one */
[data-tone="fibre"]  {--tone-fg:#C2B673;--tone-bg:rgba(150,140,60,.16); --tone-bd:rgba(150,140,60,.34)}
:root[data-theme="light"] [data-tone="metal"]  {--tone-fg:#2E5286;--tone-bg:rgba(46,82,134,.1); --tone-bd:rgba(46,82,134,.26)}
:root[data-theme="light"] [data-tone="textile"]{--tone-fg:#8A5F13;--tone-bg:rgba(169,118,42,.12);--tone-bd:rgba(169,118,42,.28)}
:root[data-theme="light"] [data-tone="paint"]  {--tone-fg:#9B3520;--tone-bg:rgba(155,53,32,.1); --tone-bd:rgba(155,53,32,.26)}
:root[data-theme="light"] [data-tone="clay"]   {--tone-fg:#255A4D;--tone-bg:rgba(37,90,77,.1);  --tone-bd:rgba(37,90,77,.26)}
:root[data-theme="light"] [data-tone="wood"]   {--tone-fg:#6B5433;--tone-bg:rgba(107,84,51,.11);--tone-bd:rgba(107,84,51,.28)}
:root[data-theme="light"] [data-tone="fibre"]  {--tone-fg:#7A6C22;--tone-bg:rgba(122,108,34,.1); --tone-bd:rgba(122,108,34,.26)}
.pcard-t{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.24;
  letter-spacing:-.014em;font-variation-settings:"SOFT" 4;color:var(--fg)}
.pcard-m{font-size:14px;color:var(--fg-2)}
.pcard-foot{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:2px 10px}
.pcard-price{font-family:var(--mono);font-weight:600;font-size:14px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--fg);white-space:nowrap}
.pcard-noprice{font-family:var(--mono);font-weight:500;font-size:var(--micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--haldi-ink);white-space:nowrap}
.pcard-days{font-family:var(--mono);font-size:var(--micro);letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap;margin-left:auto}

.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s4)}
@media (max-width:1080px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s3)}}
@media (max-width:560px){
  .pcard-t{font-size:14px}
  .pcard-m{font-size:14px}
  .pcard-price{font-size:14px}
  .pcard-foot{flex-direction:column;align-items:flex-start;gap:4px}
  .pcard-days{margin-left:0}
}

/* ═══════════════════════════════════════════════════════════ FILTERS ═══ */
/* Lives in .subnav, so it uses the same container as every other page.  */
.fcount{font-family:var(--sans);font-size:var(--micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);white-space:nowrap}
@media (max-width:760px){.fcount{display:none}}

/* ══════════════════════════════════════════════════════ LISTING PAGE ═══ */
.listing{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s8);align-items:start}
@media (max-width:900px){.listing{grid-template-columns:minmax(0,1fr);gap:var(--s6)}}

.gal-main{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line);border-radius:var(--r-flat)}
.gal-main img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.gal-thumbs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:6px}
@media (max-width:520px){.gal-thumbs{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}}
.gal-thumbs button{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line);border-radius:var(--r-flat)}
.gal-thumbs button img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5);
  transition:filter var(--t2) var(--ease)}
.gal-thumbs button.on{border-color:var(--haldi)}
.gal-thumbs button.on img,.gal-thumbs button:hover img{filter:none}
.gal-thumbs b{position:absolute;left:4px;top:3px;font-family:var(--mono);font-size:var(--micro);
  font-weight:600;color:#F4EFE7;text-shadow:0 1px 3px rgba(0,0,0,.9)}

.pricebox{border-top:1px solid var(--line-3);border-bottom:1px solid var(--line);
  padding-block:var(--s5);margin-block:var(--s5)}
.pricebox .big{font-family:var(--mono);font-weight:600;font-size:34px;letter-spacing:-.038em;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--fg)}
@media (max-width:560px){.pricebox .big{font-size:26px}}
.priceline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;font-size:14px;color:var(--fg-2)}
.priceline b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}

.buybar{display:flex;gap:10px;flex-wrap:wrap}
.buybar .btn{flex:1 1 auto;min-width:150px}

.stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;align-items:center;gap:14px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-3);
}
@media (max-width:900px){.stickybuy{display:flex}body.has-sticky main{padding-bottom:76px}
  body.has-sticky .foot{padding-bottom:calc(var(--s6) + 76px + env(safe-area-inset-bottom,0px))}}
.stickybuy>div{min-width:0;flex:1}
.stickybuy .p1{font-family:var(--mono);font-weight:600;font-size:17px;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.stickybuy .micro{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.06em;font-size:var(--micro);display:block;margin-top:2px}

/* ════════════════════════════════════════════════════════ STAGE RAIL ═══ */
.rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
@media (max-width:760px){.rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:430px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rail-cell{position:relative;overflow:hidden;background:var(--bg-3);cursor:pointer;
  border-radius:var(--r-flat);border:1px solid var(--line)}
.rail-cell img{aspect-ratio:1;object-fit:cover;width:100%;height:auto;filter:var(--img-filter);
  transition:transform .9s var(--ease)}
.rail-cell:hover img{transform:scale(1.05)}
.rail-cell .k{position:absolute;left:0;right:0;bottom:0;padding:8px 9px;
  background:linear-gradient(transparent,rgba(15,13,11,.9));
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:#F4EFE7;display:flex;justify-content:space-between;gap:5px}
.rail-cell .k i{font-style:normal;color:var(--haldi-400)}
.rail-cell.on{border-color:var(--haldi)}

/* ═════════════════════════════════════════════════════════ MAKER CARD ═══ */
.mcard{display:flex;gap:16px;align-items:flex-start;padding:16px;
  border:1px solid var(--line);border-radius:var(--r-flat);background:var(--bg-2);
  transition:border-color var(--t2) var(--ease),transform var(--t2) var(--ease)}
.band-alt .mcard{background:var(--bg)}
.mcard:hover{border-color:var(--line-3);transform:translateY(-2px)}
.mcard img{width:72px;height:90px;object-fit:cover;flex:none;border-radius:var(--r-flat);
  filter:var(--img-filter)}
@media (max-width:430px){.mcard img{width:58px;height:72px}.mcard{padding:13px;gap:12px}}

/* ═══════════════════════════════════════════════════ MAKER DIRECTORY ═══ */
/* Every entry is built from the same parts in the same order, so eight of
   them read as one directory: workshop strip · monogram · name · facts.  */
.mtile{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-flat);background:var(--bg-2);
  transition:border-color var(--t2) var(--ease),transform var(--t2) var(--ease);
}
.band-alt .mtile{background:var(--bg)}
.mtile:hover{border-color:var(--line-3);transform:translateY(-3px)}
.mtile-img{position:relative;aspect-ratio:16/7;overflow:hidden;background:var(--bg-3);flex:none}
.mtile-img.portrait{aspect-ratio:1;}
.mtile-img.portrait img{object-position:center 24%}
.mtile-img img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter) saturate(.9);
  transition:transform 1s var(--ease)}
.mtile:hover .mtile-img img{transform:scale(1.04)}
.mtile-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(15,13,11,.5))}
.mtile-cluster{
  position:absolute;right:12px;bottom:9px;z-index:2;   /* right, so it never
      collides with the monogram that straddles the left edge below */
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(244,239,231,.92);text-align:right;
  /* one line, always — the 62% cap made half the places wrap to two.
     Long "TOWN, STATE" strings still don't fit some cards at phone widths,
     so anything past max-width truncates with an ellipsis instead of
     getting hard-clipped mid-word by the image's own overflow:hidden. */
  white-space:nowrap;max-width:calc(100% - 20px);
  overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:560px){
  .mtile-cluster{font-size:var(--micro);letter-spacing:.06em;max-width:calc(100% - 16px)}
}
.mtile-b{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.mtile-name{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;
  letter-spacing:-.016em;font-variation-settings:"SOFT" 4;color:var(--fg)}
.mtile-craft{font-size:14px;color:var(--fg-2);margin-top:4px}
.mtile-facts{margin-top:auto;padding-top:12px;display:flex;gap:6px 14px;flex-wrap:wrap;
  border-top:1px solid var(--line-2);margin-top:14px}
.mtile-facts span{font-family:var(--sans);font-size:var(--micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.mtile-facts span{white-space:normal;line-height:1.5}}
.mtile-facts b{color:var(--fg-2);font-weight:500}
@media (max-width:560px){
  .mtile-name{font-size:17px}
  .mtile-craft{font-size:14px}
  .mtile-b{padding:12px 13px 13px}
}

/* ══════════════════════════════════════════════════════════ CRAFT TILE ═══ */
.ctile{position:relative;overflow:hidden;display:block;aspect-ratio:4/3;
  border:1px solid var(--line);border-radius:var(--r-flat);background:var(--bg-3)}
.ctile img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);
  transition:transform 1s var(--ease)}
.ctile:hover img{transform:scale(1.045)}
/* long ramp, not a short one — the craft photos are bright at the bottom
   (raw wood, white quartz) and a shallow scrim leaves the mono line unreadable */
.ctile-b{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 16px;
  background:linear-gradient(transparent,rgba(15,13,11,.58) 38%,rgba(15,13,11,.93))}
.ctile-b h3{font-family:var(--serif);font-weight:400;font-size:21px;color:#F4EFE7;
  letter-spacing:-.016em;font-variation-settings:"SOFT" 4}
/* two fixed lines — traditions, then count — so every caption in the row is
   the same height whatever the column width does to the wrapping */
.ctile-b p{font-family:var(--sans);font-size:var(--micro);line-height:1.4;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(244,239,231,.66);margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctile-b p+p{color:rgba(244,239,231,.44);margin-top:2px}

@media (max-width:560px){
  /* a half-width tile is only ~160px across: go portrait so the photograph
     still has room once the caption has taken its share */
  .ctile{aspect-ratio:3/4}
  .ctile:last-child:nth-child(odd){aspect-ratio:16/10}   /* the spanning one */
  .ctile-b{padding:22px 12px 12px}
  .ctile-b h3{font-size:17px}
  .ctile-b p{font-size:var(--micro);letter-spacing:.1em;margin-top:4px}
  /* the tradition pair no longer fits on one line; let it wrap, and reserve the
     second line on every tile so the captions in a row stay level */
  .ctile-b p:first-of-type{white-space:normal;min-height:2.8em}
}

/* ═══════════════════════════════════════════════════════════ MISC ═══ */
.empty p{margin-inline:auto}
.empty{padding:64px 20px;text-align:center;border:1px dashed var(--line);
  border-radius:var(--r-flat);grid-column:1/-1}

/* calculator bits */
.calc-row{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line-2)}
/* MOBILE FIRST: a label and its figure stack. Side by side, the label column
   was collapsing to as little as 18px on a 375 viewport — one character per
   line down the whole pricing panel. They pair up once there is room. */
.calc-row.kv2{grid-template-columns:minmax(0,1fr);gap:2px}
.calc-row.kv2 .v{justify-self:start}
@media (min-width:561px){
  .calc-row.kv2{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}
  .calc-row.kv2 .v{justify-self:end}
}
.calc-row label{font-size:14px;color:var(--fg-2)}
.calc-row .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;
  font-weight:600;color:var(--fg);white-space:nowrap}
.calc-bar{display:flex;height:32px;border:1px solid var(--line);border-radius:var(--r-flat);
  overflow:hidden;margin-top:6px}
.calc-bar i{display:block;transition:width var(--t3) var(--ease)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}
.legend span{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:var(--micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.legend b{width:9px;height:9px;flex:none;border-radius:1px}

/* phone frame */
.phone{width:min(290px,84vw);aspect-ratio:9/19;margin-inline:auto;position:relative;
  border-radius:34px;padding:8px;background:var(--bg-3);border:1px solid var(--line-3)}
.phone-scr{width:100%;height:100%;border-radius:27px;overflow:hidden;position:relative;
  background:#131211;display:flex;flex-direction:column}

/* ═══════════════════════════════════════════════════ THE LEDGER ═══ */
/* बही means a book of accounts, so the catalogue is set as one: ruled rows,
   a column head, figures aligned so the eye can run down them. The point of
   the columns is comparison — 340 hours next to 18 hours tells you something
   twelve product cards never could. */
.ledger{border-top:1.5px solid var(--fg);margin-top:var(--s2)}
.lhead,.lrow{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 62px 62px 74px 118px 118px;
  align-items:baseline;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--line-2);
}
.lhead{
  font-family:var(--mono);font-size:var(--micro);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);padding-block:var(--s3);
  border-bottom-color:var(--line);
}
.lhead>span:nth-child(n+3){text-align:right}

.lrow{color:inherit;transition:background var(--t1) var(--ease)}
.lrow:hover{background:var(--bg-3)}
.lrow:hover .lrow-obj b{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line-3)}

/* the entry number, set like a marginal note in the outer column */
.lrow-n{font-family:var(--mono);font-size:var(--micro);font-weight:400;color:var(--fg-3);
  letter-spacing:.06em;text-transform:uppercase}

.lrow-obj{display:block;min-width:0}
.lrow-obj b{display:block;font-family:var(--sans);font-weight:500;font-size:21px;
  line-height:1.24;letter-spacing:-.012em;color:var(--fg)}
.lrow-obj i{display:block;font-style:normal;font-family:var(--sans);font-size:var(--micro);
  font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);
  margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* figures: tabular so columns line up, which is the entire reason for a ledger */
.lrow-num{font-family:var(--mono);font-size:14px;font-weight:400;text-align:right;
  color:var(--fg-2);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.lrow-num s{text-decoration:none;color:var(--fg-3);font-weight:300}
.lrow-ask{color:var(--fg);font-weight:500}
.lrow.is-open .lrow-ask{color:var(--fg-3);font-weight:300}

/* the tone ring is gone from here on purpose: eight colours down a column
   would turn a table into bunting. Craft is carried by the row's own words. */

@media (max-width:900px){
  .lhead{display:none}
  .lrow{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-areas:'obj obj obj' 'a b c' 'd e e';
    gap:var(--s3) var(--s4);padding-block:var(--s5);
  }
  .lrow-n{display:none}
  .lrow-obj{grid-area:obj}
  .lrow-num{text-align:left;display:flex;flex-direction:column;gap:2px}
  /* the column head is gone, so each figure has to name itself */
  .lrow-num::before{content:attr(data-l);font-size:var(--micro);font-weight:300;
    letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
  .lrow-num:nth-of-type(1){grid-area:a} .lrow-num:nth-of-type(2){grid-area:b}
  .lrow-num:nth-of-type(3){grid-area:c} .lrow-num:nth-of-type(4){grid-area:d}
  .lrow-ask{grid-area:e;align-items:flex-end;text-align:right}
}

/* the rate: the number the record exists to defend */
.rate{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-2);
  font-size:14px;line-height:1.6;font-weight:300;color:var(--fg-3);max-width:46ch}
.rate b{display:block;font-family:var(--sans);font-size:21px;font-weight:600;
  line-height:1.3;color:var(--fg);margin-bottom:6px;letter-spacing:-.012em}

/* the legend: three definitions on one line, not a tutorial */
.legend-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7);
  border-top:1px solid var(--line);padding-top:var(--s5)}
.legend-row dt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:var(--s3);min-height:22px}
.legend-row dt .mono{font-size:17px;font-weight:500;color:var(--fg);
  font-variant-numeric:tabular-nums lining-nums}
.legend-row dd{font-size:14px;line-height:1.55;font-weight:300;color:var(--fg-3);max-width:36ch}
@media (max-width:860px){.legend-row{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
/* both of these are positioned for a product card; in the legend they are just
   specimens sitting in a line */
.legend-row .seal-chip{position:static;transform:none}
/* as a flex item this shrinks to content and its flex:1 children collapse,
   so the specimen needs a width of its own */
.legend-row .ticks{position:static;width:132px;flex:none;gap:3px}
.legend-row .ticks i{min-width:16px}

/* the proof, next to the price it justifies */
.proofline{display:flex;align-items:baseline;gap:var(--s5);flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-2)}
.proofline span{font-family:var(--sans);font-size:14px;font-weight:300;color:var(--fg-3)}
.proofline b{font-family:var(--mono);font-size:21px;font-weight:500;color:var(--fg);
  display:block;line-height:1.2;font-variant-numeric:tabular-nums lining-nums}
.proofline a{margin-left:auto;align-self:center;font-family:var(--sans);font-size:14px;
  font-weight:500;color:var(--fg-2);display:inline-flex;align-items:center;gap:6px}
.proofline a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5}
.proofline a:hover{color:var(--fg)}

/* ═══════════════════════════════════════════ ARTISAN PORTAL ═══ */
/* Everything here is private to the maker. It reads as a worksheet, not a shop. */
.gatelist li{align-items:flex-start}
.gatelist .gate-t{display:block;font-family:var(--sans);font-weight:500;font-size:17px;
  color:var(--fg);letter-spacing:-.01em}
.gatelist i{display:block;font-style:normal;font-size:14px;font-weight:300;
  color:var(--fg-3);margin-top:3px;line-height:1.5}

.rupee-in{display:flex;align-items:center;gap:8px}
.rupee-in>span{font-family:var(--mono);font-size:21px;color:var(--fg-3)}
.rupee-in .field[type="text"]{font-family:var(--mono);font-size:26px;font-weight:500;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}

/* count it in notes rather than typing digits */
.notepad{display:flex;flex-wrap:wrap;gap:6px}
.note{font-family:var(--mono);font-size:14px;padding:8px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-3);color:var(--fg-2);transition:all var(--t1) var(--ease)}
.note:hover{border-color:var(--fg);color:var(--fg)}
.note-clear{color:var(--fg-3);border-style:dashed}

.pfield{padding:var(--s5) 0;border-bottom:1px solid var(--line-2)}
.pfield:first-child{padding-top:0}
.pfield-v{font-family:var(--mono);font-size:21px;font-weight:500;color:var(--fg);
  margin-top:10px;font-variant-numeric:tabular-nums lining-nums}

.kv .kv-tot{color:var(--fg);font-weight:600;padding-top:10px;
  border-top:1px solid var(--line);margin-top:6px}

/* the three margin rungs — policy, and labelled as policy */
.rungs{display:grid;gap:var(--s3)}
.rung{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s5);
  text-align:left;padding:var(--s5);border:1px solid var(--line);
  border-radius:var(--r-flat);transition:all var(--t1) var(--ease)}
.rung:hover{border-color:var(--fg-3);background:var(--bg-3)}
.rung.on{border-color:var(--fg);background:var(--bg-3)}
.rung-k{font-family:var(--sans);font-weight:600;font-size:21px;color:var(--fg);letter-spacing:-.012em}
.rung-v{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--fg);
  grid-row:1/3;align-self:center;font-variant-numeric:tabular-nums lining-nums}
.rung-n{font-size:14px;font-weight:300;color:var(--fg-3);line-height:1.5}
.rung-lock{padding:var(--s6);border:1px dashed var(--line-3);border-radius:var(--r-flat)}

/* five dots, countable on one hand — no percentage to misread */
.dots{display:flex;gap:7px}
.dots i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3)}
.dots i.on{background:var(--fg);box-shadow:none}

@media (max-width:560px){
  .rung{grid-template-columns:minmax(0,1fr)}
  .rung-v{grid-row:auto}
}

/* ── the language bar ────────────────────────────────────────────────────
   The maker's own languages, from their record. What we have not translated
   is shown greyed rather than machine-filled. */
.langbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.langset{display:flex;gap:6px;flex-wrap:wrap}
.lang{
  padding:6px 12px;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);
}
.lang:hover{border-color:var(--line-3);color:var(--fg)}
.lang.on{border-color:var(--haldi);color:var(--fg)}
.lang-off{color:var(--fg-3);border-style:dashed;cursor:default}
.lang-off i{font-style:normal;opacity:.6;margin-left:5px}

/* ── the arithmetic, on request ──────────────────────────────────────────
   It stays inspectable; it is no longer preloaded in front of the decision. */
.disc{border:1px solid var(--line);border-radius:var(--r-flat);background:var(--bg-2)}
.disc summary{
  padding:13px 16px;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:var(--micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-2);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.disc summary::-webkit-details-marker{display:none}
.disc summary::after{content:"+";font-family:var(--mono);font-size:15px;color:var(--fg-3)}
.disc[open] summary::after{content:"–"}
.disc summary:hover{color:var(--fg)}
.disc-b{padding:0 16px 16px;border-top:1px solid var(--line-2)}
.disc-b > :first-child{margin-top:14px}

/* the step-forward control */
#pp-next2,#pp-next3{min-width:64px}

/* the verify page shows the object whose captures it hashes */
.vfig{margin:0}
.vfig img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:var(--r-flat);filter:var(--img-filter)}
.vfig 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)}

/* ── the portal reads as a numbered path ─────────────────────────────────
   A giant ledger numeral per step, and the panels you FILL carry an accent
   edge the panels you read do not. */
[data-step]{position:relative}
.stepnum{
  position:absolute;top:34px;right:var(--gut);z-index:0;pointer-events:none;
  font-family:var(--serif);font-size:92px;font-weight:600;line-height:1;
  color:var(--fg);opacity:.07;font-variant-numeric:lining-nums;
}
[data-step] .panel{border-left:2px solid var(--haldi)}
[data-step] .panel .micro:first-child{color:var(--haldi-ink)}

/* the legend's tick specimen must read in both themes — on cards the ticks sit
   over photographs, but here they sit on the band itself */
.legend-row .ticks i{background:var(--fg);box-shadow:none}
.legend-row .ticks i.off{background:transparent;box-shadow:inset 0 0 0 1px var(--line-3)}

/* tablet bands that fell through the global grid utilities */
@media (min-width:861px) and (max-width:1080px){
  #maker-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:561px) and (max-width:860px){
  #makers-grid,#cr-makers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* one recorded object should not stretch across a four-track grid */
#mk-grid:has(> .pcard:only-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* companion columns follow the reader down their taller siblings */
@media (min-width:861px){
  #step2 .split>div:last-child,#step3 .split>div:last-child,
  .vfig{position:sticky;top:calc(var(--nav-h) + 24px)}
}

/* ============================================================================
   PRICE RECOMMENDER v2
   The layout has three jobs and they are visually different objects:
   inputs are a form, the recommendation is a single loud number, and the
   working is three columns of evidence you are meant to read slowly.
   ========================================================================= */
.calc2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s6);align-items:start}
@media (max-width:940px){.calc2{grid-template-columns:minmax(0,1fr)}}

.sect-l{color:var(--fg-3);letter-spacing:.14em;border-bottom:1px solid var(--line-2);
  padding-bottom:6px}

/* MOBILE FIRST: a label and its readout sitting on one justified row is a
   desktop assumption. At 375px both wrap and the two blocks interleave — the
   blend row read as four ragged half-lines. They stack until there is room. */
.panel .flex.ac.jb,.panel-out .flex.ac.jb{
  flex-direction:column;align-items:flex-start;gap:4px}
@media (min-width:561px){
  .panel .flex.ac.jb,.panel-out .flex.ac.jb{
    flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
}

/* the output panel is the one thing on this screen that is not a form */
.panel-out{position:sticky;top:calc(var(--nav-h) + 16px);
  background:var(--bg-3);border-color:var(--line-3)}
@media (max-width:940px){.panel-out{position:static}}

.price-hero{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(38px,6vw,58px);font-weight:500;letter-spacing:-.045em;
  line-height:1;margin-top:14px;color:var(--fg)}
.price-band{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:15px;color:var(--fg-2);margin-top:8px;letter-spacing:-.01em}

.conf-verd{border-color:var(--verd)!important;color:var(--verd)!important}
.conf-haldi{border-color:var(--haldi)!important;color:var(--haldi-ink)!important}
.conf-madder{border-color:var(--madder)!important;color:var(--madder)!important}

.blend-track{height:6px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-flat);overflow:hidden}
.blend-track i{display:block;height:100%;background:var(--indigo);
  transition:width var(--t2) var(--ease)}

.work3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);
  align-items:start;margin-top:var(--s6)}
@media (max-width:1080px){.work3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .work3>.panel:last-child{grid-column:1/-1}}
@media (max-width:780px){.work3{grid-template-columns:minmax(0,1fr)}
  .work3>.panel:last-child{grid-column:auto}}

/* comparables table — evidence, so square, ruled, monospaced figures.
   Four columns including a wrapping label do not fit the ~330px middle column
   of .work3 at 1080px, so the table gets its own scroller. House rule: wide
   content scrolls inside itself; the body never scrolls sideways. */
/* A table that scrolls sideways must SAY it scrolls, or the last column simply
   does not exist to a phone reader. The mask fades the right edge while there
   is more to come and resolves as it reaches the end. */
.ctbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--s5) * -1);padding-inline:var(--s5);
  scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
@media (min-width:861px){
  .ctbl-wrap{-webkit-mask-image:none;mask-image:none}
}
.ctbl-hint{display:block;font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:6px}
@media (min-width:861px){.ctbl-hint{display:none}}
.ctbl{width:100%;min-width:300px;font-size:13px}
.ctbl th{text-align:left;font-family:var(--sans);font-size:var(--micro);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);
  padding:0 0 8px;border-bottom:1px solid var(--line);white-space:nowrap}
/* the numeric headers had no left padding while their cells had 10px, so at
   the micro floor they ran together as "ASKEDSIZENORMALISED" */
.ctbl th.r,.ctbl td.r{text-align:right}
.ctbl th.r{padding-left:14px}
.ctbl td{padding:10px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
.ctbl td b{display:block;font-weight:500;color:var(--fg);font-size:13.5px;line-height:1.35}
.ctbl td span{display:block;color:var(--fg-3);font-size:var(--micro);margin-top:3px;line-height:1.45}
.ctbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-left:10px;color:var(--fg)}
.ctbl td.n.f{color:var(--fg-3)}

/* the factor ledger — one card per factor, tinted by direction.
   NAMED .frow, NOT .lrow: .lrow is already the seven-column grid of the
   .ledger component further up this file, and reusing it turned every factor
   card into a 7-track grid that shoved its own prose off the right edge at
   375px. Distinct component, distinct name. */
.frow{padding:12px 0 12px 12px;border-left:2px solid var(--line);margin-bottom:2px}
.frow.up{border-left-color:var(--verd)}
.frow.dn{border-left-color:var(--madder)}
.frow.nil{border-left-color:var(--line-3)}
.frow-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.frow-h b{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--fg)}
.ff{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;
  white-space:nowrap}
.frow.up .ff{color:var(--verd)} .frow.dn .ff{color:var(--madder)}
.frow.nil .ff{color:var(--fg-3)}
.fin{font-family:var(--mono);font-size:var(--micro);color:var(--fg-2);margin-top:5px;
  letter-spacing:-.01em;line-height:1.5}
.fwhy{font-size:13px;color:var(--fg-3);line-height:1.55;margin-top:5px;max-width:52ch}
.feff{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--micro);
  color:var(--fg-3);margin-top:6px}

/* A standing warning, not fine print. The rows underneath it are fiction, and
   a reader who skims must still come away knowing that — so it is ruled in
   madder, sits above the data rather than below it, and does not shrink. */
.fakewarn{border:1px solid color-mix(in srgb,var(--madder) 45%,transparent);
  border-left-width:3px;border-radius:var(--r-flat);
  background:color-mix(in srgb,var(--madder) 7%,transparent);
  padding:14px 16px}
.fakewarn p{font-size:13.5px;line-height:1.55;color:var(--fg-2);max-width:56ch}
.fakewarn b{color:var(--madder);font-weight:600}

/* ════════════════════════════════════════════════ AI MARKET CHECK (portal) ═══
   Step 3 of the portal wizard. Additive to .rungs/.card/.facts/.kv/.disc above
   — no new component language, just a second, researched layer on top of the
   cost-based one. Round pill for the one thing you can do here (the button);
   everything the AI hands back is recorded, so it reads in mono like the rest
   of what the system records rather than what a human declared. */
.mk-panel{border-top:1px solid var(--line-2);padding-top:var(--s5)}

.mk-complist{list-style:none}
.mk-comp-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;
  padding:10px 0;border-bottom:1px solid var(--line-2)}
.mk-comp-row:last-child{border-bottom:0}
.mk-comp-t{flex:1 1 220px;min-width:0;font-size:14px;line-height:1.4}
a.mk-comp-t{color:var(--fg);text-decoration:underline;
  text-decoration-color:var(--line-3);text-underline-offset:2px}
a.mk-comp-t:hover{text-decoration-color:var(--indigo)}
span.mk-comp-t{color:var(--fg-3)}
.mk-comp-meta{font-family:var(--mono);font-size:var(--micro);color:var(--fg-3);
  white-space:nowrap}
.mk-comp-tier{text-transform:uppercase}
.mk-comp-price{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--fg);
  margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

/* cost-based rung vs. the same channel's researched band, side by side */
.mk-compare{display:grid;gap:var(--s3)}
.mk-compare-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  gap:4px var(--s4);align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-2)}
.mk-compare-row:last-child{border-bottom:0}
.mk-compare-k{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--fg)}
.mk-compare-cost,.mk-compare-mkt{font-family:var(--mono);font-size:14px;color:var(--fg-2);
  white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.mk-compare-cost i,.mk-compare-mkt i{display:block;font-style:normal;font-family:var(--sans);
  font-size:var(--micro);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}

@media (max-width:560px){
  .mk-compare-row{grid-template-columns:minmax(0,1fr)}
}