/* Root-authored product direction. Product imagery is not a reconstructed mesh. */
@font-face { font-family: 'VAG Display'; src: url('/assets/barlow-condensed-bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --paper: var(--paper-50); --forest: var(--navy-900); --citrus: var(--blue-50);
  --sky: var(--blue-50); --rust: var(--blue-600); --soft-ink: var(--slate-600);
  --color-bg: var(--paper); --color-surface: #ffffff; --color-surface-alt: #eaf2fb;
  --color-text: var(--forest); --color-text-muted: var(--soft-ink);
  --color-rule: var(--forest); --color-accent: var(--citrus);
  --color-accent-text: var(--rust); --color-link: var(--rust);
  --color-inverse-bg: var(--forest); --color-inverse-bg-deep: #0b1e39;
  --color-inverse-text: var(--paper); --color-inverse-accent: var(--citrus);
  --color-inverse-focus: var(--citrus); --color-focus: var(--forest);
  --color-support: var(--sky); --color-support-text: var(--soft-ink);
  --btn-primary-bg: var(--forest); --btn-primary-fg: var(--paper);
  --btn-border: var(--forest); --btn-press-shadow: transparent;
  --font-display: 'VAG Display', 'Arial Narrow', Impact, sans-serif;
}
body { background: var(--paper); }
.preview-bar { background: #0b1e39; padding-block: .25rem; font-size: .75rem; color: #c4d2e5; }
.header-inner { padding-block: .75rem; }
.brand img { width: 10.4rem; height: auto; }
.main-nav a, .lang-link { font-size: .9rem; }
.lang-link { border-width: 1px; box-shadow: none; padding: .4rem .75rem; }
.mobile-nav { display: none; }
.display, .h2, .display--page { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; line-height: 1; }
.display--page { font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.75rem); max-width: 20ch; letter-spacing: -.005em; }
.h2 { font-size: clamp(2.1rem, 1.4rem + 2vw, 3.25rem); line-height: 1.02; letter-spacing: -.005em; }
.btn { border-radius: 2rem; border-width: 1px; box-shadow: none; font-size: 1rem; padding: .85rem 1.35rem; }
.btn:hover, .btn:active { box-shadow: none; transform: none; }
.btn-primary:hover { background: #2258a5; }
.btn-tool { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--forest); border-radius: 2rem; background: transparent; color: var(--forest); font: 600 .9375rem var(--font-sans); cursor: pointer; }
.btn-tool:hover { background: #eaf2fb; }
.draft-clear-confirm { border: 1px solid var(--forest); border-radius: 3px; padding: 1rem; background: #eaf2fb; }
.draft-clear-confirm[hidden] { display: none; }
.on-ink .btn-primary { --btn-primary-bg: var(--citrus); --btn-primary-fg: var(--forest); }
.on-ink .btn-primary:hover { background: #f6f8fc; }
.eyebrow { font-size: .75rem; letter-spacing: .12em; }
.page-hero { border-bottom: 1px solid #b9c7d9; background: var(--paper); padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.page-hero .lede { font-size: 1.125rem; color: var(--soft-ink); max-width: 34em; text-wrap: pretty; }
.page-hero-grid { align-items: center; }
.page-hero .actions { gap: .75rem 1.75rem; margin-top: .5rem; }
.display em { font-family: inherit; font-style: normal; color: var(--rust); }
.workshop-product { margin: 0; min-width: 0; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem) 1rem; border-radius: 4px; background: var(--sky); }
.workshop-product img { width: 72%; margin-inline: auto; height: auto; display: block; }
.workshop-product figcaption, .retail-products figcaption { font-size: .8125rem; line-height: 1.5; color: var(--soft-ink); margin-top: .8rem; }
.retail-products { margin: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem) 1rem; border-radius: 4px; background: var(--citrus); }
.retail-products img { width: 100%; height: auto; }
/* Fade only the renders' faint rectangular shadow floor, never the boxes (same values as the home hero). */
.retail-products img[src$='no-planet-b-box.png'] { -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 18%, #000 82%, transparent 96%), linear-gradient(#000 91%, transparent 99%); mask-image: linear-gradient(to right, transparent 4%, #000 18%, #000 82%, transparent 96%), linear-gradient(#000 91%, transparent 99%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.retail-products img[src$='lets-fly-box.png'] { -webkit-mask-image: linear-gradient(to right, transparent 3%, #000 15%, #000 85%, transparent 97%), linear-gradient(#000 82%, transparent 92%); mask-image: linear-gradient(to right, transparent 3%, #000 15%, #000 85%, transparent 97%), linear-gradient(#000 82%, transparent 92%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.retail-products figcaption { grid-column: 1/-1; }
.retail-game-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #ffffff; border-radius: 4px; }
.example-grid > li > .retail-game-photo { order: -1; margin-bottom: .5rem; }
.example-grid > li:has(.retail-game-photo) { padding-top: 0; border-top: 0; }
.band-paper { background: #eaf2fb; }
.service-grid li, .insight-card, .example-grid > li { border-width: 1px; box-shadow: none; }
.panel { border: 1px solid var(--forest); border-radius: 4px; box-shadow: none; }
.examples, .draft-clear-confirm { border-radius: 4px; }
.note { border: 0; border-inline-start: 3px solid var(--rust); border-radius: 0 4px 4px 0; background: var(--color-surface); padding: 1rem 1.25rem; }
.page-hero .panel { border-color: #b9c7d9; }
@media (min-width: 60rem) { .page-hero .panel { justify-self: end; width: min(100%, 22rem); } }
.process > .process-title { align-self: start; }
.field input, .field select, .field textarea { border-width: 1px; border-color: var(--soft-ink); }
.process-list li::marker { font-family: var(--font-display); font-style: normal; }
.link-arrow, .email-link, .article-back, .card-title, .plain-email { text-decoration-color: currentColor; }
.insight-card a.card-title { text-decoration-color: currentColor; }
.example-grid > li.insight-card { position: relative; padding: 1.25rem 1.25rem 1.5rem; border: 1px solid #b9c7d9; border-radius: 4px; background: var(--color-surface); }
.example-grid > li.insight-card:hover { border-color: var(--forest); }
.insight-card a.card-title { text-decoration: none; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.05; }
.insight-card a.card-title::after { content: ''; position: absolute; inset: 0; border-radius: 4px; }
.insight-card:hover a.card-title, .insight-card a.card-title:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.article-body { font-size: 1.125rem; line-height: 1.75; }
.article-body h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.12; }
.article-body > h2:first-child { margin-top: 0; }
.container.article-head { max-width: var(--container); }
.article-head > * { max-width: 48rem; }
.article-head .display { font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.75rem); letter-spacing: -.005em; }
.section { padding-block: clamp(3rem, 6vw, 6rem); }
.showcase-home { --display-m: clamp(2.125rem, 1.5rem + 1.9vw, 3rem); --display-s: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); --title: clamp(1.375rem, 1.15rem + .7vw, 1.875rem); }
.showcase-home h1, .showcase-home h2, .showcase-home h3 { text-wrap: balance; }
.showcase-home :where(h1,h2,h3,p,figure) { margin: 0; }
.product-hero { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2.5rem, 2rem + 2.5vw, 4rem); }
/* Hero: one featured plate per game, chosen from a catalogue-style index.
   Rule: a packaged game stands on its own flat colour plate; a game without an
   approved box render is shown as play on a real table. Never both in one frame. */
.product-hero .hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "index" "feature"; gap: 1.75rem; }
.product-hero .hero-lead { grid-area: copy; min-width: 0; }
.product-hero .hero-title { margin-top: 1.1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1; letter-spacing: -.005em; }
.product-hero .hero-title span { display: block; color: var(--rust); }
.product-hero .hero-intro { max-width: 34em; margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.55; color: var(--soft-ink); text-wrap: pretty; }
.product-hero .hero-actions { margin-top: 1.5rem; gap: .75rem 1.75rem; }
.product-hero .hero-index { grid-area: index; min-width: 0; }
.product-hero .hero-index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--forest); }
.product-hero .hero-index-label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.product-hero .hero-index-hint { font-size: .8125rem; color: var(--soft-ink); text-align: end; }
.product-hero .hero-index-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-hero .hero-index-list button { display: grid; align-content: center; gap: .3rem; min-width: 0; min-height: 4.25rem; padding: .65rem .75rem; border: 0; border-bottom: 1px solid #b9c7d9; background: transparent; color: var(--forest); font: inherit; text-align: start; cursor: pointer; touch-action: manipulation; box-shadow: inset 0 -3px 0 transparent; }
.product-hero .hero-index-list button + button { border-inline-start: 1px solid #b9c7d9; }
.product-hero .hero-index-list button:hover { background: #dce7f5; }
.product-hero .hero-index-list button[aria-pressed='true'] { background: var(--color-surface); box-shadow: inset 0 -3px 0 var(--forest); }
.product-hero .index-number { font: 700 .75rem/1 ui-monospace, monospace; color: var(--rust); font-variant-numeric: tabular-nums; }
.product-hero .index-name { font: 700 1.25rem/1.05 var(--font-display); overflow-wrap: break-word; }
.product-hero .index-kind { display: none; font-size: .8125rem; line-height: 1.3; color: var(--soft-ink); }
.product-hero .hero-index-static { list-style: none; margin: 0; padding: 0; }
.product-hero .hero-index-static a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.375rem; padding-inline: 1rem .9rem; border-bottom: 1px solid #b9c7d9; color: var(--forest); font: 700 1.5rem/1.1 var(--font-display); text-decoration-color: var(--rust); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.product-hero .hero-feature { grid-area: feature; min-width: 0; }
.product-hero .hero-plate { position: relative; aspect-ratio: 604 / 512; overflow: clip; border-radius: 4px; background: var(--citrus); perspective: 1200px; isolation: isolate; }
.product-hero .hero-plate[data-active='fly'] { background: var(--sky); }
.product-hero .hero-plate[data-active='fire'] { background: var(--forest); }
.product-hero .hero-scene { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0; visibility: hidden; transform: translate3d(0, 0, -90px); }
.product-hero .hero-plate[data-active='planet'] .hero-scene--planet,
.product-hero .hero-plate[data-active='fly'] .hero-scene--fly,
.product-hero .hero-plate[data-active='fire'] .hero-scene--fire { opacity: 1; visibility: visible; transform: none; }
/* Packaging stands on one shared floor line at 88% of the plate height. */
.product-hero .hero-scene img { position: absolute; left: 50%; translate: -50% 0; width: auto; max-width: none; transform: translate3d(0, 12px, -60px); }
.product-hero .hero-plate[data-active='planet'] .hero-scene--planet img,
.product-hero .hero-plate[data-active='fly'] .hero-scene--fly img { transform: none; }
.product-hero .hero-scene--planet img { height: 94%; bottom: 5.5%; }
.product-hero .hero-scene--fly img { height: 106%; bottom: -7.9%; }
/* The official renders carry a faint rectangular shadow floor to the canvas edge.
   Fade only that floor's outer edges; the boxes (measured opaque bounds) stay untouched. */
.product-hero .hero-scene--planet img { -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 18%, #000 82%, transparent 96%), linear-gradient(#000 91%, transparent 99%); mask-image: linear-gradient(to right, transparent 4%, #000 18%, #000 82%, transparent 96%), linear-gradient(#000 91%, transparent 99%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.product-hero .hero-scene--fly img { -webkit-mask-image: linear-gradient(to right, transparent 3%, #000 15%, #000 85%, transparent 97%), linear-gradient(#000 82%, transparent 92%); mask-image: linear-gradient(to right, transparent 3%, #000 15%, #000 85%, transparent 97%), linear-gradient(#000 82%, transparent 92%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.product-hero .hero-scene--fire img { inset: 0; translate: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: none; }
.product-hero .hero-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; margin-top: .9rem; }
.product-hero .hero-caption-name { font: 700 1.625rem/1 var(--font-display); }
.product-hero .hero-caption-fact { margin-top: .4rem; max-width: 46ch; font-size: .875rem; line-height: 1.45; color: var(--soft-ink); text-wrap: pretty; }
.product-hero .hero-caption .link-arrow { font-size: .9375rem; }
.chapter { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.chapter--planet { background: var(--forest); color: var(--paper); }
.chapter--planet :focus-visible, .closing :focus-visible { outline-color: var(--citrus); }
.chapter--flight { background: var(--sky); }
.chapter-heading { display: flex; align-items: baseline; gap: .5rem 1rem; border-bottom: 1px solid; border-color: color-mix(in oklab, currentColor 32%, transparent); padding-bottom: 1.1rem; }
.chapter-index { flex: none; white-space: nowrap; font: 700 .75rem/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.chapter-heading .eyebrow { min-width: 0; color: inherit; text-wrap: balance; }
.chapter-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(2rem,5vw,5rem); align-items: center; padding-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.chapter-copy { display: grid; align-content: start; gap: 1.25rem; }
.chapter-copy h2 { font: 700 var(--display-m)/1 var(--font-display); letter-spacing: -.005em; }
.chapter--planet .chapter-copy h2 { color: var(--citrus); }
.chapter-copy .chapter-description { line-height: 1.65; max-width: 39ch; text-wrap: pretty; }
.game-specs { display: flex; gap: .5rem 1.75rem; flex-wrap: wrap; margin: 0; padding-block: .9rem; border-top: 1px solid; border-bottom: 1px solid; border-color: color-mix(in oklab, currentColor 32%, transparent); }
.game-specs div { display: grid; gap: .3rem; }
.game-specs dt { font-size: .8125rem; color: var(--soft-ink); }
.chapter--planet .game-specs dt { color: #c4d2e5; }
.game-specs dd { margin: 0; font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.chapter--planet :where(a,.link-arrow) { color: var(--citrus); }
.chapter--planet .btn-primary { background: var(--citrus); color: var(--forest); }
.chapter--planet .btn-primary:hover, .closing .btn-primary:hover { background: #f6f8fc; }
.chapter-photo { position: relative; }
.chapter-photo img { width: 100%; height: auto; display: block; border-radius: 4px; }
.chapter-photo figcaption { margin-top: .8rem; font-size: .75rem; opacity: .86; }
.board-number { position: absolute; bottom: 1rem; left: 1rem; background: var(--citrus); color: var(--forest); border-radius: 50%; width: 4.7rem; height: 4.7rem; display: grid; align-content: center; text-align: center; font: 700 1.6rem/1 var(--font-display); }
.board-number span { font: .65rem/1.4 var(--font-sans); }
.card-theatre { perspective: 1000px; position: relative; aspect-ratio: 1.1; }
.card-theatre .cards-photo { position: absolute; width: 72%; left: 16%; top: 5%; transform: rotateZ(8deg) rotateY(-10deg) translateZ(30px); filter: drop-shadow(0 30px 15px rgba(17,36,52,.12)); }
.card-theatre .flight-box { position: absolute; width: 57%; left: -8%; bottom: -1%; transform: rotateZ(-13deg) rotateY(8deg) translateZ(-20px); }
.card-theatre[data-open='true'] .cards-photo { transform: translate3d(12%, -7%, 80px) rotateZ(16deg) rotateY(-7deg); }
.card-theatre[data-open='true'] .flight-box { transform: translate3d(-6%,9%,-40px) rotateZ(-18deg); }
.flight-code { position: absolute; left: 0; top: -2%; color: #2258a5; font: 700 clamp(3rem,5vw,5rem)/1 var(--font-display); letter-spacing: .08em; }
.flight-code small { display: block; font: .75rem/1.5 ui-monospace, monospace; letter-spacing: .05em; }
.explore-button { background: transparent; border: 1px solid var(--forest); color: var(--forest); padding: .65rem 1rem; border-radius: 2rem; min-height: 44px; cursor: pointer; font: 600 .875rem var(--font-sans); }
.explore-button:hover { background: var(--paper); }
.explore-button[aria-pressed='true'] { background: var(--forest); color: var(--paper); }
.workshop { background: var(--paper); }
.workshop-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; padding-bottom: 2.5rem; }
.workshop-heading h2 { font: 700 var(--display-m)/1 var(--font-display); letter-spacing: -.005em; margin-top: 1rem; }
.workshop-heading p:not(.eyebrow) { max-width: 38ch; line-height: 1.65; color: var(--soft-ink); text-wrap: pretty; }
.studio-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.studio-steps li { border-top: 1px solid var(--forest); padding-top: 1.2rem; }
.studio-steps .step-number { font: 700 .75rem/1 ui-monospace, monospace; color: var(--rust); font-variant-numeric: tabular-nums; }
.studio-steps h3 { font: 700 var(--title)/1.05 var(--font-display); letter-spacing: -.005em; margin-block: .5rem .6rem; }
.studio-steps p { line-height: 1.6; font-size: 1rem; max-width: 32ch; color: var(--soft-ink); text-wrap: pretty; }
.workshop .actions { margin-top: 2.5rem; }
.retail-line { background: var(--citrus); border-top: 1px solid var(--forest); border-bottom: 1px solid var(--forest); padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.retail-line .container { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.retail-line h2 { font: 700 var(--display-s)/1 var(--font-display); letter-spacing: -.005em; margin-bottom: .6rem; }
.retail-line p { max-width: 52ch; color: var(--soft-ink); text-wrap: pretty; }
.journal-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2rem; }
.journal-head h2 { font: 700 var(--display-m)/1 var(--font-display); letter-spacing: -.005em; margin-top: 1rem; }
.journal-list { list-style: none; padding: 0; margin: 0; }
.journal-list li { border-top: 1px solid #b9c7d9; }
.journal-list li:last-child { border-bottom: 1px solid #b9c7d9; }
.journal-list a { color: var(--forest); text-decoration: none; display: grid; grid-template-columns: 10rem minmax(0,1fr) 3rem; align-items: center; gap: 1.5rem; padding-block: 1.5rem; }
.journal-list .journal-category { font-size: .75rem; }
.journal-list h3 { font: 700 var(--title)/1.05 var(--font-display); letter-spacing: -.005em; }
.journal-list .journal-arrow { font-size: 2rem; }
.journal-list a:is(:hover, :focus-visible) h3 { color: var(--rust); }
.journal-list a:focus-visible { outline-offset: 4px; }
.closing { background: var(--forest); color: var(--paper); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.closing .container { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.closing h2 { font: 700 var(--display-m)/1 var(--font-display); letter-spacing: -.005em; }
.closing h2 span { color: var(--citrus); }
.closing-copy { display: grid; gap: 1.5rem; justify-items: start; }
.closing-copy p { max-width: 36ch; line-height: 1.6; text-wrap: pretty; }
.closing .btn-primary { background: var(--citrus); color: var(--forest); }
.closing .plain-email { color: var(--paper); text-underline-offset: .25em; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer { border-top: 1px solid #526581; padding-top: 3rem; }
/* Footer links are inline-flex, which trims the space before a visible '(zunanja stran)' text run. */
.footer-nav a { column-gap: .3em; }
.showcase-home [hidden] { display: none !important; }
.sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: no-preference) {
  .product-hero .hero-plate { transition: background-color 360ms ease; }
  .product-hero .hero-scene { transition: opacity 240ms ease-out, transform 240ms ease-out, visibility 0s linear 240ms; }
  .product-hero .hero-plate[data-active='planet'] .hero-scene--planet,
  .product-hero .hero-plate[data-active='fly'] .hero-scene--fly,
  .product-hero .hero-plate[data-active='fire'] .hero-scene--fire { transition: opacity 480ms cubic-bezier(.2,.75,.25,1), transform 480ms cubic-bezier(.2,.75,.25,1), visibility 0s; }
  .product-hero .hero-scene img { transition: transform 640ms cubic-bezier(.2,.75,.25,1); }
  .cards-photo, .flight-box { transition: transform 650ms cubic-bezier(.2,.75,.25,1); }
  .product-hero .hero-index-list button { transition: background-color 160ms ease, box-shadow 160ms ease; }
  .explore-button { transition: background 160ms ease; }
  .journal-list .journal-arrow { transition: transform 160ms ease; }
  .journal-list a:is(:hover, :focus-visible) .journal-arrow { transform: translate(3px, -3px); }
}
@media (max-width: 60rem) {
  .chapter-grid { gap: 2rem; }
}
@media (max-width: 63.99rem) {
  .flight-code small { display: none; }
}
@media (max-width: 45rem) {
  .header-inner { flex-wrap: nowrap; gap: .55rem; }
  .brand img { width: 8rem; }
  .header-inner > .main-nav { display: none; }
  .lang-link { padding-inline: .55rem; margin-left: auto; min-height: 44px; border-color: #7488a3; border-radius: 4px; }
  .mobile-nav { display: block; position: relative; color: var(--paper); }
  .mobile-nav summary { min-height: 44px; display: flex; align-items: center; padding-inline: .55rem; cursor: pointer; font-size: .875rem; border: 1px solid #7488a3; border-radius: 4px; }
  .mobile-nav summary::after { content: '+' / ''; margin-left: .45rem; }
  .mobile-nav[open] summary::after { content: '−' / ''; }
  .mobile-nav-links { position: absolute; top: calc(100% + .5rem); right: 0; width: 15rem; background: var(--forest); border: 1px solid #7488a3; border-radius: 4px; box-shadow: 0 14px 32px rgba(16,40,75,.35); padding: .8rem; z-index: 30; }
  .mobile-nav-links ul { list-style: none; margin: 0; padding: 0; }
  .mobile-nav-links a { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; color: var(--paper); font-size: 1rem; }
  .mobile-nav-links a:hover, .mobile-nav-links a[aria-current='page'] { color: var(--citrus); }
  .mobile-nav-links a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
  .chapter-grid { grid-template-columns: 1fr; padding-top: 2rem; }
  .chapter-heading .eyebrow::before { display: none; }
  .chapter-photo { order: 2; }
  .chapter--planet .chapter-copy { order: 1; }
  .card-theatre { order: 2; }
  .card-theatre[data-open='true'] .cards-photo { transform: translate3d(1%,-5%,40px) rotateZ(12deg) rotateY(-5deg) scale(.92); }
  .board-number { width: 3.7rem; height: 3.7rem; font-size: 1.3rem; }
  .workshop-heading, .closing .container { grid-template-columns: 1fr; gap: 1.5rem; }
  .studio-steps { grid-template-columns: 1fr; gap: 2rem; }
  .studio-steps p { max-width: 45ch; }
  .retail-line .container, .journal-head { flex-direction: column; align-items: start; }
  .journal-list a { grid-template-columns: minmax(0,1fr) 2rem; gap: .6rem; }
  .journal-list .journal-category { grid-column: 1/-1; }
}
/* Studio table (home and games pages): a three.js scene where official renders are projected onto
   3D boxes, a tin and a tube; the HTML panel stays the accessible interface and the no-WebGL fallback. */
.studio { --display-m: clamp(2.125rem, 1.5rem + 1.9vw, 3rem); --display-s: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); background: var(--forest); color: var(--paper); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.studio :focus-visible { outline-color: var(--citrus); }
.studio .eyebrow { color: var(--citrus); }
.studio-head { display: grid; gap: 1rem 3rem; align-items: end; padding-bottom: 1.75rem; border-bottom: 1px solid color-mix(in oklab, currentColor 32%, transparent); }
.studio-head h2 { margin-top: 1rem; font: 700 var(--display-m)/1 var(--font-display); letter-spacing: -.005em; color: var(--citrus); text-wrap: balance; }
.studio-intro { max-width: 42ch; line-height: 1.6; color: #c4d2e5; text-wrap: pretty; }
.studio-body { display: grid; gap: 1.25rem; padding-top: 1.75rem; }
.studio-stage { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: clip; background: #16345b; }
.studio-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.studio-canvas:active { cursor: grabbing; }
.studio-fallback { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 6%; }
.studio-stage.is-live .studio-fallback { display: none; }
.studio-shelf { display: flex; align-items: flex-end; justify-content: center; gap: 2%; width: 100%; }
.studio-shelf img { width: 19%; height: auto; }
.studio-views { position: absolute; z-index: 2; inset-block-start: .75rem; inset-inline-end: .75rem; display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }
.studio-view { min-height: 44px; padding: .5rem .95rem; border: 1px solid rgba(246, 248, 252, .5); border-radius: 2rem; background: rgba(16, 40, 75, .86); color: var(--paper); font: 600 .875rem var(--font-sans); cursor: pointer; touch-action: manipulation; }
.studio-view:hover { border-color: var(--citrus); }
.studio-view[aria-pressed='true'] { border-color: var(--citrus); background: var(--citrus); color: var(--forest); }
.studio-panel { display: grid; align-content: start; gap: .85rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid color-mix(in oklab, currentColor 28%, transparent); border-radius: 4px; }
.studio-count { font: 700 .75rem/1 ui-monospace, monospace; color: var(--citrus); font-variant-numeric: tabular-nums; }
.studio-name { font: 700 var(--display-s)/1.02 var(--font-display); letter-spacing: -.005em; text-wrap: balance; }
.studio-type { line-height: 1.5; color: #c4d2e5; text-wrap: pretty; }
.studio .game-specs dt { color: #c4d2e5; }
.studio .btn-primary { border-color: var(--citrus); background: var(--citrus); color: var(--forest); }
.studio .btn-primary:hover { background: #f6f8fc; }
.studio-controls { display: grid; gap: .5rem; padding-top: .5rem; }
.studio-select-label { font-size: .8125rem; color: #c4d2e5; }
.studio-select { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid #7488a3; border-radius: 4px; background: #0b1e39; color: var(--paper); font: inherit; font-size: 1rem; }
.studio-step { display: flex; gap: .5rem; }
.studio .btn-tool { flex: 1; border-color: rgba(246, 248, 252, .5); color: var(--paper); }
.studio .btn-tool:hover { background: #234875; }
.studio-note { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin-top: 1.25rem; font-size: .8125rem; color: #c4d2e5; }
.studio-note .link-arrow { color: var(--paper); text-decoration-color: var(--citrus); }
@media (min-width: 40rem) { .studio-stage { aspect-ratio: 16 / 11; } }
@media (min-width: 64rem) {
  .studio-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .studio-body { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
  .studio-stage { aspect-ratio: auto; min-height: 34rem; }
}
/* Without 3D the stage shrinks to a shelf of official images. */
.studio-stage:not(.is-live) { aspect-ratio: auto; min-height: 0; }
.studio-stage:not(.is-live) .studio-fallback { position: static; padding: 2rem 1.25rem; }
.studio-shelf { flex-wrap: wrap; row-gap: 1rem; }
@media (max-width: 39.99rem) { .studio-shelf img { width: 30%; } }
/* Story mode (home): native scrolling drives the pinned stage. Added by JS only when 3D runs and
   motion is welcome; without it the section is the ordinary interactive table. */
.studio.is-story .studio-track { height: calc(var(--shots, 16) * 46vh + 100vh); }
.studio.is-story .studio-sticky { position: sticky; top: 0; display: grid; align-content: center; min-height: 100vh; padding-block: 1rem; }
.studio.is-story .studio-body { padding-top: 0; }
.studio.is-story .studio-stage { aspect-ratio: auto; height: min(84vh, 50rem); }
@media (max-width: 63.99rem) {
  .studio.is-story .studio-body { position: relative; }
  .studio.is-story .studio-stage { height: calc(100vh - 2rem); height: calc(100svh - 2rem); }
  .studio.is-story .studio-panel { position: absolute; inset-inline: .75rem; inset-block-end: .75rem; gap: .4rem; padding: .9rem 1rem; background: rgba(16, 40, 75, .9); }
  .studio.is-story .studio-controls, .studio.is-story .studio-type { display: none; }
  .studio.is-story .studio-facts { padding-block: .5rem; }
  .studio.is-story .studio-name { font-size: 1.5rem; }
}
/* Games portfolio grid. Product display plates retain their original catalogue colours. */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 2.75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.game-card { display: grid; align-content: start; gap: .45rem; }
.game-card-plate { display: grid; place-items: center; margin: 0 0 .6rem; aspect-ratio: 1; overflow: clip; border-radius: 4px; background: #d7ed91; }
.game-card-plate--sky { background: #dbe6ea; }
.game-card-plate--paper { background: #fffdf8; box-shadow: inset 0 0 0 1px #e1dccd; }
.game-card-plate--rust { background: #f2d6c9; }
.game-card-plate--forest { background: #132e2b; }
.game-card-plate img { width: 94%; height: auto; }
.game-card-plate.is-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Same edge fade as the hero for the two renders whose faint shadow floor reaches the canvas edge. */
.game-card-plate img[src$='no-planet-b-box.png'], .studio-shelf img[src$='no-planet-b-box.png'] { -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 18%, #000 82%, transparent 96%), linear-gradient(#000 91%, transparent 99%); mask-image: linear-gradient(to right, transparent 4%, #000 18%, #000 82%, transparent 96%), linear-gradient(#000 91%, transparent 99%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.game-card-plate img[src$='lets-fly-box.png'], .studio-shelf img[src$='lets-fly-box.png'] { -webkit-mask-image: linear-gradient(to right, transparent 3%, #000 15%, #000 85%, transparent 97%), linear-gradient(#000 82%, transparent 92%); mask-image: linear-gradient(to right, transparent 3%, #000 15%, #000 85%, transparent 97%), linear-gradient(#000 82%, transparent 92%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.games-page .page-hero .container { display: grid; gap: 1rem; }
.game-card-number { font: 700 .75rem/1 ui-monospace, monospace; color: var(--rust); font-variant-numeric: tabular-nums; }
.game-card-name { font: 700 clamp(1.5rem, 1.25rem + .7vw, 1.875rem)/1.05 var(--font-display); letter-spacing: -.005em; text-wrap: balance; }
.game-card-type { font-size: .9375rem; line-height: 1.45; color: var(--soft-ink); text-wrap: pretty; }
.game-card .game-specs { border-color: #b9c7d9; }
.game-card .link-arrow { justify-self: start; }
.games-others { margin-top: 2.75rem; color: var(--soft-ink); }
.games-custom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.games-custom > div > p { max-width: 48ch; margin-top: .75rem; color: var(--soft-ink); }
/* Forced colours: the pressed state is a system highlight fill, so the outline stays reserved for keyboard focus. */
@media (forced-colors: active) {
  .product-hero .hero-index-list button { border: 1px solid ButtonText; }
  .product-hero .hero-index-list button[aria-pressed='true'] { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; }
  .product-hero .hero-index-list button[aria-pressed='true'] :is(.index-number, .index-kind) { color: SelectedItemText; }
}
/* Hero breakpoints: kept separate so the shared header and chapter rules above stay untouched. */
@media (max-width: 39.99rem) {
  .product-hero .hero-layout { gap: 1.25rem; }
  .product-hero .hero-title { margin-top: .75rem; }
  .product-hero .hero-intro { margin-top: 1rem; font-size: 1rem; }
  .product-hero .hero-actions { margin-top: 1.25rem; gap: .5rem 1.5rem; }
  .product-hero .hero-index-head { padding-bottom: .45rem; }
  .product-hero .hero-index-hint { font-size: .75rem; }
  .product-hero .hero-index-list button { min-height: 3.75rem; padding: .55rem .6rem; gap: .2rem; align-content: start; }
  .product-hero .index-name { font-size: 1.0625rem; }
  .product-hero .hero-feature { margin-inline: calc(-1 * var(--gutter)); }
  .product-hero .hero-plate { aspect-ratio: 4 / 3; border-radius: 0; }
  .product-hero .hero-caption { padding-inline: var(--gutter); }
}
@media (min-width: 40rem) {
  /* A stable caption height keeps the index and the next chapter still when the selection changes. */
  .product-hero .hero-caption { flex-wrap: nowrap; align-items: flex-start; min-height: 5rem; }
  .product-hero .hero-caption > div { flex: 1 1 auto; min-width: 0; }
  .product-hero .hero-caption .link-arrow { flex: none; }
  .product-hero .index-kind { display: block; }
  .product-hero .index-name { font-size: 1.5rem; }
  .product-hero .hero-index-list button { min-height: 5rem; padding: .75rem 1rem; }
}
@media (min-width: 64rem) {
  .product-hero .hero-layout { grid-template-columns: minmax(0, 470fr) minmax(0, 604fr); grid-template-areas: "copy feature" "index feature"; grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 1rem + 3vw, 3.5rem); row-gap: 2.25rem; }
  .product-hero .hero-index { align-self: start; }
  .product-hero .hero-index-list { grid-template-columns: minmax(0, 1fr); }
  .product-hero .hero-index-list button { grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: 0 .5rem; min-height: 3.375rem; padding: .4rem .9rem .4rem 1rem; }
  .product-hero .hero-index-list button + button { border-inline-start: 0; }
  .product-hero .hero-index-list button[aria-pressed='true'] { box-shadow: inset 4px 0 0 var(--forest); }
  .product-hero .index-name { font-size: 1.625rem; }
  .product-hero .index-kind { font-size: .875rem; text-align: end; }
}

/* Scroll-linked reveals across the site: tied to the native scroll position, CSS only, and only
   where the browser supports view timelines and the visitor welcomes motion. Content is fully
   visible everywhere else. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .chapter-grid > *, .chapter-heading, .studio-head, .studio-steps li, .workshop-heading > *, .journal-list li,
    .retail-line .container > *, .closing .container > *, .game-card, .section-head, .example-grid > li,
    .service-grid li, .process-list li, .split-lead, .split-side, .article-body > * {
      animation: vag-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 24%;
    }
    .chapter-photo { overflow: clip; border-radius: 4px; }
    .chapter-photo img { animation: vag-settle linear both; animation-timeline: view(); animation-range: cover 0% cover 60%; }
  }
}
@keyframes vag-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes vag-settle { from { transform: scale(1.08); } to { transform: none; } }