*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#faf7ff;color:#30223f;font-family:system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;line-height:1.7}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #523076;outline-offset:5px}.skip{position:fixed;top:-100px;left:12px;z-index:20;background:white;padding:12px}.skip:focus{top:12px}.wrap{max-width:1120px;margin:auto;padding:0 32px}.header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:25px;border-bottom:1px solid #d8c9e8}.brand{font-weight:800;letter-spacing:-.04em}.nav{display:flex;gap:25px;flex-wrap:wrap;font-size:14px}.eyebrow{font-size:12px;letter-spacing:.18em;color:#62427f;font-weight:700}.hero{padding:100px 0 80px;position:relative}.hero h1{font-size:clamp(48px,9vw,106px);line-height:1.12;letter-spacing:-.065em;margin:22px 0}.hero p{font-size:20px;color:#624d77;max-width:580px}.hero:after{content:'✳';position:absolute;right:20px;top:75px;color:#38234f;font-size:120px;line-height:1}.button{display:inline-flex;align-items:center;justify-content:center;background:#65418c;color:#fff;padding:13px 24px;border-radius:5px;border:1px solid #65418c;font-size:15px;font-weight:650}.outline{background:transparent;color:#65418c}.section{padding:48px 0 60px;border-top:1px solid #d8c9e8;scroll-margin-top:24px}.section h2{font-size:27px;letter-spacing:-.04em;margin:0 0 24px}.feature{display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;background:#eee5f8;padding:40px;border-radius:8px}.feature h3{font-size:42px;line-height:1.2;letter-spacing:-.05em;margin:10px 0}.muted{color:#624d77}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}.card{border:1px solid #d8c9e8;border-radius:6px;padding:26px}.card h3{margin:0 0 10px}.about{display:grid;grid-template-columns:1fr 1fr;gap:48px}.about p{white-space:pre-line;margin-top:0}.about ul{margin-top:0;padding-left:20px}.contacts{display:flex;gap:14px;flex-wrap:wrap}.footer{padding:28px 0 45px;font-size:12px;color:#624d77;border-top:1px solid #d8c9e8}.reader{background:#efebf4}.reader-header{background:#faf7ff;padding:15px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid #d8c9e8}.reader-header h1{font-size:17px;margin:0}.reader-header a{font-size:14px}.pages{width:min(100%,1080px);margin:0 auto;background:white}.page{position:relative;margin:0;width:100%;background:#fff}.page img{display:block;width:100%;height:auto}.image-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f5effc;color:#624d77;text-align:center;padding:16px}.image-state[hidden]{display:none}.image-state button{padding:10px 16px;border:1px solid #745592;background:#fff;border-radius:4px}.episode-footer{max-width:1080px;margin:auto;padding:50px 22px;text-align:center}.episode-nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.episode-nav .disabled{opacity:.55;cursor:default}.reader-links{margin-top:24px;display:flex;gap:24px;justify-content:center;font-size:14px}.notice{padding:50px;text-align:center}@media(max-width:700px){.wrap{padding:0 20px}.header{align-items:flex-start;flex-direction:column;gap:15px}.nav{gap:12px 20px}.hero{padding:65px 0 55px}.hero:after{font-size:54px;top:35px;right:0}.hero p{font-size:17px}.feature{padding:26px;grid-template-columns:1fr;gap:16px}.feature h3{font-size:34px}.about{grid-template-columns:1fr;gap:18px}.section{padding:35px 0 40px}.reader-header{padding:12px 16px}.episode-nav .button{flex:1;min-width:120px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:root{--background:#faf7ff;--ink:#30223f;--primary:#65418c;--hero:#ded0f3;--hero-text:#38234f}body{background:var(--background);color:var(--ink)}.button{background:var(--primary);border-color:var(--primary)}.outline{background:transparent;color:var(--primary)}.hero{background:var(--hero);color:var(--hero-text);padding:80px 44px;margin:28px 0 48px;border-radius:12px;overflow:hidden}.hero p,.hero .eyebrow{color:var(--hero-text)}.hero:after{color:var(--hero-text);opacity:.8;pointer-events:none}.hero .button{background:#fff;color:#58357d;border-color:#fff}.hero h1{overflow-wrap:anywhere;position:relative;z-index:1}.brand{font-size:23px;color:var(--primary)}.nav a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:5px}.hero p{position:relative;z-index:1}.reader{background:#efebf4}@media(max-width:700px){.hero{padding:65px 24px 40px;margin:20px 0 32px}.hero:after{right:16px;top:20px;font-size:45px}}

.feature{grid-template-columns:minmax(0,1fr) auto}.feature>div{min-width:0}.work-art-link{display:block;width:min(100%,620px);aspect-ratio:4/3;overflow:hidden;background:#fff;border-radius:6px;margin:18px 0}.work-art-link img{display:block;width:100%;height:100%;object-fit:cover}@media(max-width:700px){.feature{grid-template-columns:minmax(0,1fr)}}

/* Uploaded title artwork: preserve full image and original proportions. */
.work-art-link{aspect-ratio:auto;background:transparent;overflow:visible}.work-art-link img{width:100%;height:auto;object-fit:contain}

/* Campus hero background and compact graduation card */
.hero{isolation:isolate}.hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero::before{content:"";position:absolute;inset:0;background:rgba(250,247,255,.58);z-index:-1}.hero:after{display:none}.hero .button{position:relative;z-index:1}.hero .eyebrow{position:relative;z-index:1}
#graduation .feature{width:50%;grid-template-columns:minmax(0,1fr);gap:18px;padding:26px}#graduation .feature>.button{justify-self:start}
@media(max-width:700px){#graduation .feature{width:100%;max-width:528px;padding:22px}}

/* Keep the existing compact width; artwork left, details right. */
#graduation .feature{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
#graduation .feature-background{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);max-width:none;object-fit:cover;z-index:-2;pointer-events:none}
#graduation .feature::before{content:"";position:absolute;inset:0;background:rgba(250,247,255,.65);z-index:-1;pointer-events:none}
#graduation .work-art-link{width:100%;min-width:0;margin:0;align-self:center}
#graduation .feature-info{min-width:0}#graduation .feature-info .eyebrow{font-size:10px;letter-spacing:.1em;overflow-wrap:anywhere}#graduation .feature-info p{font-size:14px;color:var(--ink);overflow-wrap:anywhere}#graduation .feature-info .button{max-width:100%;padding:11px 13px;font-size:13px;text-align:center}
@media(max-width:700px){#graduation .feature{gap:16px;padding:20px}}
@media(max-width:360px){#graduation .feature{gap:12px;padding:16px}#graduation .feature-info .button{font-size:12px;padding:9px}}

/* Character artwork touches the hero's right and bottom edges. */
.hero.has-character{min-height:420px;padding-right:46%}
.hero.has-character h1{font-size:clamp(40px,7vw,90px)}
.hero.has-character .hero-character{position:absolute;right:0;bottom:0;width:44%;height:100%;object-fit:contain;object-position:right bottom;z-index:0;pointer-events:none;display:block}
@media(max-width:700px){.hero.has-character{min-height:440px;padding-right:42%;padding-left:20px}.hero.has-character h1{font-size:clamp(32px,8vw,56px)}.hero.has-character p{font-size:15px}.hero.has-character .eyebrow{font-size:10px;letter-spacing:.06em}.hero.has-character .hero-character{width:42%}.hero.has-character .button{font-size:13px;padding:11px 12px}}