/* Shared brand tokens and components: real pages and design study use this file. */
:root{--purple:#7834dd;--pale:#f4efff;--border:#e4d9f4;--muted:#665779;--coral:#ff7f91;--ink:#321544;font-family:ui-rounded,'Arial Rounded MT Bold','Segoe UI',Arial,sans-serif;font-size:16px;color:var(--ink);background:#f5f0ff}
body{margin:0;background:linear-gradient(120deg,#f8f4ff,#f2edff);color:var(--ink)}
.hj-header{width:100%;max-width:none;min-height:76px;height:auto;display:flex;align-items:center;flex-wrap:wrap;gap:24px;padding:6px max(24px,calc((100vw - 1472px)/2));background:#fff;border:0;box-shadow:0 1px 0 #e8ddf5;margin:0}
.hj-logo{display:block;position:relative;width:210px;height:62px;overflow:hidden;flex-shrink:0;text-decoration:none}.hj-logo img{position:absolute;width:225px;max-width:none;height:auto;left:-7px;top:-11px}
.hj-nav{display:flex;gap:16px;align-items:center;margin:0 auto 0 0;flex-wrap:wrap}.hj-nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:10px 3px;border-radius:0;background:none;color:#51356b;font-size:1rem;font-weight:750;text-decoration:none;white-space:nowrap}.hj-nav a[aria-current]{color:#7524dc;background:none}.hj-nav a[aria-current]:after{content:'';height:3px;border-radius:4px;position:absolute;bottom:3px;left:3px;right:3px;background:var(--purple)}
.hj-search{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 14px;width:280px;max-width:100%;border:1px solid var(--border);border-radius:28px;background:#f4f0fb;box-shadow:none;margin:0}.hj-search>span{font-size:1.8rem;color:#695382}.hj-search input[type=search]{font:inherit;width:100%;min-width:0;min-height:40px;border:0;background:transparent;color:var(--ink)}.hj-search button{display:block;font:inherit;font-weight:750;padding:8px 10px;min-height:40px;border:0;border-radius:20px;background:var(--purple);color:white}
.hj-banner{position:relative;width:100%;height:clamp(190px,15vw,230px);overflow:hidden;background:#84ddff}.hj-banner img{position:absolute;width:100%;height:auto;max-width:none;left:0;top:-8.8vw;display:block}
.hj-footer{max-width:none;margin:48px 0 0;padding:28px max(24px,calc((100vw - 1472px)/2));background:#fff;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}.hj-footer p{margin:0;color:var(--muted);font-size:1rem}.hj-footer nav{display:flex;flex-wrap:wrap;gap:12px 20px;margin-left:auto}.hj-footer a:not(.hj-logo){font-size:.875rem;color:#5c4278;min-height:44px;display:inline-flex;align-items:center}.hj-footer small{width:100%;color:var(--muted);font-size:.875rem}
main{max-width:1472px}h1,h2,h3{color:var(--ink);font-weight:850}.play,.search button{background:var(--purple)}.secondary{border:1px solid #d7c3ef;background:#eee3ff;color:#5f259c}.play:hover,.hj-search button:hover{background:#6525bd}.notice{background:#fff7df;border:1px solid #eddb9f;color:#614e29}.prose,.story{padding:32px;background:#ffffffbd;border:1px solid var(--border);border-radius:28px}.report-form input,.report-form select,.report-form textarea{border-color:#cbb5e5;background:#fff}.report-form button{background:var(--purple);color:#fff;border:0}.design-note{display:none}.categories a{background:#fff}.card{box-shadow:0 5px 16px #47226b09}.meet{background:#eee3ff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #d6506a;outline-offset:3px}
@media(max-width:1200px){.hj-header{gap:16px}.hj-logo{width:180px;height:58px}.hj-logo img{width:195px;top:-9px}.hj-nav{gap:12px}.hj-search{width:240px}.hj-banner img{width:1200px;left:calc(50% - 600px);top:-105px}.hj-banner{height:200px}}
@media(max-width:1000px){.hj-search{width:100%;order:3}.hj-nav{margin-left:auto;margin-right:0}.hj-footer nav{margin-left:0}}
@media(max-width:600px){.hj-header{padding:6px 16px 12px;gap:4px 12px}.hj-logo{width:160px;height:54px}.hj-logo img{width:173px;left:-5px;top:-8px}.hj-nav{order:2;width:100%;gap:4px 18px;justify-content:flex-start;margin:0}.hj-nav a{font-size:.875rem;min-height:44px}.hj-search{order:3;width:100%;padding-top:2px;padding-bottom:2px}.hj-search input[type=search]{font-size:1rem}.hj-banner{height:160px}.hj-banner img{width:1080px;left:calc(50% - 610px);top:-95px}.prose,.story{padding:20px 16px;border-radius:22px;margin-top:24px}.hj-footer{padding:24px 16px;display:flex}.hj-footer nav{width:100%;gap:4px 18px}.hj-footer p{width:100%}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:no-preference){.play,.secondary{transition:transform .15s,background .15s}.play:hover{transform:translateY(-2px)}}
/* Verified-art gallery: no autoplay, intrinsic image proportions, native modal. */
.sheet-stage {touch-action:pan-y; background:#fff; border-radius:24px; overflow:hidden}
.sheet-stage figure {margin:0}
.sheet-stage [hidden] {display:none}
.sheet-stage img {display:block; width:100%; height:auto; object-fit:contain}
.sheet-stage figcaption {padding:12px 18px; font-weight:700}
.sheet-controls {display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin:16px 0}
.sheet-controls button,.sheet-gallery dialog button {min-height:44px; padding:10px 16px; border:2px solid #7534d3; border-radius:24px; background:white; color:#422354; font:inherit; font-weight:700; cursor:pointer}
.sheet-controls p {margin:0; text-align:center}
.sheet-gallery:focus-visible,.sheet-gallery button:focus-visible {outline:3px solid #ff7893; outline-offset:4px}
.sheet-gallery dialog {box-sizing:border-box; width:min(1400px,96vw); max-height:94dvh; border:0; border-radius:20px; padding:18px; background:#fff; color:#422354}
.sheet-gallery dialog::backdrop {background:rgb(30 10 45 / .8)}
.sheet-gallery dialog img {display:block; width:100%; height:auto; object-fit:contain}
.sheet-gallery dialog button {position:sticky; top:0; display:block; margin-left:auto; z-index:1}
@media(max-width:600px){.sheet-controls p{order:3;flex-basis:100%}.sheet-gallery dialog{padding:10px;width:98vw}.sheet-gallery dialog p{font-size:14px}}

.hop-comic{display:block;width:100%;height:auto;border-radius:18px}.comic-full{display:block}.comic-transcript{margin:20px 0}.comic-transcript summary{cursor:pointer;min-height:44px;font-weight:700}.sheet-gallery{margin:40px 0}.sheet-gallery img{max-width:100%}