/* ==========================================================================
   Stora Djulö Herrgård — design system, direction "Romantiskt, lugnt, genuint"
   1 Tokens · 2 Base · 3 Typography & ornaments · 4 Layout, themes & slabs
   5 Site chrome · 6 Components · 7 Utilities · 8 Motion & print · 9 Just nu
   Same engine and component class names as the Hotel Statt rebuild, so its
   markup (hotel-statt/src/pages/styleguide.html) works here unchanged; the
   Djulö-specific parts are documented on /styleguide/ and in README.md.
   ========================================================================== */

/* 1. TOKENS ============================================================== */
/* Size-matched local stand-ins used while the web fonts load (display=swap)
   or when Google Fonts is blocked, so lines keep roughly the same length. */
@font-face { font-family: "Cormorant Fallback"; src: local("Garamond"), local("Iowan Old Style"), local("Georgia"); size-adjust: 88%; }
@font-face { font-family: "Lato Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 97%; }

:root {
  /* Graphic profile — exact values (client's guide) */
  --skog: #4A5A4D;        /* Djup skogsgrön – primary, filled CTA on light grounds */
  --greige: #D8D2C8;      /* Linne greige – panels */
  --salvia: #A8B5A2;      /* Salvia grön – soft sections */
  --guld: #C2A46D;        /* Mariahs guld – fine rules, CTA on dark green, prices on dark */
  --rosa: #D6B5B0;        /* Dov puderrosa – decoration only (leaves, lines) */
  --brun: #8B6F5A;        /* Varm brun – sparing accent */
  --dimbla: #B7C6CF;      /* Ljus dimblå – sparing accent */
  --linne: #F2EFEA;       /* Ljus linne – the page */
  --grafit: #2F2F2F;      /* Mörk grafit – text */

  /* Tints and shades of the profile colours */
  --skog-deep: #3A473D;   /* evening ground, footer, hover of the green button */
  --skog-night: #2F3A32;  /* top bar above a dark header */
  --skog-soft: #5D6E60;   /* surfaces on green */
  --linne-soft: #F8F6F2;  /* cards on the linne page */
  --greige-soft: #E7E2DA; /* hovers, quiet panels */
  --salvia-soft: #D3DBCF;
  --rosa-soft: #EADDD9;   /* wedding ground (grafit 10:1) */
  --guld-light: #D3B680;  /* gold hover; gold text on the evening ground (5:1) */
  --guld-ink: #75602F;    /* gold that reads as text on linne (5.3:1): prices, numbers */
  --muted: #5B635C;       /* secondary text on linne (5.4:1) */
  --grey: #9AA39B;
  --white: #fff;

  --font-display: "Cormorant Garamond", "Cormorant Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-script: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  --font-body: "Lato", "Lato Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: var(--font-display); /* Cormorant italic accents (kept name from Hotel Statt) */

  --fs-hero: clamp(3.25rem, 12.5vw, 7.25rem);
  --fs-d1: clamp(2.875rem, 7.2vw, 5.75rem);
  --fs-d2: clamp(2.375rem, 4.8vw, 4.25rem);
  --fs-d3: clamp(1.875rem, 3vw, 2.75rem);
  --fs-d4: clamp(1.5rem, 2vw, 1.875rem);
  --fs-d5: 1.5rem;
  --fs-kicker: clamp(1.375rem, 1.9vw, 1.75rem);
  --fs-accent: clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-script: clamp(2rem, 4vw, 3.25rem);
  --fs-lead: clamp(1.125rem, 1.4vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: clamp(.9375rem, .9rem + .15vw, 1rem);
  --fs-label: .8125rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --container: 82.5rem;
  --gap: clamp(1rem, 2.2vw, 1.75rem);
  --section-y: clamp(4.5rem, 10vw, 9.5rem);
  --slab-r: clamp(1.5rem, 4vw, 3.25rem);

  --r-sm: .5rem;
  --r-md: .875rem;
  --r-lg: 1.375rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(47 47 47 / .05), 0 16px 36px -24px rgb(47 47 47 / .35);
  --shadow-lg: 0 34px 70px -38px rgb(58 71 61 / .55);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --topbar-h: 2.5rem;
  --header-h: 4.25rem;
  --actionbar-h: 4.25rem;
}

@media (min-width: 70rem) {
  :root { --header-h: 5rem; }
}

/* Themes: every component reads these, so any block can sit on any ground.
   Djulö names first; the Hotel Statt names stay as aliases so copied markup
   keeps working (ivory = linne, beige = greige, petrol = skog, teal = salvia,
   evening = kvall). --cta-* is the primary button: green on light grounds,
   gold with grafit text on the green grounds (white on gold fails contrast). */
:root,
.theme-linne,
.theme-ivory {
  --bg: var(--linne);
  --fg: var(--grafit);
  --fg-muted: var(--muted);
  --heading: var(--skog);
  --kicker: var(--skog);
  --link: var(--skog);
  --deco: var(--guld);
  --deco-soft: var(--rosa);
  --index: var(--guld-ink);
  --price: var(--guld-ink);
  --rule: rgb(74 90 77 / .18);
  --surface: var(--linne-soft);
  --block: var(--greige);
  --tint: rgb(74 90 77 / .08);
  --focus: var(--skog);
  --cta-bg: var(--skog);
  --cta-fg: var(--linne);
  --cta-hover: var(--skog-deep);
}

.theme-greige,
.theme-beige {
  --bg: var(--greige);
  --fg: var(--grafit);
  --fg-muted: #474E48;
  --heading: var(--skog);
  --kicker: var(--skog);
  --link: var(--skog);
  --deco: var(--guld-ink);
  --deco-soft: var(--linne);
  --index: var(--guld-ink);
  --price: #6A5528;
  --rule: rgb(74 90 77 / .26);
  --surface: var(--linne);
  --block: var(--linne);
  --tint: rgb(74 90 77 / .1);
  --focus: var(--skog);
  --cta-bg: var(--skog);
  --cta-fg: var(--linne);
  --cta-hover: var(--skog-deep);
}

/* Weddings & celebrations: powder pink + linne as the base (graphic profile). */
.theme-rosa {
  --bg: var(--rosa-soft);
  --fg: var(--grafit);
  --fg-muted: #4B524C;
  --heading: var(--skog);
  --kicker: var(--skog);
  --link: var(--skog);
  --deco: var(--guld);
  --deco-soft: var(--rosa);
  --index: var(--guld-ink);
  --price: var(--guld-ink);
  --rule: rgb(74 90 77 / .2);
  --surface: var(--linne-soft);
  --block: var(--rosa);
  --tint: rgb(74 90 77 / .08);
  --focus: var(--skog);
  --cta-bg: var(--skog);
  --cta-fg: var(--linne);
  --cta-hover: var(--skog-deep);
}

.theme-skog,
.theme-petrol,
.site-header.is-menu-open {
  --bg: var(--skog);
  --fg: var(--linne);
  --fg-muted: rgb(242 239 234 / .82);
  --heading: var(--linne);
  --kicker: var(--greige);
  --link: var(--linne);
  --deco: var(--guld);
  --deco-soft: var(--rosa);
  --index: var(--guld-light);
  --price: var(--guld-light);
  --rule: rgb(242 239 234 / .2);
  --surface: var(--skog-soft);
  --block: var(--salvia);
  --tint: rgb(242 239 234 / .12);
  --focus: var(--linne);
  --cta-bg: var(--guld);
  --cta-fg: var(--grafit);
  --cta-hover: var(--guld-light);
}

/* Sage carries dark type: linne on salvia only reaches 1.9:1. */
.theme-salvia,
.theme-teal {
  --bg: var(--salvia);
  --fg: var(--grafit);
  --fg-muted: var(--grafit);
  --heading: var(--skog-deep);
  --kicker: var(--grafit);
  --link: var(--grafit);
  --deco: var(--linne);
  --deco-soft: var(--linne);
  --index: var(--grafit);
  --price: var(--grafit);
  --rule: rgb(47 47 47 / .26);
  --surface: var(--salvia-soft);
  --block: var(--skog);
  --tint: rgb(47 47 47 / .08);
  --focus: var(--grafit);
  --cta-bg: var(--skog-deep);
  --cta-fg: var(--linne);
  --cta-hover: var(--skog-night);
}

/* Kväll: julbord, candlelight and everything after dark (a deep forest green). */
.theme-kvall,
.theme-evening,
.subnav--kvall {
  --bg: var(--skog-deep);
  --fg: var(--linne);
  --fg-muted: rgb(242 239 234 / .8);
  --heading: var(--linne);
  --kicker: var(--guld-light);
  --link: var(--linne);
  --deco: var(--guld);
  --deco-soft: var(--rosa);
  --index: var(--guld-light);
  --price: var(--guld-light);
  --rule: rgb(194 164 109 / .3);
  --surface: #46544A;
  --block: var(--skog);
  --tint: rgb(242 239 234 / .1);
  --focus: var(--linne);
  --cta-bg: var(--guld);
  --cta-fg: var(--grafit);
  --cta-hover: var(--guld-light);
}

[class*="theme-"] {
  background-color: var(--bg);
  color: var(--fg);
}

/* 2. BASE ================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
/* Long pages with the sticky sub-navigation need room for both bars;
   main.js measures them (--header-offset, --subnav-h). */
html:has(.subnav--sticky) { scroll-padding-top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h, 3.5rem) + 1.25rem); }

body {
  margin: 0;
  background: var(--linne);
  color: var(--grafit);
  font: 400 var(--fs-body)/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
iframe { border: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
strong, b { font-weight: 700; }
cite { font-style: italic; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--skog); color: var(--linne); }

.icon { flex: none; width: 1.25em; height: 1.25em; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  border-radius: var(--r-pill);
  background: var(--skog);
  color: var(--linne);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* 3. TYPOGRAPHY & ORNAMENTS ============================================== */
/* Cormorant Garamond in mixed case: the historic, romantic voice. Weights
   500 (large) and 600 (small sizes), normal letter-spacing. */
h1, h2, h3,
.display, .display--1, .display--2, .display--3, .display--4, .display--5 {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.005em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1, .display--1 { font-size: var(--fs-d1); line-height: 1.02; }
h2, .display--2 { font-size: var(--fs-d2); line-height: 1.04; }
h3, .display--3 { font-size: var(--fs-d3); line-height: 1.1; }
.display--4 { font-size: var(--fs-d4); font-weight: 600; line-height: 1.12; letter-spacing: 0; }
.display--5 { font-size: var(--fs-d5); font-weight: 600; line-height: 1.15; letter-spacing: 0; }

h4 {
  color: var(--heading);
  font: 700 1.0625rem/1.35 var(--font-body);
}

/* Eyebrow: the default label above a headline. Lato caps, airy tracking,
   behind a fine gold rule; an optional folio number sits in front as
   ornament. A hanging indent lines wrapped lines up with the text. */
.eyebrow {
  --hang: 2.6rem;
  padding-left: var(--hang);
  color: var(--kicker);
  font: 700 var(--fs-label)/1.4 var(--font-body);
  letter-spacing: .2em;
  text-indent: calc(-1 * var(--hang));
  text-transform: uppercase;
  text-wrap: balance;
}
/* Inline (not flex) so brand-name spans keep their natural word spacing. */
.eyebrow::before,
.eyebrow__folio::after {
  content: "";
  display: inline-block;
  width: 1.85rem;
  height: 1px;
  margin-right: .75rem;
  background: var(--deco);
  vertical-align: .32em;
}
.eyebrow .notranslate { white-space: nowrap; }
.eyebrow:has(.eyebrow__folio) { --hang: 4.4rem; }
.eyebrow:has(.eyebrow__folio)::before { content: none; }
.eyebrow__folio {
  display: inline-block;
  width: var(--hang);
  color: var(--index);
  font: italic 500 1.375rem/1 var(--font-display);
  letter-spacing: .02em;
  text-indent: 0;
  white-space: nowrap;
}
.eyebrow__folio::after { margin-left: .55rem; }
/* Leaf eyebrow: a small sprig instead of the rule. Use on one or two key
   headings per page (start of the page, the closing band) – not everywhere. */
.eyebrow--leaf { --hang: 2.35rem; }
.eyebrow--leaf::before {
  width: 1.6rem;
  height: 1rem;
  margin-right: .75rem;
  background: var(--deco-soft);
  vertical-align: -.2em;
  -webkit-mask: var(--leaf-mask) center / contain no-repeat;
  mask: var(--leaf-mask) center / contain no-repeat;
}
/* Sentence-case lead-in for an eyebrow that is a whole phrase. */
.eyebrow--text { font-size: var(--fs-small); font-weight: 400; letter-spacing: .01em; text-transform: none; }

/* Cormorant italic, used sparingly: section kickers, quotes, menus, notes. */
.kicker {
  color: var(--kicker);
  font: italic 500 var(--fs-kicker)/1.2 var(--font-accent);
  text-wrap: balance;
}

.accent {
  color: var(--heading);
  font: italic 500 var(--fs-accent)/1.18 var(--font-accent);
  text-wrap: balance;
}

/* Great Vibes: the script accent. For a name or two or three words in or
   above a heading (Välkommen till, a couple's names, Den Sköna Lustgården).
   At most one or two per page; never body text, buttons or long phrases.
   Inline it grows a little to sit with Cormorant; .script--line puts it on
   its own line above the heading text. */
.script {
  font-family: var(--font-script);
  font-size: 1.18em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}
.script--line { display: block; margin-bottom: .02em; font-size: .62em; }
/* A free-standing script line (not inside a heading), e.g. a signature or a
   place name beside a photo. */
.script-accent {
  color: var(--heading);
  font: 400 var(--fs-script)/1.1 var(--font-script);
  text-wrap: balance;
}

/* Small caps label in Lato for meta information (no rule). */
.overline {
  color: var(--fg-muted);
  font: 700 var(--fs-label)/1.35 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.6;
  text-wrap: pretty;
}
.lead strong { font-weight: 700; }

.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-small); }

/* Eyebrow + headline + accent, stacked with optical spacing. */
.heading-group { display: grid; gap: .8rem; justify-items: start; }
.heading-group > .accent { margin-top: .1rem; }
.heading-group > .lead { margin-top: .75rem; max-width: 38em; }
.heading-group--center { justify-items: center; text-align: center; }
.heading-group--center .eyebrow { padding-left: 0; text-indent: 0; }
.heading-group--center .eyebrow:not(.eyebrow--leaf)::after { content: ""; display: inline-block; width: 1.85rem; height: 1px; margin-left: .75rem; background: var(--deco); vertical-align: .32em; }
.heading-group--center .eyebrow--leaf::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1rem;
  margin-left: .75rem;
  background: var(--deco-soft);
  vertical-align: -.2em;
  transform: scaleX(-1);
  -webkit-mask: var(--leaf-mask) center / contain no-repeat;
  mask: var(--leaf-mask) center / contain no-repeat;
}

/* Phones: a centred eyebrow often wraps; the side rules would dangle. */
@media (max-width: 39.99rem) {
  .heading-group--center .eyebrow:not(.eyebrow--leaf)::before,
  .heading-group--center .eyebrow:not(.eyebrow--leaf)::after { content: none; }
}

/* Ornaments (decorative, aria-hidden). The leaf sprig is the only drawn
   motif besides the arch; keep it small and rare: a divider between two
   calm sections, under a centred heading, or the leaf eyebrow.
   <div class="ornament" aria-hidden="true"><svg class="ornament__sprig"><use href="#o-sprig"/></svg></div> */
:root {
  --leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M2 12.5h21' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M24 12.5c3.2-5 8.6-7.4 14.2-6.6-2.4 5.4-7.6 8.3-14.2 6.6zM14.5 12c1.2-3.6 4.2-5.6 8-5.6-.9 3.5-3.9 5.6-8 5.6zM14.5 13c1.2 3.6 4.2 5.6 8 5.6-.9-3.5-3.9-5.6-8-5.6zM6.5 12.3c.9-2.6 3.1-4 5.7-4-.6 2.5-2.8 4-5.7 4z'/%3E%3C/svg%3E");
}
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--deco-soft);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 0 1 clamp(3rem, 12vw, 7.5rem);
  height: 1px;
  background: currentColor;
  opacity: .9;
}
.ornament__sprig { flex: none; width: 4.25rem; height: 1.6rem; color: var(--deco); }
.ornament--gold { color: var(--deco); }
.ornament--left { justify-content: flex-start; }
.ornament--left::before { content: none; }
/* Between two sections on the same ground: the next section starts closer. */
.section-divider { padding-block: 0; }
.section-divider + .section { padding-top: calc(var(--section-y) * .55); }
.section:has(+ .section-divider) { padding-bottom: calc(var(--section-y) * .55); }

/* Text link with an arrow: a 44px target with the rule drawn under the label. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: linear-gradient(currentColor 0 0) 0 calc(50% + .85em) / 100% 1px no-repeat transparent;
  color: var(--link);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(.25em); }
.link-arrow--ext:hover .icon { transform: translate(.15em, -.15em); }

.text-link { color: var(--link); font-weight: 700; text-decoration: underline; }
.text-link:hover { text-decoration-thickness: 2px; }

/* 4. LAYOUT, THEMES & SLABS ============================================== */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { --container: 58rem; }

.section { --pad-y: var(--section-y); padding-block: var(--pad-y); }
.section--tight { --pad-y: calc(var(--section-y) * .6); }
.section--join { padding-top: 0; }

/* Slab: a full-bleed colour ground with rounded shoulders. The linne page
   rises into its lower edge with the same radius, so the slab must be
   followed by a linne section. --open-top drops the upper shoulders
   (a hero under a header of the same colour). Djulö uses few slabs: prefer
   light grounds and photography, one coloured block per screen at most. */
.slab {
  position: relative;
  border-radius: var(--slab-r) var(--slab-r) 0 0;
  padding-bottom: calc(var(--pad-y, var(--section-y)) + var(--slab-r));
}
.slab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(var(--slab-r) + 1px);
  border-radius: var(--slab-r) var(--slab-r) 0 0;
  background: var(--linne);
  pointer-events: none;
}
.slab--open-top { border-radius: 0; }
.slab + .section:not(.slab) { padding-top: calc(var(--section-y) * .6); }

/* Panel: an inset rounded colour block on the linne page (closing bands). */
.section--panel {
  margin-inline: clamp(.5rem, 1.6vw, 1.5rem);
  border-radius: var(--r-xl);
}

/* Decorative double arch (the orangery's dome) rising from the lower right
   edge of a colour block, in fine lines. Only from 64rem and only beside a
   narrow text column: on smaller screens, and in bands with a photo (whose
   text sits on the right), the lines would cross the text. */
.has-arches { position: relative; overflow: hidden; isolation: isolate; }
.has-arches::before {
  content: none;
  position: absolute;
  right: clamp(-9rem, -6vw, -3rem);
  bottom: -2px;
  z-index: -1;
  width: clamp(12rem, 26vw, 24rem);
  height: min(86%, 28rem);
  border: 1px solid var(--deco);
  border-bottom: 0;
  border-radius: 50vw 50vw 0 0;
  outline: 1px solid var(--deco-soft);
  outline-offset: clamp(.75rem, 1.4vw, 1.25rem);
  opacity: .55;
  pointer-events: none;
}
.slab.has-arches::before { bottom: var(--slab-r); }
@media (min-width: 64rem) {
  .has-arches:not(:has(.cta-band__media))::before { content: ""; }
  .has-arches:has(.cta-band__aside)::before { height: min(42%, 13rem); }
}

/* Grids. Odd counts never leave a lone card beside an empty cell: the last
   card of an odd run takes the whole row (cards that read their own width,
   such as .activity, then lay themselves out horizontally). */
.grid { display: grid; gap: var(--gap); }
@media (min-width: 40rem) {
  .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.grid--2, .grid--3) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 > :last-child:nth-child(odd) { grid-column: auto; }
  .grid--3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* Section head: eyebrow (with folio) + headline aligned to the content grid,
   with an intro paragraph or a Cormorant subline on the right.
   --center: centred heading group with an optional ornament under it. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem var(--gap);
  margin-bottom: clamp(2.25rem, 5vw, 4.5rem);
}
.section-head__intro { max-width: 34em; color: var(--fg-muted); }
.section-head__intro .link-arrow { margin-top: .25rem; }
.section-head__aside { max-width: 18em; }
.section-head--rule { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.section-head--center { justify-items: center; text-align: center; }
.section-head--center .section-head__intro { justify-self: center; }
@media (min-width: 60rem) {
  .section-head:not(.section-head--center) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .section-head__intro { padding-bottom: .35rem; }
  .section-head__aside { justify-self: end; padding-bottom: .2rem; text-align: right; }
  /* An intro that is only a link sits on the right content edge. */
  .section-head__intro:has(> .link-arrow:only-child) { justify-self: end; }
}

/* 5. SITE CHROME ========================================================= */

/* Top utility line (from 45rem; on phones its content lives in the menu):
   address · Köp presentkort · En del av Hotel Statt · language */
.topbar {
  display: none;
  border-bottom: 1px solid var(--rule);
  background: var(--linne);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: .02em;
}
.topbar--skog, .topbar--petrol { border-color: transparent; background: var(--skog-deep); color: rgb(242 239 234 / .84); --focus: var(--linne); }
.topbar--kvall, .topbar--evening { border-color: transparent; background: var(--skog-night); color: rgb(242 239 234 / .82); --focus: var(--linne); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--topbar-h);
}
.topbar__brand { display: flex; align-items: center; gap: .45rem; margin: 0; }
.topbar__brand .icon { width: 1rem; height: 1rem; color: var(--guld); }
.topbar__links { display: flex; align-items: center; gap: 1.5rem; }
.topbar__link { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.25rem; text-decoration: none; white-space: nowrap; }
.topbar__link:hover { text-decoration: underline; }
.topbar__link .icon { width: 1em; height: 1em; }
.topbar__link--quiet { opacity: .85; }
@media (min-width: 45rem) {
  .topbar { display: block; }
}
@media (max-width: 61.99rem) {
  .topbar__note-more { display: none; }
}

/* Language switcher: GTranslate renders <select class="gt_selector"> into
   every .gtranslate_wrapper (top bar and mobile menu): one tab stop each. */
.lang { display: inline-flex; align-items: center; gap: .35rem; }
.lang > .icon { width: 1.05rem; height: 1.05rem; color: var(--guld); }
.gtranslate_wrapper { display: flex; align-items: center; min-width: 6.5rem; min-height: 1.75rem; }
.gt_selector {
  max-width: 10rem;
  min-height: 1.75rem;
  padding: .15rem 1.4rem .15rem .25rem;
  border: 0;
  border-radius: .4rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B635C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .2rem center / .85rem no-repeat;
  color: inherit;
  font: 400 var(--fs-label)/1.4 var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.gt_selector option { color: var(--grafit); }
:is(.topbar--skog, .topbar--petrol, .topbar--kvall, .topbar--evening, .nav__extra) .gt_selector {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8D2C8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Logo: the manor's blue oval logo (client's choice), links to the start page. */
.wordmark {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding-block: .5rem;
  line-height: 0;
  text-decoration: none;
}
.wordmark__logo { display: block; width: auto; height: 3rem; }
.wordmark--lg .wordmark__logo { height: clamp(5rem, 8vw, 6.25rem); }
@media (min-width: 70rem) {
  .wordmark__logo { height: 3.5rem; }
}

/* Header: theme-linne, theme-skog or theme-kvall (front matter header_theme) */
.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
  transition: background-color .25s;
}
.site-header:is(.theme-skog, .theme-petrol, .theme-kvall, .theme-evening),
.site-header.is-menu-open { border-bottom-color: transparent; }
.js .site-header { position: sticky; top: 0; }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0 1rem;
  min-height: var(--header-h);
}
.site-header__actions { display: flex; align-items: center; gap: .5rem 1.25rem; }
.site-header__phone {
  display: none;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  color: var(--heading);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__phone:hover { text-decoration: underline; }
.site-header__phone .icon { width: 1.1rem; height: 1.1rem; color: var(--deco); }
.site-header__actions .site-header__cta { display: none; white-space: nowrap; }
@media (min-width: 45rem) {
  .site-header__actions .site-header__cta { display: inline-flex; }
}
@media (min-width: 52rem) {
  .site-header__phone { display: inline-flex; }
}
/* Just above the desktop-menu breakpoint the number shrinks to its icon
   (still a 44px tel: link, named by the hidden number) so nothing wraps. */
@media (min-width: 70rem) and (max-width: 84.99rem) {
  .site-header__phone { justify-content: center; min-width: 2.75rem; }
  .site-header__phone span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .site-header__phone .icon { width: 1.35rem; height: 1.35rem; }
}

/* Menu toggle: a link to the footer menu, so it still works without JS. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: 0 0 0 .5rem;
  color: var(--heading);
  font: 700 var(--fs-small)/1 var(--font-body);
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 1.75rem; height: 1.75rem; }
.menu-toggle__icon span {
  position: absolute;
  left: .125rem;
  right: .125rem;
  height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.menu-toggle__icon span:first-child { top: .625rem; }
.menu-toggle__icon span:last-child { top: 1.0625rem; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { top: .84rem; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { top: .84rem; transform: rotate(-45deg); }

/* Navigation — small screens: a full green sheet under the header.
   Closed by default; without JS the toggle jumps to #sidfot. */
.nav:focus { outline: none; }
@media (max-width: 69.99rem) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--nav-top, 4rem) - var(--nav-bottom, 0rem));
    padding: .5rem var(--gutter) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--skog);
    color: var(--linne);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem);
    --focus: var(--linne);
  }
  /* Only opening is animated: a closed sheet must never linger mid-fade. */
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .nav__item { padding: .55rem 0 .6rem; border-bottom: 1px solid rgb(242 239 234 / .14); }
  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
    color: var(--linne);
    font: 500 2.125rem/1.05 var(--font-display);
    text-decoration: none;
  }
  .nav__link .icon { width: 1.25rem; height: 1.25rem; color: var(--guld); }
  .nav__link[aria-current="page"] { color: var(--guld-light); text-decoration: underline; text-decoration-color: var(--guld); text-decoration-thickness: 1px; text-underline-offset: .18em; }
  .nav__extra { display: grid; gap: .15rem; margin-top: 1.5rem; }
  .nav__contact {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    color: var(--linne);
    font-weight: 700;
    text-decoration: none;
  }
  .nav__contact .icon, .nav__extra .lang > .icon { color: var(--guld); }
  .nav__extra .lang { gap: .75rem; min-height: 2.75rem; }
  .nav__extra .gt_selector { min-height: 2.75rem; padding-inline: 0 1.6rem; font-size: 1rem; font-weight: 700; }
  .nav__sprig { width: 3.25rem; height: 1.5rem; margin-top: 1.75rem; color: var(--guld); opacity: .8; }
}
@media (max-width: 44.99rem) {
  .nav { --nav-bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 46rem) and (max-width: 69.99rem) {
  .nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

/* Navigation — desktop */
@media (min-width: 70rem) {
  .menu-toggle { display: none; }
  .nav { margin-right: auto; }
  .nav__list { display: flex; align-items: center; gap: clamp(.1rem, .8vw, .9rem); }
  .nav__item { position: relative; display: flex; align-items: center; }
  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .9rem .45rem;
    color: var(--heading);
    font: 400 1rem/1 var(--font-body);
    letter-spacing: .03em;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: .45rem;
    right: .45rem;
    bottom: .45rem;
    height: 1px;
    background: var(--deco);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { font-weight: 700; }
  .nav__link .icon { width: .95rem; height: .95rem; color: var(--deco); }
  .nav__extra, .nav__sprig { display: none; }
}

/* Mobile action bar: Boka bord · Ring · one contextual action (front matter).
   It yields (slides away) while an in-page primary button is on screen. */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: .25rem;
  align-items: center;
  padding: .5rem .625rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(74 90 77 / .18);
  background: rgb(242 239 234 / .96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .3s var(--ease);
}
html.is-bar-yielding:not(.is-menu-open) .actionbar {
  visibility: hidden;
  transform: translateY(calc(100% + 1px));
  transition: transform .3s var(--ease), visibility 0s .3s;
}
/* Quiet cells stack icon over label (tab-bar style) so a two-word label
   never wraps at 360px; labels stay at most ten characters. */
.actionbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-height: 3.25rem;
  padding-inline: .25rem;
  border-radius: var(--r-pill);
  color: var(--skog);
  font: 700 .8125rem/1.1 var(--font-body);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.actionbar__item .icon { width: 1.25rem; height: 1.25rem; }
/* The green cell follows the page's primary action: "Boka bord" by default
   (action_focus: room), the contextual action on pages that sell something
   else (action_focus: context). */
.actionbar--room .actionbar__item--room,
.actionbar--context .actionbar__item--context {
  flex-direction: row;
  gap: .45rem;
  background: var(--skog);
  color: var(--linne);
  font-size: 1.0625rem;
  letter-spacing: .01em;
}
:is(.actionbar--room .actionbar__item--room, .actionbar--context .actionbar__item--context) .icon { width: 1.15rem; height: 1.15rem; color: var(--guld-light); }
.actionbar--context { grid-template-columns: 1fr .8fr 1.45fr; }
/* Room under the footer for the bar (the footer's own ground continues under it). */
@media (max-width: 44.99rem) {
  .site-footer { padding-bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 45rem) {
  .actionbar { display: none; }
}

/* Footer (theme-kvall): brand, contact, menu, more, sister companies */
.site-footer { position: relative; overflow: hidden; padding-top: clamp(4rem, 8vw, 6.5rem); }
.site-footer__top { display: grid; gap: 2.75rem var(--gap); }
.site-footer__brand { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.site-footer__tagline { max-width: 22em; color: var(--fg-muted); font: italic 500 1.375rem/1.35 var(--font-display); }
.site-footer__heading {
  margin-bottom: .9rem;
  color: var(--guld-light);
  font: 700 var(--fs-label)/1.4 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.site-footer__address { margin-bottom: .5rem; color: var(--fg-muted); }
.site-footer__list { display: grid; gap: .1rem; }
.site-footer__list a {
  display: inline-block;
  padding: .3rem 0;
  color: var(--fg-muted);
  text-decoration: none;
}
.site-footer__list a:hover { color: var(--linne); text-decoration: underline; }
.site-footer__list--cols { display: block; columns: 2; column-gap: 1.5rem; }
.site-footer__list--cols li { break-inside: avoid; }
.site-footer__follow { display: grid; gap: .75rem; }
.social { display: flex; gap: .6rem; }
.social__link {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--heading);
  transition: background-color .25s, color .25s, border-color .25s;
}
.social__link:hover { border-color: var(--heading); background: var(--heading); color: var(--bg); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
  font-size: var(--fs-label);
  letter-spacing: .02em;
}
.site-footer__org { text-wrap: pretty; }
.site-footer__org .nowrap, .nowrap { white-space: nowrap; }
.site-footer__org a { white-space: nowrap; }
/* The name as a large, faint script watermark under the footer. */
.site-footer__mark {
  margin: .1em 0 -.38em;
  color: rgb(242 239 234 / .06);
  font: 400 clamp(4.5rem, 17vw, 16rem)/1 var(--font-script);
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
/* Phones: brand, contact and menu full width, the two short lists side by
   side. Tablet and small laptops: the brand block on its own row (logo ·
   tagline · social), then the columns. Wide: one row. */
.site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand { grid-column: 1 / -1; }
@media (max-width: 39.99rem) {
  .site-footer__top > :nth-child(2), .site-footer__top > :nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 52rem) {
  .site-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__brand { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 2.5rem; }
}
@media (min-width: 80rem) {
  .site-footer__top { grid-template-columns: 3.6fr 2.3fr 2.6fr 2fr 2.2fr; }
  .site-footer__brand { grid-column: auto; grid-template-columns: none; align-items: start; gap: 1.25rem; }
}

/* 6. COMPONENTS ========================================================== */

/* Buttons — Lato, sentence case. The primary button is the theme's CTA:
   djup skogsgrön with linne text on light grounds, guld with grafit text on
   the green grounds. One primary per screen; everything else is soft,
   outline or an arrow link. */
.btn {
  --btn-bg: var(--tint);
  --btn-fg: var(--link);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3.25rem;
  padding: .5rem clamp(1.35rem, 4vw, 1.9rem);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1rem/1.15 var(--font-body);
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  text-wrap: balance; /* labels fit one line at 360px; if one cannot, it wraps evenly */
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.btn:hover { --btn-bg: color-mix(in srgb, var(--link) 16%, transparent); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease); }
.btn:hover .icon { transform: translateX(.2em); }

.btn--primary { --btn-bg: var(--cta-bg); --btn-bd: var(--cta-bg); --btn-fg: var(--cta-fg); font-size: 1.0625rem; }
.btn--primary:hover { --btn-bg: var(--cta-hover); --btn-bd: var(--cta-hover); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--link); --btn-bd: var(--link); }
.btn--outline:hover { --btn-bg: var(--link); --btn-bd: var(--link); --btn-fg: var(--bg); }

.btn--light { --btn-bg: var(--linne); --btn-bd: var(--linne); --btn-fg: var(--skog); }
.btn--light:hover { --btn-bg: var(--white); --btn-bd: var(--white); }

.btn--sm { min-height: 2.75rem; padding: .35rem 1.3rem; font-size: .9375rem; }
.btn--primary.btn--sm { font-size: .9375rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; }

/* Round seal: decorative (aria-hidden), the fact it carries is repeated as
   text nearby. Linne with a fine gold ring by default; --rosa on light photos. */
.stamp {
  position: absolute;
  z-index: 1;
  width: clamp(5.75rem, 9vw, 7.5rem);
  aspect-ratio: 1;
  transform: rotate(-8deg);
  filter: drop-shadow(0 12px 18px rgb(58 71 61 / .22));
}
.stamp__bg { fill: var(--linne); stroke: var(--guld); stroke-width: .8; }
.stamp__ring { fill: none; stroke: var(--guld); stroke-width: .6; }
.stamp__text { fill: var(--skog); font: 700 8.6px var(--font-body); letter-spacing: .24em; text-transform: uppercase; }
.stamp__small { fill: var(--skog); font: 400 17px var(--font-script); }
.stamp__big { fill: var(--skog); font: 600 30px var(--font-display); letter-spacing: .01em; }
.stamp--ivory .stamp__bg { fill: var(--linne); }
.stamp--rosa .stamp__bg { fill: var(--rosa); stroke: var(--linne); }
.stamp--rosa .stamp__ring { stroke: var(--grafit); opacity: .35; }
.stamp--rosa :is(.stamp__text, .stamp__small, .stamp__big) { fill: var(--grafit); }

/* Arch: echoes the dome of the glass orangery. One arched image per page.
   --framed adds a fine gold line that follows the arch at a distance. */
.media--arch { container-type: inline-size; }
.media--arch img { border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg); }
.media--framed img { outline: 1px solid var(--deco); outline-offset: clamp(.45rem, 1vw, .8rem); }

/* Start-page hero: copy with a script greeting, actions and an arched photo */
.hero { padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem); }
/* minmax(0, 1fr): the track never grows to fit the headline (the fallback
   font is wider than Cormorant while the web font loads). */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--gap); }
.hero__copy { display: grid; justify-items: start; align-content: center; }
.hero__title {
  margin-top: 1.1rem;
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.01em;
}
/* Great Vibes greeting above the name ("Välkommen till"). */
.hero__title-accent {
  display: block;
  margin: 0 0 .02em .02em;
  color: var(--skog);
  font: 400 .5em/1.15 var(--font-script);
  letter-spacing: 0;
}
.hero__title-name { display: block; }
.hero__lead { max-width: 31em; margin-top: 1.5rem; }
.hero__actions { margin-top: 2rem; }
.hero__contact { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; margin-top: 1.25rem; color: var(--fg-muted); font-size: var(--fs-small); }
.hero__contact a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; color: var(--heading); font-weight: 700; text-decoration: none; }
.hero__contact a:hover { text-decoration: underline; }
.hero__contact .icon { width: 1.05rem; height: 1.05rem; color: var(--deco); }
.hero__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.hero__media { position: relative; container-type: inline-size; isolation: isolate; margin: .5rem .75rem .75rem 0; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: 30% -.75rem -.75rem 26%;
  z-index: -1;
  border-radius: var(--r-lg);
  background: var(--block);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg);
  object-fit: cover;
}
.hero__media.media--framed::before { content: none; }
.hero__media .stamp { right: -.25rem; top: -.75rem; }
.hero__sprig { position: absolute; left: -1.25rem; bottom: 2.5rem; width: 4.5rem; height: 2rem; color: var(--deco); transform: rotate(-12deg); }

@media (min-width: 40rem) and (max-width: 62.49rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .hero__media img { aspect-ratio: 4 / 5.2; }
  .hero__media .stamp { right: auto; left: -1.75rem; top: 10%; }
}

@media (min-width: 62.5rem) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 var(--gap);
    min-height: clamp(30rem, 100svh - var(--topbar-h) - var(--header-h) - 4rem, 46rem);
  }
  .hero__copy { grid-column: 1 / span 7; padding-block: 1.5rem; }
  .hero__title { font-size: clamp(4.5rem, min(7.4vw, (100svh - 22rem) * .55), 7.5rem); }
  .hero__media { grid-column: 8 / -1; margin: 0; }
  .hero__media::before { inset: 24% -1.5rem -1.5rem 30%; }
  .hero__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .hero__media .stamp { right: auto; left: -2.75rem; top: 16%; }
}

/* Proof strip: a quiet row of facts or certificates between thin rules. */
.proof { padding-block: 0 clamp(.75rem, 2vw, 1.5rem); }
.proof__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 2rem;
  padding-block: .75rem;
  border-block: 1px solid var(--rule);
}
.proof__item { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--heading); font-size: var(--fs-small); font-weight: 700; }
.proof__item .icon { color: var(--deco); }

/* Facts strip: hard numbers between thin rules */
.facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.facts__list--flush { border-top: 0; }
.fact { display: grid; gap: .3rem; align-content: start; padding: 1.4rem 1rem 1.4rem 0; border-bottom: 1px solid var(--rule); }
.fact:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
/* A lone last fact takes the row and sets value and label side by side. */
.fact:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 1rem; }
.fact__value {
  color: var(--heading);
  font: 500 clamp(2.75rem, 4.8vw, 4.25rem)/.95 var(--font-display);
  font-variant-numeric: lining-nums;
}
.fact__value small { font-size: .5em; font-style: italic; }
.fact__label { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.4; }
@media (min-width: 60rem) {
  .facts__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  .fact, .fact:nth-child(even) { padding: 1.9rem 1.5rem 1.9rem 0; border-left: 0; }
  .fact:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: none; }
  .fact + .fact { padding-left: 1.75rem; border-left: 1px solid var(--rule); }
}

/* Review scores (full list) */
.scores { display: grid; border-top: 1px solid var(--rule); }
.score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem 1.25rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.score__logo {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--white);
  object-fit: cover;
}
.score__source { font-size: var(--fs-d4); line-height: 1.1; }
.score__value {
  grid-column: 1 / -1;
  color: var(--heading);
  font: 500 clamp(3.5rem, 6vw, 5rem)/.9 var(--font-display);
  font-variant-numeric: lining-nums;
}
.score__value small { margin-left: .2em; color: var(--fg-muted); font: 400 .26em/1 var(--font-body); }
.score__text { grid-column: 1 / -1; color: var(--fg-muted); }
@media (min-width: 48rem) {
  .score { grid-template-columns: auto minmax(8rem, 1.1fr) minmax(9rem, 1fr) minmax(0, 2fr); gap: 1.5rem; padding: 1.75rem 0; }
  .score__value, .score__text { grid-column: auto; }
}

/* Compact score badges for tight spots */
.score-badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .3rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-size: var(--fs-small);
  text-decoration: none;
}
.score-badge strong { color: var(--heading); font: 600 1.5rem/1 var(--font-display); }
.score-badge .icon { color: var(--deco); }
a.score-badge:hover { border-color: var(--heading); }

/* Image tiles with a label tab cut into the corner (12 columns on desktop:
   tile = 3, --third = 4, --wide = 6, --feature = 6 x 2 rows) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tile {
  position: relative;
  display: block;
  color: var(--heading);
  text-decoration: none;
  isolation: isolate;
}
.tile__media { height: 100%; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); aspect-ratio: 4 / 5; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__label {
  --notch: var(--r-md);
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: calc(100% - 1.5rem);
  padding: .75rem 1rem .1rem 0;
  border-top-right-radius: var(--notch);
  background: var(--bg);
}
.tile__label::before,
.tile__label::after {
  content: "";
  position: absolute;
  width: var(--notch);
  height: var(--notch);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--notch) - .5px), var(--bg) var(--notch));
}
.tile__label::before { left: 0; bottom: 100%; }
.tile__label::after { left: 100%; bottom: 0; }
.tile__text { display: grid; gap: .2rem; }
.tile__kicker { color: var(--fg-muted); font: 700 var(--fs-label)/1.25 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.tile__title { font: 500 clamp(1.5rem, 2vw, 1.875rem)/1.05 var(--font-display); }
.tile__arrow {
  display: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: background-color .3s, color .3s, border-color .3s;
}
.tile:hover .tile__arrow { border-color: var(--heading); background: var(--heading); color: var(--bg); }
.tile--wide, .tile--feature { grid-column: 1 / -1; }
.tile--wide .tile__media { aspect-ratio: 16 / 10; }
.tile--feature .tile__media { aspect-ratio: 3 / 2; }
.tile--feature .tile__title { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.tile--feature .tile__arrow, .tile--wide .tile__arrow { display: grid; }
/* Arched tile: the photo gets the arch top */
.tile--arch { container-type: inline-size; }
.tile--arch .tile__media { border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg); }
:is(.theme-kvall, .theme-evening) .tile__kicker { color: var(--kicker); }
/* Trio: three equal tiles; on phones the first spans both columns */
.tiles--trio > :first-child { grid-column: 1 / -1; }
.tiles--trio > :first-child .tile__media { aspect-ratio: 1; }
@media (min-width: 46rem) {
  .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile { grid-column: span 3; }
  .tile__label { padding: .95rem 1.25rem .1rem 0; }
  .tile--third, .tiles--trio > .tile { grid-column: span 4; }
  .tiles--trio > :first-child .tile__media { aspect-ratio: 4 / 5; }
  .tile--wide { grid-column: span 6; }
  .tile--wide .tile__media { aspect-ratio: 16 / 9.4; }
  .tile--feature { grid-column: span 6; grid-row: span 2; }
  .tile--feature .tile__media { aspect-ratio: auto; }
  .tile--feature .tile__label { --notch: var(--r-lg); padding: 1.25rem 1.75rem .25rem 0; }
}
@media (min-width: 64rem) {
  .tile__arrow { display: grid; }
}
@media (max-width: 45.99rem) {
  .tile:not(.tile--feature, .tile--wide) .tile__kicker { display: none; }
}

/* Split: image and text side by side, a colour block peeking out behind */
.split { display: grid; gap: 2.5rem var(--gap); align-items: center; }
.split__media { position: relative; isolation: isolate; }
.split__media::before {
  content: "";
  position: absolute;
  inset: 14% 18% -.75rem -.75rem;
  z-index: -1;
  border-radius: var(--r-lg);
  background: var(--block);
}
.split__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.split__media--tall img { aspect-ratio: 4 / 5; }
.split__media.media--arch img { border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg); }
.split__media--plain::before, .split__media.media--framed::before { content: none; }
.split__body { display: grid; gap: 1.35rem; justify-items: start; }
.split__body > .btn, .split__body > .btn-row { margin-top: .5rem; }
@media (min-width: 46rem) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .split__media, .split__body { grid-row: 1; }
  .split__media { grid-column: 1 / span 6; }
  .split__media::before { inset: 14% 22% -1.5rem -1.5rem; }
  .split__body { grid-column: 8 / -1; }
  .split--reverse .split__media { grid-column: 7 / -1; }
  .split--reverse .split__media::before { inset: 14% -1.5rem -1.5rem 22%; }
  .split--reverse .split__body { grid-column: 1 / span 5; }
  .split--wide-media .split__media { grid-column: 1 / span 7; }
  .split--wide-media .split__body { grid-column: 9 / -1; }
  .split--wide-media.split--reverse .split__media { grid-column: 6 / -1; }
  .split--wide-media.split--reverse .split__body { grid-column: 1 / span 4; }
  .split--narrow-media .split__media { grid-column: 1 / span 5; }
  .split--narrow-media .split__body { grid-column: 7 / -1; }
  .split--narrow-media.split--reverse .split__media { grid-column: 8 / -1; }
  .split--narrow-media.split--reverse .split__body { grid-column: 1 / span 6; }
}

/* Rounded photo with caption */
.figure img { width: 100%; border-radius: var(--r-lg); object-fit: cover; }
.figure figcaption { margin-top: .75rem; color: var(--fg-muted); font: italic 500 1.125rem/1.4 var(--font-display); }

/* Band: a wide photo with a colour card overlapping its edge */
.band { position: relative; display: grid; }
.band__media { overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 4 / 3.4; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__card {
  position: relative;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  margin: -2.5rem .75rem 0; /* overlaps the photo just enough to layer, not to hide it */
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.band__card .btn, .band__card .link-arrow, .band__card .btn-row { margin-top: .5rem; }
@media (min-width: 46rem) {
  .band { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 3.5rem; }
  .band__media { grid-column: 1 / -1; grid-row: 1; height: clamp(27rem, 47vw, 40rem); aspect-ratio: auto; }
  .band__card { grid-column: 1 / span 7; grid-row: 1; align-self: end; margin: 0 0 -3.5rem clamp(1.5rem, 3vw, 3rem); }
  .band--right .band__card { grid-column: 6 / span 7; margin: 0 clamp(1.5rem, 3vw, 3rem) -3.5rem 0; }
}
@media (min-width: 64rem) {
  .band__card { grid-column: 1 / span 6; }
  .band--right .band__card { grid-column: 7 / span 6; }
  .band--narrow .band__card { grid-column-end: span 5; }
  .band--right.band--narrow .band__card { grid-column: 8 / span 5; }
}

/* Duo: an aside (heading, lead, quote) next to the main matter */
.duo { display: grid; gap: 2.5rem var(--gap); align-items: start; }
@media (min-width: 52rem) {
  .duo { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .duo__aside { grid-column: 1 / span 5; }
  .duo__main { grid-column: 7 / -1; }
  .duo--wide-aside .duo__aside { grid-column: 1 / span 7; }
  .duo--wide-aside .duo__main { grid-column: 9 / -1; }
  .duo__aside--sticky { position: sticky; top: calc(var(--header-h) + 5rem); }
}

/* Feature card: photo on top, themed body below. --plain: no ground, the
   photo and text sit straight on the page (airy lists of 2–3 cards). */
.feature-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); }
.feature-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.feature-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: .9rem; padding: clamp(1.5rem, 3vw, 2.5rem); }
.feature-card__title { font-size: var(--fs-d3); }
.feature-card__body > .link-arrow:last-child, .feature-card__body > .btn:last-child { margin-top: auto; }
.feature-card--plain { overflow: visible; border-radius: 0; }
.feature-card--plain .feature-card__media img { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.feature-card--plain .feature-card__body { padding: 1.5rem 0 0; }

/* Editorial list: name left, detail right, thin rules */
.ledger { border-top: 1px solid var(--rule); container-type: inline-size; }
.ledger__row {
  display: grid;
  gap: .35rem var(--gap);
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger__title { font-size: var(--fs-d4); font-weight: 500; line-height: 1.1; }
.ledger__text { color: var(--fg-muted); }
.ledger__action { justify-self: start; }
@container (min-width: 40rem) {
  .ledger__row { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); align-items: center; }
  .ledger__action { justify-self: end; }
}

/* Inline separators for "a · b · c" fact lines. Each item is a flex item, so
   it moves to the next line whole; no separator is left dangling at a break. */
.dots { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; }
.dots > li { position: relative; }
.dots > li + li::before { content: "·"; position: absolute; left: -.75rem; color: var(--deco); font-weight: 700; }

/* Page hero for inner pages: copy + arched photo, optional fact dock.
   Default sits on linne; .slab.slab--open-top + theme-skog / theme-kvall
   continues the header colour and rounds into the linne page below. */
.page-hero { padding-block: clamp(2rem, 4.5vw, 4.5rem) clamp(2.5rem, 5vw, 5rem); }
.page-hero__grid { display: grid; gap: 2rem var(--gap); align-items: center; }
.page-hero__copy { display: grid; gap: 1.1rem; justify-items: start; }
.page-hero__title { font-size: clamp(3rem, min(7.2vw, 11svh), 6.25rem); line-height: 1; }
.page-hero__copy .btn-row { margin-top: .5rem; }
.page-hero__media { position: relative; isolation: isolate; container-type: inline-size; }
.page-hero__media::before {
  content: "";
  position: absolute;
  inset: 22% -.75rem -.75rem 30%;
  z-index: -1;
  border-radius: var(--r-lg);
  background: var(--block);
}
.page-hero__media img { width: 100%; height: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.page-hero__media.media--arch img { aspect-ratio: 4 / 4.4; border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg); }
.page-hero__media.media--framed::before { content: none; }
.page-hero__media .stamp { left: -.75rem; top: 8%; }
.page-hero__chip {
  position: absolute;
  left: -.5rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.2rem .7rem .9rem;
  border-radius: var(--r-pill);
  background: var(--skog);
  box-shadow: var(--shadow-lg);
  color: var(--linne);
  font-weight: 700;
  line-height: 1.2;
}
.page-hero__chip .icon { color: var(--guld); }
.page-hero__dock { position: relative; z-index: 2; container-type: inline-size; }
.page-hero--docked .page-hero__media { z-index: 1; }
.page-hero--text .page-hero__copy { max-width: 60rem; }
.page-hero.slab { padding-bottom: calc(clamp(2.5rem, 5vw, 4.5rem) + var(--slab-r)); }
/* Docked: the fact dock straddles the shoulder into the linne page; the photo
   always ends (fully rounded, frame closed) on the colour above the shoulder. */
.page-hero--docked { --shoulder: max(var(--slab-r), 2.75rem); }
.page-hero.slab.page-hero--docked { padding-bottom: 0; }
.page-hero--docked.slab::after { height: calc(var(--shoulder) + 1px); }
@media (max-width: 45.99rem) {
  .page-hero--docked .page-hero__media { order: 3; margin: .5rem .75rem calc(var(--shoulder) + 1.5rem) 0; }
  .page-hero--docked .page-hero__media img { aspect-ratio: 3 / 2; }
  .page-hero--docked .page-hero__dock { order: 2; }
  .page-hero.slab.page-hero--docked { padding-bottom: .1px; }
  .page-hero__media .stamp { left: .5rem; }
}
@media (min-width: 46rem) {
  .page-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-hero__copy { grid-column: 1 / span 7; }
  .page-hero__media { grid-column: 8 / -1; }
  .page-hero__media::before { inset: 22% -1.5rem -1.5rem 30%; }
  .page-hero__chip { left: -2rem; bottom: 2.5rem; }
  .page-hero--text .page-hero__copy { grid-column: 1 / -1; }
  .page-hero--docked .page-hero__grid { row-gap: 0; align-items: stretch; }
  .page-hero--docked .page-hero__copy { grid-row: 1; align-self: center; padding-bottom: 2rem; }
  .page-hero--docked .page-hero__media { grid-row: 1; margin-bottom: 2.25rem; }
  .page-hero--docked .page-hero__media img { min-height: 100%; }
  .page-hero--docked .page-hero__dock { grid-column: 1 / -1; grid-row: 2; }
  .page-hero--docked + .subnav { margin-top: clamp(1.25rem, 2.5vw, 2.25rem); }
}
/* Laptop and up: the photo runs down beside the dock, which overlaps its
   lower left corner; it stops above the linne shoulder. */
@media (min-width: 62.5rem) {
  .page-hero--docked .page-hero__media { grid-row: 1 / span 2; margin-bottom: calc(var(--shoulder) + 1.75rem); }
  .page-hero--docked .page-hero__media img { aspect-ratio: auto; }
  .page-hero--docked .page-hero__dock { grid-column: 1 / span 10; }
}

/* Fact dock: key facts + the page's primary action, docked under a hero.
   Light card on light and green grounds, a dark green card in the evening. */
.factdock {
  --dock-bg: var(--linne-soft);
  --dock-fg: var(--grafit);
  --dock-item: var(--linne);
  --dock-label: var(--muted);
  --dock-value: var(--skog);
  --dock-price: var(--guld-ink);
  --dock-rule: rgb(74 90 77 / .2);
  --focus: var(--skog);
  --cta-bg: var(--skog);
  --cta-fg: var(--linne);
  --cta-hover: var(--skog-deep);
  display: grid;
  gap: .5rem;
  padding: .5rem;
  border-radius: var(--r-lg);
  background: var(--dock-bg);
  box-shadow: var(--shadow-lg);
  color: var(--dock-fg);
}
:is(.theme-kvall, .theme-evening) .factdock {
  --dock-bg: #46544A;
  --dock-fg: var(--linne);
  --dock-item: rgb(242 239 234 / .06);
  --dock-label: var(--greige);
  --dock-value: var(--linne);
  --dock-price: var(--guld-light);
  --dock-rule: rgb(194 164 109 / .4);
  --focus: var(--linne);
  --cta-bg: var(--guld);
  --cta-fg: var(--grafit);
  --cta-hover: var(--guld-light);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .55);
}
/* Up to four facts. Phones: 2 × 2 (a lone last fact takes the row), button
   full width. From 40rem: the facts in one row, button + aside below.
   In a page hero the dock reads its own width (.page-hero__dock is the
   container): 40–62rem facts 2 × 2 beside the button, from 62rem one line. */
.factdock__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.factdock__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.factdock__item { display: grid; align-content: start; gap: .25rem; min-width: 0; padding: .65rem .85rem .6rem; border-radius: var(--r-md); background: var(--dock-item); }
.factdock__label { color: var(--dock-label); font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-wrap: balance; }
.factdock__value { color: var(--dock-value); font: 600 clamp(1.625rem, 7.2vw, 1.875rem)/1.05 var(--font-display); white-space: nowrap; }
.factdock__value--price { color: var(--dock-price); font-size: clamp(1.875rem, 9vw, 2.25rem); }
.factdock__note { color: var(--dock-label); font-size: var(--fs-small); line-height: 1.3; text-wrap: balance; }
/* Label, value and note share rows across the facts, so a label that wraps
   to two lines does not push its value below the others. */
@supports (grid-template-rows: subgrid) {
  .factdock__item { grid-row: span 3; grid-template-rows: subgrid; row-gap: .25rem; }
  .factdock__label { align-self: end; }
}
.factdock__action { display: grid; gap: .35rem; }
.factdock__action .btn { width: 100%; }
.factdock__aside { padding-inline: .5rem; color: var(--dock-label); font-size: var(--fs-small); text-align: center; }
@media (min-width: 40rem) {
  .factdock__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .factdock__item:last-child:nth-child(odd) { grid-column: auto; }
  .factdock__action { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem 1.25rem; padding: .25rem; }
  .factdock__action .btn { width: auto; }
  .factdock__aside { padding: 0; text-align: left; }
}
@container (min-width: 40rem) and (max-width: 61.99rem) {
  .factdock { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem .75rem; }
  .factdock__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factdock__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .factdock__action { grid-template-columns: none; justify-items: center; padding: 0 .75rem 0 .25rem; }
  .factdock__aside { text-align: center; }
}
@container (min-width: 62rem) {
  .factdock { grid-template-columns: minmax(0, 1fr) auto; gap: 0; align-items: stretch; padding: .75rem; }
  .factdock__list { gap: 0; }
  .factdock__item { position: relative; padding: .6rem 1.25rem .55rem; background: transparent; }
  .factdock__item + .factdock__item::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--dock-rule); }
  .factdock__value { font-size: 2rem; }
  .factdock__value--price { font-size: 2.375rem; }
  .factdock__action { grid-template-columns: none; align-content: center; margin-left: .75rem; padding: 0; }
  .factdock__action .btn { min-height: 4rem; padding-inline: 2rem; }
  .factdock__aside { text-align: center; }
}

/* Pricing cards: the price in gold ink, one quiet CTA per card */
.pricing { display: grid; gap: var(--gap); }
.price-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 2.8vw, 2.75rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
}
.price-card__head { display: grid; gap: .5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.price-card__title { font-size: var(--fs-d4); font-weight: 600; line-height: 1.1; }
.price-card__price {
  color: var(--price);
  font: 500 clamp(3.25rem, 5.5vw, 4.5rem)/.95 var(--font-display);
  font-variant-numeric: lining-nums;
}
.price-card__price small { margin-left: .12em; font-size: .42em; font-style: italic; }
.price-card__unit { margin-top: -.5rem; color: var(--fg-muted); font-size: var(--fs-small); }
.price-card__cta { margin-top: auto; padding-top: .5rem; }
.price-card__cta .btn { width: 100%; }
.pricing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.price-card--featured { border-color: var(--bg); background: var(--bg); box-shadow: var(--shadow-lg); }
@media (min-width: 60rem) {
  .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .price-card--featured { margin-block: -1rem; padding-block: calc(clamp(1.5rem, 2.8vw, 2.75rem) + 1rem); }
}

/* Lists */
.check-list { display: grid; gap: .7rem; }
.check-list > li { position: relative; padding-left: 2rem; line-height: 1.5; }
.check-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--deco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.spec-list { display: grid; gap: .45rem; font-size: var(--fs-small); }
.spec-list > li { position: relative; padding-left: 1.1rem; line-height: 1.45; }
.spec-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--deco);
}
.meta-list { display: grid; gap: .5rem; font-size: var(--fs-small); }
.meta-list > li, .meta-list > div, .meta-list dt { display: flex; align-items: center; gap: .6rem; }
.meta-list > div { flex-wrap: wrap; column-gap: .4rem; }
.meta-list .icon { color: var(--deco); width: 1.2rem; height: 1.2rem; }
.meta-list dt { font-weight: 700; }
.meta-list dd { color: var(--fg-muted); }
/* Price lines ("Lunchbord · från 550 kr"): label left, price right on a fine rule. */
.price-list { display: grid; border-top: 1px solid var(--rule); }
.price-list > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.price-list dt { font-weight: 700; }
.price-list dd { color: var(--price); font: 600 1.375rem/1.2 var(--font-display); font-variant-numeric: lining-nums; }
.price-list dd small { color: var(--fg-muted); font: 400 var(--fs-small)/1.3 var(--font-body); }

/* Venue / room card (lays itself out from its own width). From 46rem:
   --feature takes the row, standard cards come in pairs, --compact in threes.
   Within a row the request buttons line up at the bottom. */
.venues { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem) var(--gap); }
@media (min-width: 46rem) {
  .venues { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .venue { grid-column: span 3; }
  .venue--feature { grid-column: 1 / -1; }
  .venue--compact { grid-column: span 2; }
}
.venue { container-type: inline-size; }
.venue__inner { display: grid; grid-template-rows: auto 1fr; gap: 1.5rem; height: 100%; }
.venue__media { position: relative; }
.venue__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 3 / 2; object-fit: cover; }
.venue__cap {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .9rem .4rem .7rem;
  border-radius: var(--r-pill);
  background: var(--linne);
  color: var(--skog);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.2;
}
.venue__cap .icon { width: 1.1rem; height: 1.1rem; color: var(--guld-ink); }
.venue__body { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.venue__title { font-size: var(--fs-d3); }
.venue__details { display: grid; gap: 1.25rem; align-self: stretch; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.venue__plan {
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: .75rem .75rem .65rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--white);
}
.venue__plan img { width: 100%; height: 8rem; object-fit: contain; }
.venue__plan figcaption { color: var(--muted); font-size: .875rem; font-weight: 700; line-height: 1.35; text-align: center; }
.venue__plan .dots { justify-content: center; }
.venue__cta { margin-top: auto; }
@container (min-width: 20rem) {
  .venue__details { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
@container (min-width: 56rem) {
  .venue__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: none; gap: clamp(2rem, 4cqw, 3.5rem); align-items: center; }
  .venue__media img { aspect-ratio: 16 / 11; }
}

/* Data table: capacity, prices and menus. --capacity gets the green head.
   Long column labels shrink to short ones on phones (both stay readable).
   position: relative keeps visually hidden cell text (absolutely positioned)
   inside the scroller instead of widening the page when the table scrolls. */
.table-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-md); }
.data-table { width: 100%; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.data-table caption { margin-bottom: .75rem; color: var(--fg-muted); font-size: var(--fs-small); text-align: left; }
.data-table th,
.data-table td { padding: .85rem .75rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.data-table thead th { color: var(--heading); font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.data-table tbody th { color: var(--heading); font: 600 1.3125rem/1.15 var(--font-display); white-space: nowrap; }
.data-table td.is-num, .data-table th.is-num { text-align: center; }
.data-table td.is-num { font-weight: 700; }
.data-table .is-empty { color: var(--fg-muted); font-weight: 400; }
.data-table__short { display: none; }
.data-table--capacity { background: var(--surface); }
.data-table--capacity thead th { border-bottom: 0; background: var(--skog); color: var(--linne); }
.data-table--capacity tbody tr:nth-child(even) { background: rgb(216 210 200 / .3); }
.data-table--capacity tbody tr:last-child > * { border-bottom: 0; }
.data-table--menu td:last-child { text-align: right; white-space: nowrap; }
@media (max-width: 39.99rem) {
  .data-table th, .data-table td { padding: .7rem .4rem; }
  .data-table th:first-child, .data-table td:first-child { padding-left: .75rem; }
  .data-table tbody th { font-size: 1.1875rem; }
  .data-table__full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .data-table__short { display: inline; }
}

/* Activity card; when it is given a whole row (the odd one out in a grid)
   it sets photo and text side by side. */
.activity { container-type: inline-size; }
.activity__inner { display: grid; gap: 1.25rem; align-content: start; }
.activity__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.activity__body { display: grid; gap: .75rem; }
.activity__title { font-size: var(--fs-d4); font-weight: 600; line-height: 1.1; }
.activity .meta-list { margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
@container (min-width: 38rem) {
  .activity__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap) clamp(1.5rem, 4cqw, 3rem); }
}

/* Event card + compact event list. The next bookable event may get the
   primary button, everything else the outline button. */
.event-card { display: grid; gap: 1.5rem var(--gap); padding-block: clamp(1.75rem, 3vw, 2.75rem); border-top: 1px solid var(--rule); }
.event-card:last-child { border-bottom: 1px solid var(--rule); }
.event-card__media { position: relative; }
.event-card__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 3 / 2; object-fit: cover; }
.event-card__date {
  position: absolute;
  left: .75rem;
  top: .75rem;
  display: grid;
  justify-items: center;
  min-width: 4.25rem;
  padding: .55rem .75rem .5rem;
  border-radius: var(--r-md);
  background: var(--linne);
  color: var(--skog);
  font: 600 2.375rem/.9 var(--font-display);
  font-variant-numeric: lining-nums;
}
.event-card__date small { margin-top: .15rem; color: var(--guld-ink); font: 700 var(--fs-label)/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.event-card__body { display: grid; gap: .85rem; justify-items: start; align-content: center; }
.event-card__title { font-size: var(--fs-d3); }
.event-card__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: var(--fs-small); font-weight: 700; }
.event-card__meta li { display: inline-flex; align-items: center; gap: .45rem; }
.event-card__meta .icon { color: var(--deco); width: 1.15rem; height: 1.15rem; }
.event-card__body .btn { margin-top: .5rem; }
@media (min-width: 48rem) {
  .event-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); }
}
/* Stacked card: photo on top of a surface card, for pairs in a .grid--2. */
.event-card--stacked {
  grid-template-columns: none;
  gap: 0;
  align-content: start;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
}
.event-card--stacked:last-child { border-bottom: 0; }
.event-card--stacked .event-card__media img { border-radius: 0; }
.event-card--stacked .event-card__body { align-content: start; height: 100%; padding: clamp(1.5rem, 3vw, 2.5rem); }
.event-card--stacked .event-card__title { font-size: var(--fs-d4); font-weight: 600; line-height: 1.1; }
.event-card--stacked .event-card__body > .btn:last-child { margin-top: auto; }
.price { color: var(--price); font: 600 1.75rem/1 var(--font-display); font-variant-numeric: lining-nums; }

.event-list { border-top: 1px solid var(--rule); }
.event-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .25rem 1.25rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.event-row__date { grid-row: span 3; align-self: start; color: var(--heading); font: 600 2.25rem/.95 var(--font-display); font-variant-numeric: lining-nums; }
.event-row__date small { display: block; color: var(--fg-muted); font: 700 var(--fs-label)/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.event-row__title { font-size: var(--fs-d5); }
.event-row__place { color: var(--fg-muted); font-size: var(--fs-small); }
.event-row__meta { color: var(--fg); font-size: var(--fs-small); font-weight: 700; }
.event-row__action { justify-self: start; margin-top: .35rem; }
.event-row__link { text-decoration: none; }
.event-row__link:hover { text-decoration: underline; text-decoration-thickness: 1px; }
@media (min-width: 48rem) {
  .event-row { grid-template-columns: 5.5rem minmax(0, 3fr) minmax(0, 2fr) auto; }
  .event-row__date { grid-row: auto; align-self: center; }
  .event-row__action { margin: 0; }
}
/* Calendar on /event/ ({{events:calendar}}): one group per month. */
.event-cal { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
.event-cal__month { display: grid; gap: .75rem var(--gap); }
.event-cal__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.event-cal__title { font-size: var(--fs-d3); }
.event-cal__count { color: var(--fg-muted); font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.event-cal__empty { max-width: 40em; color: var(--fg-muted); }
.event-cal .event-list { container-type: inline-size; }
/* {{events:dock}} renders the next few events; only the first one left shows. */
.event-docks > .factdock ~ .factdock { display: none; }
/* Dates as small pills inside a card ("Fredag 27/11 · 695 kr"). */
.event-dates { display: flex; flex-wrap: wrap; gap: .5rem; }
.event-dates > li {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .3rem .8rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
}
.event-dates strong { color: var(--heading); }

/* Menu: dishes in Cormorant italic, prices in gold ink with dotted leaders */
.menu { display: grid; gap: 2.25rem; }
.menu__course { display: grid; gap: 1.1rem; }
.menu__course-title { display: flex; align-items: center; gap: 1rem; }
.menu__course-title::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.menu__item { display: grid; gap: .2rem; }
.menu__name { display: flex; align-items: baseline; gap: .75rem; color: var(--heading); font: italic 600 1.625rem/1.2 var(--font-accent); }
.menu__name::after { content: ""; flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--fg-muted); transform: translateY(-.25em); }
.menu__name:has(+ .menu__desc):not(:has(.menu__price))::after { content: none; }
.menu__price { order: 2; color: var(--price); font: 600 1.5rem/1 var(--font-display); font-style: normal; font-variant-numeric: lining-nums; }
.menu__desc { max-width: 34em; color: var(--fg-muted); }
.menu__note { color: var(--kicker); font: italic 500 1.3125rem/1.35 var(--font-accent); }

/* Opening hours */
.hours { display: grid; }
.hours__row { display: flex; align-items: baseline; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.hours__row dt { font-weight: 700; }
.hours__row dd { margin-left: auto; font-variant-numeric: tabular-nums; text-align: right; }
.hours__row small { display: block; color: var(--fg-muted); font-size: .875rem; }
.hours__note { margin-top: .9rem; color: var(--kicker); font: italic 500 1.3125rem/1.35 var(--font-accent); }

/* Team: portraits in 4:5, or arched with .team--arch */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem var(--gap); }
@media (min-width: 52rem) {
  .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem var(--gap); }
}
.person { display: grid; gap: .2rem; align-content: start; container-type: inline-size; }
.person__photo { margin-bottom: .9rem; }
.person__photo img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 5; object-fit: cover; }
.team--arch .person__photo img { border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg); }
.person__name { font-size: var(--fs-d5); font-weight: 600; }
.person__role { color: var(--fg-muted); font-size: var(--fs-small); }
.person__links { display: grid; gap: .1rem; margin-top: .3rem; font-size: var(--fs-small); }
.person__links a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--fg-muted); overflow-wrap: anywhere; }
.person__links a:hover { color: var(--heading); }

/* Pull quote / testimonial. The name is set as a script signature. */
.quote { position: relative; display: grid; gap: 1.5rem; align-content: start; }
.quote::before {
  content: "\201D";
  display: block;
  height: .42em;
  color: var(--deco);
  font: 500 clamp(6rem, 11vw, 9rem)/1 var(--font-display);
}
.quote__text { color: var(--heading); font: italic 500 clamp(1.5rem, 2.4vw, 2.125rem)/1.3 var(--font-accent); text-wrap: pretty; }
.quote--pull .quote__text { font-size: clamp(1.875rem, 3.6vw, 3rem); line-height: 1.18; }
.quote__cite { display: grid; gap: .1rem; font-style: normal; }
.quote__name { color: var(--heading); font: 400 2rem/1.1 var(--font-script); }
.quote__role { color: var(--fg-muted); font-size: var(--fs-small); }

/* FAQ accordion (also for long date/price lists: julbord, menus) */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  color: var(--heading);
  font: 600 clamp(1.375rem, 2vw, 1.625rem)/1.25 var(--font-display);
  list-style: none;
  text-wrap: balance;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: transform .35s var(--ease), background-color .3s, color .3s;
}
.faq__q:hover .faq__icon { border-color: var(--heading); }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--heading); color: var(--bg); }
.faq__a { max-width: 44em; padding: 0 3.5rem 1.6rem 0; }
.faq__a > * + * { margin-top: .75em; }
.faq__a a { color: var(--link); font-weight: 700; }

/* Numbered steps */
.steps { display: grid; gap: var(--gap); counter-reset: step; }
.step { display: grid; gap: .6rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--rule); counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); color: var(--index); font: italic 500 3.25rem/.95 var(--font-display); font-variant-numeric: lining-nums; }
.step__title { font-size: var(--fs-d5); }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tags, badges, notices */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .85rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.4;
}
.tag .icon { width: 1rem; height: 1rem; color: var(--deco); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .9rem;
  border-radius: var(--r-pill);
  background: var(--skog);
  color: var(--linne);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.badge--greige, .badge--beige { background: var(--greige); color: var(--skog-deep); }
.badge--salvia, .badge--teal { background: var(--salvia); color: var(--grafit); }
.badge--rosa { background: var(--rosa); color: var(--grafit); }
.badge--kvall, .badge--evening { background: var(--skog-deep); color: var(--linne); }
/* Gold as a signal, not a ground for small text: the label stays dark. */
.badge--offer { border: 1px solid var(--guld); background: var(--linne-soft); color: var(--grafit); }
.badge--offer::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--guld); }

.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem 1rem;
  align-content: start;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--greige-soft);
  color: var(--grafit);
}
.notice > .icon { grid-row: span 2; width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--skog); }
.notice__title { color: var(--skog); font-weight: 700; }
.notice--skog, .notice--petrol { background: var(--skog); color: var(--linne); }
.notice--skog > .icon, .notice--skog .notice__title, .notice--petrol > .icon, .notice--petrol .notice__title { color: var(--linne); }
.notice--offer { border-left: 3px solid var(--guld); border-radius: var(--r-sm) var(--r-md) var(--r-md) var(--r-sm); }

/* In-page navigation. --sticky pins it under the header with scroll-spy
   (aria-current); its optional enquiry button shows from the width where the
   mobile action bar hides (45rem), so the page's action is always in reach. */
.subnav { position: relative; z-index: 40; border-bottom: 1px solid var(--rule); background: var(--linne); }
.subnav__inner { display: flex; align-items: center; gap: 0 1.5rem; padding-block: .75rem; }
.subnav__list { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--skog);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.subnav__link:hover { border-color: var(--greige-soft); background: var(--greige-soft); }
.subnav__link[aria-current="true"] { border-color: var(--greige); background: var(--greige); color: var(--skog-deep); }
.subnav__cta { display: none; flex: none; margin-left: auto; }
/* An outline, so it never reads as a selected section pill. */
.subnav .subnav__cta { --btn-bg: transparent; --btn-bd: var(--skog); --btn-fg: var(--skog); }
.subnav .subnav__cta:hover { --btn-bg: var(--skog); --btn-fg: var(--linne); }
:is(.subnav--kvall, .subnav--evening) .subnav__cta { --btn-bd: rgb(242 239 234 / .55); --btn-fg: var(--linne); }
:is(.subnav--kvall, .subnav--evening) .subnav__cta:hover { --btn-bg: var(--linne); --btn-bd: var(--linne); --btn-fg: var(--skog-deep); }
/* Pinned under the header at every width, always one row: links that do not
   fit scroll sideways and fade out at the edges (main.js sets .has-more-start
   / .has-more-end). On phones the button stays hidden: the action bar
   carries the page's action there. */
.subnav--sticky .subnav__inner { padding-block: .4rem; }
.subnav--sticky .subnav__list { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.subnav--sticky .subnav__list::-webkit-scrollbar { display: none; }
.subnav__list.has-more-start { --fade-start: 2.5rem; }
.subnav__list.has-more-end { --fade-end: 3rem; }
.subnav__list:is(.has-more-start, .has-more-end) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent);
}
.js .subnav--sticky { position: sticky; top: var(--header-offset, calc(var(--header-h) + 1px)); }
@media (min-width: 45rem) {
  .subnav__inner, .subnav--sticky .subnav__inner { padding-block: .3rem; }
  .subnav__list { gap: .25rem; margin-left: -.9rem; }
  .subnav__link { padding-inline: .9rem; border-color: transparent; }
  .subnav__cta { display: inline-flex; }
}
/* The section bar's button repeats the hero's: hide it while the hero is in view. */
.is-hero-visible .subnav__cta { visibility: hidden; }
/* Evening pages: a dark section bar instead of a linne band across the dark page. */
.subnav--kvall, .subnav--evening { border-bottom-color: rgb(242 239 234 / .12); background: var(--skog-deep); }
:is(.subnav--kvall, .subnav--evening) .subnav__link { color: var(--linne); }
:is(.subnav--kvall, .subnav--evening) .subnav__link:hover { border-color: #46544A; background: #46544A; }
:is(.subnav--kvall, .subnav--evening) .subnav__link[aria-current="true"] { border-color: var(--guld); background: transparent; color: var(--guld-light); }
@media (max-width: 44.99rem) { :is(.subnav--kvall, .subnav--evening) .subnav__link { border-color: rgb(242 239 234 / .25); } }
.page-hero--docked:has(+ :is(.subnav--kvall, .subnav--evening))::after { background: var(--skog-deep); }
.page-hero--docked + :is(.subnav--kvall, .subnav--evening) { margin-top: 0; padding-top: clamp(1.25rem, 2.5vw, 2.25rem); }
:is(.subnav--kvall, .subnav--evening) + .slab:is(.theme-kvall, .theme-evening) { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Closing CTA band: one primary button, at most two quiet alternatives and
   always tel + mail. --media adds an arch photo, --enquiry is the lead-gen close. */
.cta-band { padding-block: clamp(3.5rem, 7.5vw, 7rem); }
.cta-band__grid { display: grid; gap: 2.5rem var(--gap); align-items: center; }
.cta-band__body { display: grid; gap: 1.25rem; justify-items: start; }
.cta-band__body .btn-row { margin-top: .5rem; }
.cta-band__contact { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; color: var(--fg-muted); font-size: var(--fs-small); }
.cta-band__contact a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--heading); font-weight: 700; text-decoration: none; }
.cta-band__contact a:hover { text-decoration: underline; }
.cta-band__contact .icon { color: var(--deco); }
.cta-band__media { container-type: inline-size; }
.cta-band__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.cta-band__media.media--arch img { aspect-ratio: 3 / 2; border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg); }
.cta-band--enquiry .cta-band__body { max-width: 44rem; }
.cta-band__aside .quote { max-width: 26rem; }
@media (min-width: 46rem) {
  .cta-band__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cta-band__body { grid-column: 1 / span 7; }
  .cta-band__aside { grid-column: 9 / -1; }
  .cta-band--enquiry .cta-band__aside { align-self: start; }
  .cta-band--media .cta-band__media { grid-column: 1 / span 5; }
  .cta-band__media.media--arch img { aspect-ratio: 4 / 4.4; }
  .cta-band--media .cta-band__body { grid-column: 7 / -1; }
}

/* Offer band: a short sales slab (heading + fact dock), e.g. "Boka konferens". */
.offer-band__grid { display: grid; gap: 1.75rem var(--gap); align-items: end; }
.offer-band__intro { display: grid; gap: 1rem; justify-items: start; }
@media (min-width: 62.5rem) {
  .offer-band__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* Forms: the CRM form renders on white inside a rounded card */
.form-card {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--grafit);
  box-shadow: var(--shadow-sm);
  --heading: var(--skog);
  --kicker: var(--skog);
  --focus: var(--skog);
}
.form-card__head { display: grid; gap: .5rem; justify-items: start; }
.form-card__title { color: var(--skog); font-size: var(--fs-d3); }
/* data-form-height on the iframe reserves the form's height before it reports its own. */
.form-embed { position: relative; min-height: 20rem; border-radius: var(--r-md); background: var(--white); }
.form-embed::before {
  content: "Formuläret laddas …";
  position: absolute;
  inset: 3rem 0 auto;
  color: var(--muted);
  font: 400 var(--fs-small)/1.4 var(--font-body);
  text-align: center;
}
.form-embed.is-loaded::before { content: none; }
.form-embed iframe { position: relative; width: 100%; height: 46rem; border-radius: var(--r-md); }
/* The fallback line (phone and e-mail) replaces the frame without JavaScript,
   and when main.js marks a form that never answered (blocked, offline). */
.form-embed__fallback { display: none; padding: 2rem 1rem; color: var(--grafit); text-align: center; text-wrap: balance; }
html:not(.js) .form-embed,
.form-embed.is-failed { min-height: 0; }
html:not(.js) .form-embed::before,
html:not(.js) .form-embed iframe,
.form-embed.is-failed::before,
.form-embed.is-failed iframe { display: none; }
html:not(.js) .form-embed__fallback,
.form-embed.is-failed .form-embed__fallback { display: block; }
.form-embed__fallback a { color: var(--skog); font-weight: 700; }

/* Modal: green header, scrolling form, pinned tel/mail footer.
   Full screen on phones. */
.modal {
  width: min(100% - 1.5rem, 44rem);
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--grafit);
  box-shadow: 0 40px 100px -30px rgb(47 47 47 / .6);
  overflow: hidden;
}
.modal::backdrop { background: rgb(58 71 61 / .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { display: flex; animation: modal-in .35s var(--ease); }
.modal__panel { display: flex; flex: 1; flex-direction: column; min-height: 0; max-height: calc(100dvh - 1.5rem); }
.modal__head {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.25rem 1.35rem 1.75rem;
}
.modal__heading { display: grid; gap: .55rem; justify-items: start; text-wrap: balance; }
.modal__title { font-size: clamp(2.125rem, 5vw, 3rem); }
.modal__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: none;
  color: var(--heading);
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.modal__close:hover { background: var(--heading); color: var(--bg); }
.modal__body { flex: 1; min-height: 0; padding: .5rem .75rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; }
.modal__foot { flex: none; padding: .9rem 1.75rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgb(74 90 77 / .16); background: var(--linne); color: var(--grafit); font-size: var(--fs-small); }
.modal__foot a { color: var(--skog); font-weight: 700; white-space: nowrap; }
@media (max-width: 39.99rem) {
  .modal { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .modal__panel { max-height: 100dvh; }
  .modal__head { padding: 1.1rem 1rem 1.1rem 1.25rem; }
  .modal__body { padding: .25rem .25rem 1.5rem; }
  .modal__foot { padding-inline: 1.25rem; }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(1.25rem); }
}
html.is-locked { overflow: hidden; scrollbar-gutter: stable; }

/* Map: a drawn landscape placeholder (fields, lake) with the address until the
   embed loads; <noscript> carries a plain iframe. */
.map { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: var(--greige-soft); aspect-ratio: 4 / 3.6; }
.map__streets {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 34% at 82% 22%, rgb(183 198 207 / .9) 0 98%, transparent 100%),
    linear-gradient(118deg, transparent calc(50% - 5px), rgb(255 255 255 / .9) calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)),
    repeating-linear-gradient(72deg, transparent 0 6.5rem, rgb(255 255 255 / .35) 6.5rem 6.6rem),
    radial-gradient(circle at 20% 78%, rgb(168 181 162 / .55) 0 5.5rem, transparent 5.6rem),
    radial-gradient(circle at 64% 70%, rgb(168 181 162 / .4) 0 3.5rem, transparent 3.6rem),
    var(--greige-soft);
}
.map__pin {
  position: absolute;
  left: 50%;
  top: 46%;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50% 50% 50% 0;
  background: var(--skog);
  box-shadow: 0 0 0 .6rem rgb(74 90 77 / .14), var(--shadow-lg);
  color: var(--linne);
  transform: translate(-50%, -100%) rotate(-45deg);
}
.map__pin .icon { width: 1.4rem; height: 1.4rem; transform: rotate(45deg); }
.map__card {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4%, 2rem);
  display: grid;
  justify-items: center;
  gap: .15rem;
  width: min(100% - 2rem, 21rem);
  padding: 1rem 1.25rem .6rem;
  border-radius: var(--r-md);
  background: var(--linne-soft);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transform: translateX(-50%);
}
.map__title { color: var(--skog); font: 600 1.625rem/1.1 var(--font-display); }
.map iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; visibility: hidden; }
.map iframe.is-loaded,
.map noscript iframe { visibility: visible; }
@media (min-width: 56rem) {
  .map { aspect-ratio: auto; min-height: 30rem; height: 100%; }
}

/* Contact details */
.contact-list { display: grid; gap: 1.2rem; }
.contact-list > div { position: relative; display: grid; gap: .1rem; padding-left: 2.5rem; }
.contact-list .icon { position: absolute; left: 0; top: .2rem; width: 1.5rem; height: 1.5rem; color: var(--deco); }
.contact-list dt { color: var(--fg-muted); font: 700 var(--fs-label)/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.contact-list dd { font-size: var(--fs-lead); }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* Video */
.video { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--skog-deep); }
.video__el { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video__play {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 0;
  background: linear-gradient(to top, rgb(47 47 47 / .6), rgb(47 47 47 / 0) 55%);
  color: var(--linne);
  text-align: left;
  cursor: pointer;
}
.video.is-enhanced:not(.is-playing) .video__play { display: flex; }
.video__play-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(4rem, 7vw, 5.5rem);
  height: clamp(4rem, 7vw, 5.5rem);
  border-radius: 50%;
  background: var(--linne);
  color: var(--skog);
  transition: transform .35s var(--ease);
}
.video__play:hover .video__play-icon { transform: scale(1.06); }
.video__play-icon .icon { width: 42%; height: 42%; margin-left: 6%; }
.video__play-text { display: grid; gap: .25rem; padding-bottom: .5rem; }
.video__play-text strong { font: 600 var(--fs-d4)/1.05 var(--font-display); }
.video__play-text span { font-size: var(--fs-small); }

/* Logo on a light chip (third-party marks that need a white ground) */
.logo-chip { display: inline-block; padding: .9rem 1.4rem; border-radius: var(--r-md); background: var(--white); }
.logo-chip img { width: auto; height: clamp(2.5rem, 5vw, 3.5rem); }

/* Long-form text */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.5em; font-size: var(--fs-d3); }
.prose h3 { margin-top: 1.7em; font-size: var(--fs-d4); font-weight: 600; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--link); font-weight: 700; overflow-wrap: anywhere; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { display: grid; gap: .5em; padding-left: 1.4em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.25em; top: .7em; width: .35rem; height: .35rem; border-radius: 50%; background: var(--deco); }
.prose ol > li::marker { color: var(--heading); font-weight: 700; }
.prose blockquote { padding-left: 1.25rem; border-left: 1px solid var(--deco); color: var(--heading); font: italic 500 1.5rem/1.35 var(--font-accent); }
.prose hr { height: 1px; margin-block: 2.5em; border: 0; background: var(--rule); }

/* 7. UTILITIES =========================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.stack { display: grid; gap: var(--stack, 1.25rem); align-content: start; justify-items: start; }
.stack--fill { justify-items: stretch; }
.measure { max-width: 40em; }
.center { text-align: center; }
.mt-lg { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.mt-md { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Phone numbers never split across lines. */
a[href^="tel:"] { white-space: nowrap; }

/* 8. MOTION & PRINT ====================================================== */
/* Reveal is opt-in per element and only ever shifts position, never opacity:
   whatever happens to the script or the observer, content stays readable. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transition: transform 1.1s var(--ease); }
  .js [data-reveal].is-pending { transform: translateY(1.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .site-header, .actionbar, .modal, .subnav, .video__play, .site-footer__mark, .map { display: none; }
  body { padding: 0; background: #fff; }
  .section { padding-block: 1.5rem; }
  .slab::after { content: none; }
}

/* Header CTA yields: one primary at a time on desktop/tablet too. The
   header's "Boka bord" turns to an outline while a primary button in the
   page is on screen (root.is-bar-yielding, set by main.js), and always on
   pages whose goal is their own action (action_focus: context). */
.site-header__cta { transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
:is(.is-bar-yielding, .focus-context) .site-header__actions .site-header__cta {
  --btn-bg: transparent; --btn-bd: var(--heading); --btn-fg: var(--heading);
}
:is(.is-bar-yielding, .focus-context) .site-header__actions .site-header__cta:hover {
  --btn-bg: var(--heading); --btn-bd: var(--heading); --btn-fg: var(--bg);
}

/* 9. JUST NU ============================================================= */
/* Upcoming events on the start page (partials/happenings.html, data in
   src/data/happenings.json): a heading, an optional filter (from four events),
   and a rail of cards. Few events: the cards share the row (two side by side,
   one alone lies down: photo beside text) and stack on phones; from four
   events the rail scrolls sideways with a progress track and arrows.
   Cards with a "body" in the data show the whole text (rich cards). */
.happenings__panel { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.hero + .happenings { padding-top: 0; }
/* No upcoming events: the whole section steps aside (main.js also hides it). */
.happenings:not(:has(.happening)) { display: none; }
.happenings__accent { font-style: italic; }
.happenings__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.happenings__title { font-size: var(--fs-d2); }
.happenings__intro { max-width: 30em; color: var(--fg-muted); }

/* Filter: a segmented pill; scrolls sideways on narrow screens. Rendered
   only when there are four events or more. */
.filter {
  display: flex;
  gap: .25rem;
  max-width: 100%;
  padding: .3rem;
  overflow-x: auto;
  border-radius: var(--r-pill);
  background: var(--surface);
  scrollbar-width: none;
}
.filter::-webkit-scrollbar { display: none; }
.filter:not(:has(.filter__btn)) { display: none; }
html:not(.js) .filter { display: none; }
.filter__btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .45rem 1.05rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--skog);
  font: 700 .9375rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.filter__btn:hover { background: var(--greige-soft); }
.filter__btn[aria-pressed="true"] { background: var(--skog); color: var(--linne); }
.filter__btn[hidden] { display: none; }
.filter__count {
  min-width: 1.4rem;
  padding: .2rem .35rem;
  border-radius: var(--r-pill);
  background: rgb(74 90 77 / .1);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.filter__btn[aria-pressed="true"] .filter__count { background: rgb(242 239 234 / .18); }

/* Rail: from four events one card and a peek on phones, then 2, 3 and 4 per view. */
.happenings__rail {
  --per-view: 1.15;
  display: grid;
  grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  grid-auto-flow: column;
  gap: var(--gap);
  margin: 0 calc(var(--focus-pad, .5rem) * -1);
  padding: .5rem var(--focus-pad, .5rem) 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-padding-inline: var(--focus-pad, .5rem);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.happenings__rail::-webkit-scrollbar { display: none; }
.happenings__rail:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-lg); }
@media (min-width: 40rem) { .happenings__rail { --per-view: 2; } }
@media (min-width: 60rem) { .happenings__rail { --per-view: 3; } }
@media (min-width: 78rem) { .happenings__rail { --per-view: 4; } }
/* Up to three events: no sideways scrolling. */
.happenings__rail:not(:has(> .happening:nth-child(4))) { --per-view: 1; grid-auto-flow: row; overflow: visible; scroll-snap-type: none; }
@media (min-width: 46rem) {
  .happenings__rail:not(:has(> .happening:nth-child(4))) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.happening { display: flex; scroll-snap-align: start; container-type: inline-size; }
.happening[hidden] { display: none; }

/* Event card: the title link covers the whole card (other links in a rich
   card sit above it). */
.happening__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--linne-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.happening__card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(47 47 47 / .05), 0 30px 50px -32px rgb(47 47 47 / .45); }
.happening__card:has(.happening__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.happening__media { position: relative; flex: none; aspect-ratio: 3 / 2; overflow: hidden; background: var(--skog-deep); }
.happening__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.happening__card:hover .happening__img { transform: scale(1.035); }
/* Posters (text in the image) are shown whole on a dark ground. */
.happening__media--poster .happening__img { object-fit: contain; background: var(--skog-deep); }

.happening__date {
  position: absolute;
  top: .875rem;
  left: .875rem;
  display: grid;
  justify-items: center;
  min-width: 3.6rem;
  padding: .5rem .6rem .45rem;
  border-radius: var(--r-sm);
  background: var(--linne);
  box-shadow: 0 8px 18px -10px rgb(47 47 47 / .6);
  color: var(--skog);
  line-height: 1;
  text-align: center;
}
.happening__date-time { display: contents; }
.happening__day { font: 600 2rem/.9 var(--font-display); font-variant-numeric: lining-nums; }
.happening__month {
  margin-top: .3rem;
  color: var(--guld-ink);
  font: 700 .6875rem/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.happening__soon {
  position: absolute;
  top: .875rem;
  right: .875rem;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  background: var(--skog);
  color: var(--linne);
  font: 700 .75rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.happening__soon[hidden] { display: none; }

.happening__body { display: flex; flex: 1; flex-direction: column; gap: .6rem; padding: 1.4rem 1.5rem 1.25rem; }
.happening__venue {
  overflow: hidden;
  color: var(--guld-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 var(--fs-label)/1.35 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.happening__title { color: var(--heading); font-size: clamp(1.75rem, 2.2vw, 2.125rem); font-weight: 500; line-height: 1.05; text-wrap: balance; }
.happening__tag { margin-top: -.2rem; color: var(--skog-soft); font: italic 500 1.25rem/1.15 var(--font-accent); }
.happening__tag:empty { display: none; }
.happening__link { color: inherit; text-decoration: none; }
.happening__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.happening__link:focus-visible { outline: none; }
.happening__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--fg-muted);
  font-size: .96875rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.happening__more { color: var(--fg); font-size: .875rem; }
/* Rich card: the whole text from the data ("body", "lines", "links"). */
.happening__prose { display: grid; gap: .75rem; color: var(--fg); font-size: 1rem; line-height: 1.65; }
.happening__prose strong { color: var(--heading); }
.happening__lines { display: grid; margin-top: .35rem; border-top: 1px solid var(--rule); font-size: .96875rem; }
.happening__lines > li { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.happening__lines strong { color: var(--heading); }
.happening__links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.happening__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.7rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
.happening__meta { display: grid; gap: .3rem; color: var(--fg-muted); font-size: .875rem; line-height: 1.3; }
.happening__meta:empty { display: none; }
.happening__time { display: inline-flex; align-items: center; gap: .35rem; }
.happening__time .icon { width: 1rem; height: 1rem; color: var(--deco); }
.happening__price { display: inline-flex; align-items: center; gap: .45rem; color: var(--grafit); font-weight: 700; }
.happening__price::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--guld); }
.happening__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  padding: .6rem 1.15rem;
  border: 1px solid var(--skog);
  border-radius: var(--r-pill);
  color: var(--skog);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.happening__cta .icon { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.happening__card:hover .happening__cta { background: var(--skog); color: var(--linne); }
.happening__card:hover .happening__cta .icon { transform: translateX(.2em); }
.happening--rich .happening__body { gap: .8rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.happening--rich .happening__tag { display: none; } /* the lines say it in full */
.happening__prose p:empty { display: none; }
.happening--rich .happening__foot { min-height: 0; margin-top: auto; padding-top: .35rem; border-top: 0; }
/* A card alone on a wide row lies down: photo left, text right. */
@container (min-width: 50rem) {
  .happening__card { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .happening__media { aspect-ratio: auto; min-height: 100%; }
  .happening__body { padding: clamp(2rem, 4cqw, 3rem); }
}

/* Navigation: a progress track (the divider) with arrows when the rail scrolls. */
.happenings__nav { display: flex; align-items: center; gap: .75rem; margin-top: .25rem; }
.happenings__nav[hidden] { display: none; }
.happenings__progress { position: relative; flex: 1; height: 1px; overflow: hidden; background: var(--rule); }
.happenings__progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--skog);
  transition: left .2s linear, width .2s linear;
}
.happenings__arrow {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border: 1px solid var(--skog);
  border-radius: 50%;
  background: transparent;
  color: var(--skog);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.happenings__arrow:hover:not(:disabled) { background: var(--skog); color: var(--linne); }
.happenings__arrow:disabled { opacity: .3; cursor: default; }
.happenings__arrow .icon { width: 1.15rem; height: 1.15rem; }
.happenings__arrow-prev { transform: rotate(180deg); }
.happenings__nav.is-static .happenings__arrow { display: none; }
.happenings__nav.is-static .happenings__progress { display: none; }

.happenings__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2.5rem;
  margin-top: 1.5rem;
}
.happenings__club { max-width: 40em; color: var(--fg-muted); font-size: var(--fs-small); }
.happenings__club strong { color: var(--fg); }
.happenings__links { display: flex; flex-wrap: wrap; gap: 0 2rem; margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  .happening__card,
  .happening__img,
  .happenings__progress-bar { transition: none; }
  .happening__card:hover { transform: none; }
  .happening__card:hover .happening__img { transform: none; }
}

/* ---- Integration fixes (page review, 2026-10-26) --------------------------- */
/* The font shorthand resets numerals; prices and counts in docks use lining figures. */
.factdock__value { font-variant-numeric: lining-nums tabular-nums; }


/* ---- page: brollop ---- */
/* Bröllop (/brollop/): small adjustments on top of the shared components. */

/* Hero on the powder-pink slab: the script line carries the wedding voice. */
.page-brollop .brollop-hero .page-hero__title .script--line { margin-bottom: .08em; font-size: .56em; }
.page-brollop .brollop-hero .accent { max-width: 21em; }
.page-brollop .brollop-hero .hero__contact { margin-top: .25rem; }

/* Intro: the lead carries the invitation, the second paragraph stays calm. */
.page-brollop #brollop .split__body > p { max-width: 36em; }

/* Packages: price card + description, ticks, menu prices, a minimum note. */
.page-brollop .pkg-grid { row-gap: clamp(1.75rem, 3vw, 2.5rem); }
.page-brollop .pkg .price-card__price { margin-top: .35rem; }
.page-brollop .pkg__desc { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.55; }
.page-brollop .pkg .check-list { gap: .55rem; }
.page-brollop .pkg__sub { display: grid; gap: .2rem; margin-top: .45rem; padding: 0; list-style: none; color: var(--fg-muted); font-size: var(--fs-small); }
.page-brollop .pkg__sub > li { position: relative; padding-left: 1rem; line-height: 1.45; }
.page-brollop .pkg__sub > li::before { content: ""; position: absolute; left: 0; top: .65em; width: .45rem; height: 1px; background: var(--deco); }
/* Menu prices, minimum and button sit at the foot, so they line up across a row. */
.page-brollop .pkg__prices { margin-top: auto; }
.page-brollop .pkg .price-card__cta { margin-top: 0; padding-top: .25rem; }
.page-brollop .pkg__prices dt { font-size: var(--fs-small); }
.page-brollop .pkg__note { display: flex; gap: .55rem; align-items: flex-start; color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.45; }
.page-brollop .pkg__note .icon { width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--deco); }
.page-brollop .pkg-foot__text { max-width: 34em; font-size: var(--fs-lead); font-weight: 300; line-height: 1.55; }
/* Tablets: two cards a row (three rows), phones one. */
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .page-brollop .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Two rows of three: the featured card's lift must not touch the row below. */
@media (min-width: 60rem) {
  .page-brollop .pkg-grid { row-gap: 3.5rem; }
}

/* Venues: three compact cards in a row from laptop width; on tablets each
   takes the row with the photo beside the text (three columns would be too narrow). */
.page-brollop .venue__body > p { font-size: var(--fs-small); line-height: 1.6; }
@media (min-width: 46rem) and (max-width: 63.99rem) {
  .page-brollop .venues .venue--compact { grid-column: 1 / -1; }
  .page-brollop .venue--compact .venue__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: none; gap: 1.5rem 2rem; align-items: start; }
}

/* Wedding venues: centred head with the script line, then Bryggan as a band
   and the three other places as airy cards. */
.page-brollop .vigsel-head .script--line { margin-bottom: .1em; font-size: .6em; }
.page-brollop .vigsel-head__intro { max-width: 40em; color: var(--fg-muted); text-wrap: pretty; }
.page-brollop .vigsel-head__price { margin-top: .35rem; font-weight: 700; }
.page-brollop .vigsel-head__price .price { margin-left: .2em; font-size: 2rem; }
/* Phones: nine centred lines are hard to read; the head lines up left. */
@media (max-width: 39.99rem) {
  .page-brollop .vigsel-head,
  .page-brollop .vigsel-head .heading-group--center { justify-items: start; text-align: left; }
}
.page-brollop #vigsel .band__card .tags,
.page-brollop .vigsel-grid .tags { margin-bottom: -.15rem; }
.page-brollop .vigsel-grid { margin-top: clamp(3rem, 6vw, 5rem); row-gap: clamp(2.5rem, 5vw, 3.5rem); }
.page-brollop .vigsel-grid .feature-card__body { gap: .75rem; }
/* The photo grows with the card when the card is taller than the band. */
@media (min-width: 46rem) {
  .page-brollop #vigsel .band__media { height: auto; min-height: clamp(27rem, 47vw, 40rem); }
}
/* Tablets: the third place takes the row, photo beside the text. */
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .page-brollop .vigsel-grid > :last-child:nth-child(odd) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
  .page-brollop .vigsel-grid > :last-child:nth-child(odd) .feature-card__body { padding-top: 0; }
}


/* ---- page: cafe ---- */
/* Café (/cafe/): a calm photo collage under the hero, the afternoon tea card
   and the glass café band. Everything else is shared components. */

/* Photo collage: the terrace by the lake, the café counter and a laid table.
   Phones: the wide photo, then two portrait crops side by side (the second a
   little lower). From 46rem: wide photo left, a tall one on the right set
   lower, a smaller one under the wide photo. */
.page-cafe .cafe-gallery-section { padding-top: clamp(1rem, 2.5vw, 2rem); }
.page-cafe .cafe-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.page-cafe .cafe-gallery__item img { width: 100%; border-radius: var(--r-lg); object-fit: cover; }
.page-cafe .cafe-gallery__item--wide { grid-column: 1 / -1; }
.page-cafe .cafe-gallery__item--wide img { aspect-ratio: 3 / 2; }
.page-cafe .cafe-gallery__item--tall img,
.page-cafe .cafe-gallery__item--small img { aspect-ratio: 4 / 5; }
.page-cafe .cafe-gallery__item--small { margin-top: clamp(1.75rem, 8vw, 3rem); }
@media (min-width: 46rem) {
  .page-cafe .cafe-gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--gap); }
  .page-cafe .cafe-gallery__item--wide { grid-column: 1 / span 7; grid-row: 1; }
  .page-cafe .cafe-gallery__item--tall { grid-column: 9 / -1; grid-row: 1 / span 2; margin-top: clamp(3rem, 8vw, 7.5rem); }
  .page-cafe .cafe-gallery__item--small { grid-column: 3 / span 5; grid-row: 2; margin-top: 0; }
  .page-cafe .cafe-gallery__item--small img { aspect-ratio: 16 / 10; }
}

/* Afternoon tea: one editorial event card (photo left, text right). */
.page-cafe .cafe-tea__card { border-bottom: 1px solid var(--rule); }
.page-cafe .cafe-tea__card .event-card__body { gap: 1rem; }
.page-cafe .cafe-tea__card .event-card__body > p:not(.eyebrow) { max-width: 36em; }
.page-cafe .cafe-tea__card .btn-row { margin-top: .5rem; }
.page-cafe .cafe-tea__card .btn { margin-top: 0; }
@media (min-width: 48rem) {
  .page-cafe .cafe-tea__card { align-items: center; }
  .page-cafe .cafe-tea__card .event-card__media img { aspect-ratio: 4 / 5; }
}

/* Glass café: the orangery photo with a sage card; the script line names it. */
.page-cafe .cafe-glass__title .script--line { margin-bottom: .08em; }
.page-cafe .cafe-glass .band__card > p:not(.badge) { max-width: 30em; }
.page-cafe .cafe-glass .badge { margin-top: .35rem; }
/* The card hangs below the photo; the closing band follows a little sooner. */
.page-cafe #glasscafe { padding-bottom: calc(var(--section-y) * .5); }

.cafe-season { margin-top: 1.25rem; max-width: 36rem; }


/* ---- page: event ---- */
/* Event (/event/): the light docked hero, the pair of current event cards,
   the calendar, the Easter table (#pask) and how to find us. */

/* Hero on linne with the next-event dock ({{events:dock}}). With no upcoming
   dated event the dock is empty and the hero is copy + photo only. */
.page-event .event-docks:not(:has(.factdock)) { display: none; }
.page-event .nowrap { white-space: nowrap; }
/* Laptop and up: the arch keeps its proportions (the copy is short) and the
   dock overlaps its lower left corner. */
@media (min-width: 62.5rem) {
  .page-event .event-hero .page-hero__media img { min-height: 0; aspect-ratio: 4 / 4.1; }
  .page-event .event-hero .page-hero__copy { align-self: center; padding-bottom: 1.5rem; }
  .page-event .event-hero:not(:has(.factdock)) .page-hero__media { grid-row: 1; margin-bottom: 0; }
}

/* Current events: two stacked cards whose buttons line up at the foot. */
.page-event .event-now { padding-top: calc(var(--section-y) * .7); }
.page-event .event-pair .event-card--stacked { grid-template-rows: auto 1fr; }
.page-event .event-pair .event-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.page-event .event-pair .event-card__body > .btn:last-child { margin-top: auto; }
.page-event .event-pair .event-card__body > .eyebrow { margin-bottom: -.25rem; }
.page-event .event-pair .event-card__title { font-size: var(--fs-d3); font-weight: 500; }
.page-event .event-card__facts {
  display: grid;
  gap: .6rem;
  align-self: stretch;
  margin: .35rem 0 .75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.page-event .event-card__facts > li { display: flex; align-items: baseline; gap: .65rem; line-height: 1.45; }
.page-event .event-card__facts .icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--deco); transform: translateY(.18em); }
.page-event .event-card__facts strong { color: var(--heading); }
.page-event .event-card__facts .price { font-size: 1.375rem; }
/* One card left (the other date has passed): photo beside the text. */
@media (min-width: 48rem) {
  .page-event .event-pair > .event-card--stacked:only-child { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: none; }
  .page-event .event-pair > .event-card--stacked:only-child .event-card__media img { height: 100%; aspect-ratio: auto; min-height: 24rem; }
}

/* Calendar: a quieter heading; the list follows the cards. */
.page-event .event-calendar .section-head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }

/* Easter table on a powder-pink panel. */
.page-event .event-pask__panel { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.page-event .event-pask .split { align-items: start; }
.page-event .event-pask .split__media img { aspect-ratio: 3 / 4; }
.page-event .event-pask .split__body > p:not(.lead) { max-width: 36em; }
.page-event .event-pask__days { display: grid; gap: 1.75rem; justify-self: stretch; }
.page-event .event-pask__day { display: grid; gap: .5rem; }
.page-event .event-pask__date { font-size: var(--fs-d4); font-weight: 600; }
.page-event .event-pask__day .hours__note { margin-top: .25rem; font-size: 1.1875rem; }
.page-event .event-pask__prices { justify-self: stretch; }
.page-event .event-pask__age { margin-left: .35rem; color: var(--fg-muted); font-weight: 400; }
.page-event .event-pask__notice { justify-self: stretch; background: var(--linne-soft); }
.page-event .event-pask__notice .spec-list { grid-column: 2; }
@media (min-width: 46rem) {
  .page-event .event-pask .split__media { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Find us: parking under the contact list. */
.page-event .event-find__parking { display: grid; gap: .4rem; max-width: 30em; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.page-event .event-find__parking h3 { color: var(--heading); }
.page-event .event-social { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }


/* ---- page: festvaning ---- */
/* Fest (/festvaning/): small adjustments on top of the shared components. */

/* Hero: the name line in Great Vibes under "Festvåningar" (the page's only script). */
.page-festvaning .fest-hero__script {
  display: block;
  margin-top: .04em;
  font: 400 .56em/1.15 var(--font-script);
  letter-spacing: 0;
}
.page-festvaning .fest-hero .accent { max-width: 19em; }
.page-festvaning .fest-hero .hero__contact { margin-top: .25rem; }

/* Fest & middag: copy measure and the quiet pointer to Sommarfesten. */
.page-festvaning #fest .split__body > p { max-width: 36em; }
.page-festvaning .fest-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  justify-self: stretch;
  margin-top: .25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.page-festvaning .fest-teaser__label { color: var(--heading); font: italic 500 1.375rem/1.2 var(--font-display); }

/* Packages: intro, then three cards with menu options and two prices each. */
.page-festvaning .fp-intro { display: grid; gap: .6rem; }
.page-festvaning .fp-intro__note { color: var(--fg); font-weight: 700; }
.page-festvaning .fp .price-card__price { margin-top: .35rem; }
.page-festvaning .fp .price-card__unit { margin-top: -.25rem; }
.page-festvaning .fp .fp__unit-first { margin-top: .35rem; }
.page-festvaning .fp .fp__unit-first + .price-card__price { margin-top: -.15rem; }
.page-festvaning .fp-options { display: grid; }
.page-festvaning .fp-option { display: grid; gap: .55rem; padding-block: .9rem; border-bottom: 1px solid var(--rule); }
.page-festvaning .fp-option:first-child { padding-top: 0; }
.page-festvaning .fp-option > p { line-height: 1.5; }
.page-festvaning .fp-option__prices { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.page-festvaning .fp-option__prices > div { display: flex; align-items: baseline; gap: .5rem; }
.page-festvaning .fp-option__prices dt { color: var(--fg-muted); font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.page-festvaning .fp-option__prices dd { color: var(--price); font: 600 1.5rem/1.1 var(--font-display); font-variant-numeric: lining-nums; white-space: nowrap; }
.page-festvaning .fp-extras { display: grid; gap: .6rem; }
.page-festvaning .fp-extras .price-list dt { font-weight: 700; }
.page-festvaning .fp-extras .price-list dd.fp-extras__note { flex-basis: 100%; color: var(--fg-muted); font: 400 var(--fs-small)/1.45 var(--font-body); }
.page-festvaning .fp-note { display: flex; gap: .6rem; color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.45; }
.page-festvaning .fp-note .icon { width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--deco); }
.page-festvaning .fp-foot__text { max-width: 36em; font-size: var(--fs-lead); font-weight: 300; line-height: 1.55; }
/* Tablets: two cards side by side; Mingelfest takes the row, head beside the list. */
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .page-festvaning .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-festvaning .fp-grid > .fp:last-child { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--gap); align-content: start; }
  .page-festvaning .fp-grid > .fp:last-child > .price-card__head { grid-row: 1 / span 3; padding-bottom: 0; border-bottom: 0; }
  .page-festvaning .fp-grid > .fp:last-child > :not(.price-card__head) { grid-column: 2; }
}

/* Venues: one feature (photo beside text) and two in a pair. */
.page-festvaning .venue__body > p { line-height: 1.6; }
.page-festvaning .venue:not(.venue--feature) .venue__body > p { font-size: var(--fs-small); }

/* Sommarfesten on sage: intro split, two short cards, the class party with a
   photo across the row, then the season's request strip. */
.page-festvaning .sommar-split .split__media img { aspect-ratio: 3 / 2; }
@media (min-width: 46rem) and (max-width: 59.99rem) {
  .page-festvaning .sommar-split .split__body { grid-column: 1 / span 6; }
}
.page-festvaning .sommar-grid { margin-top: clamp(3rem, 6vw, 5rem); }
.page-festvaning .sommar-card {
  display: grid;
  gap: .6rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.page-festvaning .sommar-card__title,
.page-festvaning .sommar-activity .activity__title { font-size: var(--fs-d3); font-weight: 500; }
.page-festvaning .sommar-activity { padding: .75rem; border-radius: var(--r-lg); background: var(--surface); }
.page-festvaning .sommar-activity .activity__inner { align-items: center; }
.page-festvaning .sommar-activity .activity__body { padding: .75rem .75rem 1rem; }
.page-festvaning .sommar-activity .activity__media img { border-radius: var(--r-md); }
.page-festvaning .sommar-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.page-festvaning .sommar-foot .heading-group { gap: .6rem; }
.page-festvaning .sommar-foot__text { max-width: 34em; }

/* Ceremonier: band with the powder-pink card, then Minnesstund as a duo. */
.page-festvaning #ceremonier .band__card .link-arrow { margin-top: .25rem; }
/* The photo grows with the card when the card is taller than the band. */
@media (min-width: 46rem) {
  .page-festvaning #ceremonier .band__media { height: auto; min-height: clamp(27rem, 47vw, 40rem); }
}
.page-festvaning .minnesstund { margin-top: clamp(3.5rem, 7vw, 6rem); }
.page-festvaning .minnesstund .accent { max-width: 16em; }
.page-festvaning .minnesstund .duo__main { max-width: 38em; }
.page-festvaning .minnesstund .btn { margin-top: .5rem; }

/* When a dated card has expired the remaining one spans the row. */
.sommar-grid > :only-child { grid-column: 1 / -1; }

/* The ceremony card overhangs its photo: give Minnesstund normal section spacing below it. */
.minnesstund { margin-top: clamp(4rem, 8vw, 6.5rem); }


/* ---- page: index ---- */
/* Start page (/): small adjustments on top of the shared components. */
.page-start .historia__script { margin-block: -.25rem .25rem; color: var(--skog); }
.page-start #historia .split__body > p:not(.script-accent) { max-width: 36em; }
.page-start .sister-grid { row-gap: clamp(2.5rem, 5vw, 3.5rem); }
/* Sister companies on phones: photo beside the text, a compact list. */
@media (max-width: 39.99rem) {
  .page-start .sister-grid .feature-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.1rem; align-items: start; }
  .page-start .sister-grid .feature-card__media img { aspect-ratio: 1; }
  .page-start .sister-grid .feature-card__body { gap: .4rem; padding: 0; }
  .page-start .sister-grid .feature-card__title { font-size: 1.75rem; }
  .page-start .sister-grid .feature-card__body p { font-size: var(--fs-small); line-height: 1.5; }
  .page-start .sister-grid .link-arrow { margin-top: .1rem; }
}

/* Contact block: stacked on tablets so the text keeps a readable width. */
@media (min-width: 46rem) and (max-width: 63.99rem) {
  .kontakt-split .split__media,
  .kontakt-split .split__body { grid-column: 1 / -1; }
}

/* Sister companies: three across from tablet width (no lone full-width card). */
@media (min-width: 40rem) { .page-start .sister-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Experience tiles on tablets: only the name on the label tab. */
@media (max-width: 63.99rem) { .page-start .tile__kicker { display: none; } }


/* ---- page: julbord ---- */
/* Julbord (/julbord/): candlelight hero, the manor's dates and prices, the
   sister venues' alternatives and the Safiren posters. */

/* Hero: the script line in light gold above the name. */
.page-julbord .page-hero__title .script--line { color: var(--guld-light); }

/* The dark section bar: from tablet width it pins under the header, so the
   room above it belongs to the hero, not to the bar (a slim bar when stuck).
   theme-kvall on the bar gives its button light text. */
@media (min-width: 45rem) {
  .page-julbord .page-hero--docked:has(+ .subnav--kvall) { padding-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
  .page-julbord .page-hero--docked + .subnav--kvall { padding-top: 0; }
  /* A shorter shadow under the dock, so the bar does not cut it off. */
  .page-julbord .page-hero .factdock { box-shadow: 0 16px 32px -24px rgb(0 0 0 / .55); }
}

/* Intro */
.page-julbord .jul-intro .lead { max-width: 40em; }

/* Lunch (light card) beside the evening (a dark card, like candlelight). */
.page-julbord .jul-menu { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem) var(--gap); align-items: start; }
.page-julbord .jul-menu__aside { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60rem) {
  .page-julbord .jul-menu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 4rem); }
}
.page-julbord .jul-card {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.page-julbord .jul-card--kvall { border-color: transparent; background: var(--bg); box-shadow: var(--shadow-lg); }
.page-julbord .jul-card__title { font-size: var(--fs-d3); }
.page-julbord .jul-card__head { display: grid; gap: .6rem; }
.page-julbord .jul-card__head p { color: var(--fg-muted); }
.page-julbord .jul-card__part { display: grid; gap: .6rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.page-julbord .jul-card__part + .jul-card__part { margin-top: .5rem; }
.page-julbord .jul-card__lede strong { color: var(--heading); }
.page-julbord .jul-card__price { margin-top: .25rem; color: var(--fg-muted); }
.page-julbord .jul-card__price .price { margin-right: .2rem; font-size: 2.25rem; }
.page-julbord .jul-card__note { color: var(--fg-muted); font-size: var(--fs-small); }
.page-julbord .jul-card .overline { margin-top: .5rem; }
.page-julbord .jul-card__foot { margin-top: .5rem; }

/* Evening dates: date, time and price in three columns on fine gold rules. */
.page-julbord .jul-table { width: 100%; font-size: var(--fs-small); font-variant-numeric: lining-nums; }
.page-julbord .jul-table th,
.page-julbord .jul-table td { padding: .7rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
.page-julbord .jul-table tr:not(.jul-table__second) > :first-child { padding-left: 0; }
.page-julbord .jul-table :is(th, td):last-child { padding-right: 0; }
.page-julbord .jul-table thead th { padding-block: 0 .6rem; color: var(--fg-muted); font: 700 var(--fs-label)/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.page-julbord .jul-table tbody th { color: var(--heading); font-weight: 700; white-space: nowrap; }
.page-julbord .jul-table td { color: var(--fg-muted); }
.page-julbord .jul-table .jul-table__price { text-align: right; white-space: nowrap; }
.page-julbord .jul-table td.jul-table__price { color: var(--price); font: 600 1.375rem/1.1 var(--font-display); font-variant-numeric: lining-nums; }
.page-julbord .jul-table tbody tr:last-child > * { border-bottom: 0; }
/* Two sittings on one Friday: one date, two lines. */
.page-julbord .jul-table__first > :is(td) { border-bottom: 0; padding-bottom: .15rem; }
.page-julbord .jul-table__second > td { padding-top: .15rem; }
.page-julbord .jul-table__tag {
  display: inline-block;
  margin-right: .35rem;
  padding: .05rem .5rem;
  border: 1px solid var(--deco);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (max-width: 29.99rem) {
  .page-julbord .jul-card { padding: 1.5rem 1.25rem; }
  .page-julbord .jul-table th, .page-julbord .jul-table td { padding-inline: .3rem; }
  /* Early bird: tag and time on one line, the sitting length below. */
  .page-julbord .jul-table__dur { display: block; margin-top: .2rem; }
  .page-julbord .jul-table__dash { display: none; }
}

/* Lilla Djulö: short fact lines inside the band card. */
.page-julbord .jul-facts { justify-self: stretch; margin-top: .25rem; }
.page-julbord .jul-facts dt { font-weight: 400; }
.page-julbord .jul-facts dd { color: var(--heading); }

/* Alternatives: square poster photos; on phones photo beside the text. The
   band above already leaves room under its overlapping card. */
.page-julbord #alternativ { padding-top: calc(var(--section-y) * .55); }
.page-julbord .jul-options { row-gap: clamp(2.5rem, 5vw, 3.5rem); }
.page-julbord .jul-option { display: grid; gap: 1.25rem; align-content: start; }
.page-julbord .jul-option__media { display: block; border-radius: var(--r-lg); overflow: hidden; }
.page-julbord .jul-option__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.page-julbord .jul-option__media:hover img { transform: scale(1.03); }
.page-julbord .jul-option__body { display: grid; gap: .9rem; align-content: start; justify-items: start; }
.page-julbord .jul-option__title { display: grid; gap: .2rem; }
.page-julbord .jul-option__name { font-size: var(--fs-d3); }
.page-julbord .jul-option__tag { color: var(--fg-muted); font: italic 500 1.375rem/1.2 var(--font-display); }
.page-julbord .jul-option .link-arrow { margin-top: .1rem; }
/* Two per row on tablets: the odd one out takes the row and lies down. */
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .page-julbord .jul-options > .jul-option:last-child:nth-child(odd) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap) clamp(1.5rem, 4vw, 3rem); align-items: center; }
}
@media (max-width: 39.99rem) {
  .page-julbord .jul-option { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
  .page-julbord .jul-option .link-arrow span { overflow-wrap: anywhere; }
  .page-julbord .jul-option__body { gap: .6rem; }
  .page-julbord .jul-option__name { font-size: 1.75rem; }
  .page-julbord .jul-option__tag { font-size: 1.1875rem; }
  .page-julbord .jul-option .spec-list { font-size: .9375rem; }
}

/* "Fler än 8 personer?" between the small-group and the group alternatives. */
.page-julbord .jul-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  border-block: 1px solid var(--rule);
}
.page-julbord .jul-groups__q { color: var(--heading); font: italic 500 var(--fs-accent)/1.15 var(--font-display); }

/* Safiren posters, shown whole. */
.page-julbord .jul-posters { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2rem, 4vw, 3rem) var(--gap); }
.page-julbord .jul-poster { display: grid; flex: 1 1 17rem; gap: 1rem; align-content: start; max-width: 24rem; }
.page-julbord .jul-poster__media { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.page-julbord .jul-poster__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.page-julbord .jul-poster__cap { display: grid; gap: .25rem; justify-items: start; }
.page-julbord .jul-poster__date { color: var(--heading); font: 600 var(--fs-d4)/1.15 var(--font-display); font-variant-numeric: lining-nums; }
.page-julbord .jul-poster__text { color: var(--fg-muted); }

/* Contact (the live julbord page names Hotel Statt's booking). */
.page-julbord .jul-contact { display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
.page-julbord .jul-contact a { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; color: var(--heading); font: 500 clamp(1.5rem, 2.4vw, 1.875rem)/1.2 var(--font-display); text-decoration: none; overflow-wrap: anywhere; }
.page-julbord .jul-contact a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.page-julbord .jul-contact .icon { width: 1.1rem; height: 1.1rem; color: var(--deco); }

/* Figures in the fact dock in lining numerals, like the price cards. */
.page-julbord .factdock__value { font-variant-numeric: lining-nums; }
.page-julbord .jul-contact__label { margin-bottom: -.75rem; color: var(--fg-muted); font-size: var(--fs-small); }
.page-julbord .jul-intro__place { max-width: 40em; color: var(--fg-muted); }


/* ---- page: konferens ---- */
/* Möten (/konferens/): small adjustments on top of the shared components. */

/* A shorter shadow under the hero's dock, so the section bar below does not
   cut it off with a visible edge. */
@media (min-width: 46rem) {
  .page-konferens .page-hero .factdock { box-shadow: 0 18px 34px -24px rgb(58 71 61 / .5); }
}

/* "Möten med mening": the lead runs a comfortable measure beside the heading. */
.page-konferens .moten .lead { max-width: 36em; }
.page-konferens .moten .script { color: var(--skog); }

.page-konferens .pricing-foot p { max-width: 36em; }

/* Rooms: description, seating per layout, equipment and a quiet request button.
   Seating reads its card's width: three columns in a wide card, rows otherwise. */
.page-konferens .room__intro { max-width: 30em; }
.page-konferens .room__seats { display: grid; gap: .6rem; align-content: start; align-self: stretch; container-type: inline-size; }
.page-konferens .seats { display: grid; border-top: 1px solid var(--rule); }
.page-konferens .seats__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule);
}
.page-konferens .seats__label { color: var(--fg); font-weight: 700; font-size: var(--fs-small); }
.page-konferens .seats__value { color: var(--fg-muted); font-size: var(--fs-small); white-space: nowrap; }
.page-konferens .seats__n { margin-right: .3rem; color: var(--heading); font: 600 1.625rem/1 var(--font-display); font-variant-numeric: lining-nums; }
.page-konferens .seats__note { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.45; }
@container (min-width: 24rem) {
  .page-konferens .seats { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .page-konferens .seats__item { display: grid; align-content: start; gap: .1rem; padding: .85rem .5rem .8rem 1rem; border-bottom: 0; }
  .page-konferens .seats__item:first-child { padding-left: 0; }
  .page-konferens .seats__item + .seats__item { border-left: 1px solid var(--rule); }
  .page-konferens .seats__label { color: var(--fg-muted); font-size: .875rem; }
  .page-konferens .seats__n { display: block; margin: .15rem 0 .1rem; font-size: 2.25rem; }
}
.page-konferens .room__kit { display: grid; gap: .45rem; align-content: start; align-self: stretch; padding-top: .35rem; }
.page-konferens .room__kit .overline { color: var(--fg-muted); }
.page-konferens .room__equipment { font-weight: 700; line-height: 1.45; }
.page-konferens .room__kit .spec-list { margin-top: .2rem; }

/* Tablets: one room per row, photo beside the text. */
@media (min-width: 46rem) and (max-width: 59.99rem) {
  .page-konferens .rooms .room { grid-column: 1 / -1; }
  .page-konferens .room .venue__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: none; gap: var(--gap) clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
}

/* From laptop width the three rooms share rows (subgrid), so title, seating,
   equipment and button line up across the cards like a comparison table. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 60rem) {
    .page-konferens .rooms { row-gap: 0; }
    /* No containment on the card itself: a contained grid cannot be a subgrid. */
    .page-konferens .room { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: .9rem; container-type: normal; }
    .page-konferens .room :is(.venue__inner, .venue__body) { display: contents; }
    .page-konferens .room .venue__media { margin-bottom: .6rem; }
    .page-konferens .room .venue__cta { align-self: end; justify-self: start; margin-top: .6rem; }
  }
}

/* Varför välja oss? */
.page-konferens #varfor .split__body > p { max-width: 36em; }

/* Figures in the fact dock in lining numerals, like the price cards. */
.page-konferens .factdock__value { font-variant-numeric: lining-nums; }


/* ---- page: om-oss ---- */
/* Om oss (/om-oss/): kontakt + medarbetare + formulär, historien som en lång
   läsning, miljöarbetet och integritetspolicyn – fyra livesidor på en sida.
   Everything is scoped to .page-om-oss; shared components are untouched. */

/* ---- Hero ---------------------------------------------------------------- */
/* The history question sits under the actions, set off by a fine rule. */
.page-om-oss .om-oss-hero__history {
  display: grid;
  gap: .1rem;
  justify-items: start;
  max-width: 30rem;
  margin-top: .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
  font-size: var(--fs-small);
}
/* The aerial photo is wide: a lower arch on phones keeps the manor in view. */
@media (max-width: 45.99rem) {
  .page-om-oss .page-hero__media.media--arch img { aspect-ratio: 1 / 1; }
}

/* ---- Kontakt: details beside the map; the map grows to the column's height */
.page-om-oss .om-oss-findus { align-items: stretch; }
.page-om-oss .om-oss-findus .split__body { align-content: center; }
.page-om-oss .om-oss-kontakt__intro { max-width: 34em; }
.page-om-oss .om-oss-findus .contact-list dd { font-size: 1.125rem; }

/* ---- Medarbetare ------------------------------------------------------------ */
.page-om-oss .om-oss-team-head { align-items: end; }
.page-om-oss .om-oss-team .person__name { margin-top: .15rem; }
/* Phones and small tablets (until the four-column grid): a list with a small
   arched portrait beside name, role and e-mail, so the long addresses stay on
   one line. Two columns of it from 40rem. */
@media (max-width: 51.99rem) {
  .page-om-oss .om-oss-team { grid-template-columns: none; gap: 0; border-top: 1px solid var(--rule); }
  .page-om-oss .om-oss-team .person { grid-template: 1fr repeat(3, auto) 1fr / 6.5rem minmax(0, 1fr); gap: .15rem 1.1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
  .page-om-oss .om-oss-team .person__photo { grid-area: 1 / 1 / -1 / 2; margin: 0; }
  .page-om-oss .om-oss-team .person__name { grid-area: 2 / 2; margin: 0; }
  .page-om-oss .om-oss-team .person__role { grid-area: 3 / 2; }
  .page-om-oss .om-oss-team .person__links { grid-area: 4 / 2; margin-top: .1rem; }
  .page-om-oss .om-oss-team .person__photo img { border-radius: 3.25rem 3.25rem var(--r-md) var(--r-md); }
  .page-om-oss .om-oss-team .person__links a { min-height: 1.75rem; font-size: .875rem; overflow-wrap: normal; }
}
@media (min-width: 40rem) and (max-width: 51.99rem) {
  .page-om-oss .om-oss-team { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .page-om-oss .om-oss-team .person { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .page-om-oss .om-oss-team .person__photo img { border-radius: 2.75rem 2.75rem var(--r-md) var(--r-md); }
}

/* ---- Kontaktformulär on a greige panel ------------------------------------- */
.page-om-oss .om-oss-form-panel { padding-block: clamp(3rem, 6.5vw, 6rem); }
.page-om-oss .om-oss-form-aside { --stack: 1.5rem; }
@media (min-width: 52rem) {
  .page-om-oss .om-oss-form-aside.duo__aside--sticky { top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h, 3.5rem) + 2rem); }
}
.page-om-oss .om-oss-follow { display: grid; gap: .75rem; margin-top: .25rem; }
.page-om-oss .om-oss-form-note { padding-inline: .25rem; }
.page-om-oss .om-oss-form-note .text-link { color: var(--skog); }

/* ---- Historia: an editorial long read -------------------------------------- */
/* Opener: the manor's facade with the "anno 1334" seal on its upper corner. */
.page-om-oss .om-oss-historia__opener { position: relative; }
.page-om-oss .om-oss-historia__stamp { top: -1.5rem; right: .5rem; }
@media (min-width: 46rem) {
  .page-om-oss .om-oss-historia__stamp { top: -2.25rem; right: clamp(1.5rem, 4vw, 3.5rem); width: clamp(6.5rem, 10vw, 8.5rem); }
  .page-om-oss .om-oss-historia__opener .band__card { gap: 1.25rem; }
}

/* The story: one centred reading column; the chapter year hangs in the left
   margin on wide screens and sits above the chapter title on small ones. */
.page-om-oss .om-oss-story {
  display: grid;
  grid-template-columns: [full-start wide-start text-start] minmax(0, 1fr) [text-end wide-end full-end];
  row-gap: clamp(3.5rem, 7vw, 6rem);
  margin-top: clamp(5rem, 9vw, 8.5rem);
}
/* Tablet: the text column keeps its measure, the photo runs a little wider.
   (Only once there is room for both tracks: equal growth would squeeze the text.) */
@media (min-width: 46rem) {
  .page-om-oss .om-oss-story { grid-template-columns: [full-start] minmax(0, 1fr) [wide-start text-start] minmax(0, 44rem) [text-end wide-end] minmax(0, 1fr) [full-end]; }
}
@media (min-width: 64rem) {
  .page-om-oss .om-oss-story { grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] 7rem [text-start] minmax(0, 44rem) [text-end] 7rem [wide-end] minmax(0, 1fr) [full-end]; }
}
.page-om-oss .om-oss-story > * { grid-column: text; }
.page-om-oss .om-oss-story > .om-oss-story__wide { grid-column: wide; }
.page-om-oss .om-oss-chapter { position: relative; }
.page-om-oss .om-oss-chapter > h3 { margin-top: .35rem; font-size: var(--fs-d3); font-weight: 500; line-height: 1.08; }
.page-om-oss .om-oss-chapter > h3 + p { margin-top: 1.1rem; }
.page-om-oss .om-oss-chapter__year {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--index);
  font: italic 500 clamp(1.625rem, 2.6vw, 2.25rem)/1 var(--font-display);
  letter-spacing: .01em;
}
.page-om-oss .om-oss-chapter__year::after { content: ""; width: 2.25rem; height: 1px; background: var(--deco); }
@media (min-width: 64rem) {
  .page-om-oss .om-oss-chapter > .om-oss-chapter__year {
    position: absolute;
    top: .1rem;
    right: calc(100% + clamp(2rem, 4vw, 3.5rem));
    flex-direction: column;
    align-items: flex-end;
    gap: .8rem;
    font-size: clamp(2.25rem, 3vw, 2.875rem);
  }
  .page-om-oss .om-oss-chapter > h3 { margin-top: 0; }
}
/* A drop cap opens the first chapter. */
.page-om-oss .om-oss-chapter__first::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  color: var(--skog);
  font: 500 4.35em/.8 var(--font-display);
}
.page-om-oss .om-oss-story__figure img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 3 / 2; object-fit: cover; }

/* Nils Holgersson: the lake photo beside the passage from the book. */
.page-om-oss .om-oss-nils { margin-top: clamp(5rem, 9vw, 8.5rem); }
.page-om-oss .om-oss-nils .split__body { gap: 1.25rem; }
.page-om-oss .om-oss-nils__title { font-size: var(--fs-d3); }
.page-om-oss .om-oss-nils__script { display: block; margin-top: .12em; font-size: 1.32em; line-height: 1.05; }
.page-om-oss .om-oss-nils__quote { display: grid; gap: .6rem; margin-top: .5rem; padding-left: clamp(1.1rem, 2vw, 1.6rem); border-left: 1px solid var(--deco); }
.page-om-oss .om-oss-nils__quote blockquote p {
  color: var(--heading);
  font: italic 500 clamp(1.25rem, 1.7vw, 1.5rem)/1.42 var(--font-accent);
  text-wrap: pretty;
}
.page-om-oss .om-oss-nils__cite { display: flex; align-items: baseline; gap: .6rem; color: var(--fg-muted); font-size: var(--fs-small); }
.page-om-oss .om-oss-nils__cite .quote__name { font-size: 2.25rem; }
/* Tablets: the side-by-side splits (Hitta hit, Nils Holgersson, Nutid) stack,
   so neither the text nor the photo is squeezed into five columns. */
@media (min-width: 46rem) and (max-width: 63.99rem) {
  .page-om-oss :is(.om-oss-findus, .om-oss-nils, .om-oss-nutid) { grid-template-columns: minmax(0, 1fr); }
  .page-om-oss .split:is(.om-oss-findus, .om-oss-nils, .om-oss-nutid) > :is(.split__media, .split__body) { grid-column: 1; grid-row: auto; }
  .page-om-oss .om-oss-findus .map { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .page-om-oss .om-oss-nils .split__media img { aspect-ratio: 3 / 2; }
  .page-om-oss .om-oss-nutid .split__media::before { inset: 14% -1.5rem -1.5rem 22%; }
}
@media (max-width: 45.99rem) {
  .page-om-oss .om-oss-nils .split__media img { aspect-ratio: 4 / 3.2; }
}

/* Nutid: today's manor beside the photo, with quiet links to the menu pages. */
.page-om-oss .om-oss-nutid { margin-top: clamp(5rem, 9vw, 8.5rem); }
.page-om-oss .om-oss-nutid__head { display: grid; gap: .35rem; }
.page-om-oss .om-oss-nutid__head h3 { font-size: var(--fs-d3); }
.page-om-oss .om-oss-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.page-om-oss .om-oss-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .35rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--heading);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.page-om-oss .om-oss-pills a:hover { border-color: var(--greige); background: var(--greige-soft); }

/* ---- Miljö: the goal on a sage panel, the three areas as rows below --------- */
.page-om-oss .om-oss-miljo__panel { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.page-om-oss .om-oss-miljo__intro .lead { max-width: 30em; font-weight: 400; }
.page-om-oss .om-oss-miljo__goals h3 { margin-top: 0; font-size: var(--fs-d3); font-weight: 500; }
@media (min-width: 52rem) {
  .page-om-oss .om-oss-miljo__goals { padding-top: .35rem; }
}
.page-om-oss .om-oss-pillars { margin-top: clamp(2.5rem, 5vw, 4rem); }
.page-om-oss .om-oss-pillar {
  display: grid;
  gap: 1.75rem var(--gap);
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
  border-top: 1px solid var(--rule);
}
.page-om-oss .om-oss-pillar:last-child { padding-bottom: 0; }
.page-om-oss .om-oss-pillar__head { display: grid; gap: .9rem; align-content: start; }
.page-om-oss .om-oss-pillar__head > p { max-width: 34em; color: var(--fg-muted); }
.page-om-oss .om-oss-pillar__num { color: var(--index); font: italic 500 clamp(1.75rem, 2.4vw, 2.25rem)/1 var(--font-display); }
.page-om-oss .om-oss-pillar__label { color: var(--heading); font-weight: 700; }
.page-om-oss .om-oss-pillar__areas { margin-top: .6rem; }
.page-om-oss .om-oss-pillar__note { display: block; margin-top: .35rem; color: var(--fg-muted); font-size: var(--fs-small); }
.page-om-oss .om-oss-pillar__notice { margin-top: 1.75rem; background: var(--salvia-soft); }
.page-om-oss .om-oss-pillar__notice .notice__title { color: var(--skog-deep); }
.page-om-oss .om-oss-pillar__notice > .icon { grid-row: auto; color: var(--skog); }
.page-om-oss .om-oss-pillar__notice > p:not(.notice__title) { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .page-om-oss .om-oss-pillar { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .page-om-oss .om-oss-pillar__head { grid-column: 1 / span 5; }
  .page-om-oss .om-oss-pillar__body { grid-column: 7 / -1; padding-top: .35rem; }
}

/* ---- Integritetspolicy: numbered contents beside the prose ----------------- */
.page-om-oss .om-oss-toc { display: grid; gap: .6rem; width: 100%; margin-top: .5rem; }
@media (min-width: 52rem) {
  .page-om-oss .om-oss-policy > .duo__aside { align-self: stretch; }
  .page-om-oss .om-oss-toc { position: sticky; top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h, 3.5rem) + 1.75rem); }
}
.page-om-oss .om-oss-toc__list { border-top: 1px solid var(--rule); counter-reset: toc; }
.page-om-oss .om-oss-toc__list > li { border-bottom: 1px solid var(--rule); counter-increment: toc; }
.page-om-oss .om-oss-toc__list a {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .6rem 0;
  color: var(--heading);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.page-om-oss .om-oss-toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  min-width: 1.4rem;
  color: var(--index);
  font: italic 500 1.125rem/1 var(--font-display);
  letter-spacing: .04em;
}
.page-om-oss .om-oss-toc__list a:hover { text-decoration: underline; }
.page-om-oss .om-oss-policy .prose h4 { margin-top: .9em; }