/* Gästsidan. Alla färger kommer från temat via CSS-variabler som guest-render.js (applyTheme) sätter.
   Variablerna är RGB-tripletter så att genomskinlighet kan användas: rgb(var(--primary) / .2)
   Rörelse ligger separat i motion.css.

   Språket: inga kort och inga lådor. Innehållet står fritt med luft, listor är rader med en tunn linje
   överst, och hela sektioner har egen yta i tre toner (sidans bakgrund, mjuk yta och stark yta).
   Radie 6px överallt, inga mjuka skuggor. Stor skillnad mellan rubrik och brödtext, etiketter i versaler
   med spärrning. Mobil först: en kolumn, från 960 px etikett och rubrik till vänster och resten till höger.
   Inget här kräver mer än Safari 15.0. */

:root {
  --bg: 250 246 243;
  --surface: 254 253 252;
  --soft: 234 224 224;
  --band: 138 90 107;
  --on-band: 255 255 255;
  --ink: 59 49 52;
  --primary: 138 90 107;
  --accent-text: 124 81 96;
  --on-primary: 255 255 255;
  --on-ink: 255 255 255;
  --font-display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Rubrikernas vikt, spärrning och radavstånd följer rubriktypsnittets sort (applyTheme). Här värdena för sans. */
  --h-weight: 700;
  --h-track: -0.04em;
  --h-leading: 1;
  --num-weight: 300;

  /* Dämpad och svag text klarar 4,5:1 mot bakgrunden och den mjuka ytan i alla paletter, räknat i
     tests/design.test.js. Fältkanten (--edge) klarar 3:1 mot samma ytor. */
  --muted: rgb(var(--ink) / 0.78);
  --faint: rgb(var(--ink) / 0.76);
  --line: rgb(var(--primary) / 0.26);
  --edge: rgb(var(--ink) / 0.64);
  --tint: rgb(var(--primary) / 0.08);
  --radius: 6px;
  --radius-sm: 6px;
  --pad-x: clamp(24px, 6vw, 64px);
  --pad-y: clamp(64px, 12vw, 120px);
  /* Innehållets bredd: en läsbar kolumn under 960 px, två kolumner på 1200 px från 960 px. */
  --page: calc(680px + 2 * var(--pad-x));
}

@media (min-width: 960px) {
  :root {
    --page: 1200px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: rgb(var(--accent-text));
  text-underline-offset: 3px;
}

p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid rgb(var(--accent-text));
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typografi ---------- */

/* Etikett: versaler med spärrning. Samma stil för sektionens titel, dt i Praktiskt och statusrader. */
.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--accent-text));
}

.s-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 56px);
  font-weight: var(--h-weight);
  line-height: var(--h-leading);
  letter-spacing: var(--h-track);
  color: rgb(var(--ink));
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Samma regel som rubriken i inledningen: sections.js (keepWholeWords) mäter rubriken, så att ett ord som ryms
   på en rad aldrig avstavas ("Kla-ra" i en smal kolumn på dator). Bara ord som är bredare än rubriken läggs i
   .s-heading-langt-ord och avstavas. Utan mätningen avstavas hela rubriken, så att inget klipps. */
.s-heading.s-heading-hela-ord {
  -webkit-hyphens: manual;
  hyphens: manual;
}

.s-heading-hela-ord .s-heading-langt-ord {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.s-eyebrow + .s-heading {
  margin-top: 16px;
}

/* Berättelsens rubrik är delad i ord (sections.js), som referensens .words span: varje ord är ett eget block i
   raden, så att det kan flyttas (motion.css). Mellanslagen står kvar mellan orden och raderna bryts som förut.
   max-width: ett ord utan avstavning som är bredare än rubriken bryts inne i blocket (overflow-wrap i .s-heading),
   i stället för att sticka ut ur sidan. Utan gränsen blir blocket lika brett som ordet. */
.ew-ord {
  display: inline-block;
  max-width: 100%;
}

.s-lead {
  max-width: 38em;
  font-size: clamp(19px, 1.2vw + 14px, 21px);
  font-weight: 400;
  line-height: 1.45;
  color: rgb(var(--ink));
  text-wrap: pretty;
}

.s-lead + .s-lead {
  margin-top: 14px;
}

.footnote {
  font-size: 14px;
  line-height: 1.5;
  color: var(--faint);
}

/* ---------- Knappar ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.btn-primary {
  background: rgb(var(--primary));
  color: rgb(var(--on-primary));
}

/* Kanten har textens accentfärg, som klarar 4,5:1 mot bakgrunden och den mjuka ytan. */
.btn-ghost {
  background: transparent;
  border-color: rgb(var(--accent-text));
  color: rgb(var(--accent-text));
}

.btn-outline {
  background: rgb(var(--bg));
  border-color: rgb(var(--accent-text));
  color: rgb(var(--accent-text));
}

.btn-text {
  padding-inline: 12px;
  background: transparent;
  color: rgb(var(--accent-text));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-small {
  min-height: 44px;
  padding: 8px 16px;
}

.btn-block {
  width: 100%;
}

/* ---------- Sidram ---------- */

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: 10px var(--pad-x);
  background: rgb(var(--band));
  color: rgb(var(--on-band));
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

/* Exempelsida: lugn rad överst som säger att sidan är påhittad och att inget sparas. */
.example-banner {
  margin: 0;
  padding: 10px var(--pad-x);
  background: rgb(var(--soft));
  color: rgb(var(--ink));
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 32px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 20px var(--pad-x) 0;
  /* Fokusringen på menyns länkar går några pixlar under toppraden. Inledningen i helskärm har egen stapling
     och ligger direkt under, så utan det här ritades den över ringens nederkant. */
  position: relative;
  z-index: 2;
}

.topbar-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--accent-text));
}

/* Menyn rullar i sidled på smala skärmar, utan att sidan gör det. En rullande meny klipper också uppe och nere,
   så den har 6 px luft runt länkarna (och lika mycket negativ marginal, så att inget flyttar sig): fokusringen,
   2 px med 3 px avstånd, ryms då hel. */
.topnav {
  display: flex;
  gap: 24px;
  max-width: calc(100% + 2 * var(--pad-x));
  margin: -6px calc(var(--pad-x) * -1);
  padding: 6px var(--pad-x);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.topnav::-webkit-scrollbar {
  display: none;
}

.topnav a {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(var(--ink));
  /* Luft på sidorna för fokusringen, med lika mycket negativ marginal så att texten står kvar. */
  padding-inline: 6px;
  margin-inline: -6px;
}

/* Länkarnas underkant är toppradens underkant och inledningens överkant. En ring utanför länken hade sin
   nederkant på inledningen, i helskärm en mörk yta där den blev under 3:1. Ringen ritas därför inne i länken:
   i sidled i luften ovan, uppe och nere i länkens egen höjd (44 px mot 14 px text). Så klipps den inte heller
   av den rullande menyn. */
.topnav a:focus-visible {
  outline-offset: -2px;
}

@media (min-width: 720px) {
  .topnav {
    max-width: calc(100% + 12px);
    margin: -6px;
    padding: 6px;
  }
}

.footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 72px) var(--pad-x) calc(40px + env(safe-area-inset-bottom));
}

.footer-hosts {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--accent-text));
}

/* ---------- Integritetstext ---------- */

.privacy {
  max-width: 680px;
  margin-top: 16px;
}

.privacy-summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgb(var(--ink));
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.privacy-summary::-webkit-details-marker {
  display: none;
}

.privacy-body {
  display: grid;
  gap: 22px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.privacy-heading {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: rgb(var(--ink));
}

.privacy-body section p + p {
  margin-top: 8px;
}

/* Känd begränsning (privacy.js limit) står i mjuk yta, så att den syns bland de andra styckena. */
.privacy-limit {
  padding: 14px 16px 16px;
  color: rgb(var(--ink));
  background: rgb(var(--soft));
  border-radius: var(--radius-sm);
}

.privacy-draft {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--ink));
  background: rgb(var(--soft));
  border-radius: var(--radius-sm);
}

/* ---------- Laddtext och felvyer ---------- */

.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px var(--pad-x);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
}

/* guest.js (renderMessage), noscript i e/index.html och förhandsvisningen utanför /skapa. */
.message {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 80vh;
  padding: 48px var(--pad-x);
  text-align: center;
}

/* Tjänstens namn skrivs aldrig om till versaler (samma regel som på startsidan). */
.message-eyebrow {
  text-transform: none;
  letter-spacing: 0.02em;
}

.message h1 {
  max-width: 14em;
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 56px);
  font-weight: var(--h-weight);
  line-height: var(--h-leading);
  letter-spacing: var(--h-track);
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.message h1:first-child {
  margin-top: 0;
}

.message > p:not(.eyebrow) {
  max-width: 34em;
  margin-top: 18px;
}

.message-actions {
  margin-top: 28px;
}

/* ---------- Sektioner, gemensamt ----------
   section.s > .s-inner > .s-head (etikett och rubrik) + .s-body (resten), byggt av shell() i sections.js.
   Klistrad inledning med innehållet som glider över (stapling och opak yta efter inledningen) och den klistrade
   programrubriken på mobil finns bara i motion.css, bakom rörelsens villkor. */

.s {
  scroll-margin-top: 12px;
  padding-block: var(--pad-y);
}

.s-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

/* Huvudet har alltid en stor rubrik när det finns: saknar sektionen rubrik blir titeln själv rubriken
   (shell i sections.js), så att vänsterspalten på dator aldrig bara har en liten etikett. */
.s-head {
  margin-bottom: clamp(28px, 5vw, 44px);
}

.s-body > * + * {
  margin-top: clamp(28px, 4vw, 40px);
}

.s-body > .s-lead + .s-lead {
  margin-top: 14px;
}

/* Nedräkningen börjar med en text för skärmläsare, som inte ska ge luft ovanför siffrorna. */
.s-body > .sr-only:first-child + * {
  margin-top: 0;
}

/* När nedräkningen är klar är siffrorna dolda och klartexten står först: ingen luft ovanför, så att den
   linjerar med rubriken i vänsterspalten på dator och inte får extra luft överst utan huvud. */
.s-body > .cd-grid[hidden] + .cd-done {
  margin-top: 0;
}

/* Klartexten står där siffrorna stod och får siffrornas tunna vikt och accentfärg, så att den inte läses
   som en andra rubrik direkt under sektionens rubrik. */
.cd-done {
  font-weight: var(--num-weight);
  color: rgb(var(--accent-text));
}

@media (min-width: 960px) {
  .s-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .s-head {
    position: sticky;
    top: 32px;
    align-self: start;
    margin-bottom: 0;
  }

  /* Utan titel och rubrik finns ingen .s-head. Då tar innehållet hela rastrets bredd, från vänsterspaltens
     kant till högerspaltens, i stället för att lämna en tom vänsterspalt. Allt i sektionen följer samma kanter:
     spärren på 680 px, som bara gör raderna läsbara i en kolumn under 960 px, släpps för rader, siffror och
     Swish, så att inget stannar mitt i sidan. Löptext behåller sin radlängd (.s-lead och svaren i Frågor 38em)
     och OSA-formuläret sina 560 px, men OSA har alltid en rubrik och hamnar aldrig här. */
  .s-body:only-child {
    grid-column: 1 / -1;
  }

  .s-body:only-child > .cd-grid,
  .s-body:only-child > .schedule,
  .s-body:only-child > .wish-list,
  .s-body:only-child > .swish,
  .s-body:only-child > .guests,
  .s-body:only-child > .faq {
    max-width: none;
  }

  /* Siffrorna står i hela bredden och inte i högerkolumnen, så de får samma storlek som i en kolumn.
     Uppmätt med 888: minst 58 px luft till linjen mellan 960 och 1920 px i alla fyra rubriktypsnitten. */
  .s-body:only-child .cd-num {
    font-size: clamp(40px, 12vw, 88px);
  }
}

/* Tre toner. Två grannar med samma ton blir ett block. */

.tone-soft {
  background: rgb(var(--soft));
  color: rgb(var(--ink));
}

.tone-band {
  --muted: rgb(var(--on-band));
  --faint: rgb(var(--on-band));
  --line: rgb(var(--on-band) / 0.3);
  background: rgb(var(--band));
  color: rgb(var(--on-band));
}

.tone-band .eyebrow,
.tone-band .s-heading,
.tone-band a {
  color: rgb(var(--on-band));
}

.tone-band :focus-visible {
  outline-color: rgb(var(--on-band));
}

.tone-soft + .tone-soft,
.tone-band + .tone-band {
  padding-top: 0;
}

.s:not(.tone-soft):not(.tone-band):not(.s-hero) + .s:not(.tone-soft):not(.tone-band),
.s-hero:not(.hero-layout-helskarm):not(.hero-layout-delad) + .s:not(.tone-soft):not(.tone-band) {
  padding-top: clamp(24px, 5vw, 56px);
}

/* Delad på smal skärm har texten nederst på sidans bakgrund, som de andra layouterna. */
@media (max-width: 899px) {
  .s-hero.hero-layout-delad + .s:not(.tone-soft):not(.tone-band) {
    padding-top: clamp(24px, 5vw, 56px);
  }
}

/* ---------- Hero ---------- */

.s-hero {
  padding-block: clamp(40px, 8vw, 88px) var(--pad-y);
}

.hero-grid {
  display: grid;
  /* En kolumn som inte kan bli bredare än skärmen, även när ett ord i rubriken är längre. */
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  /* Samma bredd som toppraden och sektionerna (--page), så att inledningens vänsterkant linjerar med dem i
     alla bredder: en läsbar kolumn under 960 px och 1200 px från 960 px. */
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Text och bild sida vid sida från 960 px, samma brytpunkt som sektionernas två kolumner. Smalare än så står
   bilden under texten i kolumnens fulla bredd. */
@media (min-width: 960px) {
  .has-image .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(48px, 6vw, 96px);
  }
}

.hero-title {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 14vw, 96px);
  font-weight: var(--h-weight);
  /* 0,95 för sans och 1 för serif. */
  line-height: calc(var(--h-leading) - 0.05);
  letter-spacing: var(--h-track);
  text-wrap: balance;
  /* Långa sammansatta ord bryts hellre än att rubriken klipps eller sidan rullar i sidled. */
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* sections.js mäter rubriken: ett ord som ryms på en rad avstavas aldrig, även om rubriken får fler rader.
   Bara ord som är bredare än rubriken läggs i .hero-title-langt-ord och avstavas. */
.hero-title.hero-title-hela-ord {
  -webkit-hyphens: manual;
  hyphens: manual;
}

.hero-title-hela-ord .hero-title-langt-ord {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Bredvid bilden är kolumnen smalare, så rubriken följer bredden. */
@media (min-width: 960px) {
  .has-image .hero-title {
    font-size: clamp(48px, 6.4vw, 96px);
  }
}

.hero-highlight {
  display: block;
  color: rgb(var(--accent-text));
}

.hero-lead {
  max-width: 34em;
  margin-top: 24px;
  font-size: clamp(18px, 1vw + 14px, 20px);
  line-height: 1.5;
  color: rgb(var(--ink));
}

.hero-lead p + p {
  margin-top: 10px;
}

.hero-date {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 419px) {
  .hero-actions .btn,
  .hero-actions .cal-menu {
    flex: 1 1 100%;
  }
}

/* Lägg i kalendern: en liten meny under knappen, med tunn kant och utan skugga. */
.cal-menu {
  position: relative;
}

.cal-toggle {
  width: 100%;
  list-style: none;
  cursor: pointer;
}

.cal-toggle::-webkit-details-marker {
  display: none;
}

.cal-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 2px;
  width: max(100%, 260px);
  max-width: calc(100vw - 32px);
  padding: 6px;
  background: rgb(var(--bg));
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  color: rgb(var(--ink));
  text-align: left;
  transform-origin: top left;
}

/* Det som kalendermenyn når i inledningen döljs helt medan menyn är öppen (sections.js calendarMenu), så att
   ingen rad syns till hälften under menyn. */
.hero-tackt {
  visibility: hidden;
}

.cal-option {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.3;
  color: rgb(var(--accent-text));
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.cal-option:hover,
.cal-option:focus-visible {
  background: var(--tint);
}

.cal-hint {
  margin: 4px 0 0;
  padding: 8px 12px 6px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.hero-media {
  justify-self: end;
  width: min(100%, 480px);
  margin: 0;
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

/* En kolumn: bilden i kolumnens fulla bredd, som bilderna i sektionerna under. Från 600 px i formatet 4 / 3,
   som bilden i Om dagen, så att inledningen inte blir flera skärmar hög. */
@media (max-width: 959px) {
  .hero-media {
    justify-self: stretch;
    width: 100%;
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  .hero-media img {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Hero-layouter ----------
   sections.js sätter hero-layout-{id} när eventet har valt en layout (design.js). Utan klass, och med
   hero-layout-sidostalld, gäller reglerna ovan: texten till vänster och bilden till höger.
   Rörelsen kommer från motion.css. Här finns ingen animation.
   Mått som annars följer bredden begränsas också av höjden (min med vh), så att Svara inte hamnar långt ned
   på korta skärmar som en liggande telefon eller en liten laptop. */

/* Centrerad: all text i mitten, bilden under i en bred kolumn utan ram och skugga. */

.hero-layout-centrerad .hero-grid,
.hero-layout-centrerad.has-image .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(48px, 8vw, 80px);
  text-align: center;
}

.hero-layout-centrerad:not(.has-image) {
  padding-block: clamp(72px, 14vw, 160px);
}

.hero-layout-centrerad .hero-copy {
  width: 100%;
  max-width: 1000px;
}

.hero-layout-centrerad .hero-title {
  font-size: clamp(48px, 14vw, 96px);
}

.hero-layout-centrerad .hero-lead {
  margin-inline: auto;
}

/* Datumet mellan två tunna linjer, som på ett tryckt kort. */
.hero-layout-centrerad .hero-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Linjerna tar bara den plats som blir över, så att datumet aldrig bryts för deras skull. */
.hero-layout-centrerad .hero-date::before,
.hero-layout-centrerad .hero-date::after {
  content: '';
  flex: 1 1 0;
  max-width: 64px;
  height: 1px;
  background: rgb(var(--primary) / 0.5);
}

@media (max-width: 479px) {
  .hero-layout-centrerad .hero-date {
    display: block;
  }

  .hero-layout-centrerad .hero-date::before {
    display: block;
    width: 40px;
    margin: 0 auto 20px;
  }

  .hero-layout-centrerad .hero-date::after {
    content: none;
  }
}

.hero-layout-centrerad .hero-actions {
  justify-content: center;
}

.hero-layout-centrerad .hero-media {
  justify-self: stretch;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}

.hero-layout-centrerad .hero-media img {
  aspect-ratio: 4 / 3;
}

@media (min-width: 640px) {
  .hero-layout-centrerad .hero-media img {
    aspect-ratio: 3 / 2;
  }
}

/* Delad skärm: på mobil bilden överst i kant, lägre på korta skärmar, och texten under. Från 900 px
   två halvor där bilden fyller sin halva i full höjd. Utan bild fylls halvan av en lugn yta i palettens färger. */

.hero-layout-delad {
  padding-top: 0;
}

.hero-layout-delad .hero-grid,
.hero-layout-delad.has-image .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 8vw, 56px);
  max-width: none;
  padding: 0;
}

.hero-layout-delad .hero-copy {
  width: 100%;
  max-width: calc(680px + 2 * var(--pad-x));
  margin-inline: auto;
  padding: 0 var(--pad-x);
}

.hero-layout-delad .hero-media,
.hero-layout-delad .hero-panel {
  position: relative;
  order: -1;
  justify-self: stretch;
  width: 100%;
  height: clamp(180px, min(66vw, 30vh), 460px);
  margin: 0;
  overflow: hidden;
}

.hero-layout-delad .hero-panel {
  height: clamp(140px, min(46vw, 24vh), 320px);
}

.hero-layout-delad .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

/* Ytan utan bild: primärfärg med bågar som växer upp från en portal i bakgrundsfärgen,
   med en liten måne i portalen och en tunn båge runt den. */
.hero-panel {
  --arch: clamp(64px, min(24vw, 13vh), 140px);
  background-color: rgb(var(--primary));
  background-image:
    radial-gradient(90% 70% at 50% 100%, rgb(var(--bg) / 0.2), transparent 70%),
    repeating-radial-gradient(circle at 50% 100%, transparent 0 30px, rgb(var(--on-primary) / 0.14) 30px 31.5px);
}

.hero-panel::before,
.hero-panel::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
}

.hero-panel::before {
  width: var(--arch);
  height: calc(var(--arch) * 1.5);
  background:
    radial-gradient(circle at 50% calc(var(--arch) * 0.42), rgb(var(--primary) / 0.55) 0 calc(var(--arch) * 0.07), transparent calc(var(--arch) * 0.07 + 1px)),
    rgb(var(--bg));
}

.hero-panel::after {
  width: calc(var(--arch) * 1.3);
  height: calc(var(--arch) * 1.65);
  border: 1px solid rgb(var(--on-primary) / 0.45);
  border-bottom: 0;
}

@media (min-width: 900px) {
  .hero-layout-delad {
    padding-block: 0;
  }

  .hero-layout-delad .hero-grid,
  .hero-layout-delad.has-image .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    min-height: max(560px, min(88vh, 940px));
  }

  .hero-layout-delad .hero-media,
  .hero-layout-delad .hero-panel {
    height: auto;
    min-height: 100%;
  }

  .hero-layout-delad .hero-copy {
    align-self: center;
    max-width: none;
    margin: 0;
    padding: clamp(56px, 6vw, 104px) clamp(40px, 6vw, 96px);
  }

  .hero-layout-delad .hero-title {
    font-size: clamp(48px, 5.4vw, 88px);
  }

  .hero-panel {
    --arch: clamp(160px, 20vw, 300px);
  }
}

/* Helskärmsbild: bilden fyller minst skärmhöjden och texten ligger över.
   Bakom texten ligger ett mörkt lager som följer textens höjd: från textens överkant och nedåt är det
   aldrig ljusare än --hero-scrim-min, så vit text klarar 4,5:1 även mot en helt vit bild
   (räknas i tests/hero.test.js). Ovanför texten, och till höger om den, tonar lagret ut så att bilden syns.
   Utan bild blir ytan temats textfärg med ljus från primärfärgen, och texten får bakgrundsfärgen.
   Knapparna blir ljusa, så att de syns mot vilken bild och palett som helst. */

.hero-layout-helskarm {
  --hero-on: 255 255 255;
  --hero-under: 12 11 14;
  --hero-scrim-min: 0.62;
  --hero-scrim-max: 0.8;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-block: clamp(56px, min(20vw, 12vh), 160px) clamp(72px, 12vh, 128px);
  overflow: hidden;
  background-color: rgb(var(--hero-under));
  color: rgb(var(--hero-on));
}

/* På en telefon ligger texten mitt i bilden, så att knapparna syns trots toppraden och
   webbläsarens verktygsfält. På större skärmar ligger den nedtill.
   Inledningen är 100vh hög och börjar under toppraden. I Safari på iPhone är 100vh höjden utan verktygsfält,
   så när fältet syns (cirka 80 px) och toppraden tar sitt ligger sektionens nedre del utanför första skärmen.
   Därför mer luft nedtill än upptill på telefon, som flyttar mitten uppåt, och minst hemindikatorns
   säkra yta när fältet är borta. Inga svh (Safari 15.0). Uppmätt: Svara syns vid 375x667 och 390x844. */
@media (max-width: 699px) {
  .hero-layout-helskarm {
    padding-bottom: max(128px, calc(env(safe-area-inset-bottom) + 96px));
  }
}

@media (min-width: 700px) {
  .hero-layout-helskarm {
    justify-content: flex-end;
  }
}

/* Klistrad inledning som innehållet glider över, och bildens zoom och textens toning vid scroll, finns bara i
   motion.css, bakom rörelsens villkor (scrollstyrd animation, rörelse tillåten och hero-ryms från sections.js).
   Utan villkoren scrollar inledningen med sidan och står still. */

.hero-layout-helskarm:not(.has-image) {
  --hero-on: var(--bg);
  --hero-under: var(--ink);
  background-image:
    radial-gradient(70% 60% at 100% 0%, rgb(var(--primary) / 0.36), transparent 72%),
    radial-gradient(60% 50% at 0% 100%, rgb(var(--primary) / 0.22), transparent 72%);
}

/* Mörk sida (sections.js sätter hero-dark-bg): ytan är redan mörk i bakgrundsfärgen. */
.hero-layout-helskarm.hero-dark-bg:not(.has-image) {
  --hero-on: var(--ink);
  --hero-under: var(--bg);
}

/* En tunn ram innanför kanten, som på ett kort. */
.hero-layout-helskarm:not(.has-image)::before {
  content: '';
  position: absolute;
  inset: clamp(12px, 2.4vw, 28px);
  border: 1px solid rgb(var(--hero-on) / 0.22);
  border-radius: var(--radius);
  pointer-events: none;
}

.hero-layout-helskarm .hero-grid,
.hero-layout-helskarm.has-image .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.hero-layout-helskarm .hero-copy {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  max-width: 820px;
}

/* Lagret bakom texten ligger i en egen ruta (.hero-scrim från sections.js) i samma rutcell som texten, inte i
   texten själv. Rutan har textens mått (samma cell, samma max-width, sträckt i höjd), så lagret ritas exakt som
   förut, men det följer inte med när rörelsen i motion.css tonar bort texten (ew-fadeup). Annars ljusnade bilden
   under scrollningen, tvärtemot referensen, där bilden bara mörknar. Rutan står över bilden och under texten. */
.hero-layout-helskarm.has-image .hero-scrim {
  position: relative;
  z-index: 0;
  grid-area: 1 / 1;
  /* Rutan är tom, så utan stretch blir den 0 hög i ett raster som centrerar sina delar. Med stretch och
     textens max-width får den exakt textens ruta. */
  align-self: stretch;
  max-width: 820px;
  pointer-events: none;
}

/* Texten börjar alltid i vänstra halvan, så -50vw räcker åt vänster. Sektionen
   klipper lagret i kanterna, och masken tonar bara ut till höger om texten: helt svart fram till textens
   högerkant (calc(100% - 100vw), kontrastgarantin) och sedan mjukt över 50vw ner till 0,3, med stegen längs en
   S-kurva så att toningen varken börjar eller slutar med en synlig kant. En rak toning på 360 px syntes på
   dator som en mörk låda med lodrät kant och ett hörn mot den övre toningen. */
.hero-layout-helskarm.has-image .hero-scrim::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -220px;
  bottom: -100vh;
  left: -50vw;
  right: -100vw;
  /* Ovanför texten tonar lagret ut över 220 px längs en mjuk kurva (stegen under --hero-scrim-min), så att
     överkanten inte syns som en linje. */
  background: linear-gradient(
    to top,
    rgb(var(--hero-under) / var(--hero-scrim-max)),
    rgb(var(--hero-under) / var(--hero-scrim-min)) calc(100% - 220px),
    rgb(var(--hero-under) / 0.56) calc(100% - 190px),
    rgb(var(--hero-under) / 0.4) calc(100% - 130px),
    rgb(var(--hero-under) / 0.16) calc(100% - 60px),
    rgb(var(--hero-under) / 0.04) calc(100% - 20px),
    rgb(var(--hero-under) / 0)
  );
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(100% - 100vw),
    rgb(0 0 0 / 0.98) calc(100% - 95vw),
    rgb(0 0 0 / 0.9) calc(100% - 87.5vw),
    rgb(0 0 0 / 0.65) calc(100% - 75vw),
    rgb(0 0 0 / 0.4) calc(100% - 62.5vw),
    rgb(0 0 0 / 0.32) calc(100% - 55vw),
    rgb(0 0 0 / 0.3) calc(100% - 50vw)
  );
  mask-image: linear-gradient(
    to right,
    #000 calc(100% - 100vw),
    rgb(0 0 0 / 0.98) calc(100% - 95vw),
    rgb(0 0 0 / 0.9) calc(100% - 87.5vw),
    rgb(0 0 0 / 0.65) calc(100% - 75vw),
    rgb(0 0 0 / 0.4) calc(100% - 62.5vw),
    rgb(0 0 0 / 0.32) calc(100% - 55vw),
    rgb(0 0 0 / 0.3) calc(100% - 50vw)
  );
  pointer-events: none;
}

.hero-layout-helskarm .hero-eyebrow,
.hero-layout-helskarm .hero-highlight {
  color: rgb(var(--hero-on));
}

.hero-layout-helskarm .hero-title {
  font-size: clamp(48px, min(14vw, 11vh), 96px);
}

.hero-layout-helskarm .hero-lead {
  color: rgb(var(--hero-on) / 0.94);
}

.hero-layout-helskarm .btn-primary {
  background: rgb(var(--hero-on));
  color: rgb(var(--hero-under));
}

/* Hovring: motion.css kan ge primärfärgen och --tint, som inte räcker mot den här ytan. Svara blir lite
   genomskinlig, och Lägg i kalendern får en mörkare yta och hel ram, så att texten aldrig blir svagare. */
@media (hover: hover) and (pointer: fine) {
  .hero-layout-helskarm .btn-primary:hover:not(:disabled) {
    background: rgb(var(--hero-on) / 0.86);
  }

  .hero-layout-helskarm .btn-ghost:hover:not(:disabled) {
    background: rgb(var(--hero-under) / 0.36);
    border-color: rgb(var(--hero-on));
  }
}

.hero-layout-helskarm .btn-ghost {
  border-color: rgb(var(--hero-on) / 0.72);
  color: rgb(var(--hero-on));
}

/* Sektionen klipper i kanterna, så kalendermenyn öppnas uppåt i stället för ut under sektionen. */
.hero-layout-helskarm .cal-options {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom left;
}

.hero-layout-helskarm :focus-visible {
  outline-color: rgb(var(--hero-on));
}

/* Kalendermenyn har sidans bakgrund, så där gäller accentfärgen som i övriga layouter. */
.hero-layout-helskarm .cal-options :focus-visible {
  outline-color: rgb(var(--accent-text));
}

/* Bilden och dess egna lager (den svarta toningen i motion.css) håller ihop i en egen stapling, så att de
   ligger under textlagret (.hero-scrim) och under texten. */
.hero-layout-helskarm .hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  margin: 0;
}

.hero-layout-helskarm .hero-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

/* En svag ton över hela bilden, så att den hänger ihop med paletten. */
.hero-layout-helskarm .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(var(--hero-under) / 0.16), rgb(var(--primary) / 0.14));
}

/* Minimal: bara typografi, den största rubriken och mycket luft. Datum och knappar under, sida vid sida på breda skärmar. */

.hero-layout-minimal {
  padding-block: clamp(48px, min(16vw, 11vh), 176px);
}

/* En kolumn som aldrig blir bredare än skärmen, så att ett långt ord bryts i rubriken i stället för att
   dra ut knappar och datum. */
.hero-layout-minimal .hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

.hero-layout-minimal .hero-copy {
  max-width: 1100px;
}

.hero-layout-minimal .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-layout-minimal .hero-eyebrow::before {
  content: '';
  flex: none;
  width: clamp(28px, 5vw, 48px);
  height: 1px;
  background: currentColor;
}

.hero-layout-minimal .hero-title {
  margin-top: clamp(20px, 3vw, 32px);
  font-size: clamp(52px, min(16vw, 12vh), 144px);
}

.hero-layout-minimal .hero-lead {
  max-width: 32em;
  margin-top: clamp(28px, 4vw, 44px);
}

.hero-layout-minimal .hero-date,
.hero-layout-minimal .hero-date + .hero-actions {
  margin-top: clamp(28px, min(7vw, 5vh), 80px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.hero-layout-minimal .hero-date {
  font-size: clamp(20px, 2vw + 12px, 28px);
  line-height: 1.3;
}

.hero-layout-minimal .hero-date + .hero-actions {
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}

/* Datum och knappar sida vid sida först när datumet ryms på en rad bredvid knapparna. Smalare än så
   står datumet över hela bredden och knapparna under. */
@media (min-width: 1100px) {
  .hero-layout-minimal .hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .hero-layout-minimal .hero-copy > * {
    grid-column: 1 / -1;
  }

  .hero-layout-minimal .hero-date + .hero-actions {
    grid-column: 2;
    margin-top: clamp(28px, min(7vw, 5vh), 80px);
    padding: 16px 0 0 32px;
    border-top: 1px solid var(--line);
  }

  .hero-layout-minimal .hero-date:not(:last-child) {
    grid-column: 1;
    padding-top: 20px;
  }
}

/* ---------- Berättelse ---------- */

.s-story .s-lead {
  font-weight: 500;
}

.story-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--tint);
}

/* ---------- Nedräkning ----------
   Fyra stora tunna siffror på rad utan rutor, en tunn lodrät linje mellan enheterna. */

.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 680px;
}

.cd-unit {
  display: grid;
  gap: 10px;
  justify-items: start;
  min-width: 0;
  padding-left: clamp(10px, 3vw, 28px);
  border-left: 1px solid var(--line);
}

.cd-unit:first-child {
  padding-left: 0;
  border-left: 0;
}

.cd-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 12vw, 88px);
  font-weight: var(--num-weight);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(var(--accent-text));
  font-variant-numeric: tabular-nums;
}

/* Från 960 px står siffrorna i högerkolumnen, som är smalare än skärmen. Storleken följer då kolumnens bredd
   (7 av 12 delar av högst 1200 px) i stället för skärmens, så att tre siffror (dagar) aldrig går över linjen
   till nästa enhet. Uppmätt med 888 i Archivo: minst 36 px luft till linjen mellan 960 och 1600 px. */
@media (min-width: 960px) {
  .cd-num {
    font-size: clamp(44px, 5vw, 64px);
  }
}

.cd-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Smala skärmar: kolumnerna följer innehållet, och etiketterna står utan versaler så att Sekunder ryms
   utan att delas mitt i ordet. */
@media (max-width: 479px) {
  .cd-grid {
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
  }

  .cd-unit {
    padding-inline: clamp(8px, 3vw, 14px);
  }

  .cd-unit:first-child {
    padding-left: 0;
  }

  .cd-unit:last-child {
    padding-right: 0;
  }

  .cd-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
}

/* ---------- Program ----------
   Tidslinje som i referensen: stor tunn tid, en punkt per rad och EN linje för hela listan (.schedule::before),
   från första punktens mitt till listans nederkant. motion.css ritar linjen uppifrån när listan kommer in. */

.schedule {
  --time-size: clamp(32px, 9vw, 44px);
  --dot: 14px;
  position: relative;
  max-width: 680px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule::before {
  content: '';
  position: absolute;
  left: calc((var(--dot) - 2px) / 2);
  top: calc(var(--time-size) / 2);
  bottom: 0;
  width: 2px;
  background: rgb(var(--primary));
  transform-origin: top;
}

.schedule-row {
  position: relative;
  padding: 0 0 clamp(36px, 6vw, 48px) 36px;
}

.schedule-row:last-child {
  padding-bottom: 0;
}

.schedule-dot {
  position: absolute;
  left: 0;
  top: calc((var(--time-size) - var(--dot)) / 2);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: rgb(var(--primary));
}

.schedule-time {
  display: block;
  font-family: var(--font-display);
  font-size: var(--time-size);
  font-weight: var(--num-weight);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(var(--accent-text));
  /* Proportionella siffror: varje tid står på egen rad, så bredden behöver inte vara fast. Med tabellsiffror
     får en smal etta (Cormorant Garamond) en hel siffras bredd och tiden läses som "1 5.00". */
  overflow-wrap: anywhere;
}

.schedule-time:empty {
  display: none;
}

.schedule-text {
  display: block;
  margin-top: 10px;
}

.schedule-time:empty + .schedule-text {
  margin-top: 0;
}

.schedule-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 1vw + 16px, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.schedule-note {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  color: var(--muted);
}

/* På dator står tiden i en egen smal kolumn till vänster om titeln. */
@media (min-width: 960px) {
  .schedule-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .schedule-text,
  .schedule-time:empty + .schedule-text {
    grid-column: 2;
    margin-top: calc((var(--time-size) - 1.2 * 24px) / 2);
  }
}

/* ---------- Info ----------
   Praktiskt på stark yta: raderna fritt med en tunn linje överst, två kolumner på dator. */

.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 40px;
  margin: 0;
}

.info-item {
  padding: 18px 0 24px;
  border-top: 1px solid rgb(var(--on-band) / 0.3);
}

/* Etiketten per rad är 13 px, som etiketterna över fälten i OSA, och skiljer sig därmed från sektionens
   etikett (14 px) när sektionen saknar rubrik. */
.info-item dt {
  font-size: 13px;
}

.info-item dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgb(var(--on-band));
  overflow-wrap: break-word;
}

@media (min-width: 960px) {
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.notes-title {
  color: rgb(var(--on-band));
}

.notes-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.notes-list li {
  position: relative;
  padding-left: 20px;
}

.notes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--on-band));
}

/* ---------- Önskelista ---------- */

.wish-status {
  min-height: 1.4em;
}

.s-body > .wish-status + .wish-list {
  margin-top: 16px;
}

.wish-status:empty + .wish-list {
  margin-top: 0;
}

.wish-list {
  max-width: 680px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wish,
.wish-loading {
  border-top: 1px solid var(--line);
}

.wish:last-child,
.wish-loading:last-child {
  border-bottom: 1px solid var(--line);
}

.wish-loading {
  padding: 20px 0;
  color: var(--muted);
}

.wish {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
}

/* Bred skärm: åtgärden till höger om texten. Reservationsformuläret tar hela raden. */
@media (min-width: 600px) {
  .wish {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
  }

  .wish-message,
  .wish.is-editing .wish-actions {
    grid-column: 1 / -1;
  }
}

.wish-copy {
  min-width: 0;
}

.wish-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.wish.is-reserved .wish-name {
  color: var(--muted);
}

.wish-detail {
  margin-top: 4px;
  font-size: 16px;
  color: var(--muted);
  overflow-wrap: break-word;
}

.wish-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-size: 15px;
  font-weight: 600;
}

.wish-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.wish-form {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 480px;
}

.wish-form input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-size: 17px;
  background: rgb(var(--bg));
  /* Kanten klarar 3:1 mot fältet och ytan runt (tests/design.test.js). Samma värde som --edge. */
  border: 1px solid rgb(var(--ink) / 0.64);
  border-radius: var(--radius-sm);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.wish-form-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wish-reserved {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 16px;
  color: var(--muted);
}

/* Bocken i en liten cirkel i primärfärgen. */
.wish-check {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgb(var(--primary));
  color: rgb(var(--on-primary));
}

.wish-message:empty {
  display: none;
}

.wish-message {
  font-size: 15px;
  color: rgb(var(--accent-text));
}

/* ---------- Presenter ---------- */

.swish {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 680px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.swish-number {
  font-family: var(--font-display);
  font-size: clamp(32px, 9vw, 48px);
  font-weight: var(--num-weight);
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Proportionella siffror: numret byts aldrig på plats, så bredden behöver inte vara fast. Med tabellsiffror
     får en smal etta (Cormorant Garamond) en hel siffras bredd och numret läses som "1 23 456 78 90". Uttryckligt
     värde, eftersom en del typsnitt har tabellsiffror som standard. */
  font-variant-numeric: proportional-nums;
  overflow-wrap: anywhere;
}

.swish-note {
  max-width: 38em;
}

.swish .btn {
  margin-top: 10px;
}

.copy-icon {
  display: inline-grid;
}

/* ---------- Galleri ----------
   Mobil: en kolumn med bilderna i full bredd. Från 720 px två kolumner där den andra börjar lägre.
   Förskjutningen är margin (inte transform): negativ marginal nederst gör att raden inte växer, och den sista
   bilden i den andra kolumnen får ingen negativ marginal så att den ryms i listan. */

.gallery {
  --gallery-shift: clamp(48px, 8vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .gallery-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 32px);
  }

  .gallery-pair .gallery-item:nth-child(2n) {
    margin-top: var(--gallery-shift);
    margin-bottom: calc(var(--gallery-shift) * -1);
  }

  .gallery-pair .gallery-item:nth-child(2n):nth-last-child(-n + 2) {
    margin-bottom: 0;
  }
}

.gallery figure {
  margin: 0;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--tint);
}

.gallery figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- OSA ----------
   På mjuk yta. Fälten och valen har sidans bakgrund, en kant som klarar 3:1 och radie 6px. */

.rsvp-card {
  max-width: 560px;
  scroll-margin-top: 16px;
}

.rsvp-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

/* Sista svarsdagen står som etikett under rubriken. */
.rsvp-deadline {
  margin-top: 18px;
}

fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.reveal-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.field-label {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--accent-text));
}

.field-hint {
  font-size: 14px;
  line-height: 1.45;
  color: var(--faint);
}

.field-error,
.form-error {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: rgb(var(--accent-text));
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-size: 17px; /* minst 16px hindrar att iOS zoomar in vid fokus */
  line-height: 1.4;
  color: rgb(var(--ink));
  background: rgb(var(--bg));
  /* Kanten klarar 3:1 mot fältet och ytan runt (tests/design.test.js). Samma värde som --edge. */
  border: 1px solid rgb(var(--ink) / 0.64);
  border-radius: var(--radius-sm);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.5;
}

/* Pilen i listrutan, ritad med två gradienter i textfärgen. */
.field select {
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgb(var(--ink)) 50%),
    linear-gradient(135deg, rgb(var(--ink)) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--faint);
  opacity: 1;
}

/* Fokus: 2px ring i accentfärgen, kanten plus en solid skugga utan blur, så att fältet inte flyttar sig. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.wish-form input:focus-visible {
  border-color: rgb(var(--accent-text));
  box-shadow: 0 0 0 1px rgb(var(--accent-text));
  outline: none;
}

.field input[aria-invalid='true'] {
  border-color: rgb(var(--accent-text));
  box-shadow: 0 0 0 1px rgb(var(--accent-text));
}

/* Val: två sida vid sida även på smala skärmar, tre sida vid sida från 480 px och som rader under. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.choice-grid.choices-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-grid.choices-1 {
  grid-template-columns: minmax(0, 1fr);
}

.choice {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
}

.choice-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-body {
  display: grid;
  align-content: start;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 14px 16px;
  text-align: left;
  color: rgb(var(--ink));
  background-color: rgb(var(--bg));
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
}

.choice-icon {
  display: flex;
  color: rgb(var(--accent-text));
}

.choice-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.choice-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.choice-sub {
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: break-word;
}

/* Ett val, och tre val på smala skärmar: rader med ikonen till vänster. */
.choices-1 .choice-body {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding: 12px 16px;
}

@media (max-width: 479px) {
  .choice-grid.choices-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .choices-3 .choice-body {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    padding: 12px 16px;
  }
}

/* Valt läge: 2px kant (kanten och en inre ring, så att innehållet inte flyttar sig) och tonad yta.
   Färgen är accentfärgen, inte primärfärgen rakt av. Primärfärgen är inte justerad mot ytan, och med
   en bakgrundsbild som gör sidan mörk under en ljus palett föll den till 1,26:1 mot den mjuka ytan:
   det valda kortet fick då den minst synliga ramen av alla. accent-text lyfts tills den är läsbar mot
   bakgrunden, den tonade ytan, kortytan och den mjuka ytan, så kanten klarar 3:1 i alla lägen. */
.choice-input:checked + .choice-body {
  border-color: rgb(var(--accent-text));
  box-shadow: inset 0 0 0 1px rgb(var(--accent-text));
  background-image: linear-gradient(var(--tint), var(--tint));
}

.choice-input:focus-visible + .choice-body {
  outline: 2px solid rgb(var(--accent-text));
  outline-offset: 3px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stepper-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  color: rgb(var(--ink));
  background: rgb(var(--bg));
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
}

.stepper-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.stepper-value {
  flex: 0 1 140px;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  /* Inga tabellsiffror: texten är ord och tal ("3 personer"), och med tabellsiffror blir mellanslaget i
     till exempel Lora dubbelt så brett. Rutan har fast bredd och texten är centrerad, så inget hoppar. */
}

/* Egna frågor: en grupp med etikett och linje överst. */
.questions {
  display: grid;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}

/* Raden sträcks till den högsta frågan. Utan det här delades den extra höjden mellan etikett och fält, så att
   fältet bredvid en etikett på två rader blev högre än 52 px. Nu står etikett och fält nederst i sin cell:
   fälten i samma rad har samma höjd och samma överkant. */
.questions-grid .field {
  align-content: end;
}

.food-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.food-note {
  margin-top: -6px;
}

.privacy-note {
  margin-top: -10px;
}

.privacy-link {
  color: inherit;
  text-underline-offset: 2px;
}

.btn-submit {
  min-height: 54px;
  font-size: 17px;
  font-weight: 700;
}

.rsvp-closed {
  max-width: 34em;
}

.rsvp-thanks {
  display: grid;
  justify-items: start;
  gap: 12px;
  outline: none;
}

.checkmark {
  margin-bottom: 4px;
  color: rgb(var(--primary));
}

.checkmark-ring {
  stroke: rgb(var(--primary) / 0.3);
  stroke-width: 2;
}

.checkmark-tick {
  stroke: rgb(var(--primary));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thanks-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 44px);
  font-weight: var(--h-weight);
  line-height: var(--h-leading);
  letter-spacing: var(--h-track);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.thanks-text {
  max-width: 34em;
  font-size: 19px;
  line-height: 1.45;
}

.thanks-note,
.notice-inline {
  max-width: 34em;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.45;
  background: rgb(var(--bg));
  border-radius: var(--radius-sm);
}

.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 16px;
}

/* Textknappen står i linje med texten ovanför när raden bryts. */
.thanks-actions .btn-text {
  padding-inline: 4px;
}

/* Safari 15.0 till 15.3 saknar :focus-visible. Fälten och de dolda valen behöver då synligt fokus på :focus. */
@supports not selector(:focus-visible) {
  .field input:focus,
  .field select:focus,
  .field textarea:focus,
  .wish-form input:focus {
    border-color: rgb(var(--accent-text));
    box-shadow: 0 0 0 1px rgb(var(--accent-text));
  }

  .choice-input:focus + .choice-body {
    outline: 2px solid rgb(var(--accent-text));
    outline-offset: 3px;
  }
}

/* ---------- Gästlista ---------- */

.guests {
  max-width: 680px;
}

.guest-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}

.guest-count-num {
  font-family: var(--font-display);
  font-size: clamp(56px, 14vw, 96px);
  font-weight: var(--num-weight);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: rgb(var(--accent-text));
  font-variant-numeric: tabular-nums;
}

.guest-count-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guest-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.guest-list:empty {
  display: none;
}

.guest {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.guest:last-child {
  border-bottom: 1px solid var(--line);
}

.guest-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tint);
  color: rgb(var(--accent-text));
  font-size: 14px;
  font-weight: 700;
}

.guest-text {
  display: grid;
  min-width: 0;
}

.guest-name {
  overflow: hidden;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.guest-row {
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}

.guest-empty {
  margin-top: 24px;
}

/* ---------- Frågor ---------- */

.faq {
  max-width: 680px;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 18px 0;
  /* Frågan är knappen som öppnar svaret och har brödtextens typsnitt, som de andra raderna i listor
     (önskelistan, gästlistan, valen i OSA). Med rubriktypsnittet blev frågan i Cormorant Garamond mindre
     än svaret under den, eftersom x-höjden är cirka en femtedel lägre. */
  font-family: var(--font-body);
  font-size: clamp(19px, 1.2vw + 14px, 22px);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.faq-icon {
  display: grid;
  flex: none;
  color: rgb(var(--accent-text));
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-a {
  max-width: 38em;
  padding: 0 0 24px;
}

.faq-a p + p {
  margin-top: 10px;
}

/* ---------- Karta ----------
   Platsnamnet, en riktig karta från OpenStreetMap och adressraden med länken till höger (under på smal skärm).
   Kvadratisk på mobil och 16 / 10 på dator. Utan stöd för aspect-ratio en fast höjd. */

.map {
  display: grid;
  gap: 20px;
}

.map-name {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.map-frame {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius);
  background: var(--tint);
}

@media (min-width: 960px) {
  .map-frame {
    height: 420px;
  }
}

@supports (aspect-ratio: 1 / 1) {
  .map-frame {
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 70vh;
  }

  @media (min-width: 960px) {
    .map-frame {
      aspect-ratio: 16 / 10;
    }
  }
}

.map-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.map-address {
  flex: 1 1 14em;
  min-width: 0;
  overflow-wrap: break-word;
}

.map-link {
  flex: none;
}

/* ==== C3 bakgrund ==== */

/* ---------- Bakgrundsbild ----------
   Ett fast lager bakom innehållet: bilden och en slöja i lagrets färg (guest-render.js renderBackdrop).
   Ett enda lager, inga filter och ingen background-attachment fixed, så att svaga telefoner klarar det.
   100vh är den stora vyhöjden i iOS 15, så lagret täcker också när adressfältet döljs. Bilden skalas av
   webbläsaren med object-fit, och /skapa laddar aldrig upp mer än 2400 px.
   Utan klassen has-backdrop (applyTheme) gäller ingenting här, och sidan ser ut precis som förut. */

.ew-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.ew-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ew-backdrop-veil {
  position: absolute;
  inset: 0;
  display: block;
}

/* Sidans yta blir genomskinlig så att lagret syns. Bakgrundsfärgen ligger kvar på html, som
   genomsnittsfärgen av bilden med lagret, så att överscroll och sidans kanter inte blinkar vitt.
   Sektioner utan ton har redan ingen egen yta. Toner, kort och fält behåller sina. */
.has-backdrop {
  background: rgb(var(--bg));
}

.has-backdrop body {
  background: transparent;
}

/* ---------- Bilder som inte gick att hämta ----------
   En bild vars fil är borta eller vars adress är fel döljs av sections.js och guest-render.js
   (onerror), tillsammans med det som bara fanns för bildens skull: hela figuren i inledningen med
   sitt kontrastlager, punkten i galleriet med sin bildtext, och hela lagret med bakgrundsbilden.
   Reglerna här står sist och sätter display: none också där en annan regel ger elementet ett eget
   display eller en egen position, så att inget tomrum och ingen trasig bildmarkör blir kvar.
   Ingen text sätts in i stället: sidan påstår aldrig att det finns en bild som inte syns. */

.hero-media[hidden],
.hero-scrim[hidden],
.story-image[hidden],
.gallery-item[hidden],
.gallery img[hidden],
.ew-backdrop[hidden] {
  display: none;
}