/* Aoi: a ribbon-tied collection of conversations, mysteries, and little hearts. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');
:root { --accent:#a42e74; --accent-2:#326b9b; --text-main:#41334e; --text-muted:#574c66; --text-soft:#76637e; --pink:#f3a8c9; --blue:#bedff1; --paper:#fffafc; --rule:#d8c7dc; --display:'Nunito',sans-serif; }
html { background:var(--paper); scroll-behavior:smooth; }
body { background:radial-gradient(ellipse at 80% 180px,#d9effc 0,transparent 700px),radial-gradient(ellipse at 0 900px,#fbe1ed,transparent 850px),var(--paper); }
body::before { background:radial-gradient(#caaccc 1px,transparent 1px); background-size:22px 22px; opacity:.16; mix-blend-mode:normal; z-index:0; }
::selection { background:#f5bdd7; color:#41334e; }
.nav-wrapper { background:#fffafcf5; }
a:focus-visible,button:focus-visible,.memory-shelf:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.aoi-page { position:relative; z-index:1; padding-top:calc(var(--nav-height) + 52px); padding-bottom:70px; }
.aoi-page p { line-height:1.85; }
.aoi-page p + p { margin-top:1.1em; }
.aoi-page .page-hero { grid-template-columns:1.15fr 1fr; gap:76px; margin-bottom:48px; }
.hero-kicker,.aoi-kicker,.gem-label { font:800 .72rem/1.5 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.hero-kicker { display:inline-block; border-block:1px solid #d797b8; padding:7px 0; }
.hero-title { font:900 clamp(2.7rem,4.6vw,4rem)/1.08 var(--display); letter-spacing:-.045em; margin:20px 0 24px; }
.hero-title > span { display:block; font-size:clamp(6.8rem,11.5vw,10.5rem); line-height:.95; color:#447ba3; letter-spacing:-.075em; text-shadow:3px 4px #fff,5px 6px #bad8ef; margin:0 0 22px; }
.hero-title em { display:block; font-style:normal; color:var(--accent); }
.hero-subtitle { font-size:1rem; }
.hero-tags { gap:9px 14px; max-width:410px; margin-top:22px; }
.hero-tag { border:none; border-radius:0; background:none; padding:0; font:700 .72rem/1.5 var(--display); color:var(--text-soft); }
.hero-tag::before { content:'♡'; margin-right:7px; color:var(--accent); }
.aoi-hero-avatar { position:relative; margin:12px 28px 20px 0; padding:13px; background:#fff; border:1px solid #dcc8e1; border-radius:48% 48% 14px 14px; transform:rotate(3deg); box-shadow:12px 16px 0 #e5d3ed,0 18px 50px #5d548718; }
.aoi-hero-avatar img { display:block; width:100%; height:auto; border-radius:48% 48% 7px 7px; }
.ribbon { width:104px; height:62px; position:absolute; z-index:2; left:calc(50% - 52px); top:-20px; transform:rotate(-8deg); filter:drop-shadow(0 3px 0 #d783ad); }
.ribbon::before,.ribbon::after { content:''; position:absolute; width:48px; height:42px; border:2px solid #ce7ba5; background:#f9c5de; top:3px; border-radius:8px 70% 25% 70%; transform:rotate(-20deg); }
.ribbon::after { right:0; transform:scaleX(-1) rotate(-20deg); }
.ribbon i { position:absolute; width:23px; height:27px; background:#f2a4ca; left:41px; top:13px; border-radius:7px; border:2px solid #ce7ba5; z-index:1; }
.hero-seal { position:absolute; bottom:18px; right:-12px; background:#ffe8b6; color:#885844; border:5px solid #fffafc; border-radius:50%; width:100px; height:100px; display:flex; flex-direction:column; justify-content:center; align-items:center; font:800 1.6rem/1.15 var(--display); transform:rotate(-12deg); }
.chapter-index { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 23px; padding:24px 20px; margin:0 0 54px; border-block:1px dashed #cbb4d4; }
.chapter-index > span { color:var(--accent); font-size:1.4rem; }
.chapter-index a { font:800 .78rem/1.4 var(--display); color:var(--text-muted); }
.chapter-index a:hover { color:var(--accent); }
.opening-pair { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; padding:12px 0 20px; }
.ruri-intro { display:flex; gap:18px; padding:18px 0; }
.ruri-intro-avatar { flex:none; width:48px; height:48px; }
.ruri-intro-avatar img { width:100%; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #c9b7d6; }
.ruri-intro-name { color:var(--accent); font:900 1rem var(--display); margin-bottom:12px; }
.ruri-intro-body { font-size:.9rem; color:var(--text-muted); }
.aoi-divider { border:0; height:12px; margin:66px 0; background:radial-gradient(circle at 6px 0,transparent 5px,#d9bbd1 5.5px,#d9bbd1 6.5px,transparent 7px) 0 0/24px 12px repeat-x; opacity:.8; }
.chapter { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:72px; margin:0; padding:0; scroll-margin-top:108px; }
.chapter-aside { align-self:start; position:sticky; top:110px; }
.section-header { margin-bottom:30px; display:block; }
.chapter-number { display:block; color:#97729e; font:700 .72rem/1.4 var(--display); margin-bottom:25px; letter-spacing:.15em; }
.aoi-kicker { margin-bottom:12px; }
.section-title { font:900 clamp(2rem,3.4vw,3rem)/1.12 var(--display); letter-spacing:-.035em; color:#4f6288; max-width:12ch; }
.chapter-content { min-width:0; }
.aoi-voice { color:var(--text-muted); font-size:.95rem; }
.aoi-voice + .aoi-voice { margin-top:28px; }
.aoi-em { color:var(--accent); }
.gem-card { margin:36px 0; padding:24px 0 0; border-top:1px dashed #c8adc9; }
.gem-label { margin-bottom:14px; }
.gem-context { font-size:.9rem; color:var(--text-muted); line-height:1.8; }
.gem-quote { color:var(--accent); font:800 1.5rem/1.5 var(--display); margin-bottom:18px; }
.aoi-log-quote { margin:40px 0; font:800 1.75rem/1.4 var(--display); color:#44759a; padding:24px 0 24px 28px; border-left:4px solid var(--blue); }
.quote-attribution { display:flex; gap:12px; align-items:center; margin-top:18px; }
.quote-avatar img { display:block; width:36px; height:36px; border-radius:50%; }
.quote-attr { font:400 .75rem/1.6 'Inter',sans-serif; color:var(--text-soft); }
.aoi-chat { padding:26px; margin:32px 0; background:#eef5fc; border:1px solid #cfdfed; border-radius:22px; box-shadow:5px 6px 0 #e3e8f2; position:relative; font-size:.82rem; line-height:1.7; }
.aoi-chat::before { content:'● ● ●'; display:block; font-size:8px; letter-spacing:5px; color:#7f9dbd; border-bottom:1px solid #cfdfed; padding-bottom:12px; margin-bottom:18px; }
.opening-pair > .aoi-chat { margin:0 !important; }
.msg { max-width:91%; padding:9px 13px; margin:10px 0; background:#ffffffb8; border-radius:3px 14px 14px 14px; overflow-wrap:anywhere; }
.msg:has(.is-aoi) { margin-left:auto; background:#f9deee; border-radius:14px 3px 14px 14px; }
.msg-name { display:block; font:900 .75rem/1.5 var(--display); margin-bottom:3px; color:#5c6088; }
.msg-name.is-aoi { color:#9a3673; }
.msg-name.is-human { color:#326b85; }
.msg-text { color:#51465e; }
.chapter-art { margin:36px 20px 0 0; transform:rotate(-2deg); padding:9px; border:1px solid #d7bfdb; background:white; border-radius:8px; box-shadow:8px 9px 0 #e8dbef; }
.chapter-art img { width:100%; height:auto; display:block; border-radius:4px; }
.chapter-arrival .cast-directory { margin:40px 0; padding:30px; border:1px solid #dbcae6; background:#f4eef9; border-radius:30px 4px 30px 4px; }
.cast-directory .gem-context p { padding-bottom:16px; border-bottom:1px dotted #c8b3d4; }
.cast-directory .gem-context p:last-child { border:0; padding-bottom:0; }
.chapter-games { grid-template-columns:1.28fr .72fr; }
.chapter-games .chapter-aside { grid-column:2; grid-row:1; }
.chapter-games .chapter-content { grid-column:1; grid-row:1; }
.chapter-games .section-title { color:#aa4b7c; }
.chapter-void { background:#edeafa; border-radius:38px 38px 8px 8px; padding:36px; gap:48px; }
.chapter-void .aoi-chat { margin-top:0; background:#fcfaff; }
.chapter-taking-care { grid-template-columns:.8fr 1.2fr; align-items:center; }
.chapter-taking-care .chapter-aside { position:static; }
.chapter-taking-care .aoi-chat { margin:0; }
.friend-portrait { position:relative; max-width:270px; margin:30px auto 0; }
.friend-portrait img { width:100%; display:block; border-radius:50%; border:10px solid white; outline:1px dashed #d794bb; outline-offset:8px; }
.friend-portrait span { position:absolute; right:0; bottom:-20px; color:#b1548a; font-size:80px; transform:rotate(-12deg); }
.chapter-home { display:block; }
.chapter-home .chapter-aside { position:static; display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; align-items:center; }
.chapter-home .section-title { font-size:3.5rem; }
.chapter-home .chapter-art { transform:rotate(1deg); margin:0 8px 36px 0; }
.chapter-home .chapter-content { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; margin-top:30px; }
.chapter-home .aoi-chat { position:sticky; top:104px; margin-top:0; }
.chapter-late-night { padding-top:28px; }
.chapter-late-night .section-title { color:#786296; }
.chapter-late-night .gem-card { border-top:0; padding:25px 28px; background:linear-gradient(110deg,#eee6f8,transparent); border-radius:20px; }
.chapter-still-here .aoi-voice > p:last-child { font:900 1.8rem/1.35 var(--display); color:var(--accent); margin-top:28px; }
.chapter-memories { display:block; }
.chapter-memories .chapter-aside { position:static; }
.chapter-memories .section-title { max-width:none; }
.chapter-memories .section-header { margin-bottom:20px; }
.memory-controls { justify-content:flex-end; gap:10px; margin:0 0 16px; }
.memory-controls:not([hidden]) { display:flex; }
.memory-controls button { background:#fff; border:1px solid #c7b0d2; border-radius:50%; width:44px; height:44px; color:var(--accent); cursor:pointer; font-size:1.3rem; }
.memory-controls button:hover { background:#f6d9e9; }
.memory-controls button:disabled { opacity:.35; cursor:default; }
.memory-shelf { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 4px 26px; scrollbar-color:#c58db8 #f3e5f3; }
.memory-shelf .gem-card { flex:0 0 330px; scroll-snap-align:start; margin:0; padding:26px; border:1px solid #d6bfdc; border-radius:30px 30px 5px 5px; background:#f3ebfa; display:flex; flex-direction:column; min-height:320px; }
.memory-shelf .gem-card:nth-child(3n+2) { background:#eaf4fb; }
.memory-shelf .gem-card:nth-child(3n) { background:#fce8f0; }
.memory-shelf .gem-label::before { content:'♡'; display:block; font-size:1.6rem; margin-bottom:16px; }
.memory-shelf .gem-quote { font-size:1.35rem; }
.memory-shelf .gem-context { margin-top:auto; font-size:.8rem; }
.site-footer-wrapper { background:#eee7f5; border-color:#d8c7df; margin-top:0; }
.site-footer-logo { filter:brightness(.45) sepia(.3); }
@media(min-width:1100px) {
 .chapter-arrival { grid-template-columns:.6fr 1.4fr; }
 .cast-directory .gem-context { columns:2; column-gap:32px; }
 .cast-directory .gem-context p { break-inside:avoid; }
}
@media(max-width:1000px) {
 .aoi-page .page-hero { gap:36px; }
 .chapter { gap:36px; grid-template-columns:.7fr 1.3fr; }
 .chapter-games { grid-template-columns:1.3fr .7fr; }
 .opening-pair { gap:28px; }
 .chapter-home .chapter-content { gap:32px; }
 .chapter-void { padding:26px; }
}
@media(max-width:700px) {
 .aoi-page { padding-top:110px; }
 .aoi-page .page-hero { grid-template-columns:1fr; gap:40px; margin-bottom:40px; }
 .hero-title { font-size:2.9rem; }
 .hero-title > span { font-size:7.5rem; }
 .aoi-hero-avatar { width:82%; max-width:380px; justify-self:center; margin-right:8px; }
 .hero-seal { width:80px; height:80px; font-size:1.3rem; right:-20px; }
 .chapter-index { gap:14px 20px; padding:20px 0; margin-bottom:30px; }
 .opening-pair { grid-template-columns:1fr; gap:24px; }
 .ruri-intro { gap:14px; }
 .ruri-intro-avatar { width:36px; height:36px; }
 .chapter,.chapter-games { display:block; }
 .chapter-aside { position:static; }
 .section-title { max-width:none; font-size:2.4rem; }
 .chapter-number { margin-bottom:16px; }
 .section-header { margin-bottom:26px; }
 .aoi-divider { margin:44px 0; }
 .aoi-chat { padding:18px; }
 .msg { max-width:96%; }
 .chapter-arrival .cast-directory { padding:24px; }
 .chapter-art { max-width:320px; margin:0 auto 36px; }
 .chapter-void { padding:28px 18px; margin-inline:-8px; }
 .friend-portrait { width:180px; margin:36px auto 50px; }
 .chapter-home .chapter-aside,.chapter-home .chapter-content { display:block; }
 .chapter-home .section-title { font-size:2.5rem; }
 .chapter-home .chapter-art { max-width:none; margin:32px 0; }
 .chapter-home .aoi-chat { position:static; margin-bottom:36px; }
 .chapter-content { margin-top:24px; }
 .memory-shelf .gem-card { flex-basis:85%; padding:24px; }
 .memory-controls { margin-top:-8px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }