:root { color:#211d36; background:#fdfdfd; font-family:Inter,ui-rounded,system-ui,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
a:hover { color:#6652bc; }
a:focus-visible { outline:3px solid #7768dc; outline-offset:5px; }
img { display:block; max-width:100%; height:auto; }
h1,h2,p,figure { margin:0; letter-spacing:0; }
p { line-height:1.75; }
.skip { position:absolute; top:-100px; }
.skip:focus { top:8px; background:white; padding:12px; z-index:10; }
.content-nav { display:flex; align-items:center; gap:28px; padding:20px max(24px,calc((100% - 1180px)/2)); background:#fff; border-bottom:2px solid #c7bee9; }
.brand { width:145px; flex-shrink:0; }
.content-nav nav { margin:auto; display:flex; flex-wrap:wrap; gap:22px; font-size:12px; font-weight:800; }
.content-nav [aria-current] { color:#6652bc; text-decoration:underline; text-underline-offset:6px; }
.home-link { font-size:12px; white-space:nowrap; }
main { max-width:1120px; margin:auto; padding:64px 28px 0; }
.content-heading { max-width:760px; margin-bottom:48px; }
.eyebrow { color:#6652bc; font-weight:850; font-size:12px; }
h1 { font-size:44px; line-height:1.15; margin:14px 0 20px; }
h2 { font-size:24px; line-height:1.25; margin-bottom:14px; }
.content-heading>p:not(.eyebrow) { color:#555369; }
.content-heading .example-note { margin-top:18px; font-size:12px; }
.character-collection { display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }
.character-entry { display:grid; grid-template-columns:110px 1fr; align-items:start; gap:24px; padding:30px 0; border-top:1px solid #c7bee9; scroll-margin-top:24px; }
.character-entry>img { width:110px; aspect-ratio:1; object-fit:contain; background:#e9e4ff; border:2px solid #29243c; border-radius:5px; }
.character-entry h2 { margin-top:6px; }
.character-entry p,.story-entry>p { font-size:14px; }
.content-link { display:inline-block; font-size:13px; font-weight:800; margin-top:18px; border-bottom:1px solid #7768dc; }
.story-collection { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.story-entry { min-width:0; scroll-margin-top:24px; }
.story-entry>a:first-child { display:grid; place-items:center; height:390px; padding:12px; background:#e9e4ff; border:2px solid #29243c; border-radius:6px; box-shadow:4px 4px 0 #c7bee9; margin-bottom:24px; }
.story-entry>a:first-child img { max-height:360px; width:100%; object-fit:contain; }
.story-entry h2 { margin-top:8px; }
.related-links { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; font-size:13px; font-weight:800; }
.related-links a { text-decoration:underline; text-underline-offset:4px; }
.journal-entry { display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:center; border-block:1px solid #c7bee9; padding:30px 0; }
.journal-entry img { max-height:330px; margin:auto; }
.journal-entry h2 { margin-top:12px; }
.article-layout,.about-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:52px; align-items:start; }
.article-copy h2 { margin-top:32px; }
.article-copy h2:first-child { margin-top:0; }
.article-copy p { font-size:16px; margin:0 0 18px; }
.article-copy .development-note,figcaption { font-size:12px; color:#5f5b70; margin-top:20px; }
.article-art { padding:16px; background:#e9e4ff; border:2px solid #29243c; border-radius:6px; }
.about-art img { width:100%; }
.content-cta { margin-top:72px; padding:42px 0; border-top:2px solid #c7bee9; text-align:center; }
.content-cta>p { font-size:12px; margin-bottom:22px; }
.content-cta>div { display:flex; justify-content:center; align-items:center; gap:24px; font-size:13px; font-weight:800; }
.primary-button { display:inline-block; padding:12px 18px; background:#8f80eb; border:2px solid #29243c; border-radius:4px; box-shadow:3px 3px 0 #29243c; }
footer { display:flex; justify-content:center; flex-wrap:wrap; gap:22px; padding:28px; border-top:1px solid #c7bee9; font-size:12px; background:#fff; }
footer small { flex-basis:100%; text-align:center; color:#5f5b70; }
.comic-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 18px; }
.comic-card { border:1px solid #dfdde8; border-radius:8px; overflow:hidden; background:#eaf2fb; transition:transform .2s ease,box-shadow .2s ease; }
.comic-card:nth-child(4n+2),.character-entry:nth-child(4n+2) { background:#fcecdc; }
.comic-card:nth-child(4n+3),.character-entry:nth-child(4n+3) { background:#edf4e5; }
.comic-card:nth-child(4n+4),.character-entry:nth-child(4n+4) { background:#f1ecff; }
.comic-card:hover { transform:translateY(-3px); box-shadow:0 8px 22px #211d3610; }
.comic-card>a { display:block; }
.comic-card img { width:100%; aspect-ratio:2/3; object-fit:contain; background:#fff; }
.comic-info { padding:16px; }
.comic-info h2 { font-size:17px; margin-bottom:10px; }
.comic-tag { display:inline-block; font-size:11px; font-weight:750; background:#fff9; padding:4px 9px; border-radius:4px; }
.comic-credit { font-size:11px; font-weight:650; margin-top:10px; color:#666071; }
.gallery-heading { margin-bottom:32px; }
.gallery-heading h1 { margin-top:0; }
.gallery-heading .example-note { margin-top:8px; }
.character-collection { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.character-entry { display:block; padding:0; border:1px solid #dfdde8; border-radius:8px; overflow:hidden; background:#eaf2fb; }
.character-entry>img { width:100%; aspect-ratio:1; object-fit:contain; border:0; border-radius:0; background:transparent; image-rendering:pixelated; }
.character-entry>div { padding:18px; }
.character-entry h2 { font-size:19px; }
.character-entry p { font-size:13px; line-height:1.6; }
.character-entry .eyebrow { font-size:10px; }
.character-entry .content-link { font-size:12px; }
.comic-reader { width:min(760px,calc(100% - 24px)); max-height:92dvh; padding:0 18px 18px; border:1px solid #d6cee7; border-radius:8px; background:#faf9ff; color:#211d36; }
.comic-reader::backdrop { background:#151225cc; }
.comic-reader header { display:flex; align-items:center; justify-content:space-between; gap:16px; position:sticky; top:0; background:#faf9ff; padding:14px 0; z-index:1; }
.comic-reader h2 { font-size:18px; margin:0; }
.comic-reader button { width:40px; height:40px; flex-shrink:0; border:1px solid #cec8df; background:white; color:#211d36; font-size:28px; border-radius:4px; cursor:pointer; }
.comic-reader img { width:100%; }
.reader-original { display:inline-block; font-size:13px; padding-top:18px; text-decoration:underline; }
.reading-comic { overflow:hidden; }
.oc-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.story-card-art { aspect-ratio:2/3; padding:12px; }
.story-card-art img { display:block; width:100%; height:100%; object-fit:contain; }
.story-card .oc-card-copy { min-height:132px; }
.story-portrait { margin:0; padding:12px; background:var(--oc-color); border:1px solid #dedee5; border-radius:8px; }
.story-portrait img { display:block; width:100%; height:auto; }
.story-about { margin-top:36px; border-top:1px solid #dedee5; padding-top:24px; }
.story-about p { line-height:1.7; }
@media(max-width:700px) { .story-portrait { width:100%; }.story-card-art { padding:6px; }.story-card .oc-card-copy { min-height:144px; } }
.oc-card { display:block; background:var(--oc-color); border:1px solid #dedee5; border-radius:8px; overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; min-width:0; }
.oc-card:hover { color:inherit; transform:translateY(-4px); box-shadow:0 8px 20px #211d3612; }
.oc-card-art { height:285px; display:grid; place-items:center; padding:20px 24px 6px; }
.oc-card-art img { width:100%; height:100%; object-fit:contain; min-height:0; }
.oc-card-copy { padding:16px; }
.oc-card h2 { font-size:19px; margin:0 0 8px; }
.oc-role { font-size:12px; font-weight:750; line-height:1.5; }
.oc-tags { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0; }
.oc-tags span { font-size:10px; line-height:1.5; padding:3px 7px; border-radius:4px; background:#ffffffa6; color:#4f465c; font-weight:650; }
.oc-credit { font-size:11px; display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:12px; color:#5f5968; line-height:1.5; }
.oc-credit>span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff9; border:1px solid #211d3615; font-weight:800; flex-shrink:0; }
.oc-credit strong { overflow-wrap:anywhere; }
.oc-disclosure { font-size:11px; color:#6c6577; margin-top:14px; }
.oc-back { display:inline-block; font-size:13px; font-weight:750; margin-bottom:32px; }
.oc-profile { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:52px; row-gap:36px; align-items:start; }
.oc-intro { grid-column:1; grid-row:1; padding-top:16px; }
.oc-intro h1 { font-size:48px; margin:14px 0 22px; }
.oc-intro .oc-credit { font-size:15px; }
.oc-intro .oc-credit>span { width:38px; height:38px; }
.oc-intro .oc-tags span { font-size:12px; }
.oc-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin:26px 0; }
.oc-actions .content-link { margin:0; }
.oc-portrait { grid-column:2; grid-row:1 / span 2; background:var(--oc-color); border:1px solid #dedee5; border-radius:8px; height:710px; padding:44px 38px; position:sticky; top:24px; }
.oc-portrait img { width:100%;height:100%;object-fit:contain; }
.oc-about { grid-column:1; grid-row:2; border-top:2px solid #d3c9e5; padding-top:24px; }
.oc-about h2 { font-size:24px; }
.oc-about h3 { font-size:14px; margin:24px 0 8px; }
.oc-about p { font-size:14px; }
.oc-about dl { margin:0; }
.oc-about dl>div { padding:12px 0;border-bottom:1px solid #e3dfeb; }
.oc-about dt { font-size:10px; font-weight:800; text-transform:uppercase; color:#6c6577; }
.oc-about dd { margin:4px 0 0;font-size:14px;font-weight:650; }
.oc-about blockquote { margin:22px 0;padding:12px 18px;border-left:3px solid #9380ca;background:#f5f2fa;font-size:15px; }
.oc-related { margin-top:64px; padding-top:30px; border-top:1px solid #ded9ec; }
@media(max-width:1000px) { .oc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.oc-profile { gap:28px; }.oc-portrait { height:590px; } }
@media(max-width:700px) { .oc-grid { gap:12px; }.oc-card-art { height:220px; padding:16px 16px 4px; }.oc-card-copy { padding:12px; }.oc-card h2 { font-size:17px; }.oc-profile { display:flex; flex-direction:column; }.oc-portrait { position:static; width:100%;height:480px;order:2; }.oc-intro { order:1; }.oc-about { order:3;width:100%; }.oc-intro h1 { font-size:36px; }.oc-credit { font-size:10px; }.oc-related { margin-top:40px; } }
@media(prefers-reduced-motion:reduce) { .oc-card { transition:none; }.oc-card:hover { transform:none; } }
.faq-list { max-width:800px; margin-bottom:48px; }
.faq-list details { border-bottom:1px solid #ded9ec; padding:22px 0; }
.faq-list details:first-child { border-top:1px solid #ded9ec; }
.faq-list summary { cursor:pointer; font-size:17px; font-weight:750; line-height:1.5; }
.faq-list summary::marker { color:#7768dc; }
.faq-list summary:focus-visible { outline:3px solid #7768dc; outline-offset:5px; }
.faq-list p { margin-top:16px; color:#555369; font-size:15px; }
.faq-list a { color:#6652bc; text-decoration:underline; text-underline-offset:3px; }
button:focus-visible { outline:3px solid #7768dc; outline-offset:3px; }
@media(max-width:1000px) { .comic-grid,.character-collection { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) { .content-nav { flex-wrap:wrap; gap:18px; }.content-nav nav { order:3; width:100%; margin:0;gap:12px 22px; }.home-link { margin-left:auto; }h1 { font-size:34px; }main { padding:40px 22px 0; }.article-layout,.about-layout { grid-template-columns:1fr; }.journal-entry { grid-template-columns:1fr; gap:26px; }.article-art,.about-art { max-width:400px; width:100%; margin:auto; }.content-cta>div { flex-wrap:wrap; } }
@media(max-width:480px) { .comic-grid,.character-collection { gap:16px 10px; }.comic-info,.character-entry>div { padding:12px; }.comic-info h2 { font-size:15px; }.character-entry h2 { font-size:17px; }.content-heading { margin-bottom:28px; } }
@media(prefers-reduced-motion:reduce) { .comic-card { transition:none; }.comic-card:hover { transform:none; } }