/* ROUND 3c (XGF fix pass, after CRIT-MOTION2 / CRIT-TECH2): the start page opens in the DINING ROOM (section 11: the film already runs in a hearth arch that stands on the room's real fire, the aperture is the
   arch, not a circle), the candle table moved to the closing scene (section 5), the fire plate no longer fades by progress (section 10: a foot feather instead) and the closing runway is sized in px (index.html
   script). Evidence: evidence/r3/final10/XGF (tools, data, SAFE_ZONE_MAP.json).
   ZS R3 XG "Glöd" LIVING-PLATE STAGE (r3x-glod-stage.css), round 3b-2b. ZS's own code. Loaded by the Glöd pages AFTER r3-stage.css and r3x-glod.css.
   David (2026-10-06, on the Max page): "skit bra: nu får paketsidan den premium känslan och cinematiska känslan jag var ute efter" and the feel "bör bevaras i alla Max-paket men med sin nisch".
   Glöd's niche: FIRE, EMBERS, CANDLE LIGHT, walnut, near-black. So the engine's cool near-black (#0C0C0F) is re-toned to Glöd's own night (#140D08), the gold accent to Glöd's ember (#EC6A3E), the type to
   Cormorant + Inter, and every ambient layer is warm: embers + a flicker + heat shimmer over the flame film, real candle flames and a light pool on the hero table, candle points and the open kitchen's fire on the dining room.
   CONTENTS  0 tokens  1 hero ambient (sub-pages: the candle table lives; 11 = the start page first screen)  2 scene A "Elden": STATIC composition  3 scene A LIVE: copy, compositions, accessories  4 scene A phones: the clip shown WHOLE (no zoom)
             5 scene B "Mellan rätterna": static + live  6 ambient layers (flicker, heat shimmer, candle points)  7 film control  8 sub-pages: a calmer living hero  9 reduced motion / no JS
   The engine's contract (STAGE_ENGINE.md) is used as is: markup r3s / r3s__pin / r3s__world / r3s__plate / r3s__media / r3s__states; this file only styles it. No layout property animates. */

/* ================================ 0. TOKENS ================================ */
.gx-scene {
  --r3s-floor: #140D08; --r3s-gold: #EC6A3E; --r3s-ink: #F1E6D0; --r3s-ink2: #D3C5AB;
  --r3-f-serif: var(--gx-serif); --r3-f-text: var(--gx-sans); --r3-f-display: var(--gx-sans);
  --gutter: var(--gx-gutter); --wrap: var(--gx-wrap); --r3s-edge: var(--gx-edge); --r3s-nav: var(--gx-head); --r3-fade: var(--gx-fade);
  --r3s-my: 0%;
  background: var(--gx-night); color: var(--gx-ink);
}
/* the engine's own near-black (rgba 12,12,15) is the ZS floor; Glöd's grade bottoms out at #140D08, so every shade and dim of the engine is re-toned */
.gx-scene .r3s__shade { background: linear-gradient(90deg, rgba(20, 13, 8, .97) 0, rgba(20, 13, 8, .95) 22%, rgba(20, 13, 8, .82) 34%, rgba(20, 13, 8, .5) 47%, rgba(20, 13, 8, .18) 60%, rgba(20, 13, 8, .04) 70%, rgba(20, 13, 8, 0) 78%); }
.gx-scene .r3s__dim { background: radial-gradient(120% 110% at 55% 50%, rgba(20, 13, 8, 0) 52%, rgba(20, 13, 8, .5) 100%); }
@media (orientation: portrait) {
  .gx-scene .r3s__shade { background: linear-gradient(180deg, rgba(20, 13, 8, .97) 0, rgba(20, 13, 8, .95) 24%, rgba(20, 13, 8, .82) 36%, rgba(20, 13, 8, .5) 47%, rgba(20, 13, 8, .18) 56%, rgba(20, 13, 8, .04) 63%, rgba(20, 13, 8, 0) 70%); }
}
.gx-scene .r3s__world[data-zone="bottom"] .r3s__shade { background: linear-gradient(180deg, rgba(20, 13, 8, .97) 0, rgba(20, 13, 8, .95) 24%, rgba(20, 13, 8, .82) 36%, rgba(20, 13, 8, .5) 47%, rgba(20, 13, 8, .18) 56%, rgba(20, 13, 8, .04) 63%, rgba(20, 13, 8, 0) 70%); }
.gx-scene.r3s.is-live .r3s__ring, .gx-scene .r3s__ring { box-shadow: 0 0 0 1px rgba(236, 106, 62, .7), 0 0 90px 10px rgba(236, 106, 62, .2); }
.gx-scene.is-live[data-r3s-open] .r3s__world[data-world="a"] > .r3s__plate::before { background: radial-gradient(closest-side at 50% 50%, rgba(40, 14, 2, .5), rgba(40, 14, 2, .34)); }
.gx-scene.is-live .r3s__open span::before { background: radial-gradient(closest-side, rgba(20, 13, 8, .86) 0, rgba(20, 13, 8, .84) 64%, rgba(20, 13, 8, 0) 100%); }
.gx-scene .r3s__open { font-family: var(--gx-serif); font-variant-numeric: lining-nums; }
.gx-scene .r3s__open span + span { color: var(--gx-ember); }
.gx-scene .r3s__idx i.is-past { background: rgba(236, 106, 62, .55); }

/* ================================ 1. HERO AMBIENT: the candle table lives ================================ */
/* the engine's hero host (data-r3s-amb): two candle flames placed on the picture by natural-image coordinates, a light pool on the table, drifting dust, a slow push-in. The sandwich word GLÖD rides in the same
   push, so the candles never move against it. Everything is off with html.no-motion (r3-stage.css section 11). */
.gx-plate .r3s-push { position: relative; width: 100%; transform-origin: 50% 76%; }
.gx-plate .r3s-push > picture { display: block; }
.gx-plate .r3s__cv { display: block; z-index: 2; }
html.lib-on .gx-plate .r3s-flame, html.lib-on .gx-plate .r3s-pool { transition-delay: 1.5s; }   /* after the picture has resolved (1.4 s): the flame is placed on the finished picture, never on the zooming one */
.gx-plate.is-paused .r3s-push, .gx-plate.is-paused .r3s-flame i, .gx-plate.is-paused .r3s-flame::before, .gx-plate.is-paused .r3s-pool { animation-play-state: paused; }
html.no-motion .gx-plate .r3s-push { animation: none; }

/* ================================ 2. SCENE A "ELDEN": STATIC COMPOSITION (reduced motion, no JS) ================================ */
/* the plate band: the flame still with the headline on its foot; then the craft statement (01) as the night plane and the three steps as rows (picture left / right, the last one a full-bleed fire) */
.gx-scene--fire:not(.is-live) .r3s__plate { aspect-ratio: 5 / 6; max-height: 82vh; max-height: 82svh; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-scene--fire:not(.is-live) .r3s__plate { aspect-ratio: 5 / 2; max-height: max(70vh, 300px); max-height: max(70svh, 300px); }
  .gx-scene--fire:not(.is-live) .r3s__media img { object-position: 50% 100%; }   /* the lower part of the frame: the headline lies on the dark pan and the flames, not on the bright foam */
}
.gx-scene--fire:not(.is-live) .r3s__world[data-world="a"] > .r3s__plate::after { display: block; background: radial-gradient(72% 95% at 10% 66%, rgba(20, 13, 8, .88) 0, rgba(20, 13, 8, .72) 42%, rgba(20, 13, 8, .26) 74%, rgba(20, 13, 8, 0) 100%), linear-gradient(0deg, rgba(20, 13, 8, .95) 0, rgba(20, 13, 8, .62) 110px, rgba(20, 13, 8, 0) 210px); }
.gx-scene--fire:not(.is-live) .r3s__world[data-world="a"] > .r3s__open { margin: 0 var(--gx-edge) calc(var(--gx-hinge) * .48); max-width: 11em; font: 600 clamp(3.2rem, 1.2rem + 7vw, 8rem)/.9 var(--gx-serif); letter-spacing: -.022em; color: var(--gx-ink); font-variant-numeric: lining-nums; z-index: 5; }
.gx-scene--fire:not(.is-live) .r3s__open span { display: inline; }
.gx-scene--fire:not(.is-live) .r3s__world[data-world="a"] { background: var(--gx-night); }
.gx-scene:not(.is-live) .r3s__idx, .gx-scene:not(.is-live) .r3s__meta { display: none; }
.gx-scene:not(.is-live) .r3s-w { display: inline; overflow: visible; }

.gx-num { margin: 0; font: 600 var(--gx-hinge)/1 var(--gx-serif); letter-spacing: -.03em; font-variant-numeric: lining-nums; color: var(--gx-ember); pointer-events: none; }
.gx-t { margin: 0; font-family: var(--gx-serif); font-weight: 600; font-style: normal; font-variant-numeric: lining-nums; color: var(--gx-ink); text-wrap: balance; }
.gx-t .gx-em { color: var(--gx-ember); } .gx-t .gx-tail { color: var(--gx-ink-3); }

/* 01: the numeral lies on the foot of the plate (W-51), the statement stands in the night under it */
.gx-scene--fire:not(.is-live) .gx-st--1 { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 var(--gx-edge) clamp(40px, 5vw, 72px); background: var(--gx-night); margin-top: calc(var(--gx-hinge) * -.34); }
.gx-scene--fire:not(.is-live) .gx-st--1 .gx-num { margin-bottom: clamp(20px, 3vw, 44px); }
.gx-scene--fire:not(.is-live) .gx-st--1 .gx-kicker { margin-bottom: 20px; }
.gx-scene--fire:not(.is-live) .gx-st--1 .gx-t { font-size: var(--gx-t-state); line-height: 1.12; letter-spacing: -.012em; font-weight: 400; max-width: 17em; }
.gx-scene--fire:not(.is-live) .gx-st--1 .gx-body { margin-top: clamp(32px, 4vw, 56px); font-size: 1.125rem; }
.gx-scene--fire:not(.is-live) .gx-st--1 .gx-st__link { margin: 18px 0 0; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-scene--fire:not(.is-live) .gx-st--1 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; }
  .gx-scene--fire:not(.is-live) .gx-st--1 > .gx-num, .gx-scene--fire:not(.is-live) .gx-st--1 > .gx-kicker, .gx-scene--fire:not(.is-live) .gx-st--1 > .gx-t { grid-column: 1 / -1; }
  .gx-scene--fire:not(.is-live) .gx-st--1 .gx-body { grid-column: 1; grid-row: 4; }
  .gx-scene--fire:not(.is-live) .gx-st--1 .gx-st__link { grid-column: 2; grid-row: 4; margin: clamp(32px, 4vw, 56px) 0 0; align-self: start; }
}

/* the three steps: phones = the picture, then its words, three times; from 700 px two columns, the sides alternate, the last row is a full-bleed fire */
.gx-scene--fire:not(.is-live) .gx-steps { --gx-ffade: clamp(40px, 5vw, 84px); list-style: none; margin: 0; padding: clamp(40px, 5vw, 72px) var(--gx-edge) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; background: var(--gx-night); }
.gx-scene--fire:not(.is-live) .gx-steps .gx-st { display: flex; flex-direction: column; padding: 0 0 28px; min-width: 0; }
.gx-scene--fire:not(.is-live) .gx-steps .gx-kicker { margin-bottom: 14px; }
.gx-scene--fire:not(.is-live) .gx-steps .gx-t { font-size: min(clamp(2.5rem, 1.5rem + 3.6vw, 4.8rem), 15vw); line-height: .96; letter-spacing: -.02em; margin-bottom: 18px; max-width: 8em; }
.gx-scene--fire:not(.is-live) .gx-steps .gx-body { max-width: 34em; }
.gx-scene--fire:not(.is-live) .gx-acc { order: -1; position: relative; overflow: hidden; margin: 0 0 22px; aspect-ratio: 16 / 11; background: var(--gx-night); }
.gx-scene--fire:not(.is-live) .gx-acc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gx-scene--fire:not(.is-live) .gx-acc--yolk img { object-position: 50% 55%; }
.gx-scene--fire:not(.is-live) .gx-acc--hands img { object-position: 22% 50%; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-scene--fire:not(.is-live) .gx-steps { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) clamp(16px, 2.2vw, 32px); align-items: center; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--2, .gx-scene--fire:not(.is-live) .gx-steps .gx-st--3 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(16px, 2.2vw, 32px); padding: 0; grid-column: 1 / -1; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--2 > :not(.gx-acc) { grid-column: 1 / 6; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--3 > :not(.gx-acc) { grid-column: 8 / -1; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--2 > .gx-kicker, .gx-scene--fire:not(.is-live) .gx-steps .gx-st--3 > .gx-kicker { grid-row: 2; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--2 > .gx-t, .gx-scene--fire:not(.is-live) .gx-steps .gx-st--3 > .gx-t { grid-row: 3; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--2 > .gx-body, .gx-scene--fire:not(.is-live) .gx-steps .gx-st--3 > .gx-body { grid-row: 4; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--2 > .gx-acc, .gx-scene--fire:not(.is-live) .gx-steps .gx-st--3 > .gx-acc { grid-row: 1 / -1; width: 100%; aspect-ratio: 16 / 10; max-height: max(70vh, 260px); margin: 0; align-self: center; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--2 > .gx-acc { grid-column: 7 / -1; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--3 > .gx-acc { grid-column: 1 / 7; }
  /* the full-bleed row: the fire fills the plane edge to edge, its top and foot melt into the night, the copy sits on the dark left of the picture */
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--4 { position: relative; isolation: isolate; grid-column: 1 / -1; margin-inline: calc(var(--gx-edge) * -1); width: calc(100% + var(--gx-edge) * 2); padding: calc(var(--gx-ffade) * 1.8) var(--gx-edge) calc(var(--gx-ffade) * .8 + 12px); min-height: 300px; max-height: none; overflow: clip; justify-content: flex-end; }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--4 > :not(.gx-acc) { max-width: min(34rem, 46%); }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--4 > .gx-acc { position: absolute; inset: 0; z-index: -1; margin: 0; width: auto; aspect-ratio: auto; max-height: none; background: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--gx-ffade), #000 calc(100% - var(--gx-ffade)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--gx-ffade), #000 calc(100% - var(--gx-ffade)), transparent 100%); }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--4 > .gx-acc img { width: min(100%, 1920px); margin-inline: auto; object-position: 50% 80%; --gx-sf: clamp(0px, calc(100vw - 1920px), 220px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gx-sf), #000 calc(100% - var(--gx-sf)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gx-sf), #000 calc(100% - var(--gx-sf)), transparent 100%); }
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--4 > .gx-acc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20, 13, 8, .92) 0, rgba(20, 13, 8, .8) 30%, rgba(20, 13, 8, .34) 56%, rgba(20, 13, 8, 0) 76%), linear-gradient(0deg, rgba(20, 13, 8, .55) 0, rgba(20, 13, 8, 0) 40%); }
}

/* ================================ 3. SCENE A LIVE: the copy over the plate (landscape: the left safe zone; portrait: the top zone) ================================ */
.gx-scene.is-live .gx-st { padding: 0; background: none; }
.gx-scene.is-live .gx-num { font-size: clamp(4.6rem, min(15vh, 9vw), 10.5rem); margin: 0 0 .06em -.04em; }
.gx-scene.is-live .gx-kicker { margin: 0 0 .9em; color: var(--gx-ember-2); text-shadow: none; }
.gx-scene.is-live .gx-t { margin: 0; font-size: clamp(2.3rem, min(4.9vw, 9vh), 5.6rem); line-height: 1; letter-spacing: -.02em; max-width: 9.6em; color: var(--r3s-ink); }
.gx-scene.is-live .gx-t .gx-tail { color: var(--gx-ink-2); }   /* the grey clause stays AA over the moving plate */
.gx-scene.is-live .gx-body, .gx-scene.is-live .gx-lead { margin: .9em 0 0; max-width: 24em; font: 400 clamp(1.0625rem, calc(min(1.4vw, 2.7vh) + .3rem), 1.45rem)/1.55 var(--gx-sans); color: var(--r3s-ink2); text-wrap: pretty; }
.gx-scene.is-live .gx-st__link { margin: 1.1em 0 0; }
.gx-scene.is-live .r3s__state { width: min(44vw, 700px); }
/* COMPOSITIONS (data-comp): the same words in four layouts of the safe zone, so the sequence is not one slide repeated.
     statement  the numeral, a tracked kicker, the long sentence (the craft statement)             poster  one short line at poster scale, the sentence small under it
     low        the block sits lower in the zone (the subject rises in the frame)                  high    the block sits higher, the tracked word stays small                        */
.gx-scene--fire.is-live .gx-st--2 .gx-t { font-size: clamp(3.6rem, min(9.4vw, 17vh), 10rem); line-height: .9; letter-spacing: -.035em; max-width: 6.2em; margin-bottom: .1em; }
.gx-scene--fire.is-live .gx-st--2 .gx-body { font-size: clamp(1rem, calc(min(1.15vw, 2.2vh) + .3rem), 1.25rem); }
.gx-scene--fire.is-live .gx-st--3 .gx-t { font-size: clamp(2.8rem, min(6.6vw, 12vh), 7.4rem); line-height: .94; max-width: 6em; }
.gx-scene--fire.is-live .gx-st--4 .gx-t { font-size: clamp(2.6rem, min(5.8vw, 11vh), 6.6rem); line-height: .96; max-width: 7em; }
@media (orientation: landscape) {
  .gx-scene--fire.is-live .gx-st--3 { top: 62%; }
  .gx-scene--fire.is-live .gx-st--4 { top: 42%; }
}
/* accessories: the picture of the step as a medallion (a round plate, ember ring), never over the fire */
.gx-scene.is-live .gx-acc { margin: clamp(18px, 3.4vh, 38px) 0 0; }
.gx-scene.is-live .gx-acc img { display: block; width: clamp(96px, 10.4vw, 168px); height: clamp(96px, 10.4vw, 168px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(236, 106, 62, .7), 0 0 0 7px var(--r3s-floor), 0 0 0 8px rgba(241, 230, 208, .22); }
.gx-scene.is-live .gx-acc--yolk img { object-position: 50% 52%; }
.gx-scene.is-live .gx-acc--hands img { object-position: 22% 50%; }
.gx-scene.is-live .gx-acc--pan { display: none; }   /* the fire itself is the plate in this step */
.gx-scene.is-live .gx-st--1 .gx-st__link .gx-link, .gx-scene.is-live .gx-actions .gx-btn { pointer-events: auto; }
@media (max-height: 520px) and (orientation: landscape) {
  .gx-scene.is-live .gx-num { display: none; }
  .gx-scene.is-live .gx-t, .gx-scene--fire.is-live .gx-st--3 .gx-t, .gx-scene--fire.is-live .gx-st--4 .gx-t { font-size: clamp(1.7rem, 8.4vh, 2.4rem); }
  .gx-scene--fire.is-live .gx-st--2 .gx-t { font-size: clamp(2.4rem, 13vh, 3.6rem); }
  .gx-scene.is-live .gx-body, .gx-scene.is-live .gx-lead { font-size: .9375rem; line-height: 1.45; margin-top: .6em; }
  .gx-scene.is-live .gx-kicker { margin-bottom: .5em; font-size: .75rem; }
  .gx-scene.is-live .gx-acc { display: none; }
  .gx-scene--fire.is-live .gx-st--3, .gx-scene--fire.is-live .gx-st--4 { top: 50%; }
}
/* release QA 2026-10-13: in landscape windows up to 520 px high the engine centres the block on the middle line (top 50%, translateY -50%); the long states grew above the header and the kicker landed under it
   (667x375: 1.1:1, 844x390: 2.9:1). The block now starts 56 px below the header (under the 56 px scrim fade): kickers 5.2-6.3:1 at 360-414 px high. */
@media (max-height: 520px) and (orientation: landscape) {
  .gx-scene.is-live .r3s__state, .gx-scene--fire.is-live .gx-st--3, .gx-scene--fire.is-live .gx-st--4 { top: calc(var(--r3s-nav) + 56px); transform: none; }
  /* the aperture headline (Elden / ar tand.) flies out by 34 vw of a window that is only 667-844 px wide here: "Elden" started 36 px left of the screen and "ar tand." ended 77-56 px right of it while fully
     visible. Smaller type and a 12 vw flight keep both words inside the window (83-614 of 667, 146-732 of 844). */
  .gx-scene--fire.is-live .r3s__open { font-size: clamp(1.8rem, calc(4.6vw + 3vh), 3rem); }
  .gx-scene--fire.is-live .r3s__open span:first-child { transform: translate(calc(var(--e, 1) * -12vw), -50%); }
  .gx-scene--fire.is-live .r3s__open span + span { transform: translate(calc(var(--e, 1) * 12vw), -50%); }
}

/* ================================ 4. SCENE A PHONES: the flame is shown WHOLE, with air around it (David's red flag: the fire was zoomed into a blur) ================================ */
/* Before: the 3:4 portrait clip was cover-cropped by a tall window (a 390x844 window showed 61 % of a clip that is itself only 42 % of the frame: the pan filled the screen, the flames were a blur, about 3.9x the
   desktop magnification). Now a portrait window gets the LANDSCAPE lite clip and the landscape poster in a 4:3 box that is as wide as the window and anchored to the foot of the pin: 75 % of the frame
   (the whole pan, flames and burner), roughly the desktop magnification, sharp (a 960 px clip drawn 521 px wide). The dark above it is the copy's zone (the picture's top melts into it, the embers drift
   across it); the subject-alone state lifts the box to the middle of the window. */
@media (orientation: portrait) {
  .gx-scene--fire { --gx-bh: min(calc(100vh - clamp(190px, 38vh, 330px)), 75vw); --gx-bh: min(calc(100svh - clamp(190px, 38svh, 330px)), 75vw); }   /* the height of the 4:3 box */
  .gx-scene--fire.is-live .r3s__world[data-world="a"] .r3s__media { inset: auto 0 0 0; height: var(--gx-bh);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 9%, #000 26%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 9%, #000 26%, #000 86%, transparent 100%); }
  .gx-scene--fire.is-live .r3s__media img, .gx-scene--fire.is-live .r3s__media video { object-position: 50% 60%; }
  .gx-scene--fire[data-pose="clean"] .r3s__flick { opacity: 0 !important; }   /* the picture is lifted away from the foot of the window: its warm spill must not stay behind on the floor */
  /* (the aperture window of the start page is the hearth arch of section 11: its own start offset and zoom) */
  .gx-scene--fire[data-pose="text"] .r3s__world.is-active .r3s__media { --my: 0%; --ms: 1; }
  .gx-scene--fire[data-pose="clean"] .r3s__world.is-active .r3s__media { --my: calc((var(--gx-bh) - 100vh) / 2); --my: calc((var(--gx-bh) - 100svh) / 2); --ms: 1.08; }   /* the subject alone: the box rises to the middle of the window, air above and below it */
  .gx-scene.is-live .r3s__state { width: auto; }
  .gx-scene--fire.is-live .r3s__state { top: calc(var(--r3s-nav) + 18px); }
  /* release QA 2026-10-13: the kicker of states 2-4 (Ravaran, Handerna, Elden) sat at nav + 18 px, inside the 56 px fade of the header scrim (best contrast 2.2 : 1 at 320-820 px wide). 44 px puts it below the fade (5.6-6.4 : 1); state 1 keeps its position (its first line is the numeral) */
  .gx-scene--fire.is-live .gx-st--2, .gx-scene--fire.is-live .gx-st--3, .gx-scene--fire.is-live .gx-st--4 { top: calc(var(--r3s-nav) + 44px); }
  .gx-scene--hall.is-live .r3s__state { top: calc(var(--r3s-nav) + 44px); }   /* the hall scene state (Mellan ratterna) had the same kicker under the fade: 2.5 -> 5.8 : 1 */
  .gx-scene.is-live .gx-num { font-size: clamp(3.4rem, min(9vh, 17vw), 5rem); }
  .gx-scene.is-live .gx-t { font-size: clamp(2rem, min(9.2vw, 5vh), 3rem); max-width: none; }
  .gx-scene--fire.is-live .gx-st--2 .gx-t { font-size: clamp(3rem, min(17vw, 7.4vh), 5rem); }
  .gx-scene--fire.is-live .gx-st--3 .gx-t, .gx-scene--fire.is-live .gx-st--4 .gx-t { font-size: clamp(2.3rem, min(11vw, 5.8vh), 3.6rem); max-width: none; }
  .gx-scene.is-live .gx-body, .gx-scene.is-live .gx-lead { font-size: clamp(1rem, 4.2vw, 1.15rem); max-width: 30em; margin-top: .7em; }
  .gx-scene.is-live .gx-acc img { width: clamp(72px, 20vw, 96px); height: clamp(72px, 20vw, 96px); }
  .gx-scene.is-live .gx-kicker { margin-bottom: .6em; }
}
@media (orientation: portrait) and (max-height: 700px) { .gx-scene.is-live .gx-acc { display: none; } .gx-scene.is-live .gx-num { font-size: 3rem; } }
@media (orientation: portrait) and (max-height: 620px) {   /* 320x568, 360x640 and shorter: the block must end above the picture's faded top */
  .gx-scene--fire.is-live .gx-st--1 .gx-t { font-size: clamp(1.7rem, 8.2vw, 2.1rem); }
  .gx-scene--fire.is-live .gx-st--1 .gx-body { font-size: .9375rem; line-height: 1.42; margin-top: .55em; }
  .gx-scene--fire.is-live .gx-st--1 .gx-kicker { margin-bottom: .4em; }
  .gx-scene--fire.is-live .gx-st--1 .gx-st__link { margin-top: .5em; }
  .gx-scene--fire.is-live .gx-st--1 .gx-st__link .gx-link { min-height: 44px; }
}

/* ================================ 5. SCENE B "MELLAN RÄTTERNA": the candle table (round 3c: the dining room moved to the first screen, the table lives here) ================================ */
/* static: the table as a plate band (the render's black floor is baked to the night, so the band melts into the walnut plane above and the strip below), the copy as the walnut plane with the 03 hinge and the ghost word */
.gx-scene--hall:not(.is-live) .r3s__plate { aspect-ratio: 5 / 6; max-height: 82vh; max-height: 82svh; background: linear-gradient(180deg, var(--gx-walnut) 0, var(--gx-night) var(--gx-fade)); }   /* the plane above is walnut: the band starts as walnut and melts to the night of the picture */
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-scene--hall:not(.is-live) .r3s__plate { aspect-ratio: 16 / 9; max-height: max(70vh, 300px); max-height: max(70svh, 300px); } }
.gx-scene--hall:not(.is-live) .r3s__media .gx-table, .gx-scene--hall .gx-table .r3s-push, .gx-scene--hall .gx-table picture { width: 100%; height: 100%; }
.gx-table { position: absolute; inset: 0; }
.gx-table .r3s-push { position: relative; transform-origin: 50% 76%; }
.gx-scene--hall .r3s__media img { object-fit: cover; object-position: 50% 62%; }
.gx-scene--hall:not(.is-live) .r3s__plate > .r3s__media { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--gx-fade), #000 calc(100% - 110px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--gx-fade), #000 calc(100% - 110px), transparent 100%); }
.gx-scene--hall:not(.is-live) .r3s__world { display: block; }
.gx-scene--hall:not(.is-live) .r3s__states { display: block; }
.gx-scene--hall:not(.is-live) .r3s__world[data-world="a"] > .r3s__plate::after { display: none; }   /* the engine's cool foot scrim: the table melts through its own mask */
.gx-scene--hall:not(.is-live) .gx-st--b { position: relative; z-index: 2; margin-top: calc(var(--gx-dip) * -.4); overflow-x: clip; overflow-y: visible; padding-bottom: clamp(88px, 9.6vw, 150px); }
.gx-scene--hall:not(.is-live) .gx-st--b > .gx-num { position: absolute; left: var(--gx-edge); top: 0; z-index: 4; transform: translateY(-20%); }
.gx-scene--hall:not(.is-live) .gx-st--b { padding-top: clamp(100px, 9.5vw, 140px); }
.gx-scene--hall:not(.is-live) .gx-st--b > :not(.gx-num):not(.gx-ghost) { position: relative; z-index: 1; }
.gx-scene--hall:not(.is-live) .gx-st--b > * + * { margin-top: 22px; }
.gx-scene--hall:not(.is-live) .gx-st--b > .gx-kicker + .gx-t { margin-top: 14px; }
.gx-scene--hall:not(.is-live) .gx-st--b .gx-t { font-size: var(--gx-t-h2); line-height: .96; letter-spacing: -.02em; }
.gx-scene--hall:not(.is-live) .gx-st--b .gx-actions { margin-top: 32px; }
.gx-scene--hall:not(.is-live) .gx-st--b > .gx-ghost { position: absolute; }

/* live: the table fills the pin (the source is 2560 px wide: never enlarged); in the text pose the plate makes room on the left (the engine shifts it right by --r3s-mx), the copy stands in the left zone
   (portrait: the top zone, the table as a 4:5 box on the foot of the window, its top melted into the night); the last state is the table alone, its candles lit */
.gx-scene--hall.is-live .gx-st--b { padding: 0 !important; background: none; overflow: visible !important; width: min(44vw, 640px); display: block; }   /* .gx-gather (the old held-plate chapter) sets !important padding + clip */
.gx-scene--hall.is-live .gx-st--b::before { display: none; }
.gx-scene--hall.is-live .gx-st--b .gx-t { font-size: clamp(2.4rem, min(5.2vw, 9vh), 6rem); max-width: 8em; }
.gx-scene--hall.is-live .gx-st--b .gx-lead { margin-top: .8em; }
.gx-scene--hall.is-live .gx-st--b .gx-actions { margin: 1.1em 0 0; }
.gx-scene--hall.is-live .gx-st--b .gx-actions .gx-btn { pointer-events: auto; --h: 52px; background: rgba(20, 13, 8, .74); }   /* a candle or a plate can stand behind the button on a short window: the button keeps its own ground (AA) */
.gx-scene--hall.is-live .gx-ghost { display: none; }
@media (orientation: portrait) {
  .gx-scene--hall.is-live .r3s__world[data-world="a"] .r3s__media { inset: auto 0 calc(-1 * clamp(0px, 800px - 100vh, 150px)) 0; inset: auto 0 calc(-1 * clamp(0px, 800px - 100svh, 150px)) 0; height: min(125vw, 78vh); height: min(125vw, 78svh);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 9%, #000 26%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 9%, #000 26%, #000 100%); }
  .gx-scene--hall.is-live .gx-st--b { width: auto; }
  .gx-scene--hall.is-live .gx-st--b > .gx-num { display: block; margin: 0 0 .2em -.04em; font-size: clamp(3.4rem, min(9vh, 17vw), 5rem); }
  .gx-scene--hall.is-live .gx-st--b .gx-t { font-size: clamp(2.3rem, min(10.4vw, 5.6vh), 3.4rem); max-width: none; }
  .gx-scene--hall.is-live .gx-st--b .gx-lead { font-size: clamp(1rem, 4.2vw, 1.15rem); margin-top: .7em; }
  .gx-scene--hall[data-pose="text"] .r3s__world[data-world="a"].is-active .r3s__media { --mx: 0%; --my: var(--gx-hall-dy, 0px); --ms: 1; transform-origin: 50% 100%; }   /* round 3d: --gx-hall-dy (r3x-glod-stage.js section 4) lowers the table just enough that the button of the copy stands clear of the candle flames */
  .gx-scene--hall[data-pose="clean"] .r3s__world.is-active .r3s__media { --my: 0%; --ms: 1.04; transform-origin: 50% 100%; }
}
@media (orientation: portrait) and (max-height: 700px) { .gx-scene--hall.is-live .gx-st--b > .gx-num { display: none; } }
/* landscape phones: the same left zone, a smaller block */
@media (max-height: 520px) and (orientation: landscape) {
  .gx-scene--hall.is-live .gx-st--b { width: min(50vw, 520px); }
  .gx-scene--hall.is-live .gx-st--b > .gx-num { display: none; }
  .gx-scene--hall.is-live .gx-st--b .gx-t { font-size: clamp(1.7rem, 8.4vh, 2.4rem); }
  .gx-scene--hall.is-live .gx-st--b .gx-lead { font-size: .9375rem; line-height: 1.45; margin-top: .6em; }
  .gx-scene--hall.is-live .gx-st--b .gx-kicker { font-size: .75rem; margin-bottom: .5em; }
}

/* ================================ 6. AMBIENT LAYERS ================================ */
/* heat shimmer over the flames (only while no real film plays: .has-film puts it away): three soft warm columns that rise and breathe, opacity + translate only */
.gx-haze { position: absolute; inset: 40% 12% 0 12%; pointer-events: none; opacity: 1; transition: opacity .6s; }
.gx-haze i { position: absolute; bottom: 0; width: 22%; height: 78%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: linear-gradient(0deg, rgba(255, 150, 70, .16), rgba(255, 150, 70, .05) 55%, rgba(255, 150, 70, 0)); mix-blend-mode: screen; will-change: transform, opacity; animation: gx-haze 5.6s ease-in-out infinite; }
.gx-haze i:nth-child(1) { left: 6%; animation-duration: 6.2s; animation-delay: -1.1s; }
.gx-haze i:nth-child(2) { left: 38%; width: 26%; animation-duration: 5.1s; animation-delay: -3s; }
.gx-haze i:nth-child(3) { left: 72%; animation-duration: 7.3s; animation-delay: -4.4s; }
@keyframes gx-haze { 0% { transform: translate3d(0, 6%, 0) scaleX(.9); opacity: .15; } 45% { opacity: 1; } 100% { transform: translate3d(2%, -8%, 0) scaleX(1.12); opacity: .25; } }
.r3s__plate.has-film .gx-haze { opacity: 0; }
.gx-scene.is-paused .gx-haze i { animation-play-state: paused; }
/* candle points + the open kitchen's fire on the dining room (placed on the picture by natural-image coordinates, r3x-glod-stage.js; sizes follow the picture) */
.gx-room { position: relative; width: 100%; height: 100%; transform-origin: 50% 60%; }
.gx-room > picture { display: block; width: 100%; height: 100%; }
.gx-flare-set { position: absolute; inset: 0; pointer-events: none; }
.gx-flare { --u: calc(var(--gx-dw, 1440px) * .01); position: absolute; left: 0; top: 0; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); margin: calc(var(--u) * -.75) 0 0 calc(var(--u) * -.75); border-radius: 50%; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(255, 190, 110, .6) 36%, rgba(255, 140, 60, .18) 70%, rgba(255, 120, 40, 0) 100%); mix-blend-mode: screen; will-change: opacity, transform; animation: gx-fl-a 2.3s ease-in-out infinite alternate, gx-fl-b 3.1s steps(1, end) infinite; animation-delay: var(--fd, 0s), var(--fd2, 0s); }
.gx-flare.is-set { opacity: 1; }
.gx-flare::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 7); height: calc(var(--u) * 7); margin: calc(var(--u) * -3.5) 0 0 calc(var(--u) * -3.5); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 160, 70, .26), rgba(255, 130, 50, .08) 55%, rgba(255, 120, 40, 0) 100%); }
.gx-flare--fire { width: calc(var(--u) * 2.1); height: calc(var(--u) * 3.2); margin: calc(var(--u) * -2.6) 0 0 calc(var(--u) * -1.05); border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%; transform-origin: 50% 100%; animation-duration: 1.7s, 2.6s; }
.gx-flare--fire::before { width: calc(var(--u) * 15); height: calc(var(--u) * 11); margin: calc(var(--u) * -6.5) 0 0 calc(var(--u) * -7.5); background: radial-gradient(closest-side, rgba(255, 150, 60, .3), rgba(255, 120, 40, .1) 55%, rgba(255, 110, 30, 0) 100%); }
@keyframes gx-fl-a { from { transform: scale(.86, .9); } to { transform: scale(1.12, 1.16); } }
@keyframes gx-fl-b { 0% { filter: brightness(1); } 17% { filter: brightness(.78); } 34% { filter: brightness(1.12); } 52% { filter: brightness(.86); } 71% { filter: brightness(1.06); } 86% { filter: brightness(.74); } 100% { filter: brightness(1); } }
.gx-scene--hall.is-paused .gx-flare, .gx-scene--hall.is-paused .gx-table .r3s-push, .gx-scene--hall.is-paused .gx-table .r3s-flame i, .gx-scene--hall.is-paused .gx-table .r3s-flame::before, .gx-scene--hall.is-paused .gx-table .r3s-pool { animation-play-state: paused; }

/* ================================ 7. FILM CONTROL (the engine's meta row) ================================ */
.gx-scene .r3s__meta { right: var(--gx-edge); }
.gx-scene .gx-film-btn { position: relative; }
@media (orientation: portrait) { .gx-scene.is-live .r3s__meta { left: var(--gx-gutter); right: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } .gx-scene.is-live .r3s__idx { bottom: calc(18px + 56px); left: var(--gx-gutter); } }

/* ================================ 9. REDUCED MOTION / NO JS ================================ */
html.no-motion .gx-scene .r3s__ambient, html.no-motion .gx-haze, html.no-motion .gx-flare-set { display: none !important; }
html.no-motion .gx-first .gx-room { animation: none; }
.gx-flare--lamp { --u: calc(var(--gx-dw, 1440px) * .007); animation-duration: 4.4s, 5.3s; }
.gx-flare--lamp::before { width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin: calc(var(--u) * -4.5) 0 0 calc(var(--u) * -4.5); }

/* ================================ 10. HAND-OVERS TO THE NEIGHBOURING PLANES (tone rule: no photographic edge, ever) ================================ */
/* ROUND 3c (CRIT-MOTION2 MAJOR: the fire plate went dark while the last promise was still on screen, the subject-alone beat was never seen, then a second of empty brown): the plate no longer fades by the scene's
   progress. The engine's time latch shows the last promise and the beat after it LATER than the scroll reaches them, so a scroll-driven fade took the picture away first. The pin now keeps the picture to the very end
   and the FOOT OF THE SCENE carries a feather of its own: the last runway pixels and the release of the pin are covered by a gradient into the plane below (the scene's own ::after, at the bottom of its runway). */
.gx-scene--fire.is-live::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--gx-fade) + 70px); z-index: 12; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 13, 8, 0) 0, rgba(20, 13, 8, .34) 28%, rgba(20, 13, 8, .72) 58%, rgba(20, 13, 8, .94) 82%, #140D08 100%); }
/* scene B sits between two walnut planes: its top starts as walnut (the blend rides the foot of the plane above until the pin takes hold), its end dissolves into walnut again (the same foot feather) */
.gx-scene--hall.is-live .r3s__pin::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--gx-fade) + 60px); z-index: 7; pointer-events: none; background: linear-gradient(180deg, #271A10 0%, rgba(39, 26, 16, .9) 28%, rgba(39, 26, 16, .5) 62%, rgba(39, 26, 16, 0) 100%); opacity: calc(1 - var(--p, 0) * 30); }
.gx-scene--hall.is-live::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--gx-fade) + 70px); z-index: 12; pointer-events: none;
  background: linear-gradient(180deg, rgba(39, 26, 16, 0) 0, rgba(39, 26, 16, .34) 28%, rgba(39, 26, 16, .72) 58%, rgba(39, 26, 16, .94) 82%, #271A10 100%); }

/* ================================ 11. THE FIRST SCREEN: the dining room and the hearth arch (round 3c, fix pass) ================================ */
/* WHY: CRIT-MOTION2 (MAJOR x2) and panel-4 P4-044: the Glöd start page opened exactly like the Max page (the candle table, a circle that opens onto the same pan film, numbered states), and its first screen was a still
   table in a black field, a level BELOW the Growth heroes that play a film at first sight.
   NOW: the page opens in the DINING ROOM at night (the open kitchen's fire at the back, candles on every table: a code-made flicker on each flame, drifting dust, a very slow push-in), and the film is already RUNNING
   in a HEARTH ARCH that stands on the kitchen counter, on the real fire of the picture (the first frame has a film in it). Scrolling opens the arch (G-03, W-05: scrubbed, its own shape, its own centre: the
   fire of the room) into the full-bleed fire while the copy of the first screen clears. The candle table (the Max page's opening) now lives only in the closing scene "Mellan rätterna".
   Geometry: --gx-ax / --gx-ay = the arch's centre line and its base in px of the pin (written by r3x-glod-stage.js from the picture's fire), --gx-aw / --gx-ah its size, --gx-fx0 / --gx-fy0 where the flames of the
   film stand in the pin (so that the flames start inside the arch), --gx-g = how closed the arch still is (1 -> 0 over the first .8 of the aperture). The engine's circle (r3-stage.css section 6) is replaced here. */
.gx-scene--fire { --gx-aw: clamp(170px, 18vmin, 300px); --gx-ah: calc(var(--gx-aw) * 1.4); --gx-ax: 70vw; --gx-ay: 46vh; --gx-fx0: 50vw; --gx-fy0: 80vh; }
@supports (height: 1svh) { .gx-scene--fire { --gx-ay: 46svh; --gx-fy0: 80svh; } }
@media (orientation: portrait) { .gx-scene--fire { --gx-hdrop: calc(-1 * clamp(0px, (800px - 100vh) * .45, 90px)); --gx-aw: clamp(112px, 33vw, 190px); --gx-ah: calc(var(--gx-aw) * 1.3); --gx-ax: 56vw; --gx-ay: 56vh; --gx-fx0: 50vw; --gx-fy0: 86vh; } }
@supports (height: 1svh) { @media (orientation: portrait) { .gx-scene--fire { --gx-hdrop: calc(-1 * clamp(0px, (800px - 100svh) * .45, 90px)); --gx-ay: 56svh; --gx-fy0: 86svh; } } }

/* the block (the whole first screen: static, reduced motion, no JS); in the live pin it dissolves (display: contents) and its children stand directly on the pin */
.gx-scene--fire .gx-first { --gx-fh: max(calc(380px + (1rem - 16px) * 45), 100vh); position: relative; isolation: isolate; height: min(var(--gx-fh), 1040px); background: var(--gx-night); overflow: clip; }
@supports (height: 1svh) { .gx-scene--fire .gx-first { --gx-fh: max(calc(380px + (1rem - 16px) * 45), 100svh); } }   /* the same height as the pin: the demo bar takes the first --gx-bar px of it at scroll 0, the copy keeps clear of it (padding below), so the static block and the pin lay out identically (no layout shift when the engine takes over) */
.gx-scene--fire.is-live .gx-first { display: contents; }

/* the dining room: never above its 1440 px source (wider windows centre it and melt its sides), the top 6 % and the foot melt into the night */
.gx-scene--fire .gx-first .gx-room { --gx-sf: clamp(0px, calc(100vw - 1440px), 240px); --gx-rb: var(--gx-fade); position: absolute; z-index: 0; inset: 0; margin: auto; width: min(100%, 1440px); height: min(100%, 900px); transform-origin: 70% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gx-sf), #000 calc(100% - var(--gx-sf)), transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 calc(100% - var(--gx-rb)), transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gx-sf), #000 calc(100% - var(--gx-sf)), transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 calc(100% - var(--gx-rb)), transparent 100%); mask-composite: intersect; }
.gx-scene--fire.is-live .gx-room { --gx-rb: 28px; }
@media (orientation: landscape) and (max-width: 1440px) { .gx-scene--fire.is-live .gx-first .gx-room { -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 899px), (pointer: coarse) { .gx-scene--fire .gx-first .gx-dust { display: none; } html:not(.no-motion) .gx-scene--fire .gx-first .gx-room { animation: none; will-change: auto; } }   /* phones and tablets: the room keeps still under the opening arch (a full-window layer in motion: 25 ms frames at 4x CPU, 16.7 without); its flares are the life */
.gx-scene--fire .gx-first .gx-room picture, .gx-scene--fire .gx-first .gx-room img { display: block; width: 100%; height: 100%; }
.gx-scene--fire .gx-first .gx-room img { object-fit: cover; object-position: 60% 46%; }
html:not(.no-motion) .gx-scene--fire .gx-first .gx-room { animation: gx-hall-push 44s ease-in-out infinite alternate; will-change: transform; }
@keyframes gx-hall-push { from { transform: scale(1); } to { transform: scale(1.03); } }
html.lib-on .gx-scene--fire .gx-first .gx-room picture { animation: gx-resolve 1.4s var(--gx-ease) both; }
html.lib-on .gx-scene--fire .gx-first .gx-flare { transition-delay: 1.5s; }   /* the flares are placed on the finished picture, never on the one that is still resolving */
.gx-scene--fire.is-paused .gx-room, .gx-scene--fire.is-paused .gx-flare, .gx-scene--fire.is-paused .gx-flare::before { animation-play-state: paused; }
/* the flares of the room are cheap on purpose (the room under the opening arch cost 2x frame time under CPU throttle in software compositing, mostly nine animated layers): five lights, no blend mode, no filter animation, one transform pulse each */
.gx-scene--fire .gx-first .gx-flare { mix-blend-mode: normal; animation: gx-fl-a 2.3s ease-in-out infinite alternate; animation-delay: var(--fd, 0s); }
.gx-scene--fire .gx-first .gx-flare--fire { animation-duration: 1.7s; }
.gx-scene--fire .gx-first .gx-flare::before { animation: none; }

.gx-scene--fire .gx-first .gx-dust { z-index: 0; }   /* the room, its dust and its shade (DOM order) all stand BELOW the film plate (z 1): nothing of the first screen may dim the film while the arch opens */
.gx-first__shade { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 13, 8, .8) 0, rgba(20, 13, 8, .55) calc(var(--gx-head) * .85), rgba(20, 13, 8, 0) calc(var(--gx-head) + 64px)),   /* the header row: its links stay AA over a lit kitchen on short windows */
    linear-gradient(90deg, rgba(20, 13, 8, .95) 0, rgba(20, 13, 8, .92) 18%, rgba(20, 13, 8, .78) 34%, rgba(20, 13, 8, .45) 46%, rgba(20, 13, 8, .12) 58%, rgba(20, 13, 8, 0) 70%), radial-gradient(130% 120% at 64% 46%, rgba(20, 13, 8, 0) 52%, rgba(20, 13, 8, .5) 100%); }

/* the copy (landscape: the left column, centred; portrait: the headline and the ask on top, the lead and the hours at the foot) */
.gx-scene--fire .gx-first .gx-hero__copy { position: absolute; z-index: 6; left: var(--gx-edge); top: 0; bottom: 0; width: min(46vw, 640px); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--gx-head) + 8px) 0 calc(64px + var(--gx-bar)); }
.gx-scene--fire .gx-first .gx-kicker { color: var(--gx-ink-2); }
.gx-scene--fire .gx-first .gx-h1 { font-size: min(var(--gx-t-h1), 12.5vh); line-height: .9; margin-top: 16px; }
@supports (height: 1svh) { .gx-scene--fire .gx-first .gx-h1 { font-size: min(var(--gx-t-h1), 12.5svh); } }
.gx-scene--fire .gx-first .gx-lead { font-size: clamp(1.0625rem, .9vw + .6rem, 1.3rem); margin-top: 22px; }
.gx-scene--fire .gx-first .gx-actions { margin-top: 26px; }
.gx-scene--fire .gx-first .gx-cue { position: absolute; z-index: 6; left: var(--gx-edge); bottom: calc(22px + var(--gx-bar)); display: inline-flex; align-items: center; gap: .7em; min-height: 44px; color: var(--gx-ink-2); font: 500 .875rem/1 var(--gx-sans); text-decoration: none; }
.gx-scene--fire .gx-first .gx-cue:hover { color: var(--gx-ink); }
html.lib-on .gx-scene--fire .gx-first .gx-rise { opacity: 0; animation: gx-rise 1.1s var(--gx-ease) forwards; animation-delay: calc(.15s + var(--i, 0) * .09s); }
.no-motion .gx-scene--fire .gx-first .gx-rise { opacity: 1 !important; animation: none !important; }
.no-motion .gx-scene--fire .gx-first .gx-room picture { animation: none !important; opacity: 1 !important; }
@media (orientation: landscape) and (max-height: 520px) {
  .gx-scene--fire .gx-first .gx-hero__copy { width: min(48vw, 480px); padding: calc(var(--gx-head) + 2px) 0 calc(10px + var(--gx-bar)); }
  .gx-scene--fire .gx-first .gx-kicker, .gx-scene--fire .gx-first .gx-cue { display: none; }
  .gx-scene--fire .gx-first .gx-h1 { margin-top: 0; font-size: min(var(--gx-t-h1), 11vh); }
  .gx-scene--fire .gx-first .gx-lead { margin-top: 10px; font-size: .8125rem; line-height: 1.4; }
  .gx-scene--fire .gx-first .gx-actions { margin-top: 12px; }
  .gx-scene--fire .gx-first .gx-btn { --h: 44px; padding: 0 20px; font-size: .9375rem; }
  .gx-scene--fire .gx-first .gx-hours { margin-top: 8px; font-size: .75rem; }
}
@media (orientation: portrait) {
  .gx-scene--fire .gx-first .gx-room { inset: auto 0 var(--gx-hdrop, 0px) 0; width: 100%; height: auto; aspect-ratio: 4 / 5; margin: 0; transform-origin: 50% 42%; }
  .gx-scene--fire .gx-first .gx-room img { object-position: 50% 50%; }
  .gx-scene--fire .gx-first .gx-room { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 14%, #000 34%, #000 calc(100% - var(--gx-rb)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .5) 14%, #000 34%, #000 calc(100% - var(--gx-rb)), transparent 100%); }
  .gx-first__shade { background: linear-gradient(180deg, rgba(20, 13, 8, .96) 0, rgba(20, 13, 8, .92) 22%, rgba(20, 13, 8, .6) 36%, rgba(20, 13, 8, 0) 50%), linear-gradient(0deg, rgba(20, 13, 8, .93) 0, rgba(20, 13, 8, .82) calc(13% + (1rem - 16px) * 14), rgba(20, 13, 8, .42) calc(25% + (1rem - 16px) * 22), rgba(20, 13, 8, 0) calc(38% + (1rem - 16px) * 30)); }   /* b6 fix61: the shade follows the text size (the lead moved onto the lit hearth at 150 %) */
  .gx-scene--fire .gx-first .gx-hero__copy { left: 0; right: 0; width: auto; justify-content: flex-start; padding: calc(var(--gx-head) + 20px) var(--gx-edge) calc(28px + var(--gx-bar)); }
  .gx-scene--fire .gx-first .gx-hero__head, .gx-scene--fire .gx-first .gx-hero__more { display: contents; }
  .gx-scene--fire .gx-first .gx-kicker { order: 1; } .gx-scene--fire .gx-first .gx-h1 { order: 2; font-size: min(var(--gx-t-h1), 11.5vw, 11svh); } .gx-scene--fire .gx-first .gx-actions { order: 3; margin-top: 20px; margin-bottom: 16px; }
  .gx-scene--fire .gx-first .gx-lead { order: 4; margin-top: auto; font-size: clamp(1.0625rem, 4.4vw, 1.25rem); } .gx-scene--fire .gx-first .gx-hours { order: 5; margin-top: 12px; }
  .gx-scene--fire .gx-first .gx-cue { display: none; }
}
/* short phones (320x568, 360x640): there is no room for the lead and the hours at the foot AND the arch between the ask and them, so they follow the ask (the DOM order) and the arch stands below them */
@media (orientation: portrait) and (max-height: 690px) {
  .gx-scene--fire .gx-first .gx-lead { order: 3; margin-top: 14px; font-size: clamp(1rem, 4.2vw, 1.125rem); } .gx-scene--fire .gx-first .gx-actions { order: 4; margin-top: 14px; margin-bottom: 0; } .gx-scene--fire .gx-first .gx-hours { margin-top: 10px; font-size: .875rem; }
  .gx-scene--fire .gx-first .gx-hero__copy { padding-top: calc(var(--gx-head) + 12px); }
  .gx-scene--fire .gx-first__shade { background: linear-gradient(180deg, rgba(20, 13, 8, .96) 0, rgba(20, 13, 8, .94) 34%, rgba(20, 13, 8, .8) 45%, rgba(20, 13, 8, .42) 57%, rgba(20, 13, 8, 0) 70%), linear-gradient(0deg, rgba(20, 13, 8, .9) 0, rgba(20, 13, 8, .6) 14%, rgba(20, 13, 8, 0) 32%); }
  .gx-scene--fire .gx-first .gx-hero__copy { padding-bottom: 12px; }   /* the pin starts under the demo bar at scroll 0: the lead and the hours stay above the fold of the first screen */
}

/* LIVE: the arch. The plate is the film (poster first); it is clipped to a hearth arch whose base stands on --gx-ay; the arch grows (insets -> 0) to the whole window, its top radius with it */
.gx-scene--fire.is-live { --gx-g: calc(1 - min(1, var(--e, 0) / .8)); }
.gx-scene.gx-scene--fire.is-live[data-r3s-open]:not(.is-opened) .r3s__world[data-world="a"] > .r3s__plate {
  clip-path: inset(calc(var(--gx-g) * (var(--gx-ay) - var(--gx-ah))) calc(var(--gx-g) * (100% - var(--gx-ax) - var(--gx-aw) / 2)) calc(var(--gx-g) * (100% - var(--gx-ay))) calc(var(--gx-g) * (var(--gx-ax) - var(--gx-aw) / 2)) round calc(var(--gx-g) * var(--gx-aw) / 2) calc(var(--gx-g) * var(--gx-aw) / 2) calc(var(--gx-g) * 30px) calc(var(--gx-g) * 30px)); }
/* the film starts MAGNIFIED about its flames and with the flames inside the arch; the move and the zoom end with the arch (g = 0) */
.gx-scene.gx-scene--fire.is-live[data-r3s-open]:not(.is-opened) .r3s__world[data-world="a"] .r3s__media {
  transform-origin: var(--gx-fox, 50%) var(--gx-foy, 80%);
  transform: translate3d(calc(var(--gx-g) * (var(--gx-ax) - var(--gx-fx0))), calc(var(--gx-g) * (var(--gx-ay) - var(--gx-ah) * .3 - var(--gx-fy0))), 0) scale(calc(var(--ms, 1) * (1 + var(--gx-g) * var(--gx-zoom, -.64)))); }
/* until r3x-glod-stage.js has placed the arch on the picture (--gx-ax ...) neither the rim nor the film window are drawn: no jump of an arch that moves from its fallback position (also a layout shift of the rim box) */
.gx-scene--fire.is-live:not(.is-anchored) .r3s__ring, .gx-scene.gx-scene--fire.is-live:not(.is-anchored)[data-r3s-open]:not(.is-opened) .r3s__world[data-world="a"] > .r3s__plate { visibility: hidden; opacity: 0; }
.gx-scene.gx-scene--fire.is-live.is-anchored[data-r3s-open]:not(.is-opened) .r3s__world[data-world="a"] > .r3s__plate { transition: opacity .9s var(--gx-ease); }   /* the film window comes up once it stands on the picture */
/* the rim: a glowing arch edge that follows the clip (the same insets), fading as the arch opens */
.gx-scene--fire.is-live .r3s__ring { z-index: 3; width: auto; height: auto; margin: 0;
  inset: calc(var(--gx-g) * (var(--gx-ay) - var(--gx-ah))) calc(var(--gx-g) * (100% - var(--gx-ax) - var(--gx-aw) / 2)) calc(var(--gx-g) * (100% - var(--gx-ay))) calc(var(--gx-g) * (var(--gx-ax) - var(--gx-aw) / 2));
  border-radius: calc(var(--gx-g) * var(--gx-aw) / 2) calc(var(--gx-g) * var(--gx-aw) / 2) calc(var(--gx-g) * 30px) calc(var(--gx-g) * 30px); opacity: calc(1 - var(--e, 0) * 1.7);
  box-shadow: 0 0 0 1px rgba(236, 106, 62, .85), 0 0 56px 6px rgba(236, 106, 62, .42), 0 0 140px 18px rgba(236, 106, 62, .17), inset 0 0 52px rgba(236, 106, 62, .3); }
/* the aperture headline ("Elden är tänd.") shows while the arch has grown and centred, before the film takes the window */
.gx-scene--fire.is-live .r3s__open { opacity: calc(clamp(0, (var(--e, 0) - .26) / .12, 1) * clamp(0, (.66 - var(--e, 0)) / .14, 1)); }
/* the room and its ambient are covered once the arch is open: nothing draws behind the film */
.gx-scene--fire.is-opened .gx-room, .gx-scene--fire.is-opened .gx-dust, .gx-scene--fire.is-opened .gx-first__shade { display: none; }   /* display, not visibility: a covered room still cost a 2x frame time under CPU throttle (nine blended flares, a 44 s push on a full-window layer, the dust canvas) */
/* the copy of the first screen clears while the arch opens (opacity + translate only); once it is gone it is out of the tab order too (r3x-glod-stage.js sets .is-away) */
.gx-scene--fire.is-live .gx-hero__copy, .gx-scene--fire.is-live .gx-cue { opacity: calc(1 - var(--e, 0) * 3.4); transform: translate3d(0, calc(var(--e, 0) * -46px), 0); will-change: opacity, transform; }
.gx-scene--fire.is-live.is-away .gx-hero__copy, .gx-scene--fire.is-live.is-away .gx-cue { visibility: hidden; }
.gx-scene--fire.is-live .gx-hero__copy:focus-within { opacity: 1; transform: none; }

/* ================================ 8. SUB-PAGES: a calmer variant of the same language (a living hero plate with ambient, and ONE state) ================================ */
/* The five sub-pages keep their held plate / split opener (G-02) and gain what the start page has, at a lower setting: the plate is alive (warm breathing light, embers, dust, candle points, or the candle table's
   own flames), and the title is one state that arrives in sequence (crumb, the two headline lines, then the lead of the sheet). No pin, no film, no scroll choreography of their own. */
.gx-amb { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.gx-amb .r3s__cv { display: block; }
.gx-glow { position: absolute; inset: 0; background: radial-gradient(46% 54% at 58% 50%, rgba(255, 176, 104, .2), rgba(255, 150, 80, 0) 72%); mix-blend-mode: screen; animation: r3s-glow 9s ease-in-out infinite alternate; will-change: transform, opacity; }
.gx-amb .r3s__flick { opacity: .7; }
.gx-split-hero__ph .gx-amb { z-index: 2; }
.gx-hold--page .gx-flare-set { position: absolute; inset: 0; }
html.lib-on .gx-amb { opacity: 0; animation: gx-ambin 1.8s ease .6s forwards; }
@keyframes gx-ambin { to { opacity: 1; } }
.gx-hold--page.is-paused .gx-glow, .gx-hold--page.is-paused .r3s__flick, .gx-hold--page.is-paused .r3s__flick::after, .gx-hold--page.is-paused .gx-flare, .gx-split-hero.is-paused .gx-glow { animation-play-state: paused; }
/* the one state: the plate resolves first (its own opacity only: the capped picture is centred by a transform), then the crumb, the two lines, the lead */
@keyframes gx-plate-in { from { opacity: .5; } to { opacity: 1; } }
html.lib-on .gx-hold--page .gx-hold__plate > img { animation: gx-plate-in 1.4s var(--gx-ease) both; }
html.lib-on .gx-hold--page .gx-ph__copy .gx-crumb, html.lib-on .gx-split-hero__copy .gx-crumb { animation: gx-rise 1s var(--gx-ease) .3s both; }
html.lib-on .gx-hold--page .gx-ph__copy .gx-l, html.lib-on .gx-split-hero__copy .gx-l { animation: gx-rise 1.1s var(--gx-ease) .5s both; }
html.lib-on .gx-hold--page .gx-ph__copy .gx-l + .gx-l, html.lib-on .gx-split-hero__copy .gx-l + .gx-l { animation-delay: .65s; }
html.lib-on .gx-split-hero__copy .gx-lead.gx-rise { animation: gx-rise 1.1s var(--gx-ease) .95s both; }
html.no-motion .gx-amb, html.no-motion .gx-glow { display: none !important; }

/* tablets in portrait: scene B is not pinned (the engine's free scene): the composed block keeps its living plate (candle points, the kitchen's fire, dust) while motion is on */
html:not(.no-motion) .gx-scene--hall[data-r3s-free]:not(.is-live) .r3s__ambient, html:not(.no-motion) .gx-scene--hall[data-r3s-free]:not(.is-live) .r3s__cv { display: block; }
.gx-scene--hall[data-r3s-free].is-paused .gx-table .r3s-push, .gx-scene--hall[data-r3s-free].is-paused .gx-table .r3s-flame i, .gx-scene--hall[data-r3s-free].is-paused .gx-table .r3s-pool { animation-play-state: paused; }

/* sub-pages on phones: the held plate was nearly black behind the title (a deep linear scrim over 94 % of the plate: mean luminance 10 %), so a living plate could not be seen. The dim now sits where the words sit
   (a local radial behind the crumb + title, a foot into the night), the upper picture is shown; AA of the title is measured on the rendered frame (evidence/r3/final10/XG/data/contrast_sub_*.json). */
@media (max-width: 767px) {
  .gx-hold--page .gx-ph__scrim { background: radial-gradient(120% 34% at 10% 64%, rgba(20, 13, 8, .85) 0, rgba(20, 13, 8, .75) 44%, rgba(20, 13, 8, .35) 74%, rgba(20, 13, 8, 0) 100%), linear-gradient(0deg, rgba(20, 13, 8, .97) 0, rgba(20, 13, 8, .9) 20%, rgba(20, 13, 8, .5) 38%, rgba(20, 13, 8, 0) 58%); }
}
/* galleri: the header navigation lies over the bright blurred top of the dessert photograph (AA 3.8 : 1 on "Vid spisen", the same before this round): a soft night under the header row only */
.gx-split-hero__ph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--gx-head) + 56px); z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(20, 13, 8, .78) 0, rgba(20, 13, 8, .5) 55%, rgba(20, 13, 8, 0) 100%); }

/* ================================ 12. THE POUR PLATE (round 3d, XG2): a secondary editorial plate beside copy, ONE shot ================================ */
/* David (2026-10-06): the Pexels pour 3769033 ONLY as a secondary editorial plate: tight crop, the Glöd night grade, never the hero, never full width, never portrait, never a loop. It stands beside "Det sista är också viktigt."
   on the meny page, in the place of the dessert still. A 4:3 plate on every window (a portrait crop is not allowed), its poster IS the first frame of the clip (the film starts exactly on it), the clip plays once when the
   plate is in view and holds its last, pouring frame. Phones: poster only (no request for the clip). Static / reduced motion / toggle OFF / Save-Data / 2g: the poster. Film control: r3x-glod-stage.js section 5. */
.gx-edit--pour .gx-edit__fig { aspect-ratio: 4 / 3; background: var(--gx-night); }
.gx-edit--pour .gx-pour > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.gx-edit--pour .gx-pour > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .4s ease; pointer-events: none; background: transparent; }
.gx-edit--pour .gx-pour > video.is-playing { opacity: 1; }
.gx-edit--pour .gx-pour__btn { position: absolute; right: 14px; bottom: 14px; z-index: 2; }
html.no-motion .gx-edit--pour .gx-pour > video, html:not(.js) .gx-edit--pour .gx-pour > video { display: none; }

/* heat haze above the hearth arch (r3x-glod-stage.js section 8): a small canvas in the dining room, its edge melts into the real picture; it fades with the first screen's copy while the arch opens; desktop-class windows only */
.gx-heat { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; pointer-events: none; opacity: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .5) 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .5) 76%, transparent 100%); }
.gx-heat.is-on { opacity: calc(1 - var(--e, 0) * 3.4); animation: gx-heat-in 2s ease .8s backwards; }
@keyframes gx-heat-in { from { opacity: 0; } }
@media (max-width: 899px), (pointer: coarse), (orientation: portrait) { .gx-heat { display: none; } }
html.no-motion .gx-heat { display: none !important; }

/* the curtain footer's big word is not part of the first paint (so that the poster is the LCP element on every window): drawn once the end of the page is within 1.3 windows (r3x-glod-stage.js section 6) */
html.js .gx-foot:not(.is-near) .gx-foot__word { visibility: hidden; }

/* b6 fix10 MP-05 crumb dim */
@media (max-width: 767px) {
  .gx-hold--page .gx-crumb { width: fit-content; position: relative; isolation: isolate; }
  .gx-hold--page .gx-crumb::before { content: ""; position: absolute; z-index: -1; inset: -28px -90px -28px -60px; pointer-events: none; background: radial-gradient(ellipse closest-side at 45% 50%, rgba(20, 13, 8, .82) 0, rgba(20, 13, 8, .78) 60%, rgba(20, 13, 8, 0) 100%); }
}
@media (max-width: 360px) { .gx-hold--page .gx-crumb a, .gx-hold--page .gx-crumb [aria-current] { text-shadow: 0 0 8px rgba(20, 13, 8, .9); } }
@media (max-width: 339px) { .gx-hold--page .gx-crumb::before { inset: -28px -90px -28px -60px; background: radial-gradient(ellipse closest-side at 45% 50%, rgba(20, 13, 8, .94) 0, rgba(20, 13, 8, .82) 60%, rgba(20, 13, 8, 0) 100%); } }

/* b6 fix30 MP-05 motion-on headline */
@media (max-width: 767px) {
  html:not(.no-motion) .gx-hold--page .gx-hold__plate img { filter: brightness(calc(var(--gx-liftm, var(--gx-lift, 1)) * .88)); }
  html:not(.no-motion) .gx-hold--page .gx-ph__copy h1 { text-shadow: 0 0 26px rgba(20, 13, 8, .92), 0 0 10px rgba(20, 13, 8, .8), 0 1px 3px rgba(20, 13, 8, .6); }
}

/* b6 fix31 MP-05 motion-on headline dim */
@media (max-width: 767px) {
  html:not(.no-motion) .gx-hold--page .gx-ph__copy { isolation: isolate; }
  html:not(.no-motion) .gx-hold--page .gx-ph__copy::before { content: ""; position: absolute; z-index: -1; inset: -48px -80px -36px -80px; pointer-events: none; background: radial-gradient(ellipse closest-side at 36% 50%, rgba(20, 13, 8, .84) 0, rgba(20, 13, 8, .7) 58%, rgba(20, 13, 8, 0) 100%); }
}

/* b6 fix44 MP-05 motion-on headline dim, 600-767 */
@media (min-width: 600px) and (max-width: 767px) {
  html:not(.no-motion) .gx-hold--page .gx-ph__copy::before { inset: -64px -150px -56px -130px; background: radial-gradient(ellipse closest-side at 38% 50%, rgba(20, 13, 8, .9) 0, rgba(20, 13, 8, .78) 58%, rgba(20, 13, 8, 0) 100%); }
}

/* b6 fix45 MP-05 320 px hero copy */
@media (max-width: 339px) { html:not(.no-motion) .gx-hold--page .gx-ph__copy .gx-h1 { font-size: min(clamp(3.1rem, 1.1rem + 6.6vw, 8.2rem), 14.2vw); } }
@media (max-width: 359px) { html:not(.no-motion) .gx-hold--page .gx-ph__copy { bottom: calc(var(--gx-dip) + clamp(100px, 11vw, 170px) - (360px - 100vw) * 1.2); } }

/* b6 fix49 Glod page hero copy, enlarged text */
@media (max-width: 699px) and (orientation: portrait) { .gx-hold--page .gx-hold__plate { width: 100%; min-height: calc(120vw - 8px + (1rem - 16px) * 12); } }
@media (max-width: 339px) and (orientation: portrait) { .gx-hold--page .gx-hold__plate { min-height: calc(120vw - 8px + (1rem - 16px) * 14); } }   /* b6 fix61: below 340 px the copy block is taller (crumb stood under the header at 200 % text) */

/* b6 fix54 scene headline, enlarged text */
.gx-scene--fire:not(.is-live) .r3s__world[data-world="a"] > .r3s__open { font-size: min(clamp(3.2rem, 1.2rem + 7vw, 8rem), clamp(51.2px, 19.2px + 7vw, 128px)); }

/* b6 fix92 glod stage */
/* b6 fix92: on landscape phones the page-hero plate is at least 18 rem tall (the copy block was taller than the plate and its top lay under the header at 150-175 % text) */
@media (orientation: landscape) and (max-height: 520px) { .gx-hold--page .gx-hold__plate { min-height: 18rem; } }

/* b6 fix92 stage two-column headline */
/* b6 fix92: states 2 and 3 of the static stage put the headline in 5 of 12 columns; the font follows that column (the longest word, 'handerna.', is 3.7 em wide: /3.8; never binds at 100 %) */
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-scene--fire:not(.is-live) .gx-steps .gx-st--2, .gx-scene--fire:not(.is-live) .gx-steps .gx-st--3 { container-type: inline-size; }
  .gx-scene--fire:not(.is-live) .gx-steps :is(.gx-st--2, .gx-st--3) > .gx-t { --gx-g: clamp(16px, 2.2vw, 32px); font-size: min(clamp(2.5rem, 1.5rem + 3.6vw, 4.8rem), 15vw, calc(((100cqi - 11 * var(--gx-g)) * 5 / 12 + 4 * var(--gx-g)) / 3.8)); }
}