/* ==========================================================================
   Hotel Statt — design system, direction "Editorial boutique"
   1 Tokens · 2 Base · 3 Typography · 4 Layout, themes & slabs · 5 Site chrome
   6 Components · 7 Utilities · 8 Motion & print
   Every component is documented with copy-paste markup on /styleguide/.
   ========================================================================== */

/* 1. TOKENS ============================================================== */
/* Size-matched local stand-ins for Bebas Neue, used while the web font loads
   (display=swap) or when Google Fonts is blocked, so headlines keep roughly
   the same width instead of reflowing into a much wider sans-serif. */
@font-face { font-family: "Bebas Fallback DIN"; src: local("DIN Condensed Bold"), local("DINCondensed-Bold"); size-adjust: 96.5%; }
@font-face { font-family: "Bebas Fallback Narrow"; src: local("Arial Narrow"), local("ArialNarrow"); size-adjust: 71.5%; }
@font-face { font-family: "Bebas Fallback Impact"; src: local("Impact"); size-adjust: 78.5%; }

:root {
  /* Graphic profile — exact values */
  --petrol: #304D4D;
  --ivory: #F5F1E8;
  --terracotta: #B88968;
  --coral: #E05F5A;
  --beige: #E4D7C4;
  --teal: #6F9693;
  --espresso: #332D29;
  --slate: #59656A;
  --grey: #929EA0;

  /* Tints and shades of the profile colours */
  --petrol-deep: #223939;
  --petrol-soft: #42605F;
  --coral-deep: #C94C47;
  --ivory-soft: #FBF8F3;
  --beige-soft: #EDE4D6;
  --teal-soft: #CFDAD5;
  --terracotta-soft: #C9A083;   /* decoration and labels on petrol / espresso */
  --terracotta-deep: #8C6448;   /* terracotta that reaches 4.6:1 on ivory */
  --terracotta-ink: #7A553B;    /* … and 4.6:1 on beige */
  --espresso-soft: #463E39;
  --espresso-deep: #28231F;
  --ink: #26211E;
  --white: #fff;

  --font-display: "Bebas Neue", "Bebas Fallback DIN", "Bebas Fallback Narrow", "Bebas Fallback Impact", sans-serif;
  --font-accent: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(3.75rem, 19.5vw, 9rem);
  --fs-d1: clamp(3.25rem, 9vw, 7.5rem);
  --fs-d2: clamp(2.625rem, 6vw, 5.25rem);
  --fs-d3: clamp(2.125rem, 3.6vw, 3.25rem);
  --fs-d4: clamp(1.75rem, 2.3vw, 2.125rem);
  --fs-d5: 1.375rem;
  --fs-kicker: clamp(1.3125rem, 1.8vw, 1.625rem);
  --fs-accent: clamp(1.5rem, 2.6vw, 2.375rem);
  --fs-lead: clamp(1.125rem, 1.35vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: clamp(.9375rem, .9rem + .15vw, 1rem);
  --fs-label: .8125rem;

  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --container: 82.5rem;
  --gap: clamp(1rem, 2vw, 1.5rem);
  --section-y: clamp(4rem, 9vw, 8.5rem);
  --slab-r: clamp(1.75rem, 4.5vw, 3.75rem);

  --r-sm: .625rem;
  --r-md: 1.125rem;
  --r-lg: 1.75rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(51 45 41 / .06), 0 14px 34px -20px rgb(51 45 41 / .4);
  --shadow-lg: 0 34px 70px -34px rgb(34 57 57 / .6);
  --ease: cubic-bezier(.2, .7, .2, 1);

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

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

/* Themes: every component reads these, so any block can sit on any ground.
   --link is the colour of text links and outline buttons (dark ink on teal). */
:root,
.theme-ivory {
  --bg: var(--ivory);
  --fg: var(--espresso);
  --fg-muted: var(--slate);
  --heading: var(--petrol);
  --kicker: var(--petrol);
  --link: var(--petrol);
  --deco: var(--terracotta);
  --index: var(--terracotta-deep);
  --rule: rgb(48 77 77 / .2);
  --surface: var(--ivory-soft);
  --block: var(--beige);
  --focus: var(--petrol);
}

.theme-beige {
  --bg: var(--beige);
  --fg: var(--espresso);
  --fg-muted: #55504A;
  --heading: var(--petrol);
  --kicker: var(--petrol);
  --link: var(--petrol);
  --deco: var(--terracotta-deep);
  --index: var(--terracotta-ink);
  --rule: rgb(48 77 77 / .26);
  --surface: var(--ivory);
  --block: var(--petrol);
  --focus: var(--petrol);
}

.theme-petrol,
.site-header.is-menu-open {
  --bg: var(--petrol);
  --fg: var(--ivory);
  --fg-muted: rgb(245 241 232 / .8);
  --heading: var(--ivory);
  --kicker: var(--beige);
  --link: var(--ivory);
  --deco: var(--terracotta-soft);
  --index: var(--terracotta-soft);
  --rule: rgb(245 241 232 / .22);
  --surface: var(--petrol-soft);
  --block: var(--teal);
  --focus: var(--ivory);
}

/* Dusty teal carries dark type: ivory on teal only reaches 3.2:1. */
.theme-teal {
  --bg: var(--teal);
  --fg: var(--ink);
  --fg-muted: var(--ink);
  --heading: var(--petrol-deep);
  --kicker: var(--ink);
  --link: var(--ink);
  --deco: var(--ivory);
  --index: var(--ink);
  --rule: rgb(38 33 30 / .3);
  --surface: var(--teal-soft);
  --block: var(--petrol);
  --focus: var(--ink);
}

/* Evening: restaurant, wine bar and everything after dark. */
.theme-evening {
  --bg: var(--espresso);
  --fg: var(--ivory);
  --fg-muted: rgb(245 241 232 / .78);
  --heading: var(--ivory);
  --kicker: var(--terracotta-soft);
  --link: var(--ivory);
  --deco: var(--terracotta);
  --index: var(--terracotta-soft);
  --rule: rgb(201 160 131 / .34);
  --surface: var(--espresso-soft);
  --block: var(--terracotta);
  --focus: var(--ivory);
}

[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). */
@media (min-width: 45rem) {
  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(--ivory);
  color: var(--espresso);
  font: 400 var(--fs-body)/1.65 var(--font-body);
  font-optical-sizing: auto;
  -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; }
table { border-collapse: collapse; }

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

::selection { background: var(--petrol); color: var(--ivory); }

.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(--petrol);
  color: var(--ivory);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* 3. TYPOGRAPHY ========================================================== */
h1, h2, h3,
.display, .display--1, .display--2, .display--3, .display--4, .display--5 {
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .018em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere; /* a long word in a fallback font wraps instead of widening the page */
}

h1, .display--1 { font-size: var(--fs-d1); line-height: .92; }
h2, .display--2 { font-size: var(--fs-d2); line-height: .94; }
h3, .display--3 { font-size: var(--fs-d3); }
.display--4 { font-size: var(--fs-d4); line-height: 1; }
.display--5 { font-size: var(--fs-d5); line-height: 1.05; letter-spacing: .03em; }

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

/* Eyebrow: the default label above a headline. DM Sans caps behind a short
   terracotta rule; an optional folio number sits in front as ornament.
   A hanging indent lines wrapped lines up with the text after the rule. */
.eyebrow {
  --hang: 2.75rem;
  padding-left: var(--hang);
  color: var(--kicker);
  font: 600 var(--fs-label)/1.35 var(--font-body);
  letter-spacing: .16em;
  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: 2rem;
  height: 1.5px;
  margin-right: .75rem;
  background: var(--deco);
  vertical-align: .3em;
}
.eyebrow .notranslate { white-space: nowrap; }
.eyebrow:has(.eyebrow__folio) { --hang: 4.6rem; }
.eyebrow:has(.eyebrow__folio)::before { content: none; }
.eyebrow__folio {
  display: inline-block;
  width: var(--hang);
  color: var(--index);
  font: 400 1.25rem/1 var(--font-display);
  letter-spacing: .1em;
  text-indent: 0;
  white-space: nowrap;
}
.eyebrow__folio::after { margin-left: .6rem; }
/* Sentence-case lead-in for an eyebrow that is a whole phrase leading into
   the headline ("Utforska allt Katrineholm har att erbjuda på"). */
.eyebrow--text { font-size: var(--fs-small); letter-spacing: 0; text-transform: none; }

/* Cormorant italic, used sparingly: hero accents, restaurant, wine bar, quotes. */
.kicker {
  color: var(--kicker);
  font: italic 500 var(--fs-kicker)/1.15 var(--font-accent);
  letter-spacing: .005em;
  text-wrap: balance;
}

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

/* VINoMAT keeps its lowercase "o": Bebas has no lowercase, so in display
   type the letter is set in Cormorant italic. Markup: VIN<i>o</i>MAT. */
.vinomat { white-space: nowrap; text-transform: none; }
.vinomat i { font-style: normal; }
:is(h1, h2, h3, .display, [class*="display--"], .tile__title, .factdock__value) .vinomat i {
  font: italic 600 .86em/1 var(--font-accent);
  letter-spacing: 0;
}

/* Small caps label in DM Sans for meta information (no rule). */
.overline {
  color: var(--fg-muted);
  font: 600 var(--fs-label)/1.3 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

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

/* Eyebrow + headline + accent, stacked with optical spacing. */
.heading-group { display: grid; gap: .65rem; 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::after { content: ""; display: inline-block; width: 2rem; height: 1.5px; margin-left: .75rem; background: var(--deco); vertical-align: .3em; }

/* 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% 1.5px no-repeat transparent;
  color: var(--link);
  font-weight: 600;
  line-height: 1.3;
  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: 600; 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 ivory page
   rises into its lower edge with the same radius, so the slab must be
   followed by an ivory section. --open-top drops the upper shoulders
   (a hero under a header of the same colour). */
.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(--ivory);
  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 ivory page (closing bands). */
.section--panel {
  margin-inline: clamp(.5rem, 1.6vw, 1.5rem);
  border-radius: var(--r-xl);
}

/* Decorative double arch rising from the lower right edge of a colour block.
   Only from 48rem: on phones the text runs the full width and the lines would
   cross it. Beside a .cta-band__aside it stays low, under the aside. */
.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: 1.5px solid var(--deco);
  border-bottom: 0;
  border-radius: 50vw 50vw 0 0;
  outline: 1.5px solid var(--deco);
  outline-offset: clamp(.75rem, 1.4vw, 1.25rem);
  opacity: .5;
  pointer-events: none;
}
.slab.has-arches::before { bottom: var(--slab-r); }
@media (min-width: 48rem) {
  .has-arches::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. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem var(--gap);
  margin-bottom: clamp(2rem, 4.5vw, 4rem);
}
.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); }
@media (min-width: 60rem) {
  .section-head { 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) */
.topbar {
  display: none;
  border-bottom: 1px solid var(--rule);
  background: var(--ivory);
  color: var(--slate);
  font-size: var(--fs-label);
  font-weight: 500;
}
.topbar--petrol { border-color: transparent; background: var(--petrol-deep); color: rgb(245 241 232 / .82); --focus: var(--ivory); }
.topbar--evening { border-color: transparent; background: var(--espresso-deep); color: rgb(245 241 232 / .8); --focus: var(--ivory); }
.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: 1.25rem; }
.topbar__bw { display: inline-flex; padding: .2rem .45rem; border-radius: .35rem; background: var(--white); }
.topbar__bw img { width: auto; height: 1rem; }
.topbar__note { display: none; }
.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; }
@media (min-width: 45rem) {
  .topbar { display: block; }
}
@media (min-width: 62rem) {
  .topbar__note { display: inline; }
}

/* 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(--deco); }
.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='%2359656A' 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: 500 var(--fs-label)/1.4 var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.gt_selector option { color: var(--espresso); }
:is(.topbar--petrol, .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='%23E4D7C4' 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 hotel's 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(5.5rem, 9vw, 7rem); }
@media (min-width: 70rem) {
  .wordmark__logo { height: 3.75rem; }
}

/* Header: theme-ivory, theme-petrol or theme-evening (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.theme-petrol,
.site-header.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: 600;
  font-size: var(--fs-small);
  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: 79.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: 600 var(--fs-small)/1 var(--font-body);
  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-petrol 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: .25rem var(--gutter) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--petrol);
    color: var(--ivory);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.5rem);
    --focus: var(--ivory);
  }
  /* 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: .8rem 0 .9rem; border-bottom: 1px solid rgb(245 241 232 / .16); }
  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
    color: var(--ivory);
    font: 400 2.25rem/1 var(--font-display);
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .nav__link .icon { width: 1.25rem; height: 1.25rem; color: var(--terracotta-soft); }
  .nav__link[aria-current="page"] { color: var(--beige); text-decoration: underline; text-decoration-color: var(--terracotta-soft); text-decoration-thickness: 2px; text-underline-offset: .15em; }
  .nav__extra { display: grid; gap: .15rem; margin-top: 1.25rem; }
  .nav__contact {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    color: var(--ivory);
    font-weight: 600;
    text-decoration: none;
  }
  .nav__contact .icon, .nav__extra .lang > .icon { color: var(--terracotta-soft); }
  .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: 600; }
}
@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(.25rem, 1vw, 1rem); }
  .nav__item { position: relative; display: flex; align-items: center; }
  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .9rem .4rem;
    color: var(--heading);
    font: 500 .96875rem/1 var(--font-body);
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: .4rem;
    right: .4rem;
    bottom: .45rem;
    height: 1.5px;
    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 .icon { width: .95rem; height: .95rem; color: var(--deco); }
  .nav__extra { display: none; }
}

/* Mobile action bar: Boka rum · Ring · one contextual action (front matter).
   It yields (slides away) while an in-page coral 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(48 77 77 / .2);
  background: rgb(245 241 232 / .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(--petrol);
  font: 600 .8125rem/1.1 var(--font-body);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.actionbar__item .icon { width: 1.25rem; height: 1.25rem; }
/* The coral cell follows the page's primary action: the room by default,
   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: .4rem;
  background: var(--coral);
  color: var(--white);
  font-size: 1.1875rem;
  font-weight: 700;
}
:is(.actionbar--room .actionbar__item--room, .actionbar--context .actionbar__item--context) .icon { width: 1.15rem; height: 1.15rem; }
.actionbar--context { grid-template-columns: 1fr .8fr 1.45fr; }
@media (max-width: 44.99rem) {
  body { padding-bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 45rem) {
  .actionbar { display: none; }
}

/* Footer */
.site-footer { position: relative; overflow: hidden; padding-top: clamp(3.5rem, 7vw, 6rem); }
.site-footer__top { display: grid; gap: 2.5rem var(--gap); }
.site-footer__brand { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.site-footer__tagline { max-width: 24em; color: var(--fg-muted); }
.site-footer__heading {
  margin-bottom: 1rem;
  font-size: 1.375rem;
  letter-spacing: .08em;
}
.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(--ivory); 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: 1rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
  font-size: var(--fs-label);
}
.site-footer__bw { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.site-footer__bw-logo {
  width: auto;
  height: 2.125rem;
  padding: .45rem .7rem;
  border-radius: .5rem;
  background: var(--white);
}
.site-footer__bw span { text-wrap: pretty; }
.site-footer__mark {
  margin-bottom: -.17em;
  color: rgb(245 241 232 / .07);
  font: 400 clamp(5rem, 24.5vw, 26rem)/.8 var(--font-display);
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
/* Phones: one column. Tablet and small laptops: the brand block on its own
   row (logo · tagline · social), then Kontakt / Meny / Övrigt. Wide: one row. */
@media (min-width: 40rem) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 48rem) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .9fr); }
  .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: 4fr 2.4fr 3.4fr 2.2fr; }
  .site-footer__brand { grid-column: auto; grid-template-columns: none; align-items: start; gap: 1.25rem; }
}

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

/* Buttons — DM Sans per the profile. Coral is the one primary action;
   its label stays >= 19px bold for contrast. */
.btn {
  --btn-bg: var(--petrol);
  --btn-fg: var(--ivory);
  --btn-bd: var(--petrol);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3.375rem;
  padding: .5rem clamp(1.25rem, 4vw, 1.75rem);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 1.0625rem/1.15 var(--font-body);
  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: var(--petrol-deep); --btn-bd: var(--petrol-deep); }
.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(--coral); --btn-bd: var(--coral); --btn-fg: var(--white); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.005em; }
.btn--primary:hover { --btn-bg: var(--coral-deep); --btn-bd: var(--coral-deep); }

.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(--ivory); --btn-bd: var(--ivory); --btn-fg: var(--petrol); }
.btn--light:hover { --btn-bg: var(--white); --btn-bd: var(--white); }

.btn--sm { min-height: 2.875rem; padding: .35rem 1.35rem; }
.btn--block { width: 100%; }

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

/* Round stamp: decorative (aria-hidden), the fact it carries is repeated as text nearby. */
.stamp {
  position: absolute;
  z-index: 1;
  width: clamp(5.75rem, 9vw, 7.75rem);
  aspect-ratio: 1;
  transform: rotate(-10deg);
  filter: drop-shadow(0 12px 18px rgb(34 57 57 / .28));
}
.stamp__bg { fill: var(--terracotta); }
.stamp__ring { fill: none; stroke: var(--espresso); stroke-width: .6; opacity: .45; }
.stamp__text { fill: var(--espresso); font: 400 10.5px var(--font-display); letter-spacing: .2em; }
.stamp__small { fill: var(--espresso); font: italic 500 13px var(--font-accent); }
.stamp__big { fill: var(--espresso); font: 400 32px var(--font-display); letter-spacing: .02em; }
.stamp--ivory .stamp__bg { fill: var(--ivory); stroke: var(--terracotta); stroke-width: .8; }
.stamp--ivory :is(.stamp__text, .stamp__small, .stamp__big) { fill: var(--petrol); }

/* Arch: echoes the hotel's arched windows. Use for one hero image per page. */
.media--arch { container-type: inline-size; }
.media--arch img { border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg); }
/* Terracotta hairline that follows the arch at a distance. */
.media--framed img { outline: 1.5px solid var(--deco); outline-offset: clamp(.45rem, 1vw, .8rem); }

/* Start-page hero: copy, booking bar, links and an arched photo */
.hero { padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); }
/* minmax(0, 1fr): the track never grows to fit the headline (a fallback font
   is much wider than Bebas Neue while the web font loads). */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem var(--gap); }
.hero__copy { display: grid; justify-items: start; }
.hero__title {
  margin-top: .85rem;
  font-size: var(--fs-hero);
  line-height: .86;
  letter-spacing: .01em;
}
.hero__title-accent {
  display: block;
  margin: 0 0 .06em .04em;
  font: italic 500 .34em/1 var(--font-accent);
  letter-spacing: 0;
  text-transform: none;
}
.hero__title-name { display: block; }
.hero__lead { max-width: 30em; margin-top: 1rem; }
.hero__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: -.5rem; }
.hero__media { position: relative; container-type: inline-size; isolation: isolate; margin: .5rem .75rem .75rem 0; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: 32% -.75rem -.75rem 30%;
  z-index: -1;
  border-radius: var(--r-lg);
  background: var(--block);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 50cqw 50cqw var(--r-lg) var(--r-lg);
  object-fit: cover;
}
.hero__media .stamp { right: -.5rem; top: -.75rem; }
.hero .booking { position: relative; z-index: 2; }

@media (min-width: 40rem) and (max-width: 62.49rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
  .hero__copy { grid-column: 1; grid-row: 1; }
  .hero__links { grid-column: 1; grid-row: 2; margin-top: 0; }
  .hero__media { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .hero__media img { aspect-ratio: 4 / 4.6; }
  .hero .booking { grid-column: 1 / -1; grid-row: 3; margin-top: -1rem; }
  .hero__title { font-size: clamp(4.25rem, 10.6vw, 6.5rem); }
  .hero__media .stamp { right: auto; left: -1.75rem; top: 12%; }
}

@media (min-width: 62.5rem) {
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto;
    gap: 0 var(--gap);
    min-height: clamp(27rem, 100svh - var(--topbar-h) - var(--header-h) - 4.5rem, 44rem);
  }
  .hero__copy { grid-column: 1 / span 7; grid-row: 1; align-self: end; padding-block: 1.5rem .75rem; }
  .hero__title { font-size: clamp(5rem, min(12vw, (100svh - 32rem) * .72), 11.5rem); }
  .hero__links { grid-column: 1 / span 7; grid-row: 2; margin: 0 0 1.25rem; }
  .hero .booking { grid-column: 1 / span 10; grid-row: 3; margin-bottom: 1.25rem; }
  .hero__media { grid-column: 8 / -1; grid-row: 1 / -1; margin: 0; }
  .hero__media::before { inset: 26% -1.5rem -1.5rem 32%; }
  .hero__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .hero__media .stamp { right: auto; left: -2.5rem; top: 14%; }
}

/* Booking bar: arrival / departure / rooms -> Best Western in a new tab.
   Lays itself out from its own width; turns ivory on petrol and espresso. */
.booking {
  --bk-bg: var(--petrol);
  --bk-fg: var(--ivory);
  --bk-field: rgb(245 241 232 / .09);
  --bk-field-hover: rgb(245 241 232 / .15);
  --bk-label: var(--beige);
  --bk-muted: rgb(245 241 232 / .82);
  --focus: var(--ivory);
  container-type: inline-size;
  padding: .625rem;
  border-radius: var(--r-lg);
  background: var(--bk-bg);
  box-shadow: var(--shadow-lg);
  color: var(--bk-fg);
  color-scheme: dark;
}
:is(.theme-petrol, .theme-evening) .booking {
  --bk-bg: var(--ivory);
  --bk-fg: var(--espresso);
  --bk-field: var(--white);
  --bk-field-hover: var(--ivory-soft);
  --bk-label: var(--slate);
  --bk-muted: var(--slate);
  --focus: var(--petrol);
  box-shadow: none;
  color-scheme: light;
}
.booking__fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .5rem; }
.booking__field {
  grid-column: span 6;
  display: grid;
  gap: .05rem;
  min-width: 0;
  padding: .55rem .75rem .5rem;
  border-radius: var(--r-md);
  background: var(--bk-field);
  cursor: pointer;
  transition: background-color .2s;
}
.booking__field:hover { background: var(--bk-field-hover); }
.booking__field:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.booking__field--rooms { grid-column: span 5; }
.booking__label {
  color: var(--bk-label);
  font: 600 var(--fs-label)/1.3 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.booking__input {
  width: 100%;
  min-width: 0;
  min-height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bk-fg);
  font: 600 1rem/1.4 var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.booking__input:focus { outline: none; }
.booking__input::-webkit-date-and-time-value { text-align: left; }
.booking__input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
select.booking__input {
  padding-right: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F1E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") right center / 1.1rem no-repeat;
}
:is(.theme-petrol, .theme-evening) select.booking__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23304D4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
}
.booking__submit { grid-column: span 7; min-height: 3.5rem; padding-inline: 1rem; }
.booking__error {
  margin: .5rem .25rem 0;
  padding: .6rem .9rem;
  border-left: 4px solid var(--coral);
  border-radius: .35rem var(--r-sm) var(--r-sm) .35rem;
  background: var(--ivory);
  color: var(--espresso);
  font-size: var(--fs-small);
  font-weight: 600;
}
.booking__meta {
  display: grid;
  gap: .45rem 1.25rem;
  padding: .6rem .35rem .1rem;
  color: var(--bk-muted);
  font-size: .875rem;
  line-height: 1.4;
}
/* Narrow: three score columns (value over source); wide: one line. */
.booking__scores { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: .1rem .75rem; }
.booking__scores li { display: grid; }
.booking__scores strong { color: var(--bk-fg); font: 400 1.3125rem/1 var(--font-display); letter-spacing: .03em; }
.booking__note { text-wrap: pretty; }
.booking__nights { color: var(--bk-fg); font-weight: 700; }
.booking__nights:not(:empty)::after { content: " ·"; font-weight: 400; }
.booking__field:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--coral); }
/* Very narrow (a booking bar inside a panel on a 360px phone): one field per row. */
@container (max-width: 18.5rem) {
  .booking__field, .booking__field--rooms, .booking__submit { grid-column: 1 / -1; }
}
@container (min-width: 30rem) {
  .booking__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .booking__scores { display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
  .booking__scores li { display: inline-flex; align-items: baseline; gap: .3rem; }
}
@container (min-width: 40rem) {
  .booking__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .72fr) auto; }
  .booking__field, .booking__field--rooms, .booking__submit { grid-column: auto; }
  .booking__field { padding: .65rem 1.1rem .6rem; }
  .booking__input { font-size: 1.0625rem; }
  .booking__submit { min-height: 100%; padding-inline: 2rem; }
  .booking__meta { padding: .7rem .75rem .1rem; }
}

/* Proof strip: review scores, Green Key and Best Western, right under the booking bar */
.proof { padding-block: 0 clamp(.75rem, 2vw, 1.5rem); }
.proof__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem .5rem;
  align-items: center;
  padding-block: .6rem;
  border-block: 1px solid var(--rule);
}
.proof__item { display: flex; justify-content: center; min-width: 0; }
.proof__item--certs {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.5rem;
  padding-top: .35rem;
  border-top: 1px solid var(--rule);
}
/* Certificates only (under a booking bar, which already carries the scores). */
.proof__item--certs:first-child { padding-top: 0; border-top: 0; }
.proof__score {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: .55rem;
  align-items: center;
  min-height: 2.75rem;
  color: var(--fg);
  text-decoration: none;
}
.proof__logo { grid-row: 1 / 3; width: 2.25rem; height: 2.25rem; border: 1px solid var(--rule); border-radius: 50%; background: var(--white); object-fit: cover; }
.proof__value { align-self: end; color: var(--heading); font: 400 1.625rem/.9 var(--font-display); letter-spacing: .03em; }
.proof__value small { color: var(--fg-muted); font-size: .6em; }
.proof__source { align-self: start; color: var(--fg-muted); font-size: var(--fs-label); font-weight: 600; line-height: 1.25; }
a.proof__score:hover .proof__source { color: var(--heading); text-decoration: underline; }
.proof__cert {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  color: var(--heading);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.proof__cert .icon { color: var(--teal); }
a.proof__cert:hover { text-decoration: underline; }
.proof__bw { display: inline-flex; padding: .4rem .75rem; border: 1px solid var(--rule); border-radius: .55rem; background: var(--white); }
.proof__bw img { width: auto; height: 1.5rem; }
@media (min-width: 62.5rem) {
  .proof__list { display: flex; justify-content: center; gap: 0; padding-block: .75rem; }
  .proof__item { padding-inline: clamp(1rem, 2.2vw, 2.25rem); }
  .proof__item + .proof__item { border-left: 1px solid var(--rule); }
  .proof__item--certs { padding-top: 0; border-top: 0; }
}

/* 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: .2rem; align-content: start; padding: 1.25rem 1rem 1.25rem 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: 400 clamp(2.5rem, 4.6vw, 4rem)/.9 var(--font-display);
  letter-spacing: .02em;
}
.fact__value small { font-size: .5em; letter-spacing: .04em; }
.fact__label { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.35; }
@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.75rem 1.5rem 1.75rem 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; }
.score__value {
  grid-column: 1 / -1;
  color: var(--heading);
  font: 400 clamp(3.5rem, 6vw, 5rem)/.85 var(--font-display);
  letter-spacing: .02em;
}
.score__value small { margin-left: .2em; color: var(--fg-muted); font: 500 .26em/1 var(--font-body); letter-spacing: .02em; text-transform: none; }
.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: 400 1.5rem/1 var(--font-display); letter-spacing: .03em; }
.score-badge .icon { color: var(--teal); }
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.1s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.045); }
.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: .7rem 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: .25rem; }
.tile__kicker { color: var(--fg-muted); font: 600 var(--fs-label)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.tile__title { font: 400 clamp(1.375rem, 2.1vw, 1.875rem)/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.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); }
.theme-evening .tile__kicker { color: var(--kicker); }
/* Trio: three equal tiles (the evening slab); 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: .9rem 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; }
}

/* 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 { content: none; }
.split__body { display: grid; gap: 1.25rem; 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; }
}

/* 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-size: var(--fs-small); }

/* 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: 1rem;
  justify-items: start;
  margin: -4.5rem 0 0;
  padding: clamp(1.25rem, 4vw, 3.25rem);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.band__card .btn, .band__card .link-arrow { 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 */
.feature-card { overflow: hidden; border-radius: var(--r-lg); }
.feature-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.feature-card__body { display: grid; gap: .9rem; justify-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); }

/* 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.35rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger__title { font-size: var(--fs-d4); line-height: 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" style fact lines. Each item is a flex
   item, so it moves to the next line whole ("bio 25" and "U-sittning 36"
   stay together) and only wraps inside if it is longer than the line. */
.dots { display: flex; flex-wrap: wrap; gap: .1rem 0; }
.dots > li:not(:last-child)::after { content: "·"; margin-inline: .6em; color: var(--deco); font-weight: 700; }

/* Page hero for inner pages: copy + arched photo, optional fact dock.
   Default sits on ivory; .slab.slab--open-top + theme-petrol / theme-evening
   continues the header colour and rounds into the ivory page below. */
.page-hero { padding-block: clamp(2rem, 4.5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem); }
.page-hero__grid { display: grid; gap: 2rem var(--gap); align-items: center; }
.page-hero__copy { display: grid; gap: 1rem; justify-items: start; }
.page-hero__title { font-size: clamp(3.25rem, min(8vw, 11.5svh), 7rem); }
.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(--petrol);
  box-shadow: var(--shadow-lg);
  color: var(--ivory);
  font-weight: 600;
  line-height: 1.2;
}
.page-hero__chip .icon { color: var(--beige); }
.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 ivory 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; }
}
@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; }
}
/* Laptop and up: the photo runs down beside the dock, which overlaps its
   lower left corner; it stops above the ivory 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.
   White on light and petrol grounds, dark espresso card in the evening theme. */
.factdock {
  --dock-bg: var(--white);
  --dock-fg: var(--espresso);
  --dock-item: var(--ivory);
  --dock-label: var(--slate);
  --dock-value: var(--petrol);
  --dock-rule: rgb(146 158 160 / .5);
  --focus: var(--petrol);
  display: grid;
  gap: .5rem;
  padding: .5rem;
  border-radius: var(--r-lg);
  background: var(--dock-bg);
  box-shadow: var(--shadow-lg);
  color: var(--dock-fg);
}
.theme-evening .factdock {
  --dock-bg: var(--espresso-soft);
  --dock-fg: var(--ivory);
  --dock-item: rgb(245 241 232 / .06);
  --dock-label: var(--beige);
  --dock-value: var(--ivory);
  --dock-rule: rgb(201 160 131 / .4);
  --focus: var(--ivory);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .65);
}
/* 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: .2rem; min-width: 0; padding: .6rem .8rem .55rem; 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: .1em; text-transform: uppercase; text-wrap: balance; }
.factdock__value { color: var(--dock-value); font: 400 clamp(1.5rem, 7.2vw, 1.75rem)/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.factdock__value--price { color: var(--coral); font-size: clamp(1.875rem, 9vw, 2.125rem); }
.factdock__note { color: var(--dock-label); font-size: var(--fs-small); line-height: 1.3; text-wrap: balance; }
.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 .25rem .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: .55rem 1.25rem .5rem; 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: 1.875rem; }
  .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 coral, 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.6vw, 2.5rem);
  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); line-height: 1; }
.price-card__price {
  color: var(--coral);
  font: 400 clamp(3.75rem, 6vw, 5rem)/.85 var(--font-display);
  letter-spacing: .01em;
}
.price-card__price small { margin-left: .12em; font-size: .42em; letter-spacing: .04em; }
.price-card__unit { margin-top: -.75rem; 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); }
.price-card--featured .price-card__price { color: var(--heading); }
@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.6vw, 2.5rem) + 1rem); }
}

/* Lists */
.check-list { display: grid; gap: .7rem; }
.check-list > li { position: relative; padding-left: 2rem; line-height: 1.45; }
.check-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  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.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.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.4; }
.spec-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .4rem;
  height: .4rem;
  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); }

/* 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, 4rem) 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(--ivory);
  color: var(--petrol);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
}
.venue__cap .icon { width: 1.1rem; height: 1.1rem; }
.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(--slate); font-size: .875rem; font-weight: 600; 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 petrol 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: .8rem .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: .1em; text-transform: uppercase; }
.data-table tbody th { color: var(--heading); font: 400 1.25rem/1.1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.data-table td.is-num, .data-table th.is-num { text-align: center; }
.data-table td.is-num { font-weight: 600; }
.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(--petrol); color: var(--ivory); }
.data-table--capacity tbody tr:nth-child(even) { background: rgb(228 215 196 / .35); }
.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.0625rem; }
  .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); line-height: 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. Ticketed events get the coral button,
   everything else the outline button. */
.event-card { display: grid; gap: 1.5rem var(--gap); padding-block: clamp(1.75rem, 3vw, 2.5rem); 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: .6rem .75rem .5rem;
  border-radius: var(--r-md);
  background: var(--ivory);
  color: var(--petrol);
  font: 400 2.5rem/.85 var(--font-display);
  letter-spacing: .02em;
}
.event-card__date small { font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.event-card__body { display: grid; gap: .8rem; 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: 600; }
.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); }
}
.price { color: var(--coral); font: 400 1.75rem/1 var(--font-display); letter-spacing: .03em; }
:is(.theme-petrol, .theme-evening) .price { color: var(--beige); }

.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.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.event-row__date { grid-row: span 3; align-self: start; color: var(--heading); font: 400 2.25rem/.9 var(--font-display); letter-spacing: .02em; }
.event-row__date small { display: block; color: var(--fg-muted); font: 600 var(--fs-label)/1.5 var(--font-body); letter-spacing: .12em; 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: 600; }
.event-row__action { justify-self: start; margin-top: .35rem; }
@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; }
}

/* Menu: dishes in Cormorant, prices with leaders */
.menu { display: grid; gap: 2rem; }
.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.15 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; font: 400 1.5rem/1 var(--font-display); letter-spacing: .04em; font-style: normal; }
.menu__desc { max-width: 34em; color: var(--fg-muted); }
.menu__note { color: var(--kicker); font: italic 500 1.25rem/1.3 var(--font-accent); }

/* Opening hours */
.hours { display: grid; }
.hours__row { display: flex; align-items: baseline; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.hours__row dt { font-weight: 600; }
.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.25rem/1.3 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: 2rem 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: .8rem; }
.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); letter-spacing: .04em; }
.person__role { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.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 */
.quote { position: relative; display: grid; gap: 1.5rem; align-content: start; }
.quote::before {
  content: "”";
  display: block;
  height: .42em;
  color: var(--deco);
  font: 600 clamp(6rem, 11vw, 9rem)/1 var(--font-accent);
}
.quote__text { color: var(--heading); font: italic 500 clamp(1.4375rem, 2.3vw, 2rem)/1.32 var(--font-accent); text-wrap: pretty; }
.quote--pull .quote__text { font-size: clamp(1.875rem, 3.6vw, 3rem); line-height: 1.15; }
.quote__cite { display: grid; gap: .1rem; font-style: normal; }
.quote__name { color: var(--heading); font: 400 var(--fs-d5)/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.quote__role { color: var(--fg-muted); font-size: var(--fs-small); }

/* FAQ accordion */
.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.0625rem, 1.5vw, 1.25rem)/1.35 var(--font-body);
  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 a { color: var(--link); font-weight: 600; }

/* 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: 400 3.25rem/.9 var(--font-display); letter-spacing: .03em; }
.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: 600;
  letter-spacing: .04em;
  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(--petrol);
  color: var(--ivory);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.badge--beige { background: var(--beige); color: var(--petrol); }
.badge--teal { background: var(--teal); color: var(--ink); }
.badge--evening { background: var(--espresso); color: var(--ivory); }
/* Coral as a signal, not a ground: the label stays dark for contrast. */
.badge--offer { border: 1.5px solid var(--coral); background: var(--ivory-soft); color: var(--espresso); }
.badge--offer::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--coral); }

.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(--beige-soft);
  color: var(--espresso);
}
.notice > .icon { grid-row: span 2; width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--petrol); }
.notice__title { color: var(--petrol); font-weight: 700; }
.notice--petrol { background: var(--petrol); color: var(--ivory); }
.notice--petrol > .icon, .notice--petrol .notice__title { color: var(--ivory); }
.notice--offer { border-left: 4px solid var(--coral); 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) and an optional enquiry button, 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(--ivory); }
.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(--petrol);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.subnav__link:hover { border-color: var(--beige-soft); background: var(--beige-soft); }
.subnav__link[aria-current="true"] { border-color: var(--beige); background: var(--beige); color: var(--petrol-deep); }
.subnav__cta { display: none; flex: none; margin-left: auto; }
/* Pinned under the header from tablet width; on phones it stays a wrapping
   list after the hero (the action bar carries the page's action there).
   Pinned, it is 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). */
@media (min-width: 45rem) {
  .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; }
  .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)); }
}

/* Closing CTA band: one coral 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, 7vw, 6.5rem); }
.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__body .booking { justify-self: stretch; 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: 600; 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 möte". */
.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(--espresso);
  box-shadow: var(--shadow-sm);
  --heading: var(--petrol);
  --kicker: var(--petrol);
  --focus: var(--petrol);
}
.form-card__head { display: grid; gap: .5rem; justify-items: start; }
.form-card__title { color: var(--petrol); 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(--slate);
  font: 500 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(--espresso); 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(--petrol); font-weight: 600; }

/* Modal: petrol 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(--espresso);
  box-shadow: 0 40px 100px -30px rgb(38 33 30 / .7);
  overflow: hidden;
}
.modal::backdrop { background: rgb(34 57 57 / .72); -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.4rem 1.25rem 1.3rem 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; 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(48 77 77 / .16); background: var(--beige-soft); color: var(--espresso); font-size: var(--fs-small); }
.modal__foot a { color: var(--petrol); 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; }
  .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 street-map placeholder 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(--beige-soft); aspect-ratio: 4 / 3.6; }
.map__streets {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(103deg, transparent calc(50% - 8px), rgb(255 255 255 / .92) calc(50% - 8px) calc(50% + 8px), transparent calc(50% + 8px)),
    linear-gradient(167deg, transparent calc(64% - 2px), rgb(146 158 160 / .75) calc(64% - 2px) calc(64% + 1px), transparent calc(64% + 1px)),
    repeating-linear-gradient(76deg, transparent 0 5.6rem, rgb(255 255 255 / .7) 5.6rem 6.1rem),
    repeating-linear-gradient(-14deg, transparent 0 4.4rem, rgb(255 255 255 / .7) 4.4rem 4.9rem),
    radial-gradient(circle at 78% 18%, rgb(111 150 147 / .38) 0 4.5rem, transparent 4.6rem),
    var(--beige-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(--petrol);
  box-shadow: 0 0 0 .6rem rgb(48 77 77 / .16), var(--shadow-lg);
  color: var(--ivory);
  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, 20rem);
  padding: 1rem 1.25rem .6rem;
  border-radius: var(--r-md);
  background: var(--ivory-soft);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transform: translateX(-50%);
}
.map__title { color: var(--petrol); font: 400 1.5rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.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.1rem; }
.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: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.contact-list dd { font-size: var(--fs-lead); font-weight: 500; }
.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(--espresso); }
.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(38 33 30 / .65), rgb(38 33 30 / 0) 55%);
  color: var(--ivory);
  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(--ivory);
  color: var(--petrol);
  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: 400 var(--fs-d4)/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.video__play-text span { font-size: var(--fs-small); font-weight: 500; }

/* 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.6em; font-size: var(--fs-d3); }
.prose h3 { margin-top: 1.8em; color: var(--heading); font: 700 1.3125rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--link); font-weight: 600; 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: .68em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--deco); }
.prose ol > li::marker { color: var(--heading); font-weight: 700; }
.prose blockquote { padding-left: 1.25rem; border-left: 2px solid var(--deco); color: var(--heading); font: italic 500 1.5rem/1.3 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; }
.mt-lg { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.mt-md { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

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

/* Just nu på Statt: upcoming events on the start page (partials/happenings.html,
   data in src/data/happenings.json). A beige panel with a filter, a swipeable rail
   of event cards and a progress track that doubles as the section divider. */
.happenings + .facts { padding-top: clamp(1.5rem, 4vw, 3rem); }
.happenings__panel { padding-block: clamp(2.5rem, 5.5vw, 4.75rem); }
.happenings__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.happenings__title { font-size: var(--fs-d2); line-height: .94; }
.happenings__accent {
  margin-left: .08em;
  font: italic 500 .74em/1 var(--font-accent);
  letter-spacing: 0;
  text-transform: none;
}

/* Filter: a segmented pill; scrolls sideways on narrow screens. */
.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; }
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(--petrol);
  font: 600 .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(--beige-soft); }
.filter__btn[aria-pressed="true"] { background: var(--petrol); color: var(--ivory); }
.filter__btn[hidden] { display: none; }
.filter__count {
  min-width: 1.4rem;
  padding: .2rem .35rem;
  border-radius: var(--r-pill);
  background: rgb(48 77 77 / .1);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.filter__btn[aria-pressed="true"] .filter__count { background: rgb(245 241 232 / .18); }

/* Rail: one card and a peek on phones, then 2, 3 and 4 per view. */
.happenings__rail {
  --per-view: 1.2;
  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; } }
.happening { display: flex; scroll-snap-align: start; }
.happening[hidden] { display: none; }

/* Event card: the title link covers the whole card. */
.happening__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ivory-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.happening__card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(51 45 41 / .06), 0 28px 48px -30px rgb(51 45 41 / .55); }
.happening__card:has(.happening__link:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 3px; }
.happening__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--espresso); }
.happening__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.happening__card:hover .happening__img { transform: scale(1.045); }

.happening__date {
  position: absolute;
  top: .875rem;
  left: .875rem;
  display: grid;
  justify-items: center;
  min-width: 3.4rem;
  padding: .5rem .55rem .45rem;
  border-radius: var(--r-sm);
  background: var(--ivory);
  box-shadow: 0 8px 18px -10px rgb(40 35 31 / .7);
  color: var(--petrol);
  line-height: 1;
  text-align: center;
}
.happening__date-time { display: contents; }
.happening__day { font: 400 1.9375rem/.86 var(--font-display); letter-spacing: .02em; }
.happening__month {
  margin-top: .3rem;
  color: var(--terracotta-deep);
  font: 700 .6875rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.happening__soon {
  position: absolute;
  top: .875rem;
  right: .875rem;
  padding: .45rem .75rem;
  border-radius: var(--r-pill);
  background: var(--coral-deep);
  color: var(--white);
  font: 700 .75rem/1 var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.happening__soon[hidden] { display: none; }

.happening__body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.25rem 1.375rem 1.125rem; }
.happening__venue {
  overflow: hidden;
  color: var(--terracotta-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--fs-label)/1.35 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.happening__title { color: var(--heading); font-size: clamp(1.625rem, 1.9vw, 1.875rem); line-height: 1; text-wrap: balance; }
.happening__tag { margin-top: -.2rem; color: var(--petrol-soft); font: italic 500 1.1875rem/1.1 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.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.happening__more { color: var(--fg); font-size: .875rem; font-weight: 500; }
.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: .4rem; color: var(--espresso); font-weight: 700; }
.happening__price::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--coral); }
.happening__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  color: var(--petrol);
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.happening__cta .icon { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.happening__card:hover .happening__cta .icon { transform: translateX(.2em); }

/* 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: 2px; overflow: hidden; border-radius: 2px; background: var(--rule); }
.happenings__progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: inherit;
  background: var(--petrol);
  transition: left .2s linear, width .2s linear;
}
.happenings__arrow {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border: 1.5px solid var(--petrol);
  border-radius: 50%;
  background: transparent;
  color: var(--petrol);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.happenings__arrow:hover:not(:disabled) { background: var(--petrol); color: var(--ivory); }
.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__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2.5rem;
  margin-top: 1.25rem;
}
html:not(.js) .happenings__foot { padding-top: 1.25rem; border-top: 2px solid var(--rule); }
.happenings__club { max-width: 40em; color: var(--fg-muted); font-size: var(--fs-small); }
.happenings__club strong { color: var(--fg); font-weight: 600; }
.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; }
}

/* ---- Launch review fixes (2026-10-26) ------------------------------------ */
/* One coral at a time on desktop/tablet too: the header's "Boka rum" turns to an
   outline while a coral 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. */
.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);
}
/* The section bar's button repeats the hero's: hide it while the hero is in view. */
.is-hero-visible .subnav__cta { visibility: hidden; }
/* Room for the docked fact card's shadow above the sticky section bar. */
@media (min-width: 46rem) {
  .page-hero--docked + .subnav { margin-top: clamp(1.25rem, 2.5vw, 2.25rem); }
}
/* Phone numbers never split across lines; top-bar note shortened on laptops. */
a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 74.99rem) { .topbar__note-more { display: none; } }
/* Fact lines ("Skola 70 · Bio 90"): no separator left dangling at a line break. */
.dots { gap: .15rem 1.1rem; }
.dots > li:not(:last-child)::after { content: none; }
.dots > li { position: relative; }
.dots > li + li::before { content: "·"; position: absolute; left: -.75rem; color: var(--deco); font-weight: 700; }
/* Hero stamps stay clear of the screen edge on phones. */
@media (max-width: 45.99rem) { .page-hero__media .stamp { left: .5rem; } }
/* Modal: the end of a long form never sits flush against the pinned footer. */
.modal__body { padding-bottom: 1.5rem; }
/* Evening pages: a dark section bar instead of an ivory band across the dark page. */
.subnav--evening { border-bottom-color: rgb(245 241 232 / .12); background: var(--espresso); }
.subnav--evening .subnav__link { color: var(--ivory); }
.subnav--evening .subnav__link:hover { border-color: var(--espresso-soft); background: var(--espresso-soft); }
.subnav--evening .subnav__link[aria-current="true"] { border-color: var(--terracotta-soft); background: transparent; color: var(--beige); }
@media (max-width: 44.99rem) { .subnav--evening .subnav__link { border-color: rgb(245 241 232 / .25); } }
/* Event posters (text in the image) are shown whole on a dark ground. */
.happening__media--poster .happening__img { object-fit: contain; background: var(--espresso); }
/* A docked hero followed by the dark section bar: the shoulder and the gap stay dark too. */
.page-hero--docked:has(+ .subnav--evening)::after { background: var(--espresso); }
.page-hero--docked + .subnav--evening { margin-top: 0; padding-top: clamp(1.25rem, 2.5vw, 2.25rem); }
.subnav--evening + .slab.theme-evening { border-top-left-radius: 0; border-top-right-radius: 0; }


/* ---- page: event ---- */
/* Event page (/event/): the calendar by month, date pills, stacked and
   poster event cards, the Stattvarvet line-up and the Litterär Afton block. */

/* Calendar: one group per month. From 60rem the month label gets its own
   column and stays in view (under header + sub-navigation) beside its rows. */
.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: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.event-row__link { text-decoration: none; }
.event-row__link:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
/* Phones: a narrower date column leaves the meta line room to stay on one line. */
@media (max-width: 47.99rem) {
  .event-cal .event-row { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; }
}
@media (min-width: 48rem) {
  /* Equal button widths keep the rows' columns aligned. */
  .event-cal .event-row__action { min-width: 9.5rem; }
}
/* A list narrower than 60rem (tablets, and laptops where the month label takes
   a column) has no room for a separate meta column: the meta line goes under
   the title and the button stays on the right. */
.event-cal .event-list { container-type: inline-size; }
@container (min-width: 34rem) and (max-width: 59.99rem) {
  .event-cal .event-row { grid-template-columns: 4.5rem minmax(0, 1fr) auto; column-gap: 1.25rem; }
  .event-cal .event-row__date { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .event-cal .event-row > div,
  .event-cal .event-row__meta { grid-column: 2; }
  .event-cal .event-row__action { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; }
}
@media (min-width: 60rem) {
  .event-cal__month { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; }
  .event-cal__head { display: grid; justify-content: start; gap: .5rem; padding-top: 1rem; }
  .js .event-cal__head { position: sticky; top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h, 3.5rem) + 1.5rem); }
}

.event-more { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.event-more__label { color: var(--fg-muted); font: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.event-more__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
@media (min-width: 60rem) {
  .event-more { padding-left: calc((100% - var(--gap)) * .25 + var(--gap)); }
}

/* Dates and themes inside an event card */
.event-dates { display: flex; flex-wrap: wrap; gap: .5rem; }
.event-dates > li {
  padding: .4rem .95rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  line-height: 1.35;
}
.event-dates strong { color: var(--heading); }
.event-themes { display: grid; gap: 1.1rem; justify-self: stretch; margin-top: .35rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.event-themes__item { display: grid; gap: .45rem; justify-items: start; }
.event-themes__name { color: var(--heading); font: 400 var(--fs-d5)/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.event-themes__date { color: var(--kicker); }
.event-themes__item .event-dates { margin-top: .35rem; }
/* A long card keeps its photo in view while the text scrolls past. */
@media (min-width: 48rem) {
  .js .event-card:not(.event-card--stacked) .event-card__media { position: sticky; top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h, 3.5rem) + 1.5rem); align-self: start; }
}

/* Stacked card: photo on top of a surface card, for pairs in a .grid--2;
   the button sits at the foot so paired cards line up. */
.event-card--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.event-card--stacked:last-child { border-bottom: 1px solid var(--rule); }
.event-card--stacked .event-card__media img { border-radius: 0; }
.event-card--stacked .event-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.event-card--stacked .event-card__title { font-size: var(--fs-d4); line-height: 1; }
.event-card--stacked .event-card__body > .btn:last-child { margin-top: auto; }
.event-card--stacked .event-dates { margin-block: .25rem .5rem; }
/* Posters carry their own lettering: show them whole. */
.event-card--poster .event-card__media img,
.event-feature__poster img { aspect-ratio: 16 / 9; }

/* Stattvarvet: the poster with a stamp, and the night's line-up */
.event-feature__poster .stamp { left: -.5rem; top: -1.75rem; }
@media (min-width: 46rem) {
  .event-feature__poster .stamp { left: -1.25rem; top: -2.25rem; }
}
.event-lineup { justify-self: stretch; border-top: 1px solid var(--rule); container-type: inline-size; }
.event-lineup > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "act time" "where time";
  align-items: center;
  gap: 0 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule);
}
.event-lineup__act { grid-area: act; color: var(--heading); font: 400 var(--fs-d4)/1 var(--font-display); letter-spacing: .03em; }
.event-lineup__where { grid-area: where; color: var(--fg-muted); font-size: var(--fs-small); }
.event-lineup__time { grid-area: time; color: var(--heading); font: 400 1.5rem/1 var(--font-display); letter-spacing: .03em; white-space: nowrap; }
/* Act, place and time on one line once the list itself is wide enough. */
@container (min-width: 25rem) {
  .event-lineup > li { grid-template-columns: 7.5rem minmax(0, 1fr) auto; grid-template-areas: "act where time"; }
}

/* Litterär Afton */
.event-litterar__host { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.event-litterar__host .logo-chip { padding: .55rem 1rem; }
.event-litterar__dock { container-type: inline-size; }
.event-litterar__authors figcaption { font-style: italic; }
.event-litterar__welcome { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.event-litterar__prices { display: grid; justify-self: stretch; border-top: 1px solid var(--rule); }
.event-litterar__prices > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--rule); }
.event-litterar__prices dt { font-weight: 700; }
.event-litterar__prices dd { color: var(--heading); font: 400 1.75rem/1 var(--font-display); letter-spacing: .03em; }

/* Hero: the next upcoming events are rendered; only the first one left (past ones are removed) shows. */
.event-docks > .factdock ~ .factdock { display: none; }
.event-cal__empty { max-width: 40em; color: var(--fg-muted); }


/* ---- page: fest ---- */
/* Fest & julbord (/fest/) ================================================= */

/* Hero: the two direct booking links side by side under the lead. */
.fest-hero__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }

/* Julbord intro: the first sentence leads, the rest follows in muted text. */
.fest-intro { display: grid; gap: .75rem; }
.fest-intro__lead { color: var(--fg); font-size: var(--fs-lead); font-weight: 600; line-height: 1.45; }

/* Julbord options: square photo, name + Cormorant subline, price line,
   checklist, who it suits and the booking action. Phones: a thumbnail beside
   the name. From 40rem the photo heads the card; with subgrid the names,
   bodies and actions of a row line up. */
.fest-options { display: grid; gap: var(--gap); }
.fest-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.1rem;
  align-items: center;
  padding: .75rem .75rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.fest-option__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-md); }
@media (min-width: 40rem) { .fest-option__media img { aspect-ratio: 1; } }
.fest-option__title { display: grid; gap: .35rem; font-size: clamp(1.75rem, 2.3vw, 2.125rem); line-height: 1; }
.fest-option__sub {
  color: var(--fg);
  font: italic 500 1.3125rem/1.15 var(--font-accent);
  letter-spacing: 0;
  text-transform: none;
}
.fest-option__body {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  padding-inline: .5rem;
}
.fest-option__price { font-weight: 600; line-height: 1.7; }
.fest-option__price .price { font-size: 1.625rem; }
.fest-option__fit { display: flex; gap: .6rem; color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.fest-option__fit .icon { color: var(--deco); }
.fest-option__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: auto; padding-top: .5rem; }
@media (min-width: 40rem) {
  .fest-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fest-option { grid-template-columns: none; grid-template-rows: auto auto 1fr; align-items: start; }
  .fest-option__title { margin-top: .4rem; padding-inline: .5rem; }
  .fest-option__body { grid-column: auto; }
  @supports (grid-template-rows: subgrid) {
    .fest-option { grid-row: span 3; grid-template-rows: subgrid; row-gap: 1rem; }
  }
}
@media (min-width: 64rem) {
  .fest-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Julfest on Safiren: copy beside two poster cards. */
.fest-julfest { display: grid; gap: 2.5rem var(--gap); align-items: center; }
.fest-julfest__body { display: grid; gap: 1.25rem; justify-items: start; max-width: 34rem; }
.fest-posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--gap); }
.fest-poster { display: grid; gap: .6rem; align-content: start; justify-items: start; }
.fest-poster__media { display: block; justify-self: stretch; margin-bottom: .4rem; border-radius: var(--r-md); }
.fest-poster__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: 0 24px 48px -28px rgb(0 0 0 / .7);
  transition: transform .4s var(--ease);
}
.fest-poster__media:hover img { transform: translateY(-.25rem); }
.fest-poster__title { font-size: var(--fs-d4); }
.fest-poster__meta { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; line-height: 1.5; }
.fest-poster__meta .price { font-size: 1.375rem; }
.fest-poster .btn { margin-top: .4rem; white-space: nowrap; }
@media (max-width: 24rem) {
  .fest-posters { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 52rem) {
  .fest-julfest { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fest-julfest__body { grid-column: 1 / span 5; }
  .fest-posters { grid-column: 7 / -1; }
}

/* Form aside: direct booking links under the contact details. */
.fest-direct { display: grid; gap: .25rem; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); justify-self: stretch; }
.fest-direct__list { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }

/* Party packages: a price card with an inset photo, the "fr." price and a
   compact price list. */
.fest-package__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); }
.fest-package__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem; margin-top: .35rem; }
.fest-package__amount { color: var(--coral); font: 400 clamp(3rem, 4.4vw, 3.75rem)/.9 var(--font-display); letter-spacing: .015em; }
.price-card--featured .fest-package__amount { color: var(--heading); }
.fest-package__from,
.fest-package__unit { color: var(--fg-muted); font-size: var(--fs-small); font-weight: 600; }
.fest-package__menu { gap: 1.25rem; }
.fest-package__menu .menu__course { gap: .5rem; }
.fest-package__menu .menu__name { font-size: 1.3125rem; }
.fest-package__menu .menu__price { font-size: 1.3125rem; }
.fest-package__note { display: flex; gap: .6rem; color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.45; }
.fest-package__note .icon { color: var(--deco); margin-top: .05rem; }
/* Tablet: the cards stack one per row, so the photo moves beside the text. */
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .fest-package { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-content: start; gap: 1.25rem 2rem; }
  .fest-package > * { grid-column: 2; }
  .fest-package > .fest-package__media { grid-column: 1; grid-row: 1 / span 4; }
  .fest-package__media img { aspect-ratio: 3 / 4; }
}

/* Closing band: the facts run in one row under the copy on tablets and sit
   2 × 2 in the aside from laptop width. */
.fest-close-facts .fact__value { font-size: clamp(2.25rem, 3.4vw, 3rem); white-space: nowrap; }
@media (min-width: 46rem) and (max-width: 63.99rem) {
  .fest-close .cta-band__aside { grid-column: 1 / -1; }
  .fest-close.has-arches::before { content: none; } /* the facts row runs the full width here */
  .fest-close-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fest-close-facts .fact,
  .fest-close-facts .fact:nth-child(even) { padding: 1.25rem 1rem 1.25rem 0; border-left: 0; }
  .fest-close-facts .fact + .fact { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
}
@media (min-width: 64rem) {
  .fest-close-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fest-close-facts .fact,
  .fest-close-facts .fact + .fact { padding: 1.25rem 1rem 1.25rem 0; border-left: 0; }
  .fest-close-facts .fact:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
}


/* ---- page: hotellet ---- */
/* Hotellet (/hotellet/): rooms, packages, guest information, environment.
   Page-only patterns, in page order; everything else is shared components. */

/* Facts strip: a link down to the full guest information. */
.hotellet-facts__more { display: flex; justify-content: flex-end; padding-block: .5rem 1rem; }
@media (max-width: 39.99rem) {
  .hotellet-facts__more { justify-content: flex-start; }
}

/* Rooms: the long intro starts level with the heading instead of hanging
   from its baseline. */
.hotellet-rooms-head { margin-top: clamp(2.5rem, 7vw, 6rem); }
/* From tablet the band card hangs 3.5rem below the photo (the band's own
   bottom margin), so the heading clears that overhang plus a real gap. */
@media (min-width: 46rem) {
  .hotellet-rooms-head { margin-top: calc(3.5rem + clamp(2.5rem, 5vw, 4.5rem)); }
}
@media (min-width: 60rem) {
  .hotellet-rooms-head { align-items: start; }
  .hotellet-rooms-head .section-head__intro { max-width: 40em; padding: .35rem 0 0; }
}

/* Room types: two by two on phones (wide 16:9 tiles from tablet width). */
@media (max-width: 45.99rem) {
  .hotellet-rooms > .tile--wide { grid-column: auto; }
  .hotellet-rooms > .tile--wide .tile__media { aspect-ratio: 4 / 5; }
  .hotellet-rooms .tile__arrow { display: none; }
}

/* Golf package: a small photo set (one wide photo over two) beside the offer. */
.hotellet-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-self: start; }
.hotellet-gallery figure { min-width: 0; }
.hotellet-gallery img { width: 100%; height: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.hotellet-gallery__main { grid-column: 1 / -1; }
.hotellet-gallery .hotellet-gallery__main img { aspect-ratio: 3 / 2; }

.hotellet-offer .split__body { gap: 1rem; }
.hotellet-offer .split__body > .kicker { margin-top: .5rem; }
.hotellet-offer__dock { justify-self: stretch; margin-top: 1rem; }
@media (min-width: 30rem) {
  .hotellet-offer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
}
/* Tablet: the offer is too dense for two columns, so it stacks and the
   photos form a mosaic (wide photo beside the two small ones). */
@media (min-width: 46rem) and (max-width: 62.49rem) {
  .hotellet-offer { grid-template-columns: minmax(0, 1fr); }
  .hotellet-offer > .split__media,
  .hotellet-offer > .split__body { grid-column: 1; grid-row: auto; }
  .hotellet-gallery { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .hotellet-gallery__main { grid-column: 1; grid-row: 1 / span 2; }
  .hotellet-gallery .hotellet-gallery__main img { aspect-ratio: auto; }
}
@media (min-width: 62.5rem) {
  .hotellet-offer { align-items: start; }
  .hotellet-offer .split__body { grid-column: 7 / -1; }
}

/* Cross-link card (conference packages): photo and text on a light surface. */
.hotellet-teaser { padding: .625rem; border-radius: var(--r-lg); background: var(--surface); }
.hotellet-teaser .activity__body { align-content: center; justify-items: start; padding: .5rem .75rem .75rem; }
.hotellet-teaser .activity__media img { border-radius: calc(var(--r-lg) - .375rem); }
@container (min-width: 38rem) {
  .hotellet-teaser .activity__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .hotellet-teaser .activity__media img { aspect-ratio: 16 / 10; }
  .hotellet-teaser .activity__body { padding: 1rem 1.5rem 1rem 0; }
}

/* Opening hours: a time range never breaks; the day label wraps instead. */
.hotellet-hours .hours__row dd { white-space: nowrap; }

/* Sister businesses: name and link on one line. */
.hotellet-sisters .ledger__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: .9rem; }
.hotellet-sisters .ledger__action { justify-self: end; }

/* Room cards link out to Best Western: keep the arrow visible on phones too. */
.hotellet-rooms .tile__arrow { display: grid; }


/* ---- page: kontakta-oss ---- */
/* Kontakt (/kontakta-oss/): contact, team, forms and the privacy policy on one page. */

/* Hero: the four contact routes side by side once the copy column is wide enough. */
@media (min-width: 64rem) {
  .kontakta-oss-hero__contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
}

/* Phone numbers never break across lines. */
.page-kontakta-oss main a[href^="tel:"] { white-space: nowrap; }

/* Hitta hit: car and bicycle parking as two notices beside the map, which
   grows to the height of the notices. */
.kontakta-oss-findus { align-items: stretch; }
/* Tablets: the map takes the full width, the two notices sit side by side under it. */
@media (min-width: 46rem) and (max-width: 63.99rem) {
  .kontakta-oss-findus { grid-template-columns: minmax(0, 1fr); }
  .kontakta-oss-findus .split__media,
  .kontakta-oss-findus .split__body { grid-column: 1; grid-row: auto; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .kontakta-oss-parking { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.kontakta-oss-parking { gap: var(--gap); justify-items: stretch; }
.kontakta-oss-parking__notice { background: var(--ivory-soft); }
/* The list runs under the icon too, so the narrow column keeps its measure. */
.kontakta-oss-parking__notice > .icon { grid-row: auto; }
.kontakta-oss-parking__list { grid-column: 1 / -1; display: grid; gap: .7rem; margin-top: .35rem; }
.kontakta-oss-parking__list > li + li { padding-top: .7rem; border-top: 1px solid var(--rule); }

/* Team: heading and intro start on the same line (the intro is the taller one). */
.kontakta-oss-team-head { align-items: start; }

/* Phones and small tablets (until the four-column grid): the team as a list,
   a small arched portrait beside name, role and e-mail, so the long addresses
   stay on one line instead of breaking. Two columns of it from 40rem. */
@media (max-width: 51.99rem) {
  .kontakta-oss-team { grid-template-columns: none; gap: 0; border-top: 1px solid var(--rule); }
  /* Spare height goes to the outer 1fr rows, so the text sits centred as one block. */
  .kontakta-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); }
  .kontakta-oss-team .person__photo { grid-area: 1 / 1 / -1 / 2; margin: 0; }
  .kontakta-oss-team .person__name { grid-area: 2 / 2; }
  .kontakta-oss-team .person__role { grid-area: 3 / 2; }
  .kontakta-oss-team .person__links { grid-area: 4 / 2; }
  .kontakta-oss-team .person__photo img { border-radius: 3.25rem 3.25rem var(--r-md) var(--r-md); }
  .kontakta-oss-team .person__links { margin-top: .1rem; }
  .kontakta-oss-team .person__links a { min-height: 1.75rem; font-size: .875rem; overflow-wrap: normal; }
}
@media (min-width: 40rem) and (max-width: 51.99rem) {
  .kontakta-oss-team { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .kontakta-oss-team .person { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .kontakta-oss-team .person__photo img { border-radius: 2.75rem 2.75rem var(--r-md) var(--r-md); }
}

/* Units we answer for: quiet pill links (internal arrow, external arrow-ne). */
.kontakta-oss-units { display: flex; flex-wrap: wrap; gap: .5rem; }
.kontakta-oss-units a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .35rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--heading);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.kontakta-oss-units a:hover { border-color: var(--heading); }
.kontakta-oss-units .icon { width: 1rem; height: 1rem; color: var(--deco); }

/* Contact form aside: social links under the phone/mail line. */
.kontakta-oss-follow { display: grid; gap: .75rem; margin-top: .5rem; }
.kontakta-oss-form-note { padding-inline: .25rem; color: var(--slate); }
.kontakta-oss-form-note .text-link { color: var(--petrol); }

/* Faktura: the form left, the terms beside it (terms first on phones). */
@media (min-width: 52rem) {
  .kontakta-oss-duo--flip .duo__aside { grid-column: 8 / -1; grid-row: 1; }
  .kontakta-oss-duo--flip .duo__main { grid-column: 1 / span 6; grid-row: 1; }
}
.kontakta-oss-terms dd { line-height: 1.3; }
.kontakta-oss-terms small { display: block; margin-top: .25rem; color: var(--fg-muted); font-size: var(--fs-small); font-weight: 400; line-height: 1.45; }

/* Privacy policy: a hairline after the invoice form, numbered table of
   contents beside the prose. Only the contents list sticks (the heading
   scrolls away), so all nine links stay on screen on short laptops. */
.kontakta-oss-policy { padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.kontakta-oss-toc { display: grid; gap: .6rem; width: 100%; margin-top: .5rem; }
@media (min-width: 52rem) {
  .kontakta-oss-policy > .duo__aside { align-self: stretch; }
  .kontakta-oss-toc { position: sticky; top: calc(var(--header-h) + 5rem); }
}
.kontakta-oss-toc__list { border-top: 1px solid var(--rule); counter-reset: toc; }
.kontakta-oss-toc__list > li { border-bottom: 1px solid var(--rule); counter-increment: toc; }
.kontakta-oss-toc__list a {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .6rem 0;
  color: var(--heading);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.kontakta-oss-toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  min-width: 1.4rem;
  color: var(--index);
  font: 400 1.0625rem/1 var(--font-display);
  letter-spacing: .08em;
}
.kontakta-oss-toc__list a:hover { text-decoration: underline; }
.kontakta-oss-policy .prose h4 { margin-top: .9em; color: var(--heading); }


/* ---- page: mat--dryck ---- */
/* Mat & dryck (/mat--dryck/) — page-specific patterns, all prefixed mat-dryck-.
   Everything else on the page is a stock component from the styleguide. */

/* The wine bar is one espresso slab holding several sections: the inner
   sections carry the vertical rhythm, the slab itself only adds its shoulder. */
.mat-dryck-evening { --pad-y: 0px; }

/* Quiet card on a coloured ground (one step lighter: espresso-soft in the
   evening slab, ivory on beige). */
.mat-dryck-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 40rem) {
  .mat-dryck-card .feature-card__media img { aspect-ratio: 2 / 1; }
}
.mat-dryck-card .feature-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.mat-dryck-card--pad { display: grid; gap: 1rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); }
.mat-dryck-card__title { font-size: var(--fs-d4); line-height: 1; }
.mat-dryck-card__price { color: var(--fg-muted); font-weight: 600; }
.mat-dryck-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  align-self: stretch;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

/* Dates and themes inside a programme card */
.mat-dryck-dates { display: grid; gap: .6rem; align-self: stretch; }
.mat-dryck-dates__title { margin-top: .9rem; color: var(--kicker); }
.mat-dryck-dates > .hours:last-child > .hours__row:last-child { border-bottom: 0; }

/* Offer panel: a dark photo under a warm espresso veil, copy on the veiled
   side (the white VINoMAT logo needs the dark ground). Phones: photo on top. */
.mat-dryck-feature {
  position: relative;
  display: grid;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--espresso-deep);
  color: var(--ivory);
}
.mat-dryck-feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mat-dryck-feature__body { display: grid; gap: 1.1rem; justify-items: start; padding: clamp(1.5rem, 4vw, 3.5rem); }
.mat-dryck-feature__title { display: grid; gap: .6rem; justify-items: start; }
.mat-dryck-feature__title .kicker { text-transform: none; letter-spacing: .005em; }
/* The logo PNG carries transparent padding (measured: 23% left, 8% right,
   7% / 19% of its width above / below): pull the lettering onto the text edge. */
.mat-dryck-feature__logo {
  --logo-w: clamp(18rem, 30vw, 24rem);
  width: var(--logo-w);
  max-width: none;
  margin: calc(var(--logo-w) * -.069) calc(var(--logo-w) * -.077) calc(var(--logo-w) * -.16) calc(var(--logo-w) * -.234);
}
.mat-dryck-feature__price { font-weight: 600; }
@media (min-width: 52rem) {
  .mat-dryck-feature { align-items: center; min-height: clamp(32rem, 44vw, 38rem); }
  .mat-dryck-feature__media { position: absolute; inset: 0; z-index: -1; }
  .mat-dryck-feature__media img { height: 100%; aspect-ratio: auto; }
  .mat-dryck-feature__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(40 35 31 / .95) 0%, rgb(40 35 31 / .88) 36%, rgb(40 35 31 / .2) 72%, rgb(40 35 31 / 0) 100%);
  }
  .mat-dryck-feature__body { max-width: 36rem; }
}

/* Event card with a portrait photo: keep it upright beside the copy. */
@media (min-width: 48rem) {
  .mat-dryck-event .event-card__media img { aspect-ratio: 4 / 5; }
}

/* Opening hours card over the bar photo: the list takes the card's width. */
.mat-dryck-hours > :is(.hours, .hours__note) { justify-self: stretch; }
@media (min-width: 46rem) {
  .mat-dryck-band { margin-bottom: 5.5rem; } /* the card hangs 3.5rem below the photo */
}

/* "Boka bord eller droppa in" beside its button */
.mat-dryck-or { color: var(--fg-muted); font: italic 500 1.25rem/1.3 var(--font-accent); }

/* Vinklubben: photo beside the steps, which stack in the narrow column. */
.mat-dryck-figure img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 3 / 2; object-fit: cover; }
.mat-dryck-steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) {
  .mat-dryck-figure { position: sticky; top: calc(var(--header-offset, var(--header-h)) + var(--subnav-h, 3.5rem) + 1.5rem); }
}

/* Breakfast: two photos, the smaller one overlapping the corner of the first. */
.mat-dryck-collage { padding: 0 12% 16% 0; }
.mat-dryck-collage__main img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.mat-dryck-collage__inset { position: absolute; right: 0; bottom: 0; width: 52%; }
.mat-dryck-collage__inset img {
  width: 100%;
  border: .4rem solid var(--bg);
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.mat-dryck-prices { gap: .75rem; }


/* ---- page: safiren ---- */
/* Safiren (/safiren/) ===================================================== */

/* Hero title: the venue name large, its type on a smaller second line. */
.safiren-title__sub {
  display: block;
  margin-top: .3em;
  font-size: var(--fs-d3);
  line-height: 1;
  letter-spacing: .03em;
}

/* Compact venue cards (three in a row from 46rem): the title scales with the
   card so a long single word such as "Katrineholmssalen" never breaks. */
.safiren-venue-title { font-size: min(var(--fs-d3), 12.5cqi); }

/* Opalen has no seating plan: its seat count fills the plan box instead. */
.safiren-seats { justify-items: center; align-content: center; min-height: 9.5rem; text-align: center; }
.safiren-seats__value { color: var(--petrol); font: 400 4.5rem/.85 var(--font-display); letter-spacing: .02em; }
.safiren-seats__label { color: var(--slate); font-size: .875rem; font-weight: 600; }

/* "Runda bord: kontakta oss" under the seat counts may wrap in a narrow plan box. */
.safiren-plan-note { margin-top: .15rem; text-align: center; text-wrap: balance; }

/* Capacity table: each room's area sits under its name. On phones the
   two-room name may wrap and the caps labels tighten, so all six columns fit. */
.safiren-capacity__area {
  display: block;
  margin-top: .2rem;
  color: var(--fg-muted);
  font: 600 var(--fs-label)/1.2 var(--font-body);
  letter-spacing: .02em;
  text-transform: none;
}
@media (min-width: 40rem) and (max-width: 59.99rem) {
  .safiren-capacity .data-table__full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .safiren-capacity .data-table__short { display: inline; }
}
@media (max-width: 39.99rem) {
  .safiren-capacity tbody th { font-size: .9375rem; white-space: normal; }
  .safiren-capacity thead th { letter-spacing: .04em; }
  .safiren-capacity th.is-num,
  .safiren-capacity td.is-num { padding-inline: .3rem; }
}
@media (max-width: 23.99rem) {
  .safiren-capacity tbody th { padding-right: .25rem; font-size: .875rem; }
  .safiren-capacity thead th { letter-spacing: .02em; }
  .safiren-capacity th.is-num,
  .safiren-capacity td.is-num { padding-inline: .2rem; }
}

/* Parking notice: a small headline and several paragraphs beside the icon. */
.safiren-parking__title { align-self: center; font-size: var(--fs-d5); line-height: 1.05; letter-spacing: .03em; }
.safiren-parking__body { display: grid; gap: .6rem; }
.safiren-parking a { color: var(--petrol); font-weight: 600; }

/* Hitta hit: beside the contact details and parking, the map takes the full height. */
@media (min-width: 56rem) {
  .safiren-find { align-items: stretch; }
}

/* Closing band: the four facts stay 2 x 2 in the aside (half the band up to
   75rem, so labels do not stack word by word into the arches), without a
   closing rule where the decorative arches rise. */
.safiren-close-facts .fact:nth-last-child(-n + 2) { border-bottom: 0; }
@media (min-width: 46rem) and (max-width: 74.99rem) {
  .safiren-close__body { grid-column: 1 / span 6; }
  .safiren-close__aside { grid-column: 7 / -1; }
}
@media (min-width: 60rem) {
  .safiren-close-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .safiren-close-facts .fact,
  .safiren-close-facts .fact + .fact { padding: 1.25rem 1rem 1.25rem 0; border-left: 0; }
  .safiren-close-facts .fact:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
}