/* Hallmark · shape: Split Studio · genre: playful · theme: Piste (deal 1/3, seed hub-qh7-mods-sports-5461·64721cb9·2026-11-01·r0) · job: try · draw: 0867d1
 * hero: Poster, swapped from Corridor because the key art is the page's strongest picture · nav: slab with a full-screen mod menu, swapped from masthead so the site shares one nav · footer: index columns, swapped from colophon block so the site shares one footer · imagery: in-game captures from the owner's footage (hero, three stills, close) and one click-to-play clip; the 3D pitch is a diagram of the mod's changes · signature: the 3D pitch that steps from EA's flat line to QH7's shape · piste: night-piste ground, mint signal, indigo field
 * axes: dark/display-condensed/warm · posture: full-palette · brand: QH7 (spec 2026-11-02) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: V, shares its nav and footer with the home page on purpose; the pitch and the settings panel carry what is only this page's */
/* Hallmark · dismissed 58 · the owner asked for the gameplay mod in depth; 770 words over nine sections, and the busiest window is the nine-row settings table the owner supplied */
/* Hallmark · finish-review: subagent · 8 findings · 8 resolved · gap: none */
@import url("./tokens.css");
@import url("./base.css");
@import url("./site.css");
@import url("./pitch.css");

/* Poster hero: the key art full-bleed, the head low and left on its calmest part */
.poster { position: relative; display: grid; align-items: end; min-height: calc(100dvh - var(--nav-h)); overflow: hidden; }
/* The picture fades out at its foot into the tinted ground instead of ending on a flat charcoal edge */
.poster__media { position: absolute; inset: 0; z-index: var(--z-base); -webkit-mask-image: linear-gradient(to bottom, var(--color-paper) 62%, transparent); mask-image: linear-gradient(to bottom, var(--color-paper) 62%, transparent); }
.poster__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.poster__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to right, color-mix(in oklab, var(--color-paper) 92%, transparent) 0%, color-mix(in oklab, var(--color-paper) 60%, transparent) 38%, transparent 62%);
}
.poster__text { position: relative; z-index: 3; display: grid; gap: var(--space-lg); padding-block: var(--space-3xl) var(--space-2xl); }
.poster__text h1 { font-size: clamp(3rem, 6vw + 0.5rem, 7.5rem); max-width: 12ch; }
.poster__text .lead { color: var(--color-ink); max-width: 45ch; }
.poster__text .note { color: var(--color-ink-2); }

/* The base strengths side by side: a ruled comparison, Premiere under a mint rule, on a screen of their own */
.strengths { min-height: calc(100svh + 2 * var(--section-gap-s)); display: grid; align-content: center; padding-block: var(--section-gap-s); }
.cmp__pick { color: var(--color-ink-2); }
.compare { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); }
.cmp { display: grid; align-content: start; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-bar); }
.cmp--start { border-top-color: var(--color-accent); }
.cmp h3 { font-size: var(--text-3xl); }
.cmp__tag { font-size: var(--text-lead); line-height: 1.3; color: var(--color-ink); }
/* Each strength's long description opens in place; closed, it takes no box */
.cmp__more summary {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; list-style: none; cursor: pointer;
  font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-ink) 45%, transparent); text-underline-offset: 0.2em;
}
.cmp__more summary::-webkit-details-marker { display: none; }
.cmp__more summary::after { content: "+"; font: 500 var(--text-xl)/1 var(--font-body); color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.cmp__more[open] summary::after { transform: rotate(45deg); }
.cmp__more summary:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
.cmp__more summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.cmp__more:not([open]) .cmp__body { display: none; }
.cmp__body { display: grid; gap: var(--space-md); padding-top: var(--space-sm); }
.cmp__body p { color: var(--color-ink-2); }

/* Pinned: the pitch holds still while each change gets a screen of its own beside it */
.shape { align-items: start; }
/* The pitch is centred in the window below the nav, level with the step beside it */
.shape__pitch { grid-column: 1 / span 7; position: sticky; top: var(--nav-h); min-height: calc(100svh - var(--nav-h)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.shape__steps { grid-column: 9 / span 4; }
.shape__step { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; gap: var(--space-md); }
.shape__step h3 { font-size: var(--text-display-s); }
.shape__step p { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
/* With script on a wide screen, only the step crossing the middle of the screen shows; it rises in as it arrives */
@media (min-width: 60rem) {
  html.js .shape__step > * { opacity: 0; transform: translateY(var(--space-lg)); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
  html.js .shape__step.is-current > * { opacity: 1; transform: none; }
  html.js .shape__step.is-current > p { transition-delay: 120ms; }
}
.pitch__caption { margin-top: var(--space-sm); }

/* What changes on the pitch: the owner's words beside one clip, played only when asked */
.overview { align-items: center; row-gap: var(--space-2xl); min-height: 100svh; align-content: start; }
.overview__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.overview__clip { grid-column: 6 / span 7; margin: 0; }
/* Gameplay keeps its full 16:10 frame: cropping it loses feet and the ball at the edges */
.clip { aspect-ratio: 16 / 10; background: var(--color-paper-3); }
.clip video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The reel: clips stacked in one frame, the current one on top. Without script only the first shows, with its own controls */
.reel__stage { position: relative; }
.reel__clip { position: absolute; inset: 0; }
html:not(.js) .reel__clip ~ .reel__clip { display: none; }
html.js .reel__clip { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
html.js .reel__clip.is-on { opacity: 1; }
.reel__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); margin-top: var(--space-md); }
.reel__toggle {
  min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink);
  font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out);
}
.reel__toggle:hover { background: var(--color-paper-2); }
.reel__list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
/* Each label carries a 2px track that fills in mint as its clip plays */
.reel__list button {
  position: relative; min-height: 44px; padding: 0 0 var(--space-xs); border: 0; background: none; cursor: pointer;
  color: var(--color-muted); font: 500 var(--text-sm)/1.2 var(--font-body); transition: color var(--dur-micro) var(--ease-out);
}
.reel__list button::before, .reel__list button::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-2xs); border-top: 2px solid var(--color-rule); }
.reel__list button::after { border-top-color: var(--color-accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.reel__list button:hover, .reel__list button[aria-current="true"] { color: var(--color-ink); }
.reel__toggle:focus-visible, .reel__list button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Features, in the same section: the owner's list as rows, with three in-game stills beside it */
.features { align-items: start; margin-top: var(--section-gap-l); }
.features__list { grid-column: 1 / span 6; }
.features__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.features__head h3 { font-size: var(--text-display-s); }
.features__media { grid-column: 8 / span 5; display: grid; gap: var(--space-2xl); padding-top: var(--space-3xl); }
.features__media .caption { margin-top: var(--space-sm); }
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-rule-bar); }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows h3 { font-size: var(--text-2xl); }
.rows p { color: var(--color-ink-2); }

/* Settings: the game's own option rows, one table per strength */
.settings-sw { grid-column: 1 / span 8; }
.settings-sw .seg { margin-bottom: var(--space-lg); }
.settings { width: 100%; border-collapse: collapse; border-top: var(--rule-bar) solid var(--color-rule-bar); }
.settings caption { text-align: left; padding-bottom: var(--space-sm); font-weight: 500; color: var(--color-ink-2); }
.settings th, .settings td { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 500; }
.settings th { color: var(--color-ink-2); }
.settings td { text-align: right; white-space: nowrap; }
.opt { display: inline-flex; align-items: center; gap: var(--space-sm); font: 800 var(--text-lg)/1 var(--font-display); text-transform: uppercase; }
/* The values are the game's own option labels, marked up as program output; they keep the display face */
.opt samp { font: inherit; }
.opt:has(> samp) { gap: 0.3em; }
.opt i { font-style: normal; color: var(--color-muted); font-weight: 500; }
.is-diff .opt { color: var(--color-accent); }
.opt { justify-content: flex-end; }
.settings-sw [role="tabpanel"] + [role="tabpanel"] { margin-top: var(--space-2xl); }

/* Tuning Philosophies: an index of the add-ons, on the indigo field */
.index { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-rule-bar); }
.index li { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index h3 { font-size: var(--text-2xl); }
.index p { color: var(--color-ink-2); }
.band--field .index { border-top-color: var(--color-field-ink); }
.band--field .index li { border-bottom-color: color-mix(in oklab, var(--color-field-ink) 35%, transparent); }
.band--field .index p { color: var(--color-field-ink); }

/* In the download: rows in load order, each with the file name it has in the mod manager.
   The numbers count up from the bottom, like the mod manager's priority: the lower mod wins. */
.parts { grid-column: 1 / -1; margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-rule-bar); }
.parts li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.parts li::before { content: attr(data-priority); font: 800 var(--text-display-s)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.parts h3 { font-size: var(--text-2xl); }
.parts p { color: var(--color-ink-2); }
.parts code { color: var(--color-ink); overflow-wrap: anywhere; }
/* Close: the join beside one last picture, on the field */
.close { align-items: center; row-gap: var(--space-2xl); }
.close__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.close__shot { grid-column: 7 / span 6; }

@media (max-width: 60rem) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shape__pitch { grid-column: 1 / -1; position: static; min-height: 0; display: block; }
  .shape__steps { grid-column: 1 / -1; margin-top: var(--space-xl); }
  .shape__step { min-height: 0; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
  .shape__step h3 { font-size: var(--text-2xl); }
  .shape__step p { font-size: var(--text-md); }
  .overview__text, .overview__clip, .features__list, .features__media, .settings-sw, .close__text, .close__shot { grid-column: 1 / -1; }
  .features__media { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); padding-top: 0; }
  .strengths { min-height: 0; }
  .overview { min-height: 0; }
  .parts li { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-xs); }
  .parts li > :not(h3) { grid-column: 2; }
  .rows { margin-top: var(--space-xl); }
  .rows li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .index { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .features__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features__media .shot:last-child { grid-column: 1 / -1; }
  /* On a phone the picture sits above the head instead of behind it */
  .poster { display: block; min-height: 0; }
  .poster__media { position: relative; aspect-ratio: 4 / 3; }
  .poster__scrim { display: none; }
  .poster__text { padding-block: var(--space-xl) 0; }
  .settings th, .settings td { display: block; text-align: left; border-bottom: 0; padding-block: var(--space-2xs); }
  .settings tr { display: block; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
}
@media (prefers-reduced-motion: reduce) { html.js .shape__step > * { transition: none; transform: none; } .cmp__more summary::after, html.js .reel__clip, .reel__toggle, .reel__list button { transition: none; } }