/* The reference's compact, framed composition. Approved interface.css stays intact. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.chapter-brief p{line-height:1.85}
.chapter-brief[data-chapter="6"] p:last-child{font-size:19px!important;font-style:italic;color:#d4e5ff;margin:23px 0}
.home-shell,.about-shell{width:calc(100% - 64px);max-width:1280px;margin:20px auto 40px;display:grid;gap:18px}
.tech-panel{--panel-edge:#3d6dff66;position:relative;isolation:isolate;min-width:0;border:0;background:transparent;box-shadow:none;padding:24px;clip-path:none}
.tech-panel::before,.tech-panel::after{content:'';position:absolute;margin:0;pointer-events:none;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px)}
.tech-panel::before{z-index:-2;inset:0;background:linear-gradient(135deg,var(--panel-edge),#25334d 50%,var(--panel-edge))}
.tech-panel::after{z-index:-1;inset:1px;background:linear-gradient(120deg,#0a0c12,#0b0f19)}
#view-start .hero{height:auto;min-height:550px;max-width:1440px}
#view-start .hero-content{width:610px;max-width:58%;padding:35px 0 55px;margin-left:6%}
#view-start .hero-wordmark{width:310px;margin-bottom:14px}
#view-start .hero .eyebrow{margin-bottom:14px;font-size:9px}
#view-start .hero h1{font-size:clamp(34px,4vw,56px);line-height:1.12}
#view-start .hero-lead{font-size:18px;margin:17px 0 10px}
#view-start .hero-copy{font-size:12px;max-width:370px}
#view-start .hero-actions{margin-top:18px;gap:12px;flex-wrap:wrap}
#view-start .hero-actions .button{padding:13px 18px;font-size:17px;gap:15px}
#view-start .new-reader-link{margin-top:15px}
#view-start .hero-caption{bottom:15px;left:6%;font-size:8px}
#view-start .hero-art{inset:0 0 0 26%;background-position:center 38%}
#view-start .home-shell .section{width:100%;max-width:none;margin:0}
#view-start .comic-energy{grid-template-columns:240px minmax(0,1fr);gap:25px;align-items:center}
#view-start .comic-energy h2{font-size:27px;line-height:1.2;margin:9px 0 12px}
#view-start .comic-energy p{font-size:12px;margin-bottom:10px}
#view-start .comic-energy .eyebrow{font-size:8px;letter-spacing:1.4px}
#view-start .comic-energy-art{gap:10px;min-width:0}
#view-start .comic-energy-art img{height:190px;object-fit:contain}
#view-start .comic-energy-art button{box-shadow:none}
.home-spotlight{--panel-edge:var(--spotlight-accent);padding:0}
.home-spotlight::after{background:radial-gradient(ellipse at 72% 20%,var(--spotlight-glow),transparent 65%),#080b12}
.spotlight-slide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:305px}
.spotlight-art{position:relative;min-width:0;display:grid;place-items:center;margin:12px 0 12px 12px;overflow:hidden;background:radial-gradient(ellipse at center,var(--spotlight-glow),#05070c 80%);border:1px solid color-mix(in srgb,var(--spotlight-accent) 45%,transparent)}
.spotlight-art img{width:100%;height:290px;object-fit:contain;display:block}
.spotlight-slide[data-type=world] .spotlight-art img{object-fit:cover}
.spotlight-kind{position:absolute;left:14px;bottom:14px;padding:5px 9px;background:#070b13e8;border-left:2px solid var(--spotlight-accent);color:#f2f5fc;font:700 13px/1.4 'Agency FB',sans-serif;letter-spacing:1.2px}
.spotlight-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:27px 32px;min-width:0}
.spotlight-copy .eyebrow{color:var(--spotlight-accent);font-size:9px}
#view-start .spotlight-copy h2{font-size:clamp(24px,2.8vw,37px);line-height:1.2;margin:13px 0 10px;color:#f4f8ff}
.spotlight-copy .spotlight-tag{font:700 17px/1.4 'Agency FB',sans-serif;letter-spacing:1.1px;color:color-mix(in srgb,var(--spotlight-secondary) 75%,white);margin-bottom:14px}
.spotlight-copy p:not(.spotlight-tag){font-size:13px;line-height:1.75;max-width:460px;margin-bottom:19px}
:root .home-spotlight .button{--edge:var(--spotlight-accent);--edge-light:var(--spotlight-accent);--face-top:#101722;--face-bottom:#05080d}
@media(hover:hover){:root .home-spotlight :is(.button,.quiet-button):not(:disabled):hover{--edge:var(--spotlight-accent);--edge-light:#f4f8ff;--face-top:var(--spotlight-glow);--face-bottom:#080b12;filter:drop-shadow(0 0 7px var(--spotlight-glow))}}
.spotlight-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid color-mix(in srgb,var(--spotlight-accent) 25%,transparent)}
.spotlight-hint{font-size:8px;letter-spacing:1.5px;color:var(--spotlight-accent)}
.spotlight-controls>div{display:flex;align-items:center;gap:15px}
.spotlight-controls .quiet-button{margin:0;min-width:46px;font:18px/1 monospace;--edge:var(--spotlight-accent);--edge-light:var(--spotlight-accent)}
#spotlight-position{font:11px/1.5 monospace;letter-spacing:1px;white-space:nowrap;color:#d1dbee}
.home-editions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
#view-start .home-editions .section-heading{margin-bottom:19px;padding-bottom:14px;gap:14px;align-items:center}
#view-start .home-editions .section-heading h2{font-size:20px;line-height:1.3;color:#b3ceff}
#view-start .home-editions .section-heading .text-link{font-size:10px;white-space:nowrap}
#view-start .featured-chapter{display:flex;flex-direction:column}
#view-start .feature-layout{grid-template-columns:145px minmax(0,1fr);align-items:center;align-content:center;flex:1;gap:22px;border:0;padding:4px 0 0;background:none;box-shadow:none}
#view-start .feature-cover{width:140px;margin:8px 0;box-shadow:6px 6px 0 #03050b,7px 7px 0 #4569a566}
#view-start .feature-copy{background:none;min-width:0}
#view-start .feature-copy .eyebrow{font-size:8px;letter-spacing:1.4px}
#view-start .feature-copy h3{font-size:22px;line-height:1.25;margin:12px 0 14px}
#view-start .feature-copy p{font-size:12px;line-height:1.7;margin-bottom:15px}
#view-start .feature-actions{margin:0 0 12px;gap:9px;flex-direction:column;align-items:flex-start}
#view-start .feature-actions .button{padding:12px 15px;gap:16px;max-width:100%;font-size:16px}
#view-start .feature-copy .small{font-size:10px;line-height:1.6}
#view-start .shelf-heading{font-size:8px;letter-spacing:1px;margin-bottom:8px;gap:8px}
#view-start .shelf-controls button{width:42px;height:44px}
#view-start .cover-shelf{gap:14px;padding:5px 3px 15px;min-width:0}
#view-start .shelf-item{flex:0 0 110px;min-width:0}
#view-start .shelf-item h3{font-size:12px;margin:11px 0 7px;line-height:1.4}
#view-start .shelf-item .small{font-size:8px}
#view-start .collection-paths{gap:12px;margin-top:15px}
#view-start .collection-paths a{padding:14px 12px}
#view-start .collection-paths span{font-size:8px;letter-spacing:1.1px}
#view-start .collection-paths strong{font-size:12px;line-height:1.5;margin:8px 0}
#view-start .collection-paths strong{display:none}
#view-start .collection-paths b{font-size:10px;line-height:1.5}
#view-start .route-section::before{content:'';inset:0}
#view-start .route-section .section-heading{padding-bottom:15px;margin-bottom:18px}
#view-start .route-section .section-heading h2{font-size:24px;line-height:1.25}
#view-start .route-section .section-heading h2 br{display:none}
#view-start .route-section .section-heading .eyebrow{margin-bottom:9px;font-size:8px}
#view-start .route-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px}
#view-start .route-options button{padding:12px 15px;gap:14px;min-height:65px}
#view-start .route-options strong{font-size:14px}
#view-start .route-options small{font-size:10px;margin-top:2px}
#view-start .route-result{min-height:0;padding:20px;justify-content:flex-start}
#view-start .route-result .eyebrow{font-size:8px}
#view-start .route-result h3{font-size:22px;margin:10px 0 12px}
#view-start .route-result p{font-size:12px;max-width:100%;margin-bottom:14px}
#view-start .route-result .path-steps{margin:0 0 15px;font-size:9px}
#view-start .route-result .button{font-size:16px;min-height:46px;padding:11px 16px}
#view-start .closing{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;text-align:left;background:none;margin-top:22px;padding:18px 0 0;border-top:1px solid #3d6dff33}
#view-start .closing>.button{margin:0;padding:11px 16px;font-size:16px}
#view-start .closing .eyebrow{font-size:8px;letter-spacing:1.5px}
#view-start .closing small{font-size:10px;margin:0}
#view-start .creator-strip{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:center;gap:32px;min-height:0;padding:18px}
#view-start .creator-strip::before{inset:0;background:linear-gradient(135deg,var(--panel-edge),#25334d 50%,var(--panel-edge))}
.home-creator-photo{display:block;width:100%;height:270px;object-fit:contain;background:#05080d;border:1px solid #5d83bd66}
#view-start .creator-strip h2{font-size:28px;line-height:1.3;margin:10px 0 15px}
#view-start .creator-strip p{font-size:13px;margin-bottom:22px}
#view-start .creator-strip .button{font-size:17px;padding:13px 18px}
#view-about>.page-intro{min-height:315px;padding-block:42px;margin-bottom:0}
#view-about>.page-intro h1{font-size:clamp(32px,4.4vw,56px);line-height:1.2;margin:15px 0 19px}
#view-about>.page-intro .intro-lead{font-size:15px;line-height:1.75}
.about-panels{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:18px;align-items:stretch}
#view-about .panel-title{font-size:20px;color:#9fc4ff;margin:0 0 20px;padding-bottom:13px;border-bottom:1px solid #3d6dff33}
.about-creator-content{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,1.15fr);gap:22px;align-items:start}
.about-creator .creator-portrait{box-shadow:none;border-color:#5d83bd66;background:#080c14}
.about-creator .creator-portrait figcaption{padding:13px 8px;gap:5px}
.about-creator .creator-portrait strong{font:700 17px/1.3 'Agency FB',sans-serif;letter-spacing:1.4px}
.about-creator .creator-portrait figcaption span{font-size:7px;letter-spacing:1.8px}
#view-about .about-creator h3{font-size:22px;margin-bottom:10px;line-height:1.2}
.about-creator p,.about-origin p{font-size:13px;line-height:1.8;margin-bottom:17px}
.about-creator .creator-role{font:700 14px/1.5 'Agency FB',sans-serif;letter-spacing:1px;color:#8bbfff;margin-bottom:16px}
.about-creator blockquote{font:400 20px/1.5 'Agency FB',sans-serif;color:#9fc4ff;border-left:2px solid #3d6dff;margin:22px 0 0;padding-left:14px}
.origin-copy{padding:12px 8px 4px}
.origin-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.origin-sketch{display:grid;place-items:center;min-width:0;padding:0;border:1px solid #6b8fb577;background:#05080d;min-height:160px}
.origin-sketch:hover{border-color:#b7d4ff;background:#101a29}
.origin-sketch img{display:block;width:100%;height:170px;object-fit:contain}
.about-origin .origin-gallery-caption{font:12px/1.6 'Agency FB',sans-serif;letter-spacing:.4px;color:#b2c9e9;margin:0 0 17px}
.origin-sketch-full{margin:0}
.origin-sketch-full img{display:block;width:100%;height:auto;max-height:66dvh;object-fit:contain;background:#05080d}
.origin-sketch-full figcaption{margin-top:15px;color:#aabed8;font-size:12px}
.origin-copy .eyebrow{font-size:9px;margin-bottom:15px}
#view-about .origin-copy h3{font-size:25px;line-height:1.4;margin:0 0 24px}
.about-origin .origin-line{font:400 23px/1.5 'Agency FB',sans-serif;color:#9fc4ff;padding-top:16px;border-top:1px solid #3d6dff33;margin-top:25px}
.about-socials{display:flex;align-items:center;justify-content:space-between;gap:24px}
#view-about .about-socials h2{font-size:25px;margin:10px 0}
.about-socials p{font-size:12px;margin:0}
.social-links{display:flex;gap:14px;margin:0;flex-wrap:wrap;justify-content:flex-end;font-weight:400}
.social-links .social-link{display:flex;flex-direction:column;align-items:center;gap:5px;color:#b8c4d8;border:0;padding:0;min-width:126px;font:14px/1.5 'Agency FB',sans-serif;letter-spacing:.5px}
.social-art{display:block;width:126px;height:62px;background-image:url('assets/ui/social-button-sheet.png');background-repeat:no-repeat;background-size:1536px 1024px;transition:filter .18s ease,transform .18s ease}
.social-x .social-art{background-position:-943px -677px}
.social-instagram .social-art{background-position:-1080px -677px}
.social-youtube .social-art{background-position:-1222px -677px}
.social-link:hover .social-art{filter:brightness(1.3);transform:translateY(-2px)}
.social-link:focus-visible{outline:3px solid #9fc4ff;outline-offset:5px}
.social-links .social-link:hover{color:#fff}
.linktree-frame{position:relative;isolation:isolate;background:none;display:grid;place-items:center;color:#32D992}
.linktree-frame::before,.linktree-frame::after{content:'';position:absolute;pointer-events:none;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.linktree-frame::before{inset:5px 3px;z-index:-2;background:linear-gradient(135deg,#65f7b8,#17734c 40%,#123c2b 65%,#46db93)}
.linktree-frame::after{inset:7px 5px;z-index:-1;background:linear-gradient(180deg,#08271c,#020b08 70%);box-shadow:inset 0 0 0 1px #4aedaa33}
.linktree-frame svg{display:block;width:30px;height:30px;filter:drop-shadow(0 0 4px #24d28a55)}
.about-invitation{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
#view-about .about-invitation h2{font-size:24px;margin:10px 0 17px}
.about-invitation p{font-size:13px;max-width:800px}
.about-invitation p:last-child{margin-bottom:0}
.about-invitation .inline-actions{flex-direction:column;align-items:stretch;gap:12px}
.about-invitation .button{font-size:17px}
@media(min-width:1500px){.home-shell,.about-shell{width:calc(100% - 96px)}}
@media(max-width:1100px){
 .home-shell,.about-shell{width:calc(100% - 40px)}
 .tech-panel{padding:20px}
 .home-spotlight{padding:0}
 #view-start .feature-layout{grid-template-columns:110px minmax(0,1fr);gap:18px}
 #view-start .feature-cover{width:105px}
 #view-start .feature-copy h3{font-size:19px}
 #view-start .home-editions .section-heading{align-items:flex-start;flex-direction:column;gap:6px}
 .about-panels{grid-template-columns:1fr 1fr}
 .about-creator-content{grid-template-columns:1fr}
 .about-creator .creator-portrait{max-width:230px;margin:0}
 .about-socials{align-items:flex-start;flex-direction:column}
 .social-links{justify-content:flex-start}
}
@media(max-width:850px){
 #view-start .hero-content{max-width:68%}
 .home-editions{grid-template-columns:1fr}
 #view-start .home-editions .section-heading{flex-direction:row;align-items:center}
 #view-start .feature-layout{grid-template-columns:165px minmax(0,1fr);gap:25px}
 #view-start .feature-cover{width:150px}
 #view-start .feature-copy h3{font-size:24px}
 #view-start .feature-actions{flex-direction:row;flex-wrap:wrap}
 #view-start .comic-energy{grid-template-columns:190px minmax(0,1fr);gap:15px}
 #view-start .comic-energy h2{font-size:23px}
 #view-start .comic-energy-art img{height:190px}
 .spotlight-copy{padding:22px}
 #view-start .spotlight-copy h2{font-size:27px}
 .about-creator-content{gap:18px}
 .origin-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* The global mobile nav rule is for the header menu. Social links must
    contribute their full height to the About panel and its following row. */
 #view-about .social-links{position:static;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0;margin:0;padding:0;border:0;background:none;gap:20px 10px}
 .about-invitation{grid-template-columns:1fr}
 .about-invitation .inline-actions{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:600px){
 .home-shell,.about-shell{width:calc(100% - 28px);margin:14px auto 25px;gap:14px}
 .tech-panel{padding:20px}
 #view-start .hero{min-height:0;display:block}
 #view-start .hero-art{inset:0 0 auto;height:365px;background-position:center 30%;opacity:.94}
 #view-start .hero-shade{background:linear-gradient(0deg,#0b0b0f 0%,#0b0b0ff5 38%,#0b0b0f20 80%)}
 #view-start .hero-content{width:auto;max-width:none;margin:0 24px;padding:230px 0 50px}
 #view-start .hero-wordmark{width:230px;margin-bottom:17px}
 #view-start .hero h1{font-size:clamp(28px,8vw,42px)}
 #view-start .hero .eyebrow{font-size:8px;letter-spacing:1.5px}
 #view-start .hero-lead{font-size:17px;line-height:1.5;margin-top:18px}
 #view-start .hero-copy{font-size:12px;max-width:none}
 #view-start .hero-actions{gap:10px;align-items:stretch;flex-direction:column}
 #view-start .hero-actions .button{width:100%;min-width:0;justify-content:space-between}
 #view-start .hero-caption{left:24px;bottom:16px;font-size:7px;letter-spacing:1.5px}
 #view-start .comic-energy{grid-template-columns:1fr;gap:18px}
 #view-start .comic-energy h2{font-size:26px}
 #view-start .comic-energy h2 br{display:none}
 #view-start .comic-energy-art{gap:7px}
 #view-start .comic-energy-art img{height:150px}
 .home-spotlight{padding:0}
 .spotlight-slide{grid-template-columns:1fr}
 .spotlight-art{margin:10px 10px 0;min-height:225px}
 .spotlight-art img{height:225px}
 .spotlight-copy{padding:22px}
 #view-start .spotlight-copy h2{font-size:28px;line-height:1.25}
 .spotlight-copy .spotlight-tag{font-size:16px}
 .spotlight-copy p:not(.spotlight-tag){font-size:13px;min-height:44px}
 :root .home-spotlight .button{width:100%;justify-content:space-between;padding-inline:17px}
 .spotlight-controls{padding:11px 15px}
 .spotlight-hint{font-size:7px;max-width:130px;line-height:1.7;letter-spacing:1px}
 .spotlight-controls>div{gap:10px}
 .spotlight-controls .quiet-button{min-width:44px;padding:10px}
 #view-start .home-editions .section-heading{flex-direction:column;align-items:flex-start;gap:7px}
 #view-start .home-editions .section-heading h2{font-size:22px}
 #view-start .feature-layout{grid-template-columns:96px minmax(0,1fr);gap:18px}
 #view-start .feature-cover{width:90px;margin:5px 0}
 #view-start .feature-copy h3{font-size:20px;line-height:1.35;margin-top:10px}
 #view-start .feature-copy .eyebrow{font-size:7px}
 #view-start .feature-copy p{font-size:12px}
 #view-start .feature-actions{flex-direction:column;align-items:stretch}
 #view-start .feature-actions .button{width:100%;font-size:16px;gap:10px;padding:12px}
 #view-start .feature-copy .small{font-size:10px}
 #view-start .shelf-item{flex-basis:128px}
 #view-start .shelf-heading{font-size:7px}
 #view-start .collection-paths{grid-template-columns:1fr 1fr;gap:10px}
 #view-start .collection-paths a{padding:13px 10px;min-width:0}
 #view-start .collection-paths strong{font-size:11px}
 #view-start .route-section .section-heading h2{font-size:23px}
 #view-start .route-layout{grid-template-columns:1fr;gap:16px}
 #view-start .route-options button{padding:14px;min-height:67px}
 #view-start .route-options strong{font-size:15px}
 #view-start .route-options small{font-size:11px}
 #view-start .route-result{padding:20px 17px}
 #view-start .route-result h3{font-size:22px}
 #view-start .route-result .button{width:100%;justify-content:space-between}
 #view-start .closing{display:flex;align-items:flex-start;flex-direction:column;gap:12px;padding-top:18px}
 #view-start .closing>.button{width:100%;justify-content:space-between}
 #view-start .creator-strip{grid-template-columns:1fr;gap:22px;padding:20px}
 .home-creator-photo{height:280px;max-width:300px;margin:auto}
 #view-start .creator-strip h2{font-size:28px}
 #view-start .creator-strip .button{width:100%;justify-content:space-between}
 #view-about>.page-intro{padding:44px 24px 32px;min-height:0}
 #view-about>.page-intro h1{font-size:33px}
 #view-about>.page-intro .intro-lead{font-size:13px}
 .about-panels{grid-template-columns:1fr;gap:14px}
 .about-creator-content{grid-template-columns:1fr;gap:24px}
 .about-creator .creator-portrait{max-width:290px;margin:auto}
 #view-about .about-creator h3{font-size:25px}
 .about-creator p,.about-origin p{font-size:13px}
 #view-about .origin-copy h3{font-size:24px}
 .origin-copy{padding:4px 0}
 .origin-sketch img{height:180px}
 #view-about .about-socials h2{font-size:24px}
 .social-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:20px 10px}
 .social-links .social-link{min-width:0;font-size:16px;padding:0;align-items:center}
 .about-invitation{gap:20px}
 #view-about .about-invitation h2{font-size:25px}
 .about-invitation .inline-actions{flex-direction:column}
 .about-invitation .button{width:100%;justify-content:space-between}
}
@media(max-width:359px){
 #view-about .social-links{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
 .social-art{transition:none}
 .social-link:hover .social-art{transform:none}
 #view-start .shelf-cover-button:hover{transform:none}
}

/* Featured artwork, title and action share one canonical file destination. */
#home-spotlight[data-spotlight-pending] .spotlight-stage,#home-spotlight[data-spotlight-pending] .spotlight-controls{visibility:hidden}
a.spotlight-art{text-decoration:none;touch-action:pan-y;-webkit-user-drag:none}
.spotlight-art img{-webkit-user-drag:none;user-select:none}
#spotlight-title-link{font:inherit;line-height:inherit;color:inherit;text-decoration:none;transition:color .18s ease,text-shadow .18s ease}
#spotlight-title-link:hover{color:var(--spotlight-accent);text-shadow:0 0 12px var(--spotlight-glow)}
a.spotlight-art:hover{border-color:var(--spotlight-accent);box-shadow:inset 0 0 18px var(--spotlight-glow)}
a.spotlight-art:focus-visible,#spotlight-title-link:focus-visible{outline:3px solid var(--spotlight-accent);outline-offset:-4px}
#spotlight-title-link:focus-visible{outline-offset:5px}
@media(prefers-reduced-motion:reduce){#spotlight-title-link{transition:none}}