/* Hallmark · macrostructure: Photographic / relationship folio · tone: intimate indie romance · anchor hue: warm gold
 * theme: custom · vibe: midnight school romance paper folio · axes: dark scene + light paper / roman Chinese serif / warm gold
 * nav: N6 compact masthead · footer: Ft2 inline credits with required related index
 * pre-emit critique: P4 H5 E4 S5 R5 V4 */
@import url('tokens.css');
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--color-page);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:1.85}h1,h2,h3{font-family:var(--font-display);font-style:normal;line-height:1.3;overflow-wrap:anywhere;min-width:0}h1{font-size:var(--text-display);margin:.3em 0}h2{font-size:clamp(1.75rem,3vw,2.6rem);margin:0 0 var(--space-lg)}h3{font-size:1.35rem;margin:.5rem 0}p{margin:0 0 var(--space-md)}a{color:inherit;text-underline-offset:.3em}img{display:block;max-width:100%;height:auto}button{font:inherit;cursor:pointer}a,button,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}button:disabled,[aria-disabled=true]{opacity:.5;cursor:not-allowed}.skip{position:fixed;z-index:20;top:0;left:0;transform:translateY(-120%);background:var(--color-paper);padding:var(--space-md)}.skip:focus{transform:none}.masthead{position:sticky;top:0;z-index:10;background:var(--color-dark);color:var(--color-on-dark);border-bottom:3px double var(--color-accent);padding:.6rem 4vw;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}.mast-name{font-family:var(--font-display);font-size:1.3rem;text-decoration:none;white-space:nowrap}.mast-name small{font-family:var(--font-outlier);font-size:.66rem;display:block;color:var(--color-dark-muted);letter-spacing:.1em;line-height:1.25}.page-nav{display:flex;align-items:center;gap:var(--space-lg)}.page-nav a{white-space:nowrap;text-decoration:none;font-size:.88rem;min-height:44px;display:inline-flex;align-items:center}.page-nav a[aria-current=page]{color:var(--color-accent);text-decoration:underline}.menu{display:none}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.65rem 1.2rem;background:var(--color-accent);border:1px solid var(--color-ink);color:var(--color-accent-ink);font-size:.95rem;font-weight:650;text-decoration:none;white-space:nowrap;box-shadow:4px 4px 0 var(--color-dark);transition:transform var(--dur-fast) var(--ease-out)}.button.secondary{background:var(--color-paper);color:var(--color-ink)}.button:active,button:active{transform:translate(2px,2px)}.button[data-state=loading]{opacity:.7;cursor:progress}.button[data-state=error]{border-color:var(--color-error)}.button[data-state=success]{border-color:var(--color-success)}.actions{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-lg)}.hero{position:relative;isolation:isolate;min-height:min(820px,calc(100svh - 68px));background:var(--color-dark);color:var(--color-on-dark);display:flex;align-items:flex-end;padding:var(--space-2xl) max(5vw,calc((100vw - 1180px)/2))}.hero-art{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 15%}.hero:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,var(--color-dark) 0%,var(--color-shade) 28%,var(--color-clear) 88%),linear-gradient(90deg,var(--color-shade),var(--color-clear) 80%)}.hero-copy{max-width:690px}.hero-logo{width:330px;height:auto;margin-bottom:var(--space-md)}.hero h1 span{font:500 clamp(1rem,1.7vw,1.4rem)/1.5 var(--font-outlier);display:block;margin-top:.4rem;letter-spacing:.05em}.hero .lede{max-width:540px;font-size:1.05rem}.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--space-md) 0;font-size:.8rem;color:var(--color-dark-muted)}.tags span{border-left:2px solid var(--color-accent);padding-left:.6rem}.fan-label{font-size:var(--text-sm);color:var(--color-dark-muted);margin:0}.paper{max-width:1080px;margin:0 auto;background:var(--color-paper);box-shadow:12px 0 0 var(--color-soft-shadow)}.section{padding:var(--space-2xl) clamp(20px,5vw,64px)}.section+.section{border-top:1px solid var(--color-rule)}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-lg)}.section-head h2{margin-bottom:0}.section-head a{font-size:.9rem;white-space:nowrap;min-height:44px}.lede{font-size:1.15rem;line-height:1.85;max-width:730px}.muted{color:var(--color-muted);font-size:.9rem}.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);margin:0}.info div{border-left:2px solid var(--color-rule);padding-left:var(--space-md)}dt{font-size:var(--text-sm);color:var(--color-muted)}dd{margin:0;font-weight:550}.cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}.character{border:1px solid var(--color-rule);padding:var(--space-lg);background:var(--color-paper-2)}.character img{width:160px;height:160px;margin:0 auto var(--space-md)}.character h3{font-size:1.4rem}.character p{font-size:.92rem}.character .role{color:var(--color-page);font-size:.82rem;font-weight:600}.story-pair{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-xl);align-items:center}.story-pair figure{margin:0;transform:rotate(-1deg);box-shadow:6px 6px 0 var(--color-soft-shadow);background:var(--color-paper-2)}figcaption{font-size:.85rem;line-height:1.6;padding:.7rem 0;color:var(--color-muted)}.story-pair figcaption{padding:.7rem 1rem}.system{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-xl);align-items:center;margin-top:var(--space-xl)}.system:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.system:nth-of-type(even) figure{order:2}.system figure{margin:0}.system a{display:block}.shot{width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--color-dark)}.gallery-preview{margin:0}.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm);margin-top:var(--space-md)}.thumbs a{display:block}.thumbs img{width:100%;aspect-ratio:16/9;object-fit:contain}.dark-section{background:var(--color-dark);color:var(--color-on-dark)}.dark-section .muted{color:var(--color-dark-muted)}.reading-list{padding-left:1.3rem}.reading-list li{margin:.65rem 0}.faq details{border-bottom:1px solid var(--color-rule)}summary{cursor:pointer;min-height:60px;padding:1rem 1.3rem 1rem 0;font-weight:550}summary::marker{color:var(--color-page)}.answer{padding:.1rem 0 1.2rem;max-width:760px}.answer p:last-child{margin-bottom:0}.final{text-align:center}.final .actions{justify-content:center}.credits{max-width:1080px;margin:auto;background:var(--color-dark);color:var(--color-on-dark);padding:var(--space-xl) clamp(20px,5vw,64px) 6rem}.credits .footer-brand{font-family:var(--font-display);font-size:1.5rem}.footer-links,.related-links{display:flex;flex-wrap:wrap;gap:.25rem var(--space-lg);margin:1rem 0}.credits a{font-size:.85rem;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.credits p{font-size:.8rem;color:var(--color-dark-muted)}.credits .legal{border-top:1px solid var(--color-rule);padding-top:1rem;margin-top:1.3rem}.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:9;display:none;background:var(--color-dark);border-top:1px solid var(--color-accent);padding:.6rem 1rem max(.6rem,env(safe-area-inset-bottom));color:var(--color-on-dark);align-items:center;justify-content:space-between;gap:var(--space-sm)}.sticky-cta span{font-size:.75rem;line-height:1.6}.sticky-cta .button{font-size:.8rem;padding:.5rem .75rem;box-shadow:none}.breadcrumbs{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:var(--space-xl);font-size:.8rem}.breadcrumbs a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.breadcrumbs span{display:inline-flex;align-items:center}.page-intro{padding-top:var(--space-xl);border-bottom:1px solid var(--color-rule)}.page-intro h1{font-size:clamp(2rem,4vw,3.4rem);max-width:840px}.page-intro .page-subtitle{font-family:var(--font-outlier);font-size:.85rem;color:var(--color-muted)}.filters{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin:var(--space-xl) 0}.filters button,.dialog-controls button{background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);padding:.6rem 1rem;min-height:44px;white-space:nowrap}.filters button[aria-pressed=true]{background:var(--color-dark);color:var(--color-on-dark)}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}.gallery-grid figure{margin:0}.gallery-grid figure[hidden]{display:none}.gallery-grid a{display:block}.gallery-grid img{width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--color-dark)}.gallery-grid h2{font-family:var(--font-body);font-size:1rem;margin:.4rem 0}.toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin:var(--space-xl) 0}.toc a{padding:var(--space-lg);border:1px solid var(--color-rule);text-decoration:none;background:var(--color-paper-2)}.toc strong{display:block;font-family:var(--font-display);font-size:1.2rem;margin-bottom:.5rem}.toc small{display:block;color:var(--color-muted);font-size:.9rem}.prose{max-width:790px}.prose h3{margin-top:2rem}.prose ol{padding-left:1.6rem}.prose li{padding:.3rem 0}.note{border-left:3px solid var(--color-page);background:var(--color-paper-2);padding:var(--space-lg);margin-top:var(--space-lg)}.requirements{margin:0}.requirements div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--color-rule)}.requirements dt{font-size:.9rem}.requirements dd{font-weight:400}.get-card{padding:var(--space-xl);border:1px solid var(--color-accent);background:var(--color-dark);color:var(--color-on-dark)}.get-card h2{color:var(--color-accent)}.get-card .muted{color:var(--color-dark-muted)}.two-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl)}.error-page{min-height:50vh}.error-page .actions{margin:var(--space-xl) 0}dialog{width:min(1180px,96vw);max-width:96vw;max-height:94svh;background:var(--color-dark);color:var(--color-on-dark);border:1px solid var(--color-accent);padding:var(--space-md)}dialog::backdrop{background:var(--color-overlay)}dialog figure{margin:0}dialog img{width:100%;height:min(65svh,680px);object-fit:contain}dialog figcaption{color:var(--color-dark-muted);padding:.6rem 0}.dialog-controls{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}.dialog-controls button{background:var(--color-paper);font-size:.85rem}.image-status{font-size:.85rem;margin:.6rem 0;min-height:1.7em}dialog[data-state=error]{border-color:var(--color-error)}dialog[data-state=loading] img{opacity:.3}dialog[data-state=success] img{opacity:1}.gallery-status{font-size:.85rem;min-height:1.8em;color:var(--color-muted)}
@media(hover:hover){.button:hover{background:var(--color-accent-hover)}.button.secondary:hover{background:var(--color-paper-2)}.page-nav a:hover,.credits a:hover{color:var(--color-accent)}.filters button:hover{border-color:var(--color-ink)}.toc a:hover{box-shadow:3px 3px 0 var(--color-soft-shadow)}summary:hover{color:var(--color-page)}}
@media(min-width:1600px){.hero{min-height:850px}.hero-art{object-position:center 22%}}
@media(max-width:900px){.masthead{padding:.5rem 20px}.page-nav{gap:var(--space-md)}.page-nav .button{padding:.5rem .8rem}.hero{padding:var(--space-xl);min-height:700px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cast{gap:var(--space-sm)}.character{padding:var(--space-md)}.info{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){html{scroll-padding-top:85px}.masthead{padding:.45rem 16px;min-height:64px}.mast-name{font-size:1.12rem}.page-nav{display:none}.menu{display:block}.menu summary{padding:.4rem .7rem;min-height:44px;white-space:nowrap;color:var(--color-on-dark)}.menu nav{position:absolute;right:12px;top:100%;display:grid;background:var(--color-dark);border:1px solid var(--color-accent);padding:var(--space-md);width:220px}.menu nav a{display:block;min-height:44px;padding:.5rem;text-decoration:none;white-space:nowrap}.hero{min-height:590px;padding:22px 20px 30px;align-items:flex-end}.hero-art{object-position:58% 0%;object-fit:cover;height:340px;inset:0 0 auto}.hero:after{background:linear-gradient(0deg,var(--color-dark) 0%,var(--color-dark) 43%,var(--color-shade) 65%,var(--color-clear) 100%)}.hero-copy{padding-top:235px}.hero-logo{width:240px;max-height:82px;object-fit:contain;object-position:left}.hero h1{font-size:2.15rem}.hero h1 span{font-size:.95rem}.hero .lede{font-size:.9rem;line-height:1.7}.tags{margin:.7rem 0;font-size:.73rem;gap:.35rem}.hero .actions{gap:.6rem;margin-top:1rem}.hero .button{font-size:.78rem;padding:.5rem .8rem;min-height:45px}.hero .fan-label{font-size:.72rem}.section{padding:var(--space-xl) 20px}.section-head{display:block}.section-head a{display:inline-flex;align-items:center;margin-top:.6rem}.cast{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}.character{display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--space-md);padding:var(--space-md)}.character img{width:100px;height:100px;margin:0}.character h3{font-size:1.25rem}.character p{font-size:.85rem}.story-pair,.system,.system:nth-of-type(even),.two-columns{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.system:nth-of-type(even) figure{order:0}.story-pair figure{transform:none}.info{gap:var(--space-lg) var(--space-sm);font-size:.88rem}.info div{padding-left:.6rem}.thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-grid{grid-template-columns:minmax(0,1fr)}.gallery-grid h2{font-size:1.1rem}.sticky-cta{display:flex}.paper{box-shadow:none}.credits{padding:var(--space-xl) 20px 7rem}.toc{grid-template-columns:minmax(0,1fr)}.get-card{padding:var(--space-lg)}.requirements div{grid-template-columns:80px minmax(0,1fr);gap:.6rem}.page-intro{padding-top:var(--space-lg)}.breadcrumbs{margin-bottom:var(--space-lg)}dialog{padding:.6rem}.dialog-controls button{padding:.45rem .65rem;font-size:.75rem}dialog img{height:57svh}.lede{font-size:1.02rem}.answer{font-size:.92rem}.final h2{font-size:1.85rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.filters[hidden]{display:none}

.actions,.footer-links,.related-links,.dialog-controls{align-items:center}
.hero{padding-bottom:5.2rem}
.hero :focus-visible,.masthead :focus-visible,.dark-section :focus-visible,.credits :focus-visible,.sticky-cta :focus-visible,dialog :focus-visible{outline-color:var(--color-on-dark);box-shadow:0 0 0 2px var(--color-dark)}
@media(max-width:900px){.hero{padding-bottom:3.25rem}}
@media(max-width:640px){.hero{padding-bottom:30px}}