/* Hallmark · shape: Title screen, then the game screen by screen · genre: atmospheric · theme: custom · redesign: full · job: try · idea: "the page opens like the game does, its title over the arena, then shows one full screen of the game for each thing WoTReborn does" · vibe: "dark stone, game screens, plain words, serious"
 * paper: oklch(13.5% 0.01 250), the game's night stone · accent: oklch(80% 0.13 84), its menu-lettering gold · display: Archivo 800 at 80% width · body: Archivo · hero: the title centred over the Coliseum, the arena rising out of the dark beneath the download · nav: centred links over the hero · footer: byline, links, legal · imagery: screenshots 5 (the engine's captures and its first-run window) · signature: the title screen, the game's name set huge over the arena
 * axes: dark/grotesk-heavy/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: P, a download page argues little; it lets the game's own screens make the case, each carrying one plain fact */
/* Hallmark · dropped corridor.jpg · the graphics section now compares each effect with the original, from fresh captures */
/* Hallmark · dismissed 59 · ten sections because the owner asked for every feature shown: modes, killcams, effects, weather, bots and characters */
/* Hallmark · reworded "The Wheel of Time, running again." to "A new engine for The Wheel of Time", "Arena, against bots." to "Arena modes", "New light on old stone." to "Updated graphics" · the owner asked for plain wording */
@import url("./tokens.css?v=2");
@import url("./base.css?v=2");

:root { --nav-h: 64px; --clear: transparent; --solid: var(--color-ink); }

/* the product's own pixels */
[data-kind="product"] > img { filter: none; }

h1, h2 { font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--tracking-display); line-height: 0.95; }
h2 { font-size: var(--text-section); max-width: 18ch; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 46ch; }
.note { color: var(--color-muted); max-width: 54ch; }
figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }
.nav { position: absolute; z-index: var(--z-sticky-nav); top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; min-height: var(--nav-h); padding-inline: var(--gutter); border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); }
.nav nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-xl); }
.nav a { color: var(--color-ink-2); font-weight: 400; text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* controls */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--fill { background: var(--color-ink); color: var(--color-paper); }
.btn--fill:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--line { color: var(--color-ink); border-color: color-mix(in oklab, var(--color-ink) 32%, transparent); }
.btn--line:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* a screen of the game, fading into the stone on every side */
.hero__art, .screen__art, .close__art { margin-inline: auto; width: min(100%, var(--screen-max));
  -webkit-mask-image: var(--fade-y), linear-gradient(to right, var(--clear), var(--solid) 12%, var(--solid) 88%, var(--clear));
  mask-image: var(--fade-y), linear-gradient(to right, var(--clear), var(--solid) 12%, var(--solid) 88%, var(--clear));
  -webkit-mask-composite: source-in; mask-composite: intersect; }

/* hero: the title screen */
.hero { position: relative; isolation: isolate; overflow: clip; display: grid; align-content: start; justify-items: center; min-height: max(760px, 100dvh); padding-top: calc(var(--nav-h) + var(--space-2xl)); text-align: center; }
.hero__art { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 52%; margin-block: 0; --fade-y: linear-gradient(to bottom, var(--clear) 0%, color-mix(in oklab, var(--solid) 12%, transparent) 30%, var(--solid) 64%, var(--solid) 82%, var(--clear) 100%); }
.hero__art > img { object-position: 50% 40%; animation: art-settle var(--dur-settle) var(--ease-out) both; }
.hero__content { display: grid; justify-items: center; gap: var(--space-lg); }
.hero__content > * { animation: rise var(--dur-long) var(--ease-out) both; }
.hero__content > :nth-child(2) { animation-delay: 60ms; } .hero__content > :nth-child(3) { animation-delay: 120ms; } .hero__content > :nth-child(4) { animation-delay: 180ms; } .hero__content > :nth-child(5) { animation-delay: 240ms; }
.hero__mark { width: 56px; height: 56px; }
.hero h1 { display: grid; justify-items: center; gap: var(--space-sm); max-width: none; }
.h1__pre { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.75rem); letter-spacing: 0; line-height: 1; }
.h1__title { font-size: var(--text-title-screen); line-height: 0.9; }
.hero .lead { max-width: 60ch; }
.hero .actions { margin-top: var(--space-xs); }
.meta { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
@keyframes art-settle { from { opacity: 0.35; transform: scale(1.06); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* arena: a full screen, the head on its floor, the modes beneath */
.screen { position: relative; padding-top: var(--section-gap-s); }
.screen__art { position: relative; aspect-ratio: 16 / 8; --fade-y: linear-gradient(to bottom, var(--clear) 0%, var(--solid) 16%, var(--solid) 58%, var(--clear) 100%); }
.screen__art > img { object-position: 50% 46%; }
.screen__caption { position: relative; z-index: var(--z-raised); display: grid; justify-items: center; gap: var(--space-md); margin-top: calc(-1 * var(--space-4xl)); text-align: center; }
.modes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-3xl); }
.modes figure { margin: 0; display: grid; gap: var(--space-sm); align-content: start; }
.modes__kill { grid-column: 1 / 9; grid-row: 1 / 3; }
.modes__tdm { grid-column: 9 / 13; grid-row: 1; }
.modes__snd { grid-column: 9 / 13; grid-row: 2; }
.modes .frame { aspect-ratio: 1584 / 861; }
figcaption b { color: var(--color-ink); font-weight: 700; }
.modes figcaption, .people figcaption, .panel figcaption { margin-top: 0; font-size: var(--text-md); color: var(--color-ink-2); max-width: 56ch; }
.frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* engine: the claim on the left, what it means on hairlines to the right */
.engine__head { grid-column: 1 / 6; display: grid; gap: var(--space-lg); align-content: start; }
.engine__facts { grid-column: 7 / 13; margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.engine__facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.engine__facts dt { font-size: var(--text-title); font-weight: 700; line-height: 1.2; }
.engine__facts dd { margin: 0; color: var(--color-ink-2); }

/* sections on the twelve columns */
.sec { padding-top: var(--section-gap-l); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.frame { position: relative; overflow: hidden; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }

/* graphics: the head split over a switcher of before-and-after screens */
.graphics__head { grid-column: 1 / 7; align-self: end; }
.graphics__lead { grid-column: 8 / 13; align-self: end; }
.graphics__switch { grid-column: 1 / 13; margin-top: var(--space-2xl); display: grid; gap: var(--space-lg); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.seg button { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: 0; background: transparent; color: var(--color-ink-2); font: 700 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.seg button:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.seg button:active { transform: translateY(1px); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg button[aria-selected="true"] { background: var(--color-paper-3); border-color: var(--color-ink-2); color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }
.panel { margin: 0; display: grid; gap: var(--space-sm); }
.panel + .panel { margin-top: var(--space-xl); }
.js .panel + .panel { margin-top: 0; }
.panel__still { aspect-ratio: 1584 / 861; }
.compare { --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 1584 / 861; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
.compare > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--color-ink); pointer-events: none; }
.compare__tag { position: absolute; z-index: var(--z-raised); top: var(--space-md); padding: var(--space-2xs) var(--space-sm); background: color-mix(in oklab, var(--color-paper) 80%, transparent); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; pointer-events: none; }
.compare__tag--before { left: var(--space-md); } .compare__tag--after { right: var(--space-md); }
.compare__range { position: absolute; z-index: var(--z-raised); inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(.compare__range:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* weather: a rail past the container's edge */
.weather__head { display: grid; gap: var(--space-lg); }
.rail { --rail-pad: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(18rem, 40vw, 38rem); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0 var(--rail-pad) var(--space-md); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad); overscroll-behavior-x: contain; scrollbar-color: var(--color-rule) transparent; }
.rail > li { scroll-snap-align: start; }
.rail figure { margin: 0; }
.rail .frame { aspect-ratio: 1584 / 861; }
.rail figcaption { font-weight: 700; color: var(--color-ink); }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* bots and characters: two screens side by side, the leaderboard line under them */
.people__head { grid-column: 1 / -1; margin-bottom: var(--space-2xl); }
.people__bots { grid-column: 1 / 7; margin: 0; display: grid; gap: var(--space-sm); align-content: start; }
.people__look { grid-column: 7 / 13; margin: 0; display: grid; gap: var(--space-sm); align-content: start; }
.people__bots .frame, .people__look .frame { aspect-ratio: 1584 / 861; }
.people__board { grid-column: 1 / -1; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.people__board a { color: var(--color-ink); text-underline-offset: 0.25em; }
.people__board a:hover { text-decoration-color: var(--color-accent); }

/* what you need: the list beside the window that asks for the game */
.need__text { grid-column: 1 / 6; align-self: center; display: grid; gap: var(--space-xl); }
.need__shot { grid-column: 7 / 13; align-self: center; margin: 0; }
/* the window sits on a lighter step of the stone, so its own dark ground reads as a window */
.need__shot .well { padding: var(--space-xl); background: var(--color-paper-3); }
.need__shot .frame { aspect-ratio: 760 / 400; box-shadow: var(--shadow-card); outline-color: color-mix(in oklab, var(--color-ink) 16%, transparent); }
.need__shot .frame > img { object-position: 50% 100%; }
.facts { margin: 0; display: grid; }
.facts > div { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.facts > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-size: var(--text-title); font-weight: 700; line-height: 1.2; }
.facts dd { margin: 0; color: var(--color-ink-2); }

/* releases: newest first, on hairlines */
.releases__head { grid-column: 1 / 5; display: grid; gap: var(--space-lg); align-content: start; }
.releases__head a { color: var(--color-ink); font-weight: 700; text-underline-offset: 0.25em; }
.releases__head a:hover { text-decoration-color: var(--color-accent); }
.releases { grid-column: 6 / 13; margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.releases li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--gap-columns); row-gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.releases__v { grid-row: span 2; align-self: start; color: var(--color-ink); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.01em; text-decoration: none; font-variant-numeric: tabular-nums; }
.releases li:first-child .releases__v { font-size: var(--text-display-s); }
.releases__v:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.releases time { font-size: var(--text-sm); color: var(--color-muted); }
.releases li p { color: var(--color-ink-2); max-width: 60ch; }

/* the close: the download, then the menu the game opens on */
.close { position: relative; padding-top: var(--section-gap-l); text-align: center; }
.close__content { position: relative; z-index: var(--z-raised); display: grid; justify-items: center; gap: var(--space-lg); }
.close__content .actions { margin-top: var(--space-xs); }
.close__art { position: relative; aspect-ratio: 1264 / 681; max-width: 1200px; margin-top: var(--space-xl); margin-bottom: 0; --fade-y: linear-gradient(to bottom, var(--clear) 0%, var(--solid) 30%, var(--solid) 70%, var(--clear) 100%); }

/* footer */
.foot { margin-top: var(--space-2xl); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg) var(--space-2xl); }
.foot__by { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink-2); }
.foot__by a { display: inline-flex; flex-shrink: 0; }
.foot__by img { width: 28px; height: 28px; }
.foot__by b { color: var(--color-ink); font-weight: 700; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__nav a { color: var(--color-ink-2); text-underline-offset: 0.25em; }
.foot__nav a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.foot__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* one reveal, visible without script */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 60rem) {
  .hero { padding-top: calc(var(--nav-h) + var(--space-2xl)); min-height: max(680px, 100svh); }
  .hero__art { height: 58%; }
  .graphics__head, .graphics__lead, .graphics__switch, .need__text, .need__shot, .releases__head, .releases, .engine__head, .engine__facts, .people__bots, .people__look { grid-column: 1 / -1; }
  .grid { row-gap: var(--space-xl); }
  .graphics__switch { margin-top: 0; }
  .people__head { margin-bottom: 0; }
  .engine__facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .rail { grid-auto-columns: 82vw; }
  .screen__art { aspect-ratio: 4 / 3; }
  .screen__caption { margin-top: calc(-1 * var(--space-3xl)); }
  .modes { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2xl); }
  .modes__kill, .modes__tdm, .modes__snd { grid-column: 1 / -1; grid-row: auto; }
  .releases li { grid-template-columns: minmax(0, 1fr); }
  .releases__v { grid-row: auto; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .nav nav { gap: var(--space-2xs) var(--space-lg); }
  .nav a { font-size: var(--text-sm); }
  /* on a phone the arena comes after the words, so nothing sits on the bright wall */
  .hero { min-height: auto; }
  .hero__art { order: 1; position: relative; height: auto; aspect-ratio: 1 / 1; margin-top: var(--space-lg); --fade-y: linear-gradient(to bottom, var(--clear) 0%, var(--solid) 30%, var(--solid) 78%, var(--clear) 100%); }
  .need__shot .well { padding: var(--space-md); }
  .need__shot .frame { aspect-ratio: 14 / 15; }
  .need__shot .frame > img { inset: auto 0 0 auto; width: 213%; height: auto; max-width: none; object-fit: fill; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__art > img, .hero__content > * { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn { transition: background-color var(--dur-short) linear; } .btn:active { transform: none; }
}