/* ZS R3 XG "Glöd" (r3x-glod.css): the Premium Max restaurant example, re-art-directed as a cinematic night. ZS's own code.
   Self-contained: the Glöd pages do NOT load examples.css, motion.css, visual-packaging.css, approved-refinements.css, quality-refinements.css, closure.css,
   experience.css, launch.css, launch-media.css, examples-fixes.css, lc-examples.css, r3-tokens.css or r3-core.js (the old stack was ~190 KB of CSS for one client site).
   Classes and custom properties are namespaced gx- / --gx- (stream XG); none collides with r3- / r3p- / r3a-.
   Spec of the system: evidence/r3/final/XG/NOTES.md. Hidden start states hang on html.lib-on; html.no-motion and no-JS show the complete composed page.

   CONTENTS  0 fonts  1 tokens  2 base + type  3 buttons, links, kicker  4 ZS wrapper (demo bar, package note, booking dialog)  5 header + menu
             6 planes + seams  7 HERO (clean plate + the depth sandwich)  8 REEL (aperture film opener + chapter sheet)  9 craft story  10 word index (courses)
             11 held plate + gather  12 strip  13 welcome (menu card plane)  14 FOOTER CURTAIN  15 inner pages  16 reveals  17 reduced motion / no-JS  18 round 3b-2 additions (ZS band pill, static sub-hero, source caps,
             repeated-block structure; the demo bar + shared motion control are in 4, the compact menu panel in 5) */

/* ================================ 0. FONTS ================================ */
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* metric-matched fallbacks (numbers measured by the architect with tools/measure_fonts.cjs): the swap moves nothing */
@font-face { font-family: "GX Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); font-weight: 400; size-adjust: 107%; ascent-override: 90.6%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: "GX Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); font-weight: 500; size-adjust: 108.2%; ascent-override: 89.6%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: "GX Sans Fallback"; src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 600 700; size-adjust: 101.1%; ascent-override: 95.9%; descent-override: 23.7%; line-gap-override: 0%; }
@font-face { font-family: "GX Serif Fallback"; src: local("Times New Roman"), local("Times"), local("Liberation Serif"); font-weight: 400 500; size-adjust: 96.2%; ascent-override: 95.6%; descent-override: 30.1%; line-gap-override: 0%; }
@font-face { font-family: "GX Serif Fallback"; src: local("Times New Roman Bold"), local("Times Bold"), local("Liberation Serif Bold"); font-weight: 600 700; size-adjust: 90.7%; ascent-override: 101.5%; descent-override: 32%; line-gap-override: 0%; }

/* ================================ 1. TOKENS ================================ */
:root {
  --gx-serif: "Cormorant Garamond", "GX Serif Fallback", Georgia, serif;
  --gx-sans: "Inter", "GX Sans Fallback", system-ui, sans-serif;

  /* THE GRADE'S BLACK: every photograph on every Glöd page bottoms out at #140D08 (baked: r3x-glod-*.webp, --black 140D08), so the picture melts into the ground */
  --gx-night: #140D08;
  --gx-hearth: #1B120B;       /* second plane: a step warmer */
  --gx-walnut: #271A10;       /* third plane: the table */
  --gx-bone: #E8DBC1;         /* the one light plane: a printed menu card */
  --gx-ink: #F1E6D0;          /* the grade's white point */
  --gx-ink-2: #D3C5AB;
  --gx-ink-3: #AA9C84;
  --gx-ember: #EC6A3E;        /* Glöd's own accent (the example's #ec663c, a hair lighter for 5.8 : 1 on the night) */
  --gx-ember-2: #F58A62;
  --gx-ember-deep: #8E3414;   /* ember for small text on bone (5.8 : 1; #A33D17 measured 4.6 in pixel QA) */
  --gx-bone-ink: #1D130C;
  --gx-bone-ink-2: #3E2F22;
  --gx-zs-ink: #0C0C0F;       /* the ZS wrapper (demo bar, package note) keeps ZS ink and ZS gold */
  --gx-zs-gold: #DCBC7E;

  --gx-gutter: clamp(20px, 5vw, 84px);
  --gx-wrap: 1480px;
  --gx-edge: max(var(--gx-gutter), calc((100vw - var(--gx-wrap)) / 2));   /* the content edge: header, hero copy and every plane share it */
  --gx-bar: 52px;            /* the ZS demo bar: its REAL height (52 px = the 44 px motion control + 4 px above and below; 96 px on two rows below 600 px, set below). r3x-glod.js only re-writes it if it ever differs, so the hero never moves after first paint (F-37) */
  --gx-head: 72px;
  --gx-fade: 96px;            /* tone blend length (phone) */
  --gx-ease: cubic-bezier(.2, .7, .1, 1);
  --gx-ease-out: cubic-bezier(.25, .46, .45, .94);
  --gx-ease-io: cubic-bezier(.45, 0, .55, 1);
  --gx-ease-quart: cubic-bezier(.165, .84, .44, 1);
  --gx-dip: 56px;             /* the feathered dip where a sheet rises over a photograph */
  --gx-sec: 64px;             /* vertical rhythm inside a plane (phone) */
  --gx-hinge: clamp(6.4rem, 3rem + 10vw, 12.5rem);   /* the size of the chapter numeral that lies on the seam */

  /* type steps */
  --gx-t-h1: min(clamp(3rem, 1.2rem + 5.4vw, 7.25rem), 15vw);
  --gx-t-h2: min(clamp(2.35rem, 1.1rem + 3.9vw, 5.2rem), 11.75vw);
  --gx-t-h3: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  --gx-t-state: min(clamp(2rem, 1rem + 3.9vw, 4.9rem), 10vw);
  --gx-t-kicker: clamp(.8125rem, .72rem + .36vw, 1.0625rem);
  --gx-t-lead: clamp(1.1875rem, 1.1rem + .42vw, 1.4rem);
}
@media (min-width: 768px) { :root { --gx-fade: 120px; --gx-dip: 72px; --gx-head: 80px; --gx-sec: 80px; } }
@media (min-width: 1100px) { :root { --gx-fade: 140px; --gx-sec: 88px; } }
@media (max-width: 599px) { :root { --gx-head: 64px; } }
@media (max-width: 42.4375em) { :root { --gx-bar: 96px; } }   /* b6 fix33: the bar is two rows (96 px) up to 680 px */

/* ================================ 2. BASE + TYPE ================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--gx-night); scroll-behavior: smooth; scroll-padding-top: calc(var(--gx-head) + 12px); }
html.no-motion { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--gx-night); color: var(--gx-ink); font: 400 1.0625rem/1.65 var(--gx-sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, picture, video { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gx-ember-2); outline-offset: 3px; border-radius: 3px; }
.gx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gx-skip { position: absolute; left: 12px; top: -80px; transform: translateY(-100%); z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--gx-ember); color: #1A0F08; font: 600 .9375rem/1 var(--gx-sans); text-decoration: none; }
.gx-skip:focus { top: 8px; transform: none; }

/* headline voice: Cormorant roman, no italic (no italic file exists: font-style stays normal), ONE device per headline: .gx-em ember phrase, .gx-tail warm-grey second clause */
.gx-h1, .gx-h2, .gx-h3, .gx-state { font-family: var(--gx-serif); font-weight: 600; font-style: normal; font-variant-numeric: lining-nums; color: var(--gx-ink); text-wrap: balance; }
.gx-h1 { font-size: var(--gx-t-h1); line-height: .92; letter-spacing: -.022em; }
.gx-h2 { font-size: var(--gx-t-h2); line-height: .96; letter-spacing: -.02em; }
.gx-h3 { font-size: var(--gx-t-h3); line-height: 1.05; letter-spacing: -.012em; }
.gx-state { font-size: var(--gx-t-state); line-height: 1.12; letter-spacing: -.012em; font-weight: 400; }
.gx-em { font-style: normal; color: var(--gx-ember); }
.gx-tail { font-style: normal; color: var(--gx-ink-3); }
.gx-l { display: block; }
.gx-lead { font-size: var(--gx-t-lead); line-height: 1.5; color: var(--gx-ink-2); max-width: 31em; }
.gx-body { color: var(--gx-ink-2); max-width: 34em; }
.gx-small { font-size: .875rem; line-height: 1.5; color: var(--gx-ink-3); }

/* the tracked-serif kicker (G-122): a mood line over ONE oversized word */
.gx-kicker { margin: 0; font: 600 var(--gx-t-kicker)/1.3 var(--gx-serif); letter-spacing: .34em; text-transform: uppercase; color: var(--gx-ink-2); font-variant-numeric: lining-nums; }
.gx-kicker b { font-weight: 600; color: var(--gx-ember); }
@media (max-width: 479px) { .gx-kicker { letter-spacing: .24em; } }
/* one numbering notation: 01 02 03, Inter digits, 14 px */
.gx-n { font: 600 .875rem/1 var(--gx-sans); letter-spacing: .1em; font-variant-numeric: lining-nums tabular-nums; color: var(--gx-ember); }

/* ================================ 3. BUTTONS, LINKS ================================ */
.gx-btn { --h: 56px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--h); padding: .7em 28px; border: 0; border-radius: calc(var(--h) / 2); background: var(--gx-ember); color: #1A0F08;
  font: 600 1rem/1.2 var(--gx-sans); letter-spacing: .01em; text-decoration: none; overflow: hidden; transition: background .25s var(--gx-ease-out), transform .25s var(--gx-ease-out); }
.gx-btn:hover { background: var(--gx-ember-2); }
.gx-btn:focus-visible { outline: 2px solid var(--gx-ink); outline-offset: 4px; }
.gx-btn__arr { display: inline-block; font-size: 1.05em; line-height: 1; transition: transform .25s var(--gx-ease-out); }
.gx-btn:hover .gx-btn__arr { transform: translate(2px, -2px); }
.gx-btn--quiet { background: transparent; color: var(--gx-ink); box-shadow: inset 0 0 0 1px rgba(241, 230, 208, .38); }
.gx-btn--quiet:hover { background: rgba(241, 230, 208, .1); }
.gx-btn--bone { background: var(--gx-bone-ink); color: var(--gx-bone); }
.gx-btn--bone:hover { background: #33231A; }
.gx-btn--sm { --h: 44px; padding: .7em 20px; font-size: .9375rem; }
/* label roll (W-76): Premium rolls; hover only where hover exists */
/* RC2 (David N004): no roll; the control zooms 1.04 on hover and keyboard focus (not with reduced motion) */
.gx-roll .gx-btn__t { display: inline-flex; flex-direction: row; height: auto; overflow: visible; line-height: inherit; }
.gx-roll .gx-btn__t > span { display: block; }
.gx-roll .gx-btn__t > span + span { display: none; }
.gx-roll:focus-visible { transform: scale(1.04); }
@media (hover: hover) { .gx-roll:hover { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .gx-roll, .gx-roll:hover, .gx-roll:focus-visible { transition: none; transform: none; } }
.no-motion .gx-roll, .no-motion .gx-roll:hover, .no-motion .gx-roll:focus-visible { transition: none; transform: none; }
.gx-link { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--gx-ink); font: 500 .9375rem/1.2 var(--gx-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; text-decoration-color: rgba(241, 230, 208, .4); transition: text-decoration-color .2s; }
.gx-link:hover { text-decoration-color: currentColor; }
.gx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }

/* ================================ 4. ZS WRAPPER ================================ */
/* the demo bar and the package note belong to ZS, not to Glöd: ZS ink, ZS gold, Inter */
/* P4-064 / 075 / 089 / 096 / 138 (round 3b-2): the demo bar is ONE component with the five other examples. 14 px type below 1100 px (13 px above), every control >= 44 px high, the motion control is the
   shared zs-mo switch (constant label "Pausa rörelse", the state drawn as a switch, 44 px hit area, disabled "Minskad rörelse" under the system setting). --gx-bar is the REAL height (52 px; 96 px on two rows). */
.gx-bar { position: relative; z-index: 120; background: var(--gx-zs-ink); color: #F3F0EA; font: 500 .875rem/1.3 var(--gx-sans); letter-spacing: .01em; }
@media (min-width: 1100px) { .gx-bar { font-size: .8125rem; } }
.gx-bar__in { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; min-height: 52px; padding: 4px var(--gx-edge); gap: 0 12px; }
.gx-bar a { display: inline-flex; align-items: center; min-height: 44px; color: #F3F0EA; text-decoration: none; font: inherit; }
.gx-bar a:hover { text-decoration: underline; text-underline-offset: .3em; }
.gx-bar__lab { display: inline-flex; flex-wrap: wrap; gap: 0 .4em; align-items: center; color: #F3F0EA; }
.gx-bar__lab b { color: var(--gx-zs-gold); font-weight: 600; }
.gx-bar__fic { white-space: nowrap; }
.gx-bar__mo { display: flex; align-items: center; min-height: 44px; }   /* the switch is un-hidden by script after first paint: its 44 px row is reserved (no layout shift of the whole page) */
.gx-bar a:focus-visible { outline: 2px solid var(--gx-zs-gold); outline-offset: 2px; }
/* the shared motion control (evidence/r3/final8/XM/demo_bar_component.css, contract in its header): label constant, state = switch, whole pill >= 44 x 44 */
.zs-mo { --mo-fg: #F3F0EA; --mo-ink: #0C0C0F; --mo-gold: #DCBC7E;
  display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 44px; padding: 0 14px 0 16px; margin: 0; font: inherit; line-height: 1.2; color: inherit; white-space: nowrap; cursor: pointer;
  background: transparent; border: 1px solid rgba(243, 240, 234, .38); border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.zs-mo:hover { background: rgba(243, 240, 234, .1); }
.zs-mo[aria-pressed="true"] { background: rgba(243, 240, 234, .12); border-color: rgba(243, 240, 234, .62); }
.zs-mo:disabled { opacity: .72; cursor: default; }
.zs-mo[hidden] { display: none; }
.zs-mo:focus-visible { outline: 3px solid var(--mo-fg); outline-offset: 0; }
.zs-mo__sw { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(243, 240, 234, .66); background: transparent; transition: background-color .2s, border-color .2s; }
.zs-mo__sw i { position: absolute; top: 50%; left: 2.5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--mo-fg); transition: transform .22s cubic-bezier(.25, .46, .45, .94), background-color .2s; }
.zs-mo[aria-pressed="true"] .zs-mo__sw { background: var(--mo-gold); border-color: var(--mo-gold); }
.zs-mo[aria-pressed="true"] .zs-mo__sw i { transform: translateX(14px); background: var(--mo-ink); }
.no-motion .zs-mo__sw, .no-motion .zs-mo__sw i { transition: none; }
@media (prefers-reduced-motion: reduce) { .zs-mo__sw, .zs-mo__sw i { transition: none; } }
/* two rows below 600 px: home + what, then the motion switch + the "fictive company" label (it wraps to two lines on the narrowest phones, the row is 44 px) */
/* b6 EU-05: the disclosure reads first, on row 1 beside the way back, in one line (it wrapped mid-phrase on row 2); the switch and "Vad ingår?" share row 2, as on the other examples */
.gx-bar__in { grid-template-columns: max-content minmax(0, 1fr) max-content; }
.gx-bar__home { grid-column: 1; grid-row: 1; } .gx-bar__lab { grid-column: 2 / 4; grid-row: 1; justify-self: end; justify-content: flex-end; text-align: right; letter-spacing: 0; }
.gx-bar__mo { grid-column: 1 / 3; grid-row: 2; justify-self: start; } .gx-bar__what { grid-column: 3; grid-row: 2; justify-self: end; }
@container gxbar (min-width: 48em) {   /* b6 fix48: em of the bar's own text size, so the one-row bar follows the text size */
  .gx-bar__in { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; gap: 0 12px; }
  .gx-bar__home { grid-column: 1; grid-row: 1; } .gx-bar__lab { grid-column: 2; grid-row: 1; justify-self: start; justify-content: flex-start; text-align: left; }
  .gx-bar__mo { grid-column: 3; grid-row: 1; } .gx-bar__what { grid-column: 4; grid-row: 1; justify-self: end; }
}
@media (min-width: 1100px) { .gx-bar__in { gap: 0 28px; } }

/* the package note: what stands behind the example, with the price (TRUTH: sentences unchanged) */
.gx-pkg { position: relative; z-index: 3; background: var(--gx-zs-ink); color: #F3F0EA; padding: calc(clamp(20px, 2.4vw, 34px) + 64px) var(--gx-edge) clamp(32px, 3.6vw, 52px); }
/* F-49 (one rule for the ZS band on all six examples): the band is ZS ink in BOTH themes (a dark strip, like Norr and Alina); the footer's night melts into it over a clean 64 px fade, no edge.
   The light-theme cream variant (with its brown-to-cream smear) is gone. */
.gx-pkg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; pointer-events: none; background: linear-gradient(180deg, #140D08 0%, #0C0C0F 100%); }
.gx-pkg__in { display: grid; gap: 28px 56px; max-width: var(--gx-wrap); margin-inline: auto; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-pkg__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.gx-pkg .gx-kicker { color: #B9B3A8; }
.gx-pkg h2 { font: 600 clamp(2rem, 1.2rem + 2.6vw, 3.4rem)/1 var(--gx-serif); color: #F3F0EA; margin: 12px 0 14px; }
.gx-pkg p { color: #D9D3C8; max-width: 34em; }
.gx-pkg__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em; font: 600 clamp(2rem, 1.6rem + 1.2vw, 2.75rem)/1 var(--gx-serif); color: #F3F0EA; margin: 0 0 14px; font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.gx-pkg__price span { font: 500 .875rem/1.3 var(--gx-sans); color: #D9D3C8; letter-spacing: 0; }
.gx-pkg__list { margin: 0 0 18px; color: #D9D3C8; max-width: 38em; }
.gx-pkg__links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.gx-pkg a { color: #F3F0EA; text-decoration-color: rgba(243, 240, 234, .45); }
.gx-pkg .gx-link { color: #F3F0EA; text-decoration-color: rgba(243, 240, 234, .45); }
.gx-pkg .gx-link:hover { text-decoration-color: currentColor; }
.gx-pkg :focus-visible { outline-color: var(--gx-zs-gold); }

/* the booking demo dialog (text unchanged) */
.gx-dialog { width: min(92vw, 36rem); max-height: 90vh; max-height: 90svh; padding: 0; border: 0; border-radius: 20px; background: var(--gx-hearth); color: var(--gx-ink); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(241, 230, 208, .12); }
.gx-dialog::backdrop { background: rgba(12, 8, 5, .78); }
.gx-dialog__in { padding: clamp(26px, 5vw, 44px); display: grid; gap: 14px; }
.gx-dialog h2 { font: 600 clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem)/1.05 var(--gx-serif); color: var(--gx-ink); }
.gx-dialog p { color: var(--gx-ink-2); }
.gx-dialog .gx-actions { margin-top: 8px; }

/* ================================ 5. HEADER + MENU ================================ */
/* sticky, overlays the first plane (negative margin), transparent over the hero, night after the first scroll; no hairline: a soft feather instead */
.gx-head { position: sticky; top: 0; z-index: 100; height: var(--gx-head); margin-bottom: calc(var(--gx-head) * -1); display: flex; align-items: center; gap: 24px; padding: 0 var(--gx-edge); }
.gx-head::before { content: ""; position: absolute; inset: 0 0 -56px 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #140D08 0, #140D08 calc(100% - 56px), rgba(20, 13, 8, .55) calc(100% - 28px), rgba(20, 13, 8, 0) 100%); opacity: 0; transition: opacity .35s var(--gx-ease-out); }
.gx-head.is-solid::before, html:not(.js) .gx-head::before { opacity: 1; }
.gx-logo { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; font: 600 1.5rem/1 var(--gx-serif); letter-spacing: .3em; color: var(--gx-ink); text-decoration: none; padding-right: .3em; }
.gx-nav { display: none; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.gx-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--gx-ink); font: 500 .9375rem/1 var(--gx-sans); text-decoration: none; letter-spacing: .01em; }
.gx-nav a:not(.gx-nav__cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--gx-ease-out); }
.gx-nav a:hover::after, .gx-nav a[aria-current="page"]::after { transform: scaleX(1); }
.gx-nav__cta { --h: 44px; padding: 0 22px; border-radius: 999px; background: var(--gx-ember); color: #1A0F08 !important; font-weight: 600 !important; transition: background .25s; }
.gx-nav__cta:hover { background: var(--gx-ember-2); }
.gx-nav__cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--gx-night), 0 0 0 3px var(--gx-ember); }
.gx-menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 10px; border: 0; background: none; color: var(--gx-ink); font: 500 .9375rem/1 var(--gx-sans); }
.gx-menu-btn i { position: relative; width: 22px; height: 12px; }
.gx-menu-btn i::before, .gx-menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s var(--gx-ease-out), top .35s var(--gx-ease-out); }
.gx-menu-btn i::before { top: 1px; } .gx-menu-btn i::after { top: 9px; }
.gx-menu-btn[aria-expanded="true"] i::before { top: 5px; transform: rotate(45deg); } .gx-menu-btn[aria-expanded="true"] i::after { top: 5px; transform: rotate(-45deg); }
@media (min-width: 700px) { .gx-nav { display: flex; } .gx-menu-btn { display: none; } }   /* F-04: the desktop navigation from 700 px (was 900) */
@media (max-width: 699px) {
  html.js .gx-nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: calc(var(--gx-navtop, var(--gx-head)) + 24px) var(--gx-gutter) 40px; overflow-y: auto; overscroll-behavior: contain; background: var(--gx-night); background-image: radial-gradient(90% 46% at 50% 108%, rgba(236, 106, 62, .26) 0, rgba(236, 106, 62, .08) 50%, rgba(236, 106, 62, 0) 78%); visibility: hidden; opacity: 0; transition: opacity .35s var(--gx-ease-out), visibility 0s linear .35s; }
  html.js .gx-nav.is-open { visibility: visible; opacity: 1; transition: opacity .35s var(--gx-ease-out), visibility 0s; }
  html.js .gx-nav a { font: 600 clamp(2.2rem, 1.2rem + 5vw, 3.2rem)/1.15 var(--gx-serif); min-height: 56px; letter-spacing: -.01em; }
  html.js .gx-nav a:not(.gx-nav__cta)::after { bottom: 10px; }
  html.js .gx-nav__cta { margin-top: 22px; --h: 56px; padding: 0 30px; font: 600 1rem/1 var(--gx-sans) !important; }
  /* the list is centred with auto margins (never clipped: a panel taller than the window scrolls from its first link, which justify-content:center cannot do) */
  html.js .gx-nav > :first-child { margin-top: auto; } html.js .gx-nav > .gx-nav__cta { margin-bottom: auto; }
  html:not(.js) .gx-head { flex-wrap: wrap; height: auto; min-height: var(--gx-head); padding-block: 8px; }
  html:not(.js) .gx-nav { display: flex; flex-wrap: wrap; width: 100%; gap: 0 18px; }
  html:not(.js) .gx-menu-btn { display: none; }
  body.gx-menu-open { overflow: hidden; }
  .gx-head .gx-logo, .gx-head .gx-menu-btn { position: relative; z-index: 2; }
}
/* P4-093: SHORT windows narrower than 700 px (landscape phones 667x375, 640x360, 568x320, and tiny portrait windows). The panel starts BELOW the real header row (--gx-navtop = head.bottom, written by
   r3x-glod.js on open: at scroll 0 the header sits under the demo bar), the links are 48 px rows in 26-30 px type in two columns (one column below 480 px), the ask comes after the list, the panel
   scrolls on its own (overflow-y:auto, overscroll-behavior:contain) and never exceeds the window. */
@media (max-width: 699px) and (max-height: 520px) {
  html.js .gx-nav { height: 100vh; height: 100dvh; max-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; justify-items: start; gap: 0 28px; padding: calc(var(--gx-navtop, var(--gx-head)) + 8px) var(--gx-gutter) 20px; }
  html.js .gx-nav a { min-height: 48px; font: 600 clamp(1.625rem, 1.1rem + 2.2vw, 1.875rem)/1.1 var(--gx-serif); }
  html.js .gx-nav a:not(.gx-nav__cta)::after { bottom: 8px; }
  html.js .gx-nav > :first-child { margin-top: 0; } html.js .gx-nav > .gx-nav__cta { margin-bottom: 0; }
  html.js .gx-nav a.gx-nav__cta { grid-column: 1 / -1; margin-top: 10px; --h: 44px; min-height: 44px; padding: 0 26px; }
}
@media (min-width: 480px) and (max-width: 699px) and (max-height: 520px) { html.js .gx-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) and (max-height: 340px) { html.js .gx-nav a { min-height: 44px; } html.js .gx-nav a.gx-nav__cta { margin-top: 8px; } }

/* ================================ 6. PLANES + SEAMS ================================ */
/* No divider lines between sections, ever. A plane blends INTO itself from the plane above across its own top padding (--gx-fade: 140 / 120 / 96 px); text never sits in a blend.
   --gx-c is the plane's own colour (a flat fallback first), --gx-from the colour above; the gradient has 10 eased stops (generated, mixed in oklab). */
.gx-plane { --gx-seam: none; position: relative; isolation: isolate; background: var(--gx-c, var(--gx-night)); color: var(--gx-ink); padding: calc(var(--gx-fade) + var(--gx-sec) * .25) var(--gx-edge) calc(var(--gx-sec) * .75); }
/* seams between two DARK planes differ by 1.05-1.1 : 1 only, so their blend is shorter (the tone rule is about visible steps) */
.gx-seam-night-hearth, .gx-seam-hearth-night, .gx-seam-night-walnut, .gx-seam-walnut-night, .gx-seam-hearth-walnut, .gx-seam-walnut-hearth { --gx-fade: clamp(56px, 7vw, 96px); }
.gx-plane::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--gx-fade); z-index: -1; pointer-events: none; background: var(--gx-seam, none); }
.gx-plane--night { --gx-c: var(--gx-night); }
.gx-plane--hearth { --gx-c: var(--gx-hearth); }
.gx-plane--walnut { --gx-c: var(--gx-walnut); }
.gx-plane--bone { --gx-c: var(--gx-bone); color: var(--gx-bone-ink); }
/* SEAMS:BEGIN */ /* the dark<->dark seams: evidence/r3/final/XG/apply_seams.py (oklab, 10 eased stops). The dark<->BONE seams (fix round 2, F-11): evidence/r3/final4/XG/tools/seams.py, OKLCH with a warm chroma bump, so the middle is burnt umber / amber (firelight) and not grey-tan smoke */
.gx-seam-night-hearth { --gx-seam: linear-gradient(180deg, #140D08 0%, #140D08 11%, #150E08 22%, #160E09 33%, #170F09 44%, #18100A 56%, #19110A 67%, #1A110B 78%, #1B120B 89%, #1B120B 100%); }
.gx-seam-night-walnut { --gx-seam: linear-gradient(180deg, #140D08 0%, #150D08 11%, #160F09 22%, #19100A 33%, #1C120B 44%, #1F140D 56%, #22170E 67%, #25180F 78%, #261A10 89%, #271A10 100%); }
.gx-seam-hearth-night { --gx-seam: linear-gradient(180deg, #1B120B 0%, #1B120B 11%, #1A110B 22%, #19110A 33%, #18100A 44%, #170F09 56%, #160E09 67%, #150E08 78%, #140D08 89%, #140D08 100%); }
.gx-seam-hearth-walnut { --gx-seam: linear-gradient(180deg, #1B120B 0%, #1B120B 11%, #1C130C 22%, #1E140C 33%, #20150D 44%, #22170E 56%, #24180F 67%, #25190F 78%, #271A10 89%, #271A10 100%); }
.gx-seam-walnut-night { --gx-seam: linear-gradient(180deg, #271A10 0%, #261A10 11%, #25180F 22%, #22170E 33%, #1F140D 44%, #1C120B 56%, #19100A 67%, #160F09 78%, #150D08 89%, #140D08 100%); }
.gx-seam-walnut-hearth { --gx-seam: linear-gradient(180deg, #271A10 0%, #271A10 11%, #25190F 22%, #24180F 33%, #22170E 44%, #20150D 56%, #1E140C 67%, #1C130C 78%, #1B120B 89%, #1B120B 100%); }
.gx-seam-night-bone { --gx-seam: linear-gradient(180deg, #140D08 0%, #1A110B 10%, #2A1C11 20%, #452F1A 30%, #654726 40%, #86653C 50%, #A5865C 60%, #BEA681 70%, #D3C2A2 80%, #E2D4B9 90%, #E8DBC1 100%); }
.gx-seam-bone-night { --gx-seam: linear-gradient(180deg, #E8DBC1 0%, #E2D4B9 10%, #D3C2A2 20%, #BEA681 30%, #A5865C 40%, #86653C 50%, #654726 60%, #452F1A 70%, #2A1C11 80%, #1A110B 90%, #140D08 100%); }
.gx-seam-hearth-bone { --gx-seam: linear-gradient(180deg, #1B120B 0%, #21160E 10%, #312114 20%, #4B331C 30%, #6A4B28 40%, #8A683D 50%, #A8895D 60%, #C0A881 70%, #D4C2A3 80%, #E2D4B9 90%, #E8DBC1 100%); }
.gx-seam-bone-hearth { --gx-seam: linear-gradient(180deg, #E8DBC1 0%, #E2D4B9 10%, #D4C2A3 20%, #C0A881 30%, #A8895D 40%, #8A683D 50%, #6A4B28 60%, #4B331C 70%, #312114 80%, #21160E 90%, #1B120B 100%); }
.gx-seam-walnut-bone { --gx-seam: linear-gradient(180deg, #271A10 0%, #2C1E13 10%, #3D2918 20%, #553A20 30%, #74512B 40%, #926E40 50%, #AD8D5F 60%, #C4AA83 70%, #D6C4A3 80%, #E3D5B9 90%, #E8DBC1 100%); }
.gx-seam-bone-walnut { --gx-seam: linear-gradient(180deg, #E8DBC1 0%, #E3D5B9 10%, #D6C4A3 20%, #C4AA83 30%, #AD8D5F 40%, #926E40 50%, #74512B 60%, #553A20 70%, #3D2918 80%, #2C1E13 90%, #271A10 100%); }
.gx-seam-night-paper { --gx-seam: linear-gradient(180deg, #140D08 0%, #1C130C 11%, #312216 22%, #493421 33%, #5B412A 44%, #634830 56%, #816A55 67%, #AF9F8D 78%, #DAD1C2 89%, #EDE7DA 100%); }
/* SEAMS:END */

/* ================================ 7. HERO: the clean plate + the depth sandwich (G-113, G-22, W-32) ================================ */
/* One photograph (the candle table) whose black floor IS the page ground. Two zones: the copy in the black, the table on the right.
   Geometry in units of the PLATE width (--u = 1cqw), measured on the master (3:2): candles x 48.6-55.9 % (tops y 25.2 / 29.7 %), glasses x 43-46 %, table x 12-84 % y 53-93 %.
   THE SANDWICH: the word GLÖD sits BEHIND the plate (mix-blend lighten: whatever is brighter than the word passes in front, so no mask and no cut-out edge exists).
   Its Ö is centred on the candle pair (x 52.25 %): the two candles stand in the Ö's counter and cross only its lower arc; no other glyph meets an object, and the headline
   lives in the other zone, so no object ever crosses a headline letter. Letter metrics (Cormorant 600, per em): G .725 L .541 Ö .766 D .700, Ö centre 1.649 em from the word start. */
.gx-hero { position: relative; isolation: isolate; background: var(--gx-night); color: var(--gx-ink); overflow: clip; }
.gx-hero__in { position: relative; }
.gx-hero__copy { position: relative; z-index: 3; container-type: inline-size; padding: calc(var(--gx-head) + 28px) var(--gx-edge) 0; }
.gx-hero__copy > * + * { margin-top: 0; }
.gx-hero .gx-kicker { color: var(--gx-ink-2); }
.gx-hero .gx-h1 { font-size: min(var(--gx-t-h1), 20cqw); line-height: .9; margin-top: 16px; }
.gx-hero .gx-lead { font-size: clamp(1.0625rem, 4.6cqw, 1.3rem); margin-top: 22px; }
.gx-hero .gx-actions { margin-top: 26px; }
.gx-hours { font: 500 .9375rem/1.5 var(--gx-sans); letter-spacing: .01em; color: var(--gx-ink-2); margin-top: 18px; }
.gx-hours b { font-weight: 600; color: var(--gx-ink); }
.gx-plate { position: relative; z-index: 1; width: 100%; container-type: inline-size; margin-top: -4vw;
  /* the floor is baked to the ground colour; the mask is belt and braces so no rectangle can ever show (sides 7 %, top 16 %) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%); mask-composite: intersect; }
.gx-plate picture, .gx-plate img { display: block; width: 100%; }
.gx-plate img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0; height: auto; }
/* the sandwich word: tone-on-tone ember, behind everything brighter than itself */
.gx-word { position: absolute; z-index: 1; left: 52.25%; top: calc(40% - .8185em); margin: 0; font: 600 25cqw/1 var(--gx-serif); letter-spacing: 0; white-space: nowrap; transform: translateX(-1.649em); pointer-events: none; user-select: none;
  color: #6A4025; background: linear-gradient(180deg, #46291A 0%, #6F4126 52%, #9A5530 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; mix-blend-mode: lighten; }
.gx-cue { display: none; }
/* PHONE portrait: the 4:5 master, first object 17 % down; no sandwich (its geometry is the landscape master's) */
@media (max-width: 699px) and (orientation: portrait) {
  .gx-plate { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%); -webkit-mask-composite: initial; mask-composite: initial; margin-top: -9vw; margin-top: -6svh; }
  .gx-plate img { aspect-ratio: 10 / 11; max-height: 58vh; max-height: 58svh; }
  .gx-word { display: none; }
  .gx-hero .gx-h1 { font-size: min(var(--gx-t-h1), 17cqw, 11.5vh); font-size: min(var(--gx-t-h1), 17cqw, 11.5svh); }
  /* photo-first on phones (LC-R2's phone hero was photo-first): kicker, headline and the ask first, then the WHOLE table inside the first screen, then the lead and the hours */
  .gx-hero__in { display: flex; flex-direction: column; }
  .gx-hero__copy, .gx-hero__more { display: contents; }
  .gx-hero__head { order: 1; position: relative; z-index: 3; padding: calc(var(--gx-head) + 24px) var(--gx-edge) 0; }
  .gx-hero .gx-actions { order: 2; position: relative; z-index: 3; padding: 0 var(--gx-edge); margin-top: 20px; }
  .gx-plate { order: 3; margin-top: -3vw; margin-top: -3svh; }
  .gx-hero .gx-lead { order: 4; position: relative; z-index: 3; padding: 0 var(--gx-edge); margin-top: 6px; }
  .gx-hero .gx-hours, .gx-hero .gx-booking-cap { order: 5; position: relative; z-index: 3; padding: 0 var(--gx-edge); }
  .gx-hero .gx-hours { margin-top: 16px; padding-bottom: 30px; }
  .gx-hero .gx-booking-cap { padding-bottom: 30px; }
}
/* TABLET / SQUARE windows: stacked, the landscape plate full width with the sandwich. It comes BEFORE the split so that the split wins wherever both match. */
@media (min-width: 700px) and (min-height: 521px) {
  .gx-hero .gx-h1 { font-size: min(var(--gx-t-h1), 11.5vw); }
  .gx-hero__copy { padding-bottom: 6px; }
  .gx-plate { margin-top: -2vw; }
}
/* SPLIT layout: wide windows, LANDSCAPE TABLETS (1024x768: it used to be a 1150 px tall stack with an empty right half in the fold) and landscape phones. Copy left in the black, the plate bleeds off the right edge,
   the whole hero fits the first screen. The plate is never wider than 74 % of the window, so the copy column keeps >= 300 px. */
@media (min-width: 1100px) and (min-aspect-ratio: 3/2), (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 860px), (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .gx-hero { --hh: calc(100vh - var(--gx-bar)); --pw: min(calc(var(--hh) * 1.2), 1920px, 74vw); height: var(--hh); min-height: calc(380px + (1rem - 16px) * 45); }
  .gx-hero__in { height: 100%; }
  .gx-hero__copy { position: absolute; z-index: 3; left: var(--gx-edge); top: 0; bottom: 0; width: calc(100% - var(--pw) * .84 - var(--gx-edge) - 28px); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--gx-head) + 8px) 0 64px 0; }
  .gx-plate { position: absolute; z-index: 1; right: calc(var(--pw) * -.05); bottom: 0; width: var(--pw); margin: 0; }
  .gx-hero .gx-h1 { font-size: min(var(--gx-t-h1), 17cqw, 12.5vh); }
  .gx-cue { position: absolute; z-index: 4; left: var(--gx-edge); bottom: 22px; 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-cue:hover { color: var(--gx-ink); }
}
@supports (height: 1svh) { @media (min-width: 1100px) and (min-aspect-ratio: 3/2), (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 860px), (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .gx-hero { --hh: calc(100svh - var(--gx-bar)); height: var(--hh); } .gx-hero .gx-h1 { font-size: min(var(--gx-t-h1), 17cqw, 12.5svh); } } }
/* entrance: CSS only (a failsafe by construction; no-motion and no-JS show the composed page) */
@keyframes gx-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes gx-resolve { from { opacity: .4; transform: scale(1.045); } to { opacity: 1; transform: none; } }   /* the first-screen picture is on screen from the first paint (it is the LCP element), only its brightness and scale resolve */
@keyframes gx-wordin { from { opacity: 0; transform: translateX(-1.649em) translateY(3%); } to { opacity: 1; transform: translateX(-1.649em); } }
html.lib-on .gx-hero .gx-rise { opacity: 0; animation: gx-rise 1.1s var(--gx-ease) forwards; animation-delay: calc(.15s + var(--i, 0) * .09s); }
html.lib-on .gx-hero .gx-plate picture { animation: gx-resolve 1.4s var(--gx-ease) both; }
html.lib-on .gx-hero .gx-word { opacity: 0; animation: gx-wordin 1.4s var(--gx-ease) .7s forwards; }

/* ================================ 8. (the reel, the aperture and the craft story of the start page are living-plate scenes of the stage engine now: r3x-glod-stage.css) the film control + the chapter sheet ================================ */
/* the photograph melts into the plane above (no hard top edge): the same night, feathered over the tone-blend length */
.gx-hold__plate::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--gx-fade); z-index: 3; pointer-events: none; background: linear-gradient(180deg, var(--gx-from, #140D08) 0%, rgba(20, 13, 8, 0) 100%); background: linear-gradient(180deg, var(--gx-from, #140D08) 0%, transparent 100%); }
.gx-hold__plate::before { z-index: 3; }
.gx-film-btn { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 44px; padding: 0 14px 0 18px; border-radius: 999px; border: 1px solid rgba(241, 230, 208, .3); background: var(--gx-night); color: var(--gx-ink); font: 600 .875rem/1.2 var(--gx-sans); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.gx-film-btn:hover { border-color: rgba(241, 230, 208, .65); }
.gx-film-btn[hidden] { display: none; }
/* FILM POLICY control (r3-core.js): one constant name "Pausa filmen", aria-pressed = paused; >= 44 x 44 px. P4-064: the state is drawn as the same switch as the demo bar's "Pausa rörelse"
   (the helper's aria-hidden ": på" text is not drawn): knob left = the film plays, knob right on an ember track = paused */
.gx-film-btn .r3-tg__s { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(241, 230, 208, .66); background: transparent; font-size: 0; line-height: 0; color: transparent; overflow: hidden; transition: background-color .2s, border-color .2s; }
.gx-film-btn .r3-tg__s::before { content: ""; position: absolute; top: 50%; left: 2.5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--gx-ink); transition: transform .22s var(--gx-ease-out), background-color .2s; }
.gx-film-btn[aria-pressed="true"] { border-color: var(--gx-ember-2); box-shadow: inset 0 0 0 1px var(--gx-ember-2); }
.gx-film-btn[aria-pressed="true"] .r3-tg__s { background: var(--gx-ember-2); border-color: var(--gx-ember-2); }
.gx-film-btn[aria-pressed="true"] .r3-tg__s::before { transform: translateX(14px); background: var(--gx-night); }
.no-motion .gx-film-btn .r3-tg__s, .no-motion .gx-film-btn .r3-tg__s::before { transition: none; }
.gx-film-btn:focus-visible { outline: 2px solid var(--gx-ember-2); outline-offset: 3px; }

/* the chapter sheet: a feathered dip to the ground + a normal plane, never a rounded card; the ember hinge numeral lies on the seam (W-51) */
.gx-sheet { position: relative; z-index: 3; margin-top: calc(var(--gx-dip) * -1); }
.gx-sheet__dip { height: var(--gx-dip); background: linear-gradient(180deg, rgba(20, 13, 8, 0), #140D08); pointer-events: none; }
.gx-hinge { position: absolute; left: var(--gx-edge); top: 0; z-index: 4; margin: 0; transform: translateY(-34%); pointer-events: none; font: 600 var(--gx-hinge)/1 var(--gx-serif); letter-spacing: -.03em; font-variant-numeric: lining-nums; color: var(--gx-ember); }
.gx-sheet > .gx-plane { padding-top: clamp(100px, 9.5vw, 140px); }

/* the scroll-inked statement (G-54): pale to full ink word by word (--gx-p is written on the host; --r is the word's rank 0..1; static = full ink) */
/* pale to full ink by COLOUR (ink-3 -> ink, 7 : 1 at the start; an opacity dim of the ember phrase measured 2.5 : 1 in pixel QA); the ember phrase never dims */
.gx-ink .gx-iw { --k: clamp(0, (var(--gx-ip, 1) * 1.3 - .15 - var(--r, 0)) / .12, 1); color: var(--gx-ink-3); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .gx-ink .gx-iw { color: color-mix(in srgb, var(--gx-ink) calc(var(--k) * 100%), var(--gx-ink-3)); } }
.gx-ink .gx-em .gx-iw { color: var(--gx-ember); }
.no-motion .gx-ink .gx-iw { color: var(--gx-ink); } .no-motion .gx-ink .gx-em .gx-iw { color: var(--gx-ember); }
.gx-split { display: grid; gap: 22px 56px; margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.gx-split .gx-body { font-size: 1.125rem; }

/* ================================ 9. CRAFT STORY: a sticky picture window follows three steps (W-15, G-01) ================================ */
/* Desktop with motion: copy scrolls in the left column, ONE window stays on the right and crossfades (out .35 s / in .35 s, scale 1.03 -> 1 over .9 s). Phones: the picture, then its step, three times
   (the two wrappers are display:contents, so the figures interleave with the steps; no sticky, no JS needed).
   F-04 / F-14 (fix round 2): from 700 px (and on landscape phones) the static story is a real two-column layout instead of the phone stack: copy and picture side by side, the sides ALTERNATE
   (picture right, picture left) and the last row, the fire, is a FULL-BLEED photograph with its copy on the picture (a scrim keeps it AA). Pictures are capped at 70 svh. */
.gx-story { --gx-ffade: clamp(40px, 5vw, 84px); padding-top: clamp(40px, 5vw, 72px); }   /* one chapter with the statement above it: same night, no seam, no second top padding */
#hantverket.gx-plane { padding-bottom: clamp(16px, 2vw, 28px); }   /* the length of the soft top and foot of the full-bleed row */
.gx-story__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.gx-story__media, .gx-story__steps { display: contents; }
.gx-story__media figure:nth-child(1) { grid-row: 1; } .gx-step:nth-child(1) { grid-row: 2; }
.gx-story__media figure:nth-child(2) { grid-row: 3; } .gx-step:nth-child(2) { grid-row: 4; }
.gx-story__media figure:nth-child(3) { grid-row: 5; } .gx-step:nth-child(3) { grid-row: 6; }
.gx-story__media figure { position: relative; overflow: hidden; aspect-ratio: 16 / 11; background: var(--gx-night); }
.gx-story__media img { width: 100%; height: 100%; object-fit: cover; }
.gx-step { padding-bottom: 28px; }
.gx-step .gx-kicker { margin-bottom: 14px; }
.gx-step .gx-h2 { font-size: min(clamp(2.5rem, 1.5rem + 3.6vw, 4.8rem), 12.5vw); margin-bottom: 18px; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  /* static / no-JS / below 1024 px: three rows, the sides alternate (no sticky, so a full-page capture is the whole story) */
  .gx-story .gx-story__in { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) clamp(16px, 2.2vw, 32px); align-items: center; }
  .gx-story .gx-story__media figure:nth-child(1), .gx-story .gx-story__media figure:nth-child(2) { width: 100%; aspect-ratio: 16 / 10; max-height: max(70vh, 260px); }
  .gx-story .gx-step:nth-child(1), .gx-story .gx-step:nth-child(2), .gx-story .gx-step:nth-child(3) { padding: 0; }
  .gx-story .gx-story__media figure:nth-child(1) { grid-column: 7 / -1; grid-row: 1; } .gx-story .gx-step:nth-child(1) { grid-column: 1 / 6; grid-row: 1; }
  .gx-story .gx-story__media figure:nth-child(2) { grid-column: 1 / 7; grid-row: 2; } .gx-story .gx-step:nth-child(2) { grid-column: 8 / -1; grid-row: 2; }
  /* 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-story .gx-story__media figure:nth-child(3) { grid-column: 1 / -1; grid-row: 3; margin-inline: calc(var(--gx-edge) * -1) 0; width: calc(100% + var(--gx-edge) * 2); aspect-ratio: 8 / 3; min-height: 300px; max-height: max(70vh, 300px); overflow: clip;
    -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-story .gx-story__media figure:nth-child(3) img { display: block; 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-story .gx-story__media figure:nth-child(3)::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%); }
  .gx-story .gx-step:nth-child(3) { grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 2; align-self: end; max-width: min(34rem, 46%); padding-bottom: calc(var(--gx-ffade) * .8 + 12px); }
}
@media (min-width: 700px) and (max-width: 1023px), (min-width: 560px) and (max-width: 1023px) and (orientation: landscape) {
  .gx-story .gx-step .gx-h2 { font-size: min(clamp(2.2rem, 1rem + 3.4vw, 4rem), 11vw); }
  .gx-story .gx-step:nth-child(3) { max-width: min(30rem, 52%); }
}
@media (min-width: 1024px) {
  /* motion on: ONE picture window stays on the right and follows the step in view (the menu page shares these rules with its own dish list) */
  html.lib-on .gx-story .gx-story__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  html.lib-on .gx-story__in { align-items: start; gap: 0 clamp(40px, 6vw, 120px); }
  html.lib-on .gx-story__steps { display: block; grid-column: 1; grid-row: 1; }
  html.lib-on .gx-story__media { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--gx-head) + 20px); height: calc(100vh - var(--gx-head) - 56px); max-height: 780px; }
  html.lib-on .gx-step:nth-child(n) { grid-row: auto; grid-column: auto; min-height: min(56vh, 560px); display: flex; flex-direction: column; justify-content: center; padding: 0; max-width: none; align-self: auto; position: static; }
  html.lib-on .gx-story__media figure:nth-child(n) { grid-row: auto; grid-column: auto; position: absolute; inset: 0; width: auto; aspect-ratio: auto; max-height: none; min-height: 0; margin-inline: 0; -webkit-mask-image: none; mask-image: none; overflow: hidden; opacity: 0; transform: scale(1.03); transition: opacity .35s var(--gx-ease-io), transform .9s var(--gx-ease); }
  html.lib-on .gx-story .gx-story__media figure:nth-child(3) img { width: 100%; margin-inline: 0; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
  html.lib-on .gx-story .gx-story__media figure:nth-child(3)::after { display: none; }
  html.lib-on .gx-story__media figure.is-active { opacity: 1; transform: none; transition: opacity .35s cubic-bezier(.22, .61, .36, 1), transform .9s var(--gx-ease); }
  /* the step in view is marked by an ember dot, never by dimming the others (dimmed text measured 1.8 - 2.6 : 1 in pixel QA) */
  html.lib-on .gx-step .gx-kicker { display: flex; align-items: center; }
  html.lib-on .gx-step .gx-kicker::before { content: ""; flex: none; width: 8px; height: 8px; margin-right: 0; border-radius: 50%; background: var(--gx-ember); transform: scale(0); width: 0; transition: transform .5s var(--gx-ease-out), width .5s var(--gx-ease-out), margin .5s var(--gx-ease-out); }
  html.lib-on .gx-step.is-active .gx-kicker::before { transform: scale(1); width: 8px; margin-right: .9em; }
}
@supports (height: 1svh) {
  @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-story .gx-story__media figure:nth-child(1), .gx-story .gx-story__media figure:nth-child(2) { max-height: max(70svh, 260px); } .gx-story .gx-story__media figure:nth-child(3) { max-height: max(70svh, 300px); } }
  @media (min-width: 1024px) { html.lib-on .gx-story__media { height: calc(100svh - var(--gx-head) - 56px); } html.lib-on .gx-step:nth-child(n) { min-height: min(56svh, 560px); } }
}

/* ================================ 10. COURSES: the word index with a picture (W-72, G-94) ================================ */
.gx-courses__in { display: grid; gap: 40px; }
.gx-courses__copy > * + * { margin-top: 20px; }
.gx-courses .gx-h2 { margin-top: 16px; }
.gx-course-list { display: grid; gap: 2px; margin-top: 28px !important; }
.gx-course { position: relative; display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 6px 0; border: 0; background: none; color: var(--gx-ink-3); text-align: left; font: 600 clamp(2.2rem, 1.2rem + 3.4vw, 4.2rem)/1.04 var(--gx-serif); letter-spacing: -.02em; transition: color .4s var(--gx-ease-out), transform .3s var(--gx-ease-out); }
.gx-course::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gx-ember); transform: scale(0); transition: transform .4s var(--gx-ease-out); }
.gx-course:hover, .gx-course[aria-pressed="true"] { color: var(--gx-ink); transform: translateX(.16em); }
.gx-course[aria-pressed="true"]::before { transform: scale(1); }
.gx-course:focus-visible { outline-offset: 2px; }
.gx-frames { position: relative; }
.gx-frame { margin: 0; }
.gx-frame__ph { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--gx-night); }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-frame__ph { width: 100%; max-height: max(70vh, 300px); } }
@supports (height: 1svh) { @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-frame__ph { max-height: max(70svh, 300px); } } }
@media (min-width: 1100px) { .gx-frame__ph { aspect-ratio: 6 / 5; } }
.gx-frame__ph img { width: 100%; height: 100%; object-fit: cover; }
.gx-frame figcaption { display: grid; gap: 4px; margin-top: 18px; max-width: 28em; }
.gx-frame figcaption strong { font: 600 1.5rem/1.15 var(--gx-serif); color: var(--gx-ink); letter-spacing: -.01em; }
.gx-frame figcaption span { color: var(--gx-ink-2); font-size: .9375rem; }
.gx-courses .gx-frame { display: none; }
.gx-courses .gx-frame.is-on, html:not(.js) .gx-courses .gx-frame { display: block; }
html.lib-on .gx-courses .gx-frame.is-on { animation: gx-swap .55s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes gx-swap { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-courses__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 clamp(40px, 7vw, 140px); align-items: center; }
}

/* ================================ 11. HELD PLATE + GATHER (G-02, W-13): the second hold, far from the first ================================ */
.gx-hold { position: relative; background: var(--gx-night); }
.gx-hold__plate { position: relative; overflow: clip; aspect-ratio: 5 / 6; max-height: 82vh; background: var(--gx-night); }
@supports (height: 1svh) { .gx-hold__plate { max-height: 82svh; } }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-hold__plate { width: 100%; aspect-ratio: 2 / 1; max-height: none; } .gx-hold:not(.gx-hold--page) .gx-hold__plate { max-height: max(70vh, 300px); } }
@supports (height: 1svh) { @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-hold:not(.gx-hold--page) .gx-hold__plate { max-height: max(70svh, 300px); } } }
@media (min-width: 1100px) { .gx-hold:not(.gx-hold--page) .gx-hold__plate { aspect-ratio: 5 / 2; } }
.gx-hold__plate picture, .gx-hold__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.gx-hold__plate::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #140D08; opacity: calc(var(--gx-cover, 0) * .6); }
.gx-hold__run { display: none; }
@media (min-width: 1024px) and (min-height: 600px) {
  html.lib-on .gx-hold__plate { position: sticky; top: 0; height: 100vh; height: 100svh; aspect-ratio: auto; max-height: none; }
  html.lib-on .gx-hold__run { display: block; height: 28vh; }
}
.gx-gather { position: relative; overflow: clip; padding-bottom: clamp(88px, 9.6vw, 150px) !important; }   /* the ghost word is the spacer; the strip below is the same walnut plane (one chapter) */
.gx-gather__copy { position: relative; z-index: 1; }
.gx-gather__copy > * + * { margin-top: 22px; }
.gx-gather .gx-h2 { margin-top: 14px; }
.gx-gather .gx-actions { margin-top: 32px; }
.gx-ghost { position: absolute; left: 0; right: 0; bottom: .02em; z-index: 0; margin: 0; white-space: nowrap; pointer-events: none; user-select: none; font: 400 min(clamp(3.4rem, 11vw, 15rem), 13.5vw)/1 var(--gx-serif); letter-spacing: -.02em; color: rgba(241, 230, 208, .075); text-align: center; transform: translate3d(var(--gx-dx, 0), 0, 0); }

/* ================================ 12. STRIP: the invitation to the gallery, with pictures ================================ */
.gx-strip__head { display: grid; gap: 22px 56px; align-items: end; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-strip__head { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); } }
.gx-strip { padding-top: clamp(28px, 4vw, 64px); }
.gx-strip .gx-h2 { margin-top: 14px; }
.gx-strip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 3.4vw, 48px); }
.gx-strip__grid figure { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--gx-night); }
.gx-strip__grid figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gx-strip__grid img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); align-items: start; }
  .gx-strip__grid figure:first-child { grid-column: auto; aspect-ratio: 6 / 5; }
  .gx-strip__grid figure:nth-child(2) { margin-top: clamp(24px, 3.4vw, 52px); }
  .gx-strip__grid figure:nth-child(3) { margin-top: clamp(12px, 1.7vw, 26px); }
}

/* ================================ 13. WELCOME: the one light plane, a printed menu card ================================ */
.gx-welcome { color: var(--gx-bone-ink); }
.gx-welcome .gx-kicker, .gx-prac .gx-kicker, .gx-menu .gx-kicker { color: var(--gx-bone-ink); }
.gx-welcome .gx-h2 { color: var(--gx-bone-ink); font-size: min(clamp(2.6rem, 1.2rem + 4.6vw, 5.8rem), 13vw); margin-top: 16px; }
.gx-welcome .gx-tail { color: var(--gx-bone-ink-2); }
.gx-welcome__grid { display: grid; gap: 40px 72px; margin-top: clamp(32px, 3.4vw, 48px); }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-welcome__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.gx-welcome__grid p { max-width: 30em; }
.gx-welcome .gx-lead { color: var(--gx-bone-ink-2); }
.gx-welcome .gx-actions { margin-top: 26px; }
.gx-welcome .gx-small { color: var(--gx-bone-ink-2); }
.gx-welcome h3 { font: 600 .8125rem/1.3 var(--gx-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gx-bone-ink-2); margin: 0 0 10px; }
.gx-welcome h3:not(:first-child) { margin-top: 30px; }
.gx-welcome .gx-hrs { font: 600 min(clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem), 8vw)/1.2 var(--gx-serif); color: var(--gx-bone-ink); letter-spacing: -.01em; max-width: 16em; font-variant-numeric: lining-nums; }
.gx-welcome .gx-hrs i { font-style: normal; color: var(--gx-ember-deep); }
.gx-welcome :focus-visible { outline-color: var(--gx-ember-deep); }

/* ================================ 14. FOOTER CURTAIN (W-87): the page lifts away and uncovers a waiting footer ================================ */
/* main is the opaque page (z 2); the footer is its sibling AFTER it and sticks to the bottom of the window (>= 1024 x 620, motion on), so the contact block is revealed, not appended.
   The seam lives INSIDE the revealed footer (its top 140 px blend from the plane above to the night), so there is no edge: the colour at the end of main equals the colour at the top of the footer. */
.gx-page { position: relative; z-index: 2; background: var(--gx-night); }
/* the feather rides the bottom edge of the page (so it also softens the edge while the page lifts away): the last plane blends into the footer's night */
.gx-page::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--gx-fade); pointer-events: none; background: var(--gx-seam, none); }
.gx-foot { position: relative; z-index: 1; overflow: clip; background: var(--gx-night); color: var(--gx-ink); padding: calc(var(--gx-fade) + 8px) var(--gx-edge) 0; display: flex; flex-direction: column; justify-content: space-between; }
.gx-foot__in { position: relative; z-index: 1; display: grid; gap: 36px 64px; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-foot__in { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 5fr); align-items: start; } }
.gx-foot__brand { display: flex; align-items: center; min-height: 44px; font: 600 1.6rem/1 var(--gx-serif); letter-spacing: .3em; color: var(--gx-ink); text-decoration: none; }
.gx-foot__tag { margin-top: 14px; font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.15 var(--gx-serif); color: var(--gx-ink-2); overflow-wrap: normal; }
.gx-foot .gx-kicker { color: var(--gx-ink); }
.gx-foot__dir nav { display: grid; gap: 0 36px; margin-top: 12px; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-foot__dir nav { grid-template-columns: repeat(2, max-content); } }
@media (min-width: 1100px) { .gx-foot__dir nav { grid-template-columns: repeat(3, max-content); } }
.gx-foot__dir a { display: flex; align-items: center; min-height: 44px; color: var(--gx-ink); font: 500 1rem/1.2 var(--gx-sans); text-decoration: none; }
.gx-foot__dir a:hover { color: var(--gx-ember-2); }
.gx-foot__dir a[aria-current="page"] { color: var(--gx-ember-2); }
.gx-foot__note { grid-column: 1 / -1; max-width: 46em; font-size: .8125rem; line-height: 1.6; }   /* b6 DISC-08: the last text row of the footer, full width (it was a narrow third column) */
/* G-58: the business name edge to edge, uncropped, as the last thing on the page (never sliced) */
.gx-foot__word { position: relative; z-index: 1; margin: calc(clamp(20px, 3vw, 40px) - .12em) calc(var(--gx-edge) * -1) 0; font: 600 36.2vw/1 var(--gx-serif); letter-spacing: 0; text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  background: linear-gradient(180deg, #2A1A10 0%, #5A3420 48%, #8E4E2B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #5A3420; height: .86em; }   /* the capitals end at .83 em: the box is no taller than the word (fix round 2: -80 px per page) */
/* the curtain: r3x-glod.js adds .is-curtain only when the whole footer fits the window (a sticky footer taller than the window would never show its top) */
html.lib-on .gx-foot.is-curtain { position: sticky; bottom: 0; }

/* ================================ 16. REVEALS ================================ */
@keyframes gx-failsafe { to { opacity: 1; transform: none; } }
html.lib-on .gx-rv { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1s var(--gx-ease), transform 1s var(--gx-ease); transition-delay: calc(var(--i, 0) * 60ms); animation: gx-failsafe .01s linear 2.6s forwards; }
html.lib-on .gx-rv.is-in { opacity: 1; transform: none; }

/* ================================ 17. REDUCED MOTION / NO-JS: the composed page ================================ */
.no-motion .gx-rise, .no-motion .gx-rv { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.no-motion .gx-hero .gx-plate picture, .no-motion .gx-hero .gx-word { animation: none !important; opacity: 1 !important; }
.no-motion .gx-btn, .no-motion .gx-btn__arr, .no-motion .gx-course, .no-motion .gx-nav a::after, .no-motion .gx-roll .gx-btn__t > span { transition: none; }

/* F-21: the lone "01" of a sub-page hero is an orphan step counter in the static state (no second chapter follows): hidden there; the sheet's top padding that cleared it is trimmed */
.no-motion .gx-hold--page .gx-hinge, html:not(.js) .gx-hold--page .gx-hinge { display: none; }
.no-motion .gx-sheet > .gx-plane.gx-open, html:not(.js) .gx-sheet > .gx-plane.gx-open { padding-top: clamp(36px, 4vw, 72px); }

/* ---- 7b. the clean-plate beat (G-113): the hero pins for a short runway, the copy clears (lead + ask first, headline second) and the bare table with its sandwiched word holds ---- */
.gx-clear__run { display: none; }
/* 7b: the spacing inside the copy comes from the elements own margins */
@media (min-width: 1100px) and (min-aspect-ratio: 3/2) and (min-height: 600px) {
  html.lib-on .gx-clear.is-live > .gx-hero { position: sticky; top: 0; }
  html.lib-on .gx-clear.is-live .gx-clear__run { display: block; height: var(--gx-run, 48vh); }
  html.lib-on .gx-clear.is-live { --c1: clamp(0, (var(--gx-p, 0) - .14) / .2, 1); --c2: clamp(0, (var(--gx-p, 0) - .3) / .2, 1); }
  html.lib-on .gx-clear.is-live .gx-hero__more { opacity: calc(1 - var(--c1)); transform: translate3d(0, calc(var(--c1) * -16px), 0); will-change: opacity, transform; }
  html.lib-on .gx-clear.is-live .gx-hero__head { opacity: calc(1 - var(--c2)); transform: translate3d(0, calc(var(--c2) * -22px), 0); will-change: opacity, transform; }
  html.lib-on .gx-clear.is-live .gx-cue { opacity: calc(1 - var(--c1)); }
  html.lib-on .gx-clear.is-cleared .gx-hero__more { pointer-events: none; }
  html.lib-on .gx-clear.is-live .gx-hero__more:focus-within, html.lib-on .gx-clear.is-live .gx-hero__head:focus-within { opacity: 1; transform: none; pointer-events: auto; }
}
.no-motion .gx-clear > .gx-hero { position: relative !important; } .no-motion .gx-clear__run { display: none !important; }
.no-motion .gx-hero__more, .no-motion .gx-hero__head { opacity: 1 !important; transform: none !important; }

/* ================================ 15. INNER PAGES (meny, filosofi, galleri, kvallen, kontakt) ================================ */
/* every inner page opens like the home chapter: a held photograph (G-02, W-13) with its title on the plate, then the first sheet rises over it with the ember 01 hinge */
.gx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .9em; margin: 0; font: 600 var(--gx-t-kicker)/1.3 var(--gx-serif); letter-spacing: .3em; text-transform: uppercase; color: var(--gx-ink-2); }
.gx-crumb a { color: inherit; text-decoration: none; } .gx-crumb a:hover { color: var(--gx-ink); }
.gx-crumb [aria-current] { color: var(--gx-ember-2); }
.gx-crumb a { color: var(--gx-ink); }
@media (max-width: 479px) { .gx-crumb { letter-spacing: .22em; } }
.gx-ph__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(20, 13, 8, .94) 0, rgba(20, 13, 8, .7) 26%, rgba(20, 13, 8, .2) 52%, rgba(20, 13, 8, 0) 70%), linear-gradient(90deg, rgba(20, 13, 8, .86) 0, rgba(20, 13, 8, .66) 34%, rgba(20, 13, 8, .22) 56%, rgba(20, 13, 8, 0) 72%); }
.gx-ph__copy { position: absolute; left: var(--gx-edge); right: var(--gx-edge); bottom: calc(var(--gx-dip) + clamp(100px, 11vw, 170px)); z-index: 4; max-width: 62rem; }
.gx-ph__copy .gx-h1 { margin-top: 18px; font-size: min(clamp(3.1rem, 1.1rem + 6.6vw, 8.2rem), 15.5vw); line-height: .9; }
.gx-hold--page .gx-hold__plate img { object-position: var(--gx-ox, 50%) var(--gx-oy, 50%); }
@media (min-width: 1024px) and (min-height: 600px) {
  html.lib-on .gx-hold--page .gx-ph__copy { bottom: clamp(56px, 9vh, 110px); opacity: calc(1 - var(--gx-cover, 0) * 6); }
}
@supports (height: 1svh) { @media (min-width: 1024px) and (min-height: 600px) { html.lib-on .gx-hold--page .gx-ph__copy { bottom: clamp(56px, 9svh, 110px); } } }
.gx-sheet > .gx-plane.gx-open { padding-top: clamp(104px, 9vw, 150px); }
.gx-open > * + * { margin-top: 22px; }
.gx-open .gx-lead { font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem); line-height: 1.38; max-width: 26em; color: var(--gx-ink); }
.gx-open .gx-actions { margin-top: 28px; }

/* split opener (galleri): the portrait photograph on the right, melted into the ground on its left */
.gx-split-hero { position: relative; overflow: clip; background: var(--gx-night); }
.gx-split-hero__in { display: grid; min-height: calc(100vh - var(--gx-bar)); }
@supports (height: 1svh) { .gx-split-hero__in { min-height: calc(100svh - var(--gx-bar)); } }
.gx-split-hero__copy { position: relative; z-index: 2; align-self: end; padding: calc(var(--gx-head) + 28px) var(--gx-edge) 56px; }
.gx-split-hero__copy .gx-h1 { margin-top: 18px; font-size: min(clamp(3.1rem, 1.1rem + 6.2vw, 7.6rem), 21vw); line-height: .9; }
.gx-split-hero__ph { position: relative; z-index: 1; margin: 0; }
.gx-split-hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 559px), (max-width: 699px) and (orientation: portrait) {
  .gx-split-hero__in { grid-template-rows: auto auto; min-height: 0; }
  .gx-split-hero__ph { grid-row: 1; aspect-ratio: 4 / 5; max-height: 76vh; max-height: 76svh; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .gx-split-hero__copy { grid-row: 2; margin-top: -22vw; padding-top: 0; }
}
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-split-hero__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .gx-split-hero__copy { padding-bottom: clamp(56px, 10vh, 120px); }
  .gx-split-hero__ph { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 0, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 0, #000 84%, transparent 100%); mask-composite: intersect; }
  .gx-split-hero__ph img { position: absolute; inset: 0; }
}

/* the menu card (meny): the one printed, light plane of the page. Copy left, one picture window right that follows the dish in view (the story mechanic) */
.gx-menu { color: var(--gx-bone-ink); }
.gx-menu .gx-kicker { color: var(--gx-bone-ink); }
.gx-menu__top { display: grid; gap: 14px 40px; margin-bottom: clamp(32px, 5vw, 64px); }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-menu__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } }
.gx-menu__top .gx-small { color: var(--gx-bone-ink-2); }
.gx-dish { position: relative; display: grid; gap: 6px 28px; padding: clamp(22px, 3vw, 40px) 0; border-top: 1px solid rgba(29, 19, 12, .22); }
.gx-dish:last-child { border-bottom: 1px solid rgba(29, 19, 12, .22); }
@media (min-width: 640px) { .gx-dish { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.gx-dish__body > * + * { margin-top: 10px; }
.gx-dish__k { font: 600 .8125rem/1.3 var(--gx-sans); letter-spacing: .14em; text-transform: uppercase; color: #7A2B10; }   /* 13 px on bone: measured 4.4 : 1 at the glyph edge with ember-deep, 6+ now */
.gx-dish__name { font: 600 clamp(2.2rem, 1.2rem + 3.2vw, 4.2rem)/1 var(--gx-serif); letter-spacing: -.018em; color: var(--gx-bone-ink); font-variant-numeric: lining-nums; }
.gx-dish__d { color: var(--gx-bone-ink-2); max-width: 30em; }
.gx-dish__parts { font: 600 .8125rem/1.4 var(--gx-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gx-bone-ink-2); }
.gx-dish__price { display: flex; align-items: baseline; gap: .3em; font: 600 clamp(2.4rem, 1.4rem + 3vw, 4.2rem)/1 var(--gx-serif); letter-spacing: -.02em; color: var(--gx-bone-ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.gx-dish__price span { font: 600 .9375rem/1 var(--gx-sans); letter-spacing: .02em; color: var(--gx-bone-ink-2); }
.gx-dish::before { content: ""; position: absolute; left: -22px; top: clamp(34px, 4vw, 54px); width: 8px; height: 8px; border-radius: 50%; background: var(--gx-ember-deep); transform: scale(0); transition: transform .4s var(--gx-ease-out); }
@media (min-width: 1024px) { .gx-dish.is-active::before { transform: scale(1); } }
.gx-menu__note { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(28px, 4vw, 48px); }
.gx-menu__note p { color: var(--gx-bone-ink-2); max-width: 28em; }
.gx-menu .gx-btn--bone:focus-visible, .gx-menu :focus-visible { outline-color: var(--gx-ember-deep); }
/* the menu uses the story mechanic with its own layout: phones = picture, dish, picture, dish; desktop = rows left, ONE window right that follows the dish in view */
.gx-menu .gx-story__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.gx-menu .gx-story__media, .gx-menu .gx-story__steps { display: contents; }
.gx-menu .gx-story__media figure { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-top: 28px; background: var(--gx-bone); }
.gx-menu .gx-story__media figure img { width: 100%; height: 100%; object-fit: cover; }
.gx-menu .gx-story__media figure:nth-child(1) { grid-row: 1; } .gx-menu .gx-dish:nth-child(1) { grid-row: 2; }
.gx-menu .gx-story__media figure:nth-child(2) { grid-row: 3; } .gx-menu .gx-dish:nth-child(2) { grid-row: 4; }
.gx-menu .gx-story__media figure:nth-child(3) { grid-row: 5; } .gx-menu .gx-dish:nth-child(3) { grid-row: 6; }
.gx-menu .gx-story__media figure:first-child { margin-top: 0; }
@media (min-width: 1024px) {
  .gx-menu .gx-story__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(40px, 6vw, 110px); align-items: start; }
  .gx-menu .gx-story__steps { display: block; grid-column: 1; grid-row: 1; }
  .gx-menu .gx-dish:nth-child(n) { grid-row: auto; }
  .gx-menu .gx-story__media { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--gx-head) + 28px); aspect-ratio: 4 / 5; width: 100%; max-height: calc(100vh - var(--gx-head) - 56px); }
  .gx-menu .gx-story__media figure:nth-child(n) { grid-row: auto; position: absolute; inset: 0; aspect-ratio: auto; margin: 0; opacity: 0; transition: opacity .35s var(--gx-ease-io); }
  .gx-menu .gx-story__media figure.is-active { opacity: 1; }
  .no-motion .gx-menu .gx-story__media figure { transition: none; }
}
@supports (height: 1svh) { @media (min-width: 1024px) { .gx-menu .gx-story__media { max-height: calc(100svh - var(--gx-head) - 56px); } } }

/* F-04: from 700 px (and on landscape phones) below the 1024 px sticky window the menu is rows too: the dish on the left, its picture on the right (it was picture / dish / picture / dish in one column) */
@media (min-width: 700px) and (max-width: 1023px), (min-width: 560px) and (max-width: 1023px) and (orientation: landscape) {
  .gx-menu .gx-story__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(28px, 5vw, 64px); align-items: center; }
  .gx-menu .gx-story__media figure:nth-child(n) { grid-column: 2; margin-top: 0; width: 100%; aspect-ratio: 4 / 3; max-height: max(70vh, 260px); }
  .gx-menu .gx-dish:nth-child(n) { grid-column: 1; }
  .gx-menu .gx-story__media figure:nth-child(1), .gx-menu .gx-dish:nth-child(1) { grid-row: 1; }
  .gx-menu .gx-story__media figure:nth-child(2), .gx-menu .gx-dish:nth-child(2) { grid-row: 2; }
  .gx-menu .gx-story__media figure:nth-child(3), .gx-menu .gx-dish:nth-child(3) { grid-row: 3; }
}

/* principles and rhythm: a numbered triad (G-71); ember lining numerals, one notation */
.gx-trio { display: grid; gap: 40px 48px; margin-top: clamp(36px, 5vw, 72px); }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-trio { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); } }
.gx-trio__n { display: block; font: 400 clamp(4.4rem, 2.6rem + 5vw, 8rem)/.9 var(--gx-serif); letter-spacing: -.03em; color: var(--gx-ember); font-variant-numeric: lining-nums; margin-bottom: 18px; }
.gx-trio h3 { font: 600 clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem)/1.08 var(--gx-serif); letter-spacing: -.012em; color: var(--gx-ink); margin-bottom: 12px; }
.gx-trio p { color: var(--gx-ink-2); max-width: 24em; }

/* editorial: a photograph and one short thought (the original "Omsorg i varje detalj") */
.gx-edit__in { display: grid; gap: 28px 56px; align-items: center; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-edit__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .gx-edit--rev .gx-edit__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .gx-edit--rev .gx-edit__fig { order: 2; } }
.gx-edit__fig { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--gx-night); }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-edit__fig { aspect-ratio: 5 / 4; } }
.gx-edit__fig img { width: 100%; height: 100%; object-fit: cover; }
.gx-edit figcaption { margin-top: 12px; color: var(--gx-ink-3); font-size: .875rem; }
.gx-edit__copy > * + * { margin-top: 20px; }
.gx-edit .gx-h2 { margin-top: 14px; }

/* the closing ask: poster serif, one ember button (the footer curtain follows) */
.gx-close { text-align: center; background-image: radial-gradient(52% 36% at 50% 54%, rgba(236, 106, 62, .17) 0, rgba(236, 106, 62, .06) 55%, rgba(236, 106, 62, 0) 100%); }
.gx-close__in { max-width: 66rem; margin-inline: auto; }
.gx-close .gx-lead, .gx-close .gx-actions { margin-inline: auto; justify-content: center; }
.gx-close__in > * + * { margin-top: 24px; }
.gx-close .gx-h2 { font-size: min(clamp(2.8rem, 1.2rem + 6.4vw, 7.6rem), 14vw); line-height: .92; margin-top: 18px; }
.gx-close .gx-lead { margin-top: 26px; }
.gx-close .gx-actions { margin-top: 30px; }
/* F-21: the closing ask is NOT one pasted block. meny keeps the centred poster (above); filosofi is a split (copy left, the candle picture right); galleri lies on a dining-table plate (copy left on the dark of the picture). Same CTA, same destination. */
.gx-close--split { text-align: left; background-image: none; }
.gx-close--split .gx-close__in { max-width: var(--gx-wrap); display: grid; gap: 36px 56px; align-items: center; }
.gx-close--split .gx-close__in > * + * { margin-top: 0; }
.gx-close--split .gx-close__copy > * + * { margin-top: 24px; }
.gx-close--split .gx-h2 { font-size: min(clamp(2.6rem, 1.1rem + 4.8vw, 5.8rem), 13vw); }
.gx-close--split .gx-lead, .gx-close--split .gx-actions { margin-inline: 0; justify-content: flex-start; }
.gx-close__fig { margin: 0; overflow: hidden; aspect-ratio: 16 / 11; width: 100%; background: var(--gx-night); }   /* phones: a landscape crop, like the story pictures */
.gx-close__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-close--split .gx-close__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .gx-close__fig { aspect-ratio: 4 / 5; max-height: max(70vh, 300px); }
}
@supports (height: 1svh) { @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-close__fig { max-height: max(70svh, 300px); } } }
.gx-close--plate { text-align: left; background-image: none; padding-top: clamp(104px, 14vw, 220px); padding-bottom: clamp(64px, 8vw, 120px); }
.gx-close--plate .gx-close__in { max-width: 38rem; margin-inline: 0; }
.gx-close--plate .gx-h2 { font-size: min(clamp(2.6rem, 1.1rem + 5.2vw, 6.4rem), 13vw); }
.gx-close--plate .gx-lead, .gx-close--plate .gx-actions { margin-inline: 0; justify-content: flex-start; }
.gx-close__ph { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: clip; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--gx-fade) + 8px), #000 calc(var(--gx-fade) + 230px), #000 calc(100% - 72px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--gx-fade) + 8px), #000 calc(var(--gx-fade) + 230px), #000 calc(100% - 72px), transparent 100%); }
.gx-close__ph img { pointer-events: auto; display: block; position: absolute; left: 50%; top: 0; width: min(100%, 1920px); height: 100%; transform: translateX(-50%); object-fit: cover; object-position: 66% 50%;
  --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-close__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(39, 26, 16, .97) 0, rgba(39, 26, 16, .88) 36%, rgba(39, 26, 16, .4) 62%, rgba(39, 26, 16, .1) 100%); }   /* the scrim is the plane's own walnut, so the margin stays the plane tone */
@media (max-width: 699px) { .gx-close__ph::after { background: linear-gradient(180deg, rgba(39, 26, 16, .7) 0, rgba(39, 26, 16, .9) 100%); } }

/* FAQ: native details, lines inside content only */
.gx-faq { padding-bottom: calc(var(--gx-sec) * .5); }
.gx-faq__list { margin-top: clamp(20px, 3vw, 36px); border-top: 1px solid rgba(241, 230, 208, .2); max-width: 56rem; }
.gx-faq details { border-bottom: 1px solid rgba(241, 230, 208, .2); }
.gx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none; font: 600 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.2 var(--gx-serif); letter-spacing: -.01em; color: var(--gx-ink); }
.gx-faq summary::-webkit-details-marker { display: none; }
.gx-faq summary span { flex: none; position: relative; width: 20px; height: 20px; }
.gx-faq summary span::before, .gx-faq summary span::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--gx-ember); transition: transform .35s var(--gx-ease-out); }
.gx-faq summary span::after { transform: rotate(90deg); }
.gx-faq details[open] summary span::after { transform: rotate(0); }
.gx-faq details p { padding: 0 0 22px; max-width: 40em; color: var(--gx-ink-2); }
.gx-faq summary:focus-visible { outline-offset: 2px; }

/* gallery: an asymmetric grid on the night, captions numbered 01-04 */
.gx-gal { display: grid; gap: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 48px); }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-gal { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; } }
.gx-gal figure { margin: 0; container-type: inline-size; }
.gx-gal__ph { position: relative; overflow: hidden; background: var(--gx-night); }
.gx-gal__ph img { width: 100%; height: 100%; object-fit: cover; }
.gx-gal figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: baseline; margin-top: 18px; max-width: 30em; }
.gx-gal figcaption .gx-n { grid-row: span 2; }
.gx-gal figcaption h2 { font: 600 min(clamp(1.8rem, 1.3rem + 1.4vw, 2.7rem), max(calc((100cqi - 2.1rem) / 4.7), 28.8px))/1.05 var(--gx-serif); letter-spacing: -.012em; color: var(--gx-ink); }
.gx-gal figcaption p { color: var(--gx-ink-2); font-size: .9375rem; grid-column: 2; }
.gx-gal__a .gx-gal__ph { aspect-ratio: 16 / 10; }
.gx-gal__b .gx-gal__ph { aspect-ratio: 4 / 5; }
.gx-gal__c .gx-gal__ph { aspect-ratio: 4 / 5; }
.gx-gal__d .gx-gal__ph { aspect-ratio: 1 / 1; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-gal__a { grid-column: 1 / span 8; }
  .gx-gal__b { grid-column: 9 / span 4; margin-top: clamp(48px, 9vw, 150px); }
  .gx-gal__c { grid-column: 1 / span 5; }
  .gx-gal__d { grid-column: 7 / span 6; margin-top: clamp(24px, 6vw, 110px); }
}
.gx-gal__note { margin-top: clamp(36px, 5vw, 64px); max-width: 40em; }

/* contact practicalities on the bone plane */
.gx-prac { color: var(--gx-bone-ink); }
.gx-prac .gx-kicker { color: var(--gx-bone-ink); }
.gx-prac .gx-h2 { color: var(--gx-bone-ink); font-size: min(clamp(2.6rem, 1.2rem + 5vw, 6rem), 13vw); margin-top: 16px; }
.gx-prac .gx-welcome__grid { margin-top: clamp(24px, 3vw, 40px); }
.gx-prac h3 { font: 600 .8125rem/1.3 var(--gx-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gx-bone-ink-2); margin: 0 0 10px; }
.gx-prac h3:not(:first-child) { margin-top: 30px; }
.gx-prac .gx-hrs { font: 600 min(clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem), 8vw)/1.2 var(--gx-serif); color: var(--gx-bone-ink); letter-spacing: -.01em; max-width: 16em; font-variant-numeric: lining-nums; }
.gx-prac .gx-small { color: var(--gx-bone-ink-2); }
.gx-booking-cap { margin-top: 14px; color: var(--gx-ink-3); font-size: .875rem; max-width: 30em; }
.gx-plane--flat { padding-top: calc(var(--gx-sec) * .75); }
.no-motion .gx-hero--page .gx-plate picture, .no-motion .gx-hero--page .gx-word { animation: none !important; opacity: 1 !important; }

/* ---- short landscape windows (phones turned sideways: 667x375, 844x390, 932x430): price-less restaurant, so the ask is the CTA: headline, lead, the ask and the hours all stay inside the first screen ---- */
@media (max-height: 520px) { :root { --gx-head: 56px; } }
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .gx-hero { --pw: min(calc(var(--hh) * 1.34), 1920px, 66vw); }   /* the table is the picture here: as large as the header clearance allows */
  .gx-hero .gx-kicker, .gx-hero .gx-crumb, .gx-cue { display: none; }
  .gx-hero .gx-h1 { margin-top: 0; font-size: min(var(--gx-t-h1), 17cqw, 11vh); }
  .gx-hero .gx-lead { margin-top: 10px; font-size: .8125rem; line-height: 1.4; }
  .gx-hero .gx-actions { margin-top: 12px; }
  .gx-hero .gx-btn { --h: 44px; padding: .7em 20px; font-size: .9375rem; }
  .gx-hero .gx-hours { margin-top: 8px; font-size: .8125rem; }
  .gx-hero .gx-booking-cap { font-size: .8125rem; margin-top: 8px; }
  .gx-hero__copy { padding: calc(var(--gx-head) + 2px) 0 10px 0; }
}
@supports (height: 1svh) { @media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) { .gx-hero .gx-h1 { font-size: min(var(--gx-t-h1), 17cqw, 11svh); } } }

/* ---- NEXT (W-99): signposting to the next page of the example, a wide preview plate that melts into the planes above and below ---- */
.gx-next { display: block; position: relative; overflow: clip; color: var(--gx-ink); text-decoration: none; }
/* P4-060 (root cause found with the DOM + a pixel row profile, NOT the figure's own top): the plane's own seam (.gx-plane::before, z-index -1) is an OPAQUE walnut-to-night gradient over the first --gx-fade px of the band
   and it paints OVER this picture (z-index -2). The picture's mask used to start rising at y = 0, i.e. under the seam, so at y = --gx-fade, where the seam ends, the picture came out at ~47 % of its mask x .64 opacity:
   a straight, full-width edge (row profile: +16 levels in 10 px). The picture now stays transparent until the seam has ended and rises over 110 px from there, tone to tone (round 3b-2). */
.gx-next__ph { position: absolute; inset: 0; z-index: -2; margin: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--gx-fade), #000 calc(var(--gx-fade) + 110px), #000 max(calc(var(--gx-fade) + 110px), 58%), transparent 92%); mask-image: linear-gradient(180deg, transparent 0, transparent var(--gx-fade), #000 calc(var(--gx-fade) + 110px), #000 max(calc(var(--gx-fade) + 110px), 58%), transparent 92%); }
/* P4-063: never above the source. --gx-nsrc (inline, = the widest baked file) caps the picture at 96 % of it (the hover zoom of 1.04 then peaks at the source size), centred, its sides melt into the night */
.gx-next__ph img { display: block; margin-inline: auto; pointer-events: auto; width: min(100%, calc(var(--gx-nsrc, 9999px) * .96)); height: 100%; object-fit: cover; opacity: .84; transform: scale(1); --gx-sf: clamp(0px, calc(100vw - var(--gx-nsrc, 9999px) * .96), 240px);
  -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%); transition: transform 1.2s var(--gx-ease), opacity .6s var(--gx-ease-out); }
.gx-next__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 13, 8, .82) 0, rgba(20, 13, 8, .35) 60%, rgba(20, 13, 8, 0) 100%); }
.gx-next__in { position: relative; pointer-events: none; display: grid; gap: 14px 28px; padding-block: clamp(24px, 3.4vw, 52px) clamp(32px, 4.2vw, 64px); }
.gx-next__t { font: 600 clamp(2.25rem, 1.1rem + 3vw, 3.75rem)/.98 var(--gx-serif); letter-spacing: -.022em; color: var(--gx-ink); font-variant-numeric: lining-nums; }
.gx-next__arr { display: inline-grid; place-items: center; width: clamp(44px, 3.8vw, 58px); height: clamp(44px, 3.8vw, 58px); border-radius: 50%; background: var(--gx-ember); color: #1A0F08; font-size: clamp(1.15rem, 1.3vw, 1.5rem); transition: transform .45s var(--gx-ease-quart), background .25s; }
.gx-next:hover .gx-next__arr { transform: translate(4px, -4px) rotate(0deg); background: var(--gx-ember-2); }
.gx-next:hover .gx-next__ph img, .gx-next:focus-visible .gx-next__ph img { transform: scale(1.04); opacity: .9; }
.gx-next:focus-visible { outline-offset: -6px; }
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-next__in { grid-template-columns: 1fr auto; align-items: end; } .gx-next__in > .gx-kicker { grid-column: 1 / -1; } }
.no-motion .gx-next__ph img, .no-motion .gx-next__arr { transition: none; }
.gx-next.gx-plane { padding: var(--gx-fade) var(--gx-edge) 0; }
.gx-foot__word { font-size: 35.2vw; }
@media (max-width: 559px), (max-width: 699px) and (orientation: portrait) {
  .gx-split-hero__ph { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 98%); mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 98%); }
  .gx-split-hero__copy { margin-top: -13vw; }
}

/* ---- no container-query units (Safari < 16, old Chrome): the hero keeps its composition with viewport-based sizes ---- */
@supports not (width: 1cqw) {
  .gx-hero .gx-h1 { font-size: min(var(--gx-t-h1), 11.5vw); }
  .gx-hero .gx-lead { font-size: 1.1875rem; }
  .gx-word { font: 600 25vw/1 var(--gx-serif); }
}
@media (min-width: 1100px) and (min-aspect-ratio: 3/2), (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 860px), (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  @supports not (width: 1cqw) { .gx-hero .gx-h1 { font-size: min(var(--gx-t-h1), 5.2vw, 12vh); } .gx-word { font: 600 calc(var(--pw) * .25)/1 var(--gx-serif); } }
}
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-strip__grid figure { aspect-ratio: 6 / 5; } }

/* ---- a photograph is never enlarged past its source: above that width the plate is centred and its sides melt into the ground (--gx-src = the widest baked file) ---- */
.gx-cap { --gx-src: 100vw; --gx-sidefade: clamp(0px, calc(100vw - var(--gx-src)), 220px); }
.gx-cap img { left: 50%; right: auto; width: min(100%, var(--gx-src)); transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gx-sidefade), #000 calc(100% - var(--gx-sidefade)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gx-sidefade), #000 calc(100% - var(--gx-sidefade)), transparent 100%); }

/* ---- phones: a small ember "Boka bord" pill joins the header once the hero is behind the visitor (the page has no bottom bar; the hero ask and the menu sheet cover the top of the page) ---- */
.gx-head__book { display: none; }
@media (max-width: 699px) {
  .gx-head__book { display: inline-flex; flex: none; white-space: nowrap; --h: 44px; min-height: 44px; padding: 0 18px; font-size: .9375rem; margin-right: 6px; }
@media (max-width: 389px) { .gx-head__book { display: none; } }
  html.js .gx-head__book { visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--gx-ease-out), transform .35s var(--gx-ease-out), visibility 0s linear .35s; }
  html.js .gx-head.has-book .gx-head__book { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  body.gx-menu-open .gx-head__book { visibility: hidden !important; }
  .gx-head .gx-head__book { position: relative; z-index: 2; }
  html.js .gx-head.no-room .gx-head__book { display: none; }   /* b6: set by r3x-glod.js where wordmark + pill + menu button do not fit the header */
}
.no-motion .gx-head__book { transition: none !important; }

/* ---- phones: the hinge numeral lies in the dark of the dip, not on the bright foot of a photograph (pixel QA: "03" on the cream tablecloth measured 2.0 : 1); the page title keeps a deeper scrim ---- */
@media (max-width: 767px) {
  :root { --gx-dip: 92px; }
  .gx-hinge { transform: translateY(-6%); }
  .gx-ph__scrim { background: linear-gradient(0deg, rgba(20, 13, 8, .96) 0, rgba(20, 13, 8, .84) 44%, rgba(20, 13, 8, .62) 64%, rgba(20, 13, 8, .34) 80%, rgba(20, 13, 8, 0) 94%), linear-gradient(90deg, rgba(20, 13, 8, .55) 0, rgba(20, 13, 8, 0) 80%); }
}

@media (max-width: 767px) { .gx-hold--page .gx-hold__plate img { object-position: var(--gx-oxm, var(--gx-ox, 50%)) var(--gx-oy, 50%); } }

/* ---- fix round 2: the sub-pages (height budget) ---- */
/* the booking page: a hero that is a 650 px plate at most (it is not the start page's one-screen opener) */
@media (min-width: 700px) {
  .gx-hero--page { --hh: min(calc(100vh - var(--gx-bar)), 620px); }   /* 650 -> 620: pays for the 12 px taller demo bar (the booking page was +18.7 % of LC-R2) */
}
@supports (height: 1svh) { @media (min-width: 700px) { .gx-hero--page { --hh: min(calc(100svh - var(--gx-bar)), 620px); } } }
/* the held plate of a sub-page title: 21:9 from 1100 px (it was 2:1, a 720 px plate at 1440), the title still has its 480 px of room */
@media (min-width: 1100px) { .gx-hold--page .gx-hold__plate { aspect-ratio: 21 / 9; } }
/* the stacked tablet hero of the booking page: the plate is 86 % wide (its floor is the page ground, so nothing shows), 70 px less height */
@media (min-width: 700px) and (min-height: 521px) { .gx-hero--page .gx-plate { width: 86%; margin-inline: auto; } }
@media (min-width: 1100px) and (min-aspect-ratio: 3/2), (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 860px) { .gx-hero--page .gx-plate { width: var(--pw); margin-inline: 0; } }
/* the split closing of filosofi: a square picture from 1100 px (it was 4:5, 630 px) */
@media (min-width: 1100px) { .gx-close__fig { aspect-ratio: 1 / 1; } }
/* the footer after a dark page end (night -> night needs no 140 px blend): its top padding is only what the feather needs (kontakt: 96 px) or a plain gap (the others) */
.gx-page:not(.gx-seam-bone-night) + .gx-foot { padding-top: clamp(40px, 5vw, 72px); }
.gx-page.gx-seam-hearth-night + .gx-foot { padding-top: calc(clamp(56px, 7vw, 96px) + 8px); }
/* the opening hours: a time range never breaks inside (markup only, the words are the same) */
.gx-nw { white-space: nowrap; }

/* ================================ 18. ROUND 3b-2 (XG): menu panel, demo bar, sub-pages, widths (see the notes in evidence/r3/final9/XG) ================================ */
/* 18.1 the ask of the ZS band is a pill like on the other five examples (P4-041): ZS gold on ZS ink, the same rule in the dark and the light theme (the band is ZS ink in both). It is the FIRST link, Smula's order. */
.gx-pkg .gx-pkg__cta { min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--gx-zs-gold); color: var(--gx-zs-ink); font-weight: 600; text-decoration: none; margin-right: 6px; }
.gx-pkg .gx-pkg__cta:hover { background: #E9CF98; }
.gx-pkg .gx-pkg__cta:focus-visible { outline: 3px solid #F3F0EA; outline-offset: 3px; }
@media (max-width: 420px) { .gx-pkg .gx-pkg__cta { width: 100%; justify-content: center; margin-right: 0; } }

/* 18.2 a sub-page title in the STATIC state (P4-061, P4-092): the "01" hinge is hidden there, so the title no longer has to clear it. It sits on the foot of the plate (above the dip) and the lead follows
   straight after it: the ~250 px of empty dark between headline and lead at 1440x900 is gone and the photograph above the title is shown, not buried */
.no-motion .gx-hold--page .gx-ph__copy, html:not(.js) .gx-hold--page .gx-ph__copy { bottom: calc(var(--gx-dip) * .3 + clamp(14px, 1.8vw, 28px)); }
/* the room photograph of /kvallen is the darkest plate of the example: a measured lift (--gx-lift on the plate, 1 = none) lets the kitchen on its right half carry the first screen (P4-092) */
.gx-hold--page .gx-hold__plate img { filter: brightness(var(--gx-lift, 1)); }
@media (max-width: 767px) { .gx-hold--page .gx-hold__plate img { filter: brightness(var(--gx-liftm, var(--gx-lift, 1))); } }   /* b6 MP-05: phone-only lift */

/* 18.3 a photograph is never drawn above its source, in height either (P4-063 / P4-048): the held plates stop at the height of their widest baked file (--gx-srch), the picture is centred, its sides melt
   into the ground (see .gx-cap) and its foot melts into the plane below; the pinned plate follows the same cap */
.gx-hold__plate.gx-cap { max-height: var(--gx-srch, none); }
/* the foot fade lives on the PICTURE, not on the plate: a mask on the plate would make it a stacking context and the sheet's dip would paint over the title (found in the phone folds) */
.gx-cap img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gx-sidefade), #000 calc(100% - var(--gx-sidefade)), transparent 100%), linear-gradient(180deg, #000 calc(100% - 110px), transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gx-sidefade), #000 calc(100% - var(--gx-sidefade)), transparent 100%), linear-gradient(180deg, #000 calc(100% - 110px), transparent 100%); mask-composite: intersect; }
.gx-hold:not(.gx-hold--page) .gx-hold__plate.gx-cap { max-height: min(max(70vh, 300px), var(--gx-srch, 99999px)); }
@supports (height: 1svh) { .gx-hold:not(.gx-hold--page) .gx-hold__plate.gx-cap { max-height: min(max(70svh, 300px), var(--gx-srch, 99999px)); } }
@media (min-width: 1024px) and (min-height: 600px) {
  html.lib-on .gx-hold__plate.gx-cap { height: min(100vh, var(--gx-srch, 100vh)); max-height: none; }
}
@supports (height: 1svh) { @media (min-width: 1024px) and (min-height: 600px) { html.lib-on .gx-hold__plate.gx-cap { height: min(100svh, var(--gx-srch, 100svh)); } } }

/* 18.4 the booking page's opener on very wide windows (P4-048): the plate and the title grow with the window above 1700 px instead of floating small on a black field (the start page's hero is not touched) */
@media (min-width: 1700px) and (min-aspect-ratio: 3/2) {
  .gx-hero--page { --hh: min(calc(100vh - var(--gx-bar)), clamp(620px, 38.2vw, 1000px)); --gx-t-h1: clamp(7.25rem, 6.8vw, 12rem); }
}
@supports (height: 1svh) { @media (min-width: 1700px) and (min-aspect-ratio: 3/2) { .gx-hero--page { --hh: min(calc(100svh - var(--gx-bar)), clamp(620px, 38.2vw, 1000px)); } } }

/* 18.5 repeated blocks (P4-053 / P4-057, STRUCTURE AND STYLING ONLY, every word is unchanged): "Omsorg i varje detalj" is on three pages. meny keeps the contained picture on the left, filosofi mirrors it (the
   .gx-edit--rev order was never applied to the figure, the picture stayed on the left like on meny), kvallen is a wide picture over a two-column copy row (no picture at the screen edge: the tone seams stay pure).
   The FAQ "Bra att veta / Innan vi ses." is on kvallen and kontakt: kontakt keeps the stacked list, kvallen sets the heading beside the list. */
@media (min-width: 700px), (min-width: 560px) and (orientation: landscape) {
  .gx-edit--rev .gx-edit__fig-wrap { order: 2; } .gx-edit--rev .gx-edit__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }   /* the picture keeps its 5 columns, now on the right */
  .gx-edit--wide .gx-edit__in { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); align-items: start; }
  .gx-edit--wide .gx-edit__fig-wrap { max-width: 1380px; }   /* the widest baked file is 1440 px: never drawn larger */
  .gx-edit--wide .gx-edit__fig { width: 100%; aspect-ratio: 21 / 9; max-height: max(52vh, 280px); }
@supports (height: 1svh) { @media (min-width: 700px), (min-width: 560px) and (orientation: landscape) { .gx-edit--wide .gx-edit__fig { max-height: max(52svh, 280px); } } }
  .gx-edit--wide .gx-edit__fig img { object-position: 66% 56%; }
  .gx-edit--wide .gx-edit__copy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; max-width: 1380px; }
  .gx-edit--wide .gx-edit__copy > * { margin-top: 0; }
  .gx-edit--wide .gx-edit__copy > .gx-kicker { grid-column: 1; grid-row: 1; } .gx-edit--wide .gx-edit__copy > .gx-h2 { grid-column: 1; grid-row: 2; margin-top: 14px; }
  .gx-edit--wide .gx-edit__copy > .gx-body { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
@media (min-width: 900px) {
  .gx-faq--split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 6vw, 112px); align-content: start; }
  .gx-faq--split > .gx-kicker { grid-column: 1; grid-row: 1; } .gx-faq--split > .gx-h2 { grid-column: 1; grid-row: 2; }
  .gx-faq--split > .gx-faq__list { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none; }
}

/* RC3 WP-MENU-EXAMPLES */
.gx-crumb a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 13px; margin-block: -13px; }

/* b6 G4 TYP-10: no one-word last lines */
p, li, figcaption { text-wrap: pretty; }

/* b6 G7: strip */
@media (max-width: 699px) { .gx-strip__grid figure:first-child img { object-position: 50% 32%; } }   /* MP-07 */

/* b6 text 200 %: wrap, never cut off */
:where(h1, h2, h3, h4, p, li, dd, dt, figcaption, summary, label, td, th, .r3-display, .r3-lead, .r3-body, .r3-small) { overflow-wrap: anywhere; }

/* b6 text 200 %: demo bar columns shrink to their words */
@container gxbar (max-width: 47.99em) { .gx-bar__in { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* b6 text 200 %: demo bar type is capped by the window on phones */
@media (max-width: 599px) { .gx-bar { font-size: min(.875rem, 4.2vw); } }

/* b6 text 200 %: header nav type capped on tablets */
@media (min-width: 700px) and (max-width: 1099px) { .gx-nav a { font-size: min(.9375rem, 2.1vw); } }

/* b6 HEAD-WRAP */
@media (max-width: 699px) {
  .gx-head .gx-logo { font-size: min(1.5rem, 6.5vw); }
  .gx-head .gx-head__book, .gx-head .gx-menu-btn { font-size: min(.9375rem, 4vw); }
}

/* b6 fix2 EU-05 */
.gx-bar__lab .gx-bar__fic, .gx-bar__lab b { white-space: nowrap; }

/* b6 fix6 EU-05, fix33: a container query on the bar (visible width, scrollbar excluded), in em */
.gx-bar { container: gxbar / inline-size; }
@container gxbar (max-width: 25.5em) { .gx-bar__home { max-width: 5.8em; line-height: 1.15; } .gx-bar__lab { flex-wrap: nowrap; white-space: nowrap; } }

/* b6 fix46 page hero plate 700-1023 motion on */
@media (min-width: 700px) and (max-width: 1023px) { html:not(.no-motion) .gx-hold--page .gx-hold__plate { aspect-ratio: 3 / 2; min-height: calc(66.667vw - 16px + (1rem - 16px) * 18); } html.no-motion .gx-hold--page .gx-hold__plate { min-height: calc(50vw - 16px + (1rem - 16px) * 18); } }

/* b6 fix55 header height, enlarged text */
:root { --gx-head: calc(72px + (1rem - 16px) * 5); }
@media (min-width: 768px) { :root { --gx-head: calc(80px + (1rem - 16px) * 5); } }
@media (max-width: 599px) { :root { --gx-head: calc(64px + (1rem - 16px) * 5); } }
@media (max-height: 520px) { :root { --gx-head: calc(56px + (1rem - 16px) * 5); } }

/* b6 fix61 */
/* b6 fix61 phone menu words capped by the sheet width (the longest word ran out of a 320 px window at 200 % text) */
@media (max-width: 699px) { html.js .gx-nav a:not(.gx-nav__cta) { font-size: min(clamp(2.2rem, 1.2rem + 5vw, 3.2rem), calc((100vw - 2 * var(--gx-gutter)) / 4.7)); } }
dialog h2:focus { outline: none; box-shadow: none; }   /* the heading takes focus when the dialog opens (it is not a control) */

/* b6 fix80 glod */
/* b6 fix80 glod: the split-hero headline never needs more than 11 vw from 560 px (never binds at 100 %: 52 px at 560, 81 px at 1023); at larger text it keeps its longest word inside the column */
@media (min-width: 560px) { .gx-split-hero__copy .gx-h1 { font-size: min(clamp(3.1rem, 1.1rem + 6.2vw, 7.6rem), 21vw, 11vw); } }

/* b6 fix92 glod */
/* b6 fix92 glod */
@media (max-width: 359px) { .gx-pkg__list { letter-spacing: -.012em; } }
@media (min-width: 560px) and (max-width: 619px) and (orientation: landscape) { .gx-pkg__list { overflow-wrap: anywhere; } }
.gx-next__t { font-size: min(clamp(2.25rem, 1.1rem + 3vw, 3.75rem), 15vw); }
.gx-dialog__in { grid-template-columns: minmax(0, 1fr); }
.gx-dialog .gx-btn { max-width: 100%; overflow-wrap: anywhere; }
/* landscape phones: a one-row demo bar (home | label | motion | 'Vad ingar?') once the bar is 36 em wide */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  @container gxbar (min-width: 36em) {
    .gx-bar__in { grid-template-columns: max-content minmax(0, 1fr) max-content max-content; gap: 0 12px; }
    .gx-bar__home { grid-column: 1; grid-row: 1; }
    .gx-bar__lab { grid-column: 2; grid-row: 1; justify-self: start; justify-content: flex-start; text-align: left; }
    .gx-bar__mo { grid-column: 3; grid-row: 1; }
    .gx-bar__what { grid-column: 4; grid-row: 1; justify-self: end; }
  }
}

/* b6 fix95 glod */
/* b6 fix95 glod */
.gx-dialog { max-width: calc(100vw - 32px); }
@media (max-width: 699px) and (max-height: 520px) { html.js .gx-nav a:not(.gx-nav__cta) { font-size: min(clamp(2.2rem, 1.2rem + 5vw, 3.2rem), calc((100vw - 2 * var(--gx-gutter) - 28px) / 2 / 4.9)); } }
.gx-dish__body { container-type: inline-size; }
.gx-dish__name { font-size: min(clamp(2.2rem, 1.2rem + 3.2vw, 4.2rem), max(1.6rem, calc(100cqi / 3.4))); }
.gx-pkg__in > div:first-child { container-type: inline-size; }
/* (the kicker's hyphen gate: see the third part, 8.6 rem) */

/* b6 fix95 glod 2 */
/* b6 fix95 (verify8): the package kicker hyphenates only under 8.6 rem; the dish words 'Gron-saker' hyphenate only in a column under 6.1 rem */
@container (min-width: 8.6rem) { .gx-pkg .gx-kicker { hyphens: none; } }
.gx-dish__d, .gx-dish__parts { hyphens: none; }
@container (max-width: 6.1rem) { .gx-dish__d, .gx-dish__parts { hyphens: manual; } }

/* R-7 candidate: link row in the ZS box of the example page (p.zs-xl): spacing between the four links; the row wraps between links, never inside a word. */
.zs-xl{display:flex;flex-wrap:wrap;column-gap:1.25em;row-gap:.25em}
.zs-xl a{white-space:nowrap;overflow-wrap:normal}