/* Parlwane — a broadsheet terms board. Bone slips struck with a red stamp on near-black newsprint. */
:root{
  --ground:#0C0B0A; --ink:#EFE9DC; --paper:#EFE9DC; --paper-ink:#141210;
  --stamp:#E03131; --stamp-deep:#A81E1E;
  --rule:#2A2724; --quiet:#8E867B; --quieter:#5E574E;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --grot:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gap:14px; --measure:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink); font-family:var(--grot);
  font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%;
  background-image:radial-gradient(rgba(255,255,255,.028) 1px, transparent 1.1px);
  background-size:4px 4px;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}

/* ---------- masthead: the buy stamp lives here and never leaves the screen ---------- */
.masthead{
  position:sticky; top:0; z-index:40;
  background:var(--ground);
  border-bottom:3px solid var(--ink);
  box-shadow:0 10px 24px rgba(0,0,0,.55);
}
.masthead::before{content:"";display:block;height:6px;background:var(--ink);border-bottom:3px solid var(--ground)}
.mastrow{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  max-width:var(--measure); margin:0 auto; padding:8px 14px 6px;
}
.nameplate{display:flex;align-items:center;gap:9px;min-width:0}
.nameplate img{width:30px;height:30px;border-radius:5px;flex:0 0 auto}
.nameplate span{
  font-family:var(--serif); font-weight:900; font-size:27px; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stamp{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--grot); font-weight:700; font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--paper); background:var(--stamp);
  border:2px solid var(--stamp); border-radius:999px;
  padding:9px 16px; white-space:nowrap; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(224,49,49,.55);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.stamp:active{transform:translateY(1px) rotate(-.6deg)}
.stamp.cold{background:transparent;color:var(--stamp);border-style:dashed}
.stamp[aria-disabled="true"]{opacity:.62;cursor:default}
.folio{
  display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none;
  max-width:var(--measure); margin:0 auto; padding:0 10px 7px;
  border-top:1px solid var(--rule);
}
.folio::-webkit-scrollbar{display:none}
.folio a,.hand{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--quiet);
  padding:7px 7px; border-bottom:2px solid transparent; white-space:nowrap;
}
.folio a.on{color:var(--ink);border-bottom-color:var(--stamp)}
.hand{margin-left:auto;color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:6px 11px;flex:0 0 auto}
.hand.on{border-color:var(--stamp);color:var(--stamp)}

/* ---------- the press: deck of terms + the gutter beside it ---------- */
.press{
  display:grid; grid-template-columns:1fr; grid-template-areas:"lede" "gutter" "deck";
  gap:var(--gap); max-width:var(--measure); margin:0 auto; padding:14px 12px 40px;
}
.lede{grid-area:lede;min-width:0}
.deck{grid-area:deck;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.gutter{grid-area:gutter;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}

/* ---------- slabs: the instruments ---------- */
.slab{border:1px solid var(--rule);background:#131110;padding:14px}
.slab.loud{border-color:var(--ink);border-width:2px}
.kicker{
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--quiet);
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
}
.bignum{
  font-family:var(--grot); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(46px,13vw,66px); line-height:.94; letter-spacing:-.035em; margin:6px 0 2px;
}
.bignum small{font-size:.31em;letter-spacing:.1em;color:var(--quiet);font-weight:600;margin-left:8px}
.bignum.stamped{color:var(--stamp)}
.bleedrail{height:9px;background:#221E1B;border:1px solid var(--rule);overflow:hidden;margin:10px 0 9px}
.bleedrail span{display:block;height:100%;background:var(--stamp);transition:width .7s linear}
.facts{display:flex;flex-wrap:wrap;gap:0 16px;font-size:13px;color:var(--quiet)}
.facts b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.headline{font-family:var(--serif);font-weight:900;font-size:clamp(28px,7.4vw,40px);line-height:1.02;letter-spacing:-.025em;margin:0 0 8px}
.standfirst{font-size:15px;color:var(--quiet);margin:0}
.crossing{
  margin-top:11px;padding-top:11px;border-top:1px dashed var(--rule);
  font-size:13px;color:var(--quiet);
}
.crossing b{color:var(--stamp);font-weight:700}

/* ---------- the term cards: clipped bone slips ---------- */
.stackhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 2px}
.stackhead h2{font-family:var(--serif);font-weight:900;font-size:22px;margin:0;letter-spacing:-.02em}
.stackhead em{font-style:normal;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--quiet)}
.termcard{
  position:relative; background:var(--paper); color:var(--paper-ink);
  padding:14px 15px 15px; border:1px solid #000;
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"fig split" "rule rule" "tally act";
  column-gap:14px; row-gap:9px; align-items:end;
}
.termcard::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;
  background:repeating-linear-gradient(90deg,var(--paper) 0 7px,transparent 7px 10px);
}
.termcard.leading{border:2px solid var(--stamp);box-shadow:5px 5px 0 var(--stamp-deep)}
.termcard.taken{opacity:.58}
.termcard .fig{grid-area:fig;display:flex;align-items:baseline;gap:2px}
.termcard .fig b{
  font-family:var(--grot);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(52px,15vw,74px);line-height:.82;letter-spacing:-.05em;
}
.termcard .fig i{font-style:normal;font-weight:700;font-size:20px;color:var(--stamp)}
.termcard .split{grid-area:split;font-size:13px;line-height:1.45;white-space:nowrap}
.termcard .split em{font-style:normal;font-size:10px;letter-spacing:.09em;color:#6A625A}
.termcard .split b{font-variant-numeric:tabular-nums}
.termcard .split .by{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#6A625A;margin-bottom:4px}
.quorumrule{grid-area:rule;height:12px;border:1px solid var(--paper-ink);background:transparent;overflow:hidden}
.quorumrule span{display:block;height:100%;background:var(--stamp);transition:width .4s ease}
.termcard .tally{grid-area:tally;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#4E4740;align-self:center}
.termcard .tally b{color:var(--paper-ink)}
.termcard .act{grid-area:act;justify-self:end}
.termcard .act .stamp{font-size:12px;padding:8px 15px}
.termcard .act .stamp.done{background:var(--paper-ink);border-color:var(--paper-ink)}
.wonflag{
  position:absolute;top:-11px;right:10px;background:var(--stamp);color:var(--paper);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:3px 9px;transform:rotate(-2deg);
}

/* ---------- the ruler: how a term gets filed ---------- */
.filing{border:2px solid var(--ink);background:#131110;padding:14px}
.rulerhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rulerhead .cutnow{font-family:var(--grot);font-weight:700;font-size:44px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.rulerhead .cutnow i{font-style:normal;color:var(--stamp);font-size:20px}
.ruler{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;margin:6px 0 2px;
}
.ruler::-webkit-slider-runnable-track{height:14px;background:linear-gradient(90deg,var(--stamp) var(--fill,20%),#221E1B var(--fill,20%));border:1px solid var(--rule)}
.ruler::-moz-range-track{height:14px;background:linear-gradient(90deg,var(--stamp) var(--fill,20%),#221E1B var(--fill,20%));border:1px solid var(--rule)}
.ruler::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:34px;background:var(--paper);border:1px solid #000;margin-top:-11px}
.ruler::-moz-range-thumb{width:16px;height:34px;background:var(--paper);border:1px solid #000;border-radius:0}
.ticks{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;color:var(--quieter);margin-bottom:9px}
.ticks span.line{color:var(--stamp);font-weight:700}
.preview{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--quiet);margin-bottom:11px}
.preview b{display:block;color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums;font-weight:600}
.act-row{display:flex;gap:8px;flex-wrap:wrap}
.act-row .stamp{flex:1 1 auto}

/* ---------- tape, tables, empties ---------- */
.tape{display:flex;flex-direction:column}
.tape .row{
  display:flex;gap:9px;align-items:baseline;padding:7px 0;border-bottom:1px dotted var(--rule);
  font-size:13px;color:var(--quiet);
}
.tape .row:last-child{border-bottom:0}
.tape .row b{color:var(--ink);font-weight:600}
.tape .row .when{margin-left:auto;font-size:11px;color:var(--quieter);white-space:nowrap}
.dot{width:7px;height:7px;background:var(--quieter);flex:0 0 auto;transform:translateY(-1px)}
.dot.sign,.dot.close{background:var(--stamp)}
.sheetlist{width:100%;border-collapse:collapse;font-size:13px}
.sheetlist th{text-align:left;white-space:nowrap;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);font-weight:600;padding:0 8px 7px 0;border-bottom:1px solid var(--rule)}
.sheetlist td{padding:9px 10px 9px 0;border-bottom:1px dotted var(--rule);font-variant-numeric:tabular-nums;white-space:nowrap}
.sheetlist td.w{font-family:var(--grot);color:var(--quiet)}
.sheetlist tr:last-child td{border-bottom:0}
.wrapscroll{overflow-x:auto}
.empty{
  border:1px dashed var(--rule);padding:22px 16px;text-align:center;color:var(--quiet);font-size:14px;
}
.empty b{display:block;font-family:var(--serif);font-weight:900;font-size:21px;color:var(--ink);margin-bottom:6px;letter-spacing:-.02em}
.primer{font-size:13px;color:var(--quiet);line-height:1.6}
.primer li{margin-bottom:6px}
.primer ol{padding-left:18px;margin:8px 0 0}
.copy h3{font-family:var(--serif);font-weight:900;font-size:20px;margin:16px 0 4px;letter-spacing:-.02em}
.copy h3:first-child{margin-top:0}
.copy p{margin:0;color:var(--quiet);font-size:14px}
.addr{font-size:12px;word-break:break-all;color:var(--quiet)}
.addr a{color:var(--ink);border-bottom:1px solid var(--rule)}

/* ---------- colophon ---------- */
.colophon{border-top:3px solid var(--ink);max-width:var(--measure);margin:0 auto;padding:16px 14px 46px}
.strap{font-family:var(--serif);font-weight:700;font-size:17px;margin:0 0 10px}
.imprint{display:grid;grid-template-columns:1fr;gap:6px;margin:0 0 12px;font-size:12px}
.imprint div{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.imprint dt{color:var(--quieter);letter-spacing:.11em;text-transform:uppercase;font-size:10px;min-width:86px}
.imprint dd{margin:0;word-break:break-all;color:var(--quiet)}
.imprint dd a{color:var(--ink)}
.smallprint{font-size:11px;color:var(--quieter);margin:0;line-height:1.6}

/* ---------- slip-over sheet ---------- */
.slip{position:fixed;inset:0;background:rgba(6,5,4,.8);display:flex;align-items:flex-end;justify-content:center;z-index:60;padding:0}
.slip[hidden]{display:none}
.slipcard{background:var(--paper);color:var(--paper-ink);width:100%;max-width:460px;padding:16px;border-top:5px solid var(--stamp)}
.sliphead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sliphead h3{font-family:var(--serif);font-weight:900;margin:0;font-size:19px}
.sliphead button{font-size:26px;line-height:1;color:var(--paper-ink)}
.wl{display:flex;flex-direction:column;gap:7px}
.wl button{display:flex;align-items:center;gap:10px;border:1px solid var(--paper-ink);padding:10px 12px;width:100%;text-align:left;font-weight:600}
.wl img{width:22px;height:22px}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:80;
  background:var(--paper);color:var(--paper-ink);padding:10px 16px;font-size:13px;font-weight:600;
  border-left:5px solid var(--stamp);box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:92vw;
}

/* ---------- wider than a phone ---------- */
@media (min-width:560px){
  .imprint{grid-template-columns:1fr 1fr}
  .termcard{grid-template-areas:"fig split" "rule rule" "tally act"}
}
@media (min-width:720px){
  body{font-size:16px}
  .press{padding:20px 20px 52px;--gap:18px}
  .slab,.filing{padding:18px}
  .termcard{padding:18px 20px 20px}
  .headline{font-size:clamp(34px,5vw,44px)}
  .colophon{padding:22px 20px 56px}
}
@media (min-width:1000px){
  .press{
    grid-template-columns:minmax(0,1.32fr) minmax(330px,.88fr);
    grid-template-areas:"lede lede" "deck gutter";
    align-items:start; padding:26px 24px 64px; --gap:22px;
  }
  .gutter{position:sticky;top:104px}
  .bignum{font-size:56px}
  .termcard .fig b{font-size:84px}
  .stackhead h2{font-size:26px}
  .headline{font-size:46px}
  .mastrow{padding:10px 24px 8px}
  .folio{padding:0 20px 8px}
  .nameplate span{font-size:31px}
  .stamp{font-size:13px;padding:10px 20px}
  .imprint{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:400px){
  .nameplate span{font-size:23px}
  .stamp{padding:8px 12px;font-size:12px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}