/* Hallmark · shape: Bento Grid · genre: playful · theme: Piste (deal 1/3, seed hub-qh7-mods-sports-5461·64721cb9·2026-11-01·r0) · job: join · draw: 39e1d8
 * hero: Index, swapped from Counter because the five mods are why visitors come · nav: slab with a full-screen mod menu, swapped from search-led bar because the owner asked for the image menu · footer: index columns · imagery: in-game captures and product artwork from the owner's footage, plus two generated stand-ins (wallpaper, Preset Loader) · signature: the mod index whose rows pop up their picture · 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 S4 R4 V5 · weakest: E, the first build of a two-page system; the sweep decides */
/* Hallmark · waive 44c · picture 523px from the head, the mod list between them · on this Index hero the picture belongs to the mod row you point at, so the list stands between head and picture */
/* Hallmark · dismissed 58 · 462 words across five mods and the membership tiers; the busiest 900px window straddles the four steps and the membership head, each under 60 words alone */
/* Hallmark · waive 39b · the Download button stands 80px tall where the membership tiers were · the owner asked for a big button there, and it is the page's one closing action */
/* Hallmark · finish-review: subagent · 7 findings · 6 resolved 1 answered (46a: "Most popular" is the label on the owner's Buy Me a Coffee page) · gap: none */
@import url("./tokens.css");
@import url("./base.css");
@import url("./site.css");
@import url("./pitch.css");

/* Hero: the head, the five mods, and the picture of whichever mod you point at (the gameplay mod at rest) */
.hero { min-height: calc(100dvh - var(--nav-h)); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); align-content: center; }
.hero__text h1 { font-size: clamp(3rem, 4.4vw + 1rem, 6rem); max-width: 11ch; }
.hero__text .lead { max-width: 34ch; }
.hero__text .actions { margin-top: var(--space-xs); }
.hero__shot { display: none; }
.hero .modlist__row { position: static; padding: 0; }
.hero .modlist__link { display: block; padding-block: var(--space-xl); }
.hero .modlist__link::after { content: none; }
.hero .modlist__name { font-size: clamp(1.375rem, 1.1vw + 0.85rem, 2.25rem); }
@media (min-width: 62rem) {
  .hero .modlist__pop {
    display: none; position: absolute; top: 50%; right: var(--gutter); width: calc((100% - 2 * var(--gutter) - 2 * var(--space-2xl)) / 3);
    aspect-ratio: 4 / 5; z-index: var(--z-raised); pointer-events: none; transform: translateY(-50%);
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-out), display var(--dur-short) allow-discrete;
  }
  .hero .modlist__pop img { position: static; width: 100%; height: 100%; object-fit: cover; }
  .hero .modlist:not(:hover):not(:focus-within) .modlist__row:first-child .modlist__pop,
  .hero .modlist__row:hover .modlist__pop, .hero .modlist__row:focus-within .modlist__pop { display: block; }
  @starting-style {
    .hero .modlist__row:hover .modlist__pop, .hero .modlist__row:focus-within .modlist__pop { opacity: 0; transform: translateY(-48%); }
  }
}

/* Hand-off: on a wide screen the hero holds still, sinks and fades while the gameplay section scrolls up over it.
   The cover is the page's own ground, so no new surface arrives, and its top edge is feathered so the hero
   dissolves instead of being cut by a line. A hero taller than the screen first scrolls until its foot meets
   the bottom edge (site.js sets --hold-shift). */
.handoff__cover { position: relative; z-index: var(--z-raised); background: var(--ground); background-attachment: fixed; padding-bottom: var(--section-gap-s); }
@media (min-width: 62rem) {
  .handoff__hero { position: sticky; top: calc(var(--nav-h) + var(--hold-shift, 0px)); z-index: var(--z-base); }
  .handoff__cover { -webkit-mask-image: linear-gradient(to bottom, transparent, var(--color-paper) var(--space-3xl)); mask-image: linear-gradient(to bottom, transparent, var(--color-paper) var(--space-3xl)); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 62rem) {
    .handoff { timeline-scope: --handoff; }
    .handoff__cover { view-timeline: --handoff block; }
    .handoff__hero .hero__grid { transform-origin: 50% 30%; animation: handoff-sink linear both; animation-timeline: --handoff; animation-range: entry 0% entry 100%; }
    @keyframes handoff-sink { to { opacity: 0.2; transform: translateY(-5vh) scale(0.93); } }
  }
}

/* Bento: the gameplay mod in five tiles, the key art leading; text tiles stand on the ground under a 2px rule */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(320px, auto); gap: var(--space-2xl) var(--gap-columns); }
.tile { position: relative; display: grid; align-content: space-between; gap: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-bar); }
.tile h3 { font-size: var(--text-2xl); }
.tile p { color: var(--color-ink-2); }
.tile--lead { grid-column: 1 / span 8; grid-row: span 2; padding: 0; border-top: 0; align-content: end; overflow: hidden; }
.tile--lead > .tile__media { position: absolute; inset: 0; }
.tile__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--lead .tile__text { position: relative; z-index: 2; display: grid; gap: var(--space-sm); padding: var(--space-2xl) var(--space-xl) var(--space-xl); background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 92%, transparent) 30%, transparent); }
.tile--lead h3 { font-size: var(--text-display-s); }
.tile--lead p { color: var(--color-ink); max-width: 48ch; }
.tile--side { grid-column: 9 / span 4; }
.tile--pitch { grid-column: 9 / span 4; align-content: start; }
.tile--half { grid-column: span 6; }
.tile--photo { padding: 0; border-top: 0; overflow: hidden; align-content: end; }
.tile--photo > .tile__media { position: absolute; inset: 0; }
.tile--photo .tile__text { position: relative; z-index: 2; display: grid; gap: var(--space-xs); padding: var(--space-2xl) var(--space-xl) var(--space-xl); background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 92%, transparent) 35%, transparent); }
.tile--photo p { color: var(--color-ink); }
.strengths { display: grid; margin: 0; }
.strengths div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.strengths dt { font: 800 var(--text-xl)/1 var(--font-display); text-transform: uppercase; }
.strengths dd { margin: 0; color: var(--color-ink-2); text-align: right; }
.styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); margin: 0; padding: 0; list-style: none; }
.styles li { font: 800 var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; padding-block: var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-rule); }

/* Career Mode mods: one screen each. The wallpaper mod runs full-bleed; the other two pair a tall picture with their text, mirrored */
/* A jump to a screen lands it flush with the top of the window, where the nav has stepped aside */
.screen { position: relative; display: grid; align-items: center; min-height: 100svh; scroll-margin-top: calc(-1 * var(--space-3xl)); }
.career .screen--bleed { margin-top: var(--space-2xl); }
.screen + .screen { border-top: var(--rule-hair) solid var(--color-rule); }
.screen__text { display: grid; gap: var(--space-md); align-content: center; }
.screen h3 { font-size: var(--text-display-s); }
.screen p { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); max-width: 40ch; }
.screen--bleed { align-items: end; overflow: hidden; }
/* The wallpaper fades out at its foot into the tinted ground, under the text */
.screen--bleed .screen__media { position: absolute; inset: 0; z-index: var(--z-base); -webkit-mask-image: linear-gradient(to bottom, var(--color-paper) 40%, transparent 92%); mask-image: linear-gradient(to bottom, var(--color-paper) 40%, transparent 92%); }
.screen--bleed .screen__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.screen--bleed::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(42% 55% at 50% 88%, color-mix(in oklab, var(--color-paper) 70%, transparent), transparent);
}
.screen--bleed .screen__text { position: relative; z-index: 3; padding-block: var(--space-3xl) var(--space-2xl); }
/* A derby wallpaper keeps its two sides; the text sits in the dark space between them */
.screen--bleed .screen__text { justify-items: center; text-align: center; }
.screen--bleed .screen__text > * { max-width: 40ch; }
.screen--bleed p { color: var(--color-ink); }
.screen__in { align-items: center; padding-block: var(--space-2xl); }
.screen__in .screen__text { grid-column: 1 / span 4; }
.screen__in .screen__shot { grid-column: 6 / span 7; }
.screen--flip .screen__shot { grid-column: 1 / span 5; grid-row: 1; }
.screen--flip .screen__text { grid-column: 7 / span 5; }
.screen__shot .shot__frame { aspect-ratio: auto; height: min(calc(100svh - var(--nav-h) - 2 * var(--space-2xl)), 60rem); }
/* Real interfaces are shown whole, at their own shape, never cropped to the screen */
.screen__shot--fit .shot__frame { height: auto; aspect-ratio: var(--ratio); max-height: calc(100svh - 2 * var(--space-2xl)); }

/* The Preset Loader on the indigo field */
.loader { align-items: center; row-gap: var(--space-2xl); }
.loader__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.loader__facts { margin: 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-field-ink); }
.loader__facts li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-field-ink) 35%, transparent); }
.loader__shot { grid-column: 6 / span 7; }
.loader .shot--block { --block: var(--color-accent); }

/* First match: four real steps, numerals in the display face */
.start { align-items: start; }
.start .head { grid-column: 1 / span 4; }
.steps { grid-column: 5 / span 8; margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: var(--rule-bar) solid var(--color-rule-bar); }
.steps li { counter-increment: step; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.steps li::before { content: counter(step); font: 800 var(--text-display-s)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-xl); }
.steps p { color: var(--color-ink-2); }

/* Get it: the page's action again as one statement and one large button; the download page holds the choices */
.get__in { align-items: center; row-gap: var(--space-xl); }
.get h2 { grid-column: 1 / span 8; font-size: var(--text-display); }
.get .btn--big { grid-column: 9 / span 4; justify-self: end; min-height: 80px; padding: 0 var(--space-2xl); font-size: var(--text-2xl); }

/* Questions: native disclosure rows under one 2px rule; the mint plus turns to a cross when a row is open */
.faq { align-items: start; }
.faq .head { grid-column: 1 / span 4; }
.faq__list { grid-column: 5 / span 8; border-top: var(--rule-bar) solid var(--color-rule-bar); }
.faq__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); min-height: 44px; padding-block: var(--space-xl);
  list-style: none; cursor: pointer; font: 800 var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; transition: color var(--dur-micro) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex-shrink: 0; font: 500 var(--text-3xl)/1 var(--font-body); color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--color-accent); }
.faq__item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
/* A closed answer takes no box, so tools that measure the page count only the questions a visitor sees */
.faq__item:not([open]) .faq__a { display: none; }
.faq__a { padding-bottom: var(--space-lg); }
.faq__a p { color: var(--color-ink-2); max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .faq__item summary, .faq__item summary::after { transition: none; } }

@media (max-width: 61.99rem) {
  .hero__shot { display: block; margin-top: var(--space-md); }
  .hero { min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
}
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .tile--lead, .tile--side, .tile--pitch, .tile--half { grid-column: 1 / -1; }
  .tile--lead { grid-row: span 1; min-height: 480px; }
  .screen { min-height: 0; }
  .screen__in, .screen--bleed { padding-block: var(--space-2xl); }
  .screen__in .screen__text, .screen__in .screen__shot, .screen--flip .screen__shot, .screen--flip .screen__text { grid-column: 1 / -1; grid-row: auto; }
  .screen__in { row-gap: var(--space-xl); }
  .screen--flip .screen__text { order: -1; }
  .screen__shot .shot__frame { height: auto; aspect-ratio: var(--ratio); }
  /* On a phone the wallpaper sits above its text instead of behind it */
  .screen--bleed { display: block; padding-block: 0 var(--space-2xl); }
  .screen--bleed .screen__media { position: relative; aspect-ratio: 16 / 9; }
  .screen--bleed::after { content: none; }
  .screen--bleed .screen__text { padding-block: var(--space-xl) 0; }
  .screen--bleed p { color: var(--color-ink-2); }
  .loader__text, .loader__shot { grid-column: 1 / -1; }
  .start .head, .steps { grid-column: 1 / -1; }
  .get h2, .get .btn--big { grid-column: 1 / -1; justify-self: start; }
  .faq .head, .faq__list { grid-column: 1 / -1; }
  .faq__list { margin-top: var(--space-xl); }
  .steps { margin-top: var(--space-xl); }
}
@media (max-width: 40rem) {
  .steps li { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); }
  .steps li p { grid-column: 2; }
  .styles { grid-template-columns: minmax(0, 1fr); }
}