/* =========================================================
   Credits & Contacts: two full-screen scenes, nothing else.
   1. A dusty trophy cabinet: a spider knocks the lone trophy over.
   2. It switches to a dressing-room mirror of sticky-note endorsements.
   ========================================================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ca h1{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.88;margin:0;font-variation-settings:"wdth" 75}

/* the stage fills the screen under the top bar; scenes sit on top of each other */
.stage{position:relative;height:calc(100vh - 67px);height:calc(100svh - 67px);overflow:hidden;
  margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
.slide{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;
  padding:clamp(12px,3vh,32px) max(16px,env(safe-area-inset-left,0px))}
.slide-cab{z-index:2;background:var(--vault);transition:transform 1s cubic-bezier(.75,0,.2,1)}
.slide-mirror{z-index:1;overflow-y:auto}
.stage.switched .slide-cab{transform:translateY(-100%)}
.stage.switched .slide-mirror{z-index:3}
.stage:not(.switched) .slide-mirror{visibility:hidden}

/* ---------- scene 1: the trophy cabinet ---------- */
.cabinet{margin:0;cursor:pointer;width:100%;display:grid;justify-items:center}
.cabinet svg{display:block;width:min(100%,calc((100svh - 67px - 64px) * 600 / 340));height:auto;max-width:100%;border-radius:6px;
  box-shadow:0 30px 60px -30px #000,0 0 0 6px #1a110a,0 0 0 7px #2c1c10}
/* SVG parts pivot in the drawing's own coordinates */
.cabinet .trophy,.cabinet .spider,.cabinet .thread,.cabinet .puff circle{transform-box:view-box}
.cabinet .trophy{transform-origin:268px 300px}
.cabinet .thread{transform-origin:282px 0px}
.cabinet .spider{transform:translateY(-140px)}
.cabinet .thread{transform:scaleY(0)}
.cabinet .puff circle{opacity:0;transform-origin:436px 296px}
.cabinet .motes circle{animation:mote 9s ease-in-out infinite}
.cabinet .motes circle:nth-child(2){animation-delay:-2s;animation-duration:11s}.cabinet .motes circle:nth-child(3){animation-delay:-4s}
.cabinet .motes circle:nth-child(4){animation-delay:-6s;animation-duration:12s}.cabinet .motes circle:nth-child(5){animation-delay:-1s;animation-duration:10s}
@keyframes mote{0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(-14px,22px);opacity:.55}}

/* the sequence: spider drops (0.6–1.6s), nudges, trophy wobbles and falls (1.8–3.4s), dust, spider goes home (3.6–4.8s) */
.cabinet.play .spider{animation:spiderDrop 5s cubic-bezier(.4,0,.2,1) .4s both}
.cabinet.play .thread{animation:threadDrop 5s cubic-bezier(.4,0,.2,1) .4s both}
.cabinet.play .trophy{animation:topple 5s .4s both}
.cabinet.play .puff circle{animation:puff 5s .4s both}
.cabinet.play .puff circle:nth-child(2){animation-name:puff2}.cabinet.play .puff circle:nth-child(3){animation-name:puff3}
@keyframes spiderDrop{0%{transform:translateY(-140px)}22%{transform:translateY(0)}26%{transform:translateY(-4px)}30%{transform:translateY(0) translateX(3px)}
  34%{transform:translateY(0)}72%{transform:translateY(0)}100%{transform:translateY(-140px)}}
@keyframes threadDrop{0%{transform:scaleY(0)}22%{transform:scaleY(1)}72%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes topple{0%,30%{transform:rotate(0)}34%{transform:rotate(3deg)}38%{transform:rotate(-2.5deg)}42%{transform:rotate(5deg)}46%{transform:rotate(-1deg)}
  50%{transform:rotate(9deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}62%{transform:rotate(90deg)}65%{transform:rotate(84deg)}68%{transform:rotate(90deg)}
  70%{transform:rotate(88deg)}72%,100%{transform:rotate(90deg)}}
@keyframes puff{0%,61%{opacity:0;transform:scale(.3)}64%{opacity:.6}80%,100%{opacity:0;transform:scale(2.4) translate(0,-6px)}}
@keyframes puff2{0%,61%{opacity:0;transform:scale(.3)}64%{opacity:.5}82%,100%{opacity:0;transform:scale(2.2) translate(8px,-8px)}}
@keyframes puff3{0%,61%{opacity:0;transform:scale(.3)}64%{opacity:.5}82%,100%{opacity:0;transform:scale(2.2) translate(-8px,-6px)}}
/* with real credits the trophy stands proud and the cobweb has been dusted off */
.cabinet.has-credits .trophy{animation:none;transform:none}
.cabinet.has-credits .spider,.cabinet.has-credits .thread,.cabinet.has-credits .web,.cabinet.has-credits .puff{display:none}
.cabinet.has-credits .again{display:none}

/* credits as engraved brass plaques along the bottom of the scene */
.plaques{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1100px}
.plaques:empty{display:none}
.plaque-card{display:grid;gap:3px;padding:10px 14px;border-radius:3px;text-align:center;color:#3a2a08;min-width:180px;
  background:linear-gradient(90deg,#8A6416,#F6D57A 35%,#C99A2E 60%,#7a5812);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.25),0 6px 14px -6px #000}
.plaque-card .role{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.plaque-card .title{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.05;text-transform:uppercase;font-variation-settings:"wdth" 85;
  text-shadow:0 1px 0 rgba(255,255,255,.35)}
.plaque-card .meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;opacity:.75}
.has-credits-stage .cabinet svg{width:min(100%,calc((100svh - 67px - 170px) * 600 / 340))}

/* ---------- scene 2: the dressing-room mirror ---------- */
.mirror{position:relative;padding:34px;border-radius:10px;background:linear-gradient(180deg,#2a2622,#171411);
  box-shadow:inset 0 0 0 2px #3b352e,0 30px 60px -30px #000}
.bulbs{position:absolute;inset:0;pointer-events:none}
.bulb{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffbe8,#ffd98a 45%,#c8892a 75%);box-shadow:0 0 12px 3px rgba(255,214,130,.55),0 0 34px 8px rgba(255,190,90,.18)}
.bulb.flicker{animation:flicker 7s steps(1) infinite}
.bulb.dead{background:radial-gradient(circle at 40% 35%,#5a554c,#2e2a25 70%);box-shadow:none}
@keyframes flicker{0%,100%{opacity:1}52%{opacity:.25}53%{opacity:1}55%{opacity:.35}56%{opacity:1}}
.glass{position:relative;min-height:340px;border-radius:4px;padding:28px 24px 30px;overflow:hidden;
  background:linear-gradient(135deg,#1c2124 0%,#0e1113 45%,#171c1f 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.8),inset 0 0 0 1px #000}
.glass::before{content:"";position:absolute;inset:-40% -10%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.06) 47%,transparent 54%)}
.scrawl{position:relative;margin:0 0 18px;text-align:center;font-family:"Permanent Marker","Bradley Hand",cursive;font-size:clamp(26px,4.4vw,46px);line-height:1;
  color:#e8434b;transform:rotate(-3deg);text-shadow:0 0 1px rgba(232,67,75,.6);opacity:.9}
.notes{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.note{position:relative;width:min(240px,100%);min-height:180px;padding:22px 18px 18px;display:grid;align-content:start;gap:8px;color:#222;
  background:var(--paper,#fdf0a6);transform:rotate(var(--tilt,0deg));box-shadow:0 10px 18px -8px rgba(0,0,0,.7),inset 0 -14px 20px -16px rgba(0,0,0,.25)}
.note::before{content:"";position:absolute;top:-10px;left:50%;width:64px;height:20px;margin-left:-32px;background:rgba(255,255,255,.45);
  transform:rotate(-2deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.note .who{font-family:"Permanent Marker","Bradley Hand",cursive;font-size:22px;line-height:1.1;overflow-wrap:anywhere}
.note .role{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#5a5547}
.note .li{justify-self:start;display:inline-flex;align-items:center;margin-top:4px;text-decoration:none;color:#1d3f6e;border-radius:3px;
  transform:rotate(-2deg);transition:transform .15s}
.note .li:hover,.note .li:focus-visible{transform:rotate(0) scale(1.08)}
.note .li img{display:block;width:26px;height:26px;object-fit:contain}
.note .li-txt{font-family:"Permanent Marker","Bradley Hand",cursive;font-size:15px;border-bottom:2px solid currentColor;line-height:1.2}
.note .what{font-family:var(--body);font-size:15px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.empty-note{margin:0 auto;--paper:#fdf0a6;--tilt:2deg}
.empty-note .who{color:#8a7f5c}
.note.is-new{animation:stick .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stick{from{opacity:0;transform:translateY(-14px) rotate(calc(var(--tilt,0deg) - 6deg)) scale(1.04)}}

.slide-mirror .mirror{width:min(1100px,100%);margin:auto 0}
.slide-mirror .glass{min-height:min(62svh,560px);display:grid;align-content:center;justify-items:center;gap:20px}
.slide-mirror .scrawl{margin:0}
/* fine print sits low on the glass; the ask sits quietly under the mirror */
.slide-mirror .glass{padding-bottom:56px}
.slide-mirror .glass .fine{position:absolute;left:0;right:0;bottom:16px;text-align:center;padding-inline:16px}
.ask{margin:0;font-family:var(--body);font-size:15px;color:var(--dim);text-align:center}
.ask a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(255,24,36,.5);margin-left:.35em;padding-bottom:1px}
.ask a:hover,.ask a:focus-visible{border-bottom-color:var(--tally);outline:none}
.ask .mail{margin-right:.35em;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
/* bulbs switch on one after another as the mirror comes up */
.stage:not(.switched) .bulb{opacity:.08;box-shadow:none}
.stage.switched .bulb{animation:bulbOn .25s steps(1) both;animation-delay:calc(var(--i) * 28ms + .5s)}
.stage.switched .bulb.flicker{animation:bulbOn .25s steps(1) both,flicker 7s steps(1) infinite;animation-delay:calc(var(--i) * 28ms + .5s),calc(var(--i) * 28ms + 2s)}
@keyframes bulbOn{from{opacity:.08;box-shadow:none}to{opacity:1}}
.lipstick{margin:4px 0 0;font-family:"Permanent Marker","Bradley Hand",cursive;font-size:clamp(20px,2.8vw,30px);transform:rotate(-1.5deg)}
.lipstick a{color:#e8434b;text-decoration:none;border-bottom:2px solid rgba(232,67,75,.35)}
.lipstick a:hover,.lipstick a:focus-visible{border-bottom-color:#e8434b;outline:none}
.lipstick .mail{display:inline-block;margin-right:.25em;font-size:.9em;transform:rotate(-8deg);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.fine{margin:0;font-family:var(--body);font-size:12.5px;color:#6b6f73}
.fine a{color:#9a9ea2}
/* the page footer sits under the stage */
.stage + .site-foot{margin-top:0}

@media (max-width:560px){.mirror{padding:22px}.glass{padding:20px 14px 24px}.bulb{width:12px;height:12px;margin:-6px 0 0 -6px}
  .slide{place-items:center}}
@media (prefers-reduced-motion:reduce){
  .cabinet .motes circle,.bulb.flicker,.note.is-new{animation:none}
  .slide-cab{transition:opacity .4s}
  .stage.switched .slide-cab{transform:none;opacity:0;pointer-events:none}
  .stage.switched .bulb{animation:none;opacity:1}
}

/* ---------- Credits & Contacts admin (private) ---------- */
.ca{max-width:980px;margin:0 auto;padding-block:clamp(24px,5vh,56px) 90px;display:grid;gap:22px}
.ca #editor:not([hidden]){display:grid;gap:22px}
.ca #editor > p{margin:0}
.ca #editor > p.hint{margin-top:-12px}
.ca #editor .rows:empty{display:none}
.ca h1{font-size:clamp(40px,7vw,80px)}
.ca h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:.04em;margin:10px 0 0;font-variation-settings:"wdth" 90}
.ca .hint{font-family:var(--body);font-size:14.5px;line-height:1.5;color:var(--faint);margin:-12px 0 0;max-width:62ch}
.unlock{display:grid;gap:8px;max-width:520px}
.unlock label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.unlock-row{display:flex;gap:8px}
.ca input,.ca textarea{width:100%;min-width:0;background:#0e0e0e;border:1px solid #2c2c2c;color:var(--bone);font-family:var(--body);font-size:15px;padding:9px 11px;border-radius:3px}
.ca textarea{resize:vertical;min-height:64px;line-height:1.5}
.ca input:focus,.ca textarea:focus{outline:none;border-color:var(--tally)}
.status{font-family:var(--body);font-size:14px;color:var(--dim);margin:0;min-height:1.4em}
.status.err{color:#ff6b74}.status.ok{color:#7be09d}
.key{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:3px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,#1a1a1a,#0e0e0e);border:1px solid #2c2c2c;color:var(--bone);font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 0 #000}
.key:hover{border-color:var(--faint)}
.key:disabled{opacity:.35;cursor:default}
.key.go{border-color:var(--tally);color:#fff;background:linear-gradient(180deg,#3a0a0e,#1c0507)}
.key.no{color:#ff8a92}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.row{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:4px;background:#070707}
.row .fields{display:grid;gap:8px}
.row.credit .fields{grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,1fr) minmax(0,3fr)}
.row.contact .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.row.contact .fields label:nth-child(n+3){grid-column:1/-1}
.row .acts{display:flex;gap:6px;justify-content:flex-end}
.row label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:grid;gap:4px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;bottom:0;padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--vault);border-top:1px solid var(--line)}
@media (max-width:720px){.row.credit .fields,.row.contact .fields{grid-template-columns:1fr}}