/* ============================================================================
   HYDROPARK — "the agent gym"
   Aesthetic: an equipment room. Cold graphite, chalk, one sulphur-yellow.
   Knurled steel, stencil numerals, tape labels. Restrained colour: chalk means
   fine, sulphur means careful, rust means no.
   ========================================================================= */

/* ---------- 1. Tokens --------------------------------------------------- */
:root{
  --iron:#15181A;
  --iron-2:#1B1F22;
  --iron-3:#232A2E;
  --steel:#39424A;
  --steel-2:#4B565E;

  --chalk:#E9EBE4;
  --chalk-2:#98A09B;
  --chalk-3:#6D7671;

  --sulphur:#F0C21B;
  --sulphur-dim:#A8870E;
  --sulphur-ink:#7A6100;      /* AA on the chalk slab */

  --rust:#C4491F;
  --rust-ink:#E8734A;         /* AA on iron */

  --display:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --body:"Chivo",ui-sans-serif,system-ui,sans-serif;
  --mono:"Martian Mono","DM Mono",ui-monospace,monospace;

  --gut:clamp(1.15rem,3.6vw,3rem);
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--iron);
  color:var(--chalk);
  font-family:var(--body);
  font-size:clamp(1rem,.4vw + .93rem,1.1rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* not `hidden`: `hidden` would break position:sticky */
}

::selection{ background:var(--sulphur); color:var(--iron) }

:focus-visible{ outline:2px solid var(--sulphur); outline-offset:3px; border-radius:2px }

/* Fine diagonal knurl over everything */
.knurl{
  position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.017) 0 1px, transparent 1px 4px);
}

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--sulphur); color:var(--iron); padding:.7rem 1rem;
  font-family:var(--mono); font-size:.75rem }
.skip:focus{ left:1rem; top:1rem }

/* ---------- 2. Type ----------------------------------------------------- */
h1,.h2,h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.86;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(3rem,9.4vw,9rem) }
h1 span{ display:block }
h1 em,.h2 em{ font-style:normal; color:var(--sulphur) }
.h2{ font-size:clamp(2rem,4.6vw,3.6rem) }

.stencil{
  font-family:var(--display);
  font-variation-settings:"wdth" 70,"wght" 900;
  font-size:clamp(3.4rem,7vw,6.4rem); line-height:.8; margin:0;
  color:transparent; -webkit-text-stroke:1.4px var(--sulphur-dim);
  letter-spacing:.02em; user-select:none;
}
.stencil--dim{ -webkit-text-stroke-color:var(--steel-2) }
.stencil--ink{ -webkit-text-stroke-color:var(--sulphur-ink) }

.tape{
  display:inline-block; margin:0 0 clamp(1.4rem,3vw,2.4rem);
  background:var(--sulphur); color:var(--iron);
  font-family:var(--mono); font-size:.63rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.42rem .9rem; transform:rotate(-.7deg);
  box-shadow:2px 3px 0 rgba(0,0,0,.5);
}

.sub{ color:var(--chalk-2); max-width:56ch; margin:1.1rem 0 0; font-size:1.02rem }
.sub--wide{ max-width:70ch }
.sub--ink{ color:#4A524D }

.lede{ font-size:clamp(1.06rem,.5vw + .98rem,1.28rem); color:var(--chalk-2);
  max-width:56ch; margin:0 }
.lede strong{ color:var(--chalk); font-weight:600 }

code{ font-family:var(--mono); font-size:.82em; color:var(--sulphur);
  background:rgba(240,194,27,.09); padding:.05em .3em; border-radius:2px }

/* ---------- 3. Buttons & links ------------------------------------------ */
.btn{
  --pad:.85rem 1.4rem;
  font-family:var(--mono); font-weight:600; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--sulphur); color:var(--iron);
  border:0; border-radius:2px; padding:var(--pad); cursor:pointer;
  box-shadow:0 3px 0 var(--sulphur-dim);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.btn:hover{ background:#FFD535; transform:translateY(-1px); box-shadow:0 4px 0 var(--sulphur-dim) }
.btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--sulphur-dim) }
.btn:disabled{ background:var(--iron-3); color:var(--chalk-3); box-shadow:0 3px 0 #12181A;
  cursor:not-allowed; transform:none }
.btn--sm{ --pad:.6rem 1rem; font-size:.66rem }
.btn--lg{ --pad:1rem 1.8rem; font-size:.84rem }
.btn--xl{ --pad:1.2rem 2.4rem; font-size:.94rem }
.btn--ink{ background:var(--iron); color:var(--chalk); box-shadow:0 3px 0 #9AA096 }
.btn--ink:hover{ background:#242A2E }

.lnk{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--chalk-2); text-decoration:none; border-bottom:1px solid var(--steel);
  padding-bottom:3px; transition:.2s; background:none; border-left:0; border-right:0; border-top:0;
  cursor:pointer;
}
.lnk:hover{ color:var(--sulphur); border-color:var(--sulphur) }
.lnk--arrow:hover{ letter-spacing:.11em }

/* ---------- 4. Masthead -------------------------------------------------- */
.bar-top{
  position:sticky; top:0; z-index:80;
  background:rgba(21,24,26,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--iron-3);
}
.bar-top__in{ max-width:1440px; margin:0 auto; padding:.6rem var(--gut);
  display:flex; align-items:center; gap:1.2rem }
.mark{ display:flex; align-items:center; gap:.55rem; color:var(--sulphur);
  text-decoration:none; font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.01em }
.mark span{ color:var(--chalk) }
.mark svg{ width:22px; height:22px }
.bar-top__tag{ margin:0; flex:1; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--chalk-3) }
.bar-top__cta{ display:flex; align-items:center; gap:1.2rem }
@media (max-width:720px){ .bar-top__tag,.bar-top__cta .lnk{ display:none } }

/* ---------- 5. Section shell --------------------------------------------- */
section{ padding-inline:var(--gut); position:relative }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero{ padding-block:clamp(3rem,8vw,6.5rem) clamp(2.5rem,6vw,5rem) }
.hero__in{ max-width:1440px; margin:0 auto }
.hero h1{ margin-bottom:clamp(1.8rem,4vw,3rem) }
.hero h1 span:last-child{ padding-left:clamp(0px,7vw,9rem) }

.hero__body{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,4rem); align-items:end;
  border-top:1px solid var(--iron-3); padding-top:clamp(1.5rem,3vw,2.4rem) }
@media (max-width:860px){ .hero__body{ grid-template-columns:minmax(0,1fr); align-items:start } }
.hero__acts{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap }

/* These 1px-gap-over-background grids must fill every cell exactly: an empty
   cell would expose the grid's own background as a pale block. */
.hero__stats{ margin:clamp(2.2rem,5vw,3.6rem) 0 0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--iron-3); border:1px solid var(--iron-3) }
.hero__stats div{ background:var(--iron); padding:1rem 1.1rem }
@media (max-width:820px){ .hero__stats{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.hero__stats dt{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--chalk-3) }
.hero__stats dd{ margin:.35rem 0 0; font-family:var(--display);
  font-variation-settings:"wdth" 105,"wght" 700; text-transform:uppercase;
  font-size:1.05rem; line-height:1.05; color:var(--chalk) }

/* ---------- 7. The correction -------------------------------------------- */
.correction{ padding-block:clamp(3.5rem,8vw,6.5rem); border-top:1px solid var(--iron-3);
  background:linear-gradient(180deg,var(--iron-2),var(--iron)) }
.correction__in{ max-width:1440px; margin:0 auto; display:grid;
  grid-template-columns:auto minmax(0,1fr); gap:clamp(1.5rem,5vw,5rem) }
@media (max-width:760px){ .correction__in{ grid-template-columns:minmax(0,1fr) } }
.correction p{ color:var(--chalk-2); max-width:60ch }
.correction p:first-of-type{ margin-top:1.6rem }
.correction em{ font-style:italic; color:var(--chalk) }

/* ---------- 8. THE RACK --------------------------------------------------- */
.rack{ padding-block:clamp(3.5rem,8vw,6rem); border-top:1px solid var(--iron-3) }
.rack__head{ max-width:1440px; margin:0 auto clamp(2rem,4vw,3.2rem);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1.2rem,3vw,3rem); align-items:start }
@media (max-width:1080px){
  .rack__head{ grid-template-columns:auto minmax(0,1fr) }
  .rack__bench{ grid-column:1 / -1 }
}
@media (max-width:620px){ .rack__head{ grid-template-columns:minmax(0,1fr) } }

/* bench (hardware tier) selector */
.rack__bench{ display:flex; align-items:stretch; gap:0; border:1px solid var(--steel);
  border-radius:3px; overflow:hidden; align-self:start }
.bench__label{ font-family:var(--mono); font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--chalk-3); background:var(--iron-2);
  display:grid; place-items:center; padding:0 .8rem; border-right:1px solid var(--steel) }
.bench__opt{ background:var(--iron-2); border:0; border-right:1px solid var(--iron-3);
  padding:.6rem .9rem; cursor:pointer; text-align:left; color:var(--chalk-2);
  transition:background .2s, color .2s }
.bench__opt:last-child{ border-right:0 }
.bench__opt b{ display:block; font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 700; font-size:.92rem; text-transform:uppercase }
.bench__opt i{ display:block; font-style:normal; font-family:var(--mono);
  font-size:.55rem; letter-spacing:.06em; color:var(--chalk-3); margin-top:.1rem }
.bench__opt:hover{ background:var(--iron-3) }
.bench__opt.is-on{ background:var(--sulphur); color:var(--iron) }
.bench__opt.is-on i{ color:#5C4A08 }
@media (max-width:620px){ .bench__label{ display:none } .rack__bench{ width:100% } .bench__opt{ flex:1 } }

.rack__grid{ max-width:1440px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(1.2rem,2.6vw,2.6rem);
  align-items:start }
@media (max-width:1000px){ .rack__grid{ grid-template-columns:minmax(0,1fr) } }

/* ── plates ── */
.plates__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1rem }
.plates h3,.bench h4,.rules h3{ font-size:1rem;
  font-variation-settings:"wdth" 105,"wght" 700; letter-spacing:.04em }
.plates__presets{ margin:0; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-3);
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap }
.preset{ font:inherit; background:none; border:1px dashed var(--steel); color:var(--chalk-2);
  border-radius:99px; padding:.22rem .6rem; cursor:pointer; transition:.2s }
.preset:hover{ border-color:var(--sulphur); color:var(--sulphur); border-style:solid }

.plates__list{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.6rem }

.plate{
  width:100%; height:100%; text-align:left; cursor:pointer;
  background:var(--iron-2); border:1px solid var(--iron-3); border-left:3px solid var(--steel);
  border-radius:2px; padding:.75rem .85rem; color:inherit; font:inherit;
  display:grid; gap:.3rem; align-content:start;
  transition:border-color .18s, background .18s, transform .12s var(--ease);
}
.plate:hover{ background:var(--iron-3); border-left-color:var(--chalk-2) }
.plate[aria-pressed="true"]{ border-left-color:var(--sulphur); background:#1F2528;
  border-color:var(--sulphur-dim) }
.plate.is-lead{ box-shadow:inset 0 0 0 1px var(--sulphur-dim) }
.plate.is-refused{ animation:refuse .4s var(--ease) }
@keyframes refuse{ 0%,100%{ transform:none } 20%{ transform:translateX(-5px) }
  40%{ transform:translateX(5px) } 60%{ transform:translateX(-3px) } 80%{ transform:translateX(3px) } }

.plate__price{ font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.1em;
  color:var(--sulphur); justify-self:start }
.plate__price--free{ color:var(--chalk-3) }
.plate__name{ font-family:var(--display); font-variation-settings:"wdth" 104,"wght" 700;
  text-transform:uppercase; font-size:1rem; line-height:1.02; letter-spacing:.01em }
.plate__blurb{ font-size:.8rem; line-height:1.45; color:var(--chalk-2) }
.plate__meta{ display:flex; gap:.7rem; margin-top:.15rem; font-family:var(--mono);
  font-size:.55rem; letter-spacing:.06em; color:var(--chalk-3) }
.plate__meta i{ font-style:normal }
.plate[aria-pressed="true"] .plate__name{ color:var(--sulphur) }

/* the "LEAD" flag */
.plate.is-lead .plate__price::after{
  content:"· lead"; color:var(--chalk); margin-left:.35rem;
}

/* ── bench: bar + readouts ── */
.bench{ display:grid; gap:1rem; align-content:start }
@media (min-width:1001px){ .bench{ position:sticky; top:76px } }

.bench__bar{ background:var(--iron-2); border:1px solid var(--iron-3); border-radius:3px;
  padding:.6rem .6rem .2rem }
.bench__bar svg{ display:block; width:100%; height:auto }
.bench__lead{ margin:0; padding:.5rem .3rem .4rem; text-align:center;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--chalk-3); display:flex; align-items:center; justify-content:center; gap:.5rem;
  flex-wrap:wrap }
.bench__lead b{ color:var(--sulphur); font-weight:600 }
.bench__lead select{
  font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sulphur);
  background-color:var(--iron); border:1px solid var(--steel); border-radius:2px;
  padding:.25rem 1.5rem .25rem .5rem; cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--sulphur) 50%),
                   linear-gradient(135deg,var(--sulphur) 50%,transparent 50%);
  background-position:calc(100% - 13px) 56%, calc(100% - 9px) 56%;
  background-size:4px 4px; background-repeat:no-repeat;
}
.bench__lead select:hover{ border-color:var(--sulphur) }

.alert{ margin:0; padding:.65rem .8rem; border-radius:2px;
  font-family:var(--mono); font-size:.66rem; line-height:1.5; letter-spacing:.04em;
  background:rgba(196,73,31,.13); border:1px solid var(--rust); color:var(--rust-ink) }
.alert:empty{ display:none }
.alert[data-kind="warn"]{ background:rgba(240,194,27,.1); border-color:var(--sulphur-dim);
  color:var(--sulphur) }

/* gauge */
.gauge{ background:var(--iron-2); border:1px solid var(--iron-3); border-radius:3px;
  padding:.85rem .9rem }
.gauge__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.gauge__title{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--chalk-2) }
.gauge__val{ font-family:var(--mono); font-size:.68rem; color:var(--chalk-3);
  font-variant-numeric:tabular-nums }
.gauge__val b{ color:var(--chalk); font-weight:600 }
.gauge__track{ height:8px; margin:.6rem 0 .55rem; background:var(--iron);
  border:1px solid var(--iron-3); border-radius:99px; overflow:hidden }
.gauge__fill{ display:block; height:100%; width:0; background:var(--chalk);
  transition:width .45s var(--ease-out), background .3s }
.gauge__foot{ margin:0; font-size:.72rem; line-height:1.5; color:var(--chalk-3) }

[data-verdict="sluggish"] .gauge__fill{ background:var(--sulphur) }
[data-verdict="blocked"] .gauge__fill{ background:var(--rust) }

/* readout */
.readout{ margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px;
  background:var(--iron-3); border:1px solid var(--iron-3) }
.readout div{ background:var(--iron-2); padding:.6rem .55rem; min-width:0 }
.readout dt{ font-family:var(--mono); font-size:.52rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--chalk-3); white-space:nowrap }
.readout dd{ margin:.3rem 0 0; font-family:var(--mono); font-size:.82rem; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--chalk) }
.readout dd.v-ready{ color:var(--chalk) }
.readout dd.v-sluggish{ color:var(--sulphur) }
.readout dd.v-blocked{ color:var(--rust-ink) }
/* Five cells never divide evenly below five columns — let the verdict, which
   matters most, take the whole first row. */
@media (max-width:900px){
  .readout{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .readout div:first-child{ grid-column:1 / -1 }
}

/* wires + panels */
.wires,.panelchips{ background:var(--iron-2); border:1px solid var(--iron-3);
  border-radius:3px; padding:.8rem .9rem }
.wires h4,.panelchips h4{ margin:0 0 .6rem; font-family:var(--mono); font-weight:500;
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--chalk-3) }
.panelchips h4 span{ color:var(--sulphur-dim); letter-spacing:.06em }
.wires ul,.panelchips ul{ list-style:none; margin:0; padding:0; display:flex;
  flex-wrap:wrap; gap:.4rem }
.wires li{ display:flex; align-items:baseline; gap:.5rem; width:100%; flex-wrap:wrap;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.02em; color:var(--chalk-3);
  padding:.35rem 0; border-bottom:1px dotted var(--iron-3) }
.wires li:last-child{ border-bottom:0 }
.wires b{ color:var(--sulphur); font-weight:500; flex-shrink:0;
  border-right:1px solid var(--iron-3); padding-right:.5rem }
.wires li span:not(.arrow){ color:var(--chalk-2) }
.wires .arrow{ color:var(--steel-2) }
.panelchips li{ font-family:var(--mono); font-size:.58rem; letter-spacing:.04em;
  color:var(--chalk-2); border:1px solid var(--iron-3); background:var(--iron);
  border-radius:99px; padding:.2rem .55rem }

/* assembled prompt */
.assembled{ background:var(--iron-2); border:1px solid var(--iron-3); border-radius:3px }
.assembled summary{ cursor:pointer; list-style:none; padding:.8rem .9rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--chalk-2); display:flex; align-items:center; justify-content:space-between }
.assembled summary::-webkit-details-marker{ display:none }
.assembled summary::after{ content:"+"; color:var(--sulphur); font-size:1rem; line-height:1 }
.assembled[open] summary::after{ content:"–" }
.assembled summary:hover{ color:var(--sulphur) }
.assembled pre{ margin:0; padding:0 .9rem; font-family:var(--mono); font-size:.62rem;
  line-height:1.7; color:var(--chalk-2); white-space:pre-wrap; word-break:break-word }
.assembled pre b{ color:var(--chalk); font-weight:600 }
.assembled pre .dim{ color:var(--chalk-3) }
.assembled pre .key{ color:var(--sulphur) }
.assembled__foot{ margin:.9rem 0 0; padding:.7rem .9rem; border-top:1px solid var(--iron-3);
  font-size:.74rem; line-height:1.5; color:var(--chalk-3) }

/* basket */
.basket{ background:var(--iron-2); border:1px solid var(--sulphur-dim); border-radius:3px;
  padding:.9rem }
.basket__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.basket__label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--chalk-2) }
.basket__price{ font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 800;
  font-size:1.8rem; line-height:1; color:var(--sulphur) }
.basket__price s{ color:var(--chalk-3); font-size:.6em; margin-right:.4rem;
  text-decoration-thickness:1px }
.basket__note{ margin:.5rem 0 .9rem; font-size:.76rem; line-height:1.5; color:var(--chalk-3) }
.basket__acts{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap }

.noscript{ max-width:1440px; margin:1.5rem auto 0; padding:.9rem;
  border:1px dashed var(--steel); color:var(--chalk-2); font-size:.85rem }

/* ---------- 9. Routines --------------------------------------------------- */
.routines{ padding-block:clamp(3.5rem,8vw,6.5rem); border-top:1px solid var(--iron-3);
  background:linear-gradient(180deg,var(--iron),var(--iron-2)) }
.routines__in{ max-width:1440px; margin:0 auto; display:grid;
  grid-template-columns:auto minmax(0,1fr); gap:clamp(1.5rem,5vw,5rem) }
@media (max-width:760px){ .routines__in{ grid-template-columns:minmax(0,1fr) } }
.routine-cards{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:.7rem }
.routine-cards li{ background:var(--iron); border:1px solid var(--iron-3);
  border-top:2px solid var(--sulphur-dim); border-radius:2px; padding:1rem }
.routine-cards h4{ margin:0 0 .4rem; font-family:var(--display);
  font-variation-settings:"wdth" 104,"wght" 700; text-transform:uppercase; font-size:1.05rem }
.routine-cards p{ margin:0 0 .8rem; font-size:.8rem; line-height:1.5; color:var(--chalk-2) }
.routine-cards__slot{ font-family:var(--mono); font-size:.56rem; letter-spacing:.08em;
  color:var(--sulphur); background:rgba(240,194,27,.09); padding:.15rem .45rem; border-radius:2px }
.routines__foot{ margin:1.6rem 0 0; font-size:.82rem; color:var(--chalk-3); max-width:60ch }

/* ---------- 10. House rules ----------------------------------------------- */
.rules{ padding-block:clamp(3.5rem,8vw,6.5rem); border-top:1px solid var(--iron-3) }
.rules__in{ max-width:1440px; margin:0 auto }
.rules .stencil{ margin-bottom:1.2rem }
/* Exactly three columns: six rules fill two rows with no empty cell, which would
   otherwise show the grid's own background as a pale block. */
.rules__list{ list-style:none; counter-reset:r; margin:clamp(2rem,4vw,3.2rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--iron-3); border:1px solid var(--iron-3) }
@media (max-width:940px){ .rules__list{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .rules__list{ grid-template-columns:minmax(0,1fr) } }
.rules__list li{ counter-increment:r; background:var(--iron); padding:1.4rem 1.3rem;
  position:relative; transition:background .25s }
.rules__list li:hover{ background:var(--iron-2) }
.rules__list li::before{ content:counter(r,decimal-leading-zero);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; color:var(--sulphur-dim) }
.rules__list h3{ margin:.6rem 0 .5rem; font-size:1.02rem; line-height:1.05;
  font-variation-settings:"wdth" 104,"wght" 700 }
.rules__list p{ margin:0; font-size:.85rem; line-height:1.55; color:var(--chalk-2) }

/* ---------- 11. The floor -------------------------------------------------- */
.floor{
  padding-block:clamp(4rem,9vw,7rem); border-top:1px solid var(--iron-3);
  background:
    radial-gradient(80% 60% at 80% 0%,rgba(240,194,27,.06),transparent 65%),
    #101315;
}
.floor__in{ max-width:1440px; margin:0 auto }
.floor__h{ margin:1.2rem 0 2rem }
.floor__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,32ch),1fr));
  gap:clamp(1.5rem,4vw,4rem); max-width:100ch }
.floor__cols p{ margin:0; color:var(--chalk-2) }
.floor__ticks{ list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:1.1rem 0 0;
  border-top:1px solid var(--iron-3); display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--chalk-3) }
.floor__ticks li{ display:flex; align-items:center; gap:.5rem }
.floor__ticks li::before{ content:"■"; color:var(--sulphur); font-size:.5rem; letter-spacing:0 }

/* ---------- 12. Membership (light slab) ------------------------------------ */
.membership{ background:var(--chalk); color:var(--iron);
  padding-block:clamp(4rem,9vw,7rem) }
.membership__in{ max-width:1440px; margin:0 auto }
.h2--ink{ color:var(--iron); margin:1.2rem 0 0 }
.membership .sub{ margin-bottom:clamp(2rem,4vw,3.2rem) }

.tiers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:#C9CCC4; border:1px solid #C9CCC4 }
@media (max-width:900px){ .tiers{ grid-template-columns:minmax(0,1fr) } }
.tier{ background:var(--chalk); padding:1.6rem 1.4rem; display:flex; flex-direction:column;
  align-items:flex-start; gap:.5rem }
.tier--feature{ background:#F4F5F0; position:relative }
.tier h3{ margin:.3rem 0 0; font-size:1.05rem; color:var(--iron) }
/* body copy first, then the price — `.tier p` would otherwise outrank a bare
   `.tier__price` class and shrink the numeral to paragraph size. */
.tier p{ margin:0; font-size:.86rem; line-height:1.55; color:#4A524D; flex:1 }
.tier .tier__price{ margin:0; flex:none; font-family:var(--display);
  font-variation-settings:"wdth" 110,"wght" 900; font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:.85; color:var(--iron) }
.tier--feature .tier__price{ color:var(--sulphur-ink) }
.tier .btn{ margin-top:.6rem }
.tier__badge{ font-family:var(--mono); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sulphur-ink);
  border:1px solid var(--sulphur-ink); border-radius:99px; padding:.2rem .55rem; margin-top:.6rem }
.membership__fine{ margin:2.2rem 0 0; max-width:80ch; font-size:.8rem; line-height:1.7;
  color:#5A625C }

/* ---------- 13. FAQ --------------------------------------------------------- */
.faq{ padding-block:clamp(3.5rem,8vw,6.5rem) }
.faq__in{ max-width:1440px; margin:0 auto }
.faq .h2{ margin:1.2rem 0 clamp(2rem,4vw,3rem) }
.faq__list{ max-width:88ch }
.faq details{ border-top:1px solid var(--iron-3) }
.faq details:last-child{ border-bottom:1px solid var(--iron-3) }
.faq summary{ cursor:pointer; list-style:none; padding:1.2rem 2.6rem 1.2rem 0; position:relative;
  font-family:var(--display); font-variation-settings:"wdth" 106,"wght" 700;
  text-transform:uppercase; font-size:clamp(1rem,1.8vw,1.4rem); line-height:1.08;
  transition:color .2s }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--sulphur) }
.faq summary::after{ content:""; position:absolute; right:.3rem; top:50%; width:14px; height:14px;
  transform:translateY(-50%);
  background:linear-gradient(var(--sulphur),var(--sulphur)) center/100% 2px no-repeat,
             linear-gradient(var(--sulphur),var(--sulphur)) center/2px 100% no-repeat;
  transition:transform .3s var(--ease-out) }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg) }
.faq details p{ margin:0 0 1.5rem; max-width:70ch; color:var(--chalk-2); font-size:.95rem }

/* ---------- 14. Closer + footer --------------------------------------------- */
.closer{ text-align:center; padding-block:clamp(3.5rem,8vw,6rem);
  border-top:1px solid var(--iron-3); background:var(--iron-2) }
.closer__kicker{ margin:0 0 1.8rem; font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800; text-transform:uppercase;
  font-size:clamp(1.3rem,3.4vw,2.4rem); line-height:1 }
.closer__sub{ margin:1.3rem 0 0; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-3) }

.foot{ background:#0F1213; padding-block:clamp(2.5rem,5vw,3.5rem); padding-inline:var(--gut) }
.foot__in{ max-width:1440px; margin:0 auto; display:grid; gap:1rem }
.foot__mark{ margin:0; font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800; text-transform:uppercase;
  font-size:1.1rem; color:var(--chalk) }
.foot__fine{ margin:0; max-width:86ch; font-size:.76rem; line-height:1.7; color:var(--chalk-3) }
.foot__links{ margin:0; display:flex; gap:.7rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.64rem }
.foot__links a{ color:var(--chalk-2); text-decoration:none; border-bottom:1px solid var(--steel) }
.foot__links a:hover{ color:var(--sulphur); border-color:var(--sulphur) }
.foot__links span{ color:var(--steel) }

/* ---------- 15. Reveal ------------------------------------------------------- */
.rv{ opacity:0; transform:translateY(14px) }
.js .rv{ animation:rvIn .75s var(--ease-out) both; animation-delay:var(--d,0ms) }
@keyframes rvIn{ to{ opacity:1; transform:none } }

.reveal{ opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
.reveal.is-in{ opacity:1; transform:none }

/* ---------- 16. No JS / reduced motion --------------------------------------- */
html:not(.js) .rack__bench,
html:not(.js) .bench,
html:not(.js) .plates__presets{ display:none }
html:not(.js) .rack__grid{ grid-template-columns:minmax(0,1fr) }
html:not(.js) .plate{ cursor:default }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv,.reveal{ opacity:1; transform:none }
}