@font-face { font-family:"Source Serif 4"; src:url("fonts/SourceSerif4-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("fonts/SourceSerif4-Semibold.woff2") format("woff2"); font-weight:600; font-display:swap; }

:root { --honey:#e8c27a; --bronze:#a97c33; --parchment:#f5ecdb; --stone:#d5c8ae; --shadow:#100c07; --ink:#21160a;
  --edge:clamp(20px, 4vw, 72px); --fade:.5s; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--shadow); color:var(--parchment);
  font-family:"Source Serif 4", Georgia, serif; font-size:clamp(16px, .55vw + 11px, 21px); line-height:1.55; }
body { touch-action:none; }
h1, h2, p, ul { margin:0; padding:0; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--honey); outline-offset:3px; }

/* The painting */
.world { position:fixed; inset:0; overflow:hidden; contain:strict; opacity:0; transition:opacity 1.2s ease; }
.ready .world { opacity:1; }
.layer { position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; will-change:transform; user-select:none; pointer-events:none; }
.sun { position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(70vmax 50vmax at 14% 42%, rgba(255,214,130,.75), rgba(255,190,100,.2) 45%, transparent 72%); }
.mist { position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.12; will-change:opacity; }
.mist > div { position:absolute; top:-10%; left:0; bottom:-10%; width:calc(100% + 1024px); background:url("art/mist.webp") 0 0/1024px 1024px repeat;
  animation:drift 90s linear infinite; will-change:transform; }
.mist-near > div { animation-duration:55s; animation-direction:reverse; }
@keyframes drift { to { transform:translate3d(-1024px, 0, 0); } }
.shade { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(16,12,7,.82), rgba(16,12,7,.28) 42%, rgba(16,12,7,0) 68%), linear-gradient(to bottom, rgba(16,12,7,.42), rgba(16,12,7,0) 16%); }
body[data-stop="1"] .shade { background:linear-gradient(to right, rgba(16,12,7,.78), rgba(16,12,7,.3) 38%, rgba(16,12,7,0) 58%), linear-gradient(to bottom, rgba(16,12,7,.42), rgba(16,12,7,0) 16%); }
body[data-stop="2"] .shade { background:linear-gradient(to right, rgba(16,12,7,.8), rgba(16,12,7,.5) 30%, rgba(16,12,7,0) 56%), linear-gradient(to bottom, rgba(16,12,7,.42), rgba(16,12,7,0) 16%); }
body[data-stop="3"] .shade { background:linear-gradient(to top, rgba(16,12,7,.72), rgba(16,12,7,0) 34%); }

/* Fixed frame */
.top { position:fixed; z-index:3; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px, 2.2vh, 28px) var(--edge); }
.brand { display:flex; align-items:center; gap:.7em; color:inherit; text-decoration:none; transition:color var(--fade); }
.brand img { width:2.1em; height:2.1em; }
.lang { display:flex; }
.lang button { min-width:44px; min-height:44px; padding:0 .4em; color:var(--stone); font-size:.88em; opacity:.72; transition:opacity .2s, color var(--fade); }
.lang button:hover { opacity:1; }
.lang button[aria-pressed="true"] { color:var(--parchment); opacity:1; text-decoration:underline; text-underline-offset:.4em; text-decoration-thickness:1px; }

/* Stops: text sits where the view leaves room */
.stop { position:fixed; z-index:2; opacity:0; visibility:hidden; transition:opacity var(--fade) ease, visibility 0s linear var(--fade); }
.stop.on { opacity:1; visibility:visible; transition:opacity .9s ease, visibility 0s; }
h1 { font-weight:400; font-size:clamp(2.1rem, min(9vw, 14vh), 6.4rem); letter-spacing:.16em; margin-right:-.16em; line-height:1.05; color:var(--honey); }
h2 { font-weight:400; font-size:clamp(1.9rem, 3.4vw, 3.4rem); line-height:1.12; color:var(--honey); margin-bottom:.4em; }
.lead { font-size:1.25em; margin:.45em 0 1.3em; }
.stop-valley { left:0; right:0; bottom:clamp(20px, 7vh, 72px); padding:0 var(--edge); display:flex; flex-direction:column; align-items:center; text-align:center; }
.stop-river { left:var(--edge); bottom:clamp(36px, 13vh, 150px); width:min(30em, calc(100vw - 2 * var(--edge))); }
.stop-river p { font-size:1.12em; }
.stop-ruins { left:var(--edge); top:50%; transform:translateY(-50%); width:min(44em, calc(100vw - 2 * var(--edge) - 28px)); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 64px); }
.stop-ruins h2 { font-size:clamp(1.5rem, 2.4vw, 2.4rem); }
.plain { list-style:none; }
.plain li { padding:.62em 0; border-top:1px solid rgba(232,194,122,.26); }
.plain b { display:block; font-weight:600; }
.plain span { color:var(--stone); font-size:.92em; }
.stop-sunset { left:50%; top:clamp(84px, 19vh, 240px); transform:translateX(-50%); width:min(34em, calc(100vw - 2 * var(--edge))); text-align:center; bottom:clamp(14px, 3vh, 32px); display:flex; flex-direction:column; align-items:center; }
.stop-sunset p { margin-bottom:1.2em; font-size:1.12em; }
#foot { margin-top:auto; display:flex; flex-wrap:wrap; gap:.2em 1.4em; justify-content:center; color:var(--parchment); font-size:.86em; }
#foot button { min-height:44px; text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; }
#foot span { display:flex; align-items:center; min-height:44px; }

/* At the sunset the sky is bright, so the words turn dark: the page's one change of voice */
body[data-stop="3"] .stop-sunset h2, body[data-stop="3"] .stop-sunset p { color:var(--ink); }
body[data-stop="3"] .brand, body[data-stop="3"] .lang button, body[data-stop="3"] .lang button[aria-pressed="true"] { color:var(--ink); }

.cta { display:inline-flex; align-items:center; text-decoration:none; min-height:48px; padding:.7em 2em; color:var(--shadow); background:var(--honey); border-radius:2px; font-weight:600; letter-spacing:.02em;
  transition:background-color .2s, transform .15s; }
.cta:hover { background:#f4d898; }
.cta:active { transform:scale(.98); }
body[data-stop="3"] .stop-sunset .cta { background:var(--ink); color:var(--parchment); }
body[data-stop="3"] .stop-sunset .cta:hover { background:#3a2813; }

.hint { display:flex; align-items:center; gap:.7em; margin-top:clamp(12px, 2.6vh, 28px); color:var(--stone); font-size:.88em; }
.hint-line { width:1px; height:1.5em; background:linear-gradient(var(--honey), transparent); transform-origin:top; animation:pull 2.4s ease-in-out infinite; }
@keyframes pull { 0%, 100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }

/* The side line: where you are, and a way to jump */
.rail { position:fixed; z-index:3; right:calc(var(--edge) - 14px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; }
.rail button { position:relative; display:flex; align-items:center; justify-content:flex-end; gap:.8em; height:48px; min-width:44px; padding:0 14px; color:var(--parchment); font-size:.88em; }
.rail button span:first-child { margin-right:22px; opacity:0; transform:translateX(6px); transition:opacity .25s, transform .25s; text-shadow:0 1px 8px rgba(16,12,7,.8); white-space:nowrap; }
.rail button:hover span:first-child, .rail button:focus-visible span:first-child, .rail button[aria-current="step"] span:first-child { opacity:1; transform:none; }
.rail i { display:block; width:18px; height:1px; background:var(--parchment); opacity:.6; transform-origin:right; transition:transform .4s, opacity .4s, background-color .4s; }
.rail button:hover i { opacity:1; }
.rail button[aria-current="step"] i { transform:scaleX(2.2); opacity:1; background:var(--honey); }

.notice { position:fixed; z-index:4; left:50%; bottom:clamp(14px, 3vh, 30px); transform:translate(-50%, 8px); max-width:calc(100vw - 32px); padding:.45em 1em; background:rgba(16,12,7,.9); color:var(--parchment); font-size:.88em; text-align:center; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.notice.on { opacity:1; transform:translate(-50%, 0); }

/* The page-not-found page: can open at any depth, so it links its files from the site's root */
body.lost { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; min-height:100%; padding:var(--edge); text-align:center; touch-action:auto; }
.lost h1 { font-size:clamp(1.6rem, 4vw, 2.6rem); letter-spacing:.12em; margin:.3em -.12em .3em 0; }
.lost .cta { margin-top:1em; }

/* Very wide screens: there is little height, so stops 3 and 4 use the width */
@media (min-aspect-ratio:21/9) {
  .stop-ruins { width:min(58em, 46vw); }
  .stop-sunset { top:clamp(70px, 13vh, 180px); }
}
/* Narrow screens: words sit low, over the dark ground */
@media (max-width:760px) {
  .rail { right:0; }
  .rail button span:first-child { display:none; }
  .rail i { width:12px; }
  .shade, body[data-stop="1"] .shade, body[data-stop="2"] .shade { background:linear-gradient(to top, rgba(16,12,7,.92), rgba(16,12,7,.55) 48%, rgba(16,12,7,0) 72%), linear-gradient(to bottom, rgba(16,12,7,.42), rgba(16,12,7,0) 14%); }
  .stop-valley { padding-right:calc(var(--edge) + 14px); padding-left:calc(var(--edge) + 14px); }
  h1 { letter-spacing:.09em; margin-right:-.09em; }
  .stop-river { width:auto; left:var(--edge); right:44px; bottom:clamp(36px, 9vh, 90px); }
  .stop-ruins { top:auto; bottom:clamp(14px, 3vh, 30px); transform:none; left:var(--edge); right:44px; width:auto; grid-template-columns:1fr; gap:.8em; max-height:calc(100dvh - 90px); overflow-y:auto; touch-action:pan-y; }
  .stop-ruins h2 { margin-bottom:.2em; }
  .plain li { padding:.32em 0; line-height:1.3; }
  .plain b { display:inline; }
  .plain span { display:block; }
  .stop-sunset { left:var(--edge); right:44px; width:auto; transform:none; }
}
@media (max-height:520px) {
  body[data-stop="2"] .shade { background:linear-gradient(to right, rgba(16,12,7,.88), rgba(16,12,7,.72) 62%, rgba(16,12,7,.15) 88%); }
  .stop-ruins { top:calc(50% + 20px); }
  .plain li { padding:.2em 0; line-height:1.25; }
  .plain b { display:inline; margin-right:.5em; }
  .hint { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .mist > div, .hint-line { animation:none; }
  .world, .stop, .stop.on { transition-duration:.2s; }
}