/* r3x-smula.css, stream XM: the example "Smula" (Starter bakery / cafe), LC-R3. ZS's own code, no foundation files, no vendor code.
   SELF-CONTAINED: this page links ONLY this file (no zs-editorial / r3-tokens / the old example sheets). Prefix r3x-sm-.
   GRAMMAR: a poster and a menu board. Heavy grotesk, wheat / cream / deep green, full-width tone bands that BLEND into each other (David's tone rule: no stripes).
   LIBRARY: G-57 poster scale (one word-pair at 8-11x the body), G-74 one display moment per viewport, W-72 + G-94 the menu as a word index whose rows swap a photograph
   (row flood .4s ease-out-quad, title +.18em, preview opacity .42s + rise 24px .6s cubic-bezier(.2,.7,.1,1)), G-123 figures (big numeral, small unit, one family).
   MOTION: html.lib-on gates every hidden start state; html.no-motion / no JS leave the composed page. Only transform / opacity / background-size animate.
   FOUNDATION OVERRIDES: none (the foundation is not loaded here).
   R3 FIX ROUND 2 (stream XM, after panel 3):
     F-13  the first screen is a WARM BREAD-CREAM ground (not a dark cinematic poster): the Starter bakery must not be as immersive as the Premium examples. The bread photograph is an INSET plate
           (left, a leaf-shaped corner, a wheat plate offset behind it) and the poster headline sits to its right: a layout none of the other five examples uses (they all put the copy on the left).
     F-33  the plate is cut from the REAL 1789 x 2500 master (no synthetic extension) and is never drawn above its natural size (sizes = the real slot, 560 / 840 / 1120 / 1440 candidates)
     F-36  every tone blend is a plain sRGB gradient with baked stops (oklch-interpolated by evidence/r3/final4/XM/tools/blend.py): no color-mix, no @supports, so no engine falls back to a hard edge
     F-11  the blends run through the neighbours' own hue (cream -> sage -> forest, forest -> leaf-olive -> mustard), not through grey-khaki
     F-34  the motion button keeps ONE accessible name; aria-pressed carries the state (see r3x-smula.js)
     HEIGHT: two columns from 700 px and in every short landscape window (the old rules stacked everything below 900 px: +33 percent at 768x1024, +20 percent at 844x390) */

/* ------------------------------------------------------------------ 0 fonts (the same self-hosted files as the rest of the tree) */
@font-face { font-family: "Sm Grotesk"; src: url("fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sm Grotesk"; src: url("fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Sm Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sm Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
/* digits of the display face come from the Inter 600 file (already loaded): Space Grotesk's "1" has a long flag that fuses with a dash ("07-16", "08-15") */
@font-face { font-family: "Sm Figures"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "Sm Serif"; src: url("fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* metric-matched fallbacks (same measured values as the foundation, F5): the swap moves nothing */
@font-face { font-family: "Sm Grotesk Fallback"; src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 700; size-adjust: 103%; ascent-override: 95%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Sm Grotesk Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); font-weight: 400 600; size-adjust: 109.7%; ascent-override: 89.3%; descent-override: 26.4%; line-gap-override: 0%; }
@font-face { font-family: "Sm Inter 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: "Sm Inter Fallback"; src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 500 700; size-adjust: 101.1%; ascent-override: 95.9%; descent-override: 23.7%; line-gap-override: 0%; }
@font-face { font-family: "Sm Serif Fallback"; src: local("Times New Roman Bold"), local("Times Bold"), local("Liberation Serif Bold"); font-weight: 600; size-adjust: 90.7%; ascent-override: 101.5%; descent-override: 32%; line-gap-override: 0%; }

/* ------------------------------------------------------------------ 1 tokens */
.smula {
  --sm-bread: #F3E3B8;      /* the first screen's ground: warm bread-crumb cream (F-13) */
  --sm-floor: #17110A;      /* the photograph's black point (baked: r3_grade --black 17110A) */
  --sm-green: #223829;      /* deep green: the menu board, the footer */
  --sm-green-2: #1A2B20;
  --sm-wheat: #E9CE84;      /* wheat / mustard: the lit row, the stamp, the philosophy band, the plate behind the photograph */
  --sm-wheat-l: #F6EBC8;    /* pale wheat: the opening hours */
  --sm-cream: #FAF4E7;      /* paper */
  --sm-crust: #9B4F1A;      /* baked crust: the second poster line (4.7 : 1 on bread, large text) */
  --sm-crust-d: #7A3F12;    /* crust for small text (6.5 : 1 on bread) */
  --sm-ink: #26382A;        /* text on paper: 9.8 : 1 on bread */
  --sm-ink-2: #43493A;      /* secondary text on paper: 7.3 : 1 on bread */
  --sm-line: #BCB39B;
  --sm-zs: #0C0C0F;         /* ZS ink (the wrapper and the package note) */
  /* F-36 / F-11: the tone blends as plain sRGB stops, eased like the foundation planes, interpolated in oklch (evidence/r3/final4/XM/tools/blend.py) */
  /* R3 3b-1 (P4-047 / P4-073): the dark half of every green <-> yellow blend stays GREEN with a little MORE chroma (a deep olive / moss), the hue only swings to yellow in the light half
     where a yellow is clean (straw, wheat). Round 2 moved the hue linearly, so yellow-green sat at mid lightness (L .59), where it can only be a dull khaki. The 17 stops are spread
     over the whole fade (the old eased 10-step table was flat for ~30 percent of it). Generated by evidence/r3/final8/XM/tools/blend3.py (python blend3.py css). */
  --sm-bl-board: linear-gradient(180deg, #F3E3B8 0%, #E9DCAF 6.2%, #DCD2A4 12.5%, #CCC797 18.8%, #BABA89 25%, #A7AD7C 31.2%, #939F6F 37.5%, #7F9164 43.8%, #6C825A 50%, #5B7450 56.2%, #4C6748 62.5%, #405B40 68.8%, #36503A 75%, #2E4734 81.2%, #28402F 87.5%, #243B2B 93.8%, #223829 100%);
  --sm-bl-note: linear-gradient(180deg, #223829 0%, #243B2B 6.2%, #26402D 12.5%, #2B4631 18.8%, #314F35 25%, #39583A 31.2%, #44643F 37.5%, #517044 43.8%, #617C48 50%, #73894E 56.2%, #869654 62.5%, #9AA25B 68.8%, #AEAD63 75%, #C0B76C 81.2%, #D1C175 87.5%, #DEC87D 93.8%, #E9CE84 100%);
  --sm-bl-faq: linear-gradient(180deg, #E9CE84 0%, #E9CF86 10%, #EAD18B 20%, #ECD594 30%, #EDD89D 40%, #EFDDA7 50%, #F1E1B1 60%, #F3E5B9 70%, #F5E8C1 80%, #F6EAC6 90%, #F6EBC8 100%);
  --sm-bl-foot: linear-gradient(180deg, #F6EBC8 0%, #ECE3BE 6.2%, #DFD9B2 12.5%, #D0CDA4 18.8%, #BEC095 25%, #AAB287 31.2%, #96A378 37.5%, #82946B 43.8%, #6F855F 50%, #5E7655 56.2%, #4F684B 62.5%, #425C43 68.8%, #37513B 75%, #2F4834 81.2%, #29402F 87.5%, #243B2B 93.8%, #223829 100%);
  --sm-bl-zs: linear-gradient(180deg, #223829 0%, #213628 6.2%, #203426 12.5%, #1F3225 18.8%, #1D2F23 25%, #1C2C21 31.2%, #1A281E 37.5%, #18251C 43.8%, #16221A 50%, #141E17 56.2%, #121B15 62.5%, #111813 68.8%, #0F1511 75%, #0D1310 81.2%, #0B1011 87.5%, #0B0E11 93.8%, #0C0C0F 100%);
  --sm-f-d: "Sm Figures", "Sm Grotesk", "Sm Grotesk Fallback", "Space Grotesk", Arial, sans-serif;
  --sm-f-t: "Sm Inter", "Sm Inter Fallback", "Inter", system-ui, sans-serif;
  --sm-f-s: "Sm Serif", "Sm Serif Fallback", "Cormorant Garamond", Georgia, serif;
  --sm-e: cubic-bezier(.2, .7, .1, 1);
  --sm-e-out: cubic-bezier(.25, .46, .45, .94);
  --sm-e-quart: cubic-bezier(.165, .84, .44, 1);
  --sm-gutter: clamp(18px, 4.4vw, 72px);
  --sm-bar: 52px;           /* height of the ZS wrapper bar (the motion button is 44 px high: F-34) */
  --sm-head: 64px;          /* height of the example's own header */
  --sm-fade: 96px;          /* tone blend length: 96 phone / 120 tablet / 140 desktop (BRIEF) */
  --sm-sec: 56px;
  --sm-vh: 1vh;
  --sm-pgap: clamp(28px, 5.4vw, 96px);   /* gap between the photograph plate and the poster copy */
  --sm-focus: var(--sm-green);
}
@supports (height: 1svh) { .smula { --sm-vh: 1svh; } }
@media (min-width: 768px) { .smula { --sm-fade: 120px; --sm-sec: 88px; --sm-head: 76px; } }
@media (min-width: 1100px) { .smula { --sm-fade: 140px; --sm-sec: 96px; --sm-head: 84px; } }
@media (max-width: 640px) { .smula { --sm-sec: 44px; } }
@media (max-width: 42.4375em) { .smula { --sm-bar: 96px; } }   /* b6 fix34: the bar is two rows (96 px) up to 680 px */
/* short landscape windows (phones turned sideways): blend 96, tight sections, the bar and header shrink */
@media (max-height: 520px) and (min-aspect-ratio: 5 / 4) { .smula { --sm-bar: 48px; --sm-head: 52px; --sm-fade: 96px; --sm-sec: 52px; } }

/* ------------------------------------------------------------------ 2 base */
html { background: #0C0C0F; }
@media (prefers-reduced-motion: no-preference) { html:not(.no-motion) { scroll-behavior: smooth; } }
.smula { margin: 0; background: var(--sm-zs); color: var(--sm-ink); font: 400 1.0625rem/1.6 var(--sm-f-t); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
.smula *, .smula *::before, .smula *::after { box-sizing: border-box; }
.smula :where(h1, h2, h3, p, ol, ul, figure, dl) { margin: 0; }
:where(.smula a) { color: inherit; }
.smula img { display: block; max-width: 100%; }
.smula :focus-visible { outline: 3px solid var(--sm-focus); outline-offset: 3px; }
.skip-link { position: fixed; top: -100px; transform: translateY(-100%); left: 12px; z-index: 99; padding: 14px 18px; background: #fff; color: #111; font: 600 15px/1 var(--sm-f-t); border-radius: 4px; }
.skip-link:focus { top: 12px; transform: none; }
.r3x-sm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.r3x-sm-wrap { width: min(100% - var(--sm-gutter) * 2, 1480px); margin-inline: auto; }

/* ------------------------------------------------------------------ 3 the ZS wrapper bar (ZS ink, slim) */
.r3x-sm-bar { position: relative; z-index: 7; background: var(--sm-zs); color: #F3F0EA; display: flex; align-items: center; gap: 4px 24px; min-height: var(--sm-bar); padding: 0 max(20px, 5vw); font: 500 13px/1.3 var(--sm-f-t); letter-spacing: .01em; }
.r3x-sm-bar a, .r3x-sm-bar button { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.r3x-sm-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.r3x-sm-bar a:focus-visible, .r3x-sm-bar button:focus-visible { outline-color: #F3F0EA; outline-offset: 0; }
.r3x-sm-bar__who { margin-right: auto; color: #F3F0EA; }
.r3x-sm-bar__who b { font-weight: 600; color: #DCBC7E; }
/* F-34 + P4-075 / P4-096: THE demo-bar motion control (one component for all six examples, reusable copy: evidence/r3/final8/XM/demo_bar_component.css + .js): ONE constant name ("Pausa rörelse"),
   aria-pressed carries the state, the state is DRAWN as a switch (aria-hidden track + knob; thrown = motion is off) instead of the old ": på" word; the whole 44 px pill is the hit area */
.r3x-sm-bar button { display: inline-flex; align-items: center; gap: 11px; font: inherit; background: transparent; border: 1px solid rgba(243, 240, 234, .38); border-radius: 999px; min-height: 44px; min-width: 44px; padding: 0 14px 0 16px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.r3x-sm-bar button:hover { background: rgba(243, 240, 234, .1); }
.r3x-sm-bar button[aria-pressed="true"] { background: rgba(243, 240, 234, .12); border-color: rgba(243, 240, 234, .62); }
.r3x-sm-bar button:disabled { opacity: .72; cursor: default; }
.r3x-sm-bar button[hidden] { display: none; }   /* without JS the control is not offered (display:inline-flex above used to beat [hidden]) */
.r3x-sm-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; }
.r3x-sm-sw i { position: absolute; top: 50%; left: 2.5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #F3F0EA; transition: transform .22s var(--sm-e-out), background-color .2s; }
.r3x-sm-bar button[aria-pressed="true"] .r3x-sm-sw { background: #DCBC7E; border-color: #DCBC7E; }
.r3x-sm-bar button[aria-pressed="true"] .r3x-sm-sw i { transform: translateX(14px); background: #0C0C0F; }
@media (max-width: 42.4375em) {
  .r3x-sm-bar { display: grid; grid-template-columns: 1fr auto; grid-template-rows: minmax(48px, auto) minmax(48px, auto); gap: 0 12px; padding-block: 0; min-height: 96px; font-size: 14px; }
  .r3x-sm-bar > a:first-child { grid-row: 1; }
  .r3x-sm-bar__who { grid-row: 1; grid-column: 2; margin: 0; text-align: right; align-self: center; }
  .r3x-sm-bar button { grid-row: 2; justify-self: start; padding: 0 12px; }
  .r3x-sm-bar > a:last-child { grid-row: 2; grid-column: 2; justify-self: end; }
}
@media (max-height: 520px) and (min-aspect-ratio: 5 / 4) { .r3x-sm-bar { display: flex; min-height: 48px; } .r3x-sm-bar__who { margin-right: auto; text-align: left; } }

/* ------------------------------------------------------------------ 4 the example's own header: the first line of the bread-cream ground (no band, no rule) */
.r3x-sm-head { position: relative; z-index: 6; height: var(--sm-head); background: var(--sm-bread); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 max(var(--sm-gutter), calc((100% - 1480px) / 2)); color: var(--sm-green-2); }
.r3x-sm-mark { font: 700 clamp(30px, 3vw, 42px)/1 var(--sm-f-d); letter-spacing: -.05em; text-decoration: none; color: inherit; padding-block: 9px; margin-block: -9px; }
.r3x-sm-head nav { display: flex; gap: 0 clamp(14px, 2.4vw, 32px); }
.r3x-sm-head nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1 var(--sm-f-t); text-decoration: none; letter-spacing: .005em; }
.r3x-sm-head nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--sm-crust); }
@media (max-width: 400px) { .r3x-sm-head nav a { font-size: 14px; } .r3x-sm-head nav { gap: 0 14px; } .r3x-sm-mark { font-size: 28px; } }

/* ------------------------------------------------------------------ 5 type roles */
.r3x-sm-kick { font: 600 13px/1.3 var(--sm-f-t); letter-spacing: .14em; text-transform: uppercase; }
/* ONE display moment per page, the poster. Every other heading is a quiet H2. */
.r3x-sm-h2 { font: 700 clamp(1.9rem, 2.4vw + .9rem, 3.4rem)/1.02 var(--sm-f-d); letter-spacing: -.035em; text-wrap: balance; }
.r3x-sm-h2--s { font-size: clamp(1.8rem, 1.6vw + 1rem, 2.6rem); }
.r3x-sm-h3 { font: 600 13px/1.3 var(--sm-f-t); letter-spacing: .14em; text-transform: uppercase; }
.r3x-sm-fig { font-family: var(--sm-f-d); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.035em; }
.r3x-sm-unit { font: 600 max(14px, .42em)/1 var(--sm-f-t); letter-spacing: .02em; }
/* masked line rise (the one entrance of the type) */
.r3x-sm-line { display: block; overflow: hidden; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.r3x-sm-line > span { display: block; }

/* ------------------------------------------------------------------ 6 buttons: a square-ish stamp, yellow on green (green on the bread ground) */
.r3x-sm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; padding: 0 28px; border: 0; border-radius: 6px; background: var(--sm-wheat); color: var(--sm-green-2); font: 700 17px/1 var(--sm-f-t); letter-spacing: .005em; text-decoration: none; cursor: pointer; transition: transform .25s var(--sm-e-out), border-radius .25s var(--sm-e-out), background .2s; }
@media (hover: hover) { .r3x-sm-btn:hover { background: #F2DA9A; } }   /* RC3 BTN-02: no tilt, no lift, no radius morph (was translateY(-2px) rotate(-1deg), not hover-guarded, alive under reduced motion) */
.r3x-sm-btn:active { transform: none; }
.r3x-sm-btn--green { background: var(--sm-green); color: var(--sm-wheat); }
.r3x-sm-btn--green:hover { background: #2C4733; }
.r3x-sm-btn:disabled { opacity: .55; cursor: not-allowed; }
.r3x-sm-btn:focus-visible { outline-color: var(--sm-wheat); }
.r3x-sm-btn--green:focus-visible { outline-color: var(--sm-green); }

/* ------------------------------------------------------------------ 7 tone planes: flat colour + a baked sRGB blend in the plane's own top padding (F-36, F-11) */
.r3x-sm-plane { --c: var(--sm-cream); position: relative; isolation: isolate; background: var(--c); padding: var(--sm-fade) 0 var(--sm-sec); }

/* ------------------------------------------------------------------ 8 THE POSTER (F-13): bread-cream ground, the photograph as an inset plate, copy beside it. Phone: copy first, plate below. */
.r3x-sm-poster { position: relative; isolation: isolate; background: var(--sm-bread); color: var(--sm-ink); padding: clamp(8px, 2vh, 24px) 0 clamp(48px, 7vh, 72px); }
.r3x-sm-poster__grid { display: grid; gap: 30px; }
.r3x-sm-poster__copy { display: grid; gap: clamp(18px, 3vh, 30px); align-content: center; min-width: 0; }
.r3x-sm-poster__top { display: grid; gap: clamp(8px, 1.4vh, 16px); }
.r3x-sm-poster .r3x-sm-kick { color: var(--sm-crust-d); }
.r3x-sm-h1 { font: 700 min(clamp(2.5rem, 13.4vw, 4.6rem), calc((100vw - 15px - 2 * var(--sm-gutter) - 2px) / 3.75))/.94 var(--sm-f-d); letter-spacing: -.048em; color: var(--sm-green-2); text-wrap: balance; }
.r3x-sm-line--2 { color: var(--sm-crust); }
.r3x-sm-poster__foot { display: grid; gap: clamp(14px, 2.2vh, 24px); justify-items: start; }
.r3x-sm-lead { font: 400 clamp(1.0625rem, .72vw + .8rem, 1.3rem)/1.5 var(--sm-f-t); color: var(--sm-ink-2); max-width: 27em; text-wrap: pretty; }
.r3x-sm-hours a { display: grid; gap: 4px; text-decoration: none; }
.r3x-sm-hours__g { display: inline-flex; align-items: baseline; gap: .1em .45em; white-space: nowrap; }
.r3x-sm-hours__dot { white-space: pre; }
/* calm: the opening hours are a line of text under the button, not display figures (the figures live once, in "Öppettider") */
.r3x-sm-hours__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; font: 600 16px/1.3 var(--sm-f-t); letter-spacing: .005em; color: var(--sm-ink); }
.r3x-sm-hours .r3x-sm-fig { font-size: 1em; line-height: inherit; color: var(--sm-crust-d); letter-spacing: -.01em; }
.r3x-sm-hours__more { font: 500 14px/1.4 var(--sm-f-t); color: var(--sm-ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(67, 73, 58, .5); }
.r3x-sm-hours a:hover .r3x-sm-hours__more { text-decoration-color: currentColor; }
.r3x-sm-hours :focus-visible { outline-color: var(--sm-green); }
@media (max-width: 559px) { .r3x-sm-hours__t { display: grid; gap: 2px; } .r3x-sm-hours__dot { display: none; } }

/* the plate: a leaf-shaped corner (top-left), a wheat plate offset behind it. The wrapper clips the photograph; the figure stays free for the plate and the stamp. */
.r3x-sm-poster__plate { position: relative; isolation: isolate; width: 100%; margin: 0 0 12px; }
.r3x-sm-poster__plate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: clamp(64px, 22vw, 120px) 6px 6px 6px; background: var(--sm-wheat); transform: translate(-6px, 10px); }   /* offset stays inside the 18 px gutter (boundary_check samples x = 1..9) */
.r3x-sm-poster__ph { position: relative; aspect-ratio: 1 / 1; overflow: hidden; overflow: clip; border-radius: clamp(64px, 22vw, 120px) 6px 6px 6px; background: var(--sm-floor); }
.r3x-sm-poster__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.r3x-sm-stamp { --sm-rot: -2deg; position: absolute; z-index: 2; left: 14px; bottom: 16px; display: block; padding: 7px 14px 8px; border-radius: 999px; background: var(--sm-green); color: var(--sm-wheat); box-shadow: inset 0 0 0 2px rgba(233, 206, 132, .5); font: 700 13px/1.2 var(--sm-f-d); letter-spacing: -.01em; white-space: nowrap; transform: rotate(var(--sm-rot)); }

/* poster entrance: masked rise of the two lines, then the foot; the photograph settles 1.05 -> 1 (G-57: "masked word rise"; G-49 settle). The photograph never starts at opacity 0 (F-06: LCP). */
@keyframes r3x-sm-up { from { transform: translateY(108%); } to { transform: none; } }
@keyframes r3x-sm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes r3x-sm-stamp-in { from { opacity: 0; transform: rotate(var(--sm-rot)) translateY(10px); } to { opacity: 1; transform: rotate(var(--sm-rot)); } }
@keyframes r3x-sm-settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes r3x-sm-show { to { opacity: 1; transform: none; } }
.lib-on .r3x-sm-h1 .r3x-sm-line > span { animation: r3x-sm-up .95s var(--sm-e-quart) calc(.1s + var(--i, 0) * .1s) both; }
.lib-on .r3x-sm-poster .r3x-sm-kick { animation: r3x-sm-in .7s var(--sm-e) both; }
.lib-on .r3x-sm-poster__foot > * { animation: r3x-sm-in .7s var(--sm-e) both; }
.lib-on .r3x-sm-poster__foot > :nth-child(1) { animation-delay: .35s; } .lib-on .r3x-sm-poster__foot > :nth-child(2) { animation-delay: .42s; } .lib-on .r3x-sm-poster__foot > :nth-child(3) { animation-delay: .49s; }
.lib-on .r3x-sm-stamp { animation: r3x-sm-stamp-in .7s var(--sm-e) .65s both; }
.lib-on .r3x-sm-poster__ph img { animation: r3x-sm-settle 1.4s var(--sm-e) both; }

/* ------------------------------------------------------------------ 9 THE MENU BOARD (W-72 + G-94 + G-123): cream -> sage -> forest */
.r3x-sm-board { --c: var(--sm-green); background: var(--sm-bl-board) top / 100% var(--sm-fade) no-repeat, var(--sm-green); color: var(--sm-cream); --sm-focus: var(--sm-wheat); }
.r3x-sm-board__head { display: grid; gap: 10px; margin-bottom: clamp(22px, 3.2vw, 48px); }
.r3x-sm-board .r3x-sm-kick { color: var(--sm-wheat); }
.r3x-sm-board .r3x-sm-h2 { letter-spacing: -.03em; }
/* calm word index (W-72 + G-94): the rows are the size of a heading, the photograph is as tall as the three rows (no second display moment) */
.r3x-sm-idx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.r3x-sm-idx__rows { list-style: none; padding: 0; border-top: 1px solid rgba(250, 244, 231, .24); display: grid; grid-auto-rows: 1fr; }
.r3x-sm-idx__rows li { border-bottom: 1px solid rgba(250, 244, 231, .24); display: grid; }
.r3x-sm-row { appearance: none; -webkit-appearance: none; display: grid; grid-template-columns: clamp(34px, 3.2vw, 52px) minmax(0, 1fr) auto; column-gap: clamp(8px, 1.4vw, 22px); row-gap: 6px; align-items: baseline; align-content: center; width: 100%; margin: 0; padding: clamp(16px, 1.9vw, 30px) clamp(10px, 1.4vw, 22px); border: 0; border-radius: 0; text-align: left; font: inherit; color: var(--sm-cream); cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(var(--sm-wheat), var(--sm-wheat)) 0 100% / 100% 0 no-repeat transparent; transition: background-size .4s var(--sm-e-out), color .4s var(--sm-e-out); }
.r3x-sm-row.is-on { background-size: 100% 100%; color: var(--sm-green-2); }
.r3x-sm-row:focus-visible { outline: 3px solid var(--sm-wheat); outline-offset: -3px; }
.r3x-sm-row.is-on:focus-visible { outline-color: var(--sm-green-2); }
.r3x-sm-row__n { font: 600 14px/1 var(--sm-f-t); letter-spacing: .08em; color: var(--sm-wheat); transition: color .4s var(--sm-e-out); }
.r3x-sm-row.is-on .r3x-sm-row__n { color: var(--sm-green-2); }
.r3x-sm-row__w { font: 700 clamp(1.5rem, 1.5vw + .95rem, 2.5rem)/1.05 var(--sm-f-d); letter-spacing: -.03em; text-wrap: balance; transition: transform .4s var(--sm-e-out); }
.r3x-sm-row.is-on .r3x-sm-row__w { transform: translateX(.12em); }
.r3x-sm-row__p { display: inline-flex; align-items: baseline; gap: .14em; font: 700 clamp(1.5rem, 1.5vw + .95rem, 2.5rem)/1.05 var(--sm-f-d); letter-spacing: -.02em; white-space: nowrap; }
.r3x-sm-row__p .r3x-sm-fig { letter-spacing: -.03em; }
.r3x-sm-row__d { grid-column: 2 / -1; font: 400 clamp(1rem, .3vw + .92rem, 1.15rem)/1.45 var(--sm-f-t); color: rgba(250, 244, 231, .88); transition: color .4s var(--sm-e-out); }
.r3x-sm-row.is-on .r3x-sm-row__d { color: #2D3E2F; }
.r3x-sm-idx__pane { order: -1; position: relative; aspect-ratio: 4 / 3; overflow: hidden; overflow: clip; background: var(--sm-floor); border-radius: 3px; }
.r3x-sm-idx__pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; z-index: 1; transform: translateY(24px); transition: opacity .42s ease .42s, transform .6s var(--sm-e) .42s; }
.r3x-sm-idx__pane img.is-on { opacity: 1; z-index: 2; transform: none; transition-delay: 0s; }
@supports not (aspect-ratio: 4 / 3) { .r3x-sm-idx__pane { min-height: 260px; } }   /* engines without aspect-ratio: the pane keeps a height */
/* no JS: the pane shows all three photographs (the rows cannot swap), a composed page rather than a dead control */
html:not(.js) .r3x-sm-idx__pane { position: static; aspect-ratio: auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: none; }
html:not(.js) .r3x-sm-idx__pane img { position: static; opacity: 1; transform: none; aspect-ratio: 5 / 6; height: auto; transition: none; }

/* ------------------------------------------------------------------ 10 THE STATEMENT (calm: a big H2, not a second poster; no ghost word): forest -> leaf-olive -> mustard */
.r3x-sm-note { --c: var(--sm-wheat); background: var(--sm-bl-note) top / 100% var(--sm-fade) no-repeat, var(--sm-wheat); color: var(--sm-green-2); padding-bottom: calc(var(--sm-sec) * 1.05); overflow: hidden; overflow: clip; }
.r3x-sm-note .r3x-sm-wrap { display: grid; gap: clamp(16px, 2vw, 28px); }
.r3x-sm-note .r3x-sm-kick { color: #4E4A2A; }
.r3x-sm-h2--big { font-size: min(clamp(2.1rem, 3.4vw + .7rem, 4.3rem), calc((100vw - 15px - 2 * var(--sm-gutter) - 2px) / 4.5)); line-height: .98; letter-spacing: -.04em; max-width: 12em; }
.r3x-sm-large { font: 400 clamp(1.1rem, .7vw + .9rem, 1.4rem)/1.55 var(--sm-f-t); color: #2C3321; max-width: 31em; text-wrap: pretty; }

/* ------------------------------------------------------------------ 11 FAQ: mustard -> pale wheat */
.r3x-sm-faq { --c: var(--sm-wheat-l); background: var(--sm-bl-faq) top / 100% var(--sm-fade) no-repeat, var(--sm-wheat-l); padding-bottom: 0; }
.r3x-sm-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.r3x-sm-faq .r3x-sm-kick { color: var(--sm-ink-2); margin-bottom: 10px; display: block; }
.r3x-sm-faq details { border-top: 1px solid var(--sm-line); }
.r3x-sm-faq details:last-child { border-bottom: 1px solid var(--sm-line); }
.r3x-sm-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; font: 700 clamp(1.15rem, 1vw + .85rem, 1.55rem)/1.25 var(--sm-f-d); letter-spacing: -.02em; cursor: pointer; }
.r3x-sm-faq summary::-webkit-details-marker { display: none; }
.r3x-sm-faq summary:focus-visible { outline-offset: -3px; }
.r3x-sm-plus { position: relative; flex: none; width: 20px; height: 20px; }
.r3x-sm-plus::before, .r3x-sm-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: currentColor; transition: transform .3s var(--sm-e-out); }
.r3x-sm-plus::after { transform: rotate(90deg); }
details[open] > summary .r3x-sm-plus::after { transform: rotate(0); }
.r3x-sm-faq details p { max-width: 34em; padding: 0 40px 22px 0; color: var(--sm-ink-2); font-size: 1.0625rem; }

/* ------------------------------------------------------------------ 12 THE VISIT: opening hours as a quiet ledger (calm: figures at heading size, not poster size) */
.r3x-sm-visit { --c: var(--sm-wheat-l); padding-top: calc(var(--sm-sec) * 1.1); padding-bottom: 0; background: var(--sm-wheat-l); }
.r3x-sm-visit .r3x-sm-wrap { display: grid; gap: 14px; }
.r3x-sm-visit .r3x-sm-kick { color: var(--sm-ink-2); }
.r3x-sm-visit .r3x-sm-h2 { max-width: 12em; margin-bottom: clamp(8px, 1.6vw, 24px); }
.r3x-sm-visit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 56px); }
.r3x-sm-visit__hours { display: grid; gap: 10px; align-content: start; }
.r3x-sm-visit .r3x-sm-h3 { color: var(--sm-ink-2); }
/* the hours are a small ruled ledger: the day on the left, the times as figures of heading size on the right (G-123, calm) */
.r3x-sm-board-hours { display: grid; grid-template-columns: minmax(0, 1fr); }
.r3x-sm-oh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0 16px; border-top: 1px solid var(--sm-line); }
.r3x-sm-oh:last-of-type { border-bottom: 1px solid var(--sm-line); }
.r3x-sm-oh__d { font: 600 clamp(1.05rem, .4vw + .95rem, 1.25rem)/1.2 var(--sm-f-t); color: var(--sm-ink-2); white-space: nowrap; overflow-wrap: normal; flex: none; }
.r3x-sm-oh__t { font: 700 clamp(2rem, 2.2vw + .9rem, 3.2rem)/1 var(--sm-f-d); letter-spacing: -.035em; font-variant-numeric: lining-nums tabular-nums; color: var(--sm-green); white-space: nowrap; }
.r3x-sm-visit__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.4vw, 36px); align-content: start; }
.r3x-sm-visit__text > div { display: grid; gap: 8px; align-content: start; }
.r3x-sm-visit__text > div:first-child p { font-size: clamp(1.1rem, .6vw + .95rem, 1.35rem); color: var(--sm-ink); max-width: 24em; }
.r3x-sm-where { font: 700 clamp(1.5rem, 1.2vw + 1rem, 2.2rem)/1.1 var(--sm-f-d); letter-spacing: -.03em; color: var(--sm-ink); }
.r3x-sm-small { font-size: 15px; color: var(--sm-ink-2); max-width: 28em; }

/* ------------------------------------------------------------------ 13 THE NOTE (the demo form) */
.r3x-sm-letter { --c: var(--sm-wheat-l); padding-top: calc(var(--sm-sec) * 1.1); padding-bottom: calc(var(--sm-sec) * .9); background: var(--sm-wheat-l); }
.r3x-sm-letter__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.r3x-sm-letter .r3x-sm-kick { color: var(--sm-ink-2); display: block; margin-bottom: 10px; }
.r3x-sm-letter p { color: var(--sm-ink-2); }
.r3x-sm-letter .r3x-sm-h2 { margin-bottom: 16px; color: var(--sm-ink); }
.r3x-sm-form { display: grid; gap: 18px; }
.r3x-sm-form__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 18px; }
.r3x-sm-form label { display: grid; gap: 8px; font: 600 14px/1.2 var(--sm-f-t); color: var(--sm-ink); letter-spacing: .01em; }
.r3x-sm-form input, .r3x-sm-form textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: 0; border-bottom: 2px solid var(--sm-green); border-radius: 3px 3px 0 0; background: var(--sm-cream); color: var(--sm-ink); font: 400 17px/1.4 var(--sm-f-t); }
.r3x-sm-form textarea { min-height: 128px; resize: vertical; }
.r3x-sm-form ::placeholder { color: #5E5F4C; opacity: 1; }
.r3x-sm-form input:focus-visible, .r3x-sm-form textarea:focus-visible { outline: 3px solid var(--sm-green); outline-offset: 2px; }
.r3x-sm-form .r3x-sm-btn { justify-self: start; }
.r3x-sm-form__result { min-height: 1.6em; color: var(--sm-green); font-weight: 600; }
@media (max-width: 520px) { .r3x-sm-form__pair { grid-template-columns: minmax(0, 1fr); } .r3x-sm-form .r3x-sm-btn { justify-self: stretch; } }

/* ------------------------------------------------------------------ 14 FOOTER: pale wheat -> sage -> forest */
.r3x-sm-foot { --c: var(--sm-green); background: var(--sm-bl-foot) top / 100% var(--sm-fade) no-repeat, var(--sm-green); color: var(--sm-cream); --sm-focus: var(--sm-wheat); padding-bottom: clamp(44px, 5vw, 72px); }
.r3x-sm-foot__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px clamp(24px, 5vw, 96px); align-items: start; }
.r3x-sm-foot .r3x-sm-mark { display: inline-block; font-size: clamp(2.6rem, 5vw, 4.6rem); }
.r3x-sm-foot__sig p { margin-top: 18px; color: #E3DCC6; }
.r3x-sm-foot .r3x-sm-kick { color: var(--sm-wheat); }
.r3x-sm-foot nav { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 6px; }
.r3x-sm-foot nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 clamp(1.1rem, .5vw + .95rem, 1.3rem)/1.2 var(--sm-f-t); text-decoration: none; }
.r3x-sm-foot nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.r3x-sm-foot__note { font-size: .8125rem; line-height: 1.6; color: #D6CFB8; max-width: 46em; }

/* ------------------------------------------------------------------ 15 THE PACKAGE NOTE (ZS ink; the ask with its price): forest -> ink */
.r3x-sm-zs { --c: var(--sm-zs); position: relative; background: var(--sm-bl-zs) top / 100% var(--sm-fade) no-repeat, var(--sm-zs); color: #F3F0EA; padding: var(--sm-fade) 0 clamp(48px, 6vw, 88px); }
.r3x-sm-zs__grid { width: min(100% - var(--sm-gutter) * 2, 1480px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px clamp(24px, 8vw, 140px); align-items: start; }
.r3x-sm-zs__kick { font: 600 13px/1.3 var(--sm-f-t); letter-spacing: .14em; text-transform: uppercase; color: #DCBC7E; margin-bottom: 14px; }
.r3x-sm-zs h2 { font: 500 clamp(2rem, 1.6vw + 1.3rem, 3.2rem)/1.05 var(--sm-f-d); letter-spacing: -.03em; margin-bottom: 16px; }
.r3x-sm-zs__lead p:last-child { color: #CFCDC6; max-width: 34em; }
.r3x-sm-zs__tier { display: flex; margin-bottom: 14px; }
.r3x-sm-zs__bar { display: inline-grid; grid-auto-flow: column; gap: 3px; }
.r3x-sm-zs__bar i { width: 15px; height: 4px; border-radius: 2px; background: rgba(243, 240, 234, .22); }
.r3x-sm-zs__bar i:first-child { background: #D8D2C6; }
.r3x-sm-zs__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.r3x-sm-zs__n { font: 600 clamp(2rem, 1.6rem + 1.2vw, 2.75rem)/1 var(--sm-f-s); letter-spacing: -.02em; font-variant-numeric: lining-nums proportional-nums; white-space: nowrap; }
.r3x-sm-zs__u { font: 400 .875rem/1.3 var(--sm-f-t); color: #CFCDC6; }
.r3x-sm-zs__facts { margin-top: 16px; color: #CFCDC6; }
.r3x-sm-zs__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; margin-top: 22px; }
.r3x-sm-zs__links a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: #F3F0EA; font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(243, 240, 234, .45); }
.r3x-sm-zs__links a:hover { text-decoration-color: currentColor; }
.r3x-sm-zs__links a:focus-visible { outline-color: #F3F0EA; }
.r3x-sm-zs .r3x-sm-zs__cta { min-height: 54px; padding: 0 26px; border-radius: 999px; background: #F3F0EA; color: #0C0C0F; font-weight: 600; text-decoration: none; margin-right: 6px; }
.r3x-sm-zs .r3x-sm-zs__cta:hover { background: #fff; }
@media (max-width: 420px) { .r3x-sm-zs .r3x-sm-zs__cta { width: 100%; justify-content: center; margin-right: 0; } }
@media (max-width: 360px) { .r3x-sm-zs .r3x-sm-zs__cta { padding: 0 16px; white-space: nowrap; font-size: min(.94rem, 15.04px); } }   /* b6 fix65: the label needs ~226 px and keeps one line at 300-360 px */

/* ------------------------------------------------------------------ 16 reveals (hang on html.lib-on; composed page without it; 2.5 s failsafe) */
.lib-on .r3x-sm-rise { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--sm-e) calc(var(--i, 0) * 70ms), transform .7s var(--sm-e) calc(var(--i, 0) * 70ms); }
.lib-on .r3x-sm-rise.is-in { opacity: 1; transform: none; }
.lib-on:not(.r3x-sm-ready) .r3x-sm-rise { animation: r3x-sm-show 0s 2.5s forwards; }
.lib-on .r3x-sm-h2--big .r3x-sm-line > span { transform: translateY(108%); transition: transform .95s var(--sm-e-quart) calc(var(--i, 0) * .1s); }
.lib-on .r3x-sm-h2--big.is-in .r3x-sm-line > span { transform: none; }
.lib-on:not(.r3x-sm-ready) .r3x-sm-h2--big .r3x-sm-line > span { animation: r3x-sm-show 0s 2.5s forwards; }

/* 560-699 px portrait: a wider stage for the stacked phone layout (the WIDE block below overrides it in a short landscape window) */
@media (min-width: 560px) and (max-width: 699px) {
  .r3x-sm-poster__ph { aspect-ratio: 4 / 3; }
  .r3x-sm-h1 { font-size: clamp(3.4rem, 10.6vw, 4.6rem); }
}

/* ------------------------------------------------------------------ 17 WIDE: two columns from 700 px AND in every short landscape window (phones turned sideways).
   Root cause of the old +33 percent at 768x1024 and +20 percent at 844x390: the old rules stacked everything below 900 px wide and used the portrait phone stage for every portrait window. */
@media (min-width: 700px), (max-height: 520px) and (min-aspect-ratio: 5 / 4) {
  .r3x-sm-poster { padding: clamp(10px, 3vh, 30px) 0 clamp(40px, 7vh, 80px); }
  .r3x-sm-poster__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--sm-pgap); align-items: center; gap: 0 var(--sm-pgap); }
  .r3x-sm-poster__plate { grid-column: 1; grid-row: 1; margin: 0; width: min(100%, max(200px, calc((100 * var(--sm-vh) - var(--sm-bar) - var(--sm-head) - clamp(30px, 11vh, 96px)) * .8))); }
  .r3x-sm-poster__copy { grid-column: 2; grid-row: 1; }
  .r3x-sm-poster__plate::before, .r3x-sm-poster__ph { border-radius: clamp(90px, 15vw, 220px) 6px 6px 6px; }
  .r3x-sm-poster__plate::before { transform: translate(-16px, 16px); }
  .r3x-sm-poster__ph { aspect-ratio: 4 / 5; }
  .r3x-sm-poster__ph img { object-position: 50% 50%; }
  .r3x-sm-h1 { font-size: min(7.2vw, 13.5 * var(--sm-vh), 7.6rem); }
  .r3x-sm-stamp { --sm-rot: -7deg; left: auto; right: calc(var(--sm-pgap) / -2 - 4px); bottom: 12%; width: clamp(92px, 8.2vw, 124px); aspect-ratio: 1; display: grid; place-items: center; padding: clamp(8px, .8vw, 14px); text-align: center; border-radius: 50%; white-space: normal; font-size: clamp(13px, .98vw, 16px); line-height: 1.12; }
  .r3x-sm-faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 96px); }
  .r3x-sm-idx { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4.4vw, 84px); align-items: stretch; }
  .r3x-sm-idx__pane { order: 0; aspect-ratio: auto; min-height: clamp(250px, 30vw, 360px); }
  .r3x-sm-note .r3x-sm-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 5vw, 96px); align-items: start; }
  .r3x-sm-note .r3x-sm-kick { grid-column: 1 / -1; }
  .r3x-sm-visit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(20px, 5vw, 96px); align-items: start; }
  .r3x-sm-letter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); }
  .r3x-sm-foot__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .r3x-sm-foot__note { grid-column: 1 / -1; }
  .r3x-sm-zs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html:not(.js) .r3x-sm-idx__pane { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ 18 landscape and short windows */
@media (max-height: 520px) and (min-aspect-ratio: 5 / 4) {
  .r3x-sm-poster { padding: 8px 0 28px; }
  .r3x-sm-h1 { font-size: min(7.4vw, 15 * var(--sm-vh)); }
  .r3x-sm-poster__top { gap: 4px; }
  .r3x-sm-poster .r3x-sm-kick { display: none; }
  .r3x-sm-lead, .r3x-sm-hours__more { display: none; }
  .r3x-sm-poster__copy, .r3x-sm-poster__foot { gap: 12px; }
  .r3x-sm-hours__t { display: flex; } .r3x-sm-hours__dot { display: inline; }
  .r3x-sm-hours a { display: inline-flex; align-items: center; min-height: 44px; }   /* b6 fix65: the hero hours link is a 44 px target in landscape */
  .r3x-sm-stamp { display: none; }
  .r3x-sm-poster__plate::before { transform: translate(-10px, 10px); }
  /* the plate is height-limited here, so the pair is centred instead of leaving a void between a narrow plate and a far-away headline */
  .r3x-sm-poster__grid { grid-template-columns: auto minmax(0, max-content); justify-content: center; column-gap: clamp(28px, 7vw, 72px); }
}
@media (min-width: 900px) and (max-height: 700px) {
  .r3x-sm-lead { font-size: 1rem; }
  .r3x-sm-poster__foot { gap: 10px; }
}
@media (min-width: 1800px) {
  .r3x-sm-lead { font-size: clamp(1.3rem, .8vw + .2rem, 1.85rem); }
  .r3x-sm-btn { min-height: 64px; padding: 0 36px; font-size: 20px; }
  .r3x-sm-poster .r3x-sm-kick { font-size: 14px; }
  .r3x-sm-hours__t { font-size: 18px; } .r3x-sm-hours__more { font-size: 16px; }
  .r3x-sm-head nav a { font-size: 18px; }
}
/* ------------------------------------------------------------------ 19 reduced motion / no motion: the composed rest state */
.no-motion .r3x-sm-rise, .no-motion .r3x-sm-line > span, .no-motion .r3x-sm-poster__foot > *, .no-motion .r3x-sm-poster .r3x-sm-kick, .no-motion .r3x-sm-stamp, .no-motion .r3x-sm-poster__ph img { opacity: 1 !important; animation: none !important; transition: none !important; }
.no-motion .r3x-sm-rise, .no-motion .r3x-sm-line > span, .no-motion .r3x-sm-poster__foot > *, .no-motion .r3x-sm-poster .r3x-sm-kick, .no-motion .r3x-sm-poster__ph img { transform: none !important; }
.no-motion .r3x-sm-stamp { transform: rotate(var(--sm-rot)) !important; }
.no-motion .r3x-sm-row, .no-motion .r3x-sm-row__w, .no-motion .r3x-sm-row__n, .no-motion .r3x-sm-row__d, .no-motion .r3x-sm-idx__pane img, .no-motion .r3x-sm-btn, .no-motion .r3x-sm-plus::before, .no-motion .r3x-sm-plus::after, .no-motion .r3x-sm-sw, .no-motion .r3x-sm-sw i { transition: none !important; }
.no-motion .r3x-sm-idx__pane img { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .r3x-sm-rise, .r3x-sm-line > span, .r3x-sm-poster__foot > *, .r3x-sm-poster .r3x-sm-kick, .r3x-sm-poster__ph img { opacity: 1 !important; animation: none !important; transition: none !important; transform: none !important; }
  .r3x-sm-stamp { animation: none !important; opacity: 1 !important; }
  .r3x-sm-row, .r3x-sm-row__w, .r3x-sm-row__n, .r3x-sm-row__d, .r3x-sm-idx__pane img, .r3x-sm-btn, .r3x-sm-sw, .r3x-sm-sw i { transition: none !important; }
}

/* 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 fix1 TYP-08 */
@media (max-width: 1099px) { .r3x-sm-bar { font-size: 14px; } }

/* b6 fix32 TYP-08 Smula one-row bar */
@media (min-width: 42.5em) and (max-width: 700px) { .r3x-sm-bar { gap: 0 12px; } .r3x-sm-bar a, .r3x-sm-bar__who { white-space: nowrap; } }

/* b6 fix65 menu rows */
/* b6 fix65 menu rows: on small phones the price sits under the title (a 'Bryggkaffe' beside its price was cut at 150-200 % text) */
.r3x-sm-idx__rows { container-type: inline-size; }
@container (max-width: 14rem) { .r3x-sm-row { grid-template-columns: clamp(34px, 3.2vw, 52px) minmax(0, 1fr); } .r3x-sm-row__p { grid-column: 2; justify-self: start; } .r3x-sm-row__w { font-size: min(clamp(1.5rem, 1.5vw + .95rem, 2.5rem), calc((100vw - 15px - 2 * var(--sm-gutter) - 2 * clamp(10px, 1.4vw, 22px) - 42px) / 5.6)); } }

/* b6 fix76 bar axis */
/* b6 fix76 the demo bar sits on the header's page axis from 1024 px (below it the gutter is the one all six bars share, MN-03) */
@media (min-width: 1024px) { .r3x-sm-bar { padding-inline: max(var(--sm-gutter), calc((100% - 1480px) / 2)); } }

/* b6 fix87 smula */
/* b6 fix87 smula */
@media (max-height: 520px) and (min-aspect-ratio: 5 / 4) { .r3x-sm-bar { gap: 0 12px; } .r3x-sm-bar a, .r3x-sm-bar__who { white-space: nowrap; } }
@media (min-width: 600px) and (max-height: 520px) and (min-aspect-ratio: 5 / 4) { .r3x-sm-zs__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .r3x-sm-zs .r3x-sm-zs__cta { display: block; text-align: center; white-space: normal; max-width: 100%; margin-right: 0; padding: 12px min(26px, calc((100% - 240px) / 2)); line-height: 1.3; min-height: 54px; } .r3x-sm-zs .r3x-sm-zs__cta .r3x-sm-nb { white-space: nowrap; } }
@media (max-width: 599px) and (max-height: 520px) and (min-aspect-ratio: 5 / 4) { .r3x-sm-zs__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 480px) { .r3x-sm-foot .r3x-sm-mark { font-size: min(clamp(2.6rem, 5vw, 4.6rem), 12.5vw); } }
.skip-link:focus { max-width: calc(100vw - 24px); }

/* b6 fix95 smula */
/* b6 fix95 smula: label and arrow of the aside links live in one inline span (the last word and the arrow never separate); the arrow's margin is the old flex gap (.4 em), so the 100 % widths are unchanged; the landscape phone bar is 13 px below 600 px (14 px squeezed the pause switch over 'Vad ingar?' at 568x320) */
.r3x-sm-zs__links a .r3x-sm-nb { white-space: nowrap; }
.r3x-sm-zs__links a .r3x-sm-arr { margin-left: .4em; }
.r3x-sm-zs .r3x-sm-zs__cta .r3x-sm-zs__t { text-align: center; }
@media (max-width: 599px) and (max-height: 520px) and (min-aspect-ratio: 5 / 4) { .r3x-sm-bar { font-size: 13px; } }

/* b6 fix95 smula copy */
/* the small print follows the text size (15 px at 100 %) */
.r3x-sm-small { font-size: .9375rem; }

/* b6 fix95 smula bar and cta */
/* b6 fix95: landscape windows up to 560 px wide get the two-row bar (the pause switch covered 'Vad ingar?'); the aside CTA keeps one line from 421 to 739 px (700-715 px windows wrapped it); small labels and kickers follow the text size (13/14 px at 100 %) */
@media (max-width: 560px) and (max-height: 520px) and (min-aspect-ratio: 5 / 4) { .r3x-sm-bar { display: grid; min-height: 96px; font-size: 14px; } .r3x-sm-bar__who { margin: 0; text-align: right; } }
@media (min-width: 421px) and (max-width: 739px) { .r3x-sm-zs .r3x-sm-zs__cta { margin-right: 0; padding-inline: min(26px, calc((100% - 240px) / 2)); } }
.r3x-sm-form label { font-size: .875rem; }
.r3x-sm-kick, .r3x-sm-zs__kick { font-size: .8125rem; }

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