/* ============================================================
   PEGGIN' WITCHES™ — Est. 1659
   Direction: haunted roadside motel office, 2:00 AM.
   Two materials only: NEON TUBE (the sign) and PAPER (the forms).
   Everything else gets out of the way.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Bungee&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Caveat:wght@500;700&display=swap');

:root{
  /* --- palette: six values, no more --- */
  --void:      #07030d;   /* the night behind the motel      */
  --ash:       #150a22;   /* panel ground                    */
  --hex-pink:  #ff2d95;   /* primary neon tube               */
  --bog-green: #4cff3c;   /* the readout, the cauldron       */
  --tallow:    #ffb24d;   /* candlelight                     */
  --parchment: #f2e4cb;   /* work-order paper                */
  --carbon:    #6d5f83;   /* carbon-copy secondary ink       */
  --ballpoint: #2b4bd4;   /* Brian's pen                     */

  /* --- type scale --- */
  --step--1: clamp(.72rem, .70rem + .10vw, .80rem);
  --step-0:  clamp(.95rem, .90rem + .22vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.05rem + .50vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.25rem + 1.2vw, 2.30rem);
  --step-3:  clamp(2.10rem, 1.50rem + 3.0vw, 4.00rem);

  --rule: 1px solid rgba(109,95,131,.42);
  --paper-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 34px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.35);
}

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

html{ scroll-behavior:smooth }

body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 50% -8%,  rgba(255,45,149,.20), transparent 62%),
    radial-gradient( 760px 460px at 12% 42%,  rgba(76,255,60,.09),  transparent 66%),
    radial-gradient( 900px 520px at 88% 78%,  rgba(255,178,77,.11), transparent 66%),
    linear-gradient(180deg, var(--void) 0%, var(--ash) 58%, #04010a 100%);
  background-attachment:fixed;
  color:var(--parchment);
  font-family:'Courier Prime', ui-monospace, monospace;
  font-size:var(--step-0);
  line-height:1.62;
  overflow-x:hidden;
  min-height:100vh;
}

/* ── ambient: the night, the buzz, the grain ───────────────── */
.grain,.vig{ position:fixed; inset:0; pointer-events:none; }
.grain{
  z-index:60; opacity:.30; mix-blend-mode:multiply;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
}
.vig{
  z-index:59;
  background:radial-gradient(circle at 50% 38%, transparent 38%, rgba(0,0,0,.78) 100%);
}

a{ color:var(--bog-green); text-underline-offset:3px }
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--bog-green); outline-offset:3px; border-radius:2px;
}

/* ── the amenity strip (nav) ───────────────────────────────── */
.strip{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(7,3,13,.97), rgba(7,3,13,.80));
  border-bottom:1px solid rgba(255,45,149,.30);
  backdrop-filter:blur(9px);
}
.strip-in{
  max-width:1120px; margin:0 auto; padding:9px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.mark{
  font-family:'Monoton',cursive; font-size:1.15rem; letter-spacing:.06em;
  color:#fff; text-decoration:none; white-space:nowrap;
  text-shadow:0 0 6px var(--hex-pink), 0 0 20px var(--hex-pink), 0 0 44px rgba(255,45,149,.55);
}
.strip nav{ display:flex; gap:2px; flex-wrap:wrap }
.strip nav a{
  font-family:'Bungee',sans-serif; font-size:.60rem; letter-spacing:.14em;
  color:var(--carbon); text-decoration:none; padding:8px 11px; border-radius:3px;
  border:1px solid transparent; transition:color .16s, border-color .16s, text-shadow .16s;
}
.strip nav a:hover,
.strip nav a[aria-current="page"]{
  color:var(--parchment); border-color:rgba(255,45,149,.55);
  text-shadow:0 0 9px var(--hex-pink);
}

/* ── layout ────────────────────────────────────────────────── */
.wrap{ max-width:1120px; margin:0 auto; padding:0 20px; position:relative; z-index:2 }
/* Vertical only — the shorthand here would reset the horizontal padding that
   .wrap sets on the very same element (<section class="band wrap">), leaving
   the page with no gutter at any viewport narrower than the wrap's max-width. */
.band{ padding-top:clamp(38px,7vw,72px); padding-bottom:clamp(38px,7vw,72px) }
.band + .band{ padding-top:0 }

/* eyebrow: always a real filing reference, never decoration */
.eyebrow{
  font-family:'Bungee',sans-serif; font-size:.58rem; letter-spacing:.24em;
  color:var(--carbon); text-transform:uppercase; margin:0 0 8px;
}
h2.head{
  font-family:'Bungee',sans-serif; font-weight:400;
  font-size:var(--step-2); line-height:1.06; letter-spacing:.01em;
  margin:0 0 6px; color:#fff;
  text-shadow:0 0 10px rgba(255,45,149,.55), 0 0 30px rgba(255,45,149,.25);
}
.head-note{ color:var(--carbon); font-size:var(--step--1); margin:0 0 26px; max-width:62ch }

/* ══════════════════════════════════════════════════════════
   SIGNATURE 1 — THE VACANCY SIGN
   ══════════════════════════════════════════════════════════ */
.signpost{ padding:clamp(30px,6vw,58px) 0 0; display:flex; flex-direction:column; align-items:center }

.conduit{ width:3px; height:clamp(18px,4vw,40px); background:linear-gradient(180deg,transparent,#2a1f38) }
.conduit::after{
  content:''; display:block; width:13px; height:7px; margin-left:-5px;
  background:#2a1f38; border-radius:2px;
}

.sign{
  --tube:var(--hex-pink);
  position:relative; width:min(660px,100%);
  border:3px solid rgba(255,45,149,.55); border-radius:6px;
  background:linear-gradient(180deg, rgba(24,7,32,.92), rgba(9,3,16,.96));
  box-shadow:
    0 0 22px rgba(255,45,149,.42),
    inset 0 0 46px rgba(255,45,149,.10),
    0 30px 70px rgba(0,0,0,.7);
  text-align:center; overflow:hidden;
}
.sign::before{ /* the metal cabinet lip */
  content:''; position:absolute; inset:0; border-radius:4px;
  border:1px solid rgba(255,255,255,.07); pointer-events:none;
}

.sign-top{ padding:clamp(20px,4.5vw,34px) 18px clamp(12px,2.5vw,20px) }

.tube{
  display:block; font-family:'Monoton',cursive; font-weight:400;
  font-size:var(--step-3); line-height:1.02; letter-spacing:.03em; color:#fff;
  text-shadow:
    0 0 5px #fff,
    0 0 14px var(--tube),
    0 0 32px var(--tube),
    0 0 66px var(--tube);
}
.tube.small{ font-size:var(--step-1); letter-spacing:.10em }

/* Orchestrated power-on: tubes strike one at a time, then hold.
   Base state is LIT — the animation only adds the strike. If the class
   never lands (throttled tab, no JS), the sign is simply already on. */
.tube[data-strike]{ opacity:1 }
.lit .tube[data-strike]{ animation:strike .9s steps(1,end) backwards }
.lit .tube[data-strike="2"]{ animation-delay:.42s }
.lit .tube[data-strike="3"]{ animation-delay:.80s }
@keyframes strike{
  0%{opacity:0} 12%{opacity:1} 18%{opacity:.15} 26%{opacity:1}
  34%{opacity:.25} 44%{opacity:1} 52%{opacity:.55} 100%{opacity:1}
}
/* after power-on, a slow lazy buzz — the one ambient tic on the page */
.lit .sign{ animation:buzz 9s 1.9s infinite steps(1,end) }
@keyframes buzz{ 0%,96%,100%{filter:none} 97%{filter:brightness(.62)} 98%{filter:none} 99%{filter:brightness(.78)} }

.sign-rule{ height:2px; background:linear-gradient(90deg,transparent,rgba(255,45,149,.6),transparent) }

/* ── the readout: split-flap digits ───────────────────────── */
.readout{ padding:clamp(16px,3.4vw,26px) 14px clamp(20px,4vw,30px); background:rgba(2,10,2,.42) }
.readout .cap{
  font-family:'Bungee',sans-serif; font-size:.60rem; letter-spacing:.22em;
  color:var(--carbon); margin:0 0 12px;
}
.flaps{
  display:flex; justify-content:center; gap:6px; margin:0 0 12px;
  --h:clamp(58px,13vw,104px); --w:clamp(42px,9.4vw,74px);
}
.flap{
  height:var(--h); width:var(--w); overflow:hidden; border-radius:4px;
  background:linear-gradient(180deg,#0d1a0c,#050b05);
  border:1px solid rgba(76,255,60,.42);
  box-shadow:0 0 16px rgba(76,255,60,.30), inset 0 0 20px rgba(76,255,60,.10);
  position:relative;
}
.flap::after{ /* the split-flap hinge line */
  content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(0,0,0,.75); z-index:2;
}
.reel{ transition:transform .82s cubic-bezier(.16,.86,.24,1) }
.reel b{
  display:block; height:var(--h); line-height:var(--h); font-weight:400;
  font-family:'Bungee',sans-serif; font-size:calc(var(--h) * .60);
  color:#eaffe6; text-shadow:0 0 8px var(--bog-green), 0 0 26px var(--bog-green);
}
.readout .tail{
  font-family:'Bungee',sans-serif; font-size:clamp(.62rem,2.1vw,.86rem);
  letter-spacing:.16em; color:#fff; margin:0;
  text-shadow:0 0 8px var(--bog-green), 0 0 24px rgba(76,255,60,.5);
}
.readout .stamp{
  font-size:var(--step--1); color:var(--carbon); margin:12px 0 0; letter-spacing:.02em;
}

/* the plaque bolted under the sign */
.plaque{
  margin:18px auto 0; padding:7px 16px; display:inline-block;
  border:1px solid rgba(255,178,77,.5); border-radius:2px;
  font-family:'Bungee',sans-serif; font-size:.56rem; letter-spacing:.22em;
  color:var(--tallow); text-shadow:0 0 10px rgba(255,178,77,.6);
  background:rgba(30,20,4,.4);
}

/* ── candles: the power is out, again ─────────────────────── */
.candles{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(10px,3.4vw,34px); margin:clamp(26px,5vw,44px) 0 0; flex-wrap:wrap;
}
.candle{ position:relative; display:flex; flex-direction:column; align-items:center }
.wick{ width:2px; height:6px; background:#3a2a1a }
.flame{
  width:13px; height:25px; margin-bottom:-3px;
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 74%, #fff 0 11%, #ffe6a8 21%, var(--tallow) 52%, rgba(255,80,0,.20) 76%, transparent 82%);
  filter:drop-shadow(0 0 10px rgba(255,178,77,.95)) drop-shadow(0 0 30px rgba(255,110,0,.62));
  transform-origin:50% 100%;
  animation:flick 1.15s ease-in-out infinite alternate;
}
.candle:nth-child(2n) .flame{ animation-duration:.86s }
.candle:nth-child(3n) .flame{ animation-duration:1.42s }
.candle:nth-child(5n) .flame{ animation-duration:1.02s }
@keyframes flick{
  0%  { transform:scale(1,1) rotate(-3deg);      opacity:.9 }
  40% { transform:scale(.92,1.16) rotate(2deg);  opacity:1  }
  70% { transform:scale(1.06,.94) rotate(-1deg); opacity:.95}
  100%{ transform:scale(.97,1.09) rotate(3deg);  opacity:1  }
}
.wax{
  width:clamp(20px,5vw,28px); border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#fff7e8 0%, #f0dcbe 16%, #d6bb98 62%, #b4906c 100%);
  box-shadow:inset -6px 0 11px rgba(0,0,0,.30), 0 0 26px rgba(255,178,77,.26);
  position:relative;
}
.wax::after{ /* one drip, off-center */
  content:''; position:absolute; top:5px; left:4px; width:5px; height:30px;
  border-radius:0 0 5px 5px; background:linear-gradient(180deg,#fffaf0,#e7cfae); opacity:.8;
}
.candle.a .wax{height:clamp(48px,11vw,116px)}
.candle.b .wax{height:clamp(34px,8vw,84px)}
.candle.c .wax{height:clamp(26px,6vw,56px)}
.pool{
  width:clamp(46px,11vw,74px); height:11px; border-radius:50%; margin-top:-3px;
  background:radial-gradient(ellipse, rgba(255,178,77,.32), transparent 72%);
}

/* ══════════════════════════════════════════════════════════
   SIGNATURE 2 — THE WORK ORDER (carbon-copy paper on neon night)
   ══════════════════════════════════════════════════════════ */
.orders{ display:grid; gap:clamp(22px,3.4vw,34px); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) }

.order{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%),
    var(--parchment);
  color:#1b1410;
  border-radius:2px;
  padding:0;
  box-shadow:var(--paper-shadow);
  position:relative;
  transition:transform .22s ease, box-shadow .22s ease;
}
.order:nth-child(3n+1){ transform:rotate(-.7deg) }
.order:nth-child(3n+2){ transform:rotate(.5deg) }
.order:nth-child(3n+3){ transform:rotate(-.25deg) }
.order:hover{
  transform:rotate(0deg) translateY(-6px);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 26px 52px rgba(0,0,0,.7), 0 0 30px rgba(255,45,149,.28);
  z-index:3;
}
.order::before{ /* the strip of tape holding it to the board */
  content:''; position:absolute; top:-11px; left:50%; width:78px; height:22px;
  transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(180deg, rgba(255,240,200,.42), rgba(230,215,180,.30));
  border-left:1px solid rgba(255,255,255,.25); border-right:1px solid rgba(0,0,0,.10);
  box-shadow:0 2px 5px rgba(0,0,0,.28);
}

.order-hd{
  padding:16px 18px 10px; border-bottom:2px solid #1b1410;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
}
.order-hd .who{
  font-family:'Bungee',sans-serif; font-size:.56rem; letter-spacing:.16em;
  color:#6a5a48; margin:0 0 3px;
}
.order-hd h3{
  font-family:'Courier Prime',monospace; font-weight:700; font-size:1.02rem;
  margin:0; line-height:1.24; color:#1b1410; text-transform:uppercase; letter-spacing:.01em;
}
.wo-no{
  font-family:'Bungee',sans-serif; font-size:.66rem; letter-spacing:.06em;
  color:#8a1330; white-space:nowrap; border:2px solid #8a1330; border-radius:2px;
  padding:3px 7px; transform:rotate(3deg); opacity:.82;
}

.fields{ display:grid; grid-template-columns:auto 1fr; gap:0 12px; padding:12px 18px; font-size:.80rem }
.fields dt{
  font-family:'Bungee',sans-serif; font-size:.52rem; letter-spacing:.14em;
  color:#6a5a48; padding:5px 0 0; text-transform:uppercase;
}
.fields dd{ margin:0; padding:4px 0; border-bottom:1px dotted #b9a98f; color:#2a2018 }
.fields dd.prio{ color:#8a1330; font-weight:700 }

.resolution{ padding:12px 18px 20px }
.resolution .rlabel{
  font-family:'Bungee',sans-serif; font-size:.52rem; letter-spacing:.14em;
  color:#6a5a48; text-transform:uppercase; margin:0 0 6px;
}
/* Brian answers every form in ballpoint. */
.pen{
  font-family:'Caveat',cursive; font-size:1.22rem; line-height:1.42;
  color:var(--ballpoint); margin:0;
}
.pen + .pen{ margin-top:10px }

.order-ft{
  border-top:1px dashed #b9a98f; padding:10px 18px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.68rem; color:#6a5a48;
}
.chip{
  font-family:'Bungee',sans-serif; font-size:.50rem; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid #6a5a48; border-radius:999px; padding:2px 9px; color:#4a3d30;
}
.chip.closed{ border-color:#1d6b2a; color:#1d6b2a }
.chip.open  { border-color:#8a1330; color:#8a1330 }

/* rubber stamp, used sparingly */
.stampmark{
  position:absolute; right:16px; bottom:52px; transform:rotate(-13deg);
  font-family:'Bungee',sans-serif; font-size:.72rem; letter-spacing:.10em;
  color:rgba(138,19,48,.52); border:3px double rgba(138,19,48,.52);
  border-radius:3px; padding:4px 10px; pointer-events:none;
}

/* ── the ledger (stat row, but it's a page from a ledger book) ── */
.ledger{
  background:var(--parchment); color:#1b1410; border-radius:2px;
  box-shadow:var(--paper-shadow); overflow:hidden; transform:rotate(-.3deg);
}
.ledger-hd{
  padding:14px 18px; border-bottom:2px solid #1b1410;
  font-family:'Bungee',sans-serif; font-size:.60rem; letter-spacing:.18em; color:#6a5a48;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.ledger-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) }
.lrow{ padding:16px 18px; border-right:1px dotted #b9a98f; border-bottom:1px dotted #b9a98f }
.lrow .n{
  font-family:'Bungee',sans-serif; font-size:clamp(1.4rem,4.6vw,2.1rem); line-height:1;
  color:#1b1410; display:block;
}
.lrow .k{ font-size:.70rem; color:#6a5a48; letter-spacing:.02em; display:block; margin-top:5px }

/* ── posted notices (generic paper block) ─────────────────── */
.notice{
  background:var(--parchment); color:#1b1410; border-radius:2px;
  box-shadow:var(--paper-shadow); padding:22px 24px 24px; position:relative;
}
.notice h3{
  font-family:'Bungee',sans-serif; font-weight:400; font-size:.86rem; letter-spacing:.06em;
  margin:0 0 4px; text-transform:uppercase; color:#1b1410;
}
.notice .sub{ font-size:.70rem; color:#6a5a48; margin:0 0 14px; letter-spacing:.04em }
.notice p{ margin:0 0 11px; font-size:.86rem; color:#2a2018 }
.notice p:last-child{ margin-bottom:0 }
.notice ol,.notice ul{ margin:0 0 11px; padding-left:20px; font-size:.86rem; color:#2a2018 }
.notice li{ margin-bottom:7px }
.pin{
  position:absolute; top:-9px; left:24px; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ff7ab5, #8a1330 70%);
  box-shadow:0 3px 6px rgba(0,0,0,.5);
}

/* ── the minutes (1659 timeline as a running agenda) ──────── */
.minutes{ max-width:860px; margin:0 auto }
.entry{
  display:grid; grid-template-columns:clamp(64px,10vw,96px) 1fr; gap:18px;
  padding:15px 0; border-bottom:var(--rule);
}
.entry:last-child{ border-bottom:none }
.entry .yr{
  font-family:'Bungee',sans-serif; font-size:clamp(.95rem,3vw,1.25rem); color:#fff;
  text-shadow:0 0 10px var(--bog-green), 0 0 26px rgba(76,255,60,.45); line-height:1.3;
}
.entry .txt{ margin:0; color:#cbb9d6; font-size:.90rem }
.entry .txt b{ color:var(--parchment) }

/* ── tenant reviews ───────────────────────────────────────── */
.reviews{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.review{
  border:var(--rule); border-left:3px solid var(--hex-pink); border-radius:0 3px 3px 0;
  padding:18px 20px; background:rgba(255,45,149,.05);
}
.review p{ margin:0 0 12px; font-size:.94rem; color:#f0e2f5 }
.review .by{ font-size:.68rem; color:var(--carbon); letter-spacing:.06em; margin:0 }
.stars{ color:var(--tallow); letter-spacing:.18em; font-size:.78rem; margin:0 0 8px }

/* ── roster table ─────────────────────────────────────────── */
.scroller{ overflow-x:auto; border:var(--rule); border-radius:3px; background:rgba(21,10,34,.6) }
.roster{ width:100%; border-collapse:collapse; font-size:.82rem; min-width:660px }
.roster th,.roster td{ padding:11px 14px; border-bottom:var(--rule); text-align:left; vertical-align:top }
.roster th{
  font-family:'Bungee',sans-serif; font-size:.55rem; letter-spacing:.15em; color:var(--tallow);
  background:rgba(255,178,77,.07); white-space:nowrap; position:sticky; top:0;
}
.roster td{ color:#d6c6e0 }
.roster td:first-child{ color:var(--parchment) }
.roster tr:hover td{ background:rgba(255,45,149,.07) }

/* ── grievances (accordion FAQ) ───────────────────────────── */
.griev{ border-bottom:var(--rule) }
.griev summary{
  cursor:pointer; list-style:none; padding:16px 40px 16px 0; position:relative;
  font-family:'Courier Prime',monospace; font-weight:700; font-size:.96rem; color:var(--parchment);
}
.griev summary::-webkit-details-marker{ display:none }
.griev summary::after{
  content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:'Bungee',sans-serif; color:var(--hex-pink); font-size:1.1rem;
  text-shadow:0 0 10px var(--hex-pink);
}
.griev[open] summary::after{ content:'\2013' }
.griev p{ margin:0 0 16px; color:#cbb9d6; font-size:.90rem; padding-right:40px }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-block; cursor:pointer; font:inherit;
  font-family:'Bungee',sans-serif; font-size:.62rem; letter-spacing:.16em;
  padding:13px 22px; border-radius:3px; text-decoration:none;
  border:2px solid var(--bog-green); color:#fff; background:rgba(6,22,4,.55);
  text-shadow:0 0 9px var(--bog-green);
  box-shadow:0 0 16px rgba(76,255,60,.28), inset 0 0 18px rgba(76,255,60,.08);
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 0 30px rgba(76,255,60,.62) }
.btn:active{ transform:translateY(1px) }
.btn.pink{
  border-color:var(--hex-pink); text-shadow:0 0 9px var(--hex-pink);
  background:rgba(28,3,17,.55); box-shadow:0 0 16px rgba(255,45,149,.32), inset 0 0 18px rgba(255,45,149,.09);
}
.btn.pink:hover{ box-shadow:0 0 30px rgba(255,45,149,.7) }
.btnrow{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:26px }

/* ── the dispatcher (hex generator output) ────────────────── */
.dispatch{
  margin:18px auto 0; max-width:620px; padding:20px 22px;
  border:2px dashed rgba(76,255,60,.5); border-radius:3px; background:rgba(3,14,3,.6);
  min-height:92px; display:flex; align-items:center; justify-content:center; text-align:center;
}
.dispatch p{ margin:0; font-family:'Caveat',cursive; font-size:1.42rem; line-height:1.4; color:#dfffd9 }
.dispatch .idle{ font-family:'Courier Prime',monospace; font-size:.82rem; color:var(--carbon) }

/* ── footer ───────────────────────────────────────────────── */
footer{
  margin-top:clamp(48px,8vw,88px); padding:34px 0 84px;
  border-top:1px solid rgba(255,45,149,.28); text-align:center;
  color:var(--carbon); font-size:.74rem; position:relative; z-index:2;
}
footer .legal{ max-width:70ch; margin:14px auto 0; font-size:.68rem; line-height:1.75; opacity:.9 }
footer .flink{ color:var(--carbon); margin:0 8px }

/* ── the bottom rail: the number follows you ──────────────── */
.rail{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:linear-gradient(180deg, rgba(7,3,13,.72), rgba(7,3,13,.98));
  border-top:2px solid rgba(255,45,149,.6);
  box-shadow:0 -6px 26px rgba(255,45,149,.26);
  backdrop-filter:blur(8px);
  padding:9px 16px; text-align:center;
  font-family:'Bungee',sans-serif; font-size:.56rem; letter-spacing:.14em; color:#fff;
  text-shadow:0 0 8px var(--hex-pink);
}
.rail b{ color:var(--bog-green); text-shadow:0 0 10px var(--bog-green); font-size:.80rem; font-weight:400 }

.hidden{ display:none }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:620px){
  .order-hd{ flex-direction:column; gap:8px }
  .wo-no{ transform:none; align-self:flex-start }
  /* Full-width cards have no room to lean — the tilt would clip the corner. */
  .order:nth-child(3n+1),
  .order:nth-child(3n+2),
  .order:nth-child(3n+3),
  .ledger{ transform:none }
  .entry{ grid-template-columns:1fr; gap:4px }
  .stampmark{ right:12px; bottom:auto; top:14px; font-size:.6rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .tube[data-strike]{ opacity:1 }
  .reel{ transition:none }
}

/* ============================================================
   MOTION LAYER
   One idea: it is 2 AM, the power is unreliable, and you are
   carrying a candle. Everything here serves that and nothing else.
   Uses the independent `translate` property so it never fights the
   `transform` rotations on .order / .ledger.
   ============================================================ */

/* -- documents settle onto the board as you reach them -------- */
.reveal{
  opacity:0;
  translate:0 22px;
  transition:opacity .62s ease, translate .62s cubic-bezier(.18,.85,.24,1);
  will-change:opacity, translate;
}
.reveal.seen{ opacity:1; translate:0 0 }

/* -- the rubber stamp lands after the page settles ------------ */
.reveal .stampmark{ opacity:0 }
.reveal.seen .stampmark{ animation:slam .42s .34s cubic-bezier(.2,1.7,.35,1) both }
@keyframes slam{
  0%  { opacity:0;   transform:rotate(-13deg) scale(2.5) }
  55% { opacity:.85; transform:rotate(-13deg) scale(.9)  }
  100%{ opacity:1;   transform:rotate(-13deg) scale(1)   }
}

/* -- the power dips. it does this. nobody has fixed it. ------- */
.brownout{
  position:fixed; inset:0; z-index:58; pointer-events:none;
  background:#04010a; opacity:0;
}
.brownout.dip{ animation:dip .52s ease-out }
@keyframes dip{
  0%{opacity:0} 18%{opacity:.78} 34%{opacity:.06}
  52%{opacity:.62} 70%{opacity:.12} 86%{opacity:.34} 100%{opacity:0}
}

/* -- you are holding a candle ---------------------------------- */
.torch{
  position:fixed; inset:0; z-index:57; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,40%),
    rgba(255,178,77,.15), rgba(255,120,0,.05) 45%, transparent 72%);
}
.torch.on{ opacity:1 }

/* -- something crosses the sign ------------------------------- */
.bat{
  position:fixed; z-index:56; pointer-events:none;
  font-size:24px; line-height:1; opacity:.72;
  filter:drop-shadow(0 0 10px rgba(162,75,255,.85));
  animation:cross var(--dur,9s) linear forwards;
}
@keyframes cross{
  0%  { transform:translate(-14vw,0) rotate(-8deg) }
  28% { transform:translate(24vw,-7vh) rotate(7deg) }
  55% { transform:translate(56vw,3vh) rotate(-6deg) }
  80% { transform:translate(84vw,-5vh) rotate(6deg) }
  100%{ transform:translate(118vw,2vh) rotate(-4deg) }
}

/* -- the counter lands with a physical knock ------------------ */
.flap.landed{ animation:knock .28s ease-out }
@keyframes knock{
  0%{ transform:translateY(0) }
  40%{ transform:translateY(2px) }
  100%{ transform:translateY(0) }
}
.flap::before{ /* light sweeping across the glass as it turns */
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(214,255,208,.30) 50%, transparent 65%);
  translate:-120% 0; opacity:0;
}
.flap.landed::before{ animation:sweep .5s ease-out }
@keyframes sweep{
  0%{ translate:-120% 0; opacity:0 }
  35%{ opacity:1 }
  100%{ translate:120% 0; opacity:0 }
}

/* -- the neon mark hums when you reach for it ----------------- */
.strip nav a{ position:relative }
.strip nav a::after{
  content:''; position:absolute; left:11px; right:11px; bottom:4px; height:1px;
  background:var(--hex-pink); box-shadow:0 0 8px var(--hex-pink);
  scale:0 1; transform-origin:left; transition:scale .26s cubic-bezier(.2,.9,.2,1);
}
.strip nav a:hover::after,
.strip nav a[aria-current="page"]::after{ scale:1 1 }

/* -- paper lifts off the board -------------------------------- */
.order,.notice,.ledger{ will-change:transform }
.notice{ transition:transform .22s ease, box-shadow .22s ease }
.notice:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 26px 52px rgba(0,0,0,.68), 0 0 26px rgba(255,178,77,.22);
}

/* -- the grievance drawer slides ------------------------------ */
.griev[open] > *:not(summary){ animation:drawer .34s ease-out }
@keyframes drawer{
  from{ opacity:0; translate:0 -8px }
  to  { opacity:1; translate:0 0 }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; translate:none; transition:none }
  .reveal .stampmark{ opacity:1 }
  .brownout,.torch,.bat{ display:none }
  .flap.landed,.flap.landed::before,.griev[open] > *:not(summary){ animation:none }
}

/* ============================================================
   DROP-DOWN MENUS
   The strip is neon; the menus that come off it are paper.
   Same duality as the rest of the site — you pull a card down
   off the sign.
   ============================================================ */
.strip nav.menu{ display:flex; gap:2px; flex-wrap:wrap; align-items:center }

.drop{ position:relative }

.droptop{
  font:inherit; font-family:'Bungee',sans-serif; font-size:.60rem; letter-spacing:.14em;
  color:var(--carbon); background:none; cursor:pointer;
  border:1px solid transparent; border-radius:3px; padding:8px 11px;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .16s, border-color .16s, text-shadow .16s;
}
.droptop::after{
  content:''; width:0; height:0; flex:none;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; transition:rotate .2s ease;
}
.droptop:hover,
.drop.open .droptop,
.droptop[data-here="1"]{
  color:var(--parchment); border-color:rgba(255,45,149,.55);
  text-shadow:0 0 9px var(--hex-pink);
}
.drop.open .droptop::after{ rotate:180deg }

.dropmenu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:70;
  min-width:214px; max-width:min(300px, calc(100vw - 40px));
  background:var(--parchment); color:#1b1410;
  border-radius:2px; box-shadow:var(--paper-shadow);
  padding:9px; rotate:-.35deg;
  opacity:0; visibility:hidden; translate:0 -7px;
  transition:opacity .18s ease, translate .18s ease, visibility .18s;
}
.drop.open .dropmenu{ opacity:1; visibility:visible; translate:0 0 }
.drop:last-child .dropmenu{ left:auto; right:0 }

.dropmenu::before{ /* the strip of tape, same as the work orders */
  content:''; position:absolute; top:-9px; left:50%; width:64px; height:18px;
  transform:translateX(-50%) rotate(-2deg);
  background:linear-gradient(180deg, rgba(255,240,200,.45), rgba(230,215,180,.32));
  box-shadow:0 2px 5px rgba(0,0,0,.28);
}

.dropmenu a{
  display:block; padding:7px 10px; text-decoration:none;
  color:#2a2018; font-family:'Courier Prime',monospace; font-size:.82rem;
  border-bottom:1px dotted #b9a98f; border-radius:2px;
}
.dropmenu a:last-child{ border-bottom:none }
.dropmenu a:hover,
.dropmenu a:focus-visible{ background:rgba(255,45,149,.13); color:#8a1330 }
.dropmenu a[aria-current="page"]{ color:#8a1330; font-weight:700 }
.dropmenu a[aria-current="page"]::before{ content:'▸ ' }

/* On a phone the menus become plain accordions — no floating paper. */
@media (max-width:620px){
  .strip .strip-in{ align-items:flex-start }
  .strip nav.menu{ width:100%; flex-direction:column; align-items:stretch; gap:0 }
  .drop{ width:100% }
  .droptop{ width:100%; justify-content:space-between }
  .dropmenu{
    position:static; min-width:0; max-width:none; rotate:none;
    opacity:1; visibility:visible; translate:none;
    display:none; margin:4px 0 8px; transition:none;
  }
  .drop.open .dropmenu{ display:block }
  .dropmenu::before{ display:none }
  .drop:last-child .dropmenu{ right:auto }
}

@media (prefers-reduced-motion:reduce){
  .dropmenu,.droptop::after{ transition:none }
}

/* ============================================================
   GRID BALANCE
   A 3-up grid with 7 cards strands one card alone on the left.
   Where a count is semantically fixed (seven residents are seven
   residents) the layout has to absorb it, so a lone trailing card
   is centred in its row instead of hanging off the edge.

   The breakpoints track where .orders actually changes column
   count: minmax(320px,1fr) + the gap inside a 1120px wrap.
   ============================================================ */

/* three columns — put a lone last card in the middle track */
@media (min-width:1070px){
  .orders > .order:last-child:nth-child(3n+1){ grid-column:2 }
}

/* two columns — span the row and centre at half width */
@media (min-width:710px) and (max-width:1069px){
  .orders > .order:last-child:nth-child(2n+1){
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - (clamp(22px,3.4vw,34px) / 2));
  }
}

/* ============================================================
   THE COLD OPEN
   You arrive at 2 AM in the rain. Somebody lights a match, the
   candles catch, lightning shows you the dead sign, and then the
   tubes strike one at a time until the place is open.

   Runs once per session, skippable, and never for reduced-motion.
   Built by JS — if it never runs, you simply get the page.
   ============================================================ */
.cold{
  position:fixed; inset:0; z-index:9999;
  background:#020106;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:pointer;
}
.cold-fx{ position:absolute; inset:0; width:100%; height:100% }

.cold-stage{
  position:relative; z-index:2; text-align:center;
  padding:20px; width:min(760px,92vw);
  transform:scale(.96);
}

/* the cabinet, dark until the power comes back */
.cold-sign{
  border:3px solid rgba(255,45,149,.16); border-radius:6px;
  padding:clamp(22px,5vw,42px) 18px clamp(16px,3vw,26px);
  background:linear-gradient(180deg, rgba(24,7,32,.5), rgba(6,2,12,.72));
  transition:border-color 1.2s ease, box-shadow 1.2s ease;
}
.cold.on .cold-sign{
  border-color:rgba(255,45,149,.62);
  box-shadow:0 0 40px rgba(255,45,149,.4), inset 0 0 60px rgba(255,45,149,.12);
}

.cold-tube{
  display:block; font-family:'Monoton',cursive;
  font-size:clamp(2.1rem,8.4vw,4.6rem); line-height:1.04; letter-spacing:.03em;
  color:#2a1430;                 /* unlit glass */
  text-shadow:none;
  transition:color .12s;
}
.cold-tube.lit{
  color:#fff;
  text-shadow:0 0 5px #fff, 0 0 16px var(--hex-pink),
              0 0 36px var(--hex-pink), 0 0 74px var(--hex-pink);
}
.cold-tube.flick{ animation:coldflick .5s steps(1,end) }
@keyframes coldflick{
  0%,100%{opacity:1} 15%{opacity:.2} 30%{opacity:1} 45%{opacity:.35} 60%{opacity:1} 75%{opacity:.5}
}
.cold-sub{
  display:block; margin-top:14px;
  font-family:'Bungee',sans-serif; font-size:clamp(.56rem,2vw,.78rem);
  letter-spacing:.24em; color:#2a2038; transition:color .4s;
}
.cold.on .cold-sub{ color:var(--tallow); text-shadow:0 0 12px rgba(255,178,77,.7) }

/* the counter slamming up to today's figure */
.cold-count{
  margin-top:18px; font-family:'Bungee',sans-serif;
  font-size:clamp(1.8rem,7vw,3.4rem); letter-spacing:.08em;
  color:#eaffe6; opacity:0;
  text-shadow:0 0 10px var(--bog-green), 0 0 34px var(--bog-green);
}
.cold-count.show{ opacity:1 }
.cold-count small{
  display:block; font-size:.24em; letter-spacing:.22em;
  color:var(--carbon); text-shadow:none; margin-top:8px;
}

.cold-candles{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(10px,3vw,26px); margin-top:clamp(20px,4vw,34px);
}
.cold-candles .candle{ opacity:.25; transition:opacity .5s }
.cold-candles .candle .flame{ opacity:0; transition:opacity .35s }
.cold-candles .candle.alight{ opacity:1 }
.cold-candles .candle.alight .flame{ opacity:1 }

.cold-skip{
  position:absolute; left:0; right:0; bottom:26px; margin:0;
  font-family:'Bungee',sans-serif; font-size:.54rem; letter-spacing:.2em;
  color:#4a3f5e;
}
.cold-skip b{ color:var(--carbon); font-weight:400 }

/* hand-off: the overlay lifts and the real page is already there */
.cold.done{
  opacity:0; transform:scale(1.06);
  transition:opacity .85s ease, transform .85s ease;
  pointer-events:none;
}

/* the storm keeps going after the overlay leaves */
.bolt{
  position:fixed; inset:0; z-index:56; pointer-events:none;
  background:#dfe6ff; opacity:0;
}
.bolt.strike{ animation:bolt .62s ease-out }
@keyframes bolt{
  0%{opacity:0} 6%{opacity:.5} 12%{opacity:.04} 20%{opacity:.34}
  30%{opacity:.02} 46%{opacity:.16} 100%{opacity:0}
}

/* the sign leans toward you */
.sign{ transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)); transition:transform .25s ease-out }

@media (prefers-reduced-motion:reduce){
  .cold{ display:none !important }
  .bolt{ display:none !important }
  .sign{ transform:none }
}

/* The reviews grid has the same orphan problem as .orders, but its tracks are
   minmax(280px,1fr), so it changes column count at different widths. */
@media (min-width:920px){
  .reviews > .review:last-child:nth-child(3n+1){ grid-column:2 }
}
@media (min-width:620px) and (max-width:919px){
  .reviews > .review:last-child:nth-child(2n+1){
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - 10px);
  }
}

/* At tablet widths the cards are at their widest relative to the gutter, and
   the paper tilt swings a corner into it — overflow-x:hidden then shaves it.
   Widen the gutter here rather than flattening the tilt; the tilt is the point. */
@media (min-width:621px) and (max-width:1069px){
  .wrap{ padding-left:28px; padding-right:28px }
}


/* ============================================================
   FIXES FROM DESIGN REVIEW
   ============================================================ */

/* A 4-up ledger becomes 3 columns around 600px and strands the fourth
   figure alone next to two empty cells. Two-up is even at any count. */
@media (max-width:760px){
  .ledger-rows{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:380px){
  .ledger-rows{ grid-template-columns:1fr }
}

/* The timesheet puts a .minutes list inside a .notice — i.e. dark-ground type
   on cream paper. Re-ink it: on paper it is printed, not lit. */
.notice .minutes .entry{ border-bottom-color:#b9a98f }
.notice .minutes .yr{ color:#1b1410; text-shadow:none }
.notice .minutes .txt{ color:#2a2018 }
.notice .minutes .txt b{ color:#1b1410 }

/* Wide tables scroll inside .scroller, but on touch there is no visible hint
   that they do. Fade the right edge while it is scrollable. */
.scroller{ position:relative; background-image:linear-gradient(90deg,transparent 82%,rgba(7,3,13,.55)); background-repeat:no-repeat; background-size:100% 100%; background-attachment:local }

/* --- Contrast: the muted ink was tuned against paper, then reused on the
   near-black ground, where it falls under the legibility floor. Lift the
   dark-ground uses only; the paper components keep the original value. --- */
.eyebrow{ color:#9c8cb8 }
.head-note{ color:#c6b8d8 }
.sec-kicker{ color:#9c8cb8 }
.review .by{ color:#a698c0 }
.readout .stamp{ color:#a698c0 }
.entry .txt{ color:#d6c8e2 }
footer{ color:#9c8cb8 }
footer .legal{ opacity:1; color:#8d7fab }
footer .flink{ color:#b3a4cc }

/* --- Four testimonials in a three-track grid leave one alone. At four, two
   even rows beat three-and-a-stray. --- */
.reviews:has(> .review:nth-child(4):last-child){
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:620px){
  .reviews:has(> .review:nth-child(4):last-child){ grid-template-columns:1fr }
}