/* ============================================================
   THE CYNICS — "The Playbill"
   19th-century carnival broadside. Paper, ink, woodtype, stamps.
   ============================================================ */

:root{
  --paper:#e9dcbd;
  --paper-2:#e0cfa6;
  --paper-dk:#d4c094;
  --ink:#211812;
  --ink-2:#4a3a2c;
  --purple:#46226d;
  --purple-d:#2a1444;
  --purple-dd:#1d0e30;
  --purple-l:#8a5fb0;
  --crimson:#a81d18;
  --red:#c8362a;
  --gold:#a9802f;
  --gold-lt:#cfa84e;
  --shadow:6px 8px 0 rgba(33,24,18,.18);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'IM Fell English',Georgia,serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  font-size:18px;line-height:1.6;
  cursor:none;
}
@media(hover:none){body{cursor:auto}}
::selection{background:var(--crimson);color:var(--paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
svg.orn,svg.orn-fl,svg.hand,svg.ico{fill:currentColor}

/* paper texture base (subtle printed grain via layered gradients) */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(168,29,24,.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(70,34,109,.06), transparent 45%),
    var(--paper);
}
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

/* ============================================================
   MANICULE CURSOR
   ============================================================ */
.cursor{position:fixed;top:0;left:0;width:44px;height:28px;z-index:9999;pointer-events:none;
  color:var(--crimson);transform:translate(-6px,-2px) rotate(-4deg);
  transition:transform .12s ease, color .2s;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.25));
  will-change:transform;mix-blend-mode:normal}
.cursor svg{width:100%;height:100%}
.cursor.tap{transform:translate(-6px,-2px) rotate(-4deg) scale(.8)}
.cursor.link{color:var(--purple);transform:translate(-6px,-2px) rotate(-12deg) scale(1.15)}
@media(hover:none){.cursor{display:none}}

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.wood{font-family:'Rye',serif}
.didone{font-family:'Abril Fatface',serif}
.type{font-family:'Special Elite',monospace}

/* print-on reveal (letterpress) */
[data-print]{opacity:0}
[data-print].printed{animation:print-on .7s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes print-on{
  0%{opacity:0;transform:translateY(10px) scale(1.06);filter:blur(3px)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none}
}

/* generic reveal */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rev.in{opacity:1;transform:none}

/* ============================================================
   STAMP LOADER
   ============================================================ */
.loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:var(--paper);
  transition:opacity .6s .3s, visibility .6s .3s}
.loader.done{opacity:0;visibility:hidden}
.loader-ticket{position:relative;border:3px solid var(--ink);padding:2.2rem 3rem;text-align:center;
  background:var(--paper-2);box-shadow:var(--shadow)}
.loader-ticket::before,.loader-ticket::after{content:"";position:absolute;top:50%;width:26px;height:26px;
  border-radius:50%;background:var(--paper);transform:translateY(-50%);border:3px solid var(--ink)}
.loader-ticket::before{left:-15px}.loader-ticket::after{right:-15px}
.loader-mini{display:block;font-family:'Special Elite',monospace;letter-spacing:4px;font-size:.7rem;color:var(--ink-2)}
.loader-stamp{display:block;font-family:'Rye',serif;font-size:2.6rem;color:var(--crimson);margin:.4rem 0;
  opacity:0;transform:scale(2) rotate(-10deg)}
.loader-stamp.hit{animation:stamp-hit .5s cubic-bezier(.2,1.5,.4,1) forwards}
.loader-no{display:block;font-family:'Special Elite',monospace;letter-spacing:3px;font-size:.8rem}

@keyframes stamp-hit{
  0%{opacity:0;transform:scale(2.2) rotate(-12deg)}
  55%{opacity:1;transform:scale(.92) rotate(-3deg)}
  70%{transform:scale(1.04) rotate(-5deg)}
  100%{opacity:1;transform:scale(1) rotate(-4deg)}
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;gap:1.4rem;
  padding:.7rem 4vw;background:var(--paper);border-bottom:3px double var(--ink);
  transition:transform .4s, box-shadow .4s}
.topbar.hide{transform:translateY(-120%)}
.topbar.shadow{box-shadow:0 6px 0 -3px rgba(33,24,18,.12)}
.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.brand-seal{width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;overflow:hidden;flex:none;
  box-shadow:2px 2px 0 var(--ink)}
.brand-seal img{width:100%;height:100%;object-fit:cover}
.brand-name{font-family:'Rye',serif;font-size:1.35rem;color:var(--ink)}
.index{display:flex;gap:1.3rem;font-family:'Special Elite',monospace;font-size:.78rem;letter-spacing:1px;text-transform:uppercase}
.index a{position:relative;padding:.2rem 0;color:var(--ink-2);transition:color .2s}
.index a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--crimson);transition:right .25s}
.index a:hover{color:var(--ink)}
.index a:hover::after{right:0}
.apply-tab{font-family:'Special Elite',monospace;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;
  background:var(--crimson);color:var(--paper);padding:.5rem 1rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s,box-shadow .12s}
.apply-tab:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.apply-tab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.prog-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:none;padding:6px}
.prog-toggle span{width:24px;height:3px;background:var(--ink)}

/* ============================================================
   HERO / THE BILL
   ============================================================ */
.bill{min-height:100vh;display:grid;place-content:center;place-items:center;padding:7rem 4vw 4rem;position:relative}
.bill-frame{position:relative;width:100%;max-width:1080px;background:var(--paper-2);
  border:3px solid var(--ink);padding:clamp(1.5rem,4vw,3.2rem);
  box-shadow:0 0 0 3px var(--paper-2),0 0 0 6px var(--ink),14px 16px 0 rgba(33,24,18,.22)}
.bill-eyebrow{text-align:center;font-family:'Special Elite',monospace;letter-spacing:3px;font-size:.75rem;
  text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:.8rem}
.bill-eyebrow .orn{width:14px;height:14px;color:var(--crimson)}
.bill-rule{text-align:center;margin:.8rem 0;color:var(--gold);position:relative}
.bill-rule::before,.bill-rule::after{content:"";position:absolute;top:50%;width:38%;height:3px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 12px)}
.bill-rule::before{left:0}.bill-rule::after{right:0}
.bill-rule .orn-fl{width:48px;height:24px;color:var(--crimson)}

.bill-title{text-align:center;line-height:.9}
.bill-title .a,.bill-title .c{display:block;font-family:'Special Elite',monospace;letter-spacing:5px;
  font-size:clamp(.7rem,1.8vw,1rem);text-transform:uppercase;color:var(--ink-2)}
.bill-title .a{margin-bottom:.6rem}.bill-title .c{margin-top:.6rem}
.bill-title .b{display:block;font-family:'Rye',serif;font-size:clamp(3.6rem,15vw,10rem);color:var(--crimson);
  text-shadow:3px 3px 0 var(--ink),6px 6px 0 rgba(169,128,47,.45);letter-spacing:2px}
.bill-tag{text-align:center;font-size:clamp(1.1rem,2.6vw,1.7rem);margin:1.2rem 0 1.8rem;font-style:italic;color:var(--ink)}
.bill-tag i{color:var(--crimson);font-style:italic}

.bill-meta{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center;border-top:2px solid var(--ink);padding-top:1.8rem}
.bill-blurb p{font-size:1.05rem}
.bill-cta{margin-top:1.6rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.hand-btn{display:inline-flex;align-items:center;gap:.7rem;font-family:'Rye',serif;font-size:1.4rem;
  background:var(--crimson);color:var(--paper);padding:.7rem 1.4rem;border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.hand-btn .hand{width:38px;height:24px;color:var(--paper);animation:point 1.4s ease-in-out infinite}
.hand-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.hand-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
@keyframes point{50%{transform:translateX(6px)}}
.text-link{font-family:'Special Elite',monospace;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;
  border-bottom:2px dotted var(--ink-2);padding-bottom:2px}
.text-link:hover{color:var(--crimson);border-color:var(--crimson)}

.bill-plate{text-align:center}
.plate-inner{border:3px solid var(--ink);padding:6px;background:var(--ink);box-shadow:var(--shadow)}
.plate-inner img{width:100%;filter:sepia(.35) contrast(1.05) saturate(.9)}
.bill-plate figcaption{font-family:'Special Elite',monospace;font-size:.72rem;margin-top:.6rem;color:var(--ink-2);font-style:italic}
.bill-footnote{text-align:center;font-family:'Special Elite',monospace;font-size:.68rem;color:var(--ink-2);margin-top:1.4rem;opacity:.8}

/* rotating wax seal */
.seal{position:absolute;top:-26px;right:-26px;width:120px;height:120px;color:var(--crimson)}
.seal svg{width:100%;height:100%;animation:spin 22s linear infinite}
.seal-text{font-family:'Special Elite',monospace;font-size:9px;letter-spacing:1.5px;fill:var(--crimson);text-transform:uppercase}
.seal-core{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:'Rye',serif;
  font-size:.8rem;color:var(--crimson);line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}

.scroll-note{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
  font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-2);
  animation:nudge 2s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(-50%,6px)}}

/* ============================================================
   TICKET RAIL
   ============================================================ */
.rail{background:var(--purple-d);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;padding:.5rem 0}
.rail-track{display:flex;gap:0;white-space:nowrap;animation:rail 30s linear infinite;will-change:transform}
.stub{display:inline-flex;align-items:center;gap:1rem;padding:.4rem 1.6rem;border-right:2px dashed var(--purple-l);
  font-family:'Special Elite',monospace;font-size:.85rem;letter-spacing:2px;text-transform:uppercase;color:var(--paper)}
.stub b{color:var(--gold-lt)}
@keyframes rail{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION HEADS
   ============================================================ */
section{position:relative;padding:6rem 5vw}
.head{max-width:1080px;margin:0 auto 3rem;border-bottom:3px double var(--ink);padding-bottom:1rem}
.head.center{text-align:center}
.head-no{font-family:'Special Elite',monospace;font-size:.9rem;letter-spacing:3px;color:var(--crimson)}
.head-title{font-family:'Abril Fatface',serif;font-size:clamp(2.2rem,6vw,4rem);line-height:1;margin:.2rem 0}
.head-sub{font-family:'Special Elite',monospace;font-size:.85rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:1px}
.head.dark .head-title,.head.dark .head-sub,.head.dark .head-no{color:var(--paper)}
.head.dark{border-color:var(--paper)}
.head.dark .head-no{color:var(--gold-lt)}

/* ============================================================
   NOTICE / LORE  (dark purple panel)
   ============================================================ */
.notice{background:var(--purple-d);color:var(--paper)}
.notice .head{border-color:var(--paper)}
.notice-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start;max-width:1080px;margin:0 auto}
.cabinet{position:sticky;top:90px}
.cabinet-photo{position:relative;border:3px solid var(--paper);padding:8px;background:var(--purple-dd);box-shadow:10px 12px 0 rgba(0,0,0,.35);overflow:hidden}
.cabinet-photo img{width:100%;filter:contrast(1.04) saturate(1.06)}
.cabinet figcaption{font-family:'Special Elite',monospace;font-size:.74rem;margin-top:.7rem;letter-spacing:1px;text-align:center;color:var(--gold-lt)}
/* slat reveal */
.slats{position:absolute;inset:8px;display:flex;pointer-events:none}
.slats i{flex:1;background:var(--purple-d);transform-origin:top;transition:transform .6s cubic-bezier(.7,0,.3,1)}
.cabinet.open .slats i{transform:scaleY(0)}

.notice-text p{margin-bottom:1.2rem;font-size:1.12rem}
.notice-text b{color:var(--gold-lt)}
.notice-text i{color:#e9c47a;font-style:italic}
.dropcap{float:left;font-family:'Rye',serif;font-size:4.4rem;line-height:.7;color:var(--crimson);
  margin:.35rem .7rem 0 0;text-shadow:2px 2px 0 var(--ink)}
.ledger{list-style:none;margin-top:2rem;border-top:2px solid var(--purple-l);padding-top:1rem}
.ledger li{display:flex;align-items:baseline;gap:.4rem;padding:.45rem 0;font-family:'Special Elite',monospace;font-size:.9rem}
.ledger-k{white-space:nowrap}
.ledger-dots{flex:1;border-bottom:2px dotted var(--purple-l);transform:translateY(-4px)}
.ledger-v{white-space:nowrap;color:var(--gold-lt)}

/* ============================================================
   EXHIBIT HALL / GALLERY (board)
   ============================================================ */
.hall{background:var(--paper)}
.board{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2.4rem 1.6rem;padding:1.2rem .5rem}
.pin-card{position:relative;background:var(--paper-2);border:2px solid var(--ink);padding:10px 10px 0;
  box-shadow:8px 11px 0 rgba(33,24,18,.26);transition:transform .4s cubic-bezier(.2,1.2,.3,1),box-shadow .4s;cursor:none}
/* the pin */
.pin-card::after{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--red),var(--crimson));
  box-shadow:1px 3px 3px rgba(0,0,0,.45),inset -2px -2px 3px rgba(0,0,0,.35);z-index:3}
.pin-card::before{content:"";position:absolute;top:-2px;left:50%;width:2px;height:14px;transform:translateX(-50%) rotate(8deg);
  background:rgba(33,24,18,.4);z-index:2}
.pin-photo{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink);border:2px solid var(--ink)}
.pin-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.pin-card .cap{display:block;text-align:center;font-family:'Special Elite',monospace;font-size:.72rem;
  letter-spacing:1.5px;color:var(--ink);padding:.6rem .2rem .55rem;text-transform:uppercase}
.pin-card .num{position:absolute;top:16px;left:16px;z-index:2;font-family:'Special Elite',monospace;font-size:.58rem;
  background:var(--ink);color:var(--paper);padding:1px 6px;letter-spacing:1px}
.pin-card:hover{transform:rotate(0deg) translateY(-6px) scale(1.04)!important;box-shadow:12px 16px 0 rgba(33,24,18,.3);z-index:5}
.pin-card:hover .pin-photo img{transform:scale(1.06)}
.pin-card .quote{position:absolute;inset:0;background:rgba(12,6,18,.9);color:var(--paper);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.1rem;font-style:italic;
  font-size:.95rem;line-height:1.4;opacity:0;transition:opacity .35s}
.pin-card:hover .quote{opacity:1}

/* ============================================================
   COMPLAINTS DESK / ROAST
   ============================================================ */
.desk{background:var(--purple-dd);color:var(--paper)}
.desk-wrap{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.intercom{background:var(--purple-d);border:3px solid var(--gold);padding:1.8rem;box-shadow:var(--shadow)}
.field-lbl{display:block;font-family:'Special Elite',monospace;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:.5rem}
.intercom textarea{width:100%;background:var(--purple-dd);color:var(--paper);border:2px solid var(--purple-l);
  font-family:'IM Fell English',serif;font-size:1.05rem;padding:.8rem;resize:none}
.intercom textarea:focus{outline:none;border-color:var(--gold)}
.press-btn{margin-top:1rem;width:100%;font-family:'Rye',serif;font-size:1.3rem;background:var(--crimson);color:var(--paper);
  border:3px solid var(--paper);padding:.7rem;box-shadow:5px 5px 0 rgba(0,0,0,.4);transition:transform .1s,box-shadow .1s;cursor:none}
.press-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,.4)}
.press-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(0,0,0,.4)}

.slot-machine{position:relative}
.slot-lip{font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:3px;text-align:center;color:var(--gold-lt);
  background:var(--purple-d);border:3px solid var(--gold);border-bottom:none;padding:.4rem;text-transform:uppercase}
.slot-window{border:3px solid var(--gold);background:var(--purple-dd);overflow:hidden;min-height:240px;
  box-shadow:inset 0 8px 14px rgba(0,0,0,.5);display:flex;justify-content:center;padding:1.4rem}
.receipt{align-self:flex-start;width:100%;max-width:320px;background:var(--paper);color:var(--ink);padding:1.2rem 1rem;
  border-radius:2px;box-shadow:0 6px 14px rgba(0,0,0,.5);text-align:center;position:relative;
  background-image:repeating-linear-gradient(var(--paper) 0 26px,rgba(0,0,0,.04) 26px 27px);
  transform:translateY(-130%)}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;
  background:repeating-linear-gradient(90deg,var(--paper) 0 8px,transparent 8px 12px)}
.receipt.print{animation:print-out 1s cubic-bezier(.3,1,.3,1) forwards}
@keyframes print-out{0%{transform:translateY(-130%)}70%{transform:translateY(6px)}100%{transform:translateY(0)}}
.receipt-head{display:block;font-family:'Special Elite',monospace;font-size:.62rem;letter-spacing:1px;border-bottom:2px dashed var(--ink-2);padding-bottom:.5rem;margin-bottom:.7rem}
.receipt-body{font-size:1rem;line-height:1.5;font-style:italic;min-height:3em}
.receipt-stamp{display:inline-block;margin:.8rem 0 .4rem;font-family:'Rye',serif;color:var(--crimson);
  border:3px double var(--crimson);padding:.1rem .7rem;transform:rotate(-7deg);font-size:1.1rem}
.receipt-foot{display:block;font-family:'Special Elite',monospace;font-size:.58rem;color:var(--ink-2);border-top:2px dashed var(--ink-2);padding-top:.5rem;margin-top:.7rem}

/* ============================================================
   CASTING BOOTH / FORGE
   ============================================================ */
.casting{background:var(--paper)}
.casting-wrap{max-width:980px;margin:0 auto;display:flex;gap:3rem;align-items:center;justify-content:center;flex-wrap:wrap}
.bell{position:relative;width:150px;height:120px;background:none;border:none;cursor:none;flex:none}
.bell-dome{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:110px;height:60px;
  border-radius:60px 60px 0 0;background:linear-gradient(180deg,#d9b35f,var(--gold));border:3px solid var(--ink);
  box-shadow:inset -6px -4px 10px rgba(0,0,0,.3)}
.bell-dome::after{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:16px;height:16px;
  border-radius:50%;background:var(--crimson);border:3px solid var(--ink)}
.bell-base{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:130px;text-align:center;
  font-family:'Special Elite',monospace;letter-spacing:3px;background:var(--ink);color:var(--paper);padding:.3rem;border:3px solid var(--ink)}
.bell.ring .bell-dome{animation:bell-shake .4s}
@keyframes bell-shake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(-58%) rotate(-4deg)}75%{transform:translateX(-42%) rotate(4deg)}}

.cabinet-card{display:flex;gap:1.2rem;background:var(--paper-2);border:3px solid var(--ink);padding:1rem;
  box-shadow:10px 12px 0 rgba(33,24,18,.22);max-width:480px;width:100%}
.cabinet-card.deal{animation:deal .55s cubic-bezier(.2,1.2,.3,1)}
@keyframes deal{0%{opacity:0;transform:translateY(-26px) rotate(-5deg)}100%{opacity:1;transform:none}}
.cc-photo{position:relative;flex:none;width:160px;border:2px solid var(--ink);overflow:hidden;background:var(--ink)}
.cc-photo img{width:100%;height:100%;object-fit:cover;transition:filter .4s}
.wax{position:absolute;bottom:8px;right:8px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:'Special Elite',monospace;font-size:.5rem;text-align:center;color:var(--paper);background:var(--crimson);
  border:2px dashed rgba(255,255,255,.6);box-shadow:1px 2px 3px rgba(0,0,0,.4);transform:scale(0)}
.wax.set{animation:stamp-hit .5s cubic-bezier(.2,1.5,.4,1) forwards}
.cc-body{flex:1}
.cc-id{font-family:'Special Elite',monospace;font-size:.72rem;color:var(--crimson)}
.cc-name{font-family:'Rye',serif;font-size:1.4rem;margin:.2rem 0;min-height:1.3em;color:var(--ink)}
.cc-bio{font-size:.95rem;font-style:italic;min-height:3em;color:var(--ink-2)}
.cc-traits{margin-top:.8rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem .8rem}
.cc-traits div{border-top:1px solid var(--ink);padding-top:.3rem}
.cc-traits dt{font-family:'Special Elite',monospace;font-size:.56rem;letter-spacing:1px;text-transform:uppercase;color:var(--crimson)}
.cc-traits dd{font-size:.85rem}

/* ============================================================
   MOOD GAUGE / METER
   ============================================================ */
.gauge-sec{background:var(--purple-d);color:var(--paper);text-align:center}
.gauge-wrap{max-width:520px;margin:0 auto}
.gauge{width:100%;max-width:420px}
.gauge-arc{stroke:var(--purple-l);stroke-width:14;stroke-linecap:round}
.gauge-arc-2{stroke:url(#none);stroke:var(--gold);stroke-width:3;stroke-dasharray:2 8;opacity:.7}
#ticks line{stroke:var(--paper);stroke-width:2}
.needle line{stroke:var(--crimson);stroke-width:5;stroke-linecap:round;
  transform-box:fill-box;transform-origin:150px 160px;
  transition:transform .9s cubic-bezier(.34,1.6,.5,1)}
.needle{transform-origin:150px 160px;transition:transform .9s cubic-bezier(.34,1.6,.5,1)}
.needle circle{fill:var(--ink);stroke:var(--gold);stroke-width:3}
.gauge-cap{font-family:'Special Elite',monospace;font-size:11px;fill:var(--paper);letter-spacing:1px}
.gauge-slider{-webkit-appearance:none;appearance:none;width:90%;max-width:380px;height:8px;background:var(--purple-dd);
  border:2px solid var(--gold);margin:1.4rem 0 1rem;cursor:none}
.gauge-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:34px;background:var(--crimson);
  border:3px solid var(--paper);cursor:none}
.gauge-slider::-moz-range-thumb{width:22px;height:34px;background:var(--crimson);border:3px solid var(--paper);cursor:none}
.gauge-read{font-family:'Special Elite',monospace;font-size:1rem;letter-spacing:1px;color:var(--gold-lt);min-height:1.4em;text-transform:uppercase}

/* ============================================================
   PROGRAMME / ROADMAP
   ============================================================ */
.programme{background:var(--paper)}
.acts{max-width:820px;margin:0 auto;list-style:none;counter-reset:none}
.act{border-bottom:2px solid var(--ink)}
.act:first-child{border-top:2px solid var(--ink)}
.act-row{width:100%;display:flex;align-items:baseline;gap:.6rem;background:none;border:none;cursor:none;
  padding:1.3rem .4rem;text-align:left;transition:background .2s}
.act-row:hover{background:var(--paper-dk)}
.act-no{font-family:'Rye',serif;font-size:1.3rem;color:var(--crimson);white-space:nowrap}
.act-lead{flex:1;border-bottom:3px dotted var(--ink-2);transform:translateY(-6px)}
.act-name{font-family:'Abril Fatface',serif;font-size:clamp(1.4rem,4vw,2.2rem);white-space:nowrap}
.act-desc{max-height:0;overflow:hidden;transition:max-height .45s ease}
.act-desc p{padding:0 .4rem 1.4rem;font-size:1.05rem;font-style:italic;color:var(--ink-2);max-width:90%}
.act.open .act-desc{max-height:200px}
.act.open .act-name{color:var(--crimson)}

/* ============================================================
   APPLICATION FOR ADMISSION / WHITELIST
   ============================================================ */
.apply{background:var(--purple-dd);color:var(--paper)}
.form-ticket{position:relative;max-width:760px;margin:0 auto;background:var(--paper);color:var(--ink);
  display:grid;grid-template-columns:1fr 180px;box-shadow:16px 18px 0 rgba(0,0,0,.4);border:3px solid var(--ink)}
.ticket-perf{position:absolute;top:0;bottom:0;width:3px;
  background-image:radial-gradient(circle,var(--purple-dd) 3px,transparent 3.5px);background-size:3px 18px;background-repeat:repeat-y}
.ticket-perf.right{right:180px}
.form-main{padding:1.8rem 2rem;position:relative;overflow:hidden}
.form-titlebar{display:flex;justify-content:space-between;font-family:'Special Elite',monospace;font-size:.7rem;
  letter-spacing:2px;border-bottom:3px double var(--ink);padding-bottom:.7rem;margin-bottom:1.4rem;text-transform:uppercase}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:block}.field.wide{grid-column:1/-1}
.field .field-lbl{color:var(--crimson)}
.field input,.field textarea{width:100%;background:transparent;border:none;border-bottom:2px solid var(--ink);
  font-family:'Special Elite',monospace;font-size:.95rem;padding:.4rem .2rem;color:var(--ink);resize:none}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--crimson);background:rgba(168,29,24,.05)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:.6}
.submit-btn{margin-top:1.6rem;font-family:'Rye',serif;font-size:1.5rem;background:var(--crimson);color:var(--paper);
  border:3px solid var(--ink);padding:.7rem 1.8rem;box-shadow:5px 5px 0 var(--ink);cursor:none;
  transition:transform .1s,box-shadow .1s}
.submit-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.submit-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.submit-btn.done{background:var(--ink-2);pointer-events:none}
.form-err{font-family:'Special Elite',monospace;font-size:.75rem;color:var(--crimson);margin-top:.7rem;min-height:1.2em}

/* the slam stamp */
.stamp{position:absolute;top:42%;left:50%;font-family:'Rye',serif;font-size:clamp(3rem,9vw,6rem);
  color:var(--crimson);border:6px double var(--crimson);padding:.1rem 1.4rem;letter-spacing:4px;
  opacity:0;transform:translate(-50%,-50%) scale(2.6) rotate(-16deg);pointer-events:none;
  text-shadow:2px 2px 0 rgba(0,0,0,.15);mix-blend-mode:multiply}
.stamp.hit{animation:slam .55s cubic-bezier(.2,1.6,.35,1) forwards}
@keyframes slam{
  0%{opacity:0;transform:translate(-50%,-50%) scale(2.6) rotate(-16deg)}
  55%{opacity:.95;transform:translate(-50%,-50%) scale(.92) rotate(-15deg)}
  72%{transform:translate(-50%,-50%) scale(1.05) rotate(-13deg)}
  100%{opacity:.92;transform:translate(-50%,-50%) scale(1) rotate(-14deg)}
}
.splatter{position:absolute;top:42%;left:50%;width:10px;height:10px;pointer-events:none}
.splatter span{position:absolute;border-radius:50%;background:var(--crimson);opacity:0}
.splatter.go span{animation:splat .6s ease-out forwards}
@keyframes splat{0%{opacity:.6;transform:translate(0,0) scale(.2)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1)}}

.form-stub{background:var(--paper-dk);border-left:3px dashed var(--ink);padding:1.6rem 1rem;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.stub-lbl{font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:3px;color:var(--crimson)}
.stub-no{font-family:'Rye',serif;font-size:1.5rem}
.stub-note{font-family:'Special Elite',monospace;font-size:.66rem;color:var(--ink-2);line-height:1.5}

/* ---- application: steps ---- */
.step{display:flex;gap:1.1rem;margin-bottom:1.8rem}
.step-no{flex:none;width:38px;height:38px;border-radius:50%;border:3px solid var(--ink);background:var(--crimson);
  color:var(--paper);font-family:'Rye',serif;font-size:1.2rem;display:grid;place-items:center;
  box-shadow:3px 3px 0 var(--ink)}
.step-body{flex:1;min-width:0}
.step-title{display:block;font-family:'IM Fell English SC',serif;font-size:1.3rem;margin-bottom:.9rem;color:var(--ink)}
.step-title em{font-family:'Special Elite',monospace;font-size:.72rem;letter-spacing:1px;color:var(--crimson);font-style:normal}

.input-at{display:flex;align-items:center;border-bottom:2px solid var(--ink)}
.input-at i{font-family:'Special Elite',monospace;font-style:normal;color:var(--crimson);padding:.4rem .1rem .4rem 0;font-size:.95rem}
.input-at input{border-bottom:none!important}
.field{position:relative}
.field-tick{position:absolute;right:.1rem;bottom:.45rem;width:18px;height:18px;opacity:0;transform:scale(0);
  transition:opacity .25s,transform .25s;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13l6 6L21 5' fill='none' stroke='%233f7a46' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.field.ok .field-tick{opacity:1;transform:scale(1)}
.field.bad input,.field.bad .input-at{border-color:var(--crimson)!important}

/* ---- application: tasks ---- */
.tasks{list-style:none;display:grid;gap:.7rem}
.task{display:flex;align-items:center;gap:.9rem;border:2px solid var(--ink);background:var(--paper-dk);
  padding:.6rem .8rem;transition:background .3s,transform .15s,box-shadow .3s}
.task-box{flex:none;width:30px;height:30px;border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center}
.task-check{width:26px;height:20px}
.task-text{flex:1;font-size:1rem;min-width:0}
.task-text b{color:var(--crimson)}
.task-text .amp{color:var(--crimson);font-family:'Rye',serif}
.task-actions{display:flex;gap:.4rem;flex:none}
.task-btn{font-family:'Special Elite',monospace;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:.4rem .8rem;cursor:none;
  box-shadow:2px 2px 0 rgba(33,24,18,.4);transition:transform .1s,box-shadow .1s,background .2s}
.task-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(33,24,18,.4);background:var(--crimson)}
.task-btn:active{transform:translate(2px,2px);box-shadow:none}
.task-btn.hit{background:var(--crimson);opacity:.55;text-decoration:line-through}
.task.done{background:#dfe9cf;transform:translateX(2px)}
.task.done .task-text{color:var(--ink-2)}
.task.done .task-box{background:#cfe0b8;border-color:#3f7a46}
.task.done .task-actions{opacity:.4;pointer-events:none}
.task.bad{animation:none;box-shadow:0 0 0 2px var(--crimson)}

.tasks-progress{display:flex;align-items:center;gap:.8rem;margin-top:1rem}
.tp-bar{flex:1;height:10px;background:var(--paper);border:2px solid var(--ink);position:relative;overflow:hidden}
.tp-bar::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:repeating-linear-gradient(45deg,var(--crimson) 0 7px,#8f1814 7px 14px);transition:width .5s cubic-bezier(.3,1.2,.4,1)}
.tp-lbl{font-family:'Special Elite',monospace;font-size:.72rem;letter-spacing:1px;color:var(--ink-2);white-space:nowrap}

.submit-btn:disabled{background:var(--ink-2);box-shadow:3px 3px 0 rgba(33,24,18,.35);opacity:.65;cursor:none}
.submit-btn:disabled:hover{transform:none;box-shadow:3px 3px 0 rgba(33,24,18,.35)}
.submit-btn.ready{animation:btn-throb 1.6s ease-in-out infinite}
@keyframes btn-throb{50%{box-shadow:5px 5px 0 var(--ink),0 0 0 4px rgba(168,29,24,.25)}}

/* ============================================================
   FINE PRINT / FAQ
   ============================================================ */
.fineprint{background:var(--paper)}
.clauses{max-width:820px;margin:0 auto;column-gap:0}
.clause{border-bottom:2px solid var(--ink)}
.clause:first-child{border-top:2px solid var(--ink)}
.clause-q{width:100%;text-align:left;background:none;border:none;cursor:none;padding:1.1rem .4rem;
  font-family:'IM Fell English SC',serif;font-size:1.2rem;display:flex;gap:.7rem;align-items:baseline;transition:color .2s}
.clause-q:hover{color:var(--crimson)}
.cl-no{font-family:'Special Elite',monospace;font-size:.8rem;color:var(--crimson);flex:none}
.clause-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.clause-a p{padding:0 .4rem 1.2rem 2rem;color:var(--ink-2);font-style:italic}
.clause.open .clause-a{max-height:200px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--purple-dd);color:var(--paper);text-align:center;padding:4rem 5vw 3rem}
.foot-rule{color:var(--gold);margin-bottom:1.6rem}
.foot-rule .orn-fl{width:60px;height:30px}
.foot-sign{font-family:'Rye',serif;font-size:clamp(1.8rem,6vw,3.4rem);color:var(--red);letter-spacing:3px;
  text-shadow:3px 3px 0 var(--ink);margin-bottom:1.8rem;animation:flicker 5s infinite}
@keyframes flicker{0%,18%,22%,100%{opacity:1}20%{opacity:.45}80%{opacity:.7}82%{opacity:1}}
.foot-marks{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;font-family:'Special Elite',monospace;
  font-size:.85rem;letter-spacing:1px;margin-bottom:1.6rem}
.foot-marks .mark{border-bottom:2px dotted var(--purple-l);padding-bottom:3px;transition:color .2s,border-color .2s}
.foot-marks .mark:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
.foot-copy{font-family:'Special Elite',monospace;font-size:.72rem;color:var(--purple-l)}
.foot-egg{font-family:'Special Elite',monospace;font-size:.66rem;color:var(--purple-l);opacity:.6;margin-top:.6rem;cursor:none}

/* ============================================================
   TOAST
   ============================================================ */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(140px);z-index:9000;
  background:var(--ink);color:var(--paper);font-family:'Special Elite',monospace;font-size:.85rem;letter-spacing:1px;
  padding:.8rem 1.4rem;border:2px solid var(--gold);box-shadow:5px 5px 0 rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.2,1.4,.4,1);
  max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .index,.apply-tab{display:none}
  .prog-toggle{display:flex}
  .topbar.open .index{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:.9rem;
    background:var(--paper);padding:1.2rem 5vw;border-bottom:3px double var(--ink)}
  .bill-meta{grid-template-columns:1fr;gap:1.8rem}
  .notice-grid{grid-template-columns:1fr;gap:2rem}
  .cabinet{position:static}
  .desk-wrap{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:620px){
  body{font-size:17px}
  section{padding:4.5rem 6vw}
  .form-ticket{grid-template-columns:1fr}
  .ticket-perf.right{display:none}
  .form-stub{border-left:none;border-top:3px dashed var(--ink);flex-direction:row;flex-wrap:wrap}
  .fields{grid-template-columns:1fr}
  .cabinet-card{flex-direction:column}
  .cc-photo{width:100%;height:220px}
  .cc-traits{grid-template-columns:1fr 1fr}
  .seal{width:84px;height:84px;top:-16px;right:-12px}
}

@media(max-width:560px){
  .task{flex-wrap:wrap;row-gap:.5rem}
  .task-text{flex:1 1 calc(100% - 42px)}
  .task-actions{width:100%;justify-content:flex-start;padding-left:42px}
  .task-btn{flex:1;text-align:center}
  .step{gap:.7rem}
  .step-no{width:32px;height:32px;font-size:1rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.12s!important}
  .rev,[data-print]{opacity:1!important;transform:none!important}
  .cursor{display:none}
  body{cursor:auto}
}