/* yasserameur.me. One dark palette, one ember accent, two faces.
   Spacing steps: 2 4 8 12 16 24 32 40 48 64 80 96. */

/* Jost is one variable file: 300 to 500 come from it, so one fetch serves every weight. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexMono-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/fonts/Jost-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat Brush'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/CaveatBrush-400.woff2') format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/PermanentMarker-400.woff2') format('woff2'); }
@font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Bangers-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@view-transition { navigation: auto; }

:root {
  color-scheme: dark;
  --bg: #0b1020; --bg-2: #10162b; --bg-3: #171e36;
  --line: rgba(244, 241, 234, 0.12); --line-2: rgba(244, 241, 234, 0.22);
  --text: #f4f1ea; --text-2: #b9bfcd; --text-3: #808799;
  --accent: #ff9e5e; --accent-2: #ffb884; --accent-ink: #1a0d04;
  --measure: 40rem; --page: 74rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sans: "Jost", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --gutter: clamp(20px, 5vw, 72px);
  --ink-brush: url("/media/scenes/menu-brush-mask-v1.webp");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.skip { position: absolute; left: 16px; top: -48px; padding: 8px 12px; background: var(--bg-3); border-radius: 4px; z-index: 40; }
.skip:focus { top: 16px; }

h1, h2, h3 { font-family: var(--sans); font-weight: 300; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 400; }
h3 { font-size: 1.25rem; font-weight: 500; }
p { margin: 0 0 1em; }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--text-2); font-weight: 300; }
.eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin: 0 0 16px; }
code, pre, kbd { font-family: var(--mono); font-size: 0.875em; }
code { background: var(--bg-3); padding: 1px 6px; border-radius: 4px; }
pre { background: var(--bg-2); border: 1px solid var(--line); padding: 16px 20px; border-radius: 8px; overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; text-align: center; color: var(--text-2); font-size: 0.75rem; }
.button { display: inline-block; padding: 12px 20px; border: 1px solid var(--line-2); border-radius: 4px; text-decoration: none; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; min-height: 44px; }
.button:hover { border-color: var(--accent); }

/* ---------- The app shell: title screen, mode select, worlds ---------- */

.app-body { overflow: hidden; height: 100dvh; }
.shell { position: relative; height: 100dvh; overflow: hidden; --px: 0; --py: 0; }
.poster, .scene, .grain, .wipe { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { object-fit: cover; object-position: 50% 50%; z-index: 0; }
.poster.is-hidden { display: none; }
.scene { z-index: 1; opacity: 0; transition: opacity 900ms var(--ease-out); }
.scene.is-ready { opacity: 1; }
.grain { z-index: 2; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>"); }
.shell::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 8, 18, 0.72) 0%, rgba(6, 8, 18, 0.46) 31%, rgba(6, 8, 18, 0.05) 57%),
    linear-gradient(180deg, rgba(6, 8, 18, 0.3) 0%, rgba(6, 8, 18, 0) 18%, rgba(6, 8, 18, 0) 72%, rgba(6, 8, 18, 0.5) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(6, 8, 18, 0) 55%, rgba(6, 8, 18, 0.45) 100%);
  transition: opacity 500ms var(--ease-out);
}
.shell.is-title::before {
  background:
    linear-gradient(90deg, rgba(6, 8, 18, 0.76) 0%, rgba(6, 8, 18, 0.48) 34%, rgba(6, 8, 18, 0.02) 58%),
    linear-gradient(180deg, rgba(6, 8, 18, 0.3) 0%, rgba(6, 8, 18, 0) 22%, rgba(6, 8, 18, 0) 70%, rgba(6, 8, 18, 0.55) 100%);
}
.shell.has-view::before { opacity: 0; }
/* Long, dry bristles frame the menu without covering the central character. */
.menu-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 420ms var(--ease-out); }
.shell.is-menu:not(.has-view) .menu-frame { opacity: 1; }
.menu-frame::before, .menu-frame::after { content: ""; position: absolute; width: 112vw; height: 32vh; background: #08060cee; mask: var(--ink-brush) center / 100% 100% no-repeat; mask-mode: luminance; }
.menu-frame::before { top: -15vh; left: -35vw; transform: rotate(-13deg); }
.menu-frame::after { bottom: -16vh; right: -34vw; transform: rotate(167deg); }
.shell.is-menu::before { background: radial-gradient(ellipse at 0 0, #0d071ace, transparent 48%), radial-gradient(ellipse at 100% 100%, #0b0617db, transparent 50%), linear-gradient(90deg, #09061160, transparent 60%); }
.wipe { z-index: 6; pointer-events: none; background: radial-gradient(circle at 50% 50%, #fff3dc 0%, #ff9e5e 18%, #0b1020 42%, #0b1020 100%); opacity: 0;
  transform: scale(0.2); transition: opacity 260ms var(--ease-in-out), transform 520ms var(--ease-in-out); }
.wipe.is-on { opacity: 1; transform: scale(3); }
.wipe.is-lightning { background: radial-gradient(circle at 58% 36%, #ffffff 0%, #fff3a8 7%, #ffd04d 16%, rgba(78, 190, 255, 0.92) 27%, rgba(11, 16, 32, 0) 58%); mix-blend-mode: screen; transition-duration: 90ms, 120ms; }
.wipe.is-teleport { background: radial-gradient(ellipse at 72% 48%, #ffffff 0%, #fff4a4 5%, #ffc83d 12%, rgba(78, 190, 255, 0.72) 24%, rgba(11, 16, 32, 0) 55%); mix-blend-mode: screen; transition-duration: 70ms, 110ms; }
.wipe.is-impact { background: radial-gradient(circle at 48% 56%, #ffffff 0%, #c9f7ff 8%, #39aaff 22%, #075dca 38%, #0b1020 66%); mix-blend-mode: screen; transition-duration: 110ms, 170ms; }

/* Brush lettering: warm gradient, dark splat behind, a slight lean toward the pointer. */
.splat { position: absolute; inset: -18% -14% -22% -12%; width: 126%; height: 140%; fill: #100b12; opacity: 0.92; z-index: -1; filter: url(#rough) drop-shadow(0 0 28px rgba(255, 120, 40, 0.28)); }
.brush {
  font-family: "Caveat Brush", "Permanent Marker", cursive; font-weight: 400; line-height: 0.9; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffe08a 0%, #ff9a3c 48%, #ff5a2a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(120, 30, 0, 0.55)) drop-shadow(0 10px 30px rgba(255, 130, 60, 0.35));
}

/* The title screen */
.title { position: absolute; z-index: 3; left: var(--gutter); top: 50%; transform: translateY(-54%); width: min(42rem, 78vw); }
.title__logo { position: relative; display: block; margin-left: -2%; transform: translate(calc(var(--px) * -5px), calc(var(--py) * -3px)); transition: transform 900ms var(--ease-out); }
.title__art { display: block; width: min(38rem, 62vw); height: auto; filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.7)); }
/* Press the START button, as the Storm title screens put it: white serif lettering in a lavender glow, framed by leaves. */
.title__start { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; width: min(38rem, 62vw); margin: 10px 0 0 -2%; padding: 10px 0; min-height: 56px;
  background: none; border: 0; color: #fff; cursor: pointer; touch-action: manipulation; }
.title__prompt { font: 400 clamp(1.4rem, 2.8vw, 2.25rem) / 1 Georgia, "Palatino Linotype", "Book Antiqua", serif; letter-spacing: 0.03em; white-space: nowrap; animation: prompt 1.8s var(--ease-in-out) infinite;
  text-shadow: 0 0 1px #d8cfff, 0 0 3px #b3a4ff, 0 0 8px #8c78f0, 0 2px 0 #7a68d8, 0 3px 6px rgba(20, 10, 60, 0.7); }
.title__prompt b { font-weight: 400; letter-spacing: 0.06em; }
@keyframes prompt { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.title__leaves { position: relative; flex: none; width: 118px; height: 72px; }
.title__leaves .leaf { position: absolute; width: 56px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); transform-origin: 6% 85%; animation: leaf 3.6s var(--ease-in-out) infinite; }
.title__leaves--l .leaf:nth-child(1) { left: 54px; top: 4px; rotate: -34deg; }
.title__leaves--l .leaf:nth-child(2) { left: 6px; top: 24px; rotate: -8deg; animation-delay: -1.2s; }
.title__leaves--l .leaf:nth-child(3) { left: 40px; top: 46px; rotate: 24deg; scale: 0.8; animation-delay: -2.4s; }
.title__leaves--r { scale: -1 1; }
.title__leaves--r .leaf:nth-child(1) { left: 54px; top: 4px; rotate: -34deg; animation-delay: -0.6s; }
.title__leaves--r .leaf:nth-child(2) { left: 6px; top: 24px; rotate: -8deg; animation-delay: -1.8s; }
.title__leaves--r .leaf:nth-child(3) { left: 40px; top: 46px; rotate: 24deg; scale: 0.8; animation-delay: -3s; }
@keyframes leaf { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.title__start:hover .title__prompt, .title__start:focus-visible .title__prompt { animation-play-state: paused; opacity: 1; }
.title__start:focus-visible { outline: 2px solid #d8cfff; outline-offset: 4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .title__prompt, .title__leaves .leaf { animation: none; } }
.title__quote { margin: 36px 0 0 24px; max-width: 28rem; padding: 12px 18px; font-family: "Caveat Brush", cursive; font-size: 1.5rem; line-height: 1.3; color: #ffe9c9; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); background: rgba(10, 8, 16, 0.55); border: 1px solid rgba(255, 158, 94, 0.25); border-radius: 6px; }
.title__quote::before { content: "“ "; color: var(--accent); }
.title__quote::after { content: " ”"; color: var(--accent); }
.title__meta { margin: 20px 0 0 24px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The mode select: oversized lettering above an open, brush-edged navigation band. */
.mode { position: absolute; z-index: 3; left: var(--gutter); top: 0; bottom: 0; width: 60vw; --mode-ink: #2a160c; --mode-color: #ffc760; --mode-light: #fff1b3; --mode-deep: #de7919; }
.mode__header { position: absolute; isolation: isolate; top: 8vh; left: -1vw; width: min(48vw, 44rem); aspect-ratio: 6 / 1; margin: 0; padding: 0; transform: rotate(-4deg); }
.mode__header::before { content: ""; position: absolute; z-index: -1; inset: -45% -24% -35% -20%; background: #0b0712f5; mask: var(--ink-brush) center / 100% 100% no-repeat; mask-mode: luminance; }
.mode__header-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: url(#title-ink-key) url(#header-outline) drop-shadow(0 0 3px #efa64266) drop-shadow(0 2px 2px #171015); }
.mode__stage { position: absolute; left: 0; top: 25vh; width: 100%; height: 45vh; }
.mode__title { position: absolute; inset: 0; display: flex; align-items: center; padding: 0; margin: 0; transform: perspective(1100px) rotateY(calc(var(--px) * -2.5deg)) rotateX(calc(var(--py) * 2deg)) translate(calc(var(--px) * -5px), calc(var(--py) * -3px)); transform-style: preserve-3d; transition: transform 900ms var(--ease-out); }
/* Live lettering for a mode without painted art: fire over the black brush splat, like the painted set. */
.mode__title > #modeVerb { display: block; font-family: "Permanent Marker", "Caveat Brush", cursive; font-size: clamp(4rem, 8vw, 7rem); line-height: 0.9; letter-spacing: 0.02em; transform: rotate(-4deg);
  background: linear-gradient(178deg, #fff4b0 0%, #ffcf4a 30%, #ff9a2e 58%, #ff5e1c 84%, #e0330f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.6px rgba(120, 30, 0, 0.35);
  filter: drop-shadow(0 0 1px #ffd27a) drop-shadow(0 0 12px rgba(255, 120, 30, 0.55)) drop-shadow(0 5px 0 rgba(90, 20, 0, 0.5)); }
.mode__title.is-in span { animation: verb-in 520ms var(--ease-out); }
.mode__title.is-in .splat { animation: splat-in 520ms var(--ease-out); }
.mode__art { display: none; width: 100%; height: 100%; object-fit: contain; object-position: left center; margin: 0; filter: url(#title-ink-key) url(#mode-lettering); }
.mode__title { text-decoration: none; cursor: pointer; touch-action: manipulation; }
.mode__title:focus-visible { outline: 2px solid var(--mode-color); outline-offset: 10px; }
.mode__title.has-art { padding: 0; isolation: isolate; }
.mode__title.has-art::before { content: ""; position: absolute; z-index: -1; inset: 12% -5% 5% -9%; pointer-events: none; background: linear-gradient(100deg, #0b0711eb 8%, var(--mode-ink) 60%, #0b071199); mask: var(--ink-brush) center / 100% 100% no-repeat; mask-mode: luminance; transform: rotate(-5deg); opacity: .9; }
.shell[data-world="projects"] .mode { --mode-ink: #0c2418; --mode-color: #88d74a; --mode-light: #e7ffae; --mode-deep: #328f3b; }
.shell[data-world="experience"] .mode { --mode-ink: #0a1a38; --mode-color: #6ac5ff; --mode-light: #d4f0ff; --mode-deep: #397bc4; }
.shell[data-world="contact"] .mode { --mode-ink: #2c0b22; --mode-color: #f98ea4; --mode-light: #ffe1ec; --mode-deep: #bc477a; }
.mode__title.has-art .mode__art { display: block; }
.mode__glint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; }
.mode__title.has-art .mode__glint { opacity: 0.9; background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 220, 0.6) 48%, rgba(255, 220, 160, 0.3) 52%, transparent 60%); background-size: 260% 100%; background-position: 120% 0; animation: glint 1.4s var(--ease-in-out) 1 420ms; -webkit-mask: var(--art) left center / contain no-repeat; mask: var(--art) left center / contain no-repeat; mask-mode: luminance; }
@keyframes glint { 0%, 55% { background-position: 120% 0; } 75%, 100% { background-position: -40% 0; } }
.mode__title.has-art #modeVerb, .mode__title.has-art .splat { display: none; }
.mode__title.has-art.is-in .mode__art { animation: verb-in 520ms var(--ease-out); }
@keyframes verb-in { from { opacity: 0; transform: rotate(-4deg) translateX(-26px) scale(0.94); } to { opacity: 1; transform: rotate(-4deg) translateX(0) scale(1); } }
@keyframes splat-in { from { opacity: 0; transform: scaleX(0.6); transform-origin: left; } to { opacity: 0.92; transform: scaleX(1); } }

/* The arrows Storm draws above and below the title, centred on the lettering. */
.mode__arrow { position: absolute; z-index: 2; left: 46%; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: none; color: #ffe9c9; cursor: pointer; touch-action: manipulation; transform: translateX(-50%); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)); animation: nudge 1.8s var(--ease-in-out) infinite; }
.mode__arrow svg { display: block; width: 34px; height: 19px; margin: auto; }
.mode__arrow:focus-visible { outline: 2px solid #fff1c8; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mode__arrow:hover { color: #fff; } }
.mode__arrow--up { top: calc(-3.5vh - 12px); }
.mode__arrow--down { bottom: calc(-3vh - 12px); transform: translateX(-50%) scaleY(-1); animation-direction: reverse; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* Each destination owns its colour and its own hand-painted ink stroke. */
.mode__panel { position: absolute; left: 0; bottom: 7.5vh; isolation: isolate; width: 100%; max-width: 52rem; margin: 0; padding: 0; color: #fff3d7; }
.menu { position: relative; isolation: isolate; padding: 0; }
.menu__kunai { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; width: 24px; height: 9px; transform: translate(var(--kx, 0px), calc(var(--ky, 28px) - 4.5px)); transition: transform 180ms var(--ease-out); filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 4px #fff2b866); }
.menu__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: .85fr 1fr 1.3fr 1fr; gap: 12px; }
.menu__list li { position: relative; min-width: 0; }
.menu__list a { --item-ink: #3b200d; --item-color: #ffc453; display: grid; align-items: center; position: relative; isolation: isolate; padding: 2px 4px 2px 22px; min-height: 56px; text-decoration: none; }
.menu__list a[data-key="projects"] { --item-ink: #10351c; --item-color: #8fe45a; }
.menu__list a[data-key="experience"] { --item-ink: #112d50; --item-color: #75cfff; }
.menu__list a[data-key="contact"] { --item-ink: #41162d; --item-color: #ff9ab9; }
.menu__list a::before, .menu__list a::after { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -9px -15px -10px -13px; mask: var(--ink-brush) center / 100% 100% no-repeat; mask-mode: luminance; transform: rotate(-4deg); }
.menu__list a::before { background: linear-gradient(105deg, #0a0710 6%, var(--item-ink) 65%, #0b0711); }
.menu__list a::after { z-index: -2; background: var(--item-color); transform: translateY(3px) rotate(-4deg) scale(1.035); opacity: .18; transition: opacity 160ms var(--ease-out); }
.menu__art { display: block; width: 100%; height: 50px; object-fit: contain; filter: url(#title-ink-key) drop-shadow(1px 2px 1px #000); opacity: .82; transition: opacity 160ms var(--ease-out); }
.menu__icon, .menu__where { display: none; }
.menu__list li.is-selected a::after { opacity: .95; }
.menu__list li.is-selected .menu__art { opacity: 1; }
.menu__list a:focus-visible { outline: 2px solid #fff1c8; outline-offset: 7px; }
@media (hover: hover) and (pointer: fine) {
  .menu__list li:not(.is-selected) a:hover::after { opacity: .6; }
  .menu__list a:hover .menu__art { opacity: 1; }
}
.menu__list a:focus-visible::after { opacity: 1; }

/* The brief under the list: where it goes, the line, the sentence. */
.mode__info { position: relative; isolation: isolate; margin: 20px 0 0; padding: 4px 8px; }
.mode__info::before { content: ""; position: absolute; z-index: -1; inset: -8px -24px; pointer-events: none; background: linear-gradient(90deg, #100b1600, #100b16b3 5%, #100b1680 85%, #100b1600); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.mode__where { display: none; }
.mode__where::before { content: "// "; opacity: 0.6; }
.mode__quote { display: none; margin: 6px 0 0; font-family: "Caveat Brush", cursive; font-size: 1.2rem; line-height: 1.25; color: #ffe9c9; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.mode__quote::before { content: "\201C "; color: var(--accent); }
.mode__quote::after { content: " \201D"; color: var(--accent); }
.mode__desc { margin: 0; max-width: none; color: #f5eedf; font-weight: 400; font-size: 1rem; line-height: 1.4; text-shadow: 0 2px 3px #000; }

/* A full-screen illustrated loading interlude, framed like a game chapter card. */
.loader { position: absolute; z-index: 40; inset: 0; overflow: hidden; background: #090d17; color: #fff2d6; animation: loader-in 220ms var(--ease-out); }
.loader__gallery, .loader__shade, .loader__image { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__gallery { overflow: hidden; }
.loader__image { object-fit: cover; object-position: center; opacity: 0; transform: scale(1.035); transition: opacity 800ms var(--ease-in-out), transform 6s linear; }
.loader__image.is-visible { opacity: 1; transform: scale(1); }
.loader.is-paused .loader__image { transform: none; transition: opacity 200ms var(--ease-out); }
.loader__shade { background: linear-gradient(180deg, #080d18b3, transparent 24%, transparent 40%, #080c17d9 76%, #080c17 100%), linear-gradient(90deg, #080c174d, transparent 60%); }
.loader::before, .loader::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #785034, #fbc66f 26%, #fff0bf 50%, #bb7c37 90%, #543a2a); }
.loader::before { top: 0; } .loader::after { bottom: 0; }
.loader__top { position: absolute; left: var(--gutter); right: var(--gutter); top: max(25px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.loader__top b { display: block; margin-top: 5px; font-weight: 400; color: #d9c69f; }
.loader button { min-height: 44px; padding: 10px 16px; border: 1px solid #d4a66499; background: #080d18b3; color: #fff2d6; font: 500 .75rem var(--mono); cursor: pointer; }
.loader button:focus-visible { outline: 2px solid #ffe6ab; outline-offset: 4px; }
.loader button:hover { background: #35271f; }
.loader__top button span { margin-left: 14px; color: #ffd37c; }
.loader__footer { position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(38px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-top: 24px; border-top: 1px solid #ffcf7159; }
.loader__eyebrow { margin: 0 0 6px; color: #dfb971; font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .18em; }
.loader__caption { margin: 0; font: 400 clamp(2rem, 4vw, 4rem)/1.1 "Caveat Brush", cursive; text-shadow: 0 3px #000; }
.loader__tip { margin: 12px 0; font-size: 1rem; color: #e0d6c5; }
.loader__story button { padding: 8px 0; border-color: transparent; background: transparent; color: #dfc69e; text-decoration: underline; text-underline-offset: 4px; }
.loader__progress { width: min(32vw, 25rem); padding-bottom: 10px; }
.loader__label { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 13px; font: 400 clamp(1.3rem, 2.5vw, 2rem)/1.2 "Caveat Brush", cursive; }
#loaderCount { font: 500 .875rem var(--mono); font-variant-numeric: tabular-nums; color: #ffd483; }
.loader__bar { height: 7px; padding: 1px; background: #ffffff1a; outline: 1px solid #ffcf7133; overflow: hidden; transform: skewX(-18deg); }
.loader__bar i { display: block; height: 100%; background: linear-gradient(90deg, #ec772c, #ffd884 70%, #fff5cc); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
.loader__detail { display: block; margin-top: 10px; color: #c8bba8; font: 400 .75rem var(--mono); }
@keyframes loader-in { from { opacity: 0; } }

/* Stage switching */
.shell.is-title .mode, .shell.is-menu .title { opacity: 0; pointer-events: none; visibility: hidden; }
.title, .mode { transition: opacity 420ms var(--ease-out), visibility 0s linear 420ms; }
.shell.is-title .title, .shell.is-menu .mode { opacity: 1; visibility: visible; transition-delay: 0s; }
.shell.is-starting .title { transform: translateY(-58%) scale(1.08); opacity: 0; transition: opacity 320ms var(--ease-in-out), transform 520ms var(--ease-in-out); }
.shell.is-title .hint--menu, .shell.is-menu .hint--title { display: none; }
.shell.has-view .mode, .shell.has-view .title, .shell.has-view .hints { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms; }
/* On confirm the pressed row flares for a beat, then the mode select clears the stage for the dive. */
.menu__list li.is-pressed a { transform: translateX(6px) scale(0.985); transition-duration: 90ms; }
.menu__list li.is-pressed a::before { filter: brightness(1.4); box-shadow: inset 0 1px 0 #fff, 0 0 32px rgba(255, 214, 140, 0.7); transition: none; }
.shell.is-diving .mode, .shell.is-diving .hints { opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-in-out) 150ms; }
.shell.is-diving .mode__art { transform: scale(1.04); transition: transform 420ms var(--ease-in-out); }

.hints { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(16px, 3vh, 28px); display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-2); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.hints kbd { margin-right: 4px; background: rgba(6, 8, 18, 0.6); }
.mute { margin-left: auto; appearance: none; background: rgba(6, 8, 18, 0.55); border: 1px solid var(--line-2); color: var(--text-2); font: inherit; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 14px; border-radius: 4px; cursor: pointer; min-height: 44px; }
.mute:hover { border-color: var(--accent); color: var(--text); }
.mute[aria-pressed="true"] { text-decoration: line-through; }
.noscript { position: absolute; z-index: 6; left: var(--gutter); bottom: 90px; color: var(--text-2); }

/* ---------- Views: the inside of each place ---------- */

.view {
  position: absolute; inset: 0; z-index: 4; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--v-bg, var(--bg)); color: var(--v-text, var(--text));
  opacity: 0; transform: scale(1.03); transition: opacity 360ms var(--ease-out), transform 380ms var(--ease-out), background 700ms var(--ease-in-out), color 700ms var(--ease-in-out);
  --v-bg: var(--bg); --v-bg2: var(--bg-2); --v-text: var(--text); --v-muted: var(--text-3); --v-accent: var(--accent);
}
.view.is-open { opacity: 1; transform: none; }
.view--story.is-opening { opacity: 1; transform: none; transition: none; }
.view--about, .view--now, .view--story { --v-bg: rgba(11, 16, 32, 0.86); }
.proj__hook .proj__stat b { font-size: clamp(2.75rem, 4.6vw, 4.25rem); white-space: nowrap; }
.view[hidden] { display: none; }
.view__back {
  position: fixed; z-index: 5; left: var(--gutter); top: clamp(16px, 3vh, 28px); text-decoration: none;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v-muted, var(--text-3));
  padding: 12px 14px 12px 0; min-height: 44px; display: inline-flex; align-items: center;
}
.view__back:hover, .view__back:focus-visible { color: var(--v-accent, var(--accent)); }
.view__panel { max-width: var(--measure); margin: 0 auto; padding: clamp(96px, 18vh, 160px) var(--gutter) 120px; }
.view__panel--wide { max-width: var(--page); }
.view .eyebrow { color: var(--v-muted, var(--text-3)); }
.view .lead { color: var(--v-muted, var(--text-2)); }
.view a { color: var(--v-accent, var(--accent)); }
.view h1 { margin-bottom: 16px; }
.view .prose h2 { margin: 48px 0 8px; }

/* ---------- Case study pages (ordinary pages) ---------- */

.site-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 24px var(--gutter); border-bottom: 1px solid var(--line); }
.site-head nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; }
.site-head nav a { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); text-decoration: none; padding: 8px 0; }
.site-head nav a:hover, .site-head nav a:focus-visible { color: var(--text); }
.site-head nav a[aria-current="page"] { color: var(--accent); }
.site-head nav a[aria-current="page"]::before { content: "▸ "; }
.site-foot { padding: 40px var(--gutter) 32px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 0.875rem; }
.site-foot p { margin: 0 0 4px; }
.colophon { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.page { max-width: var(--page); margin: 0 auto; padding: 48px var(--gutter) 96px; }
.prose { max-width: var(--measure); }
.prose h2 { margin: 56px 0 12px; }
.prose h3 { margin: 32px 0 8px; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: 0.35em; }
.prose figure { margin: 32px 0; }
.prose figcaption, figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); margin-top: 10px; letter-spacing: 0.02em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; margin: 24px 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--mono); font-weight: 500; color: var(--text-3); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.prose blockquote { margin: 24px 0; padding-left: 16px; border-left: 2px solid var(--accent); color: var(--text-2); }
.prose strong { font-weight: 500; }

.study { max-width: var(--page); margin: 0 auto; padding: 56px var(--gutter) 96px; --c: var(--project-accent, var(--accent)); }
.study__head .eyebrow { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 20px; }
.study__head .eyebrow b { color: var(--c); font-weight: 500; }
.study__head h1 { max-width: 22ch; margin-bottom: 20px; font-size: clamp(2.25rem, 4.6vw, 3.75rem); text-wrap: balance; }
.study__head .lead { max-width: 46rem; margin: 0; }
.study__band { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.stat { display: grid; gap: 8px; margin: 0; }
.stat dt { font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); max-width: 34rem; }
.stat dd { margin: 0; }
.stat b { display: block; font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--c); }
.stat__source { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }
.stat__source code { color: var(--text-2); background: none; padding: 0; }
.study__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.study__links a { text-decoration: none; padding: 13px 18px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text); font: 500 0.8125rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.study__links a:first-child { background: var(--c); border-color: var(--c); color: #0b1020; }
.study__links a:hover { border-color: var(--c); }
.study__capture { margin: 48px 0 0; }
.study__capture img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.study__grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; margin-top: 80px; }
.study__rail { position: sticky; top: 32px; align-self: start; display: grid; gap: 2px; }
.study__rail a { text-decoration: none; font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding: 8px 0 8px 14px; border-left: 1px solid var(--line); transition: color 160ms, border-color 160ms; }
.study__rail a:hover, .study__rail a[aria-current="true"] { color: var(--text); border-left-color: var(--c); }
.study__rail .study__rail-next { margin-top: 20px; padding-top: 16px; border-left: 0; padding-left: 0; color: var(--c); }
.study__prose { max-width: var(--measure); }
.study__prose h2 { margin: 0 0 14px; scroll-margin-top: 32px; }
.study__prose h2:not(:first-child) { margin-top: 64px; }
figure.diagram--arch { max-width: none; width: calc(100% + 264px); margin: 28px 0 40px -264px; padding: 0; border: 0; background: none; }
.diagram__stage { position: relative; height: clamp(380px, 44vw, 640px); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, 0.04), transparent 70%), #080a12; }
figure.diagram--arch figcaption { margin-top: 12px; max-width: var(--measure); }
.study .sources { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); max-width: var(--measure); margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--line); }
.study .sources h2 { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 8px; font-weight: 500; }
.study .sources ol { padding-left: 1.25em; margin: 0; }
.study__foot { display: flex; justify-content: space-between; gap: 24px; margin-top: 96px; padding-top: 28px; border-top: 1px solid var(--line); }
.study__foot a { text-decoration: none; font-size: 1.5rem; font-weight: 300; color: var(--text); }
.study__foot a:hover { color: var(--c); }
.study__foot a span { display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
@media (max-width: 960px) {
  .study__grid { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .study__rail { position: static; display: flex; flex-wrap: wrap; gap: 2px 18px; }
  .study__rail a { border-left: 0; padding: 6px 0; }
  .study__rail .study__rail-next { margin: 0; padding: 6px 0; border: 0; }
  figure.diagram--arch { width: 100%; margin-left: 0; }
  .diagram__stage { height: auto; }
  .diagram__stage .arch { position: static; overflow: visible; }
  .diagram__stage .arch__svg { width: 100%; }
}

/* ---------- Small screens and reduced motion ---------- */

@media (max-width: 760px) {
  .title { width: calc(100vw - 2 * var(--gutter)); top: auto; bottom: 96px; transform: none; }
  .title__logo { position: fixed; top: max(5vh, env(safe-area-inset-top)); left: var(--gutter); margin: 0; width: min(88vw, 30rem); } /* the logo at the top of the screen, the prompt stays where it was */
  .title__art { width: min(88vw, 30rem); }
  .title__start { width: 100%; margin-left: 0; gap: 0; } /* dead centre of the screen */
  /* sized so the row never overflows a narrow phone, whatever serif the phone falls back to */
  .title__prompt { font-size: clamp(0.95rem, 5vw, 1.2rem); }
  .title__leaves { width: 52px; height: 48px; }
  .title__leaves .leaf { width: 36px; height: 20px; }
  .title__leaves--l .leaf:nth-child(1), .title__leaves--r .leaf:nth-child(1) { left: 18px; top: 0; }
  .title__leaves--l .leaf:nth-child(2), .title__leaves--r .leaf:nth-child(2) { left: 0; top: 15px; }
  .title__leaves--l .leaf:nth-child(3), .title__leaves--r .leaf:nth-child(3) { left: 12px; top: 29px; }
  /* the logo is fixed at the top: the start animation may fade the block but not transform it, or the logo
     would re-anchor to the block and fall down the screen; and a thumb's tap is no pointer to parallax on */
  .shell.is-starting .title { transform: none; }
  .title__logo { transform: none; transition: none; }
  .title__quote { display: none; }
  .mode { width: calc(100vw - 2 * var(--gutter)); }
  .mode__header { top: 6vh; width: 88%; }
  /* the stage is as tall as the lettering itself, so the arrows hug it */
  .mode__stage { top: 15vh; height: 20vh; }
  .mode__arrow { left: 50%; }
  .mode__arrow--up { top: calc(-2vh - 12px); }
  .mode__arrow--down { bottom: calc(-2vh - 12px); }
  .mode__title > #modeVerb { font-size: 2.75rem; }
  .mode__art { width: 100%; height: 100%; }
  .mode__panel { bottom: 80px; padding: 0 8px; }
  .menu__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
  .mode__info { display: block; }
  .mode__where { display: none; }
  .mode__quote { display: none; }
  .mode__info { margin-top: 16px; }
  .mode__desc { font-size: 1rem; }
  .menu__list a { min-height: 44px; padding: 0 2px 0 20px; }
  .menu__art { height: 44px; }
  .menu-frame::before { top: -13vh; left: -38vw; }
  .menu-frame::after { bottom: -13vh; right: -45vw; }
  .menu__kunai { width: 20px; }
  .loader__footer { flex-direction: column; align-items: stretch; gap: 18px; bottom: max(22px, env(safe-area-inset-bottom)); }
  .loader__progress { width: 100%; }
  .loader__tip { font-size: .875rem; }
  .loader__image { object-position: 62% center; }
  .hints .hint { display: none; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .title__art { width: min(30rem, 50vw); }
  .title__start { width: min(30rem, 50vw); }
  .title__quote { display: none; }
  .mode__header { top: 7vh; }
  .mode__stage { top: 20vh; height: 39vh; }
  .mode__panel { bottom: 76px; }
  .mode__info { display: none; }
}
@media (max-height: 650px) and (max-width: 760px) {
  .mode__header { top: 12vh; }
  .mode__title { top: 21vh; height: 35vh; }
  .mode__info { display: none; }
}
@media (max-height: 500px) and (max-width: 760px) {
  .mode { width: 60vw; }
  .mode__header { top: 4vh; width: 90%; }
  .mode__stage { top: 18vh; height: 44vh; }
  .mode__panel { bottom: 64px; padding: 0; }
  .menu__list { grid-template-columns: .85fr 1fr 1.25fr 1fr; gap: 2px; }
  .menu__list a { padding: 0 3px; }
  .menu__art { height: 42px; }
  .menu__kunai { display: none; }
}
@media (pointer: coarse) { .hints span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader__image, .mode__title { transform: none; }
  *, *::before, *::after { transition-duration: 0.01s !important; animation-duration: 0.01s !important; }
  .screen .reveal { opacity: 1; transform: none; filter: none; }
  @view-transition { navigation: none; }
}


@media (max-width: 640px) {
  .site-head { flex-wrap: wrap; gap: 12px 24px; padding: 18px var(--gutter); }
  .site-head nav ul { flex-wrap: wrap; gap: 8px 18px; }
  .site-head nav a { font-size: 0.75rem; letter-spacing: 0.1em; }
}