/* ZS R3 stream XA: Studio Alina (Starter beauty example), LC-R3. ZS's own code. Owner: builder XA. Prefix: xa-*.
   The page is a CLIENT site: it keeps its own rose / cream palette in both ZS themes, loads NO foundation file (r3-tokens.css, r3-core.js) and none of the
   legacy example stylesheets (examples.css, motion.css, closure.css ...). Everything it needs is in this file.
   Grammar (BRIEF section j, XA): one calm tall sheet on a centred axis; arch masks (the mirror of its own photograph); a ruled ledger of treatments.
   Library patterns rebuilt here (specs in evidence/r3/study/<stream>/specs.json):
     W-60  ruled ledger rows instead of cards             -> .xa-ledger / .xa-row  (right-hung figure, two-column rows on phones)
     G-123 figure typesetting (lining numeral + small unit + duration label) -> .xa-price
     W-97  fade-out teaser, the booking button sits ON the fade -> .xa-wall (two arch photographs fading into the paper, .xa-wall__ask)
     G-24  headline + arched photograph on one centred axis -> .xa-hero (fix round 2: the headline is ONE poster-size line above the arch;
           the arch has a complete, clean base inside an even pale mat; copy left, tags right of the arch)
   Fix round 2 (panel 3, F-46 / F-39 / F-33 / F-34): bigger headline, clean arch base, map graphic and one arch photograph dropped, plain footer
   (the giant business-name wordmark G-58 and the abstract location plate W-93 are gone; the location is a plain card), the motion button keeps one name.
   ONE signature move (Starter restraint): the hero photograph settles (1.035 -> 1, transform only, never opacity 0). Everything else is a quiet 14 px rise.
   Order: 0 fonts, 1 tokens, 2 base, 3 ZS wrapper (demo bar, package note, dialog), 4 header, 5 buttons, 6 type, 7 hero, 8 ledger, 9 statement + faq,
          10 contact (wall, location card, letter), 11 footer, 12 motion, 13 reduced motion (last on purpose). */

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

/* ================================ 1. TOKENS ================================ */
:root {
  --xa-paper: #FCF7F1;                 /* the sheet */
  --xa-blush: #F5E8E4;                 /* the quiet second tone */
  --xa-plum: #3A1F2C;                  /* the sign-off plane */
  --xa-rose: #4B2837;                  /* the deep plane in the middle of the page (Vår lilla filosofi): heading 11.1 : 1, text 9.5 : 1, label 7.9 : 1 */
  --xa-ink: #3F2230;                   /* 13.3 : 1 on paper, 11.8 on blush */
  --xa-muted: #624B56;                 /* 7.4 : 1 paper, 6.6 blush */
  --xa-accent: #71364E;                /* button, numerals: 8.4 paper, 7.5 blush; button label 8.5 */
  --xa-soft: #8E4660;                  /* the second clause of the headline, whispers: 6.2 paper, 5.5 blush */
  --xa-line: #DDBFC4;                  /* rules INSIDE content only (ledger, faq) */
  --xa-serif: "Cormorant Garamond", "XA Serif Fallback", Georgia, serif;
  --xa-sans: "Inter", "XA Sans Fallback", system-ui, sans-serif;
  --xa-gut: clamp(20px, 5.2vw, 72px);
  --xa-fade: 96px;                      /* tone blend length: phone 96, >= 768 120, >= 1100 140 (BRIEF tone rule) */
  --xa-ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 768px) { :root { --xa-fade: 120px; } }
@media (min-width: 1100px) { :root { --xa-fade: 140px; } }

/* ================================ 2. BASE ================================ */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--xa-paper); color: var(--xa-ink); font: 400 1.0625rem/1.6 var(--xa-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, ol { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--xa-accent); outline-offset: 3px; }
.xa-plane--plum :focus-visible, .xa-zs :focus-visible, .demo-bar :focus-visible { outline-color: #FCF7F1; }
.skip-link { position: absolute; left: 12px; top: -80px; transform: translateY(-100%); z-index: 50; padding: 12px 18px; background: var(--xa-ink); color: #FCF7F1; border-radius: 999px; font: 500 15px/1 var(--xa-sans); text-decoration: none; }
.skip-link:focus { top: 12px; transform: none; }
.xa-wrap { width: 100%; max-width: calc(1040px + 2 * var(--xa-gut)); margin-inline: auto; padding-inline: var(--xa-gut); }
.xa-wrap--narrow { max-width: calc(780px + 2 * var(--xa-gut)); }
.xa-center { text-align: center; }

/* ================================ 3. ZS WRAPPER: demo bar, package note, booking dialog ================================ */
/* the slim ink bar and the note are ZS speaking (ink, cream, gold), not the salon: the example ends where the note begins */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 22px; padding: 4px max(20px, min(5vw, 72px)); background: #0C0C0F; color: #F3F0EA; font: 500 13px/1.3 var(--xa-sans); }
.demo-bar a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.demo-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo-bar b { color: #DCBC7E; font-weight: 600; }
.demo-fiction { font-weight: 500; }                                /* b6 TYP-08: one weight for the bar family (the tier name is the 600 one) */
.demo-bar > button { margin-left: auto; }
.demo-bar > button[hidden] { display: none; }
/* b6 BTN-11 / MA-04: the motion control is the SHARED zs-mo switch of the other five examples (constant label "Pausa rörelse", the state drawn as a switch, whole pill >= 44 x 44,
   disabled with title "Minskad rörelse" under the system setting), replacing the older text-state pill ("Pausa rörelse: på" / "Minskad rörelse", dashed ring) */
.zs-mo { --mo-fg: #F3F0EA; --mo-ink: #0C0C0F; --mo-gold: #DCBC7E;
  display: inline-flex; align-items: center; gap: 11px; min-height: 44px; min-width: 44px; padding: 0 14px 0 16px; margin: 0; font: inherit; line-height: 1.2; color: inherit; white-space: nowrap; cursor: pointer;
  background: transparent; border: 1px solid rgba(243, 240, 234, .38); border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.zs-mo:hover { background: rgba(243, 240, 234, .1); }
.zs-mo[aria-pressed="true"] { background: rgba(243, 240, 234, .12); border-color: rgba(243, 240, 234, .62); }
.zs-mo:disabled { opacity: .72; cursor: default; }
.zs-mo[hidden] { display: none; }
.zs-mo:focus-visible { outline: 3px solid var(--mo-fg); outline-offset: 0; }
.zs-mo__sw { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; border: 1.5px solid rgba(243, 240, 234, .66); background: transparent; transition: background-color .2s, border-color .2s; }
.zs-mo__sw i { position: absolute; top: 50%; left: 2.5px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--mo-fg); transition: transform .22s cubic-bezier(.25, .46, .45, .94), background-color .2s; }
.zs-mo[aria-pressed="true"] .zs-mo__sw { background: var(--mo-gold); border-color: var(--mo-gold); }
.zs-mo[aria-pressed="true"] .zs-mo__sw i { transform: translateX(14px); background: var(--mo-ink); }
.no-motion .zs-mo__sw, .no-motion .zs-mo__sw i { transition: none; }
@media (prefers-reduced-motion: reduce) { .zs-mo__sw, .zs-mo__sw i { transition: none; } }
.demo-bar > a:last-child { margin-left: auto; }
.demo-bar > button:not([hidden]) ~ a:last-child { margin-left: 0; }
/* phones and tablets: 14 px (was 12.5 on phones, 13 on tablets), on phones two tidy rows: [back | disclosure] / [motion button | what is included]; the button keeps its 44 px hit area */
@media (max-width: 1099px) { .demo-bar { font-size: 14px; } }
@media (max-width: 760px) { .demo-bar { gap: 0 16px; } .demo-bar > span { margin-left: auto; } .demo-bar > button { margin-left: 0; } }
@media (max-width: 359px) { .demo-bar { gap: 0 10px; font-size: 13.5px; } }

.xa-zs { --xa-from: #3A1F2C; --xa-bg: #0C0C0F; display: grid; gap: 34px 64px; padding: calc(var(--xa-fade) + 8px) max(var(--xa-gut), calc((100% - 1480px) / 2)) 56px; color: #F4F1EB; font: 400 15px/1.65 var(--xa-sans); }
.xa-zs h2 { font: 600 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1.12 var(--xa-sans); letter-spacing: -.02em; margin: 6px 0 14px; }
.xa-zs p { color: #D8D4CC; }
.xa-zs__eyebrow { color: #DCBC7E !important; font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.xa-zs__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em; margin: 0 0 12px; font: 600 clamp(2rem, 1.6rem + 1.2vw, 2.75rem)/1 var(--xa-serif); letter-spacing: -.02em; color: #F4F1EB !important; font-variant-numeric: lining-nums; }
.xa-zs__price span { font: 500 15px/1.3 var(--xa-sans); letter-spacing: 0; color: #D8D4CC; }
.xa-zs__link { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 22px 0 0; color: #F4F1EB; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(244, 241, 235, .4); }
.xa-zs__link:hover { border-bottom-color: #DCBC7E; }
/* the one solid ask of the ZS note (ZS ink / cream, not the salon's rose): audit "no primary button" */
.xa-zs__cta { min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: #F4F1EB; color: #0C0C0F; margin-right: 18px; }
.xa-zs__cta:hover { background: #FFFFFF; }
.xa-zs__link span { display: inline-block; margin-left: .38em; }
@media (max-width: 380px) { .xa-zs__cta { display: inline-block; padding: 14px 24px; line-height: 1.3; text-align: center; border-radius: 28px; } }
@media (min-width: 860px) { .xa-zs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; background: var(--xa-paper); color: var(--xa-ink); box-shadow: 0 40px 80px -20px rgba(30, 14, 22, .5); }
dialog::backdrop { background: rgba(38, 18, 28, .62); }
dialog > div { padding: clamp(26px, 5vw, 46px); }
dialog h2 { font: 400 clamp(1.9rem, 1.4rem + 2vw, 2.6rem)/1.1 var(--xa-serif); letter-spacing: -.01em; margin: 10px 0 16px; text-wrap: balance; }
dialog h2:focus { outline: 0; }   /* b6 fix65: the heading takes focus when the dialog opens (not a control) */
dialog p { color: var(--xa-muted); margin-bottom: 14px; }
dialog .xa-label { margin: 0; }
dialog .xa-btn { margin-top: 12px; }
.xa-link { display: block; margin: 16px 0 0; padding: 10px 0; border: 0; background: none; color: var(--xa-accent); font: 600 16px/1.2 var(--xa-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ================================ 4. HEADER ================================ */
.xa-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: calc(1480px + 2 * var(--xa-gut)); margin-inline: auto; padding: 14px var(--xa-gut); position: relative; z-index: 5; }
.xa-mark { font: 600 clamp(1.75rem, 1.5rem + .7vw, 2.15rem)/1 var(--xa-serif); letter-spacing: -.012em; color: var(--xa-ink); text-decoration: none; padding: 8px 0; }
.xa-head nav { display: flex; gap: 2px 8px; }
.xa-head nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 500 15px/1 var(--xa-sans); color: var(--xa-ink); text-decoration: none; border-radius: 999px; }
@media (hover: hover) { .xa-head nav a:hover { background: var(--xa-blush); } }
.xa-head nav a:last-child { margin-right: -12px; }
.xa-mark, .xa-head nav a { white-space: nowrap; }
/* 360-399 px phones: the header measured 331 px of content in 320 px (8 px of horizontal overflow at 360): tighter link padding, and the wrap starts below 355 */
@media (max-width: 399px) { .xa-head { gap: 10px; } .xa-head nav { gap: 2px 6px; } .xa-head nav a { padding: 0 8px; } .xa-head nav a:last-child { margin-right: -8px; } }
@media (max-width: 354px) { .xa-head { flex-wrap: wrap; row-gap: 0; } .xa-head nav { width: 100%; margin-top: -4px; } .xa-head nav a { padding: 0 10px 0 0; margin: 0 6px 0 0 !important; } }

/* ================================ 5. BUTTONS (Starter: one rose pill, arrow nudge, no label roll) ================================ */
.xa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 56px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--xa-accent); color: #FFF8F2; font: 600 16px/1.2 var(--xa-sans); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .25s ease; }
.xa-btn span { display: inline-block; transition: transform .22s ease; }
@media (hover: hover) { .xa-btn:hover { background: #5C2A40; } .xa-btn:hover span { transform: translate(2px, -2px); } }
.xa-btn--quiet { background: transparent; color: var(--xa-accent); box-shadow: inset 0 0 0 1.5px var(--xa-accent); }
@media (hover: hover) { .xa-btn--quiet:hover { background: var(--xa-accent); color: #FFF8F2; } }
.xa-btn[disabled] { opacity: .55; cursor: default; }
@media (max-width: 380px) { .xa-btn { padding: 0 22px; } }

/* ================================ 6. TYPE ================================ */
.xa-label { font: 600 1.25rem/1.2 var(--xa-serif); color: var(--xa-soft); margin: 0 0 14px; }
.xa-h2 { font: 400 clamp(2.55rem, 1.45rem + 3.5vw, 4.1rem)/1.04 var(--xa-serif); letter-spacing: -.018em; text-wrap: balance; }
.xa-h2--s { font-size: clamp(2.3rem, 1.5rem + 2.8vw, 3.4rem); }
.xa-h3 { font: 400 clamp(2rem, 1.5rem + 1.8vw, 2.9rem)/1.08 var(--xa-serif); letter-spacing: -.012em; }
.xa-lead { font: 400 1.125rem/1.62 var(--xa-sans); color: var(--xa-muted); max-width: 33rem; text-wrap: pretty; }
.xa-lead--c { margin: 18px auto 0; }
.xa-note { color: var(--xa-muted); margin-top: 14px; max-width: 28rem; }

/* tone planes: a plane blends INTO itself from the tone above across its own top padding (no rule, no stripe, no hard edge); flat colour first */
.xa-plane { --xa-from: var(--xa-paper); background-color: var(--xa-bg); background-image: linear-gradient(to bottom, var(--xa-from) 0, var(--xa-bg) var(--xa-fade)); }
@supports (background: color-mix(in oklab, red, blue)) {
  .xa-plane, .xa-zs { background-image: linear-gradient(to bottom, var(--xa-from) 0,
      color-mix(in oklab, var(--xa-from) 94%, var(--xa-bg)) calc(var(--xa-fade) * .2), color-mix(in oklab, var(--xa-from) 74%, var(--xa-bg)) calc(var(--xa-fade) * .4),
      color-mix(in oklab, var(--xa-from) 26%, var(--xa-bg)) calc(var(--xa-fade) * .6), color-mix(in oklab, var(--xa-from) 6%, var(--xa-bg)) calc(var(--xa-fade) * .8), var(--xa-bg) var(--xa-fade)); }
}
.xa-zs { background-color: var(--xa-bg); background-image: linear-gradient(to bottom, var(--xa-from) 0, var(--xa-bg) var(--xa-fade)); }
.xa-plane--blush { --xa-bg: var(--xa-blush); }
.xa-plane--paper { --xa-bg: var(--xa-paper); --xa-from: var(--xa-blush); }
.xa-plane--plum { --xa-bg: var(--xa-plum); --xa-from: var(--xa-blush); }
/* paper -> plum is a big step: it goes through a warm rose bloom instead of a grey mid-tone (BIBLE c, seam rule 2) */
.xa-plane--plum { background-image: linear-gradient(to bottom, var(--xa-from) 0, #ECD6D6 calc(var(--xa-fade) * .2), #B58593 calc(var(--xa-fade) * .46), #6C4155 calc(var(--xa-fade) * .74), var(--xa-bg) var(--xa-fade)); }
@supports (background: linear-gradient(in oklab to bottom, red, blue)) {
  .xa-plane--plum { background-image: linear-gradient(in oklab to bottom, var(--xa-from) 0, #ECD6D6 calc(var(--xa-fade) * .2), #B58593 calc(var(--xa-fade) * .46), #6C4155 calc(var(--xa-fade) * .74), var(--xa-bg) var(--xa-fade)); }
}
.xa-plane--deep { --xa-bg: var(--xa-rose); --xa-from: var(--xa-paper); background-image: linear-gradient(to bottom, var(--xa-from) 0, #ECD6D6 calc(var(--xa-fade) * .2), #B58593 calc(var(--xa-fade) * .46), #6C4155 calc(var(--xa-fade) * .74), var(--xa-bg) var(--xa-fade)); }
@supports (background: linear-gradient(in oklab to bottom, red, blue)) {
  .xa-plane--deep { background-image: linear-gradient(in oklab to bottom, var(--xa-from) 0, #ECD6D6 calc(var(--xa-fade) * .2), #B58593 calc(var(--xa-fade) * .46), #6C4155 calc(var(--xa-fade) * .74), var(--xa-bg) var(--xa-fade)); }
}
/* and back: the rosewood plane hands over to the blush FAQ through the same warm bloom, read bottom-up (no edge, no stripe) */
.xa-plane--after-deep { --xa-from: var(--xa-rose); background-image: linear-gradient(to bottom, var(--xa-from) 0, #6C4155 calc(var(--xa-fade) * .26), #B58593 calc(var(--xa-fade) * .54), #ECD6D6 calc(var(--xa-fade) * .8), var(--xa-bg) var(--xa-fade)); }
@supports (background: linear-gradient(in oklab to bottom, red, blue)) {
  .xa-plane--after-deep { background-image: linear-gradient(in oklab to bottom, var(--xa-from) 0, #6C4155 calc(var(--xa-fade) * .26), #B58593 calc(var(--xa-fade) * .54), #ECD6D6 calc(var(--xa-fade) * .8), var(--xa-bg) var(--xa-fade)); }
}
.xa-plane--tail { background-image: none; }          /* a second section on the same tone: no blend */
.xa-sec { padding: clamp(44px, 6vw, 84px) 0; }
.xa-plane.xa-sec { padding-top: calc(var(--xa-fade) + clamp(0px, 2vw, 16px)); }
.xa-plane--tail.xa-sec { padding-top: clamp(20px, 3vw, 40px); }
.xa-plane--after-deep.xa-sec { padding-top: calc(var(--xa-fade) - 8px); }
.xa-plane--deep.xa-sec { padding-top: calc(var(--xa-fade) + clamp(0px, .4vw, 4px)); }
.xa-contact.xa-plane--tail.xa-sec { padding-top: clamp(44px, 4.8vw, 64px); }

/* ================================ 7. HERO: a centred axis; the arch of its own photograph ================================ */
/* phones (portrait, < 700): one centred stack in DOM order headline, copy, tags, arch */
.xa-hero { --xa-halo: 22px; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(8px, 3.4vw, 40px) var(--xa-gut) clamp(36px, 7vw, 72px); }
.xa-h1 { font: 400 clamp(3.05rem, 15.2vw, 4.75rem)/1 var(--xa-serif); letter-spacing: -.022em; color: var(--xa-ink); }
.xa-h1__a, .xa-h1__b { display: block; }
.xa-h1__b { color: var(--xa-soft); }
.xa-hero__copy { margin-top: clamp(14px, 3vw, 26px); display: flex; flex-direction: column; align-items: center; }
.xa-hero__copy .xa-btn { margin-top: clamp(20px, 3vw, 26px); }
.xa-tags { margin-top: clamp(12px, 2vw, 20px); font: 400 1.4rem/1.2 var(--xa-serif); color: var(--xa-accent); }   /* accent, not the whisper tone: thin 400 glyphs must measure >= 4.5 : 1 on the rendered pixels */
.xa-hero__fig { margin: calc(clamp(18px, 6vw, 48px) + var(--xa-halo)) 0 0; display: flex; flex-direction: column; align-items: center; }
.xa-arch-w { position: relative; width: var(--xa-aw, min(82vw, 360px)); }
/* the halo: a second, paler arch behind the photograph = an even mat of the same motif; the photograph keeps a complete, clean base (F-46: no fade, no smudge) */
.xa-halo { position: absolute; inset: calc(-1 * var(--xa-halo)); border-radius: 999px 999px calc(var(--xa-halo) + 6px) calc(var(--xa-halo) + 6px); background: #F6E6E2; }
.xa-arch { position: relative; width: 100%; aspect-ratio: 720 / 964; border-radius: 999px 999px 6px 6px; overflow: hidden; background: #E9D6D2; }
.xa-arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.xa-cap { margin-top: calc(var(--xa-halo) + 12px); font: 400 1.45rem/1.2 var(--xa-serif); color: var(--xa-ink); text-align: center; }   /* release QA 2026-10-13: thin serif at 22 px measured 3.7:1 in the pixel QA with the muted tone (nominal 6.6:1); the ink tone (nominal 13.3:1) measures above 4.5 */
/* the source is 720 px wide: the arch is never wider than 360 css px on a 2x screen (and phones / tablets stay under it) so the photograph is never drawn above its own pixels (F-33) */

/* tablets and desktop (>= 700): TWO columns on one left edge, copy left, arch right (panel 4: P4-007 / P4-100 / P4-068 / P4-050).
   The poster headline WRAPS INSIDE the left column on two lines (Din stund. / Helt enkelt.), the lead, the ask and the three services sit under it on the same edge,
   the arch (about 20 percent larger than before at 1440x900) closes the right and its caption is centred directly under it: nothing floats beside the arch any more.
   The text block is centred against the arch; the arch, its mat and its caption stay inside the fold (checked 1100-2560 wide, 620-1440 high).
   --xa-aw: the arch width = what the fold leaves (300 px = demo bar, header, mat, caption, paddings), never wider than the 720 px source on a 1x screen (520) and 360 on a 2x screen. */
:root { --xa-vh: 1svh; }
@supports not (height: 1svh) { :root { --xa-vh: 1vh; } }
@media (min-width: 700px) {
  .xa-hero { --xa-halo: clamp(14px, 1.6vw, 22px); --xa-gap: clamp(28px, 5vw, 96px); --xa-vw: 40vw; --xa-capw: 520px;
    --xa-aw: clamp(240px, min(var(--xa-vw), var(--xa-capw), calc((100 * var(--xa-vh) - 300px) * .747)), var(--xa-capw));
    --xa-col: calc(100vw - 2 * var(--xa-gut) - var(--xa-gap) - var(--xa-aw) - 2 * var(--xa-halo) - 24px);   /* the room the headline has: it is sized to fit it */
    --xa-h1s: min(calc(var(--xa-col) / 4.6), 9.5rem, calc(16.5 * var(--xa-vh)));
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--xa-gap); align-items: start; justify-items: start; text-align: left;
    width: 100%; max-width: calc(1480px + 2 * var(--xa-gut)); margin-inline: auto; padding-top: clamp(6px, 1.6vh, 24px); padding-bottom: clamp(26px, 4.4vh, 56px); }
  .xa-h1 { grid-column: 1; grid-row: 2; font-size: var(--xa-h1s); text-align: left; }
  .xa-h1__a, .xa-h1__b { display: block; }
  .xa-hero__copy { grid-column: 1; grid-row: 3; align-items: flex-start; max-width: 27rem; margin-top: clamp(16px, 2.6vh, 30px); }
  .xa-hero__copy .xa-lead { font-size: 1.1875rem; line-height: 1.58; }
  .xa-tags { grid-column: 1; grid-row: 4; margin: clamp(14px, 2.2vh, 24px) 0 0; font-size: clamp(1.45rem, 1.1rem + .8vw, 2rem); }
  .xa-hero__fig { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: var(--xa-halo); position: relative; }
  .xa-arch-w { width: var(--xa-aw); }
  .xa-cap { margin-top: calc(var(--xa-halo) + 14px); font-size: clamp(1.35rem, 1.1rem + .5vw, 1.7rem); }
}
@media (min-width: 1100px) {
  .xa-hero { --xa-vw: 34vw; min-height: min(calc(100 * var(--xa-vh) - 136px), 920px); }
  .xa-hero__copy { max-width: 31rem; }
  .xa-hero__copy .xa-lead { font-size: clamp(1.1875rem, .86rem + .5vw, 1.4rem); max-width: 31rem; }   /* the lead keeps pace with the poster headline: 21 px at 1440 */
}
@media (min-width: 700px) and (min-resolution: 1.5dppx) { .xa-hero { --xa-capw: 360px; } }

/* landscape phones (667x375, 844x390, 932x430): two columns so the headline, the lead and the ask sit inside the fold; the arch sits to the right */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1099px) {
  .xa-hero { --xa-halo: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(20px, 4vw, 48px); align-items: center; text-align: left; padding: 8px var(--xa-gut) 30px; }
  .xa-h1 { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; text-align: left; font-size: clamp(2.3rem, 7.4vw, 3.7rem); }
  .xa-h1__a, .xa-h1__b { display: block; }
  .xa-hero__copy { grid-column: 1; grid-row: 2; align-self: start; margin-top: 8px; align-items: flex-start; }
  .xa-hero__copy .xa-lead { font-size: .9375rem; line-height: 1.5; max-width: 26rem; }
  .xa-hero__copy .xa-btn { margin-top: 12px; min-height: 48px; padding-inline: 26px; }
  .xa-tags { display: none; }
  .xa-hero__fig { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .xa-arch-w { --xa-aw: min(32vw, calc((100vh - 176px) * .747)); --xa-aw: min(32vw, calc((100svh - 176px) * .747)); width: var(--xa-aw); }
  .xa-cap { font-size: 1.05rem; margin-top: calc(var(--xa-halo) + 4px); }
}

/* ================================ 8. LEDGER (W-60) with figure typesetting (G-123) ================================ */
.xa-ledger-sec { padding: clamp(32px, 3.6vw, 52px) 0 clamp(8px, 2vw, 24px); text-align: center; }
.xa-ledger-sec .xa-wrap { max-width: calc(980px + 2 * var(--xa-gut)); }
.xa-ledger { list-style: none; margin: clamp(28px, 3.6vw, 44px) 0 0; padding: 0; border-top: 1px solid var(--xa-line); text-align: left; }
.xa-row { display: grid; grid-template-columns: min(2.7rem, 43.2px) minmax(0, 1fr); column-gap: 14px; padding: 24px 0 26px; border-bottom: 1px solid var(--xa-line); align-items: start; }
.xa-n { font: 600 1.3rem/1.5 var(--xa-serif); color: var(--xa-accent); font-variant-numeric: lining-nums; padding-top: .28rem; }
.xa-row__copy h3 { font: 400 min(clamp(1.9rem, 1.45rem + 1.6vw, 2.7rem), calc((100vw - 15px - 2 * var(--xa-gut) - 57.2px) / 5.2))/1.08 var(--xa-serif); letter-spacing: -.012em; }
.xa-row__copy p { margin-top: 8px; color: var(--xa-muted); font-size: 1rem; }
.xa-row__meta { grid-column: 2; margin-top: 12px; display: flex; align-items: baseline; gap: 16px; }
.xa-price { display: flex; align-items: baseline; gap: .12em; font: 400 3.4rem/1 var(--xa-serif); font-variant-numeric: lining-nums; letter-spacing: -.02em; color: var(--xa-ink); }
.xa-price__u { font: 500 .3em/1 var(--xa-sans); letter-spacing: .01em; color: var(--xa-muted); }
.xa-dur { font: 500 .9rem/1 var(--xa-sans); color: var(--xa-muted); }
@media (min-width: 760px) {
  .xa-row { grid-template-columns: 4.6rem minmax(0, 1fr) auto; column-gap: 32px; align-items: center; padding: 24px 0 26px; }
  .xa-n { font-size: 1.5rem; padding-top: 0; }
  .xa-row__meta { grid-column: 3; margin: 0; flex-direction: column; align-items: flex-end; gap: 8px; }
  .xa-price { font-size: clamp(3.8rem, 2rem + 3vw, 5rem); }
}

/* ================================ 9. STATEMENT + FAQ (blush plane) ================================ */
/* P4-050 / P4-068: ONE deeper tonal plane in the middle of the page. Vår lilla filosofi sits on rosewood (the page was cream-blush from the top to the footer); the plane is blended in
   from the paper above and out into the blush FAQ below (no edge). A paler arch of the same motif rises behind the words (tone on tone, no line). */
.xa-statement { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-bottom: clamp(26px, 3.4vw, 44px); }
.xa-statement::before { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(var(--xa-fade) * .78); bottom: 0; width: min(660px, 92vw); transform: translateX(-50%); border-radius: 999px 999px 0 0;
  background: rgba(255, 224, 232, .07); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%); }
.xa-plane--deep .xa-label { color: #E6C3CB; }
.xa-plane--deep .xa-h2 { color: #FBEDEE; }
.xa-plane--deep .xa-large { color: #F1D9DD; }
.xa-large { margin: clamp(22px, 3vw, 34px) auto 0; max-width: 34ch; font: 400 clamp(1.55rem, 1.15rem + 1.35vw, 2.25rem)/1.38 var(--xa-serif); color: var(--xa-ink); text-wrap: pretty; }
.xa-faq { text-align: center; padding-bottom: clamp(16px, 2vw, 28px); }
.xa-faq .xa-h2 { margin-bottom: 0; }
.xa-faq__list { margin-top: clamp(24px, 3vw, 38px); border-top: 1px solid #D6B4BB; text-align: left; }
.xa-faq details { border-bottom: 1px solid #D6B4BB; }
.xa-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 12px 2px; cursor: pointer; list-style: none; font: 500 1.125rem/1.4 var(--xa-sans); }
.xa-faq summary::-webkit-details-marker { display: none; }
.xa-faq summary span { flex: none; font: 400 2rem/1 var(--xa-serif); color: var(--xa-accent); transition: transform .35s var(--xa-ease); }
.xa-faq details[open] summary span { transform: rotate(45deg); }
.xa-faq details p { padding: 0 2px 26px; max-width: 62ch; color: var(--xa-muted); }
.xa-faq summary:focus-visible { outline-offset: -2px; }

/* ================================ 10. CONTACT: the wall (W-97), the location card, the letter ================================ */
.xa-contact { padding-bottom: clamp(44px, 5.6vw, 76px); }
.xa-wall { --xa-wa: clamp(104px, 36vw, 280px); --xa-ring: clamp(7px, 1.4vw, 18px); --xa-mat: #EBD5D1; position: relative; margin-top: clamp(22px, 3.4vw, 36px); overflow: hidden; }
/* P4-072 / P4-068 (panel 3 F-46 again): the two arches keep COMPLETE, opaque bases with the same pale ring as the hero arch (one motif, one construction); nothing fades into the page any more
   and the booking button sits UNDER the arches on clean ground. (W-97, the fade-out teaser, is retired for this wall on the panel's request.) */
.xa-wall__row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(26px, 5vw, 64px); padding: var(--xa-ring) var(--xa-gut) 0; }
/* both arches stand on ONE floor (align-items: flex-end, fixed ratios: 3 : 4 and 3 : 3.9 on a wider arch, so the right one rises higher). Widths stay at or under 314 css px (the photographs
   are 640 px wide: never drawn above their own pixels on a 2x screen). The ring is a box-shadow: it follows the arch, costs no layout and keeps the base as clean as the hero's */
.xa-wall__arch { flex: 0 0 auto; width: var(--xa-wa); aspect-ratio: 3 / 4; border-radius: 999px 999px 6px 6px; overflow: hidden; background: #E9D6D2; box-shadow: 0 0 0 var(--xa-ring) var(--xa-mat); }
.xa-wall__arch--2 { width: calc(var(--xa-wa) * 1.12); aspect-ratio: 3 / 3.9; }
.xa-wall__arch img { width: 100%; height: 100%; object-fit: cover; }
.xa-wall__ask { position: relative; z-index: 2; display: flex; justify-content: center; padding: clamp(24px, 2.6vw, 32px) var(--xa-gut) 0; }

.xa-visit { padding-top: clamp(30px, 3.6vw, 46px); }
/* the location is a plain card (the abstract map graphic is gone, F-46): hours | city | the honest note */
.xa-plate__card { display: grid; gap: 18px; padding: 24px 26px 26px; background: #FFFBF7; border-radius: 10px; box-shadow: 0 30px 50px -26px rgba(63, 34, 48, .26), 0 2px 8px rgba(63, 34, 48, .06); }
.xa-plate__card h3 { font: 600 1.25rem/1.2 var(--xa-serif); color: var(--xa-soft); margin: 0 0 4px; }
.xa-hours { font: 400 min(1.5rem, calc((100vw - 15px - 2 * var(--xa-gut) - 52px) / 5.6))/1.25 var(--xa-serif); color: var(--xa-ink); }
.xa-nw { white-space: nowrap; }                      /* a time range never breaks inside "10–14" (it did at 320 px) */
.xa-city { font: 400 1.9rem/1.15 var(--xa-serif); color: var(--xa-ink); }
.xa-small { font-size: min(.9375rem, calc((100vw - 15px - 2 * var(--xa-gut) - 52px) / 8.5)); line-height: 1.55; color: var(--xa-muted); overflow-wrap: break-word; }
@media (min-width: 900px) {
  .xa-plate__card { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(32px, 5vw, 72px); padding: 26px clamp(26px, 4vw, 48px); }   /* b6 fix65: the note drops under the hours when the rem-sized columns do not fit */
  .xa-small { flex: 1 1 16rem; max-width: 34ch; }
}

.xa-letter { margin-top: clamp(32px, 4.4vw, 60px); display: grid; gap: 30px; }
.xa-letter__intro .xa-label { margin-bottom: 10px; }
.xa-form { display: grid; gap: 16px; align-content: start; }
.xa-form__pair { display: grid; gap: 16px; }
.xa-form label { display: grid; gap: 7px; font: 500 .9rem/1.2 var(--xa-sans); color: var(--xa-muted); }
.xa-form input, .xa-form textarea { width: 100%; min-height: 54px; padding: 13px 15px; border: 1px solid #CFAEB5; border-radius: 6px; background: #FFFBF7; color: var(--xa-ink); font: 400 16px/1.4 var(--xa-sans); }
.xa-form textarea { min-height: 112px; resize: vertical; }
.xa-form ::placeholder { color: #725D68; opacity: 1; }
.xa-form input:focus-visible, .xa-form textarea:focus-visible { outline: 2px solid var(--xa-accent); outline-offset: 2px; border-color: var(--xa-accent); }
.xa-form .xa-btn { justify-self: start; }
.form-result { min-height: 1.6em; color: var(--xa-accent); font-weight: 500; }
@media (min-width: 560px) { .xa-form__pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .xa-letter { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); } }

/* ================================ 11. FOOTER (plain, on the plum plane; no ghost word, no giant wordmark: F-39) ================================ */
.xa-foot { padding: calc(var(--xa-fade) + 8px) 0 clamp(26px, 3.4vw, 44px); color: #EBCDD2; }
.xa-foot__grid { display: grid; gap: 26px 40px; max-width: calc(1480px + 2 * var(--xa-gut)); margin-inline: auto; padding-inline: var(--xa-gut); }   /* b6 fix65: the hero axis (1480 px), the same as the header and the ZS note */
.xa-foot__name { font: 400 clamp(2.1rem, 1.6rem + 1.4vw, 2.9rem)/1 var(--xa-serif); letter-spacing: -.012em; color: #F7E6E7; margin-bottom: 8px; }
.xa-foot__tag { font: 400 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.25 var(--xa-serif); color: #E8C9CF; }
.xa-foot__label { font: 600 1.15rem/1.2 var(--xa-serif); color: #D9B0B9; margin-bottom: 6px; }
.xa-foot nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.xa-foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: #FCF7F1; font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; }
.xa-foot nav a:hover { border-bottom-color: #D9B0B9; }
.xa-foot__note { grid-column: 1 / -1; font-size: .8125rem; line-height: 1.6; color: #D9B0B9; max-width: 46em; }   /* b6 DISC-08: the last text row of the footer, as in the other worlds */
@media (min-width: 900px) { .xa-foot__grid { grid-template-columns: 1.3fr .8fr 1.2fr; align-items: start; } }

/* ================================ 12. MOTION (hidden start states hang on html.xa-on only) ================================ */
@keyframes xa-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes xa-settle-img { from { transform: scale(1.04); } }
@keyframes xa-fs { to { opacity: 1; transform: none; } }
.xa-on [data-xa-rise] { animation: xa-rise .9s var(--xa-ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
.xa-on [data-xa-settle] .xa-arch img { animation: xa-settle-img 1.4s var(--xa-ease) both; }   /* the LCP image is painted at once (opacity 1), only its scale settles */
.xa-on [data-xa-settle] .xa-cap { animation: xa-rise .9s var(--xa-ease) .6s both; }
.xa-on [data-xa-in] { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--xa-ease), transform .8s var(--xa-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.xa-on [data-xa-in].is-in { opacity: 1; transform: none; }
.xa-on .xa-wall[data-xa-in] { transform: none; transition: opacity 1s ease; }
.xa-on .xa-wall__arch { transform: translateY(26px); transition: transform 1.2s var(--xa-ease); }
.xa-on .xa-wall.is-in .xa-wall__arch { transform: none; }
.xa-on .xa-wall.is-in .xa-wall__arch--2 { transition-delay: .09s; }
.xa-on .xa-wall.is-in .xa-wall__arch--3 { transition-delay: .18s; }
/* failsafe: if the script never runs (no .xa-ready on <html> after 3 s) everything shows */
.xa-on:not(.xa-ready) [data-xa-in] { animation: xa-fs .01s linear 3s forwards; }

/* ================================ 13. REDUCED MOTION / PAUSED: the composed page (kept last on purpose) ================================ */
.no-motion, .no-motion body { scroll-behavior: auto; }
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 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 HEAD-WRAP */
@media (max-width: 699px) { .xa-head { flex-wrap: wrap; row-gap: 0; } .xa-head nav { flex-wrap: wrap; } }

/* b6 fix1 MN-03 */
@media (max-width: 760px) { .demo-bar > button:not([hidden]) ~ a:last-child { margin-left: auto; } }

/* b6 fix34 MN-03 Alina two rows */
@media (max-width: 639px) {
  .demo-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 12px; }
  .demo-bar > a:first-child { grid-row: 1; grid-column: 1; }
  .demo-bar > span { grid-row: 1; grid-column: 2 / 4; justify-self: end; margin: 0; text-align: right; }
  .demo-bar > button { grid-row: 2; grid-column: 1 / 3; justify-self: start; margin: 0; }
  .demo-bar > a:last-child, .demo-bar > button:not([hidden]) ~ a:last-child { grid-row: 2; grid-column: 3; justify-self: end; margin: 0; }
}

/* b6 fix34c Alina halo */
.xa-hero { overflow-x: clip; }

/* b6 fix65 price ledger */
/* b6 fix65 price ledger: prices and durations never break (the global overflow-wrap:anywhere cut '490' into '49' / '0' at 200 % text) */
.xa-price, .xa-price__n, .xa-price__u, .xa-dur { overflow-wrap: normal; white-space: nowrap; }
.xa-row__meta { flex-wrap: wrap; }
.xa-row__copy h3 { overflow-wrap: break-word; hyphens: auto; }

/* b6 fix79 alina */
/* b6 fix79 alina: from 1024 px the demo bar sits on the header's page axis (as the Smula bar, fix76) */
@media (min-width: 1024px) { .demo-bar { padding-inline: max(var(--xa-gut), calc((100% - 1480px) / 2)); } }
/* the hours: the separator is its own element and goes away when the two ranges stack; below 900 px the hours element is the container (above it the card is a flex row of content-sized columns) */
@media (max-width: 899px) {
  .xa-hours { container-type: inline-size; }
  @container (max-width: 9.59em) { .xa-hours .xa-sep { display: none; } .xa-hours .xa-nw { display: block; } }
}

/* b6 fix87 alina */
/* b6 fix87 alina: the service row heading is also capped by its own column (20 cqw is the column width / 5: 'ansiktsstund' needs 4.76 em) */
.xa-row__copy { container-type: inline-size; }
.xa-row__copy h3 { font-size: min(clamp(1.9rem, 1.45rem + 1.6vw, 2.7rem), calc((100vw - 15px - 2 * var(--xa-gut) - 57.2px) / 5.2), 20cqw); }
.skip-link:focus { max-width: calc(100vw - 24px); }

/* b6 fix93 alina */
/* b6 fix93 alina: the dialog's UA max-width subtracts 2em (68 px at 200 %); the city line of the hours card is capped by the window */
dialog { max-width: calc(100vw - 32px); }
.xa-city { font-size: min(1.9rem, calc((100vw - 15px - 2 * var(--xa-gut) - 52px) / 3.8)); }

/* b6 fix95 alina */
/* b6 fix95 alina: an open FAQ item (its rotated plus) no longer scrolls the page 2 px sideways at 200 % text */
.xa-faq__list { overflow-x: clip; }

/* b6 fix95 alina copy */
/* the aside copy follows the text size (15 px at 100 %) */
.xa-zs { font-size: .9375rem; }

/* b6 fix95 alina price */
/* the price qualifier and the eyebrow of the aside follow the text size (15 / 13 px at 100 %) */
.xa-zs__price span { font-size: .9375rem; }
.xa-zs__eyebrow { font-size: .8125rem; }