/* ============================================================
   lab.css — the logo lab.
   Every mark is drawn from exactly three variables: f-bg, f-ink,
   f-hot. Change those and all eight repaint, which is the only
   honest way to compare them.
   ============================================================ */
:root{ --lab-bg:var(--stock); --lab-ink:var(--ink); --lab-hot:#E5261F }
[data-ground="white"]{ --lab-bg:#fff }
[data-ground="black"]{ --lab-bg:#100F0D; --lab-ink:#FBFAF7 }
[data-ground="spot"] { --lab-bg:var(--lab-hot); --lab-ink:#100F0D }
/* one plate: the spot ink collapses into the black */
[data-plates="one"]{ --lab-hot:var(--lab-ink) }

body{ background:var(--stock) }
.labbar{
  position:sticky; top:0; z-index:100; display:flex; flex-wrap:wrap; gap:.6rem 1rem;
  align-items:center; padding:.6rem clamp(.9rem,3vw,2.4rem);
  background:var(--stock); border-bottom:6px solid var(--ink);
}
.labbar__home{ font-family:var(--mono); font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase }
.labbar__ctl{ display:flex; align-items:center; gap:.32rem; flex-wrap:wrap; margin-left:auto }
.chip{
  font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:.4rem .6rem;
  border:2px solid var(--ink); background:var(--stock); color:var(--ink);
}
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--stock) }
.chip i{ display:block; width:15px; height:11px; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.3) }
.chip[data-ink][aria-pressed="true"]{ outline:3px solid var(--ink); outline-offset:2px }

.labintro{
  font-family:var(--wonk); font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 14;
  font-size:1.02rem; line-height:1.45; max-width:64ch;
  padding:clamp(1.2rem,3vw,2.2rem) clamp(.9rem,3vw,2.4rem) 0;
}
.lots{
  display:grid; gap:clamp(1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  padding:clamp(1.2rem,3vw,2.4rem);
}
.lot{ border:3px solid var(--ink); background:var(--stock); display:flex; flex-direction:column }
.lot__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  padding:.45rem .6rem; border-bottom:3px solid var(--ink);
}
.lot__stage{
  background:var(--lab-bg); padding:clamp(1rem,3vw,2.2rem); display:grid; place-items:center;
  min-height:230px; cursor:zoom-in; transition:background .12s steps(1);
}
.lot__stage .mk{ width:100%; max-width:300px; height:auto }
.lot__foot{ padding:.7rem .75rem .85rem; border-top:3px solid var(--ink); margin-top:auto }
.lot__note{ font-size:.78rem; line-height:1.45; max-width:46ch }
.lot__sizes{ display:flex; align-items:flex-end; gap:.7rem; margin-top:.7rem; background:var(--lab-bg); padding:.5rem .6rem }
.sz{ display:block } .sz .mk{ height:auto }
.sz--64 .mk{ width:64px } .sz--32 .mk{ width:32px } .sz--16 .mk{ width:16px }

/* the three drawing variables every mark reads */
.mk .f-bg{ fill:var(--lab-bg) } .mk .f-ink{ fill:var(--lab-ink) } .mk .f-hot{ fill:var(--lab-hot) }
.mk [stroke-width]{ stroke:currentColor }
.mk .f-ink[fill="none"], .mk .f-ink[stroke-width]{ stroke:var(--lab-ink) }
.mk .f-hot[fill="none"], .mk .f-hot[stroke-width]{ stroke:var(--lab-hot) }
.mk .f-bg[stroke-width]{ stroke:var(--lab-bg) }
.mk .f-perf{ stroke:var(--lab-bg) }
.mk-t{ font-family:var(--bungee); font-size:22px; letter-spacing:.02em }
.mk-b{ font-family:var(--bungee); font-size:30px; letter-spacing:.01em }
.mk-s{ font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.18em }
.mk-v{ font-family:var(--bungee); font-size:46px }
/* the seal's own classes, re-pointed at the lab variables */
.mk .rk-body{ fill:var(--lab-ink) } .mk .rk-eye{ fill:var(--lab-bg) }
.mk .rk-tail-cut{ fill:none; stroke:var(--lab-bg); stroke-width:13; stroke-linecap:round }
.mk .rk-tail-ink{ fill:none; stroke:var(--lab-ink); stroke-width:6; stroke-linecap:round }
.mk .rk-ring{ fill:none; stroke:var(--lab-ink); stroke-width:7 }
.mk .rk-ring--thin{ stroke-width:2.5 }
.mk .rk-crown,.mk .rk-eyecentre{ fill:var(--lab-hot) }
.mk .k-cut{ fill:none; stroke:var(--lab-bg); stroke-width:15; stroke-linecap:round }
.mk .k-ink{ fill:none; stroke:var(--lab-ink); stroke-width:7; stroke-linecap:round }

/* misregistration: the second plate lands a hair off, as it does on a real press */
[data-misreg="on"] .mk .f-hot,
[data-misreg="on"] .mk .rk-crown,
[data-misreg="on"] .mk .rk-eyecentre{ transform:translate(1.6px,-1.2px) }
[data-misreg="on"] .lot__stage .mk .f-hot{ transform:translate(2.6px,-2px) }

/* isolate */
.lot[data-solo="true"]{ position:fixed; inset:clamp(1rem,4vw,3rem); z-index:500; box-shadow:0 0 0 100vmax rgba(16,15,13,.82) }
.lot[data-solo="true"] .lot__stage{ min-height:0; flex:1; cursor:zoom-out }
.lot[data-solo="true"] .lot__stage .mk{ max-width:min(70vh,560px) }
.labfoot{ padding:2rem clamp(.9rem,3vw,2.4rem) 4rem; border-top:6px solid var(--ink) }
@media (max-width:700px){ .labbar__ctl{ margin-left:0; width:100% } }