/* ZS R3 stream XK: Kvarteret (Growth restaurant example), r3x-kvarteret.css. ZS's own code. Owner: stream XK; foundation files are never edited (overrides live here).
   The room and the menu: a poster-first film hero (G-30, G-115, G-09), the menu as a ruled price ledger with figure typesetting (G-123, W-60) and a word index with true
   photographs (W-72, G-94), the room, a photo close (W-86), a sticky "Boka bord" dock on phones (W-95), a warm bistro palette with its own grade (floor #1A0E0C).
   The site keeps ITS OWN palette; the ZS-owned pieces (the slim ink bar, the closing package plane, the dock label sentences) are in ZS ink and use the foundation.
   Classes: r3xk-*   Hidden start states hang on html.lib-on only; html.no-motion and no-JS show the complete composed page.
   Order: 0 fonts, 1 tokens, 2 base, 3 ZS bar, 4 header, 5 buttons, 6 type, 7 hero, 8 menu plane + ledger, 9 room, 10 close, 11 footer + ZS plane, 12 dock + dialog,
          13 sub pages (hero, ledger list, gallery, triad, hours), 14 motion, 15 reduced motion.
   ROUND 3b-2 (XK, panel 4): 3 the ZS bar = the shared demo-bar motion component (constant "Pausa rörelse", the state drawn as a switch, 44 px, shown on phones) and the film pause in the same vocabulary (P4-064/075/096/124/139);
   7 the first screen on a desktop (P4-049); 9 one ghost word in a zone of its own (P4-045/091); 10 the strip is never enlarged beyond its file (P4-063); 13 sub-page captions below the photograph, mirrored galleri head,
   crops per page (P4-067), the meny hero is the tonfisk dish (P4-015); repeated kickers are drawn once (P4-057, .r3xk-sr, the words stay in the markup); the phone dock hides over the close's own button only (P4-125).
   ROUND 3b-2b (XK, Growth effect layer): the five pages carry data-fx attributes for the shared module r3-fx.css / r3-fx.js (masked headline rise, reveals, clip wipes, parallax, hover depth, the two-state menu chapter); the effect styling and the live chapter
   layout are in r3x-kvarteret-fx.css (loaded after this file). In THIS file only the static composition of the chapter changed (section 8: head and ledger are the two states of .r3xk-chap, the pane is the frame's second layer; static pixels and heights are unchanged)
   and the strip photographs gained a plain wrapper (.r3xk-strip__card) for the hover depth. */

/* ================================ 0. FONTS ================================ */
@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; }
@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: "Space Grotesk"; src: url("fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

/* ================================ 1. TOKENS ================================ */
.r3xk {
  /* the bistro palette. Contrast (computed): cream on floor 16.4, ink on cream 14.8, wine on cream 9.2, cream on wine 9.4, tail on cream 5.3, cream on green 11.5 */
  --kv-floor: #1A0E0C; --kv-floor-2: #261412;                       /* burgundy-brown: THE black of this site's grade (--black 1A0E0C) */
  --kv-wine: #6A2824; --kv-wine-hi: #7E2F2B; --kv-wine-deep: #4E1D1A;
  --kv-cream: #F3ECDD; --kv-paper: #FAF6EC; --kv-sand: #E8DDC8;
  --kv-green: #1F342C; --kv-green-hi: #2C4A3E;
  --kv-ink: #2A1411; --kv-ink-2: #5A433D; --kv-ink-3: #6B5750;       /* text on cream and sand */
  --kv-on: #F5EEDF; --kv-on-2: #D6C7B0; --kv-on-3: #B9A892;           /* text on the dark planes */
  --kv-tail-d: #D9B79B; --kv-tail-l: #8E4F44; --kv-tail-g: #B7C9B6;   /* the warm second clause: dark planes / cream / green */
  --kv-brass: #E2BC85;
  /* R3 fix round (panel 2): Kvarteret opens on a WARM SAND plane, never on the near-black floor (Glod is the only near-black restaurant). Sand holds wine 8.2, ink 13.2, ink-2 6.9, hero tail 5.6. */
  --kv-hero: #EADFCB; --kv-tail-h: #83443A; --kv-hero-shade: #D8CAB0;
  --kv-ring: #F5EEDF;                                                 /* focus ring colour: explicit per ground (cream on the dark planes, wine on the light ones), never the button's own text colour */
  --kv-rule: rgba(106, 40, 36, .24); --kv-rule-d: rgba(245, 238, 223, .2);
  --kv-serif: "Cormorant Garamond", "ZS Serif Fallback", Georgia, serif;
  --kv-sans: "Inter", "ZS Inter Fallback", system-ui, sans-serif;
  --kv-wrap: 1440px; --kv-gut: clamp(20px, 5vw, 72px);
  --kv-side: max(var(--kv-gut), calc((100vw - var(--kv-wrap)) / 2 + var(--kv-gut)));   /* distance from the viewport edge to the content edge (bleeds) */
  --kv-bar: 52px; --kv-hh: 76px;                                                     /* header height (it overlays the hero) */
  --kv-ease: var(--r3-ease, cubic-bezier(.2, .7, .1, 1));
  --kv-h1: clamp(3.1rem, min(.6rem + 8.2vw, 15.5vh), 8.6rem);        /* 50 -> 138 (sub-page heads) */
  --kv-h1s: clamp(3.1rem, 9.2vw, 6.2rem);                            /* home hero, stacked (phones, portrait tablets): 50 -> 99 */
  --kv-h2: clamp(2.55rem, 1.3rem + 4.7vw, 5.4rem);                   /* 41 -> 86 */
  --kv-h3: clamp(1.75rem, 1.2rem + 2.1vw, 3rem);
  --kv-fig: clamp(2.9rem, 1.7rem + 3.6vw, 4.9rem);                   /* menu price figure */
  --r3-fade: 96px;
}
@media (min-width: 768px) { .r3xk { --kv-hh: 88px; --r3-fade: 120px; } }
@media (min-width: 1100px) { .r3xk { --r3-fade: 140px; } }
@supports (height: 1svh) { .r3xk { --kv-h1: clamp(3.1rem, min(.6rem + 8.2vw, 15.5svh), 8.6rem); } }
/* landscape phones carry a slim header so the copy and the ask stay in the fold */
@media (max-height: 520px) and (min-width: 600px) { .r3xk { --kv-hh: 56px; } }

/* ================================ 2. BASE ================================ */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
html:not(.no-motion) { scroll-behavior: smooth; }
.r3xk { margin: 0; background: var(--kv-floor); color: var(--kv-on); font: 400 1.0625rem/1.6 var(--kv-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.r3xk *, .r3xk *::before, .r3xk *::after { box-sizing: border-box; }
.r3xk :where(h1, h2, h3, p, figure, ol, ul, dl, dd) { margin: 0; }
.r3xk :where(ol, ul) { padding: 0; list-style: none; }
.r3xk :where(img, picture, video, svg) { display: block; max-width: 100%; }
:where(.r3xk a) { color: inherit; }
:where(.r3xk button) { font: inherit; color: inherit; cursor: pointer; }
/* focus (panel 2): an EXPLICIT ring colour per ground, never the control's own text colour (a cream-on-wine or wine-on-cream button used to draw a ring that vanished on the photograph or the plane it stood on).
   Dark grounds (floor, green, wine-deep, the dock, the ZS bar, the film frame) use cream; the light grounds (sand, cream, paper card, dialog) re-scope --kv-ring to wine. Ring against ground: cream on floor 16.4, wine on sand 8.2. */
.r3xk :focus-visible { outline: 2px solid var(--kv-ring); outline-offset: 4px; }
.r3xk-head, .r3xk-hero, .r3xk-sub, .r3xk-pl-cream, .r3xk-pl-sand, .r3xk-card, .r3xk dialog { --kv-ring: var(--kv-wine); }
.r3xk-skip { position: fixed; left: 12px; top: -120px; transform: translateY(-100%); z-index: 100; padding: 14px 18px; background: #fff; color: #111; border-radius: 8px; font: 600 .9375rem/1 var(--kv-sans); }
.r3xk-skip:focus { top: 12px; transform: none; }
.r3xk .r3xk-skip:focus-visible { outline: 3px solid var(--kv-brass); outline-offset: 3px; }
.r3xk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.r3xk-wrap { width: min(100%, var(--kv-wrap)); margin-inline: auto; padding-inline: var(--kv-gut); }
.r3xk main { display: block; }

/* ================================ 3. ZS BAR (ZS ink, the only ZS chrome on the top of the site) ================================ */
/* round 3b-2 (P4-064, 075, 096, 124, 139): the motion control of the bar is THE shared demo-bar component of the six examples (evidence/r3/final8/XM/demo_bar_component.css + .js, built in Smula).
   ONE constant label and accessible name "Pausa rörelse" (never "Minskad rörelse", never ": på"), aria-pressed = motion is paused, the state DRAWN as a switch (knob left = runs, knob right on gold = paused),
   the whole pill is a >= 44 x 44 px hit area at every width and it is shown on phones too. System reduced motion: the same switch shown thrown, button disabled, "Minskad rörelse" as title + description.
   14 px type below 1100 px. The bar is 52 px on a row (44 + 2 x 4) and two 44 px rows on narrow phones. */
.r3xk-zs { position: relative; z-index: 30; display: flex; align-items: center; gap: 0 clamp(14px, 2.4vw, 22px); min-height: var(--kv-bar); padding: 4px var(--kv-gut); background: #0C0C0F; color: #F3F0EA; font: 500 .875rem/1.35 var(--kv-sans); }
@media (min-width: 1100px) { .r3xk-zs { font-size: .8125rem; } }
.r3xk-zs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.r3xk-zs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.r3xk-zs b { font-weight: 600; color: #A48FFF; }
.r3xk-zs > a:last-child { margin-left: auto; }
.r3xk-zs .zs-mo { margin-left: auto; }
.r3xk-zs .zs-mo:not([hidden]) ~ a:last-child { margin-left: 0; }
.r3xk .r3xk-zs a:focus-visible { outline-offset: -3px; }   /* b6 fix62: the ring stays inside the bar (it was cut by the window top) */
.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; touch-action: manipulation; -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:disabled:hover { background: rgba(243, 240, 234, .12); }
.zs-mo[hidden] { display: none; }
.r3xk .zs-mo:focus-visible { outline: 3px solid var(--mo-fg); outline-offset: -3px; }
.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; } }
@media (max-width: 640px) {
  .r3xk-zs { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 44px 44px; gap: 0 12px; padding-block: 0; min-height: 88px; }
  .r3xk-zs > a:first-child { grid-row: 1; grid-column: 1; }
  .r3xk-zs > span { grid-row: 1; grid-column: 2; justify-self: end; align-self: center; text-align: right; }
  .r3xk-zs .zs-mo { grid-row: 2; grid-column: 1; justify-self: start; margin: 0; padding: 0 12px 0 14px; }
  .r3xk-zs > a:last-child { grid-row: 2; grid-column: 2; justify-self: end; margin: 0; }
}
@media (max-width: 359px) { .r3xk-zs { font-size: .8125rem; } .r3xk-zs .zs-mo { gap: 9px; padding: 0 10px 0 12px; } }
/* without JS the control is not offered (it is hidden in the markup): the bar is then one wrapping row, no empty grid cell */
@media (max-width: 640px) { html:not(.lib-on):not(.no-motion) .r3xk-zs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; min-height: 0; padding-block: 0; } html:not(.lib-on):not(.no-motion) .r3xk-zs > a:last-child { margin-left: 0; } }

/* ================================ 4. HEADER (R3 fix round: it sits on the sand plane of the hero, wine type; the near-black floor is not a Kvarteret opening any more) ================================ */
.r3xk-head { position: relative; z-index: 25; height: var(--kv-hh); background: var(--kv-hero); color: var(--kv-wine); }
.r3xk-head__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.r3xk-word { display: inline-flex; align-items: center; min-height: 44px; font: 600 clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem)/1 var(--kv-serif); letter-spacing: -.035em; text-decoration: none; color: var(--kv-on); }
.r3xk-head .r3xk-word { color: var(--kv-wine); }
.r3xk-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.r3xk-nav a:not(.r3xk-pill) { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: 500 .9375rem/1 var(--kv-sans); letter-spacing: .01em; text-decoration: none; color: var(--kv-ink); transition: color .2s, opacity .2s; }
.r3xk-nav a:not(.r3xk-pill):hover, .r3xk-nav a[aria-current="page"]:not(.r3xk-pill) { color: var(--kv-wine); }
.r3xk-nav a[aria-current="page"]:not(.r3xk-pill)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; }
.r3xk-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 999px; background: var(--kv-wine); color: var(--kv-on); font: 600 .9375rem/1 var(--kv-sans); text-decoration: none; transition: background .2s; }
.r3xk-pill:hover { background: var(--kv-wine-hi); }
.r3xk-head__in > .r3xk-pill { display: none; }
.r3xk-menubtn { display: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(106, 40, 36, .55); background: transparent; color: var(--kv-wine); font: 600 .875rem/1 var(--kv-sans); }
@media (max-width: 760px) {
  .r3xk-head__in { gap: 10px; }
  .r3xk-menubtn { display: inline-flex; align-items: center; gap: .5em; }
  .r3xk-head__in > .r3xk-pill { display: inline-flex; margin-left: auto; min-height: 44px; padding: 0 18px; }
  .r3xk-nav { --kv-ring: #F5EEDF; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--kv-gut) 22px; background: var(--kv-wine-deep); }
  .r3xk-nav.open { display: flex; }
  .r3xk-nav a:not(.r3xk-pill) { padding: 16px 0; font: 600 1.75rem/1 var(--kv-serif); color: var(--kv-on); }
  .r3xk-nav a:not(.r3xk-pill):hover, .r3xk-nav a[aria-current="page"]:not(.r3xk-pill) { color: var(--kv-on); }
  .r3xk-nav .r3xk-pill { display: none; }
  .r3xk-head__in { flex-wrap: nowrap; }
}
@media (max-width: 380px) { .r3xk-word { font-size: 1.6rem; } .r3xk-head__in > .r3xk-pill { padding: 0 13px; font-size: .8125rem; white-space: nowrap; } .r3xk-menubtn { padding: 0 11px; font-size: .8125rem; gap: .35em; } .r3xk-head__in { gap: 8px; } }

/* ================================ 5. BUTTONS ================================ */
.r3xk-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 54px; padding: 0 30px; border: 1px solid transparent; border-radius: 999px; font: 600 1rem/1 var(--kv-sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer; max-width: 100%;
  transition: background .2s, color .2s, border-color .2s, transform .2s; }
.r3xk-btn__arr { display: inline-block; transition: transform .2s; }
.r3xk-btn:hover .r3xk-btn__arr { transform: translate(2px, -2px); }
.r3xk-btn--cream { background: var(--kv-cream); color: var(--kv-wine); }
.r3xk-btn--cream:hover { background: #fff; }
.r3xk-btn--wine { background: var(--kv-wine); color: var(--kv-on); }
.r3xk-btn--wine:hover { background: var(--kv-wine-hi); }
.r3xk-btn--ghost { background: transparent; color: var(--kv-wine); border-color: rgba(106, 40, 36, .5); }
.r3xk-btn--ghost:hover { background: var(--kv-wine); color: var(--kv-on); border-color: var(--kv-wine); }
.r3xk-btn--ghost-d { background: transparent; color: var(--kv-on); border-color: rgba(245, 238, 223, .45); }
.r3xk-btn--ghost-d:hover { background: rgba(245, 238, 223, .1); border-color: var(--kv-on); }
.r3xk-btn--quiet { background: rgba(245, 238, 223, .1); color: var(--kv-on); }
.r3xk-btn--quiet:hover { background: rgba(245, 238, 223, .18); }
.r3xk-btn.r3-roll .r3-btn__t, .r3xk-pill.r3-roll .r3-btn__t, .r3xk-navl.r3-roll .r3-btn__t { height: 1.5em; line-height: 1.5; }
.r3xk-btn.r3-roll .r3-btn__t > span, .r3xk-pill.r3-roll .r3-btn__t > span, .r3xk-navl.r3-roll .r3-btn__t > span { height: 1.5em; }
/* the phone menu sheet shows plain labels (no roll) */
@media (max-width: 760px) { .r3xk-navl.r3-roll .r3-btn__t { height: auto; line-height: inherit; } .r3xk-navl.r3-roll .r3-btn__t > span { height: auto; } .r3xk-navl.r3-roll .r3-btn__t > span + span { display: none; } }
.r3xk-link { display: inline-block; padding-block: 12.5px; margin-block: -12.5px; font: 500 .9375rem/1.3 var(--kv-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: currentColor; }
.r3xk-link:hover { text-decoration-thickness: 2px; }
@media (max-width: 380px) { .r3xk-btn { padding: 0 22px; } }

/* ================================ 6. TYPE ================================ */
/* serif voice: Cormorant roman, two short clauses, the second one warmer (no italic: none ships). Kickers are small serif caps. Figures are lining serif numerals with a small unit (G-123). */
.r3xk-kick { display: block; font: 600 .9375rem/1.25 var(--kv-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--kv-brass); font-variant-numeric: lining-nums; margin-bottom: 1.15em; overflow-wrap: normal; }
.r3xk-pl-cream .r3xk-kick, .r3xk-pl-sand .r3xk-kick, .r3xk-hero .r3xk-kick, .r3xk-sub .r3xk-kick { color: var(--kv-wine); }
@media (max-width: 480px) { .r3xk-kick { letter-spacing: .18em; font-size: .875rem; } }
.r3xk-h { font-family: var(--kv-serif); font-weight: 600; line-height: .98; letter-spacing: -.025em; font-variant-numeric: lining-nums; text-wrap: balance; color: var(--kv-on); --kv-tail: var(--kv-tail-d); }
.r3xk-h > span { display: block; }
.r3xk-h .r3xk-tail { color: var(--kv-tail); }
.r3xk-h2 { font-size: var(--kv-h2); }
.r3xk-h3 { font-size: var(--kv-h3); line-height: 1.04; }
.r3xk-pl-cream .r3xk-h, .r3xk-pl-sand .r3xk-h { color: var(--kv-wine); --kv-tail: var(--kv-tail-l); }
.r3xk-sub .r3xk-h { color: var(--kv-wine); --kv-tail: var(--kv-tail-h); }
.r3xk-pl-green .r3xk-h { --kv-tail: var(--kv-tail-g); }
.r3xk-lede { font: 400 clamp(1.125rem, 1.02rem + .5vw, 1.375rem)/1.5 var(--kv-sans); color: var(--kv-on-2); max-width: 30em; text-wrap: pretty; }
.r3xk-pl-cream .r3xk-lede, .r3xk-pl-sand .r3xk-lede, .r3xk-hero .r3xk-lede, .r3xk-sub .r3xk-lede { color: var(--kv-ink-2); }
.r3xk-body { font: 400 1.0625rem/1.65 var(--kv-sans); color: var(--kv-on-2); max-width: 34em; }
.r3xk-pl-cream .r3xk-body, .r3xk-pl-sand .r3xk-body, .r3xk-sub .r3xk-body { color: var(--kv-ink-2); }
.r3xk-small { font: 400 .9rem/1.5 var(--kv-sans); color: var(--kv-on-2); }
.r3xk-pl-cream .r3xk-small, .r3xk-pl-sand .r3xk-small, .r3xk-sub .r3xk-small { color: var(--kv-ink-2); }
.r3xk-n { font: 600 1rem/1 var(--kv-serif); letter-spacing: .1em; font-variant-numeric: lining-nums; color: var(--kv-brass); }
.r3xk-pl-cream .r3xk-n { color: var(--kv-wine); }
/* figure typesetting (G-123): the numeral is the figure, the unit a light footnote on the same baseline, one family; lining numerals */
.r3xk-fig { display: inline-flex; align-items: baseline; gap: .12em; font: 500 var(--kv-fig)/.9 var(--kv-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums proportional-nums; white-space: nowrap; }
.r3xk-fig small { font: 600 max(.32em, 13px)/1 var(--kv-sans); letter-spacing: .04em; }

/* ================================ 7. HERO (R3 fix round): a SAND plane, the kitchen film in a CONTAINED frame (G-30 poster first, Pausa) ================================
   Panel 2: Growth opened on the same near-black brown + cream Cormorant + kitchen photograph as Glod (Premium). Now the page opens on warm sand with wine type, the film plays inside a
   framed plate with a lighter grade (no full-bleed scrim, only a caption foot), and the near-black floor stays Glod's alone. Phones stack copy, frame, ask; wide windows set copy beside the frame. */
.r3xk-hero { position: relative; isolation: isolate; background: var(--kv-hero); color: var(--kv-ink); padding: clamp(6px, 1.4vw, 16px) 0 clamp(40px, 7vw, 88px); }
.r3xk-hero__in { display: grid; gap: 18px; }
.r3xk-hero__copy .r3xk-kick { margin-bottom: .95em; }
.r3xk-hero__h { font: 400 var(--kv-h1s)/.92 var(--kv-serif); letter-spacing: -.032em; font-variant-numeric: lining-nums; color: var(--kv-wine); --kv-tail: var(--kv-tail-h); text-wrap: balance; }
.r3xk-hero__h > span { display: block; }
.r3xk-hero__h .r3xk-tail { color: var(--kv-tail); }
.r3xk-hero__plate { position: relative; isolation: isolate; margin: 0; width: 100%; overflow: hidden; background: var(--kv-hero-shade); aspect-ratio: 1 / 1; max-height: 380px; max-height: min(380px, 36svh);
  box-shadow: 0 44px 80px -46px rgba(26, 14, 12, .62); }
.r3xk-hero__plate picture, .r3xk-hero__plate > img, .r3xk-hero__plate video { position: absolute; inset: 0; width: 100%; height: 100%; }
.r3xk-hero__plate img, .r3xk-hero__plate video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* the lighter grade: one warm soft-light veil over the baked still and the film alike (no filter on the video, no scrim over the picture) */
.r3xk-hero__plate::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #EDBE8E; mix-blend-mode: soft-light; opacity: .5; }
.r3xk-hero__plate video { opacity: 0; transition: opacity .9s var(--kv-ease); }
.r3xk-hero__plate video.is-playing { opacity: 1; }
/* FILM POLICY: the portrait PHONE clip is the ungraded LC-R2 encode of the same take as the portrait poster. A plain filter() chain, fitted by evidence/r3/final4/XK/fit_grade.py to the baked grade
   (family low, black 1A0E0C) on a real frame of that clip, brings it onto the poster's colours so the clip does not step brighter and cooler when it fades in. The graded 16:9 clip needs nothing. */
.r3xk-hero__plate video[src*="food-quality-portrait"] { filter: brightness(.635) contrast(1.4) saturate(2.382) sepia(.687) hue-rotate(3.8deg); }
/* the caption foot sits INSIDE the photograph (a floor scrim only under the words, the rest of the frame is ungraded by any overlay) */
.r3xk-hero__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: none; align-items: flex-end; padding: 72px clamp(18px, 2.4vw, 32px) clamp(16px, 2vw, 26px);
  background: linear-gradient(0deg, rgba(26, 14, 12, .74) 0, rgba(26, 14, 12, .5) 42%, rgba(26, 14, 12, 0) 100%); pointer-events: none; }
.r3xk-cap { font: 600 1.375rem/1.15 var(--kv-serif); color: var(--kv-on); letter-spacing: -.005em; text-shadow: 0 1px 14px rgba(26, 14, 12, .5); }
/* the film pause speaks the same vocabulary as the bar's motion control (P4-064): ONE constant name "Pausa filmen", aria-pressed = the visitor paused the film, the state DRAWN as the same switch
   (the core's aria-hidden ": på" word is not shown), 44 px hit area. The switch is two background layers of ::after (track + knob), so the markup the core builds is untouched. */
.r3xk-filmbtn { --kv-ring: #F5EEDF; --mo-knob: #F3F0EA; position: absolute; right: clamp(14px, 1.8vw, 24px); bottom: clamp(14px, 1.8vw, 24px); z-index: 3; display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 44px; padding: 0 14px 0 16px; border-radius: 999px; background: #0C0C0F; border: 1px solid rgba(243, 240, 234, .38); color: #F3F0EA; font: 600 .875rem/1.2 var(--kv-sans); white-space: nowrap; }
.r3xk-filmbtn:hover { border-color: rgba(243, 240, 234, .7); }
.r3xk-filmbtn[hidden] { display: none; }
.r3xk-filmbtn .r3-tg__s { display: none; }
.r3xk-filmbtn::after { content: ""; flex: none; box-sizing: border-box; width: 32px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(243, 240, 234, .66);
  background: radial-gradient(circle closest-side, var(--mo-knob) calc(100% - .6px), transparent 100%) 2.5px 50% / 11px 11px no-repeat transparent;
  transition: background-color .2s, border-color .2s, background-position .22s cubic-bezier(.25, .46, .45, .94); }
.r3xk-filmbtn.r3-tg[aria-pressed="true"] { box-shadow: none; border-color: rgba(243, 240, 234, .62); --mo-knob: #0C0C0F; }
.r3xk-filmbtn[aria-pressed="true"]::after { background-color: #DCBC7E; border-color: #DCBC7E; background-position: 16.5px 50%; }
.no-motion .r3xk-filmbtn::after { transition: none; }
/* portrait phones: the sticky booking dock covers the foot of the first screen: the film's pause sits bottom-right from 610 px high and top-left at 521-609 px (and at 320 px wide x 610-649 px), so it is never hidden behind the dock */
@media (max-width: 767px) and (min-height: 610px) { .r3xk-filmbtn { top: auto; right: 12px; bottom: 12px; } }   /* b6 MSG-07: bottom only where the dock cannot cover it */
@media (max-width: 767px) and (min-height: 521px) and (max-height: 609px) { .r3xk-filmbtn { top: 12px; left: 12px; right: auto; bottom: auto; } }
@media (max-width: 339px) and (min-height: 610px) and (max-height: 649px) { .r3xk-filmbtn { top: 12px; left: 12px; right: auto; bottom: auto; } }   /* b6 fix34 MSG-07: 320 px wide with a 15 px scrollbar, the bottom placement met the dock at 610-649 px high */
.r3xk-hero__side { display: grid; gap: 20px; justify-items: start; align-content: start; }
.r3xk-hours { font: 500 .9375rem/1.5 var(--kv-sans); letter-spacing: .01em; color: var(--kv-ink); font-variant-numeric: lining-nums tabular-nums; }
.r3xk-hours span { white-space: nowrap; }
.r3xk-hours::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 .7em .12em 0; border-radius: 50%; background: var(--kv-wine); }
/* phones: copy, frame, ask; the photograph is the portrait crop (the plate, the hand, the pan) */
@media (max-width: 767px) { .r3xk-hero .r3xk-btn { width: 100%; } .r3xk-hero__plate :is(img, video) { object-position: 50% 62%; } }
/* short portrait phones: the bar gained a 44 px row (the motion switch is shown on phones now), so the header and the hero stack give back 8 + 4 px of it */
@media (max-width: 640px) and (max-height: 700px) { .r3xk { --kv-hh: 68px; } .r3xk-hero__in { gap: 14px; } }
/* portrait tablets: a wide frame under the headline */
@media (min-width: 768px) {
  .r3xk-hero__in { gap: 26px; }
  .r3xk-hero__h { font-size: clamp(4rem, 9vw, 6.2rem); }
  .r3xk-hero__plate { aspect-ratio: 16 / 10; max-height: 520px; max-height: min(520px, 40svh); }
  .r3xk-hero__plate img, .r3xk-hero__plate video { object-position: 40% 50%; }
  .r3xk-hero__cap { display: flex; }
  .r3xk-hero .r3xk-btn { width: auto; }
}
/* wide windows and landscape phones: the copy beside the frame, vertically centred on it; ask and hours stay in the fold */
@media (min-width: 900px) and (min-aspect-ratio: 5/4), (max-height: 520px) and (min-width: 600px) {
  .r3xk-hero { display: flex; align-items: center; min-height: 520px; min-height: max(520px, calc(100vh - var(--kv-bar) - var(--kv-hh))); padding-block: clamp(8px, 1.6svh, 20px) clamp(36px, 7svh, 84px); }
  .r3xk-hero__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); grid-template-rows: auto auto; gap: 0 clamp(36px, 4.6vw, 76px); align-items: center; }
  .r3xk-hero__copy { grid-area: 1 / 1; align-self: end; padding-bottom: 26px; }
  .r3xk-hero__side { grid-area: 2 / 1; align-self: start; }
  .r3xk-hero__plate { grid-area: 1 / 2 / 3 / 3; align-self: center; justify-self: stretch; width: auto; aspect-ratio: 6 / 5; max-height: 720px; max-height: min(720px, calc(100vh - var(--kv-bar) - var(--kv-hh) - 56px)); }
  .r3xk-hero__h { font-size: clamp(3.4rem, min(6.9vw, 14vh), 6.6rem); }
}
/* the frame bleeds to the right window edge on wide windows (the film is the Growth promise: it gets the room), the copy stays on the grid */
@media (min-width: 1100px) and (min-aspect-ratio: 5/4) { .r3xk-hero__plate { margin-right: calc(var(--kv-side) * -1); } .r3xk-hero { overflow-x: clip; } }   /* b6: --kv-side is worked out from 100vw (15 px wider than the page with a classic scrollbar): the plate's bleed must not scroll the page */
@media (min-width: 900px) and (max-width: 1199px) and (min-aspect-ratio: 5/4) { .r3xk-hero__copy .r3xk-kick { font-size: .875rem; letter-spacing: .15em; } }
@supports (height: 1svh) {
  @media (min-width: 900px) and (min-aspect-ratio: 5/4), (max-height: 520px) and (min-width: 600px) {
    .r3xk-hero { min-height: max(520px, calc(100svh - var(--kv-bar) - var(--kv-hh))); }
    .r3xk-hero__plate { max-height: min(720px, calc(100svh - var(--kv-bar) - var(--kv-hh) - 56px)); }
    .r3xk-hero__h { font-size: clamp(3.4rem, min(6.9vw, 14svh), 6.6rem); }
  }
}
/* round 3b-2 (P4-049): on a desktop the film is the Growth promise and gets the fold. Same composition (copy left, the frame bleeding off the right edge), but the frame is now nearly the full height of
   the first screen and about a quarter larger: the copy column is narrower (the headline steps down one notch so it keeps its two lines; from 1760 px the frame is capped by the film's height anyway and the earlier layout stays), the frame is taller than wide and its height is capped by the window
   and by the film's own 720 px (the clip is 1280x720: the frame is never taller than the file, so the film is never enlarged). Measured in evidence/r3/final9/XK/measure/hero_*.json. */
@media (min-width: 1200px) and (max-width: 1759px) and (min-aspect-ratio: 5/4) {
  .r3xk-hero__in { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7fr); gap: 0 clamp(36px, 3vw, 52px); }
  .r3xk-hero__plate { aspect-ratio: 1.12 / 1; max-height: min(720px, calc(100vh - var(--kv-bar) - var(--kv-hh) - 44px)); }
  .r3xk-hero__h { font-size: clamp(3.4rem, min(6.2vw, 14vh), 5.55rem); }
}
@supports (height: 1svh) {
  @media (min-width: 1200px) and (max-width: 1759px) and (min-aspect-ratio: 5/4) {
    .r3xk-hero__plate { max-height: min(720px, calc(100svh - var(--kv-bar) - var(--kv-hh) - 44px)); }
    .r3xk-hero__h { font-size: clamp(3.4rem, min(6.2vw, 14svh), 5.55rem); }
  }
}
/* a very tall desktop window does not stretch the hero (the frame is capped at the film's 720 px): the hero never grows beyond 820 px, so the frame keeps its foot close to the next plane
   instead of floating 110 px above it (1920x1080 / 2560x1440), and the first screen already shows where the page goes on */
@media (min-width: 1200px) and (min-aspect-ratio: 5/4) { .r3xk-hero { min-height: min(max(520px, calc(100vh - var(--kv-bar) - var(--kv-hh))), 820px); } }
@supports (height: 1svh) { @media (min-width: 1200px) and (min-aspect-ratio: 5/4) { .r3xk-hero { min-height: min(max(520px, calc(100svh - var(--kv-bar) - var(--kv-hh))), 820px); } } }
@media (max-height: 520px) and (min-width: 600px) {
  .r3xk-hero { min-height: 0; padding-block: 6px 24px; }
  .r3xk-hero__in { gap: 0 28px; }
  .r3xk-hero__h { font-size: clamp(2.3rem, 11vh, 3.6rem); }
  .r3xk-hero__copy .r3xk-kick, .r3xk-hero .r3xk-lede, .r3xk-hero__cap { display: none; }
  .r3xk-hero__copy { padding-bottom: 14px; }
  .r3xk-hero__side { gap: 12px; }
  .r3xk-hero .r3xk-btn { width: auto; min-height: 46px; }
}

/* ================================ 8. MENU PLANE + THE PRICE LEDGER (W-60, G-123) with a word index of true photographs (W-72, G-94) ================================ */
.r3xk-pl-cream { --r3-c: #F3ECDD; --r3-from: var(--kv-hero); color: var(--kv-ink); }   /* the plane under every sand head: sand -> cream is a quiet step, no bridge or bloom needed */
.r3xk-pl-sand { --r3-c: #E8DDC8; --r3-from: #F3ECDD; color: var(--kv-ink); }
.r3xk-pl-green { --r3-c: #1F342C; --r3-from: #F3ECDD; color: var(--kv-on); }
.r3xk-sub + .r3xk-pl-green { --r3-from: var(--kv-hero); }
/* cream/sand -> green passes through a SAGE midpoint (not the taupe an oklab mix of cream and bottle green gives): the blend stays inside the plane's own padding, text never sits in it */
.r3xk-pl-green { --r3-bloom-on: 0; background:
  linear-gradient(180deg, var(--r3-from, #F3ECDD) 0, #DCE0CE calc(var(--r3-fade) * .16), #B1C0AC calc(var(--r3-fade) * .38), #7C9283 calc(var(--r3-fade) * .6), #43594D calc(var(--r3-fade) * .82), #2A433A calc(var(--r3-fade) * .94), #1F342C var(--r3-fade)),
  #1F342C; }
.r3xk-pl-wine { --r3-c: #4E1D1A; color: var(--kv-on); }
.r3xk-pl-floor { --r3-c: #1A0E0C; --r3-from: #1A0E0C; color: var(--kv-on); }
.r3xk-menu { padding-top: calc(var(--r3-fade) + 20px); padding-bottom: clamp(48px, 6vw, 96px); }
.r3xk-hero + .r3xk-menu, .r3xk-sub + .r3xk-menu { --r3-fade: 64px; }
.r3xk-menu__head { display: grid; gap: 28px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
.r3xk-menu__intro { display: grid; gap: 22px; justify-items: start; }
@media (min-width: 900px) { .r3xk-menu__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
/* round 3b-2b (XK, Growth effect layer): the head and the ledger are the TWO STATES of one chapter (.r3xk-chap, r3-fx.js data-fx="chapter"; the live layout is in r3x-kvarteret-fx.css). Static, they are the blocks they always were:
   the head across both columns, then the rows beside the photograph pane. The states container dissolves (display: contents) so the head and the ledger are grid items of the ledger grid; the dining-table photograph is the live chapter's first layer only. */
.r3xk-ledger { display: grid; gap: 0 clamp(40px, 5vw, 80px); --on: 0; }
.r3xk-chap__states { display: contents; }
.r3xk-chap__frame { display: none; }
.r3xk-chap__screen { position: relative; aspect-ratio: 1 / 1; background: var(--kv-floor); box-shadow: 0 40px 70px -40px rgba(26, 14, 12, .7); overflow: hidden; }
.r3xk-chap__screen > figure { position: absolute; inset: 0; }
.r3xk-chap__l1 { display: none; }
.r3xk-chap__l1 img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.r3xk-ledger__rows { border-top: 1px solid var(--kv-rule); }
.r3xk-ledger__rows li { border-bottom: 1px solid var(--kv-rule); }
.r3xk-ledger__rows a { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; gap: 4px 18px; padding: clamp(22px, 2.6vw, 34px) clamp(14px, 1.6vw, 24px); text-decoration: none; color: var(--kv-wine);
  background: linear-gradient(var(--kv-wine), var(--kv-wine)) 0 100% / 100% 0 no-repeat; transition: background-size .4s cubic-bezier(.25, .46, .45, .94), color .4s cubic-bezier(.25, .46, .45, .94); }
.r3xk-ledger__rows a:is(:hover, :focus-visible), .r3xk-ledger__rows a[aria-current="true"] { color: var(--kv-on); background-size: 100% 100%; }
.r3xk-ledger__rows a:focus-visible { outline: 2px solid var(--kv-wine); outline-offset: 2px; }
.r3xk-ledger__rows a .r3xk-n { color: inherit; align-self: start; padding-top: .55em; font-weight: 600; }
.r3xk-ledger__t { display: block; font: 600 clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem)/1.02 var(--kv-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; transition: transform .4s cubic-bezier(.25, .46, .45, .94); }
.r3xk-ledger__d { display: block; margin-top: .7em; font: 400 .9688rem/1.5 var(--kv-sans); letter-spacing: 0; color: var(--kv-ink-2); max-width: 30em; transition: color .4s cubic-bezier(.25, .46, .45, .94); }
.r3xk-ledger__rows a:is(:hover, :focus-visible) .r3xk-ledger__d, .r3xk-ledger__rows a[aria-current="true"] .r3xk-ledger__d { color: #F0E4CF; }
.r3xk-ledger__rows a:is(:hover, :focus-visible) .r3xk-ledger__t, .r3xk-ledger__rows a[aria-current="true"] .r3xk-ledger__t { transform: translateX(.16em); }
.r3xk-ledger__rows .r3xk-fig { color: inherit; justify-self: end; }
.r3xk-ledger__thumb { display: none; }
.r3xk-ledger__pane figure { position: absolute; inset: 0; opacity: calc(1 - min(1, max(var(--on) - var(--i), var(--i) - var(--on)))); transition: opacity .5s cubic-bezier(.25, .46, .45, .94); }
.r3xk-ledger__pane img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .r3xk-ledger { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); align-items: start; }
  .r3xk-chap__s1 { grid-column: 1 / -1; grid-row: 1; }
  .r3xk-chap__s2 { grid-column: 1; grid-row: 2; }
  .r3xk-chap__frame { display: block; grid-column: 2; grid-row: 2; position: sticky; top: 28px; }
}
@media (max-width: 899px) {
  .r3xk-chap__frame { display: none; }
  .r3xk-ledger__rows a, .r3xk-ledger__rows a[aria-current="true"] { grid-template-columns: minmax(0, 1fr); gap: 4px 16px; align-items: center; color: var(--kv-wine); background-size: 0 0; padding-inline: 0; }
  .r3xk-ledger__rows a:is(:hover, :focus-visible) { color: var(--kv-wine); background-size: 0 0; }
  .r3xk-ledger__rows a .r3xk-n { display: none; }
  .r3xk-ledger__thumb { display: none; }
  .r3xk-ledger__rows .r3xk-fig { grid-column: 1; justify-self: start; font-size: 2.4rem; }
  .r3xk-ledger__t { font-size: 1.6rem; transform: none !important; }
  .r3xk-ledger__d { font-size: .9rem; margin-top: .45em; }
  .r3xk-ledger__rows a:is(:hover, :focus-visible) .r3xk-ledger__d, .r3xk-ledger__rows a[aria-current="true"] .r3xk-ledger__d { color: var(--kv-ink-2); }
}
/* the dish strip (panel 3 F-22): the food itself, three plates in a row below the menu. Portrait crops of the existing graded photographs (never enlarged: the box is smaller than the files),
   on phones one wide plate and two beside each other. No rule, no card: the photographs stand on the cream plane with a soft shadow, the dish name is a serif caption. */
.r3xk-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: clamp(44px, 6vw, 96px); }
.r3xk-strip__f { margin: 0; }
.r3xk-strip__f:first-child { grid-column: 1 / -1; }
.r3xk-strip__ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--kv-floor); box-shadow: 0 36px 60px -38px rgba(26, 14, 12, .7); }
.r3xk-strip__f:first-child .r3xk-strip__ph { aspect-ratio: 3 / 2; }
.r3xk-strip__ph img { width: 100%; height: 100%; object-fit: cover; }
.r3xk-strip figcaption { padding-top: 14px; font: 600 clamp(1.2rem, 1.05rem + .7vw, 1.6rem)/1.15 var(--kv-serif); letter-spacing: -.01em; color: var(--kv-wine); font-variant-numeric: lining-nums; }
.r3xk-pl-green .r3xk-strip figcaption { color: var(--kv-on); }   /* the strip stands in the green statement plane, beside the gallery link */
.r3xk-pl-green .r3xk-strip__ph { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .75); }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) {
  .r3xk-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.8vw, 40px); }
  .r3xk-strip__f:first-child { grid-column: auto; }
  .r3xk-strip__f:first-child .r3xk-strip__ph { aspect-ratio: 4 / 5; }
}
.r3xk-faq { display: grid; gap: 22px clamp(32px, 6vw, 96px); margin-top: clamp(44px, 6vw, 80px); align-items: start; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.r3xk-faq__rows { border-top: 1px solid var(--kv-rule); }
.r3xk-faq details { border-bottom: 1px solid var(--kv-rule); }
.r3xk-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 600 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.2 var(--kv-serif); color: var(--kv-wine); }
.r3xk-faq summary::-webkit-details-marker { display: none; }
.r3xk-faq summary span { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(106, 40, 36, .5); }
.r3xk-faq summary span::before, .r3xk-faq summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--kv-wine); transform: translate(-50%, -50%); transition: transform .3s; }
.r3xk-faq summary span::after { transform: translate(-50%, -50%) rotate(90deg); }
.r3xk-faq details[open] summary span::after { transform: translate(-50%, -50%) rotate(0); }
.r3xk-faq details p { padding: 0 min(3.2rem, 51.2px) 24px 0; color: var(--kv-ink-2); font-size: 1rem; max-width: 38em; }
.r3xk-faq summary:focus-visible { outline: 2px solid var(--kv-wine); outline-offset: 2px; }

/* ================================ 9. THE ROOM (green plane, the bistro photograph bleeds off the right edge) ================================ */
.r3xk-room { padding-bottom: clamp(24px, 3vw, 48px); }
.r3xk-room__grid { display: grid; gap: 40px; }
.r3xk-room__copy { display: grid; gap: 26px; justify-items: start; align-content: center; padding-inline: var(--kv-gut); }
.r3xk-room__fig { position: relative; aspect-ratio: 3 / 2; background: var(--kv-floor); margin-inline: 0; }
.r3xk-room__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.r3xk-room__fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(31, 52, 44, .55) 0, rgba(31, 52, 44, 0) 22%); }
@media (min-width: 1000px) {
  .r3xk-room { padding-top: calc(var(--r3-fade) + 96px); }
  .r3xk-room__grid { grid-template-columns: [text] minmax(0, var(--r3xk-room-txt, 31rem)) [img] minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); padding-left: var(--kv-side); align-items: center; }
  .r3xk-room__copy { padding-inline: 0; }
}
.r3xk-room .r3xk-body { color: var(--kv-on-2); }

/* the statement: poster-scale two-clause headline on the green plane, one paragraph and one link; the ghost of the name is cropped by the plane's foot */
/* round 3b-2 (P4-045, P4-091): ONE ghost word per page, and it sits in a zone of its own. The one rule: padding-bottom = the ghost's height + a margin, the ghost anchored to the foot of the plane,
   so no ghost glyph lies behind the dish strip or its captions and none hangs over into the photograph below (before: padding 230 px, ghost 266 px tall and pushed 43 px past the plane's foot). */
.r3xk-statement { --r3xk-ghost-h: calc(min(25vw, 24rem) * .74); padding-top: calc(var(--r3-fade) + 20px); padding-bottom: calc(var(--r3xk-ghost-h) + clamp(20px, 3vw, 44px)); }
.r3xk-statement__grid { display: grid; gap: 30px clamp(40px, 6vw, 110px); align-items: end; }
.r3xk-statement__side { display: grid; gap: 24px; justify-items: start; padding-bottom: .6rem; }
.r3xk-poster { font-weight: 400; font-size: clamp(3.4rem, .5rem + 9.8vw, 9.6rem); line-height: .92; letter-spacing: -.035em; }
.r3xk-poster > span { white-space: nowrap; }
@media (min-width: 1000px) { .r3xk-statement__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr); } }
.r3xk-ghost { position: absolute; z-index: -1; left: 50%; bottom: 0; transform: translateX(-50%); width: max-content; max-width: 98%; font: 400 min(25vw, 24rem)/.74 var(--kv-serif); letter-spacing: -.04em; color: var(--kv-cream); opacity: .06; white-space: nowrap; pointer-events: none; user-select: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 98%); mask-image: linear-gradient(180deg, #000 0, #000 55%, transparent 98%); }

/* ================================ 10. THE PHOTO CLOSE (W-86): the page ends inside the table; a cream card carries the ask ================================ */
.r3xk-close { position: relative; isolation: isolate; background: var(--kv-wine-deep); color: var(--kv-ink); }
.r3xk-close__photo { position: relative; height: clamp(300px, 52vw, 560px); background: var(--kv-floor); overflow: hidden; }
.r3xk-close__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--r3xk-pos, 50% 88%); }
/* round 3b-2 (P4-063): the strip is never enlarged beyond its file. On a window wider than the file the photograph keeps the file's own width, centred, and its two sides melt into the floor tone of the
   section (the same dark brown the photograph is graded to), 140 px long: no edge, no stretching. The /om strip is a 1440 px file (bread-w-1440, it was 1.33x at 1920); the others are 1920 px files. */
@media (min-width: 1921px) { .r3xk-close__photo img { width: 1920px; margin-inline: auto; -webkit-mask-image: var(--r3xk-melt-x); mask-image: var(--r3xk-melt-x); } }
@media (min-width: 1441px) { .r3xk-close--src1440 .r3xk-close__photo img { width: 1440px; margin-inline: auto; -webkit-mask-image: var(--r3xk-melt-x); mask-image: var(--r3xk-melt-x); } }
.r3xk-close { --r3xk-melt-x: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .1) 14px, rgba(0, 0, 0, .4) 54px, rgba(0, 0, 0, .78) 100px, #000 140px, #000 calc(100% - 140px), rgba(0, 0, 0, .78) calc(100% - 100px), rgba(0, 0, 0, .4) calc(100% - 54px), rgba(0, 0, 0, .1) calc(100% - 14px), transparent 100%); }
.r3xk-close__photo::before, .r3xk-close__photo::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.r3xk-close__photo::before { top: 0; height: var(--r3-fade); background: linear-gradient(180deg, rgb(var(--kv-above-rgb, 31, 52, 44)) 0, rgba(var(--kv-above-rgb, 31, 52, 44), .88) 22%, rgba(var(--kv-above-rgb, 31, 52, 44), .55) 50%, rgba(var(--kv-above-rgb, 31, 52, 44), .2) 78%, rgba(var(--kv-above-rgb, 31, 52, 44), 0) 100%); }
.r3xk-close__photo::after { bottom: 0; height: var(--r3-fade); background: linear-gradient(0deg, #4E1D1A 0, rgba(78, 29, 26, .88) 22%, rgba(78, 29, 26, .55) 50%, rgba(78, 29, 26, .2) 78%, rgba(78, 29, 26, 0) 100%); }
.r3xk-close__in { position: relative; z-index: 2; margin-top: -48px; }
.r3xk-card { display: grid; gap: 30px clamp(32px, 5vw, 80px); padding: clamp(26px, 4vw, 52px); background: var(--kv-paper); color: var(--kv-ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65); border-radius: 4px; --kv-tail: var(--kv-tail-l); }
.r3xk-card .r3xk-kick { color: var(--kv-wine); }
.r3xk-card .r3xk-h { color: var(--kv-wine); --kv-tail: var(--kv-tail-l); font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.2rem); }
.r3xk-card .r3xk-body { color: var(--kv-ink-2); margin-top: 18px; }
.r3xk-card__main { display: grid; gap: 22px; justify-items: start; align-content: start; }
.r3xk-card__side { display: grid; gap: 14px; align-content: start; }
.r3xk-card h3 { font: 600 .875rem/1.2 var(--kv-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--kv-wine); }
.r3xk-card__side .r3xk-small { color: var(--kv-ink-2); }
.r3xk-hrs { display: grid; gap: 0; border-top: 1px solid var(--kv-rule); }
.r3xk-hrs > span:not(.r3xk-sep) { display: flex; flex-wrap: wrap; white-space: nowrap; row-gap: 2px; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0 11px; border-bottom: 1px solid var(--kv-rule); font: 500 .9375rem/1.3 var(--kv-sans); letter-spacing: .02em; color: var(--kv-ink-2); }
.r3xk-hrs > span > i { font-style: normal; font: 600 1.7rem/1 var(--kv-serif); letter-spacing: -.01em; color: var(--kv-wine); font-variant-numeric: lining-nums tabular-nums; }
.r3xk-hrs .r3xk-sep { display: none; }
/* the close is a photograph with the cream card on it from 700 px (fix round 2: it was a stacked photo + card below 900 px, and 640-900 px tall above: LC-R2's closing band is 420-430) */
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) {
  .r3xk-close { padding-block: clamp(56px, 9vh, 104px); min-height: clamp(460px, 56vh, 640px); display: flex; align-items: center; background: var(--kv-floor); }
  .r3xk-close__photo { position: absolute; inset: 0; height: auto; z-index: -1; }
  .r3xk-close__in { margin-top: 0; width: 100%; }
  .r3xk-card { width: min(100%, 62rem); margin-left: auto; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-card--solo { grid-template-columns: 1fr; width: min(100%, 44rem); margin-inline: auto; } }
@media (max-width: 699px) and (min-height: 521px), (max-width: 599px) { .r3xk-close__in { padding-bottom: 8px; } }

/* ================================ 11. FOOTER (wine) + THE ZS PACKAGE PLANE (graphite, ZS ink, foundation components) ================================ */
.r3xk-foot:not(.r3-plane) { background: var(--kv-wine-deep); }
.r3xk-foot { color: var(--kv-on); padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.r3xk-foot__grid { display: grid; gap: 36px clamp(32px, 6vw, 96px); align-items: start; }
.r3xk-foot .r3xk-word { display: inline; min-height: 0; font-size: min(clamp(3rem, 2rem + 5vw, 6.5rem), 25vw); }   /* b6: the big footer wordmark keeps its line box (the 44 px target lift is for the header wordmark) */
.r3xk-foot__sig p { margin-top: 14px; font: 400 .9375rem/1.4 var(--kv-sans); color: var(--kv-on-2); }
.r3xk-foot__label { font: 600 .8125rem/1.2 var(--kv-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--kv-brass); margin-bottom: 14px; }
.r3xk-foot nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.r3xk-foot nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font: 500 1rem/1.2 var(--kv-sans); text-decoration: none; color: var(--kv-on); }
.r3xk-foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.r3xk-foot.r3-plane { padding-top: calc(var(--r3-fade) + 16px); }
.r3xk-from-cream { --r3-from: #F3ECDD; }
.r3xk-foot__note { grid-column: 1 / -1; font: 400 .8125rem/1.6 var(--kv-sans); color: var(--kv-on-2); max-width: 46em; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-foot__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.r3xk-end { --r3-from: #4E1D1A; padding-bottom: clamp(40px, 6vw, 88px); }
.r3xk-end__grid { display: grid; gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-end__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.r3xk-end .r3-label { color: var(--ink-2); margin: 0 0 18px; }
.r3xk-end__h { font: 500 clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem)/1 "Space Grotesk", "ZS Grotesk Fallback", system-ui, sans-serif; letter-spacing: -.035em; color: var(--ink); margin-bottom: 20px; }
.r3xk-end p { color: var(--ink-2); max-width: 34em; margin: 0; }
.r3xk-end__offer { display: grid; gap: 18px; justify-items: start; }
.r3xk-end__offer .r3-price { margin-top: 2px; --r3-price-fs: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
.r3xk-end__lines { font: 400 .9375rem/1.55 var(--r3-f-text); color: var(--ink-2); }
.r3xk-end__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
/* release QA 2026-10-13: at 667x375 the offer column (280 px) grew to the nowrap button (341 px) and its text ran off the right edge ("inte", "mindre" cut, the button reaching the edge):
   one track that may shrink, and the label wraps when the column is narrow */
.r3xk-end__offer { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 800px) {
  .r3xk-end__act .r3-btn { white-space: normal; text-align: center; line-height: 1.15; padding-block: 10px; height: auto; }
  .r3xk-end__act .r3-roll .r3-btn__t { height: auto; flex-direction: row; } .r3xk-end__act .r3-roll .r3-btn__t > span { height: auto; } .r3xk-end__act .r3-roll .r3-btn__t > span + span { display: none; }
}
@media (max-width: 1023px) { .r3xk-end { padding-bottom: calc(clamp(40px, 6vw, 88px) + 24px); } html.js body.r3xk.r3-has-dock { padding-bottom: 0; } }   /* the dock hides itself while this plane is in view ([data-r3-dock-hide]): no 84 px allowance */

/* ================================ 12. DOCK (phones): the restaurant's own "Boka bord", inert while off screen; DIALOG ================================ */
.r3xk-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: 10px; padding: 16px var(--kv-gut) calc(12px + env(safe-area-inset-bottom)); isolation: isolate;
  transform: translateY(115%); visibility: hidden; transition: transform .4s var(--kv-ease), visibility 0s .4s; pointer-events: none; }
.r3xk-dock::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #4E1D1A; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px); mask-image: linear-gradient(180deg, transparent 0, #000 16px); }
.r3xk-dock > * { pointer-events: auto; }
.r3xk-dock.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.r3xk-dock .r3xk-btn { flex: 1 1 auto; min-height: 50px; padding: 0 16px; font-size: .9688rem; }
.r3xk-dock .r3xk-btn--wine { flex: 1.25 1 0; background: var(--kv-wine-hi); box-shadow: 0 0 0 1px rgba(245, 238, 223, .3); }
.r3xk-dock .r3xk-btn--quiet { flex: 1 1 0; }
@media (max-width: 1023px) { html.js .r3xk-dock { display: flex; } }
@media (max-height: 520px) { .r3xk-dock { display: none !important; } }
@media (max-width: 340px) { .r3xk-dock .r3xk-btn { padding: 0 10px; font-size: .875rem; white-space: normal; text-align: center; line-height: 1.15; } }
.r3xk dialog { border: 0; padding: 0; max-width: 560px; width: calc(100% - 32px); max-height: calc(100vh - 40px); background: var(--kv-paper); color: var(--kv-ink); border-radius: 4px; }
.r3xk dialog::backdrop { background: rgba(26, 14, 12, .72); }
.r3xk dialog > div { display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); justify-items: start; }
.r3xk dialog .r3xk-kick { color: var(--kv-wine); margin: 0; }
.r3xk dialog h2 { font: 600 clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem)/1.05 var(--kv-serif); letter-spacing: -.02em; color: var(--kv-wine); }
.r3xk dialog p { font-size: .9688rem; color: var(--kv-ink-2); max-width: 36em; }
.r3xk dialog .r3xk-btn { width: 100%; }
@media (max-width: 699px) { .r3xk dialog .r3xk-btn { line-height: 1.2; padding-block: .35em; border-radius: 36px; } }   /* b6 fix62: a wrapped label keeps its padding */
.r3xk dialog button.r3xk-link { background: none; border: 0; padding: 12.5px 0; color: var(--kv-wine); }

/* ================================ 13. SUB PAGES (meny, om, galleri, kontakt): the same grammar, a dark head with one photograph ================================ */
.r3xk-sub { position: relative; isolation: isolate; background: var(--kv-hero); color: var(--kv-ink); padding: clamp(14px, 3vw, 40px) 0 clamp(72px, 9vw, 128px); overflow: clip; }
.r3xk-crumb { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: clamp(28px, 4vw, 52px); font: 500 .875rem/1.3 var(--kv-sans); color: var(--kv-ink-2); }
.r3xk-crumb a { display: inline-flex; align-items: center; min-width: 44px; text-decoration: none; color: var(--kv-ink-2); padding-block: 13px; margin-block: -13px; }
.r3xk-crumb a:hover { text-decoration: underline; }
.r3xk-sub__grid { display: grid; gap: clamp(32px, 5vw, 56px) clamp(32px, 5vw, 88px); align-items: end; }
.r3xk-sub__copy { display: grid; gap: 22px; justify-items: start; align-content: end; }
.r3xk-sub__h { font-size: clamp(3rem, .8rem + 7vw, 7.4rem); line-height: .94; letter-spacing: -.03em; font-weight: 400; }
.r3xk-sub__fig { position: relative; margin: 0 calc(var(--kv-gut) * -1) -72px; }
.r3xk-sub__ph { aspect-ratio: var(--r3xk-ar, 4 / 3); background: var(--kv-hero-shade); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, rgba(0, 0, 0, .55) 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 70%, rgba(0, 0, 0, .55) 86%, transparent 100%); }
.r3xk-sub__ph picture, .r3xk-sub__ph img { width: 100%; height: 100%; object-fit: cover; }
/* round 3b-2 (P4-067): the label of the sub-page photograph is a quiet cream caption BELOW the photograph (ink-3 on sand), no longer a black UI tab laid on it; the words are unchanged */
.r3xk-sub__fig figcaption { position: relative; padding: 14px var(--kv-gut) 0; font: 500 .8125rem/1.3 var(--kv-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--kv-ink-2); }
/* two columns from 700 px (fix round 2: the width-only 960 px line sent landscape phones and portrait tablets to the stacked phone layout, +40..56 percent taller than LC-R2) */
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) {
  .r3xk-sub__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .r3xk-sub__fig { margin: 0 calc((var(--kv-side) - var(--kv-gut)) * -1 - var(--kv-gut)) -72px 0; }
  .r3xk-sub__fig figcaption { left: 0; padding-inline: 0; }
  /* the mirrored head (galleri): the photograph on the left, bleeding off the left window edge, the copy on the right; the caption keeps the content edge */
  .r3xk-sub--rev .r3xk-sub__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .r3xk-sub--rev .r3xk-sub__fig { order: -1; margin: 0 0 -72px calc((var(--kv-side) - var(--kv-gut)) * -1 - var(--kv-gut)); }
  .r3xk-sub--rev .r3xk-sub__fig figcaption { padding-left: var(--kv-side); }
}
/* release QA 2026-10-13: in landscape windows up to 520 px high the figure (photograph + caption) ended 30 px below the clipped bottom edge of the section, so the caption was cut off at 667x375 and 844x390;
   without the -72 px bottom margin the figure sits inside the section (the photograph still fades into the next plane through its own mask) */
@media (min-width: 600px) and (max-height: 520px) { .r3xk-sub__fig, .r3xk-sub--rev .r3xk-sub__fig { margin-bottom: 0; } }
/* small phones: a tighter head so the photograph of the sub page starts inside the first screen (fix round 2, F-20) */
@media (max-width: 480px) { .r3xk-crumb { margin-bottom: 18px; } .r3xk-sub__copy { gap: 16px; } .r3xk-sub__grid { gap: 26px; } .r3xk-sub__copy .r3xk-kick { margin-bottom: .2em; } }
@media (min-width: 700px) and (max-width: 1099px), (min-width: 600px) and (max-width: 699px) and (max-height: 520px) { .r3xk-sub__h { font-size: clamp(2.6rem, 5.4vw + .4rem, 4.6rem); } }
.r3xk-sub--type .r3xk-sub__grid { grid-template-columns: 1fr; }
.r3xk-sub--type { padding-bottom: clamp(28px, 4vw, 56px); }
.r3xk-sub__actions .r3xk-link { color: var(--kv-wine); }
.r3xk-sub__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
/* the dish list of the menu page: small true photographs, serif names, figure prices; a ledger inside content */
.r3xk-dishes { border-top: 1px solid var(--kv-rule); }
.r3xk-dish { display: grid; grid-template-columns: 1fr; gap: 18px 36px; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--kv-rule); align-items: center; scroll-margin-top: 24px; }
.r3xk-dish__ph { aspect-ratio: 5 / 4; background: var(--kv-floor); overflow: hidden; }
.r3xk-dish__ph img { width: 100%; height: 100%; object-fit: cover; }
.r3xk-dish__t { font: 600 clamp(2rem, 1.3rem + 2.6vw, 3.4rem)/1.02 var(--kv-serif); letter-spacing: -.02em; color: var(--kv-wine); font-variant-numeric: lining-nums; margin: 0 0 14px; }
.r3xk-dish__txt .r3xk-n { display: block; margin-bottom: .7em; }
.r3xk-dish__txt .r3xk-kick { margin-bottom: .8em; }
.r3xk-dish__txt p { color: var(--kv-ink-2); max-width: 32em; }
.r3xk-dish__parts { margin-top: 14px; font: 600 .9375rem/1.4 var(--kv-sans); letter-spacing: .01em; color: var(--kv-wine); }
.r3xk-dish .r3xk-fig { color: var(--kv-wine); }
@media (max-width: 759px) { .r3xk-dish__ph { aspect-ratio: 16 / 10; } }
@media (min-width: 760px) { .r3xk-dish { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto; } }
@media (min-width: 1100px) { .r3xk-dish { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto; gap: 18px 64px; } }
.r3xk-menu-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin-top: clamp(28px, 4vw, 48px); }
.r3xk-menu-note p { color: var(--kv-ink-2); max-width: 36em; }
.r3xk-menu-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
/* editorial split (om, meny): a photograph and a short text, the photograph never rounded */
.r3xk-split { display: grid; gap: 32px clamp(36px, 6vw, 96px); align-items: center; }
.r3xk-split__fig { position: relative; aspect-ratio: var(--r3xk-ar, 1); background: var(--kv-floor); box-shadow: 0 40px 70px -40px rgba(26, 14, 12, .65); overflow: hidden; }
.r3xk-split__fig img { width: 100%; height: 100%; object-fit: cover; }
.r3xk-split__fig figcaption { position: absolute; left: 0; bottom: 0; padding: 9px 16px; background: #0C0C0F; color: #F3F0EA; font: 500 .8125rem/1.3 var(--kv-sans); letter-spacing: .1em; text-transform: uppercase; }
.r3xk-split__copy { display: grid; gap: 22px; justify-items: start; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .r3xk-split--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .r3xk-split--rev .r3xk-split__fig { order: 2; } }
.r3xk-triad { display: grid; gap: 0; border-top: 1px solid var(--kv-rule-d); margin-top: clamp(36px, 5vw, 64px); }
.r3xk-triad > li { padding: 26px 0 30px; border-bottom: 1px solid var(--kv-rule-d); display: grid; gap: 10px; align-content: start; }
.r3xk-triad__t { font: 600 clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem)/1.08 var(--kv-serif); letter-spacing: -.015em; color: var(--kv-on); }
.r3xk-triad__d { color: var(--kv-on-2); font-size: 1rem; max-width: 26em; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-triad { grid-template-columns: repeat(3, minmax(0, 1fr)); } .r3xk-triad > li { padding: 30px clamp(20px, 3vw, 48px) 8px; border-bottom: 0; } .r3xk-triad > li:first-child { padding-left: 0; } .r3xk-triad > li + li { border-left: 1px solid var(--kv-rule-d); } }
.r3xk-triad .r3xk-n { color: var(--kv-brass); margin-bottom: 14px; display: block; }
/* gallery: a staggered mosaic of the four photographs, serif titles, existing captions */
.r3xk-mosaic { display: grid; gap: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 64px); align-items: start; }
.r3xk-mosaic figure { margin: 0; }
.r3xk-mosaic__ph { background: var(--kv-floor); overflow: hidden; aspect-ratio: var(--r3xk-ar, 3 / 2); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .8); }
.r3xk-mosaic__ph img { width: 100%; height: 100%; object-fit: cover; }
.r3xk-mosaic .r3xk-cap { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding-top: 18px; align-items: baseline; }
.r3xk-mosaic .r3xk-cap .r3xk-n { grid-row: 1 / span 2; }
.r3xk-mosaic .r3xk-cap h2 { font: 600 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.1 var(--kv-serif); letter-spacing: -.015em; color: var(--kv-on); }
.r3xk-mosaic .r3xk-cap p { color: var(--kv-on-2); font-size: .9688rem; max-width: 30em; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(56px, 7vw, 104px); } .r3xk-mosaic > .r3xk-m-a { grid-column: 1 / span 7; } .r3xk-mosaic > .r3xk-m-b { grid-column: 8 / span 5; margin-top: clamp(64px, 9vw, 136px); } .r3xk-mosaic > .r3xk-m-c { grid-column: 2 / span 4; margin-top: clamp(40px, 6vw, 96px); } .r3xk-mosaic > .r3xk-m-d { grid-column: 7 / span 5; } }
.r3xk-context { margin-top: clamp(40px, 5vw, 72px); font: 400 .875rem/1.5 var(--kv-sans); color: var(--kv-on-3); max-width: 46em; }
.r3xk-contact { display: grid; gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.r3xk-contact__cols { display: grid; gap: 36px clamp(28px, 4vw, 64px); align-content: start; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { .r3xk-contact__cols { display: flex; flex-wrap: wrap; } .r3xk-contact__cols > :first-child { flex: 1.1 1 0; min-width: 9.5rem; } .r3xk-contact__cols > :last-child { flex: .9 1 0; min-width: 7.5rem; } }   /* b6 fix78: the columns keep their 1.1 : .9 split at 100 % and wrap once rem-sized text leaves no room */
.r3xk-gal { padding-top: calc(var(--r3-fade) + 8px); padding-bottom: clamp(72px, 9vw, 140px); }
.r3xk-contact h3 { font: 600 .875rem/1.2 var(--kv-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--kv-wine); margin-bottom: 14px; overflow-wrap: normal; }
.r3xk-contact .r3xk-hrs { border-top: 1px solid var(--kv-rule); }
.r3xk-contact .r3xk-hrs > span > i { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); } .r3xk-contact .r3xk-hrs > span:not(.r3xk-sep) { padding-block: 18px 16px; font-size: 1rem; }
.r3xk-place { display: grid; gap: 10px; align-content: start; }
.r3xk-place__n { font: 600 clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem)/1 var(--kv-serif); color: var(--kv-wine); letter-spacing: -.02em; }
.r3xk-caption { font: 400 .875rem/1.5 var(--kv-sans); color: var(--kv-on-3); max-width: 38em; }
.r3xk-sub .r3xk-caption { color: var(--kv-ink-2); }   /* the fiction note on the sand head: ink-2 6.9 on sand (the dark-ground tone was 1.9) */

/* ================================ 14. MOTION (hidden start states hang on html.lib-on only) ================================ */
@keyframes r3xk-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes r3xk-settle { from { transform: scale(1.055); } to { transform: none; } }
@keyframes r3xk-fade { from { opacity: 0; } to { opacity: 1; } }
.lib-on .r3xk-hero__in > *, .lib-on .r3xk-sub__copy > *, .lib-on .r3xk-crumb { animation: r3xk-rise .95s var(--kv-ease) both; animation-delay: calc(.15s + var(--n, 0) * .12s); }
.lib-on .r3xk-hero__in > :nth-child(3) { --n: 2; }
.lib-on .r3xk-hero__in > .r3xk-hero__plate { animation: none; }   /* the photograph never fades in: only its settle (1.055 -> 1) runs, so the largest paint is not delayed */
.lib-on .r3xk-hero__plate img { animation: r3xk-settle 2s var(--kv-ease) both; }
.lib-on .r3xk-sub__fig img, .lib-on .r3xk-split__fig img, .lib-on .r3xk-room__fig img { animation: none; }
.lib-on .r3xk-sub__copy > :nth-child(1) { --n: 0; } .lib-on .r3xk-sub__copy > :nth-child(2) { --n: 1; } .lib-on .r3xk-sub__copy > :nth-child(3) { --n: 2; } .lib-on .r3xk-sub__copy > :nth-child(4) { --n: 3; } .lib-on .r3xk-sub__copy > :nth-child(5) { --n: 4; }

/* ================================ 15. REDUCED MOTION / STATIC (last on purpose): the composed rest state ================================ */
.no-motion .r3xk-hero__in > *, .no-motion .r3xk-sub__copy > *, .no-motion .r3xk-crumb, .no-motion .r3xk-hero__plate img { animation: none !important; }
.no-motion .r3xk-hero__plate video { display: none; }
.no-motion .r3xk-ledger__rows a, .no-motion .r3xk-ledger__t, .no-motion .r3xk-ledger__pane figure, .no-motion .r3xk-btn, .no-motion .r3xk-btn__arr, .no-motion .r3xk-dock { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .r3xk-hero__in > *, .r3xk-sub__copy > *, .r3xk-crumb, .r3xk-hero__plate img { animation: none !important; }
  .r3xk-ledger__rows a, .r3xk-ledger__t, .r3xk-ledger__pane figure, .r3xk-btn, .r3xk-btn__arr, .r3xk-dock { transition: none !important; }
}

/* short desktop windows (1366x620, 1280x720): crumb tucked, headline capped by the window height, so kicker, headline, lede and ask stay in the fold */
@media (min-width: 960px) and (max-height: 760px) {
  .r3xk-sub { padding-top: 8px; padding-bottom: 72px; }   /* release QA 2026-10-13: was 56 px, 16 px short of the figure's -72 px margin: the photograph caption was clipped at 1366x620 */
  .r3xk-crumb { margin-bottom: 14px; }
  .r3xk-sub__h { font-size: clamp(2.8rem, 12.5vh, 5.6rem); }
  .r3xk-sub__copy { gap: 16px; }
  .r3xk-sub__fig { --r3xk-ar: 3 / 2 !important; }
}
/* landscape phones and short windows: the sub-page head keeps its ask in the fold */
@media (max-height: 520px) and (min-width: 600px) {
  .r3xk-sub { padding-top: 4px; padding-bottom: 40px; }
  .r3xk-crumb { display: none; }
  .r3xk-sub__h { font-size: clamp(2.4rem, 12vh, 4rem); }
  .r3xk-sub__copy { gap: 12px; }
  .r3xk-sub .r3xk-lede { font-size: 1rem; }
  .r3xk-sub__grid { gap: 20px; }
  .r3xk-sub__copy .r3xk-kick { display: none; }                 /* the crumb row is hidden here too: the headline, the lede and the ask stay inside the 375-390 px fold */
  .r3xk-sub__fig { --r3xk-ar: 2 / 1 !important; }               /* a wide crop of the photograph: the figure no longer sets the height of the fold */
  .r3xk-sub .r3xk-btn { min-height: 44px; }
}

/* RC2 zoom follow-up: the pill and the nav links had their own transition that hid the zoom; the label box of a zooming control is as high as its text (it wraps at <= 340 px) */
.r3xk-pill.r3-roll { transition: background .2s, transform .28s var(--r3-ease-out); }
.r3xk-nav a.r3-roll:not(.r3xk-pill) { transition: color .2s, opacity .2s, transform .28s var(--r3-ease-out); }
.r3xk-btn.r3-roll .r3-btn__t, .r3xk-pill.r3-roll .r3-btn__t, .r3xk-navl.r3-roll .r3-btn__t { height: auto; line-height: inherit; }
.r3xk-btn.r3-roll .r3-btn__t > span, .r3xk-pill.r3-roll .r3-btn__t > span, .r3xk-navl.r3-roll .r3-btn__t > span { height: auto; }
.no-motion .r3xk-pill.r3-roll, .no-motion .r3xk-nav a.r3-roll { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .r3xk-pill.r3-roll, .r3xk-nav a.r3-roll { transition: none !important; transform: none !important; } }

/* RC3 WP-MENU-EXAMPLES */
@media (max-width: 1023px) and (min-height: 521px) { html.js { scroll-padding-bottom: 96px; } }

/* b6 G3: Kvarteret */
/* EU-11: the arrow of a text link keeps its space (the inline-block swallowed the leading blank) */
.r3xk-link .r3xk-btn__arr { margin-left: .3em; }
/* BTN-12: full-width controls zoom 1.02 (the settled rule), not 1.04, so a focused or hovered button never grows past the content edge or into its neighbour */
@media (max-width: 767px) {
  .r3xk-hero .r3xk-btn.r3-roll:focus-visible, .r3xk-dock .r3xk-btn.r3-roll:focus-visible, .r3xk dialog .r3xk-btn.r3-roll:focus-visible { transform: scale(1.02); }
}
@media (max-width: 767px) and (hover: hover) {
  .r3xk-hero .r3xk-btn.r3-roll:hover, .r3xk-dock .r3xk-btn.r3-roll:hover, .r3xk dialog .r3xk-btn.r3-roll:hover { transform: scale(1.02); }
}

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

/* 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 wraps */
.r3xk-zs { flex-wrap: wrap; }

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

/* b6 HEAD-WRAP */
@media (max-width: 699px) {
  .r3xk-head { height: auto; min-height: var(--kv-hh); display: flex; align-items: center; }
  .r3xk-head .r3xk-head__in { height: auto; flex-wrap: wrap; row-gap: 2px; padding-block: 6px; }
}

/* b6 DOCK-WRAP */
@media (max-width: 699px) { .r3xk-dock .r3xk-btn { white-space: normal; text-align: center; line-height: 1.15; min-width: 0; padding-block: .3em; } }

/* b6 HEADINGS-200 */
@media (max-width: 599px) {
  .r3xk { --kv-h1: min(clamp(3.1rem, min(.6rem + 8.2vw, 15.5vh), 8.6rem), 15.5vw); --kv-h1s: min(clamp(3.1rem, 9.2vw, 6.2rem), 15.5vw); --kv-h2: min(clamp(2.55rem, 1.3rem + 4.7vw, 5.4rem), 12.8vw); }
}

/* b6 KV-BTN-WRAP */
@media (max-width: 699px) { .r3xk .r3xk-btn { white-space: normal; text-align: center; max-width: 100%; padding-block: .3em; line-height: 1.1; } }

/* b6 POSTER-200 */
@media (max-width: 699px) { .r3xk .r3xk-poster { font-size: min(clamp(3.4rem, .5rem + 9.8vw, 9.6rem), 17vw); } .r3xk .r3xk-poster > span { white-space: normal; } }

/* b6 fix2: place name fits its column on tablets */
.r3xk-place { container-type: inline-size; }
.r3xk-place__n { font-size: min(clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem), 25cqi); }

/* b6 fix38 MSG-07 film colour */
.r3xk-hero__plate::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(250, 247, 213); mix-blend-mode: multiply; opacity: 0; transition: opacity .9s var(--kv-ease); }
.r3xk-hero__plate:has(video.is-playing[src*="food-quality-portrait"])::after { opacity: 1; }
.no-motion .r3xk-hero__plate::after { display: none; }

/* b6 fix62 rows */
/* b6 fix62 rows: the dish and ledger rows stack the price under the title when their container is narrow (rem, so it follows the text size) */
.r3xk-dishes { container-type: inline-size; }
@container (max-width: 36rem) { .r3xk-dish { grid-template-columns: minmax(0, 1fr); } .r3xk-dish .r3xk-fig { justify-self: start; } }
@media (min-width: 900px) { .r3xk-ledger__rows { container-type: inline-size; } }
@container (max-width: 28rem) { .r3xk-ledger__rows a { grid-template-columns: 3rem minmax(0, 1fr); } .r3xk-ledger__rows .r3xk-fig { grid-column: 2; justify-self: start; } }
/* b6 fix62 card label and triad */
@media (max-width: 359px), (min-width: 600px) and (max-width: 760px) { .r3xk-card h3 { letter-spacing: .15em; } }
.r3xk-triad { container-type: inline-size; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { @container (max-width: 38rem) { .r3xk-triad > li { padding-inline: 14px; } .r3xk-triad > li:first-child { padding-left: 0; } } }
/* b6 fix62 booking dialog in short windows: the whole dialog and its close link fit a landscape phone */
@media (max-height: 480px) { .r3xk dialog { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); } .r3xk dialog > div { padding: 16px 24px; gap: 8px; } .r3xk dialog h2 { font-size: 1.7rem; } .r3xk dialog p { font-size: .9rem; line-height: 1.4; } }

/* b6 fix78 kvarteret */
/* b6 fix78 kvarteret: the philosophy wrap is a container; below 25 rem (larger text) the triad stacks like the phone layout (the wrap is >= 37 rem at 100 % whenever the triad is three columns) */
.r3xk-room > .r3xk-wrap { container-type: inline-size; }
@container (max-width: 25rem) {
  .r3xk-triad { grid-template-columns: minmax(0, 1fr); }
  .r3xk-triad > li, .r3xk-triad > li:first-child, .r3xk-triad > li + li { padding: 26px 0 30px; border-bottom: 1px solid var(--kv-rule-d); border-left: 0; }
}
/* the two plain demo-bar links get room inside their own focus ring; the margin keeps the text and the neighbours where they were */
.r3xk .r3xk-zs > a { padding-inline: 8px; }
.r3xk .r3xk-zs > a:first-child { margin-left: -8px; margin-right: -8px; }
.r3xk .r3xk-zs > a:last-child { margin-right: -8px; }
/* a stacked dish photo is never taller than the window allows */
@container (max-width: 36rem) { .r3xk-dish .r3xk-dish__ph { max-width: min(100%, max(75vh, 576px)); } }

/* b6 fix85 kvarteret */
/* b6 fix85 kvarteret: reverify/explore6 findings 01, 02, 03, 04, 09, 10 */
.r3xk-dock .r3xk-btn--wine { flex: 1.25 1 auto; }
.r3xk-dock .r3xk-btn--quiet { flex: 1 1 auto; }
.r3xk-statement__side { grid-template-columns: minmax(0, 1fr); }
.r3xk-statement__side .r3xk-btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; padding-block: 12px; }
@media (min-width: 900px) { .r3xk-menu__head { grid-template-columns: minmax(0, 1.25fr) minmax(min-content, .75fr); } }
@media (min-width: 700px) and (max-width: 800px) { .r3xk-end__act { max-width: 100%; } .r3xk-end__act .r3-btn { --px: 16px; gap: .4em; } }
@media (max-width: 699px) { .r3xk-head { container-type: inline-size; } }
@container (max-width: 12rem) { .r3xk-head__in { gap: 2px; } .r3xk-head__in > .r3xk-word { flex: 1 0 100%; } .r3xk-head__in > .r3xk-pill { padding: 0 6px; } .r3xk-menubtn { padding: 0 6px; } }
@media (min-width: 761px) { .r3xk-nav a:not(.r3xk-pill) { min-width: 44px; justify-content: center; } }

/* b6 fix95 kvarteret */
/* b6 fix95 kvarteret (verify7): the footer nav keeps its labels on one line at 150-200 % text (container, never at 100/125 %); the end block heading and the gallery caption headings follow the landscape phone window at 200 %; the small print and card headings may break inside a word only when nothing else helps (the removed soft hyphens used to do it) */
.r3xk-foot { container-type: inline-size; }
@media (min-width: 700px), (min-width: 600px) and (max-height: 520px) { @container (max-width: 39rem) { .r3xk-foot__grid { grid-template-columns: minmax(0, 1fr) max-content; } } }
@container (max-width: 14.5rem) { .r3xk-foot nav { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 560px) and (max-width: 659px) and (max-height: 520px) { .r3xk-end__h { font-size: min(clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem), 10vw); } }
@media (min-width: 600px) and (max-height: 520px) { .r3xk-mosaic .r3xk-cap h2 { font-size: min(clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem), 4.5vw); } }
.r3xk-small, .r3xk-card h3, .r3xk-contact h3 { overflow-wrap: break-word; }

/* b6 fix95 kvarteret footer stack */
/* b6 fix95: below 27 rem the footer's identity column and nav stack (the wordmark 'kvarteret' ran over the nav at 150-200 % on 600-820 px windows) */
@container (max-width: 27rem) { .r3xk-foot__grid { grid-template-columns: minmax(0, 1fr); } }

/* 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}