@font-face { font-family: "Big Shoulders Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2"); }

:root {
  --ink: #0f1326;
  --bone: #ede6da;
  --bone-dim: rgb(237 230 218 / 0.66);
  --sky: #f0a15a;               /* replaced live from the horizon colour */
  --gut: clamp(16px, 3.2vw, 40px);
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--bone); font-family: var(--text); font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; }
body.mode-grid { overflow: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 2px; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
body.mode-grid #stage, body.mode-grid .scrub, body.mode-grid #walk { display: none; }
body.mode-trail::before { content: ""; position: fixed; z-index: 2; inset: 0 0 auto 0; height: 190px; pointer-events: none; background: linear-gradient(rgb(12 15 32 / .55), rgb(12 15 32 / .22) 55%, transparent); }

/* masthead: starts large, folds into a wordmark once you walk */
.mast { position: fixed; z-index: 3; left: var(--gut); top: var(--gut); max-width: min(46rem, calc(100vw - var(--gut) * 2)); pointer-events: none;
  text-shadow: 0 2px 28px rgb(8 10 24 / 0.6); }
.mast h1 { margin: 0; font: 800 clamp(4rem, 13.5vw, 10rem)/0.82 var(--display); letter-spacing: -0.012em; transform-origin: 0 0; transition: transform 1.3s cubic-bezier(.19,.8,.22,1); }
.mast .dek { margin: 0.55em 0 0; font: italic 400 clamp(1.25rem, 2.6vw, 1.7rem)/1.2 var(--text); transition: opacity .6s; }
.mast .note { margin: 0.9em 0 0; max-width: 36ch; color: var(--bone-dim); font-size: 1.02rem; transition: opacity .6s; }
.mast .hint { margin: 1.5em 0 0; font-size: 0.95rem; color: var(--sky); transition: opacity .6s; }
.mast { transition: transform 1.3s cubic-bezier(.19,.8,.22,1); }
.intro .mast { transform: translateY(calc(100svh - 100% - var(--gut) * 2 - 118px)); }
.walking .mast { transform: translateY(0); }
.walking .mast h1 { transform: scale(0.2); }
.walking .mast .dek, .walking .mast .note, .walking .mast .hint { opacity: 0; }
body.mode-grid .mast { position: static; transform: none; padding: calc(var(--gut) * 1.4) var(--gut) 0; pointer-events: auto; max-width: none; }
body.mode-grid .mast h1 { font-size: clamp(3.4rem, 11vw, 8rem); transform: none; }
body.mode-grid .mast .hint { display: none; }
body.mode-grid .mast .dek, body.mode-grid .mast .note { opacity: 1; }

/* controls */
.tools { position: fixed; z-index: 4; top: var(--gut); right: var(--gut); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 0.98rem; }
.tools .group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; }
.tools button { padding: 6px 2px; color: rgb(237 230 218 / .82); border-bottom: 2px solid transparent; text-shadow: 0 1px 18px rgb(8 10 24 / .7); transition: color .2s, border-color .2s; }
.tools button span { opacity: .6; font-variant-numeric: tabular-nums; margin-left: .15em; }
.tools button:hover { color: var(--bone); }
.tools button[aria-pressed="true"] { color: var(--bone); border-bottom-color: var(--sky); }
body.mode-grid .tools { position: absolute; top: var(--gut); right: var(--gut); align-items: flex-end; }
@media (max-width: 640px) { .tools { left: var(--gut); align-items: flex-start; } .tools .group { justify-content: flex-start; } body.mode-grid .tools { position: static; padding: var(--gut) var(--gut) 0; align-items: flex-start; } }
@media (max-width: 640px) { .walking .mast h1 { transform: scale(0.24); } .tools { top: auto; bottom: calc(var(--gut) + 74px); } }

/* time scrubber */
.scrub { position: fixed; z-index: 4; left: var(--gut); right: var(--gut); bottom: var(--gut); display: flex; align-items: flex-end; gap: clamp(12px, 2.4vw, 28px); }
.clock { font: 800 clamp(2.6rem, 6vw, 4.4rem)/0.8 var(--display); min-width: 4.9ch; font-variant-numeric: tabular-nums; text-shadow: 0 2px 22px rgb(8 10 24 / .65); }
.track { position: relative; flex: 1; height: 50px; cursor: ew-resize; touch-action: none; border-bottom: 2px solid rgb(237 230 218 / .35); }
.ticks { position: absolute; inset: 0; }
.ticks i { position: absolute; bottom: 0; width: 2px; margin-left: -1px; height: 14px; background: var(--bone-dim); border-radius: 1px; transition: background .2s, height .2s; }
.ticks i.dog { height: 24px; background: var(--sky); }
.ticks i.near { height: 34px; background: var(--bone); }
.head { position: absolute; bottom: -2px; left: 0; width: 3px; height: 50px; margin-left: -1.5px; background: var(--sky); box-shadow: 0 0 18px var(--sky); }

/* grid fallback / alternate view */
.gridwrap { padding: 0 var(--gut) calc(var(--gut) * 2); }
.gridwrap[hidden] { display: none; }
.grid { list-style: none; margin: calc(var(--gut) * 2.2) 0 0; padding: 0; columns: 3 280px; column-gap: 18px; }
.grid li { break-inside: avoid; margin: 0 0 22px; }
.grid li[hidden] { display: none; }
.grid button { display: block; width: 100%; background: #1a1e33; }
.grid img { display: block; width: 100%; height: auto; transition: filter .25s; }
.grid button:hover img { filter: brightness(1.08); }
.grid p { margin: 8px 0 0; font-size: 0.98rem; color: var(--bone-dim); line-height: 1.3; }
.grid .t { font: 700 1.45rem/1 var(--display); color: var(--bone); margin-right: .35em; }
.grid small { font-size: 0.85rem; opacity: .75; }

/* viewer */
dialog { border: 0; padding: 0; max-width: none; max-height: none; width: 100vw; height: 100svh; background: rgb(8 10 20 / .94); color: var(--bone); }
dialog::backdrop { background: rgb(8 10 20 / .94); }
dialog[open] { display: grid; grid-template-rows: 1fr auto; padding: var(--gut); gap: 14px; }
dialog figure { margin: 0; min-height: 0; display: grid; grid-template-rows: 1fr auto; gap: 14px; justify-items: center; }
dialog img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; align-self: center; box-shadow: 0 20px 80px rgb(0 0 0 / .5); }
figcaption { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 1.1rem; }
figcaption .t { font: 800 2.2rem/1 var(--display); }
figcaption small { color: var(--bone-dim); font-size: .95rem; }
.vnav { display: flex; justify-content: center; gap: 28px; }
.vnav button { padding: 8px 4px; border-bottom: 2px solid transparent; color: var(--bone-dim); }
.vnav button:hover { color: var(--bone); border-color: var(--sky); }

.noscript { position: fixed; z-index: 9; left: var(--gut); bottom: var(--gut); margin: 0; }

/* walk mode: each photo takes the whole screen for a moment */
#showcase { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; background: #090c18; opacity: 0; visibility: hidden; cursor: pointer;
  transition: opacity .55s ease, visibility 0s linear .55s; }
#showcase.on { opacity: 1; visibility: visible; transition: opacity .55s ease; }
#showcase.instant { transition: none; }
#showcase::after { content: ""; position: absolute; inset: auto 0 0 0; height: 32%; pointer-events: none; background: linear-gradient(transparent, rgb(6 8 18 / .72)); }
.sccap { z-index: 1; }
.sccap span:not(.t) { font-size: 1.15rem; color: var(--bone); }
#showcase img { width: 100%; height: 100%; object-fit: contain; transform: scale(1); transition: transform 4.2s cubic-bezier(.2,.6,.3,1); }
#showcase.on img { transform: scale(1.035); }
.sccap { position: absolute; left: var(--gut); bottom: var(--gut); margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; text-shadow: 0 2px 24px rgb(0 0 0 / .8); }
.sccap .t { font: 800 clamp(2.4rem, 5vw, 3.6rem)/0.9 var(--display); }
.sccap small { color: var(--bone-dim); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { #showcase img, #showcase.on img { transform: none; transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .mast, .mast h1, .mast .dek, .mast .note, .mast .hint { transition: none; }
}