/* MICROBOARD — one stylesheet.
   Palette: sampled off award winners in DEVELOPER & SAAS TOOLS (EXHIBITA,
   design-brief.md 2026-10-28) — clay #D4C6B9, brick #D14836, steel #2779A7,
   ochre #ECD06F, near-black #0C0B11, on warm paper #F4EDE6.
   Layout rules: compact masthead, tight padding, packed grids (his rulings
   2026-10-15 / 10-16). No screen-filling hero. */

:root {
  --paper: #F4EDE6;
  --card: #F2EFE7;
  --clay: #D4C6B9;
  --line: #D9CCBF;
  --ink: #0C0B11;
  --ink-2: #4A433C;
  --brick: #D14836;
  --brick-ink: #AE3524;   /* same hue, darkened to clear 4.5:1 on paper for small text */
  --steel: #2779A7;
  --ochre: #ECD06F;
  --sage: #7A8B69;
  --shadow: 0 1px 0 rgba(12,11,17,.06);
  --r: 3px;
  --maxw: 1360px;
  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C0B11;
    --card: #17151A;
    --clay: #2C2824;
    --line: #322D2A;
    --ink: #F4EDE6;
    --ink-2: #B9AFA5;
    --brick: #F06A56;
    --brick-ink: #F8897A;
    --steel: #5FAEDC;
    --ochre: #ECD06F;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --paper: #0C0B11; --card: #17151A; --clay: #2C2824; --line: #322D2A;
  --ink: #F4EDE6; --ink-2: #B9AFA5; --brick: #F06A56; --brick-ink: #F8897A; --steel: #5FAEDC; --shadow: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  font-synthesis-weight: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.14; letter-spacing: -.012em; }
p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap.vpad { padding-top: 15px; padding-bottom: 36px; }
.wrap.vpad-tight { padding-bottom: 8px; }
.wrap.vpad-tall { padding-top: 34px; padding-bottom: 52px; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ------------------------------------------------------------- header ---- */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 18px; height: 54px; }
.mark {
  font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: .1em;
  text-decoration: none; white-space: nowrap;
}
.mark b { color: var(--brick-ink); }
.nav { display: flex; gap: 16px; margin-left: 4px; flex: 1; min-width: 0; }
.nav a {
  font-size: 14.5px; text-decoration: none; color: var(--ink-2); white-space: nowrap;
  padding: 3px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--brick); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.hdr-meta { color: var(--ink-2); white-space: nowrap; }
.btn {
  display: inline-block; font: 600 14.5px/1 var(--sans); text-decoration: none;
  padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--brick-ink); border-color: var(--brick-ink); color: #fff; }
.btn-2 { background: transparent; color: var(--ink); }
.btn-2:hover { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.burger { display: none; }

/* --------------------------------------------------------------- rail ---- */
/* Real material first: a strip of creators across the top of the page. */
.rail { border-bottom: 1px solid var(--line); background: var(--card); }
.rail-in {
  display: flex; gap: 10px; overflow-x: auto; padding: 10px 20px;
  max-width: var(--maxw); margin: 0 auto; scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.rcard {
  flex: 0 0 198px; scroll-snap-align: start; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  display: grid; grid-template-columns: 56px 1fr; gap: 9px; padding: 8px; align-items: center;
}
.rcard:hover { border-color: var(--brick); }
.rcard .ph { width: 56px; height: 56px; }
.rcard b { display: block; font-size: 13.5px; font-weight: 600; }
.rcard span { display: block; color: var(--ink-2); font-size: 11.5px; font-family: var(--mono); }
.rcard em { display: block; font-style: normal; font-size: 12.5px; color: var(--brick-ink); font-weight: 600; }

/* portrait slot — collapses to a monogram tile when the render is absent */
.ph {
  border-radius: 2px; overflow: hidden; background: var(--clay); flex: none;
  display: grid; place-items: center; position: relative;
}
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.ph i {
  font-style: normal; font-family: var(--mono); font-weight: 600; color: var(--ink);
  font-size: .9em; letter-spacing: .04em; opacity: .62;
}
.ph[data-n="1"] { background: var(--clay); }
.ph[data-n="2"] { background: var(--ochre); }
.ph[data-n="3"] { background: #BFD2DD; }
.ph[data-n="4"] { background: var(--sage); }
.ph[data-n="5"] { background: #E8B9AF; }
.ph[data-n="6"] { background: #CFC6AE; }


/* ---------------------------------------------------------------- wire --- */
.wire { border-bottom: 1px solid var(--line); background: var(--card); padding: 11px 0 14px; }
.wire-hd { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; }
.wire-hd p { color: var(--ink-2); margin: 0; }
.rss {
  margin-left: auto; font: 600 11.5px/1 var(--mono); letter-spacing: .08em;
  text-decoration: none; color: var(--brick-ink); border: 1px solid var(--line);
  border-radius: 2px; padding: 5px 8px;
}
.rss:hover { border-color: var(--brick-ink); }
.wire-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wcard {
  text-decoration: none; display: grid; gap: 0; align-content: start;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  overflow: hidden;
}
.wcard:hover { border-color: var(--brick); }
.wcard .wimg { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
.wcard .wtxt { padding: 9px 11px 11px; }
.wcard .wmeta { color: var(--ink-2); margin: 0 0 3px; }
.wcard .wmeta b { color: var(--brick-ink); font-weight: 600; letter-spacing: .06em; }
.wcard h3 { font-size: 16px; line-height: 1.2; margin-bottom: 4px; }
.wcard p { font-size: 13.5px; color: var(--ink-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wire-grid.rest .wcard p { -webkit-line-clamp: 3; }
/* the lead item runs across two columns with its picture beside the text */
.wcard.lead { grid-column: span 2; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.wcard.lead .wimg { height: 100%; aspect-ratio: auto; min-height: 100%; }
.wcard.lead .wtxt { padding: 12px 14px; align-self: center; }
.wcard.lead h3 { font-size: 20px; }
.wcard.lead p { -webkit-line-clamp: 3; font-size: 14.5px; }
.wire-grid.rest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wire-grid.rest .wimg { aspect-ratio: 16 / 9; }
@media (max-width: 1080px) {
  .wire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcard.lead { grid-column: span 2; }
  .wire-grid.rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* the top wire swipes sideways so the board is still a short scroll away */
  .wire-grid:not(.rest) {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px;
  }
  .wire-grid:not(.rest)::-webkit-scrollbar { display: none; }
  .wire-grid:not(.rest) .wcard { flex: 0 0 82vw; scroll-snap-align: start; }
  .wire-grid.rest { grid-template-columns: minmax(0, 1fr); }
  .wcard.lead { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .wcard.lead .wimg { aspect-ratio: 16 / 9; min-height: 0; }
  .wcard p { -webkit-line-clamp: 3; }
}

/* ----------------------------------------------------------- masthead ---- */
.mast { padding: 16px 0 12px; border-bottom: 1px solid var(--line); }
.mast .kick { color: var(--ink-2); text-transform: none; }
.mast h1 { font-size: clamp(25px, 2.7vw, 36px); max-width: 34ch; margin: 5px 0 7px; }
.mast .lede { font-size: 16.5px; color: var(--ink-2); max-width: 66ch; }
.mast-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.mast-side { display: flex; gap: 8px; align-items: center; }

/* ------------------------------------------------------------ filters ---- */
.filters {
  position: sticky; top: 54px; z-index: 30; background: var(--paper);
  border-bottom: 1px solid var(--line); padding: 9px 0;
}
.filters-in { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-width: 0; }
.chip {
  font: 500 13px/1 var(--sans); padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 99px; background: var(--card); cursor: pointer; color: var(--ink-2);
}
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fsep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }
.filters label { font: 500 13px/1 var(--sans); color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.filters select, .filters input[type="search"] {
  font: 400 13.5px/1 var(--sans); padding: 7px 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--card); color: var(--ink);
}
.filters input[type="search"] { width: 148px; }
.fcount { margin-left: auto; color: var(--ink-2); }

/* -------------------------------------------------------------- board ---- */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 22px; padding: 16px 0 36px; align-items: start; }
.rows { display: grid; gap: 8px; }
.row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) 182px;
  gap: 14px; padding: 11px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  box-shadow: var(--shadow);
}
.row:hover, .row.hot { border-color: var(--brick); }
.row .ph { width: 112px; height: 112px; }
.row h3 { font-size: 17.5px; }
.row h3 a { text-decoration: none; }
.row h3 a:hover { color: var(--brick-ink); }
.row .meta { color: var(--ink-2); margin: 2px 0 5px; }
.row .meta b { color: var(--ink); font-weight: 500; }
.row .lede { font-size: 14.5px; color: var(--ink-2); }
.row .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tag {
  font-family: var(--mono); font-size: 11.5px; padding: 2px 6px; border-radius: 2px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-2);
}
.tag.on { border-color: var(--steel); color: var(--steel); }
.rate { text-align: right; display: grid; gap: 4px; justify-items: end; }
.rate .big { font: 600 20px/1 var(--sans); }
.rate .big s { text-decoration: none; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.rate .open { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.rate .open b { color: var(--ink); font-weight: 600; }
.ratelist { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); line-height: 1.45; text-align: right; }


/* ------------------------------------------------------- niches + est --- */
.ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.ncard {
  text-decoration: none; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); overflow: hidden; display: block; box-shadow: var(--shadow);
}
.ncard:hover { border-color: var(--brick); }
.ncard .nimg { width: 100%; aspect-ratio: 1 / 1; border-radius: 0; }
.ncard .ntxt { padding: 10px 12px 12px; }
.ncard h3 { font-size: 18px; }
.ncard .nrate { color: var(--brick-ink); font-weight: 600; margin: 2px 0 5px; }
.ncard p { font-size: 14px; color: var(--ink-2); margin: 0; }
.ncard .nfor { color: var(--ink-2); margin-top: 6px; font-size: 11.5px; }

.panel.est h2 { background: var(--brick-ink); }
.erow { display: grid; gap: 7px; margin-bottom: 10px; }
.erow label { display: grid; gap: 3px; font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); }
.erow select {
  font: 400 14px/1.2 var(--sans); padding: 8px 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--ink); width: 100%;
}
.panel.est .sums { font-size: 13px; }
.panel.est .sums .tot { font-size: 16px; }

/* the two extra plates at the foot of a niche page */
.plates { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.plates .plate { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r); }
.plates:empty { display: none; }

@media (max-width: 1080px) {
  .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ngrid { grid-template-columns: minmax(0, 1fr); }
  .plates { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- panel ---- */
.panel {
  position: sticky; top: 108px; border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--card); overflow: hidden;
}
.panel h2 { font-size: 15px; padding: 10px 12px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-weight: 600; letter-spacing: .06em; }
.panel .body { padding: 11px 12px; }
.panel .empty { color: var(--ink-2); font-size: 14px; }
.pl { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.pl li { display: grid; grid-template-columns: 1fr auto auto; gap: 7px; align-items: center; font-size: 13.5px; border-bottom: 1px dotted var(--line); padding-bottom: 5px; }
.pl .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl select { font: 400 12px/1 var(--mono); padding: 3px 2px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 2px; }
.pl .x { border: 0; background: none; cursor: pointer; color: var(--ink-2); font-size: 15px; line-height: 1; padding: 0 2px; }
.pl .x:hover { color: var(--brick); }
.sums { font-family: var(--mono); font-size: 12.5px; display: grid; gap: 3px; margin-bottom: 9px; }
.sums div { display: flex; justify-content: space-between; gap: 10px; }
.sums .tot { border-top: 1px solid var(--line); padding-top: 5px; font-size: 15px; font-weight: 600; }
.sums .tot span:last-child { color: var(--brick-ink); }
.panel .note { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.panel .acts { display: grid; gap: 6px; }

/* ------------------------------------------------------------ sections -- */
section { padding: 26px 0; border-top: 1px solid var(--line); }
section > .wrap > h2, .h2 { font-size: clamp(21px, 2.2vw, 27px); margin-bottom: 4px; }
.sublede { color: var(--ink-2); max-width: 70ch; margin-bottom: 14px; font-size: 15.5px; }
.grid { display: grid; gap: 10px; }
.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)); }
.card {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  padding: 12px; box-shadow: var(--shadow);
}
.card h3 { font-size: 16.5px; margin-bottom: 4px; }
.card p { font-size: 14.5px; color: var(--ink-2); }
.card.link { text-decoration: none; display: block; }
.card.link:hover { border-color: var(--brick); }

/* numbered steps — tight, no empty bands */
.steps { counter-reset: s; display: grid; gap: 8px; }
.steps li { list-style: none; display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: start; }
.steps li::before {
  counter-increment: s; content: counter(s); font: 600 13px/28px var(--mono);
  text-align: center; width: 28px; height: 28px; border-radius: 99px;
  background: var(--ochre); color: #0C0B11;
}
.steps h3 { font-size: 16px; }
.steps p { font-size: 14.5px; color: var(--ink-2); margin: 1px 0 0; }

/* edge-to-edge band illustrating one real placement */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); }
.band-in { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 24px; align-items: center; padding: 0; }
.band .ph { width: 100%; aspect-ratio: 16 / 9; max-height: 300px; border-radius: 0; }
.band .txt { padding: 22px 20px 22px 0; }
.band blockquote { margin: 0 0 8px; font-size: clamp(17px, 2vw, 22px); line-height: 1.3; font-weight: 500; }
.band cite { font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* tables — rates, glossary */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
caption { text-align: left; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); padding-bottom: 6px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 12.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-2); background: var(--card); }
td.num { font-family: var(--mono); white-space: nowrap; font-weight: 600; }
tbody tr:hover { background: var(--card); }
dl.gloss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin: 0; }
dl.gloss > div { border-bottom: 1px solid var(--line); padding-bottom: 9px; }
dl.gloss dt { font-weight: 600; font-size: 15px; }
dl.gloss dd { margin: 2px 0 0; color: var(--ink-2); font-size: 14.5px; }

details.faq { border-bottom: 1px solid var(--line); padding: 9px 0; }
details.faq summary { font-weight: 600; cursor: pointer; font-size: 15.5px; }
details.faq p { margin-top: 5px; color: var(--ink-2); font-size: 14.5px; max-width: 76ch; }

/* ----------------------------------------------------- creator / page --- */
.page-head { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; padding: 18px 0 14px; border-bottom: 1px solid var(--line); align-items: start; }
.page-head .ph { width: 236px; height: 236px; }
.page-head h1 { font-size: clamp(25px, 3vw, 36px); }
.page-head .kick { color: var(--ink-2); }
.page-head .lede { font-size: 17px; margin: 7px 0 9px; max-width: 60ch; }
.page-head .facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.page-head .facts b { color: var(--ink); font-weight: 600; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 22px; align-items: start; padding: 16px 0 36px; }
.prose { font-size: 15.5px; max-width: 72ch; }
.prose h2 { font-size: 20px; margin: 18px 0 6px; }
.prose ul { margin: 0 0 8px; padding-left: 20px; color: var(--ink-2); }

/* forms */
form.std { display: grid; gap: 10px; max-width: 640px; }
form.std label { display: grid; gap: 4px; font: 500 14px/1.3 var(--sans); }
form.std input, form.std select, form.std textarea {
  font: 400 15px/1.4 var(--sans); padding: 9px 10px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--card); color: var(--ink); width: 100%;
}
form.std textarea { min-height: 104px; resize: vertical; }
form.std .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
form.std .hint { font-size: 13px; color: var(--ink-2); font-weight: 400; }

/* footer */
.ftr { border-top: 1px solid var(--line); background: var(--card); padding: 20px 0 26px; font-size: 14px; }
.ftr-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ftr h4 { font: 600 12.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--ink-2); margin-bottom: 6px; }
.ftr a { display: block; color: var(--ink-2); text-decoration: none; padding: 2px 0; }
.ftr a:hover { color: var(--brick-ink); }
.ftr .fine { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; color: var(--ink-2); font-size: 13px; max-width: 92ch; }

.demo {
  background: var(--ochre); color: #0C0B11; font-family: var(--mono); font-size: 12.5px;
  padding: 6px 20px; text-align: center;
}
.demo b { font-weight: 600; }

/* motion — narrates, never decorates (EXHIBITA: animation on 53% of winners) */
@media (prefers-reduced-motion: no-preference) {
  .row, .rcard, .card { transition: border-color .16s ease, transform .16s ease; }
  .row:hover, .rcard:hover { transform: translateY(-1px); }
  .rows .row { animation: in .34s both ease-out; }
  .rows .row:nth-child(n+9) { animation: none; }
  @keyframes in { from { opacity: 0; transform: translateY(6px); } }
  .sums .tot span:last-child { transition: color .2s; }
  .flash { animation: fl .5s ease-out; }
  @keyframes fl { 0% { background: var(--ochre); } 100% { background: var(--card); } }
}

/* ------------------------------------------------------------- phone ---- */
@media (max-width: 1080px) {
  .board, .two { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; }
  /* the estimator is the hook — it goes above the cards once they stack */
  .panel.est { order: -1; margin-bottom: 4px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mast-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .mast-side { justify-content: flex-start; }
  .ftr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-in { grid-template-columns: minmax(0, 1fr); }
  .band .txt { padding: 16px 20px 20px; }
  dl.gloss { grid-template-columns: minmax(0, 1fr); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 14px; }
  .rail-in { padding: 9px 14px; }
  .hdr-in { height: 50px; gap: 10px; }
  .hdr-meta, .nav { display: none; }
  .nav.open {
    display: grid; position: absolute; left: 0; right: 0; top: 50px; background: var(--paper);
    border-bottom: 1px solid var(--line); padding: 8px 14px 12px; gap: 0; margin: 0;
  }
  .nav.open a { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .burger { display: inline-block; margin-left: auto; }
  .filters { top: 50px; }
  .filters-in { gap: 6px; }
  .chiprow {
    flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px; -webkit-overflow-scrolling: touch;
  }
  .chiprow::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .fsep { display: none; }
  .filters input[type="search"] { width: 100%; }
  .row { grid-template-columns: 86px minmax(0, 1fr); }
  .row .ph { width: 86px; height: 86px; }
  .rate { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .ratelist { text-align: left; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .page-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .page-head .ph { width: 164px; height: 164px; }
  form.std .row2 { grid-template-columns: minmax(0, 1fr); }
  .ftr-in { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .hdr, .rail, .filters, .panel, .ftr, .demo { display: none; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------- verified creator rows ----
   A listing is four facts and a link out. No portrait: the photographs on this
   site are generated, and these are real people who have not been asked. */
.crew-sec { border-top: 1px solid var(--line); padding: 20px 0 6px; }
.crew-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 22px;
  margin-bottom: 11px;
}
/* Heading, price and the niche's paragraph on the left; the strip on the right,
   so the band is one block of content rather than a row with air under it. */
.crew-head-t { flex: 1 1 420px; min-width: 0; }
.crew-head-t > :first-child, .crew-head-t > .mono, .crew-head-t > p:nth-child(3) {
  display: inline; margin-right: 14px;
}
.crew-head-t h2 { display: inline; }
.crew-head h2 { font-size: 21px; }
.crew-head p { font-size: 13.5px; margin: 0; }
.crew {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(282px, 1fr));
}
.crow {
  display: grid; gap: 2px 10px; text-decoration: none; color: inherit;
  grid-template-columns: minmax(0, 1fr);
  background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 3px; padding: 11px 13px 12px;
}
/* Handle and count share a line when they fit and drop apart when they do not,
   so a long handle is never broken across two lines mid-word. */
.ctop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px;
        text-decoration: none; color: inherit; }
.ctop:hover .chandle { text-decoration: underline; }

/* The creator's own profile picture, framed live from instagram.com.
   Instagram's profile embed lays out at a fixed width and puts the avatar at a
   known 88x88 box at (24, 35), so the frame is cropped to exactly that and
   scaled to the avatar size. Nothing of theirs is copied onto our server, and
   it goes dark the moment they want it to. */
.cav {
  position: relative; width: 96px; height: 96px; flex: none;
  overflow: hidden; border-radius: 50%; background: var(--clay);
  border: 1px solid var(--line);
}
.cembed {
  position: absolute; top: 0; left: 0; width: 1100px; height: 220px; border: 0;
  transform: scale(1.0909) translate(-24px, -35px); transform-origin: top left;
  color-scheme: light; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.cav.is-on .cembed { opacity: 1; }
/* The lettered tile sits under the frame the whole time, so a slot is never
   empty while Instagram is thinking, and never empty if it never answers. */
.cav i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-style: normal; font-family: var(--mono); font-weight: 600;
  font-size: 27px; letter-spacing: .04em; color: var(--ink); opacity: .55;
}
.cav[data-n="1"] { background: var(--clay); }
.cav[data-n="2"] { background: var(--ochre); }
.cav[data-n="3"] { background: #BFD2DD; }
.cav[data-n="4"] { background: var(--sage, #8A9A7B); }
.cav[data-n="5"] { background: #E8B9AF; }
.cav[data-n="6"] { background: #CFC6AE; }
.chead { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; }
.ctop { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ctop .cnum { margin-left: 0; }.crow:hover { border-color: var(--brick); }
.crow { overflow: hidden; }
.chandle { font-family: var(--mono); font-size: 14.5px; font-weight: 600; color: var(--brick-ink); }
.cnum { font-family: var(--mono); font-size: 14.5px; white-space: nowrap; margin-left: auto; }
.cnum small { font-size: 11.5px; color: var(--ink-2); }
.cname { font-size: 13.5px; color: var(--ink-2); }
.cwhat { font-size: 14.5px; margin-top: 3px; }
.cnote { font-size: 13.5px; color: var(--ink-2); margin-top: 11px; max-width: 74ch; }
.jump { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.jump a { color: var(--ink-2); }
.page-head.np { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  .crew { grid-template-columns: minmax(0, 1fr); }
}

/* Photography band per niche on the creators index. Scene, not portrait:
   these are generated images and never stand next to a real creator's name. */
/* A compact scrolling strip rather than a wall. The renders stay square so
   nothing is cropped, but they sit at a thumbnail size and scroll sideways
   when they do not fit, instead of pushing the listings down the page. */
.cband {
  display: flex; gap: 6px; margin: 0 0 0 auto; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  padding-bottom: 2px;
}
.cband .cplate {
  flex: 0 0 116px; width: 116px; aspect-ratio: 1 / 1;
  border-radius: var(--r); scroll-snap-align: start;
}
.cband:empty { display: none; }
.cband::-webkit-scrollbar { height: 6px; }
.cband::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
@media (max-width: 720px) {
  .cband { margin-left: 0; }
  .cband .cplate { flex-basis: 104px; width: 104px; }
}

/* band-placement.jpg is the one render that is 16:9, so its page head gets a
   16:9 box rather than the square one the portrait slots use. */
.page-head.wide16 { grid-template-columns: 352px minmax(0, 1fr); }
.page-head .ph.hero16 { width: 352px; height: 198px; }
.page-head .ph.hero16 img { object-position: center center; }
@media (max-width: 860px) {
  .page-head.wide16 { grid-template-columns: minmax(0, 1fr); }
  .page-head .ph.hero16 { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* Creators page: the paragraph under each niche heading, and the two prose
   sections. Thumbnails sit a little larger than a true thumbnail so the
   subject still reads at a glance. */
.cintro { max-width: 72ch; font-size: 15.5px; color: var(--ink-2); margin: 7px 0 0; }
.cband .cplate { flex: 0 0 152px; width: 152px; }
.prose-grid { gap: 10px; margin-top: 4px; }
.pcard {
  background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 3px; padding: 13px 15px 15px;
}
.pcard h3 { font-size: 15.5px; margin-bottom: 5px; }
.pcard p { font-size: 14.5px; color: var(--ink-2); }
section.alt { background: var(--clay); border-top: 1px solid var(--line); }
section.alt .pcard { background: var(--paper); }
@media (max-width: 980px) {
  .prose-grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cband .cplate { flex: 0 0 124px; width: 124px; }
  .prose-grid.g2, .prose-grid.g3 { grid-template-columns: minmax(0, 1fr); }
}

/* More copy per niche means a taller text column, which lets the strip run
   larger without the band growing. */
.cband .cplate { flex: 0 0 220px; width: 220px; }
.cintro + .cintro { margin-top: 9px; }
.rates-t { width: 100%; border-collapse: collapse; margin-top: 6px; }
.rates-t th, .rates-t td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14.5px; }
.rates-t thead th { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--ink-2); }
.rates-t tbody th { font-weight: 600; white-space: nowrap; }
.rates-t tbody th a { text-decoration: none; }
.rates-t tbody th a:hover { text-decoration: underline; }
.rates-t .num { font-family: var(--mono); color: var(--brick-ink); white-space: nowrap; }
.rates-t td:last-child { color: var(--ink-2); }
.faq-l { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.faq-i { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 13px 15px 15px; }
.faq-i h3 { font-size: 15.5px; margin-bottom: 5px; }
.faq-i p { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 1180px) {
  .cband .cplate { flex: 0 0 188px; width: 188px; }
}
@media (max-width: 860px) {
  .faq-l { grid-template-columns: minmax(0, 1fr); }
  .rates-t td:last-child { display: none; }
}
@media (max-width: 720px) {
  .cband .cplate { flex: 0 0 150px; width: 150px; }
}

/* Prices. The point of the site, so they get weight on every listing. */
.cprice { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 14.5px; }
.cprice b { font-family: var(--mono); font-size: 15px; color: var(--brick-ink); font-weight: 600; }
.cprices { font-size: 12.5px; color: var(--ink-2); font-family: var(--mono); margin-top: 3px; line-height: 1.55; }
.csum { margin-top: 10px; font-size: 15px; }
.csum b { font-weight: 600; }
.t-scroll { overflow-x: auto; }
.pricetable { min-width: 760px; }
.pricetable td, .pricetable th { padding: 8px 14px 8px 0; font-size: 14px; }
.pricetable .num { font-family: var(--mono); white-space: nowrap; color: var(--ink-2); }
.pricetable .price-lead { color: var(--brick-ink); font-weight: 600; }
.pricetable tbody th a { color: var(--brick-ink); font-family: var(--mono); font-size: 13.5px; }

/* The macro tier. Bookable, and deliberately not dressed to outrank the
   micro list below it: same card, a band instead of a number. */
.macro .crew { margin-bottom: 14px; }
.mrow .cprice b { font-size: 15.5px; }
.mrow .cname b { color: var(--ink); font-weight: 600; }
.macro-two { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 10px 26px; align-items: start; }
.macro-two .rates-t { margin-top: 0; }
.macro-two .cnote { margin-top: 0; }
@media (max-width: 860px) {
  .macro-two { grid-template-columns: minmax(0, 1fr); }
}