/* Atmosphere follows the selected person or scene. */
body{transition:background-color .8s ease,color .65s ease}
body[data-atmosphere="guts"]{--ink:#111610;--surface:#192017;--hover:#252e20;--gold:#c1b083;--line:#414b36;--scene-glow:#819463;--ambient:#51623b30;--scene-filter:saturate(.6) brightness(.75)}
body[data-atmosphere="griffith"]{--ink:#10161c;--surface:#172029;--hover:#25313c;--gold:#bdcfdf;--muted:#bec8d1;--dim:#9daebb;--line:#3c4c5c;--scene-glow:#a8cbe4;--ambient:#6d8da733;--scene-filter:saturate(.3) brightness(.78)}
body[data-atmosphere="casca"]{--ink:#1b1511;--surface:#251c16;--hover:#35271b;--gold:#e1b583;--muted:#cfbfad;--dim:#b09c86;--line:#53402f;--scene-glow:#ec984b;--ambient:#9d562c35;--scene-filter:saturate(.88) brightness(.84)}
body[data-atmosphere="golden"]{--ink:#181710;--surface:#222016;--hover:#302c1e;--gold:#dcc38d;--muted:#ccc3ad;--dim:#a69f88;--line:#4b4832;--scene-glow:#dcc477;--ambient:#92804633;--scene-filter:saturate(.74) brightness(.87)}
body[data-atmosphere="astral"]{--ink:#111a1b;--surface:#172529;--hover:#22383b;--gold:#a8c9c5;--muted:#b8ccca;--dim:#94aaa9;--line:#345053;--scene-glow:#76bcb8;--ambient:#3f929135;--scene-filter:saturate(.45) brightness(.76) hue-rotate(15deg)}
body[data-atmosphere="eclipse"]{--ink:#1b1116;--surface:#281a22;--hover:#3b2430;--gold:#dfac9c;--muted:#d4bbc1;--dim:#b696a1;--line:#583745;--red:#d27768;--scene-glow:#b83950;--ambient:#a329403b;--scene-filter:sepia(.4) saturate(.65) brightness(.57)}
#berserk-archive{background-color:var(--ink);transition:background-color .8s ease}
.hero-art,.hero-canvas{filter:var(--scene-filter,saturate(.75) brightness(.81))}
.hero-atmosphere{position:absolute;inset:0;pointer-events:none;background-color:var(--scene-glow,#819463);opacity:.32;mask-image:radial-gradient(ellipse at 66% 40%,#000 0,transparent 76%);mix-blend-mode:screen;transition:background-color .9s ease;animation:ambient-breath 13s ease-in-out infinite alternate}
.hero-haze{background:radial-gradient(ellipse at 38% 75%,var(--gold),transparent 63%)}
.scene-caption{z-index:3;pointer-events:none}.scene-caption .motion-button{pointer-events:auto}
.atmosphere-title{color:var(--gold);transition:color .7s ease}.atmosphere-detail{max-width:23rem}
.reader{background:radial-gradient(ellipse at 0 0,var(--ambient,#51623b30),transparent 67%)}
.section-nav>button[aria-pressed="true"],.person-nav>button[aria-pressed="true"]{background:var(--surface);border-color:var(--gold)}
.section-nav>button:hover,.person-nav>button:hover{border-color:var(--gold)}
.person-nav img{background:radial-gradient(ellipse,var(--ambient),var(--black))}
.site-header,.site-footer,.section-nav>button,.person-nav>button,.reading-copy,.reading-figure{transition:border-color .65s ease,color .65s ease,background-color .65s ease}
.reading-copy{container-type:inline-size}

/* A compact chronology; one event owns the reading panel. */
.topic-nav.chronicle-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;padding:0 0 .65rem;margin-bottom:.55rem;position:relative}
.topic-nav .chronicle-station{min-width:0;text-align:left;display:block;padding:0 0 .6rem;border-bottom:2px solid var(--line);overflow-wrap:anywhere}
.chronicle-station strong{display:block;font:400 1.0625rem/1.4 var(--serif);margin:.45rem 0 .15rem;color:var(--muted)}
.chronicle-station>small{display:block;font-size:.75rem;line-height:1.5;color:var(--dim)}
.station-image{display:block;position:relative;aspect-ratio:2.65;overflow:hidden;background:var(--black)}
.station-image img{display:block;width:100%;height:100%;object-fit:cover;opacity:.46;filter:saturate(.55);transition:opacity .3s ease,filter .3s ease}
.station-image::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#090c09b0,transparent 70%);pointer-events:none}
.station-number{position:absolute;z-index:1;left:.5rem;bottom:.25rem;color:var(--paper);font:.875rem/1.4 var(--serif);letter-spacing:.08em}
.chronicle-station[aria-pressed="true"] .station-image img,.chronicle-station:hover .station-image img{opacity:1;filter:saturate(.85)}
.chronicle-station[aria-pressed="true"] strong{color:var(--gold)}
.event-context{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.25rem;min-width:0}
.event-people{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .65rem;flex-shrink:0}
.event-people-label{font-size:.75rem;color:var(--dim);letter-spacing:.08em;margin-right:.2rem}
.event-people button{display:flex;align-items:center;gap:.35rem;padding:.25rem 0;background:none;border:0;min-height:44px;font-size:.875rem;color:var(--muted)}
.event-people img{width:25px;height:31px;object-fit:cover;object-position:center 15%;background:var(--surface)}
.event-people button:hover{color:var(--gold)}
.event-aftermath{max-width:31rem;flex:1;min-width:0;border-bottom:1px solid var(--line)}
.event-aftermath summary{font-size:.875rem;color:var(--gold);padding:.4rem 0;min-height:44px}
.event-aftermath p{font:400 1rem/1.7 var(--serif);color:var(--muted);margin:.3rem 0 .7rem}
.scene-tabs{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;border-bottom:1px solid var(--line);margin:0 0 1rem}
.scene-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:.55rem 0;min-height:44px;color:var(--muted);font-size:.875rem}
.scene-tabs button[aria-pressed="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.analysis-label{font:.75rem/1.7 var(--sans)!important;color:var(--dim);letter-spacing:.025em}
.character-choice{border-top:1px solid var(--line);margin:.4rem 0}
.character-choice summary{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;min-height:64px;list-style:none}
.character-choice summary::-webkit-details-marker{display:none}
.character-choice summary::after{content:'+';color:var(--gold);margin-left:auto;font:1.2rem var(--sans);padding:.4rem}
.character-choice[open] summary::after{content:'−'}
.character-choice img{width:36px;height:44px;object-fit:cover;object-position:center 15%;background:var(--surface);flex-shrink:0}
.character-choice summary>span{min-width:0}
.character-choice strong{display:block;color:var(--gold);font:400 1rem/1.4 var(--serif)}
.character-choice summary span>span{font:400 .9375rem/1.5 var(--serif);display:block;margin-top:.15rem;color:var(--muted)}
.character-choice p{padding:0 0 .5rem 2.95rem!important;margin:.2rem 0 .6rem!important}
.scene-echo{margin-top:.9rem;padding:.6rem .85rem;border-left:1px solid var(--gold);background:var(--surface)}
.scene-echo>small{display:block;font:.75rem/1.6 var(--sans);letter-spacing:.1em;color:var(--dim)}
.scene-echo button{border:0;background:none;text-align:left;padding:.25rem 0;min-height:44px;font:400 .9375rem/1.5 var(--serif);color:var(--gold)}
.spoiler-gate{border:1px solid var(--line);padding:.85rem 1rem;background:var(--surface);margin:.7rem 0}
.spoiler-gate>small{font:.75rem/1.5 var(--sans);letter-spacing:.09em;color:var(--gold)}
.spoiler-gate p{margin:.5rem 0!important}
.spoiler-gate button{font:.875rem/1.5 var(--sans);border:1px solid var(--gold);background:none;color:var(--gold);min-height:44px;padding:.55rem .7rem;text-align:left}
.spoiler-gate button:hover{background:var(--hover)}

/* Native buttons make every person and relationship keyboard accessible. */
.relation-periods{display:flex;flex-wrap:wrap;gap:.35rem;border-bottom:1px solid var(--line);padding-bottom:.55rem}
.relation-periods button{font:.875rem/1.5 var(--sans);min-height:44px;padding:.45rem .6rem;background:none;border:1px solid transparent;color:var(--muted)}
.relation-periods button[aria-pressed="true"]{border-color:var(--line);background:var(--surface);color:var(--gold)}
.relationship-map{position:relative;height:18rem;margin:.25rem 0 .5rem;background:radial-gradient(ellipse at 50% 45%,var(--ambient),transparent 65%)}
.relationship-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.relationship-lines path{fill:none;stroke:var(--line);stroke-width:1.5;transition:stroke .3s ease,stroke-width .3s ease}
.relationship-lines .selected-line{stroke:var(--gold);stroke-width:2}
.relationship-person{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;background:var(--ink);border:1px solid transparent;padding:.35rem;min-width:5.2rem;max-width:7rem;min-height:44px}
.relationship-person img{width:3.5rem;height:4.25rem;object-fit:cover;object-position:50% 13%;background:radial-gradient(ellipse at center,var(--ambient),transparent)}
.relationship-person strong{font:400 1.125rem/1.35 var(--serif);overflow-wrap:anywhere}
.relationship-person[aria-pressed="true"]{border-color:var(--gold)}
.person-guts{left:16.6667%;top:75%}.person-griffith{left:50%;top:23.2143%}.person-casca{left:83.3333%;top:75%}
.relationship-edge{position:absolute;transform:translate(-50%,-50%);font:.875rem/1.45 var(--sans);min-height:44px;max-width:9.2rem;padding:.35rem .6rem;border:1px solid var(--line);background:var(--ink);color:var(--muted);text-align:center}
.relationship-edge[aria-pressed="true"]{color:var(--gold);border-color:var(--gold);background:var(--surface)}
.relationship-edge:hover,.relationship-person:hover{border-color:var(--gold)}
.edge-guts-griffith{left:30.5%;top:49.5%}.edge-griffith-casca{left:69.5%;top:49.5%}.edge-guts-casca{left:50%;top:77%}
.relationship-detail{border-top:1px solid var(--line);padding-top:.7rem}
.relationship-detail .relation-pair{font:.75rem/1.5 var(--sans);color:var(--gold);letter-spacing:.12em;margin:0 0 .4rem}
.relationship-detail h3{font:400 1.35rem/1.3 var(--serif);margin:.2rem 0 .6rem;color:var(--paper)}
.relationship-detail p{font:400 1rem/1.8 var(--serif);color:var(--muted)}
.relation-scene-link{min-height:44px;font:.875rem/1.6 var(--sans);border:0;border-bottom:1px solid var(--line);background:none;padding:.3rem 0;color:var(--gold);text-align:left}
.relation-footnote{display:block;font:.75rem/1.6 var(--sans);color:var(--dim);margin:.7rem 0 0}

/* Image details reveal authored notes and a connected final chapter. */
.scene-detail{position:absolute;z-index:3;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;transform:translate(-50%,-50%)}
.fire-secret{left:75%;top:66%}.stars-secret{left:74%;top:25%}
.detail-ring{display:block;width:11px;height:11px;border:1px solid var(--gold);border-radius:50%;opacity:.45;box-shadow:0 0 14px #c7ab7b33;animation:detail-breath 6s ease-in-out infinite alternate}
.detail-word{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:.75rem/1.4 var(--sans);padding:.2rem .4rem;background:var(--ink);color:var(--gold);opacity:0;pointer-events:none;transition:opacity .2s}
.scene-detail:hover .detail-word,.scene-detail:focus-visible .detail-word{opacity:1}
.scene-detail:hover .detail-ring,.scene-detail:focus-visible .detail-ring{opacity:1;animation:none}
.journal-from-toast{font:.875rem/1.5 var(--sans);min-height:44px;padding:.3rem 0;color:var(--gold);border:0;background:none;text-decoration:underline;text-underline-offset:.22em;text-align:left}
.journal-list{list-style:none;padding:0;margin:1rem 0}
.journal-list li{padding:.4rem 0 .65rem}
.journal-fragment summary{display:flex;align-items:center;gap:.8rem;list-style:none;min-height:44px}
.journal-fragment summary::-webkit-details-marker{display:none}
.journal-fragment summary::after{content:'+';margin-left:auto;font:1.2rem var(--sans)}
.journal-fragment[open] summary::after{content:'−'}
.journal-fragment summary>small{font:.75rem/1.5 var(--sans);color:var(--dim);letter-spacing:.1em}
.journal-fragment p{font:400 1rem/1.8 var(--serif);color:var(--muted);margin:.4rem 0 .8rem}
.journal-fragment .fragment-lead{color:var(--paper)}
.fragment-link,.bonus-links button{border:0;border-bottom:1px solid var(--line);background:none;color:var(--gold);font:.875rem/1.6 var(--sans);padding:.3rem 0;min-height:44px;text-align:left}
.journal-bonus{margin:1.2rem 0 .8rem;border:1px solid var(--line);padding:1rem 1.1rem;background:var(--surface)}
.journal-bonus[data-unlocked="true"]{border-color:var(--gold);background:radial-gradient(ellipse at top left,var(--ambient),var(--surface))}
.bonus-kicker{font:.75rem/1.6 var(--sans);color:var(--gold);letter-spacing:.12em;margin:0 0 .4rem}
.journal-bonus h3{font:400 1.5rem/1.3 var(--serif);margin:.25rem 0 .7rem;color:var(--paper)}
.bonus-content>p{font:400 1rem/1.8 var(--serif);color:var(--muted);margin:.4rem 0 .8rem}
.bonus-links{display:flex;gap:.6rem 1.2rem;flex-wrap:wrap}
.journal-footnote{font:.875rem/1.6 var(--sans)!important;color:var(--dim)!important}
#berserk-archive[data-ink="true"] .hero-atmosphere{opacity:0;animation:none}
#berserk-archive[data-ink="true"] .station-image img{filter:grayscale(1)}
#berserk-archive[data-paused="true"] .hero-atmosphere,#berserk-archive[data-paused="true"] .detail-ring{animation-play-state:paused}
@keyframes ambient-breath{from{opacity:.24}to{opacity:.4}}
@keyframes detail-breath{from{opacity:.2}to{opacity:.55}}

@container(max-width:450px){
  .relationship-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem .4rem;height:auto;margin:1rem 0}
  .relationship-lines{display:none}
  .relationship-person,.relationship-edge{position:static;transform:none;width:100%;max-width:none;min-width:0}
  .relationship-person{grid-row:1;min-height:6.4rem;padding:.3rem}
  .person-guts{grid-column:1}.person-griffith{grid-column:2}.person-casca{grid-column:3}
  .relationship-person img{width:3rem;height:3.7rem}
  .relationship-person strong{font-size:1rem}
  .relationship-edge{grid-row:2;min-height:3.5rem;padding:.35rem .25rem;overflow-wrap:anywhere}
  .edge-guts-griffith{grid-column:1}.edge-guts-casca{grid-column:2}.edge-griffith-casca{grid-column:3}
}
@media(max-width:1050px){.event-context{flex-wrap:wrap;gap:.2rem 1rem}.event-aftermath{max-width:none;flex-basis:100%}.topic-nav.chronicle-timeline{gap:.5rem}.chronicle-station>small{font-size:.75rem}}
@media(max-width:720px){
  .topic-nav.chronicle-timeline{display:flex;flex-wrap:nowrap;gap:.7rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.3rem .3rem .65rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .topic-nav .chronicle-station{flex:0 0 7.5rem;scroll-snap-align:center}
  .event-people{gap:.2rem .6rem;flex-shrink:1}.event-people-label{flex-basis:100%;margin:0}.event-context{margin-bottom:.85rem}
  .scene-tabs{gap:.25rem 1rem}.scene-tabs button{font-size:.875rem}.atmosphere-detail{max-width:19rem;line-height:1.5}
  .character-choice p{padding-left:0!important}.character-choice summary span>span{font-size:.9375rem}
  .journal-bonus{padding:.8rem}.relation-periods{gap:.1rem}.relation-periods button{padding:.4rem .45rem}
}
@media(pointer:coarse){.detail-word{opacity:.55}}
@media(prefers-reduced-motion:reduce){.hero-atmosphere,.detail-ring{animation:none}.hero-art,.hero-canvas,body,#berserk-archive{transition:none}}