/* Issue 000: the journal's visual grammar continues through the world. */
:root {
  --paper:#f3e9d7;
  --paper-light:#fffaf0;
  --ink:#172b38;
  --ink-soft:#52616a;
  --green:#665235;
  --green-deep:#214458;
  --red:#a44731;
  --amber:#edbb53;
  --line:#ad9b7d;
  --frame-shadow:#c6ad82;
}
.world-kicker {
  margin:0;
  color:var(--red);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.view-header,.desktop-cover-header { background:#fff9ec; }
.desktop-cover-header { padding:16px 20px; border:3px solid var(--ink); }
.cover-stage,.journey-art,.hall-art,.about-home,.cast-ensemble,
.comic-button,.desktop-action,.cast-card,.action-card,.music-chapters,
.making-details,.chapter-tabs a,.home-cast,.entrance-reading { border-radius:0; }
.desktop-action-primary,.comic-button-primary,.chapter-tabs a[aria-current] {
  box-shadow:4px 4px 0 var(--ink);
}
.story-nav .journal-return {
  border:2px solid var(--ink);
  background:var(--amber);
  padding:8px 12px;
  font-weight:700;
  text-decoration:none;
}
.story-nav .journal-return:hover { background:#ffe09b; }
.about-author .author-links a:last-child { display:inline-block; max-width:100%; }
.entrance-telegram { display:block; width:fit-content; margin:12px auto 3px; min-height:44px; padding:10px 16px; background:#fff9ec; border:2px solid var(--ink); font-weight:700; color:var(--ink); }
.about-social { margin:24px 0 16px; padding:20px; background:#fff9ec; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--amber); }
.about-social p { margin:0 0 13px; }
@media(min-width:900px) { .entrance-telegram { display:none; } }
@media(max-width:800px) {
  .world-kicker { font-size:12px; }
  .view-header { align-items:flex-start; }
  .story-nav { gap:7px; }
  .story-nav .journal-return { padding:7px 9px; }
}

/* Read the full portrait at the container width and scroll vertically.
   The illustration keeps its natural ratio; navigation remains outside it. */
@media(max-width:800px){
 .cover-stage,body.has-locales .cover-stage{
  width:100%;max-width:none;
  height:auto;aspect-ratio:auto;
 }
 .cover-stage picture{display:block;width:100%;height:auto}
 .cover-stage img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
 .desktop-cover-footer{grid-template-columns:repeat(2,minmax(0,1fr))}
 .desktop-cover-footer a,.story-nav a{max-width:100%;min-width:0;overflow-wrap:normal;min-height:44px}
 .story-nav{flex-wrap:wrap}
 .journey-art picture,.hall-art picture,.about-home picture,.cast-ensemble picture{display:block;max-width:100%}
 .journey-art img,.hall-art img,.about-home img,.cast-ensemble img,.cast-card img{width:100%;height:auto;max-height:none;object-fit:contain}
 .cast-card,.cast-copy,.home-cast,.music-chapters{min-width:0}
}
/* Preserve full art and whole words across the public world views. */
.view :is(h1,h2,h3,p,li),.desktop-cover-footer a,.story-nav a,.author-links a{word-break:normal;overflow-wrap:normal;hyphens:none}
.comic-button,.desktop-action,.view-links a,.chapter-tabs a,.scene-navigation button{min-height:44px;white-space:normal;word-break:normal;overflow-wrap:normal;line-height:1.5;box-sizing:border-box}
.fant-atlas-footer{background:#172b38;color:#edbb53;padding:24px max(22px,calc((100vw - 1360px)/2));}
.atlas-final{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;width:100%;min-height:48px;padding:16px 20px;background:#edbb53;color:#172b38;border:2px solid #edbb53;text-decoration:none;box-sizing:border-box;word-break:normal;overflow-wrap:normal;hyphens:none;font-size:16px;line-height:1.5}
.atlas-final :is(strong,span){color:inherit;font-weight:700}
.atlas-final:focus-visible{outline:3px solid #98b9ff;outline-offset:5px}
@media(max-width:800px){
 .view :is(.journey-deck,.home-introduction p,.scene-afterword p,.hall-invitation p,.chapter-copy p,.chapter-heading p,.about-lead,.cast-copy p,.cast-details-copy p,.music-lead,.music-editorial p){font-size:18px;line-height:1.6}
 .about-chapter{padding-block:40px;min-width:0}
 .view :is(.chapter-copy,.cast-card,.cast-copy,.cast-details-copy,.music-page,.music-chapters,.making-details,.action-card,.home-cast){min-width:0;max-width:100%;box-sizing:border-box}
 .view :is(.about-chapter h2,.home-heading h1,.journey-heading h1,.music-intro h1){font-size:clamp(26px,7vw,36px);line-height:1.2;letter-spacing:normal}
 .cast-copy h3{font-size:24px;line-height:1.3}
 .cast-grid{grid-template-columns:minmax(0,1fr)}
 .about-author .author-links{flex-wrap:wrap}
 .about-author .author-links a{min-width:0;white-space:normal;line-height:1.5;min-height:44px}
 .music-downloads{flex-wrap:wrap}
 .music-downloads a{min-height:44px;white-space:normal;line-height:1.5}
 .audio-settings{flex-wrap:wrap}
 .audio-settings label,.audio-seek-row{min-width:0}
 .atlas-final{font-size:16px;padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){.atlas-final{transition:none}}
.fant-atlas-footer .atlas-final:visited,.fant-atlas-footer .atlas-final:hover,.fant-atlas-footer .atlas-final:focus-visible{color:#172b38;background:#edbb53}

/* Whole-word type applies to nested cast headings, controls and labels too. */
.view :is(h1,h2,h3,button,label,summary),.audio-dock :is(button,label),.cover-label{word-break:normal;overflow-wrap:normal;hyphens:none}
.view :is(h1,h2,h3){min-width:0;max-width:100%}
@media(max-width:800px){
 .view :is(.about-intro h1,.about-author h2,.music-editorial h2,.music-credits h2){font-size:clamp(26px,7vw,36px);line-height:1.2;letter-spacing:normal}
 .view :is(.chapter-heading,.about-intro,.music-intro,.journey-heading>div,.home-heading>div){min-width:0;max-width:100%}
 .view :is(.comic-button,.desktop-action,.view-links a,.chapter-tabs a,.scene-navigation button,.music-downloads a){min-width:0;max-width:100%;hyphens:none}
 .chapter-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .audio-settings label{flex-wrap:wrap;max-width:100%;font-size:14px;line-height:1.5}
 .audio-settings button{max-width:100%;font-size:14px;line-height:1.5;white-space:normal}
 .cast-card .cast-copy h3{font-size:clamp(22px,6vw,26px);line-height:1.3}
}

/* The illustrated world answers navigation and touch; its music-led art keeps
   its own timing. No ambient loops are added around the comic. */
@media(prefers-reduced-motion:no-preference){
 @keyframes fant-world-arrive{from{opacity:.72;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
 .entrance-view .desktop-cover-header,.entrance-view .cover-stage{animation:fant-world-arrive .62s cubic-bezier(.2,.72,.2,1) both}
 .entrance-view .cover-stage{animation-delay:.1s}
 body.js-ready .view:not([hidden]) :is(.journey-heading,.home-heading,.about-intro,.music-intro){animation:fant-world-arrive .55s cubic-bezier(.2,.72,.2,1) both}
 body.js-ready .view:not([hidden]) :is(.hall-art,.journey-scene:not([hidden]) .journey-art){animation:fant-world-arrive .6s cubic-bezier(.2,.72,.2,1) both}
 .comic-button,.desktop-action,.action-card,.chapter-tabs a,.story-nav a,.music-chapters a{transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
 .comic-button:not(:disabled):is(:hover,:focus-visible),.desktop-action:is(:hover,:focus-visible),.action-card:is(:hover,:focus-visible),.chapter-tabs a:is(:hover,:focus-visible),.story-nav a:is(:hover,:focus-visible),.music-chapters a:is(:hover,:focus-visible){transform:translateY(-2px)}
 .art-target{transition:box-shadow .22s ease,background-color .22s ease}
 .art-target:is(:hover,:focus-visible){background-color:rgba(237,187,83,.12);box-shadow:0 0 0 3px rgba(237,187,83,.7)}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
 .entrance-view .desktop-cover-header,.entrance-view .cover-stage{animation-duration:.48s}
}