:root {
  --night: #131a2d;
  --night-2: #182037;
  --wood: #3a2a20;
  --wood-dark: #1c130e;
  --wood-light: #56402f;
  --panel: #2a1f19;
  --text: #f3e6cf;
  --muted: #b9a68b;
  --fire: #f59e42;
  --fire-light: #ffd27a;
  --ember: #e0603a;
  --moon: #e8ecf5;
  --pixel: "Pixelify Sans", monospace;
  --pixel-text: "Jersey 15", "Pixelify Sans", monospace; /* a plainer pixel font, for lines meant to be read */
  --sans: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #0d1220; } /* the footer's colour, so iOS's bounce past the bottom and the strip under its toolbar look like more footer */
body {
  background: var(--night);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
  /* main grows to fill a short page, so the footer always sits at the bottom of the window */
  min-height: 100vh; min-height: 100dvh; /* dvh: iOS Safari's 100vh is taller than the window while its toolbars show */
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }
.contact { flex: 1 0 auto; } /* the last section takes any spare height, so its background meets the footer */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Shared pieces ---------- */
/* Dark wooden board, lit warm from below */
.frame {
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(0, 0, 0, 0.12) 22px 24px), var(--panel);
  border: 4px solid var(--wood-dark);
  box-shadow: inset 0 0 0 3px var(--wood-light), inset 0 -40px 60px -30px rgba(245, 158, 66, 0.12), 0 6px 0 rgba(0, 0, 0, 0.35);
}

.btn {
  display: inline-block;
  font-family: var(--pixel);
  font-size: 1.05rem;
  padding: 0.6rem 1.3rem 0.75rem;
  background: var(--fire);
  color: var(--wood-dark);
  border: 3px solid #a85a1e;
  box-shadow: inset 0 -4px 0 #c46f26, inset 0 3px 0 var(--fire-light), 0 4px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 -4px 0 #c46f26, inset 0 3px 0 var(--fire-light), 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 24px rgba(245, 158, 66, 0.45); }
.btn:active { transform: translateY(2px); }
.btn-ghost {
  background: var(--wood); color: var(--text); border-color: var(--wood-dark);
  box-shadow: inset 0 -4px 0 var(--wood-dark), inset 0 3px 0 var(--wood-light), 0 4px 0 rgba(0, 0, 0, 0.3);
}
.btn-ghost:hover { box-shadow: inset 0 -4px 0 var(--wood-dark), inset 0 3px 0 var(--wood-light), 0 4px 0 rgba(0, 0, 0, 0.3); color: var(--fire-light); }
.btn-small { font-size: 0.9rem; padding: 0.35rem 0.9rem 0.5rem; }
.btn-big { font-size: clamp(1rem, 3vw, 1.4rem); padding: 0.9rem 1.8rem 1.05rem; }

/* Firelight on the UI: the fire's glow stays at its spot on screen, and panels light up where they pass over it.
   script.js sets --flicker (how bright the fire burns) on :root, and on each panel --fx/--fy (where the fire is, relative to it) */
:root { --flicker: 1; }
.frame, .sign, .dialog { position: relative; --fx: -999px; --fy: -999px; }
.frame::after, .sign::after, .dialog::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 320px at var(--fx) var(--fy),
    rgba(255, 150, 70, calc(0.28 * var(--flicker))), rgba(255, 120, 60, calc(0.1 * var(--flicker))) 50%, transparent);
  mix-blend-mode: screen;
}

/* Wooden signboard heading */
.sign {
  display: inline-block;
  font-family: var(--pixel); font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.2;
  color: var(--fire-light);
  padding: 0.35rem 1.3rem 0.5rem;
  background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(0, 0, 0, 0.15) 14px 16px), var(--wood);
  border: 4px solid var(--wood-dark);
  box-shadow: inset 0 3px 0 var(--wood-light), 0 5px 0 rgba(0, 0, 0, 0.3);
  text-shadow: 2px 2px 0 var(--wood-dark);
}
/* Each section is a chapter of the story; the contact section closes it */
main { counter-reset: chapter; }
.section .sign::before {
  counter-increment: chapter;
  content: "Chapter " counter(chapter, upper-roman);
  display: block;
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); text-shadow: none;
}
.contact .sign::before { counter-increment: none; content: "Epilogue"; }

/* ---------- Nav: a menu down the left side; the page and the scene sit to its right ---------- */
:root { --side: calc(13rem + env(safe-area-inset-left)); } /* wider by the notch in iPhone landscape, which the page now runs under (viewport-fit=cover) */
body { padding-left: var(--side); }
.nav {
  position: fixed;
  inset: 0 auto 0 0; width: var(--side);
  z-index: 50;
  display: flex; flex-direction: column; gap: 2.2rem;
  padding: 1.6rem 1.3rem 1.6rem calc(1.3rem + env(safe-area-inset-left));
  background: rgba(13, 18, 32, 0.92);
  backdrop-filter: blur(6px);
  border-right: 4px solid #0a0e1a;
}
.logo { font-family: var(--pixel); font-weight: 700; font-size: 1.3rem; }
.logo span { color: var(--fire); }
.nav nav { order: 1; }
.nav-links { display: flex; flex-direction: column; gap: 0.9rem; list-style: none; align-items: flex-start; }
.nav-links a:not(.btn) { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--pixel-text); color: var(--muted); font-size: 1.4rem; letter-spacing: 0.03em; }
.nav-links a:not(.btn):hover, .nav-links a.current { color: var(--fire-light); }
/* the chapter number, as in the section signs */
.nav-num { min-width: 1.7rem; font-size: 1rem; letter-spacing: 0.08em; color: var(--wood-light); }
.nav-links a.current .nav-num { color: var(--fire); }
.nav-links .btn { margin-top: 0.8rem; font-family: var(--pixel-text); font-size: 1.25rem; letter-spacing: 0.03em; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); font-size: 1.6rem; cursor: pointer; }
/* at the bottom of the menu (on phones: pushed right, next to the menu button) */
.sound-toggle { order: 2; display: flex; margin-top: auto; align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer; color: var(--muted); }
.sound-toggle svg { fill: currentColor; }
.sound-toggle[aria-pressed="true"] { color: var(--fire); }
.sound-toggle:hover { color: var(--fire-light); }
.sound-toggle[aria-pressed="true"] .sound-mute, .sound-toggle[aria-pressed="false"] .sound-waves { display: none; }

/* ---------- Hero: the opening of the tale, over the night campfire scene ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 3rem clamp(1rem, 5vw, 4rem) 1.25rem;
  overflow: hidden;
  background: transparent;
}
#scene {
  position: fixed; inset: 0 0 0 var(--side); width: calc(100% - var(--side)); height: 100%; /* stays put while the page scrolls over it, right of the menu */
  image-rendering: pixelated;
  z-index: 0;
}
main, .footer { position: relative; z-index: 1; }
main { z-index: 2; } /* above the footer, so the story box floating inside main isn't hidden under it */

@keyframes pop-in { from { transform: translateY(20px); opacity: 0; } }

/* Storybook title, like the first page of a book */
.tale-title {
  position: relative; z-index: 1;
  text-align: center;
  animation: pop-in 0.8s ease-out both;
}
.tale-kicker {
  font-family: var(--pixel); font-size: clamp(0.9rem, 2vw, 1.05rem);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.tale-kicker::before, .tale-kicker::after { content: "~ ✦ ~"; margin: 0 0.8em; color: var(--fire); letter-spacing: 0; }
.tale-title h1 {
  font-family: var(--pixel); font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.1;
  color: var(--fire-light); text-shadow: 3px 3px 0 var(--wood-dark), 0 0 30px rgba(245, 158, 66, 0.35);
  margin: 0.4rem 0 0.5rem;
}
.tale-sub { font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 700; color: var(--text); }

/* ---------- Story: narration typed out line by line ---------- */
.story-box {
  position: relative; z-index: 1; --fx: -999px; --fy: -999px;
  width: 100%; max-width: 860px;
  background: rgba(12, 16, 30, 0.9);
  border: 4px solid var(--text);
  box-shadow: 0 0 0 4px var(--wood-dark), 0 10px 0 rgba(0, 0, 0, 0.3);
  padding: 1.1rem clamp(1rem, 3vw, 1.8rem) 0.8rem;
  animation: pop-in 0.6s 0.3s ease-out both;
}
.story-box::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 320px at var(--fx) var(--fy),
    rgba(255, 150, 70, calc(0.2 * var(--flicker))), transparent);
  mix-blend-mode: screen;
}
.story-text {
  min-height: 3.2em; /* two lines, so the box doesn't jump while a line is typed */
  /* the story is read line by line, so it's set in the plainer pixel font */
  font-family: var(--pixel-text);
  font-size: clamp(1.3rem, 2.6vw, 1.65rem); line-height: 1.45; letter-spacing: 0.02em;
}
.story-text em { color: var(--fire-light); font-style: normal; }

/* script.js adds .telling while the story plays: back and next show */
.story-foot { display: none; }
.story-box.telling { cursor: pointer; }
/* .floating until the closing line: the box stays at the bottom of the screen
   (right of the side menu) as the page scrolls to each line's place, and the page gets room to scroll past it */
.story-box.floating {
  position: fixed; z-index: 40;
  left: calc(var(--side) + 1rem); right: 1rem; bottom: calc(1.25rem + env(safe-area-inset-bottom)); /* above iOS's toolbar */
  width: auto; margin-inline: auto;
}
/* the room goes at the end of the contact section, so its background runs down to the footer */
body:has(.story-box.floating) .contact { padding-bottom: calc(5.5rem + var(--story-h, 0px) + 2.5rem); }
.story-box.telling .story-foot, .story-box.ended .story-foot { display: flex; }
/* the line about working together: the box settles into the page at the end of the contact section */
.contact > .story-box { margin: 3rem auto 0; text-align: left; }

.story-foot { justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.2rem; }
.story-step { margin-right: auto; font-family: var(--pixel-text); font-size: 1.1rem; letter-spacing: 0.05em; color: var(--muted); }
/* back and next: wooden buttons, next lit up in firelight */
.story-back, .story-next {
  font-family: var(--pixel-text); font-size: 1.25rem; letter-spacing: 0.03em;
  background: var(--wood); color: var(--text);
  border: 3px solid var(--wood-dark);
  box-shadow: inset 0 3px 0 var(--wood-light), 0 3px 0 rgba(0, 0, 0, 0.35);
  padding: 0.2rem 0.9rem 0.3rem;
  cursor: pointer;
}
.story-next { background: var(--fire); color: var(--wood-dark); box-shadow: inset 0 3px 0 var(--fire-light), 0 3px 0 rgba(0, 0, 0, 0.35); }
.story-back:hover { color: var(--fire-light); }
/* in the hero while the story is told further down: a story panel of its own, leading back to it */
.story-recall { cursor: pointer; }
.story-recall[hidden] { display: none; }
.story-recall .story-foot { display: flex; }
.story-recall .story-next { animation: nudge 0.8s steps(2) infinite; }
.story-recall:hover .story-next, .story-recall:focus-visible .story-next { background: var(--fire-light); }
.story-next:hover { background: var(--fire-light); }
.story-back:active, .story-next:active { transform: translateY(2px); }
.story-box.done .story-next { animation: nudge 0.8s steps(2) infinite; }
/* nothing before the first line, nothing after the last: greyed out */
.story-back:disabled, .story-next:disabled {
  background: #3a3d4a; color: var(--muted);
  border-color: #23252e; box-shadow: inset 0 3px 0 #4a4e5c;
  opacity: 0.6; cursor: default;
  animation: none; transform: none;
}
@keyframes nudge { 50% { transform: translateX(3px); } }
/* minimize: only on the floating box; it folds into a small tab in the corner, which opens it again */
.story-min { display: none; }
.story-box.floating .story-min {
  display: block; position: absolute; top: 0.5rem; right: 0.5rem;
  width: 2rem; height: 2rem; padding: 0 0 0.3rem;
  font-family: var(--pixel-text); font-size: 1.25rem; line-height: 1;
  background: var(--wood); color: var(--text);
  border: 3px solid var(--wood-dark);
  box-shadow: inset 0 3px 0 var(--wood-light), 0 3px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.story-box.floating .story-min:hover { color: var(--fire-light); }
.story-box.floating .story-min:active { transform: translateY(2px); }
.story-box.floating .story-text { padding-right: 2.2rem; }
.story-box.floating.minimized {
  left: auto; width: auto;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.5rem 0.6rem 0.5rem 1rem;
}
.story-box.floating.minimized :is(.story-text, .story-back, .story-next) { display: none; }
.story-box.floating.minimized .story-foot { margin: 0; }
.story-box.floating.minimized .story-min { position: static; }
.story-box.floating.minimized:hover .story-min { color: var(--fire-light); }
.story-box.floating.minimized.recall-seen { visibility: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* ---------- Sections (faint pixel stars in the background) ---------- */
.section {
  padding: 5.5rem clamp(1rem, 6vw, 6rem);
}
.section:nth-of-type(odd) { background-color: rgba(24, 32, 55, 0.35); }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end; /* the filters line up with the intro under the sign */
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}

/* a line under the sign saying what the chapter holds */
.section-intro { max-width: 60ch; margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Projects ---------- */
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter {
  font-family: var(--pixel); font-size: 0.95rem;
  padding: 0.3rem 0.9rem 0.45rem;
  background: var(--wood); color: var(--muted);
  border: 3px solid var(--wood-dark);
  box-shadow: inset 0 3px 0 var(--wood-light);
  cursor: pointer;
}
.filter:hover { color: var(--text); }
.filter.active { background: var(--fire); color: var(--wood-dark); box-shadow: inset 0 -3px 0 #c46f26; }

/* one wide panel per project: media on one side, details on the other, alternating */
.games-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } /* minmax: a long thumbnail strip scrolls instead of widening the list */
.project {
  scroll-margin-top: 1.5rem; /* room above a card the story scrolls to */
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem;
  padding: 1.2rem;
}
/* media on the right every other card, in a column as wide as on the left */
.project:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.project:nth-child(even) .project-media { order: 1; }
.project.hidden { display: none; }
/* the engine's logo, faint behind the text in the corner of the card; isolation keeps it above the card's own background */
.project { isolation: isolate; }
.project::before {
  content: ""; position: absolute; z-index: -1;
  right: 1.2rem; bottom: 1.2rem; width: min(14rem, 40%); aspect-ratio: 1;
  background: var(--text); opacity: 0.06;
  -webkit-mask: var(--engine-icon) center / contain no-repeat; mask: var(--engine-icon) center / contain no-repeat;
  pointer-events: none;
}
.project[data-engine="unity"] { --engine-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12.9288 4.2939 3.7997 2.1929c.1366.077.1415.2905 0 .3675l-4.515 2.6076a.4192.4192 0 0 1-.4246 0L7.274 6.8543c-.139-.0745-.1415-.293 0-.3675l3.7972-2.193V0L1.3758 5.5977V16.793l3.7177-2.1456v-4.3858c-.0025-.1565.1813-.2682.318-.1838l4.5148 2.6076a.4252.4252 0 0 1 .2136.3676v5.2127c.0025.1565-.1813.2682-.3179.1838l-3.7996-2.1929-3.7178 2.1457L12 24l9.6954-5.5977-3.7178-2.1457-3.7996 2.1929c-.1341.082-.3229-.0248-.3179-.1838V13.053c0-.1565.087-.2956.2136-.3676l4.5149-2.6076c.134-.082.3228.0224.3179.1838v4.3858l3.7177 2.1456V5.5977L12.9288 0Z'/%3E%3C/svg%3E"); }
.project[data-engine="horizon"] { --engine-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z'/%3E%3C/svg%3E"); }
.project:nth-child(even)::before { right: auto; left: 1.2rem; } /* the text is on the left there */
.project-media { align-self: center; } /* vertically centred beside a taller text column */
/* never taller than most of the screen */
.project-view {
  max-height: 70vh;
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: #0a0e1a;
  border: 4px solid var(--wood-dark);
  overflow: hidden;
}
/* media fills the whole view, a little above centre: more is cut off at the bottom than at the top */
.project-view img, .project-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* an image can be framed on its own: zoomed in towards its focus point (set from the games list) */
.project-view img, .project-thumb img {
  object-position: var(--focus, 50% 30%);
  transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 30%);
}
.project-zoom { position: absolute; inset: 0; cursor: zoom-in; }
/* phone-format media: the view takes the tall shape of the video, as high as the other cards' views,
   and its column shrinks to fit it, leaving the rest of the card to the text.
   The other cards' views are 9/16 of a media column that takes 5/9 of the card (1.25fr of 2.25fr), less the gap. */
.project.portrait { container-type: inline-size; grid-template-columns: auto minmax(0, 1fr); }
.project.portrait:nth-child(even) { grid-template-columns: minmax(0, 1fr) auto; }
.project.portrait .project-media { display: flex; gap: 0.6rem; padding: 0 2rem; } /* a little room on both sides of the video */
.project.portrait .project-media > * { --h: min((100cqw - 1.6rem) * 5 / 16, 70vh); }
.project.portrait .project-view { height: var(--h); aspect-ratio: 9 / 16; max-height: none; flex: none; }
/* any thumbnails sit beside it, two to a column */
.project.portrait .project-thumbs {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, calc((var(--h) - 0.5rem) / 2));
  margin: 0; padding: 0; overflow: visible;
}
.project.portrait .project-thumb { width: auto; height: 100%; aspect-ratio: 9 / 16; }
.project-icon { font-size: 4rem; color: rgba(255, 255, 255, 0.9); text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25); }
.project-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; overflow-x: auto; padding-bottom: 0.2rem; }
.project-thumb {
  position: relative; flex: none;
  width: 5.5rem; aspect-ratio: 16 / 9; padding: 0;
  background: #0a0e1a;
  border: 3px solid var(--wood-dark);
  opacity: 0.6; cursor: pointer;
  overflow: hidden; /* a zoomed image stays inside */
  transition: opacity 0.15s, border-color 0.15s;
}
.project-thumb:hover { opacity: 0.9; }
.project-thumb.active { opacity: 1; border-color: var(--fire); }
.project-thumb img, .project-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.play-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1rem; color: var(--fire-light); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.project-body { padding: 0.3rem 0.4rem; }
.project-role { font-family: var(--pixel); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fire); }
.project-body h3 { font-family: var(--pixel); font-weight: 600; font-size: 1.7rem; line-height: 1.2; margin: 0.2rem 0 0.2rem; }
.project-body > p { color: var(--muted); }
.project-body h4 { font-family: var(--pixel); font-weight: 600; font-size: 1rem; color: var(--fire-light); margin: 1.1rem 0 0.4rem; }
.project-highlights { padding-left: 1.2rem; color: var(--muted); font-size: 0.95rem; }
.project-highlights li + li { margin-top: 0.3rem; }
.project-highlights li::marker { content: "▸ "; color: var(--fire); }
.game-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.9rem; list-style: none; }
.game-tags li { font-size: 0.8rem; font-weight: 700; padding: 0 0.6rem; background: var(--wood-dark); color: var(--muted); border: 2px solid var(--wood-light); }
.game-links { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.1rem; }
.game-links a { font-family: var(--pixel); color: var(--fire); }
.game-links a:hover { color: var(--fire-light); }
@media (max-width: 860px) {
  .project, .project:nth-child(even), .project.portrait, .project.portrait:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding: 0.9rem; }
  /* stacked, the tall view gets most of the card's width to grow into, centred */
  .project.portrait .project-media { justify-content: center; }
  .project.portrait .project-media > * { --h: min(100cqw * 0.9, 70vh); }
  .project:nth-child(even) .project-media { order: 0; }
  .project:nth-child(even)::before { left: auto; right: 0.9rem; }
}

/* ---------- Skills ---------- */
/* a narrow column for the short cards (programming, spoken languages) beside a wide one for the long ones (tools, what I build),
   with the same split in both rows so the card edges line up; one column once the narrow one can't hold three tiles */
.skills-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.6rem; }
@media (max-width: 1340px) {
  .skills-grid { grid-template-columns: minmax(0, 1fr); }
  .skills-grid .tech { grid-template-columns: repeat(auto-fill, 6rem); } /* tiles keep their size instead of stretching across the whole card */
}
.skill-card { padding: 1.5rem; }
.skill-card h3 { font-family: var(--pixel); font-weight: 600; font-size: 1.2rem; margin-bottom: 1rem; color: var(--fire-light); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li { font-size: 0.9rem; font-weight: 600; padding: 0.1rem 0.7rem; background: var(--wood-dark); border: 2px solid var(--wood-light); }
/* technologies: an icon tile with its name under it */
.tech { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: 0.5rem; } /* auto-fit: the tiles share out the whole card */
.tech li {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  padding: 0.8rem 0.3rem 0.5rem;
  background: var(--wood-dark); border: 2px solid var(--wood-light);
  font-size: 0.8rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--muted);
}
/* the icon is only a shape; it is painted in the page's colours */
.tech-icon { width: 2.4rem; height: 2.4rem; fill: var(--text); }

/* ---------- About: a wooden board like the project and skill cards, with the speaker's name tab on top ---------- */
.dialog { padding: 2.2rem 1.5rem 1.5rem; margin-top: 1rem; }
.dialog-name {
  position: absolute; top: -1.4rem; left: 1.5rem; z-index: 1;
  font-family: var(--pixel); font-weight: 700; font-size: 1.1rem;
  background: var(--fire); color: var(--wood-dark);
  border: 4px solid var(--wood-dark);
  box-shadow: inset 0 -3px 0 #c46f26, inset 0 3px 0 var(--fire-light);
  padding: 0 0.8rem 0.15rem;
}
.dialog p { max-width: 75ch; margin-bottom: 1rem; font-size: 1.05rem; }
.dialog em { color: var(--fire-light); font-style: normal; font-weight: 700; }
.dialog .btn { margin-top: 0.4rem; }
/* the key facts as tiles like the skill cards' ones: under the text, or beside it once the board is wide enough to hold both */
.facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.facts li {
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  padding: 0.8rem 1rem;
  background: var(--wood-dark); border: 2px solid var(--wood-light);
  transition: border-color 0.15s;
}
.facts li:hover { border-color: var(--fire); }
.facts strong { font-family: var(--pixel-text); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: 0.03em; color: var(--fire); }
.facts span { font-family: var(--pixel-text); font-size: 1.15rem; line-height: 1.15; letter-spacing: 0.03em; color: var(--muted); }
/* the portrait, framed like the project views; it can't be selected, dragged or long-pressed,
   and a clear layer over it takes the right-click and "Inspect" instead of the image */
.about-photo {
  position: relative; width: 12rem; aspect-ratio: 1; margin: 0 auto 1.2rem;
  border: 4px solid var(--wood-dark); box-shadow: 0 0 0 2px var(--wood-light);
  background: #0a0e1a; overflow: hidden;
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
  pointer-events: none;
}
.about-photo::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 1200px) {
  .dialog { display: grid; grid-template-columns: 14rem minmax(0, 75ch) minmax(18rem, 1fr); gap: 2.5rem; align-items: center; padding: 2.6rem 2.2rem 1.6rem; }
  .about-photo { width: 100%; margin: 0 0 1rem; align-self: center; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1rem; }
}

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact .sign { margin-bottom: 1.2rem; }
.contact > p { color: var(--muted); font-size: 1.1rem; margin-bottom: 2rem; }
.email-row { display: flex; justify-content: center; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.copy-email { display: inline-flex; padding: 0.6rem 0.75rem 0.75rem; }
.copy-email svg { fill: currentColor; }
.copy-email .copied-icon, .copy-email.copied .copy-icon { display: none; }
.copy-email.copied .copied-icon { display: inline; }
.copy-email.copied { color: var(--fire-light); }
.socials { list-style: none; display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.2rem; flex-wrap: wrap; }

/* ---------- Footer: dark ground ---------- */
.footer {
  text-align: center; padding: 1.6rem 1rem calc(1.6rem + env(safe-area-inset-bottom)); /* clears the iPhone home bar */
  background: #0d1220; color: var(--muted);
  /* a shadow a screen tall carries the footer's colour below it, over the fixed scene, so iOS Safari's bounce
     and the area behind its floating toolbar show more footer, not trees (a shadow adds no scroll height) */
  box-shadow: 0 100vh 0 100vh #0d1220;
  font-family: var(--pixel);
  border-top: 4px solid var(--wood-dark);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  /* the side menu becomes a bar at the top, its links folding out under a menu button */
  :root { --side: 0px; }
  .nav {
    inset: 0 0 auto 0; width: auto;
    flex-direction: row; align-items: center; justify-content: space-between; gap: 0;
    padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.7rem;
    border-right: 0; border-bottom: 4px solid #0a0e1a;
  }
  .sound-toggle { order: 0; margin: 0 1.2rem 0 auto; align-self: center; }
  .hero { padding-top: 6rem; }
  .project { scroll-margin-top: 5rem; } /* below the top bar */
  .nav-links .btn { margin-top: 0; }
  .nav-toggle { display: block; }
  .nav nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--night-2); border-bottom: 4px solid #0a0e1a;
    display: none;
  }
  .nav.open nav { display: block; }
  .nav-links { flex-direction: column; padding: 1.2rem; gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}