/* ═══ STAFF — roster cards + profile popup (redesign) ═══
   Cards: portrait-led, jagged lower edge, text open on the page.
   Popup: banner → portrait + name → description lede → two columns (About Me | facts).
   Light = red-led, dark = gold-led (via --nav-accent). Data: Firestore admins/{uid}. */

/* ── cards ── */
.staff-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))!important;gap:3rem 1.8rem!important}
.sc{display:flex!important;flex-direction:column;gap:0!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;cursor:pointer;text-align:left}
.sc:hover,.sc:focus-within{background:none!important;transform:none!important;box-shadow:none!important}
.sc-av-wrap{position:relative;width:100%!important;height:auto!important;aspect-ratio:4/5;border-radius:0!important;border:0!important;box-shadow:none!important;overflow:visible;
  background:color-mix(in srgb,var(--text) 8%,transparent)!important;display:grid;place-items:center;
  -webkit-mask:var(--torn-bottom) 0 100%/100% 26px no-repeat,linear-gradient(#000,#000) 0 0/100% calc(100% - 25px) no-repeat;
  mask:var(--torn-bottom) 0 100%/100% 26px no-repeat,linear-gradient(#000,#000) 0 0/100% calc(100% - 25px) no-repeat}
.sc-av-wrap img{width:100%!important;height:100%!important;border-radius:0!important;object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.08);transition:filter .45s;transform:none!important}
.sc:hover .sc-av-wrap img,.sc:focus-within .sc-av-wrap img{filter:none;transform:none!important}
.sc:hover .sc-av-wrap{box-shadow:none!important}
.sc-av-initials{font:400 4.5rem/1 var(--f-display);color:var(--nav-accent)}
.sc-status-dot{position:absolute;right:.6rem;top:.6rem;bottom:auto!important;left:auto!important;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg)}
.sc-body{display:grid;gap:.25rem;margin-top:.9rem;align-self:stretch}
.sc-role{font:700 .7rem/1.3 var(--f-label);letter-spacing:.26em;text-transform:uppercase;color:var(--nav-accent)!important}
.sc-name{font:400 clamp(1.7rem,2.4vw,2.1rem)/1 var(--f-display);text-transform:uppercase;color:var(--text);overflow-wrap:anywhere}
.sc-handle{font:600 .82rem/1.3 var(--f-label);letter-spacing:.1em;color:var(--text-muted)}
.sc-desc{margin:.45rem 0 0;font:500 .92rem/1.55 var(--f-body);color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sc-bday{margin-top:.35rem;font:700 .7rem/1.2 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}
.sc-view{align-self:flex-start;margin-top:.8rem;padding:0 0 .25rem;background:linear-gradient(var(--nav-accent),var(--nav-accent)) 0 100%/0 2px no-repeat;border:0;font:700 .74rem/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);transition:background-size .3s,color .2s;opacity:1!important;transform:none!important}
.sc-view::after{content:' →'}
.sc:hover .sc-view,.sc-view:focus-visible{background-size:100% 2px;color:var(--text)}
@media(max-width:560px){.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2.2rem 1rem!important}.sc-name{font-size:1.45rem}.sc-desc{font-size:.85rem;-webkit-line-clamp:2}}

/* ── popup ── */
.dc-modal-card{width:min(940px,calc(100% - 1.5rem))!important;max-width:none!important;max-height:92vh;overflow:hidden;background:var(--bg)!important;color:var(--text);border:0!important;border-radius:0!important;
  box-shadow:0 30px 80px rgba(0,0,0,.55)!important;display:flex;flex-direction:column}
:root[data-theme="dark"] .dc-modal-card{box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--nav-accent) 30%,transparent)!important}
:root[data-theme="light"] .dc-modal-card{box-shadow:0 30px 70px rgba(60,20,20,.35),0 0 0 2px #0B0708!important}
.dc-staff-modal{background:none!important;border:0!important;border-radius:0!important;overflow-y:auto;max-height:92vh;scrollbar-width:thin;scrollbar-color:var(--nav-accent) transparent}
.dc-sm-close{position:absolute!important;top:.8rem;right:.8rem;z-index:20;width:40px!important;height:40px!important;display:grid;place-items:center;border:0!important;border-radius:0!important;background:var(--bg)!important;color:var(--text)!important;transition:background-color .2s,color .2s}
.dc-sm-close:hover,.dc-sm-close:focus-visible{background:var(--blood)!important;color:#FFF4E4!important}
.dc-sm-banner{position:relative;height:clamp(120px,22vw,190px)!important;margin:0!important;border:0!important;
  -webkit-mask:var(--torn-bottom) 0 100%/100% 30px no-repeat,linear-gradient(#000,#000) 0 0/100% calc(100% - 29px) no-repeat;mask:var(--torn-bottom) 0 100%/100% 30px no-repeat,linear-gradient(#000,#000) 0 0/100% calc(100% - 29px) no-repeat}
.dc-sm-banner-real{width:100%;height:100%;object-fit:cover}
.dc-sm-avatar-row{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:0 clamp(1.2rem,4vw,2.6rem)!important;margin-top:-62px!important;z-index:2}
.dc-sm-avatar-wrap{position:relative}
.dc-sm-avatar{width:112px!important;height:140px!important;border-radius:0!important;border:0!important;background:var(--surface2)!important;overflow:hidden;box-shadow:6px 6px 0 var(--nav-accent)!important}
.dc-sm-avatar img{width:100%;height:100%;object-fit:cover}
.dc-sm-status-dot{right:-6px!important;bottom:-6px!important;border:3px solid var(--bg)!important}
.dc-sm-badges{display:flex;flex-wrap:wrap;gap:.4rem .9rem;padding-bottom:.4rem}
.dc-sm-badge{background:none!important;border:0!important;padding:0!important;font:700 .74rem/1 var(--f-label);letter-spacing:.26em;text-transform:uppercase;color:var(--nav-accent)!important}
.dc-sm-body{padding:1.4rem clamp(1.2rem,4vw,2.6rem) clamp(1.6rem,4vw,2.6rem)!important;background:none!important}
.dc-sm-head{display:grid;gap:.5rem}
.dc-sm-name{font:400 clamp(2.6rem,7vw,4.4rem)/.95 var(--f-display)!important;text-transform:uppercase;transform:skewX(-6deg);color:var(--text)!important;overflow-wrap:anywhere}
.dc-sm-handle-row{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.dc-sm-handle{font:600 .95rem/1 var(--f-label);letter-spacing:.1em;color:var(--text-dim)!important}
.dc-sm-uid{font:500 .75rem/1 var(--f-label);letter-spacing:.1em;color:var(--text-muted)!important;background:none!important;border:0!important;padding:0!important}
.dc-sm-desc{margin:.8rem 0 0;padding:.1rem 0 .1rem 1.1rem;border-left:3px solid var(--nav-accent);font:500 clamp(1.1rem,2.4vw,1.35rem)/1.5 var(--f-serif);color:var(--text);max-width:60ch}
.dc-sm-desc[hidden]{display:none}
.dc-sm-cols{display:grid;gap:2rem;margin-top:2rem}
@media(min-width:780px){.dc-sm-cols{grid-template-columns:minmax(0,1.65fr) minmax(210px,1fr);gap:3rem}}
.dc-sm-label{display:block;margin:0 0 .8rem;font:700 .72rem/1 var(--f-label);letter-spacing:.32em;text-transform:uppercase;color:var(--nav-accent)!important}
.dc-sm-val{font:400 1rem/1.85 var(--f-body);color:var(--text-dim)!important;white-space:pre-wrap;overflow-wrap:anywhere}
.dc-sm-facts{margin:0 0 1.8rem;display:grid;gap:.9rem;padding:0 0 0 1rem;border-left:2px solid color-mix(in srgb,var(--text) 16%,transparent)}
.dc-sm-facts>div[hidden]{display:none}
.dc-sm-facts dt{font:700 .68rem/1 var(--f-label);letter-spacing:.26em;text-transform:uppercase;color:var(--text-muted);margin:0 0 .3rem}
.dc-sm-facts dd{margin:0;font:600 1.02rem/1.3 var(--f-body);color:var(--text)}
.dc-sm-roles{display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.dc-sm-divider{display:none}
.sc-body{padding:0!important}.sc-view{margin-left:0!important}

/* ── round 2 fixes ── */
/* card: legacy absolute "View Profile" bar collided with the handle */
.sc .sc-view{position:static!important;inset:auto!important;grid-area:auto!important;width:auto!important;display:inline-block;background-color:transparent!important;text-align:left;padding:0 0 .3rem!important;margin:.9rem 0 0!important;color:var(--text)!important;font-size:.78rem!important}
.sc:hover .sc-view{background-color:transparent!important;color:var(--text)!important}
.sc-handle{position:static!important;margin:0!important}
.sc-role{font-size:.78rem!important;letter-spacing:.2em!important}
.sc-handle{font-size:.88rem!important;color:var(--text-dim)!important}
.sc-bday{font-size:.76rem!important;color:var(--text-dim)!important}
:root[data-theme="light"] .sc-role{color:#9E1B22!important}
:root[data-theme="dark"] .sc-role{color:#F0C25A!important}
.sc-av-initials{text-shadow:none!important}
:root[data-theme="light"] .sc-av-wrap{background:#DCCDB0!important}
/* popup labels */
.dc-sm-label{font-size:.8rem!important;letter-spacing:.24em!important}
.dc-sm-facts dt{font-size:.76rem!important;letter-spacing:.2em!important;color:var(--text-dim)!important}
.dc-sm-facts dd{font-size:1.05rem!important}
.dc-sm-badge{font-size:.8rem!important;letter-spacing:.2em!important}
:root[data-theme="light"] .dc-sm-label,:root[data-theme="light"] .dc-sm-badge{color:#9E1B22!important}
:root[data-theme="dark"] .dc-sm-label,:root[data-theme="dark"] .dc-sm-badge{color:#F0C25A!important}
.dc-sm-handle{color:var(--text)!important;font-size:1rem!important}
.dc-sm-uid{font-size:.8rem!important;color:var(--text-dim)!important}
.dc-sm-val{color:var(--text)!important;opacity:.88}
/* status: sits in the empty space beside the portrait */
.dc-sm-avatar-row{align-items:flex-end;gap:1rem 1.2rem}
.dc-sm-avatar-row .dc-sm-status-bar{order:2;flex:1 1 0;min-width:0;margin:0 0 .5rem!important;align-self:flex-end;max-width:min(520px,100%);
  padding:.55rem .9rem!important;font:600 .92rem/1.4 var(--f-body);color:var(--text)!important;background:var(--surface2)!important;border:2px solid var(--nav-accent)!important;box-shadow:4px 4px 0 color-mix(in srgb,var(--nav-accent) 55%,transparent)!important;overflow-wrap:anywhere}
.dc-sm-avatar-row .dc-sm-status-bar::before{content:'';position:absolute;left:-9px;top:auto;bottom:14px;width:14px;height:14px;background:var(--surface2)!important;border:0!important;border-left:2px solid var(--nav-accent)!important;border-bottom:2px solid var(--nav-accent)!important;transform:rotate(45deg)}
.dc-sm-avatar-row .dc-sm-badges{order:3;margin-left:auto}
.dc-sm-avatar-row .dc-sm-avatar-wrap{order:1}
.dc-sm-status-indicator{font-weight:700;letter-spacing:.1em}
@media(max-width:620px){
  .dc-sm-avatar-row{flex-wrap:wrap}
  .dc-sm-avatar-row .dc-sm-badges{order:2;margin-left:0;flex:1}
  .dc-sm-avatar-row .dc-sm-status-bar{order:3;flex:1 1 100%;max-width:none;margin-top:.5rem!important}
  .dc-sm-avatar-row .dc-sm-status-bar::before{left:26px;bottom:auto;top:-9px;transform:rotate(135deg)}
}
/* role badges: framed, per-role colour (--rc) */
.dc-sm-roles{display:flex;flex-wrap:wrap;gap:.5rem}
.dc-sm-role,.dc-sm-role-live{--rc:#8a8a9a;display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .65rem!important;border:2px solid var(--rc)!important;border-radius:0!important;box-shadow:none!important;
  font:700 .78rem/1.1 var(--f-label)!important;letter-spacing:.1em!important;text-transform:uppercase;white-space:nowrap}
.dc-sm-role::before{display:none!important}
.dc-sm-role-dot{width:8px!important;height:8px!important;border-radius:50%;background:var(--rc)!important;flex:none}
.dc-sm-role-admin{--rc:#E2B24A}.dc-sm-role-mod{--rc:#7C89FF}.dc-sm-role-trialmod{--rc:#78A0DC}.dc-sm-role-founder{--rc:#D4222C}.dc-sm-role-member{--rc:#8282A0}
:root[data-theme="dark"] .dc-sm-role,:root[data-theme="dark"] .dc-sm-role-live{
  color:color-mix(in srgb,var(--rc) 55%,#fff)!important;border-color:color-mix(in srgb,var(--rc) 65%,#fff)!important;background:color-mix(in srgb,var(--rc) 22%,#0B0708)!important}
:root[data-theme="light"] .dc-sm-role,:root[data-theme="light"] .dc-sm-role-live{
  color:color-mix(in srgb,var(--rc) 50%,#000)!important;border-color:color-mix(in srgb,var(--rc) 80%,#000)!important;background:color-mix(in srgb,var(--rc) 16%,#F2E6D0)!important}
.dc-sm-status-bar,.dc-sm-status-bar *{color:var(--text)!important}.dc-sm-status-bar .dc-sm-status-indicator{color:var(--text-dim)!important}.dc-sm-custom-text{font-weight:600;opacity:1!important;text-shadow:none!important}
.sc-desc,.sc-bday{display:none!important}

/* ═══════════════════════════════════════════════════════════════════════
   GOKURAKUGAI PERSONNEL FILES
   Research basis (UI/UX Pro Max search, domains style / ux / typography):
   · Editorial Grid / Magazine → pull-quote, drop cap, print-inspired serif body, section dividers
   · Anti-Polish (collage) + E-Ink/Paper → paper sheets, tape, tiny rotation, matte surfaces, NO blur/glow
   · ux: "use click/tap for primary interactions, don't rely only on hover" → hover only previews;
         the whole file is a real <button> (View Profile) reachable by keyboard
   · ux: visible focus ring on every control incl. modal controls; ≥8px between touch targets
   · ux: animate transform/opacity only, 1–2 moving things per view, honour prefers-reduced-motion
   Same layout in both themes; only the tokens below change.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{--pf-back:#9E1B22;--pf-back-ink:#FBF1DC;--pf-front:#F6EBD2;--pf-sheet:#FFFAEE;--pf-ink:#1B1214;--pf-soft:#4A3C3C;--pf-line:#CBB88F;--pf-accent:#9E1B22;--pf-gold:#9B7A2B;--pf-tape:rgba(190,150,60,.38);--pf-shadow:rgba(60,20,20,.22)}
:root[data-theme="dark"]{--pf-back:#8C7440;--pf-back-ink:#15100F;--pf-front:#1F1819;--pf-sheet:#2A2122;--pf-ink:#F2E8D2;--pf-soft:#CDBFA6;--pf-line:#4A3D38;--pf-accent:#E6C265;--pf-gold:#E6C265;--pf-tape:rgba(230,194,101,.22);--pf-shadow:rgba(0,0,0,.55)}

/* ── closed file ── */
#staff{counter-reset:pf}
html:root .sc{overflow:visible!important}
.staff-grid{gap:2.8rem 1.6rem!important;padding-top:1.4rem}
.sc{position:relative!important;isolation:isolate;counter-increment:pf;padding:1.1rem 1.1rem 1.15rem!important;margin-top:22px!important;
  transition:transform .32s cubic-bezier(.2,.7,.2,1)}
/* folder back + tab */
.sc::before,.sc::after{display:block!important}
.sc::before{content:'No. ' counter(pf,decimal-leading-zero);position:absolute;z-index:0;left:0;right:0;top:-22px;bottom:0;box-sizing:border-box;
  padding:3px 0 0 .9rem;background:var(--pf-back);color:var(--pf-back-ink);font:700 .66rem/19px var(--f-label);letter-spacing:.24em;
  clip-path:polygon(0 100%,0 6px,6px 0,calc(42% - 14px) 0,42% 22px,100% 22px,100% 100%)}
/* ruled sheet inside the folder (blank until lifted — no data shown on the closed file) */
.sc-sheet{position:absolute;z-index:1;left:46%;right:5%;top:-8px;height:70%;background:var(--pf-sheet);border:1px solid var(--pf-line);
  background-image:repeating-linear-gradient(transparent 0 15px,color-mix(in srgb,var(--pf-line) 70%,transparent) 15px 16px);
  transform-origin:20% 100%;transition:transform .34s cubic-bezier(.2,.7,.2,1)}
/* folder front */
.sc::after{content:'';position:absolute;z-index:2;inset:0;background:var(--pf-front);border:1px solid var(--pf-line);border-top-color:color-mix(in srgb,var(--pf-line) 40%,#fff);
  box-shadow:0 14px 22px -16px var(--pf-shadow),inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent)}
.sc>*:not(.sc-sheet){position:relative;z-index:3}
.sc-sheet{pointer-events:none}
/* portrait, taped on */
.sc-av-wrap{aspect-ratio:4/5!important;-webkit-mask:none!important;mask:none!important;overflow:visible!important;background:var(--pf-line)!important;
  border:5px solid var(--pf-sheet)!important;box-shadow:0 2px 0 var(--pf-line),2px 6px 12px -6px var(--pf-shadow)!important;transform:rotate(-1.2deg);margin:.1rem .1rem 0}
.sc:nth-of-type(even) .sc-av-wrap{transform:rotate(1deg)}
.sc-av-wrap::before{content:'';position:absolute;z-index:2;left:50%;top:-13px;width:64px;height:20px;margin-left:-32px;background:var(--pf-tape);transform:rotate(-2deg);pointer-events:none}
.sc-av-wrap img{filter:grayscale(.85) contrast(1.05)!important;transition:filter .4s}
.sc-av-initials{color:var(--pf-accent)!important}
.sc-status-dot{border-color:var(--pf-sheet)!important}
.sc-body{margin-top:1rem!important;gap:.3rem!important}
.sc-role{color:var(--pf-accent)!important;font-size:.74rem!important}
.sc-name{color:var(--pf-ink)!important}
.sc-handle{color:var(--pf-soft)!important}
.sc .sc-view{color:var(--pf-ink)!important;margin-top:1rem!important;min-height:24px;background-image:linear-gradient(var(--pf-accent),var(--pf-accent))!important;background-repeat:no-repeat!important;background-position:0 100%!important;background-size:0 2px}
.sc .sc-view::after{content:' →'}
.sc:hover .sc-view,.sc .sc-view:focus-visible{background-size:100% 2px!important;color:var(--pf-ink)!important}
.sc .sc-view:focus-visible{outline:2px solid var(--pf-accent);outline-offset:4px}
.sc:has(.sc-view:focus-visible){transform:translateY(-3px)}
.sc:has(.sc-view:focus-visible) .sc-sheet{transform:translateY(-14px) rotate(1.4deg)}
.sc:has(.sc-view:focus-visible)::after{outline:2px solid var(--pf-accent);outline-offset:3px}
/* hover = preview only, and only where a real hover exists */
@media (hover:hover) and (pointer:fine){
  .sc:hover{transform:translateY(-3px)}
  .sc:hover .sc-sheet{transform:translateY(-14px) rotate(1.4deg)}
  .sc:hover .sc-av-wrap img{filter:none!important}
}

/* ── mobile closed file: compact ── */
@media(max-width:560px){
  .staff-grid{gap:1.9rem .9rem!important;padding-top:1rem}
  .sc{padding:.7rem .7rem .8rem!important}
  .sc::before{font-size:.58rem;letter-spacing:.2em;padding-left:.6rem}
  .sc-av-wrap{aspect-ratio:1/1!important;border-width:4px!important}
  .sc-av-wrap::before{width:48px;height:16px;margin-left:-24px;top:-10px}
  .sc-body{margin-top:.7rem!important}
  .sc-role{font-size:.64rem!important;letter-spacing:.14em!important}
  .sc-name{font-size:1.3rem!important}
  .sc-handle{font-size:.78rem!important}
  .sc .sc-view{font-size:.68rem!important;letter-spacing:.16em!important;margin-top:.6rem!important;min-height:32px;display:inline-flex!important;align-items:center}
}

/* ── opened file (popup) ── */
.dc-modal-card{background:var(--pf-front)!important;color:var(--pf-ink);animation:pfOpen .34s cubic-bezier(.2,.7,.2,1)!important}
@keyframes pfOpen{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
:root[data-theme="light"] .dc-modal-card{box-shadow:0 30px 70px rgba(60,20,20,.4),0 0 0 2px var(--pf-back)!important}
:root[data-theme="dark"] .dc-modal-card{box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 1px var(--pf-back)!important}
.dc-sm-close{background:var(--pf-sheet)!important;color:var(--pf-ink)!important;border:1px solid var(--pf-line)!important}
.dc-sm-close:hover,.dc-sm-close:focus-visible{background:var(--pf-back)!important;color:var(--pf-back-ink)!important}
.dc-sm-close:focus-visible{outline:2px solid var(--pf-accent);outline-offset:2px}
.dc-sm-avatar{background:var(--pf-line)!important;border:5px solid var(--pf-sheet)!important;box-shadow:0 2px 0 var(--pf-line),3px 6px 14px -6px var(--pf-shadow)!important;transform:rotate(-1.5deg)}
.dc-sm-name{color:var(--pf-ink)!important}
.dc-sm-desc{border-left-color:var(--pf-accent)!important;color:var(--pf-ink)!important}
.dc-sm-handle{color:var(--pf-ink)!important}.dc-sm-uid{color:var(--pf-soft)!important}
:root .dc-sm-label{color:var(--pf-accent)!important}
:root .dc-sm-badge{color:var(--pf-accent)!important}
.dc-sm-facts{border-left-color:var(--pf-line)!important}
.dc-sm-facts dt{color:var(--pf-soft)!important}.dc-sm-facts dd{color:var(--pf-ink)!important}
.dc-sm-val{color:var(--pf-ink)!important;opacity:.92;font-family:var(--f-serif);font-size:1.06rem;line-height:1.85}
#dc-sm-about::first-letter{float:left;font:400 3.3rem/.82 var(--f-display);padding:.18rem .5rem 0 0;color:var(--pf-accent)}
.dc-sm-avatar-row .dc-sm-status-bar{background:var(--pf-sheet)!important;border-color:var(--pf-accent)!important}
.dc-sm-avatar-row .dc-sm-status-bar::before{background:var(--pf-sheet)!important;border-left-color:var(--pf-accent)!important;border-bottom-color:var(--pf-accent)!important}
.dc-sm-status-bar,.dc-sm-status-bar *{color:var(--pf-ink)!important}

/* pull-quote */
.dc-sm-quote{margin:1.8rem 0 0;padding:.2rem 0 .2rem 3.2rem;position:relative;max-width:62ch}
.dc-sm-quote[hidden]{display:none}
.dc-sm-quote::before{content:'\201C';position:absolute;left:0;top:-.15rem;font:400 4.6rem/1 var(--f-display);color:var(--pf-accent)}
.dc-sm-quote p{margin:0;font:italic 500 clamp(1.2rem,2.6vw,1.5rem)/1.5 var(--f-serif);color:var(--pf-ink);overflow-wrap:anywhere}

/* scrapbook notes */
.dc-sm-scrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1.6rem 1.4rem;align-items:start;margin-top:2.4rem;padding-top:2.2rem;border-top:2px solid var(--pf-line)}
.dc-sm-scrap[hidden],.dc-sn[hidden]{display:none}
.dc-sn{position:relative;padding:1.3rem 1.15rem 1.2rem;background:var(--pf-sheet);border:1px solid var(--pf-line);box-shadow:3px 4px 0 var(--pf-shadow);transform:rotate(-.45deg)}
.dc-sn:nth-child(even){transform:rotate(.5deg)}
.dc-sn::before{content:'';position:absolute;left:50%;top:-10px;width:58px;height:18px;margin-left:-29px;background:var(--pf-tape);transform:rotate(-2deg)}
.dc-sn-h{margin:0 0 .7rem;font:700 .78rem/1.2 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--pf-accent)}
.dc-sn-run{margin:0;font:500 1.05rem/1.7 var(--f-serif);color:var(--pf-ink);overflow-wrap:anywhere}
.dc-sn-run span{color:var(--pf-gold);margin:0 .15em}
.dc-sn-list{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.dc-sn-list li{position:relative;padding-left:1.1rem;font:500 1.02rem/1.55 var(--f-serif);color:var(--pf-ink);overflow-wrap:anywhere}
.dc-sn-list li::before{content:'';position:absolute;left:0;top:.7em;width:.5rem;height:2px;background:var(--pf-accent)}
.dc-sn-links a{color:var(--pf-ink);text-decoration:underline;text-decoration-color:var(--pf-accent);text-decoration-thickness:2px;text-underline-offset:.22em;font-weight:600}
.dc-sn-links a::after{content:' \2197';color:var(--pf-accent);text-decoration:none;display:inline-block}
.dc-sn-links a:hover{color:var(--pf-accent)}
.dc-sn-links a:focus-visible{outline:2px solid var(--pf-accent);outline-offset:3px}

/* ── mobile: the file opens upward as a bottom sheet, clipped at the top ── */
@media(max-width:700px){
  .dc-modal-ov{align-items:flex-end!important;padding:0!important}
  .dc-modal-card{width:100%!important;max-height:94vh;max-height:94dvh;animation:pfSheet .4s cubic-bezier(.2,.8,.2,1)!important}
  .dc-staff-modal{flex:1 1 auto;min-height:0;max-height:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
  /* binder clip holding the sheet */
  .dc-modal-card::before{content:'';position:absolute;z-index:19;top:0;left:50%;width:64px;height:16px;margin-left:-32px;background:var(--pf-back);border-radius:0 0 4px 4px;box-shadow:inset 0 -4px 0 color-mix(in srgb,#000 22%,transparent);pointer-events:none}
  .dc-sm-close{position:relative!important;flex:none;top:auto!important;right:auto!important;margin:.7rem .6rem .5rem auto!important;width:auto!important;min-width:44px;height:44px!important;padding:0 .9rem;display:inline-flex!important;align-items:center;gap:.45rem;font:700 .74rem/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase}
  .dc-sm-close::after{content:'Close'}
  .dc-sm-avatar-row{margin-top:-52px!important}
  .dc-sm-avatar{width:96px!important;height:120px!important}
  .dc-sm-name{font-size:clamp(2.2rem,11vw,3rem)!important}
  .dc-sn,.dc-sn:nth-child(even){transform:none}
  .dc-sm-scrap{grid-template-columns:1fr}
}
@keyframes pfSheet{from{transform:translateY(100%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .sc,.sc-sheet,.sc .sc-view,.sc-av-wrap img{transition:none!important}
  .sc:hover,.sc:hover .sc-sheet,.sc:has(.sc-view:focus-visible),.sc:has(.sc-view:focus-visible) .sc-sheet{transform:none!important}
  .dc-modal-card{animation:none!important}
}