/* Every page but the journey: one place in the painting, held still, with the words where the view leaves room. */
html.page, html.page body { height:auto; min-height:100%; overscroll-behavior:auto; touch-action:auto; }
html.page { overflow:auto; }
html.page body { overflow:visible; min-height:100dvh; display:flex; flex-direction:column; }
/* The words scroll on these pages, so the top bar goes with them instead of sitting on the words */
html.page .top { position:absolute; }

/* Each page stands at its own place in the painting */
body[data-place="ruins"] { --px:50%; --py:34%; --ox:80%; --oy:34%; --zoom:1.4; }
body[data-place="river"] { --px:50%; --py:60%; --ox:62%; --oy:60%; --zoom:1.45; }
body[data-place="valley"] { --px:50%; --py:47%; --ox:58%; --oy:47%; --zoom:1.12; }
body[data-place="sunset"] { --px:50%; --py:34%; --ox:14%; --oy:34%; --zoom:1.4; }
body[data-place="doc"] { --px:50%; --py:34%; --ox:80%; --oy:34%; --zoom:1.4; }

.still { position:fixed; inset:0; overflow:hidden; }
.still img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--px) var(--py); max-width:none;
  transform-origin:var(--ox) var(--oy); transform:scale(var(--zoom)); transition:transform 1.8s cubic-bezier(.2,.7,.2,1); user-select:none; pointer-events:none; }
.arriving .still img { transform:scale(calc(var(--zoom) - .18)); transition:none; }
.still::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(16,12,7,.9) 0, rgba(16,12,7,.84) 38em, rgba(16,12,7,.42) 54em, rgba(16,12,7,0) 80em), linear-gradient(to bottom, rgba(16,12,7,.42), rgba(16,12,7,0) 16%); }
body[data-place="doc"] .still::after { background:linear-gradient(to right, rgba(16,12,7,.92) 0, rgba(16,12,7,.88) 46em, rgba(16,12,7,.5) 62em, rgba(16,12,7,.1) 86em), linear-gradient(to bottom, rgba(16,12,7,.42), rgba(16,12,7,0) 16%); }
/* At the sunset the sky is bright, so the words turn dark, as they do at the journey's last stop */
body[data-place="sunset"] .still::after { background:linear-gradient(to top, rgba(16,12,7,.72), rgba(16,12,7,0) 34%); }
body[data-place="sunset"] .brand, body[data-place="sunset"] .nav-wide a, body[data-place="sunset"] .menu summary, body[data-place="sunset"] .lang button, body[data-place="sunset"] .lang button[aria-pressed="true"] { color:var(--ink); }
body[data-place="sunset"] .read h1, body[data-place="sunset"] .read p, body[data-place="sunset"] .read a { color:var(--ink); }
body[data-place="sunset"] .nav-wide a[aria-current="page"] { text-decoration-color:var(--ink); }

/* Reading pages */
.read { position:relative; z-index:2; flex:1 0 auto; width:min(40em, calc(100% - 2 * var(--edge))); margin-left:var(--edge); padding:clamp(84px, 13vh, 130px) 0 clamp(24px, 5vh, 56px); }
.read h1 { font-size:clamp(1.8rem, 2.6vw, 2.8rem); letter-spacing:0; margin:0 0 .4em; line-height:1.12; }
.read h2 { font-size:1.45em; margin:1.6em 0 .45em; }
.read h3 { font-weight:600; font-size:1.05em; color:var(--parchment); margin:0 0 .2em; }
.read p { color:var(--stone); }
.read a { color:var(--parchment); text-underline-offset:.3em; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.lead-text { font-size:1.12em; }
.read .lead-text { color:var(--parchment); }

/* The Game */
.nations { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 3vw, 40px); }
.nation { padding-top:.6em; border-top:3px solid; }
.nation-hatti { border-color:#9B3426; }
.nation-assuwa { border-color:#44407A; }
.classes li b { display:inline-block; min-width:5.2em; }
.today-later { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 3vw, 40px); }
.today-later .plain li { color:var(--stone); font-size:.96em; line-height:1.45; }
.today-later .plain b { color:var(--parchment); }
.today-later .plain span { font-size:1em; }
.read .credit { margin-top:.9em; font-size:.86em; }

/* News */
.update { border-top:1px solid rgba(232,194,122,.26); }
.update > summary { display:flex; align-items:center; min-height:48px; padding:.3em 0; cursor:pointer; font-size:1.15em; color:var(--honey); }
.update > summary span { display:flex; align-items:baseline; flex-wrap:wrap; gap:.2em .8em; }
.update > summary small { font-size:.76em; color:var(--stone); }
.notes li { padding:.5em 0; line-height:1.45; color:var(--stone); }
.notes b { display:inline; color:var(--parchment); }
.notes-head { margin:1em 0 .2em; }

/* Contact */
.read .mail { font-size:clamp(1.15rem, 2.2vw, 1.8rem); margin-top:.6em; }
.read-contact { width:min(30em, calc(100% - 2 * var(--edge))); }

/* Long documents */
.doc-text h2 { font-size:1.45em; color:var(--honey); }
.doc-text h3 { margin:1.2em 0 .25em; font-size:1.1em; }
.doc-text p { margin-bottom:.7em; }
.doc-text ul { padding-left:1.2em; color:var(--stone); margin-bottom:.7em; }
.doc-text li { margin-bottom:.3em; }
.doc-text b { color:var(--parchment); font-weight:600; }
.doc-text table { width:100%; border-collapse:collapse; margin:.5em 0 1em; font-size:.9em; color:var(--stone); }
.doc-text th { text-align:left; font-weight:600; color:var(--parchment); padding:.35em .7em .35em 0; vertical-align:bottom; }
.doc-text td { padding:.45em .7em .45em 0; border-top:1px solid rgba(232,194,122,.26); vertical-align:top; overflow-wrap:anywhere; }


/* The small links at the bottom */
.foot { position:relative; z-index:2; flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:0 1.4em; margin:0 var(--edge); padding-bottom:.5em; color:var(--stone); font-size:.86em; }
.foot a { display:inline-flex; align-items:center; min-height:44px; color:var(--parchment); text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; }
.foot span { display:inline-flex; align-items:center; min-height:44px; }
.foot a span { min-height:0; }
body[data-place="sunset"] .foot, body[data-place="sunset"] .foot a { color:var(--parchment); }

@media (min-aspect-ratio:21/9) {
  body[data-place] { --zoom:1.12; }
  .arriving .still img { transform:scale(1.04); }
}
/* Narrow screens: the painting sits behind all the words, so the shade covers the width */
@media (max-width:760px) {
  .still::after, body[data-place="doc"] .still::after { background:linear-gradient(rgba(16,12,7,.76), rgba(16,12,7,.88)); }
  body[data-place="sunset"] .still::after { background:linear-gradient(rgba(16,12,7,0) 40%, rgba(16,12,7,.72)); }
  .read, .read-contact { width:auto; margin:0 var(--edge); padding-top:84px; }
  .nations, .today-later { grid-template-columns:1fr; gap:.2em; }
  .nation + .nation { margin-top:.8em; }
  .classes li b { display:block; }
  /* A table too wide for a phone becomes one block per row, and each cell says what it is */
  .doc-text table, .doc-text tbody, .doc-text tr, .doc-text td { display:block; }
  .doc-text thead { display:none; }
  .doc-text tr { padding:.5em 0; border-top:1px solid rgba(232,194,122,.26); }
  .doc-text td { padding:.1em 0; border:0; }
  .doc-text td[data-label]:not([data-label=""])::before { content:attr(data-label) ": "; color:var(--parchment); font-weight:600; }
}
@media (prefers-reduced-motion:reduce) {
  .still img { transition:none; }
}