/* Commerce Plugs — design system
   A printed trade directory, not a software landing page.
   Newsprint stock, ink black, oxblood red for emphasis the way a printed
   index uses it. Editorial serif for voice, grotesque for data. Scotch rules
   (thick over thin) as the dividing device. No monospace anywhere: machine
   fonts are what every other index-of-things site reaches for, and they make
   a directory read like a terminal instead of a reference work. */

:root {
  /* stock and ink */
  --ink: #16181C;          /* ink black, very slightly cool */
  --ink-2: #44494F;
  --muted: #5E646C;
  --paper: #F7F6F1;        /* newsprint stock, not white, not cream */
  --paper-2: #FFFFFF;      /* true white, used only where goods are shown */
  --surface: #EDEBE4;
  --surface-2: #E2DFD6;
  --line: #CFCBC0;
  --line-2: #948E83;

  /* emphasis: oxblood, as a printed index uses red */
  --brand: #8C1D18;
  --brand-ink: #6B1310;
  --brand-soft: #F3E4E2;
  --signal: #1D4D43;
  --ink2: #1D4D43;        /* the second plate */
  --ink2-soft: #E4EBE8;
  --signal-soft: #E6EDE6;
  --flag: #8C1D18;
  --flag-soft: #F3E4E2;

  /* form */
  --radius: 0;             /* printed matter has no rounded corners */
  --radius-lg: 0;
  --hard: none;
  --hard-brand: none;
  --rail: 1px solid var(--line);

  --display: Newsreader, "Times New Roman", Times, serif;
  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* The masthead and colophon are printed in ink on stock in both schemes.
     They must not invert, or the plate flips and the hardcoded whites break. */
  --mast: #16181C;
  --mast-ink: #F7F6F1;
  --mast-ink-2: #C9C4B9;
  --mast-accent: #E8A9A2;
  --mast-brand: #8C1D18;   /* the plate accent, fixed like the rest of the masthead */

  --maxw: 1280px;
  --gut: 22px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EDEAE2;
    --ink-2: #B9B4A9;
    --muted: #8A857B;
    --paper: #141414;
    --paper-2: #1C1C1B;
    --surface: #1E1E1C;
    --surface-2: #2A2A27;
    --line: #35352F;
    --line-2: #4A4A43;
    --brand: #E0796F;
    --brand-ink: #EFA096;
    --brand-soft: #32201E;
    --signal: #7FB68C;
    --ink2: #7FC4B4;
    --ink2-soft: #16261F;
    --signal-soft: #1C2A1F;
    --flag: #E0796F;
    --flag-soft: #32201E;
  }
}
:root[data-theme="dark"] {
  --ink: #F2F2F6; --ink-2: #BDBDCB; --muted: #8E8EA0;
  --paper: #0C0C11; --surface: #14141B; --surface-2: #1D1D27;
  --line: #2A2A36; --line-2: #3A3A49;
  --brand: #8E7BFF; --brand-ink: #B5A8FF; --brand-soft: #1B1734;
  --signal: #3DD6A0; --signal-soft: #0F2A22;
  --flag: #FF7A5E; --flag-soft: #2B140F;
  --hard: 3px 3px 0 #000;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16.5px/1.6 var(--display);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brand); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
hr { border: 0; border-top: var(--rail); margin: 28px 0; }

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.012em;     /* a serif does not want the tight tracking a grotesque does */
  line-height: 1.1;
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.02; }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
h3 { font-size: 1.14rem; }

/* the printer's small-cap label, replacing uppercase mono tracking */
.label, .eyebrow, .kick {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--brand);
}

/* Scotch rule: thick over thin, the dividing device of printed directories */
.scotch { border-top: 3px solid var(--ink); box-shadow: 0 2px 0 -1px var(--ink); height: 0; margin: 0; }
p { margin: 0 0 .9rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 760px; }
.mid { max-width: 1020px; }
.muted { color: var(--muted); }
.sm { font-size: .875rem; }
.xs { font-size: .78rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 200; }
.skip:focus { left: 10px; top: 10px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---- mono data rail: the signature element ---- */
.rail {
  font-family: var(--display);
  font-style: italic;
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.rail b { color: var(--ink-2); font-weight: 500; }
.rail .dot { width: 3px; height: 3px; background: var(--line-2); }
.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 .6rem;
  font-weight: 500;
}
.eyebrow.alt { color: var(--muted); }

/* ---- buttons: square, hard shadow, no pills ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 46px; padding: .6rem 1.25rem;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  font: 600 .95rem/1 var(--sans); letter-spacing: -.01em;
  cursor: pointer; text-decoration: none; box-shadow: var(--hard);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { text-decoration: none; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); color: var(--paper); }
.btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }
.btn-brand { background: var(--brand); border-color: var(--brand); box-shadow: 3px 3px 0 var(--brand-ink); }
.btn-brand:hover { box-shadow: 4px 4px 0 var(--brand-ink); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--surface); color: var(--ink); box-shadow: none; transform: none; }
.btn-sm { min-height: 38px; padding: .4rem .85rem; font-size: .85rem; box-shadow: 2px 2px 0 var(--ink); }
.btn-lg { min-height: 54px; padding: .8rem 1.6rem; font-size: 1.05rem; }

/* ---- badges ---- */
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: var(--radius); border: 1px solid var(--line-2); color: var(--ink-2);
  background: var(--surface);
}
.tag-ok { background: var(--signal-soft); border-color: var(--signal); color: var(--signal); }
.tag-brand { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.tag-flag { background: var(--flag-soft); border-color: var(--flag); color: var(--flag); }
.tag-open { background: transparent; border-style: dashed; color: var(--muted); }

/* ================= HEADER ================= */
.top { background: #0B0B0F; color: #fff; border-bottom: 2px solid var(--brand); }
.top a { color: #fff; }
.top-in {
  max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gut);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
}
.mark { display: inline-flex; align-items: baseline; gap: .4rem; text-decoration: none; }
.mark:hover { text-decoration: none; }
.mark .m1 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.035em; color: #fff; }
.mark .m2 {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: #8E7BFF; border: 1px solid #3B2BE0; padding: .12rem .3rem; border-radius: 2px;
}

/* search */
.find { display: flex; width: 100%; max-width: 760px; }
.find select {
  font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .04em;
  border: 2px solid #fff; border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: #1D1D27; color: #fff; padding: 0 .5rem; cursor: pointer;
  flex: 0 0 auto; width: auto; max-width: 190px; text-overflow: ellipsis;
}
.find input {
  flex: 1; min-width: 0; min-height: 46px; padding: .6rem .85rem;
  border: 2px solid #fff; border-left: 0; border-right: 0;
  font: 400 1rem var(--sans); background: #fff; color: var(--ink); border-radius: 0;
}
.find input::placeholder { color: #71717F; }
.find button {
  min-height: 46px; padding: 0 1.1rem; cursor: pointer;
  border: 2px solid var(--brand); background: var(--brand); color: #fff;
  border-radius: 0 var(--radius) var(--radius) 0;
  font: 600 .9rem var(--sans);
}
.find button:hover { background: #2518A8; border-color: #2518A8; }

.top-act { display: flex; align-items: center; gap: 6px; }
.top-act a {
  font: 500 .85rem var(--sans); padding: .5rem .7rem; border-radius: var(--radius);
  border: 1px solid transparent; white-space: nowrap;
}
.top-act a:hover { background: #1D1D27; text-decoration: none; }
.top-act .cta { border-color: var(--brand); background: var(--brand); }
.top-act .cta:hover { background: #2518A8; }

/* category strip */
.strip { background: var(--surface); border-bottom: var(--rail); }
.strip-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.strip-in::-webkit-scrollbar { display: none; }
.strip a {
  flex: 0 0 auto; padding: .7rem .8rem; color: var(--ink-2);
  font: 500 .83rem var(--sans); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.strip a:hover, .strip a[aria-current] { color: var(--brand); border-bottom-color: var(--brand); text-decoration: none; background: var(--paper); }

/* ================= LAYOUT ================= */
.sec { padding: 44px 0; }
.sec-tight { padding: 26px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) { .g6 { grid-template-columns: repeat(4,1fr); } .g4 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px) {
  .g6, .g4, .g3 { grid-template-columns: repeat(2, 1fr); }
  .g2 { grid-template-columns: 1fr; }
  .sec { padding: 30px 0; }
}

/* ================= CARDS ================= */
.card {
  background: var(--paper); border: var(--rail); border-radius: var(--radius);
  padding: 16px; position: relative;
}
.card-hover { transition: box-shadow .1s ease, border-color .1s ease; }
.card-hover:hover { border-color: var(--ink); box-shadow: var(--hard); }

/* category tile */
.cat {
  display: block; padding: 16px; border: var(--rail); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); text-decoration: none;
  transition: box-shadow .1s ease, border-color .1s ease;
}
.cat:hover { text-decoration: none; border-color: var(--ink); box-shadow: var(--hard); color: var(--ink); }
.cat .ic {
  width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 11px;
  background: var(--brand-soft); color: var(--brand); border-radius: var(--radius);
  border: 1px solid transparent; transition: border-color .1s ease, background .1s ease;
}
.cat:hover .ic { border-color: var(--brand); background: var(--paper); }
.cat .ic svg { display: block; }
.cat h3 { font-size: .98rem; margin: 0 0 .2rem; }
.cat p { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.4; }

/* product card */
.prod { display: flex; flex-direction: column; height: 100%; }
.prod .shot {
  aspect-ratio: 1; background: var(--surface); border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: 10px; overflow: hidden;
  border: var(--rail);
}
.prod .shot .ph { font: 500 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--line-2); }
.prod h3 { font-family: var(--sans); font-size: .9rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin: 0 0 .35rem; }
.prod h3 a { color: var(--ink); }
.prod .price { font: 600 1.15rem var(--mono); letter-spacing: -.02em; color: var(--ink); margin: auto 0 .3rem; }
.prod .price span { font-size: .72rem; color: var(--muted); font-weight: 400; }
.prod .from { font-size: .78rem; color: var(--muted); margin: 0 0 .5rem; }
.prod .from a { color: var(--ink-2); font-weight: 500; }

/* store card */
.store { display: flex; flex-direction: column; gap: 10px; }
.store-top { display: flex; align-items: flex-start; gap: 12px; }
.store-logo {
  width: 52px; height: 52px; flex: 0 0 52px; border: 2px solid var(--ink); border-radius: var(--radius);
  display: grid; place-items: center; background: var(--paper);
  font: 700 1.05rem var(--display); letter-spacing: -.04em; color: var(--ink);
}
.store h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.store h3 a { color: var(--ink); }
.store .bl { font-size: .86rem; color: var(--ink-2); margin: 0; line-height: 1.45; }
.store-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: var(--rail); padding-top: 10px; margin-top: auto; }

/* empty / open slot */
.slot {
  border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 8px; background: var(--surface);
}
.slot h3 { font-size: .95rem; margin: 0; color: var(--ink-2); }
.slot p { margin: 0; font-size: .82rem; color: var(--muted); }

/* ================= HERO ================= */
.hero { border-bottom: var(--rail); background: var(--paper); }
.hero-in { padding: 54px 0 46px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; gap: 28px; padding: 34px 0 30px; } }
.hero h1 { margin: 0 0 .7rem; }
.hero .lede { font-size: 1.13rem; color: var(--ink-2); max-width: 46ch; margin: 0 0 1.3rem; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* machine panel — proof element */
.machine {
  border: 2px solid var(--ink); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--hard); overflow: hidden;
}
.machine-bar {
  background: var(--ink); color: var(--paper); padding: .5rem .8rem;
  font: 500 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.machine-bar .led { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.machine pre {
  margin: 0; padding: 14px; font: 400 .74rem/1.65 var(--mono); color: var(--ink-2);
  overflow-x: auto; background: var(--surface); white-space: pre;
}
.machine pre .k { color: var(--brand); }
.machine pre .s { color: var(--signal); }

/* ================= STATS ================= */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: var(--rail); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2,1fr); } }
.stat { padding: 18px 16px; border-right: var(--rail); background: var(--paper); }
.stat:last-child { border-right: 0; }
@media (max-width: 760px) { .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: var(--rail); } }
.stat .n { font: 700 1.9rem/1 var(--display); letter-spacing: -.04em; display: block; margin-bottom: .25rem; }
.stat .l { font: 400 .76rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ================= FILTER / RESULTS ================= */
.shell { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; gap: 16px; } }
.side { border: var(--rail); border-radius: var(--radius); padding: 14px; background: var(--paper); position: sticky; top: 14px; }
@media (max-width: 900px) { .side { position: static; } }
.side h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; font-weight: 500; }
.side + .side { margin-top: 14px; }
.side ul { list-style: none; margin: 0 0 4px; padding: 0; }
.side li { margin-bottom: 2px; }
.side li a { display: block; padding: .35rem .4rem; border-radius: 2px; color: var(--ink-2); font-size: .88rem; }
.side li a:hover, .side li a[aria-current] { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.chk { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-2); padding: .3rem 0; cursor: pointer; }
.chk input { accent-color: var(--brand); width: 16px; height: 16px; }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--ink); flex-wrap: wrap;
}
.bar .count { font: 500 .8rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bar select { font: 500 .85rem var(--sans); padding: .45rem .6rem; border: var(--rail); border-radius: var(--radius); background: var(--paper); color: var(--ink); }

/* ================= STORE PAGE ================= */
.sheet { border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); box-shadow: var(--hard); overflow: hidden; margin-bottom: 26px; }
.sheet-head { padding: 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; border-bottom: var(--rail); }
@media (max-width: 760px) { .sheet-head { grid-template-columns: auto 1fr; } .sheet-head .sheet-act { grid-column: 1 / -1; } }
.sheet-logo {
  width: 76px; height: 76px; flex: 0 0 76px; border: 2px solid var(--ink); border-radius: var(--radius);
  display: grid; place-items: center; font: 700 1.6rem var(--display); letter-spacing: -.05em; background: var(--surface);
}
.sheet h1 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 0 .3rem; }
.sheet-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--rail); }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2,1fr); } }
.fact { padding: 13px 16px; border-right: var(--rail); }
.fact:last-child { border-right: 0; }
.fact dt { font: 500 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.fact dd { margin: 0; font-size: .92rem; font-weight: 500; color: var(--ink); }

/* ================= PRICING ================= */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier { border: 2px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; background: var(--paper); }
.tier.pick { border-color: var(--brand); box-shadow: var(--hard-brand); }
.tier .nm { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.tier.pick .nm { color: var(--brand); }
.tier .amt { font: 700 2.6rem/1 var(--display); letter-spacing: -.045em; margin-bottom: .1rem; }
.tier .amt sup { font-size: 1.1rem; top: -1rem; font-weight: 600; }
.tier .per { font: 400 .8rem var(--mono); color: var(--muted); margin-bottom: 1rem; }
.tier ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.tier li { padding: .42rem 0 .42rem 1.4rem; position: relative; font-size: .9rem; color: var(--ink-2); border-bottom: 1px dotted var(--line); }
.tier li::before { content: "+"; position: absolute; left: 0; color: var(--signal); font-family: var(--mono); font-weight: 700; }
.tier li.no { color: var(--muted); }
.tier li.no::before { content: "–"; color: var(--line-2); }
.tier .btn { margin-top: auto; width: 100%; }

/* ================= STEPS / FEATURES ================= */
.steps { counter-reset: s; display: grid; gap: 2px; border: var(--rail); border-radius: var(--radius); overflow: hidden; }
.step { counter-increment: s; padding: 20px; background: var(--paper); border-bottom: var(--rail); display: grid; grid-template-columns: 54px 1fr; gap: 16px; }
.step:last-child { border-bottom: 0; }
.step::before {
  content: counter(s, decimal-leading-zero);
  font: 700 1.3rem var(--mono); color: var(--brand); letter-spacing: -.03em;
}
.step h3 { margin: 0 0 .3rem; }
.step p { margin: 0; color: var(--ink-2); font-size: .95rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split > div { padding: 24px; }
.split > div:first-child { border-right: 2px solid var(--ink); background: var(--paper); }
.split > div:last-child { background: var(--surface); }
.split.pair > div:first-child { background: var(--signal-soft); }
.split.pair > div:last-child { background: var(--flag-soft); }
@media (max-width: 820px) { .split > div:first-child { border-right: 0; border-bottom: 2px solid var(--ink); } }
.split h3 { margin-bottom: .6rem; }
.split ul { margin: 0; padding-left: 1.1rem; }
.split li { margin-bottom: .45rem; font-size: .93rem; }

/* callout */
.note {
  border-left: 4px solid var(--brand); background: var(--surface);
  padding: 14px 16px; border-radius: 0 var(--radius) var(--radius) 0; margin: 20px 0;
}
.note p:last-child { margin: 0; }

/* band */
.band { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 34px; }
.band h2, .band h3 { color: var(--paper); }
.band p { color: #BDBDCB; }
.band .btn { background: var(--brand); border-color: var(--brand); box-shadow: 3px 3px 0 #000; }

/* ================= FORM ================= */
.field { margin-bottom: 14px; }
.field label { display: block; font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: .6rem .75rem;
  border: 2px solid var(--line-2); border-radius: var(--radius);
  font: 400 1rem var(--sans); background: var(--paper); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline: none; }
.field textarea { min-height: 120px; resize: vertical; }

/* ================= FOOTER ================= */
.foot { border-top: 2px solid var(--ink); margin-top: 50px; background: var(--surface); }
.foot-in { max-width: var(--maxw); margin: 0 auto; padding: 36px var(--gut) 20px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .foot-cols { grid-template-columns: repeat(2,1fr); } }
.foot h4 { font: 500 .7rem var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .4rem; }
.foot li a { color: var(--ink-2); font-size: .88rem; }
.foot li a:hover { color: var(--brand); }
.foot-end {
  border-top: var(--rail); margin-top: 26px; padding-top: 16px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font: 400 .76rem var(--mono); color: var(--muted); letter-spacing: .04em;
}

/* breadcrumbs */
.crumb { font: 400 .76rem var(--mono); letter-spacing: .05em; color: var(--muted); padding: 14px 0; text-transform: uppercase; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--brand); }
.crumb span { margin: 0 .4rem; color: var(--line-2); }

/* utility */
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt2 { margin-top: 1.4rem; } .mb2 { margin-bottom: 1.4rem; }
.hide { display: none !important; }
@media (max-width: 760px) { .no-sm { display: none !important; } }
@media print { .top, .strip, .foot, .btn { display: none !important; } }


/* ================= OVERFLOW DISCIPLINE ================= */
/* grid and flex children default to min-width:auto, which lets a wide <pre>
   push the whole page sideways. Pin them to zero so panels scroll internally. */
.grid > *, .split > *, .hero-in > *, .shell > *, .top-in > *, .foot-cols > * { min-width: 0; }
.machine, .machine pre, pre, table { max-width: 100%; }
.machine pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, svg { max-width: 100%; height: auto; }

/* ================= HEADER ON SMALL SCREENS ================= */
@media (max-width: 900px) {
  .top-in { grid-template-columns: 1fr auto; row-gap: 10px; }
  .find { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .no-sm { display: none; }
}
@media (max-width: 440px) {
  .find select { display: none; }
  .find input { border-left: 2px solid #fff; border-radius: var(--radius) 0 0 var(--radius); }
  .mark .m1 { font-size: 1.1rem; }
  .machine pre { font-size: .68rem; padding: 12px; }
  .band { padding: 22px 18px; }
  .sheet-act { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .g6, .g4, .g3 { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

.g1 { grid-template-columns: 1fr; }

/* ============================================================
   INDEX GRAMMAR
   The site is a reference work, not a landing page. These are
   the primitives that replace hero / stat-cells / icon-cards /
   dark-band: ruled rows, dot leaders, registers, mono counts.
   Type and rules do the work. Nothing floats in a box.
   ============================================================ */

/* --- the orientation line: one dense mono line, no hero --- */
.orient {
  font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 14px 0; border-bottom: 2px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline;
}
.orient b { color: var(--ink); font-weight: 600; }
.orient .sep { color: var(--line-2); }

/* --- the statement block: type only, no buttons floating beside it --- */
.state { padding: 42px 0 36px; border-bottom: 2px solid var(--ink); }
.state h1 {
  font-size: clamp(2rem, 6.2vw, 4.4rem); line-height: .97; letter-spacing: -.045em;
  margin: 0 0 1.1rem; max-width: 18ch;
}
.state p { font-size: 1.08rem; color: var(--ink-2); max-width: 54ch; margin: 0 0 .8rem; }
.state .after { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 1.3rem; }
.state .after a {
  font: 500 .86rem var(--sans); border-bottom: 2px solid var(--brand);
  padding-bottom: 1px; color: var(--ink);
}
.state .after a:hover { background: var(--brand); color: #fff; text-decoration: none; }
@media (max-width: 560px) { .state { padding: 28px 0 24px; } }

/* --- section rule: a label on a line, not a card header --- */
.rule {
  display: flex; align-items: baseline; gap: 12px; margin: 34px 0 0;
  border-bottom: 2px solid var(--ink); padding-bottom: 7px;
}
.rule h2 { font: 600 .78rem var(--mono); letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.rule .n { font: 400 .72rem var(--mono); color: var(--muted); letter-spacing: .08em; }
.rule .more { margin-left: auto; font: 500 .76rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* --- the index proper: dot-leader list, newspaper columns --- */
.index-list { columns: 3; column-gap: 40px; column-rule: 1px solid var(--line); padding: 6px 0 0; }
@media (max-width: 900px) { .index-list { columns: 2; column-gap: 26px; } }
@media (max-width: 560px) { .index-list { columns: 1; } }
.ix {
  display: flex; align-items: baseline; gap: 6px; padding: .46rem 0;
  break-inside: avoid; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: .95rem;
}
.ix:hover { text-decoration: none; color: var(--brand); }
.ix:hover .lead { border-color: var(--brand); }
.ix .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix .lead { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-3px); min-width: 14px; }
.ix .ct { font: 500 .8rem var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ix:hover .ct { color: var(--brand); }

/* --- register: stores as ruled table rows, not cards --- */
.register { width: 100%; border-collapse: collapse; font-size: .92rem; }
.register th {
  text-align: left; font: 500 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px 8px 0; border-bottom: 1px solid var(--line);
}
.register td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.register tr:hover td { background: var(--surface); }
.register .ix-n { font: 500 .8rem var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; width: 1%; }
.register .nm a { font-weight: 600; font-size: 1rem; }
.register .dom { font: 400 .78rem var(--mono); color: var(--muted); display: block; margin-top: 2px; }
.register .num { font: 500 .85rem var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 760px) {
  .register thead { display: none; }
  .register, .register tbody, .register tr, .register td { display: block; width: 100%; }
  .register tr { border-bottom: 2px solid var(--ink); padding: 12px 0; }
  .register td { border: 0; padding: 2px 0; }
  .register .num { text-align: left; }
}

/* --- listing rows: a trade price list, not a card grid --- */
.rows { border-top: 2px solid var(--ink); }
.row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start;
}
.row:hover { background: var(--surface); }
.row .th {
  width: 74px; height: 74px; border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; overflow: hidden; border-radius: 2px;
}
.row .th img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.row .ttl { font-weight: 500; font-size: .98rem; line-height: 1.35; display: block; margin-bottom: .3rem; }
.row .ttl:hover { color: var(--brand); }
.row .meta {
  font: 400 .76rem var(--mono); color: var(--muted); letter-spacing: .02em;
  display: flex; flex-wrap: wrap; gap: 0 8px;
}
.row .meta b { color: var(--ink-2); font-weight: 500; }
.row .desc { font-size: .86rem; color: var(--ink-2); margin: .35rem 0 0; max-width: 70ch; }
.row .amt { text-align: right; white-space: nowrap; }
.row .amt .p { font: 600 1.05rem var(--mono); font-variant-numeric: tabular-nums; display: block; letter-spacing: -.02em; }
.row .amt .go { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.row .amt .go:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .row { grid-template-columns: 56px 1fr; }
  .row .th { width: 56px; height: 56px; }
  .row .amt { grid-column: 2; text-align: left; margin-top: .3rem; }
  .row .amt .p { display: inline; margin-right: 10px; }
  .row .desc { display: none; }
}

/* --- a plain ruled note, replaces the dark band --- */
.ledge { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 26px 0; margin: 40px 0 0; }
.ledge h2 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.03em; margin: 0 0 .6rem; max-width: 26ch; }
.ledge p { color: var(--ink-2); max-width: 62ch; margin: 0 0 .5rem; }
.ledge .after { margin-top: 1rem; display: flex; gap: 0 22px; flex-wrap: wrap; }
.ledge .after a { font: 500 .86rem var(--sans); border-bottom: 2px solid var(--brand); padding-bottom: 1px; color: var(--ink); }
.ledge .after a:hover { background: var(--brand); color: #fff; text-decoration: none; }

/* --- spec list: facts as ruled definition rows --- */
.spec { border-top: 1px solid var(--line); margin: 0; }
.spec div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.spec dd { margin: 0; font-size: .95rem; }
@media (max-width: 620px) { .spec div { grid-template-columns: 1fr; gap: 2px; } }

/* ============================================================
   DIRECTORY DRESS — overrides the software-shaped components.
   Every uppercase-wide-tracked label and every monospace rail
   from the first pass is retired here. Printed matter instead:
   small-caps serif labels, Scotch rules, hanging margin
   numbers, tabular lining figures only where columns must line
   up (prices, counts).
   ============================================================ */

/* --- masthead: a directory title page, not an app bar --- */
.top { background: var(--ink); color: var(--paper); border-bottom: 0; }
.top-in { padding: 14px var(--gut); gap: 20px; }
.mark .m1 {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.015em; color: var(--paper);
}
.mark .m2 {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: .85rem; letter-spacing: 0; text-transform: none;
  color: var(--brand-soft); border: 0; padding: 0 0 0 .15rem; opacity: .75;
}
.top-act a { font-family: var(--sans); font-size: .85rem; font-weight: 500; border-radius: 0; }
.top-act .cta { background: var(--brand); border-color: var(--brand); }
.top-act .cta:hover { background: var(--brand-ink); border-color: var(--brand-ink); }

.find select, .find input, .find button { border-radius: 0; }
.find select {
  font: 500 .82rem var(--sans); text-transform: none; letter-spacing: 0;
  background: #2A2D33; border-color: var(--paper);
}
.find input { font: 400 1rem var(--sans); }
.find button { font: 600 .9rem var(--sans); background: var(--brand); border-color: var(--brand); }
.find button:hover { background: var(--brand-ink); border-color: var(--brand-ink); }

/* --- category strip: a running head, set in the serif --- */
.strip { background: var(--surface); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.strip a {
  font: 400 .95rem var(--display); color: var(--ink-2);
  padding: .55rem .75rem; border-bottom: 2px solid transparent;
}
.strip a:hover, .strip a[aria-current] { color: var(--brand); border-bottom-color: var(--brand); background: none; }

.crumb { font-family: var(--display); font-style: italic; font-size: .9rem; text-transform: none; letter-spacing: 0; }

/* --- the standing line: italic serif, not a mono readout --- */
.orient {
  font: 400 1rem/1.5 var(--display); font-style: italic; letter-spacing: 0;
  text-transform: none; color: var(--ink-2);
  border-bottom: 3px solid var(--ink); box-shadow: 0 2px 0 -1px var(--ink);
  padding: 12px 0 13px; gap: 0 8px;
}
.orient b { font-style: normal; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.orient .sep { color: var(--line-2); font-style: normal; }

/* --- statement: the directory's standing description --- */
.state { padding: 46px 0 38px; border-bottom: 1px solid var(--line); }
.state h1 { max-width: 15ch; }
.state h1 em { font-style: italic; color: var(--brand); }
.state p { font-size: 1.12rem; line-height: 1.6; max-width: 56ch; color: var(--ink-2); }
.state .after a {
  font: 400 1.02rem var(--display); border-bottom: 1px solid var(--brand);
  color: var(--brand); padding-bottom: 2px;
}
.state .after a:hover { background: var(--brand); color: var(--paper); border-color: var(--brand); }

/* --- section rules: a heading sitting on a Scotch rule --- */
.rule {
  border-bottom: 3px solid var(--ink); box-shadow: 0 2px 0 -1px var(--ink);
  padding-bottom: 6px; margin: 40px 0 0; gap: 14px;
}
.rule h2 {
  font: 600 1.18rem var(--display); letter-spacing: -.01em;
  text-transform: none; margin: 0; color: var(--ink);
}
.rule .n { font: italic 400 .95rem var(--display); letter-spacing: 0; color: var(--muted); }
.rule .more {
  font: 400 .95rem var(--display); letter-spacing: 0; text-transform: none;
  color: var(--brand); border-bottom: 1px solid var(--brand); padding-bottom: 1px;
}
.rule select.more {
  border: 1px solid var(--line-2); border-radius: 0; background: var(--paper);
  padding: .3rem .5rem; color: var(--ink); font-family: var(--sans); font-size: .85rem;
}

/* --- index: dot leaders, serif, lining figures so counts align --- */
.index-list { column-rule: 1px solid var(--line); padding-top: 10px; }
.ix { font: 400 1.02rem var(--display); padding: .42rem 0; border-bottom: 1px dotted var(--line); }
.ix .ct {
  font: 500 .95rem var(--sans); font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-2);
}
.ix:hover, .ix:hover .ct { color: var(--brand); }

/* --- register: a ledger. Entry numbers hang in the margin. --- */
.register { font-family: var(--sans); font-size: .93rem; }
.register th {
  font: italic 400 .92rem var(--display); letter-spacing: 0; text-transform: none;
  color: var(--muted); border-bottom: 1px solid var(--ink); padding-bottom: 6px;
}
.register td { border-bottom: 1px solid var(--line); }
.register .ix-n {
  font: 400 .95rem var(--display); font-variant-numeric: lining-nums tabular-nums;
  color: var(--brand); padding-right: 14px;
}
.register .nm a { font: 600 1.12rem var(--display); letter-spacing: -.01em; }
.register .nm a:hover { color: var(--brand); }
.register .dom { font: italic 400 .88rem var(--display); color: var(--muted); }
.register .num { font-variant-numeric: lining-nums tabular-nums; }

/* --- listing rows: a price list. Goods sit on white, page is newsprint. --- */
.rows { border-top: 3px solid var(--ink); box-shadow: 0 2px 0 -1px var(--ink); }
.row { padding: 15px 0; border-bottom: 1px solid var(--line); }
.row:hover { background: var(--surface); }
.row .th { background: var(--paper-2); border: 1px solid var(--line); border-radius: 0; }
.row .ttl { font: 600 1.08rem/1.3 var(--display); letter-spacing: -.01em; margin-bottom: .22rem; }
.row .ttl:hover { color: var(--brand); }
.row .meta {
  font: 400 .84rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted);
  font-variant-numeric: lining-nums;
}
.row .meta b { font-weight: 600; color: var(--ink-2); }
.row .desc { font: 400 .96rem/1.45 var(--display); color: var(--ink-2); }
.row .amt .p {
  font: 600 1.18rem var(--display); font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em; color: var(--ink);
}
.row .amt .go {
  font: italic 400 .9rem var(--display); letter-spacing: 0; text-transform: none;
  color: var(--brand);
}

/* --- ledge: a standing notice, ruled top and bottom --- */
.ledge {
  border-top: 3px solid var(--ink); box-shadow: 0 2px 0 -1px var(--ink);
  border-bottom: 1px solid var(--ink); padding: 30px 0 32px;
}
.ledge h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); max-width: 24ch; }
.ledge p { font-size: 1.05rem; }
.ledge .after a {
  font: 400 1.02rem var(--display); border-bottom: 1px solid var(--brand); color: var(--brand);
}
.ledge .after a:hover { background: var(--brand); color: var(--paper); }

/* --- spec sheet --- */
.spec dt { font: italic 400 .95rem var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.spec dd { font: 400 1rem var(--display); font-variant-numeric: lining-nums; }

/* --- side rail, tags, buttons: square, printed --- */
.side { border-radius: 0; background: var(--surface); border-color: var(--line); }
.side h4 { font: italic 400 .98rem var(--display); letter-spacing: 0; text-transform: none; color: var(--brand); }
.tag {
  border-radius: 0; font: italic 400 .86rem var(--display); letter-spacing: 0;
  text-transform: none; padding: .1rem .45rem;
}
.btn {
  border-radius: 0; font-family: var(--sans); font-weight: 500; box-shadow: none;
  letter-spacing: 0; text-transform: none;
}
.btn:hover { box-shadow: none; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.btn-brand:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.card, .slot, .note, .machine, .tier { border-radius: 0; box-shadow: none; }
.card-hover:hover { box-shadow: none; border-color: var(--ink); }
.note { border-left: 3px solid var(--brand); background: var(--surface); }
.slot { background: var(--surface); border: 1px dashed var(--line-2); }
.count, .bar .count { font: italic 400 .95rem var(--display); letter-spacing: 0; text-transform: none; }

/* --- footer: a colophon --- */
.foot { background: var(--ink); color: var(--paper); border-top: 0; }
.foot .mark .m1 { color: var(--paper) !important; }
.foot h4 { font: italic 400 .98rem var(--display); letter-spacing: 0; text-transform: none; color: var(--brand-soft); opacity: .8; }
.foot a { color: #D6D2C8; font-family: var(--display); font-size: .98rem; }
.foot a:hover { color: var(--paper); }
.foot-end { font: italic 400 .9rem var(--display); letter-spacing: 0; text-transform: none; color: #9A958B; }
.foot .rail { color: #9A958B; }

/* --- pricing tiers as a rate card --- */
.tier { border: 1px solid var(--line-2); background: var(--paper-2); }
.tier.pick { border: 3px solid var(--ink); }
.tier .nm { font: 600 1.3rem var(--display); letter-spacing: -.01em; text-transform: none; }
.tier .amt { font: 600 3rem var(--display); font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.tier .per { font: italic 400 .95rem var(--display); letter-spacing: 0; text-transform: none; }
.tier ul { font-family: var(--display); }

/* --- steps as a numbered schedule --- */
.step h3 { font-family: var(--display); font-weight: 600; }
.step p { font-family: var(--display); }


/* ============================================================
   CONTRAST CORRECTIONS
   Footer text sits on ink, so it needs rules that outrank the
   light-background defaults set earlier in this file. Audited
   against WCAG AA (4.5:1 body, 3:1 large).
   ============================================================ */
.foot, .foot p, .foot span, .foot li { color: #DAD6CC; }
.foot li a, .foot a, .foot-cols a { color: #DAD6CC; font-family: var(--display); font-size: .98rem; }
.foot li a:hover, .foot a:hover { color: #FFFFFF; text-decoration: underline; }
.foot h4 { color: #E8A9A2; opacity: 1; }
.foot .rail, .foot .rail b, .foot-end, .foot .sm, .foot .muted { color: #B6B1A6; }
.foot .rail b { color: #DAD6CC; font-style: normal; }
.foot .mark .m2 { color: #E8A9A2; opacity: 1; }

/* separators are punctuation, but they still have to be legible */
.orient .sep, .row .meta .sep, .rail .sep { color: var(--muted); }

.crumb span { color: var(--muted); }
.crumb a { color: var(--ink-2); }
.crumb a:hover { color: var(--brand); }


/* ============================================================
   MASTHEAD AND COLOPHON — fixed plate, both colour schemes
   ============================================================ */
.top { background: var(--mast); color: var(--mast-ink); }
.top a, .top-act a { color: var(--mast-ink); }
.top-act a:hover { background: #2A2D33; }
.top-act .cta, .top-act .cta:hover { color: var(--mast-ink); }
.mark .m1 { color: var(--mast-ink); }
.mark .m2 { color: var(--mast-accent); opacity: 1; }
.find select { background: #2A2D33; color: var(--mast-ink); border-color: var(--mast-ink); }
.find input { background: var(--mast-ink); color: var(--mast); border-color: var(--mast-ink); }
.find input::placeholder { color: #6E6A62; }
.find button { color: var(--mast-ink); }
.skip { background: var(--mast); color: var(--mast-ink); }

.foot { background: var(--mast); color: var(--mast-ink); }
.foot, .foot p, .foot span, .foot li { color: var(--mast-ink-2); }
.foot a, .foot li a, .foot-cols a { color: var(--mast-ink-2); }
.foot a:hover, .foot li a:hover { color: var(--mast-ink); }
.foot h4, .foot .mark .m2 { color: var(--mast-accent); opacity: 1; }
.foot .mark .m1 { color: var(--mast-ink) !important; }
.foot .rail, .foot-end, .foot .sm, .foot .muted { color: #A7A295; }
.foot .rail b { color: var(--mast-ink-2); }

.top-act .cta { background: var(--mast-brand); border-color: var(--mast-brand); color: var(--mast-ink); }
.top-act .cta:hover { background: #6B1310; border-color: #6B1310; color: var(--mast-ink); }
.find button { background: var(--mast-brand); border-color: var(--mast-brand); color: var(--mast-ink); }
.find button:hover { background: #6B1310; border-color: #6B1310; }

/* ============================================================
   PLATES, BANDS AND DEPTH
   The first pass was all text at one density — correct for a
   reference work, wrong for a shop. Catalogues sell with
   plates: goods reproduced large on white stock, against the
   newsprint page. Depth comes from figure/ground and full-bleed
   bands rather than shadow, because printed matter has none.
   ============================================================ */

/* --- a plate: the goods, reproduced large --- */
.plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1000px) { .plates { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .plates { grid-template-columns: repeat(2, 1fr); } }
.plates.p3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .plates.p3 { grid-template-columns: repeat(2, 1fr); } }

.plate { background: var(--paper-2); padding: 0; display: flex; flex-direction: column; position: relative; }
.plate .fig {
  aspect-ratio: 4 / 3; background: #fff; display: grid; place-items: center;
  overflow: hidden; border-bottom: 1px solid var(--line);
}
.plate .fig img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .25s ease; }
.plate:hover .fig img { transform: scale(1.045); }
.plate .cap { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.plate .cap .t { font: 600 .98rem/1.28 var(--display); letter-spacing: -.01em; color: var(--ink); }
.plate:hover .cap .t { color: var(--brand); }
.plate .cap .m { font: 400 .76rem var(--sans); color: var(--muted); }
.plate .cap .p {
  font: 600 1.02rem var(--display); font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink); margin-top: auto; padding-top: 6px;
}
.plate .no {
  position: absolute; top: 0; left: 0; z-index: 2;
  font: 400 .72rem var(--sans); font-variant-numeric: lining-nums tabular-nums;
  background: var(--ink); color: var(--paper); padding: .15rem .4rem;
}

/* --- full-bleed bands: break the column, change the ground --- */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.bleed-ink   { background: var(--mast); color: var(--mast-ink); padding: 44px 0; }
.bleed-ink h2, .bleed-ink h3 { color: var(--mast-ink); }
.bleed-ink p { color: var(--mast-ink-2); }
.bleed-ink a { color: var(--mast-accent); border-bottom-color: var(--mast-accent) !important; }
.bleed-red   { background: var(--mast-brand); color: #F7F6F1; padding: 40px 0; }  /* fixed plate: must not invert */
.bleed-red h2, .bleed-red h3 { color: #F7F6F1; }
.bleed-red p { color: #F0DCDA; }
.bleed-red a { color: #fff; border-bottom: 1px solid #fff; }
.bleed-red a:hover { background: #fff; color: var(--mast-brand); }
.bleed-tint  { background: var(--surface); padding: 38px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bleed-green { background: var(--ink2-soft); padding: 38px 0; border-top: 1px solid var(--ink2); border-bottom: 1px solid var(--ink2); }

/* --- mosaic: fills the dead column beside a brand's description --- */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); align-self: start; }
.mosaic a { aspect-ratio: 1; background: #fff; display: grid; place-items: center; overflow: hidden; }
.mosaic img { width: 100%; height: 100%; object-fit: contain; padding: 9px; transition: transform .25s ease; }
.mosaic a:hover img { transform: scale(1.05); }
.mosaic a:first-child { grid-column: span 2; aspect-ratio: 2 / 1.08; }

/* --- the brand sheet head: description left, goods right --- */
.sheet-top { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: start; padding: 34px 0 30px; }
@media (max-width: 900px) { .sheet-top { grid-template-columns: 1fr; gap: 26px; } }

/* --- figures row: key numbers, set large, on the second plate --- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 760px) { .figures { grid-template-columns: repeat(2, 1fr); } }
.figure { background: var(--paper); padding: 17px 18px; }
.figure .v {
  display: block; font: 600 1.75rem/1 var(--display); letter-spacing: -.025em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ink2);
}
.figure .k { display: block; font: italic 400 .92rem var(--display); color: var(--muted); margin-top: .3rem; }

/* --- view switch: grid of plates, or the price list --- */
.views { display: inline-flex; border: 1px solid var(--line-2); margin-left: auto; }
.views button {
  font: 400 .9rem var(--display); background: var(--paper); color: var(--ink-2);
  border: 0; padding: .3rem .7rem; cursor: pointer;
}
.views button + button { border-left: 1px solid var(--line-2); }
.views button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
[hidden] { display: none !important; }

/* --- a pull quote / standing claim, set large --- */
.claim {
  font: 400 clamp(1.3rem, 2.6vw, 1.95rem)/1.3 var(--display);
  letter-spacing: -.015em; max-width: 30ch; margin: 0 0 .8rem;
}
.claim em { font-style: italic; color: var(--brand); }
.bleed-ink .claim em { color: var(--mast-accent); }
.bleed-red .claim em { color: #fff; font-style: italic; }

/* ---- questions: each answer standing on its own, for voice and for quoting ---- */
.faq .qa { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq .qa:first-child { border-top: 3px solid var(--ink); box-shadow: 0 2px 0 -1px var(--ink); }
.faq .qa h2 { font-size: 1.22rem; margin: 0 0 .45rem; letter-spacing: -.012em; }
.faq .qa p { margin: 0; color: var(--ink-2); font-size: 1.02rem; max-width: 66ch; }

/* ---- journal ---- */
.jlist { border-top: 3px solid var(--ink); box-shadow: 0 2px 0 -1px var(--ink); }
.jrow { padding: 22px 0; border-bottom: 1px solid var(--line); }
.jrow h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: .1rem 0 .4rem; letter-spacing: -.015em; }
.jrow p { margin: 0 0 .4rem; color: var(--ink-2); max-width: 64ch; }
.post { max-width: 68ch; }
.post h2 { font-size: 1.5rem; }
.post h3 { font-size: 1.14rem; }
.post p { font-size: 1.06rem; line-height: 1.68; }
.post ul { padding-left: 1.1rem; }
.post li { margin-bottom: .5rem; font-size: 1.04rem; line-height: 1.6; }
.post hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0 24px; }
.post .figures, .post .register, .post .index-list { max-width: none; }