/* Hallmark · shape: Split Studio · genre: playful · theme: Sticker (deal 1/3, seed hub-presenting-family-live-bcbb·98759eb9·2026-11-06·r0) · redesign: full · draw: caf688
 * hero: Counter · nav: slab (swapped from search-led: the page has nothing to search) · footer: index columns · imagery: the product (airport3d.live captured) and Blender renders · signature: each world as a rendered diorama sticker that opens a tilted 3D map of the real place · sticker: sheet, vinyl in dark
 * axes: light/display-heavy/chromatic-magenta · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the train and WMS worlds have no screens yet; their rows carry a single real fact as a die-cut fill instead of a fake picture */
/* Hallmark · dropped #world, #count, #spawn · the drawn canvas world is an illustration standing in for the products (gate 80); real screens and rendered dioramas replace it */
/* Hallmark · waive 39b · button.view wraps a whole rendered still · the picture itself is the button that opens the 3D map of the real place */
/* Hallmark · imagery: generated stills, rendered in Blender from CC0 Kenney kits at the owner's request (imagery.md § 6) */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 72px;
  --tilt: 0deg;
  --color-fixed-ink: oklch(21% 0.011 81); --color-fixed-paper: oklch(95.7% 0.013 82); --color-fixed-rule: oklch(33% 0.016 75);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: oklch(21% 0.011 81); --color-paper-2: oklch(25.5% 0.013 72); --color-paper-3: oklch(25.5% 0.013 72);
    --color-ink: oklch(95.7% 0.013 82); --color-ink-2: oklch(88% 0.015 80); --color-muted: oklch(74% 0.017 70);
    --color-rule: oklch(33% 0.016 75); --color-shadow: oklch(12% 0.01 80);
    --shadow-card: 5px 6px 0 var(--color-shadow); --shadow-press: 1px 1px 0 var(--color-shadow);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(21% 0.011 81); --color-paper-2: oklch(25.5% 0.013 72); --color-paper-3: oklch(25.5% 0.013 72);
  --color-ink: oklch(95.7% 0.013 82); --color-ink-2: oklch(88% 0.015 80); --color-muted: oklch(74% 0.017 70);
  --color-rule: oklch(33% 0.016 75); --color-shadow: oklch(12% 0.01 80);
  --shadow-card: 5px 6px 0 var(--color-shadow); --shadow-press: 1px 1px 0 var(--color-shadow);
}

h1 { font-size: min(var(--text-display), 4.5rem); line-height: 1.02; }
h2 { font-size: min(var(--text-section), 3.25rem); line-height: 1.02; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); font-weight: 700; }
.skip:focus-visible { top: var(--space-md); }

/* the slab */
.slab { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-fixed-ink); color: var(--color-fixed-paper); }
.slab__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--nav-h); }
.wordmark { font-family: var(--font-display); font-size: var(--text-lg); text-decoration: none; letter-spacing: var(--tracking-display); }
.slab__nav { display: flex; align-items: center; gap: var(--space-xs); }
.slab__nav > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); font-weight: 700; text-decoration: none; border-radius: var(--radius-pill); }
.slab__nav > a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); text-decoration-thickness: 2px; }
.theme { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-fixed-paper); cursor: pointer; transition: rotate var(--dur-short) var(--ease-out); }
.theme:hover { rotate: 180deg; }
.slab :focus-visible { outline-color: var(--color-accent-2); }

/* controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink);
  font-weight: 700; font-size: var(--text-md); text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--color-ink);
  transition: translate var(--dur-micro) var(--ease-out), rotate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.btn:hover { translate: 0 -2px; rotate: -1deg; }
.btn:active { translate: 0 0; rotate: 0deg; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; translate: none; rotate: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 5px var(--color-white), var(--shadow-card); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--primary:active { translate: 4px 5px; box-shadow: 0 0 0 5px var(--color-white), var(--shadow-press); }
.btn--big { min-height: 64px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); margin-left: var(--space-xs); }

/* surfaces */
.diecut { border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-paper-3); }
.diecut--photo { border-radius: 22px; overflow: hidden; background: var(--color-slot); }
.shot { aspect-ratio: 4 / 3; margin: 0; }
[data-tilt] { transition: rotate var(--dur-short) var(--ease-out), translate var(--dur-short) var(--ease-out); rotate: var(--tilt); }
.tag { display: inline-block; padding: var(--space-xs) var(--space-md); border: 4px solid var(--color-white); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); font-weight: 700; font-size: var(--text-sm); }
.tag--lime { background: var(--color-accent-2); color: var(--color-fixed-ink); }
.meta { color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }

/* hero: the action is the visual's partner */
.hero { min-height: calc(100svh - var(--nav-h)); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); }
.hero__text .lead { color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xs); }
.hero__shot { position: relative; margin: 0; --tilt: -2deg; }
.hero__shot .shot { max-height: 72svh; margin-inline-start: auto; }
.tag--corner { position: absolute; z-index: var(--z-raised); top: calc(-1 * var(--space-md)); right: var(--space-lg); rotate: 4deg; }

/* worlds, each row a diptych of text and proof */
.worlds { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-bar) dashed var(--color-rule); }
.worlds h2 { margin-bottom: var(--space-2xl); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; padding-block: var(--space-2xl); }
.row + .row { border-top: var(--rule-bar) dashed var(--color-rule); }
.row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row:not(.row--lead) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.row--flip:not(.row--lead) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.row__text { display: grid; gap: var(--space-md); justify-items: start; }
.row__text h3 { font-size: var(--text-2xl); }
.row__text p:not(.meta) { font-size: var(--text-lg); color: var(--color-ink-2); }

.switcher { display: grid; gap: var(--space-md); --tilt: 1deg; }
.switcher__tabs { display: flex; gap: var(--space-xs); }
.chip { min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 2px var(--color-ink); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.chip:hover { background: var(--color-paper-2); }
.chip[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.switcher__note { color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }

.fill { display: grid; align-content: space-between; gap: var(--space-xl); min-height: 320px; padding: var(--space-xl); border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.fill--lime { background: var(--color-accent-2); color: var(--color-fixed-ink); --tilt: -2deg; }
.fill--ink { background: var(--color-fixed-ink); color: var(--color-fixed-paper); --tilt: 2deg; }
.fill__big { font-family: var(--font-display); font-size: var(--text-display-s); line-height: 1; max-width: none; }
.fill__big--num { font-size: 12rem; line-height: 0.8; font-variant-numeric: tabular-nums; }
.fill__line { font-weight: 700; font-size: var(--text-lg); max-width: 26ch; }

/* engine: steps stuck down on a dashed rule */
.engine { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.engine__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; margin-bottom: var(--space-2xl); }
.engine__head p { font-size: var(--text-lg); color: var(--color-ink-2); }
.steps { list-style: none; margin: 0; padding: var(--space-lg) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); border-top: var(--rule-bar) dashed var(--color-rule); }
.step { position: relative; padding: var(--space-xl) var(--space-lg) var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; }
.step:nth-child(odd) { rotate: -1.5deg; }
.step:nth-child(even) { rotate: 1.5deg; translate: 0 var(--space-md); }
.step__n { position: absolute; top: calc(-1 * var(--space-lg)); left: var(--space-lg); display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--color-accent-2); color: var(--color-fixed-ink); font-family: var(--font-display); font-size: var(--text-lg); border: 4px solid var(--color-white); }
.step h3 { font-size: var(--text-xl); }
.step p { color: var(--color-ink-2); }


/* views: a rendered still that opens the 3D map */
.view { display: block; width: 100%; padding: 0; cursor: zoom-in; position: relative; color: inherit; font: inherit; text-align: start; }
.view > img { transition: scale var(--dur-long) var(--ease-out); }
.view:hover > img { scale: 1.03; }
.view__hint { position: absolute; z-index: var(--z-raised); right: var(--space-md); bottom: var(--space-md); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-fixed-ink); color: var(--color-fixed-paper); font-weight: 700; font-size: var(--text-sm); box-shadow: 0 0 0 3px var(--color-white); transition: translate var(--dur-micro) var(--ease-out); }
.view:hover .view__hint { translate: 0 -2px; }
.view:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.shot.view { aspect-ratio: 16 / 10; }
.hero__shot .shot.view { aspect-ratio: 4 / 3; }
.switcher__tabs { flex-wrap: wrap; }
.row__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.tag--soon { background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-body); font-size: var(--text-sm); rotate: -3deg; }

/* the 3D map dialog */
.map3d { width: min(1200px, calc(100% - 2 * var(--space-md))); height: min(820px, calc(100% - 2 * var(--space-md))); max-width: none; max-height: none; padding: 0; border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--color-paper); color: var(--color-ink); overflow: hidden; }
.map3d[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.map3d::backdrop { background: color-mix(in oklch, var(--color-fixed-ink) 70%, transparent); }
.map3d__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-lg); }
.map3d__title { font-size: var(--text-xl); max-width: none; }
.map3d__close { min-height: 44px; }
.map3d__map { position: relative; min-height: 0; background: var(--color-paper-2); }
.map3d__note { padding: var(--space-xs) var(--space-lg); font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.map3d__fail { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-xl); text-align: center; font-weight: 700; }

/* the close: one lime field, the action again */
.close { background: var(--color-accent-2); color: var(--color-fixed-ink); padding-block: var(--space-3xl); }
.close__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.close :focus-visible { outline-color: var(--color-fixed-ink); }

/* footer: index columns */
.foot { background: var(--color-fixed-ink); color: var(--color-fixed-paper); padding-block: var(--space-3xl) var(--space-xl); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--space-xl) var(--gap-columns); }
.foot__mark { font-family: var(--font-display); font-size: var(--text-section); line-height: 1; overflow-wrap: break-word; min-width: 0; }
.foot__head { font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); letter-spacing: normal; color: var(--color-accent-2); margin-bottom: var(--space-sm); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot li { min-height: 44px; display: flex; align-items: center; }
.foot a:hover { text-decoration-color: var(--color-accent-2); text-decoration-thickness: 2px; }
.foot :focus-visible { outline-color: var(--color-accent-2); }
.foot__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: var(--rule-bar) dashed var(--color-fixed-rule); font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .hero { min-height: 0; }
  .hero__grid, .row, .row--flip, .row:not(.row--lead), .row--flip:not(.row--lead), .engine__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .row--flip > .fill { order: 2; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2xl); }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__mark { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .btn--small { padding: 0 var(--space-sm); }
  .slab__nav > a:not(.btn) { display: none; }
  .btn--small { margin-left: 0; }
  .wordmark { font-size: var(--text-md); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .fill__big--num { font-size: 8rem; }
}
@media (forced-colors: active) {
  .btn, .chip, .tag, .diecut, .fill { border: 2px solid CanvasText; }
  .chip[aria-selected="true"] { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt], .btn, .theme, .view > img, .view__hint { transition: none; }
  .view:hover > img { scale: none; }
  .theme:hover { rotate: none; }
}