/* Aurelia Heritage Protection's own site: white, Aurelia's teal and its gold, glossy photographs from its welcome
   film, lower thirds as the film puts them, and the bugs' notes scratched on it in brown. In dark mode it's the
   building at night through the headset: dark glass and the HUD's teal. The game's band and page are the game's
   own: near black and gilt. Lettering is the game's: Cinzel for titles, Source Sans 3 for reading, Caveat for the
   bugs' hand. */
@font-face { font-family: Cinzel; src: url(/fonts/Cinzel.ttf) format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/fonts/SourceSans3.ttf) format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: Caveat; src: url(/fonts/Caveat.ttf) format("truetype"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #fbfaf7;
  --tint: #eef4f2;
  --card: #ffffff;
  --ink: #1b2628;
  --ink-soft: #536466;
  --rule: #d5e1de;
  --teal: #17626b;
  --teal-bright: #1f7f89;
  --on-teal: #ffffff;
  --gold: #b0843a;
  --scratch: #5a3a1c;
  --shadow: 0 18px 40px rgba(20, 50, 52, 0.14);
  --photo-edge: none;
  /* The game's own: near black and gilt. */
  --game-bg: #110f0d;
  --game-ink: #efe4c8;
  --gilt: #e6c77a;
  --display: Cinzel, "Trajan Pro", Georgia, serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --hand: Caveat, "Comic Sans MS", cursive;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1011;
    --tint: #0f1718;
    --card: #101a1b;
    --ink: #dcefec;
    --ink-soft: #93b3ae;
    --rule: rgba(140, 224, 204, 0.22);
    --teal: #8ce0cc;
    --teal-bright: #b4f0e1;
    --on-teal: #071012;
    --gold: #e0bd6e;
    --scratch: #d9a46a;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    --photo-edge: inset 0 0 0 1px rgba(140, 224, 204, 0.28);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.075rem/1.6 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 0.18em; }
a:hover { color: var(--teal-bright); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: 0.02em; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.shell { width: min(1180px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); }
.centre { text-align: center; }
.small { font-size: 0.92rem; }
.dim { color: var(--ink-soft); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--card); padding: 8px 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* The game's strip across the top of every page. */
.game-strip { background: var(--game-bg); color: var(--game-ink); font-size: 0.92rem; border-bottom: 1px solid rgba(230, 199, 122, 0.35); }
.strip-row a { display: flex; align-items: center; gap: 12px; padding: 6px 0; color: inherit; text-decoration: none; }
.strip-row a:hover b { color: var(--gilt); }
.strip-logo { width: 74px; flex: none; }
.strip-note { color: #b9ab8c; }

/* The header: Aurelia's emblem and name, the menu, the Music switch. */
.site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.head-row { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--teal); margin-right: auto; }
.brand .emblem { width: 40px; }
.brand b { display: block; font: 600 1.45rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.brand small { display: block; font: 600 0.62rem/1.4 var(--body); letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); }
.site-nav { display: flex; gap: 22px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.98rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--teal); border-color: var(--gold); }
.menu-toggle { display: none; }
.switch { font: 600 0.85rem var(--body); color: var(--teal); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.switch[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }
.switch.waiting b { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* Buttons and chips. */
.button { display: inline-flex; align-items: center; gap: 8px; font: 600 1rem var(--body); letter-spacing: 0.02em; padding: 12px 22px; border-radius: 999px; background: var(--teal); color: var(--on-teal); border: 2px solid var(--teal); text-decoration: none; cursor: pointer; }
.button:hover { background: var(--teal-bright); border-color: var(--teal-bright); color: var(--on-teal); }
.button.ghost { background: transparent; color: var(--teal); }
.button.ghost:hover { background: var(--teal); color: var(--on-teal); }
.button.soon { background: transparent; color: var(--ink-soft); border-color: var(--rule); cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.chips { list-style: none; padding: 0; margin: 1.2em 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.chips a { display: block; padding: 5px 14px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.92rem; color: inherit; }
.chips .soon a { opacity: 0.75; }
.chips .note { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--gilt); padding-left: 4px; }
.kicker { font: 700 0.78rem/1.3 var(--body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8em; }
.lede { font-size: 1.22rem; color: var(--ink-soft); max-width: 46em; }
.centre .lede { margin-inline: auto; }
.fine { font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.01em; max-width: 60em; }
.centre .fine { margin-inline: auto; }

/* The hero: the first picture of the film, the hills at dawn, with the line over it. */
.hero { position: relative; min-height: min(86vh, 760px); display: grid; align-items: end; color: #fff; overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 30, 32, 0.72), rgba(10, 30, 32, 0.25) 60%, transparent), linear-gradient(0deg, rgba(10, 30, 32, 0.55), transparent 50%); }
.hero-copy { position: relative; z-index: 1; padding-block: 120px 72px; max-width: 1180px; }
.hero-copy > * { max-width: 620px; }
.hero h1 { color: #fff; }
.hero .kicker { color: #f0d08a; }
.hero-line { font-size: 1.3rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.hero .button.ghost { color: #fff; border-color: #fff; }
.hero .button.ghost:hover { background: #fff; color: var(--teal); }
@media (prefers-color-scheme: dark) { .hero .button:not(.ghost) { background: #8ce0cc; border-color: #8ce0cc; } }

/* Bands and sections. */
.band { padding-block: clamp(56px, 9vw, 104px); }
.band.tint { background: var(--tint); }
.grid { display: grid; gap: 24px; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { .card { box-shadow: var(--photo-edge), var(--shadow); } }
.card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-body { padding: 18px 22px 8px; }
.card-body h3 { color: var(--teal); }
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.flip .photo { order: 2; }
.photo { position: relative; margin: 0; }
.photo img { border-radius: 14px; box-shadow: var(--photo-edge), var(--shadow); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* A lower third, as the film draws one: a teal bar with a gold rule. */
.third { position: absolute; left: 0; bottom: 22px; background: rgba(15, 82, 90, 0.92); color: #fff; padding: 8px 18px 8px 16px; border-left: 4px solid #d9b25e; border-radius: 0 6px 6px 0; }
.third b { display: block; font: 600 0.95rem var(--display); letter-spacing: 0.12em; }
.third small { display: block; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #e6cf98; }
.badge { position: absolute; right: 18px; top: 18px; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #f6dc96, #c49440 70%); color: #3b2808; font: 700 0.72rem/1.25 var(--body); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); transform: rotate(-8deg); }
.badge::first-line { font: 700 1.6rem/1 var(--display); }

/* The bugs' notes, scratched on Aurelia's page: their Italian in brown, the English small under it. */
.scratch { font: 700 2rem/1 var(--hand); color: var(--scratch); transform: rotate(-3deg); margin: 1.2em 0 0.4em; display: inline-block; }
.scratch small { display: block; font: 600 1.05rem var(--hand); opacity: 0.8; margin-top: 2px; }
.scratch.big { font-size: 2.6rem; display: block; width: fit-content; margin: 1.4em auto 0; }

/* The drums, on white as the film shows them. */
.drums { list-style: none; padding: 0; margin: 2em 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.drum a { display: block; text-decoration: none; color: inherit; }
.drum img { height: 230px; width: auto; margin: 0 auto 14px; filter: drop-shadow(0 14px 18px rgba(20, 40, 40, 0.22)); transition: transform 0.25s; }
.drum a:hover img { transform: translateY(-6px); }
.drum b { display: block; font: 600 1.1rem var(--display); letter-spacing: 0.06em; color: var(--teal); }
.drum span { color: var(--ink-soft); font-size: 0.95rem; }

/* The current project's band: the cloister across the page. */
.project .wide { margin: 0 0 40px; }
.project .wide img { width: 100%; max-height: 420px; object-fit: cover; }
.facts { margin: 1.2em 0; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: minmax(110px, 0.32fr) 1fr; gap: 16px; padding: 9px 0; border-top: 1px solid var(--rule); }
.facts > div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; color: var(--teal); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 2px; }
.facts dd { margin: 0; }

/* The game's band: the game's own colours. */
.game-band { background: radial-gradient(ellipse at 50% 0%, #2a2118, var(--game-bg) 70%); color: var(--game-ink); }
.game-band h2 { margin: 0 auto 1em; max-width: 640px; }
.game-band .lede { color: #e8dcbc; font-size: 1.3rem; }
.game-band p { max-width: 42em; margin-inline: auto; }
.game-band .button { background: var(--gilt); border-color: var(--gilt); color: #1d150a; }
.game-band .button:hover { background: #f4dc9c; border-color: #f4dc9c; }

/* Inner pages. */
.page { padding-block: 48px 88px; }
.page-head { margin-bottom: 40px; }
.page-hero img { width: 100%; max-height: 52vh; object-fit: cover; }
.section { margin-top: 64px; }
.section.two, .two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 24px 28px; }
.panel h2 { font-size: 1.35rem; color: var(--teal); }
.panel h2:not(:first-child) { margin-top: 1.4em; }
.notice { margin-top: 48px; text-align: center; font-weight: 600; }
.job-card { border-top: 4px solid var(--teal); }
.radio { list-style: none; padding: 0; margin: 0; }
.radio li { padding: 6px 0 6px 14px; border-left: 3px solid var(--gold); margin-bottom: 8px; font-style: italic; }

.product { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: 40px 0; border-top: 1px solid var(--rule); scroll-margin-top: 90px; }
.product figure { margin: 0; }
.product img { height: 340px; width: auto; margin: 0 auto; filter: drop-shadow(0 18px 22px rgba(20, 40, 40, 0.25)); }
.product h2 { color: var(--teal); }
.product .claim { font: 600 1.2rem var(--display); letter-spacing: 0.04em; color: var(--gold); }

.team { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.team li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: end; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 24px 0 0; overflow: hidden; }
.team img { align-self: end; }
.team h3 { color: var(--teal); margin-bottom: 0.2em; }
.team .role { font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.team blockquote { margin: 0 0 20px; font-style: italic; color: var(--ink-soft); }
.rooms { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.rooms figure { margin: 0; }
.rooms img { border-radius: 10px; box-shadow: var(--photo-edge), var(--shadow); aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.rooms figcaption { margin-top: 10px; color: var(--ink-soft); }
.rooms figcaption b { color: var(--ink); display: block; }

.drills { list-style: none; counter-reset: drill; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.drills li { counter-increment: drill; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; }
.drills li::before { content: counter(drill, decimal-leading-zero); display: block; font: 600 1.6rem var(--display); color: var(--gold); }
.drills b { display: block; color: var(--teal); }
.drills span { color: var(--ink-soft); font-style: italic; }

/* The game's page: the game's own colours, whatever the mode. */
.game-page { background: var(--game-bg); color: var(--game-ink); --ink: var(--game-ink); --ink-soft: #b9ab8c; --rule: rgba(230, 199, 122, 0.25); --card: #1b1713; --teal: var(--gilt); --teal-bright: #f4dc9c; --on-teal: #1d150a; --gold: var(--gilt); }
.game-page h2, .game-page h3 { color: var(--gilt); }
.game-logo { width: min(640px, 100%); margin: 0 auto 1em; }
.shot-big { margin: 0; }
.shot-big img, .shots img { border-radius: 8px; border: 1px solid rgba(230, 199, 122, 0.25); }
.stores { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.shots a { display: block; }

.faq > div { padding: 14px 0; border-top: 1px solid var(--rule); }
.faq dt { font-weight: 700; color: var(--teal); }
.faq dd { margin: 4px 0 0; }
.about { text-align: center; }
.about img { width: min(480px, 100%); margin: 0 auto 10px; }
.about .about-tfinn { width: 120px; margin-top: 28px; }
.credits { padding: 0; list-style: none; margin-top: 40px; }
.credits li { padding: 10px 0; border-top: 1px solid var(--rule); }
.prose h2 { font-size: 1.35rem; margin-top: 1.6em; color: var(--teal); }

/* The footer. */
.site-foot { background: var(--game-bg); color: #cdbf9f; padding-block: 40px; font-size: 0.95rem; border-top: 1px solid rgba(230, 199, 122, 0.25); }
.site-foot a { color: var(--gilt); }
.foot-row { display: flex; gap: 32px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.studio { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.studio img { width: 64px; }
.studio strong { display: block; color: var(--game-ink); }
.studio small { color: #b9ab8c; }
.site-foot nav { display: flex; gap: 18px; margin-bottom: 6px; }
.site-foot .dim { color: #9a8e74; }

/* Aurelia's welcome film, played over the page. */
.film { position: fixed; inset: 0; z-index: 60; background: #000; display: grid; place-items: center; }
.film[hidden] { display: none; }
.film-stage { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; overflow: hidden; background: #fff; color: #fff; }
.film-stage .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s; }
.film-stage .pic.on { opacity: 1; }
.film-caption { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: min(86%, 900px); text-align: center; font: 600 clamp(0.85rem, 2vw, 1.25rem)/1.35 var(--body); background: rgba(0, 0, 0, 0.55); padding: 6px 14px; border-radius: 6px; }
.film-caption:empty { display: none; }
.film-stage .third { bottom: 18%; opacity: 0; transform: translateX(-20px); transition: 0.5s; }
.film-stage .third.on { opacity: 1; transform: none; }
.film-stage .badge { opacity: 0; transform: scale(0.4) rotate(-8deg); transition: 0.4s cubic-bezier(.3, 1.6, .5, 1); top: 8%; right: 6%; }
.film-stage .badge.on { opacity: 1; transform: scale(1) rotate(-8deg); }
.film-drums { position: absolute; inset: 6% 6% 24%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; align-items: end; }
.film-drums div { text-align: center; color: #17626b; opacity: 0; transform: translateX(60px); transition: 0.6s; }
.film-drums div.on { opacity: 1; transform: none; }
.film-drums img { height: min(38vh, 22vw); width: auto; margin: 0 auto 8px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.2)); }
.film-drums b { display: block; font: 600 clamp(0.7rem, 1.6vw, 1.1rem) var(--display); }
.film-drums span { font-size: clamp(0.6rem, 1.2vw, 0.9rem); color: #536466; }
.film-small { position: absolute; left: 6%; right: 6%; bottom: 19%; font-size: clamp(5px, 0.62vw, 8px); color: #7a8a8c; text-align: center; opacity: 0; transition: opacity 0.4s; }
.film-small.on { opacity: 1; }
.film-logo { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #17626b; opacity: 0; transition: opacity 0.8s; }
.film-logo.on { opacity: 1; }
.film-logo img { width: min(60vw, 100vh); margin: 0 auto; }
.film-logo p { font: 600 clamp(0.9rem, 2.2vw, 1.5rem) var(--display); margin: 1em 0 0.3em; color: #b0843a; }
.film-logo small { font: 700 clamp(0.6rem, 1.3vw, 0.9rem) var(--body); letter-spacing: 0.24em; text-transform: uppercase; }
.film-close { position: absolute; top: 14px; right: 14px; z-index: 2; font: 600 0.95rem var(--body); background: rgba(0, 0, 0, 0.6); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.film-stage .pic.move { animation: push var(--t, 7s) linear forwards; }
@keyframes push { from { transform: scale(1.14) translate(var(--x0, 0), var(--y0, 0)); } to { transform: scale(1.02) translate(0, 0); } }

/* The screenshots' lightbox. */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(5, 4, 3, 0.94); display: grid; place-items: center; padding: 16px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 82vh; width: auto; border-radius: 8px; }
.lightbox-bar { display: flex; gap: 10px; justify-content: center; margin-top: 12px; color: var(--game-ink); align-items: center; }
.lightbox-bar button { font: 600 0.95rem var(--body); background: none; color: var(--gilt); border: 1px solid rgba(230, 199, 122, 0.5); border-radius: 999px; padding: 6px 14px; cursor: pointer; }

/* The insects that walk the page: the game's own sprites, running from the pointer. */
.crawlers { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.crawlers img { position: absolute; left: 0; top: 0; width: 17px; height: auto; image-rendering: auto; will-change: transform; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }

/* A phone. */
@media (max-width: 860px) {
  .head-row { flex-wrap: wrap; gap: 10px; min-height: 60px; padding-block: 8px; }
  .switch .word { display: none; }
  .js .menu-toggle { display: block; font: 600 0.9rem var(--body); background: none; border: 1px solid var(--rule); color: var(--ink); border-radius: 999px; padding: 6px 14px; order: 2; }
  .switch { order: 1; }
  .site-nav { order: 3; width: 100%; flex-direction: column; gap: 0; }
  .js .site-nav:not(.open) { display: none; }
  .site-nav a { padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: none; }
  .brand .emblem { width: 32px; }
  .brand b { font-size: 1.2rem; }
  .strip-note { display: none; }
  .split, .section.two, .two, .team, .rooms { grid-template-columns: 1fr; }
  .split.flip .photo { order: 0; }
  .drums { grid-template-columns: 1fr; }
  .drum img { height: 190px; }
  .product { grid-template-columns: 1fr; text-align: left; }
  .product img { height: 240px; }
  .team li { grid-template-columns: 110px 1fr; }
  .hero { min-height: 78vh; }
  .hero-copy { padding-block: 100px 48px; }
  .hero::after { background: linear-gradient(0deg, rgba(10, 30, 32, 0.85), rgba(10, 30, 32, 0.25) 75%); }
  .badge { width: 90px; height: 90px; font-size: 0.6rem; }
  .badge::first-line { font-size: 1.3rem; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .film-stage .pic.move { animation: none; }
  * { transition: none !important; }
}