/* =============================================================================
   Simon & Wilhelmina, bröllopssajt
   Formspråket är hämtat rakt av från det låsta save the date-kortet
   (Projects/Wedding/save-the-date/Main.dc.html). Inget nytt uttryck uppfunnet.
   Papperet, den plommonsvarta texten, det valvbeskurna fotot med sin
   salviahårlinje, kvistdelaren och botaniken kommer alla därifrån.

   -----------------------------------------------------------------------------
   KONTRASTREVISION (WCAG 2.1 AA: 4.5:1 för brödtext, 3:1 för stor text
   >= 24px normal eller >= 18.66px fet). Uträknat med scripts/kontrast.mjs mot
   papperet #F7F4EF. Kör "node scripts/kontrast.mjs" för att räkna om.

   Färg                       Används till                        Mot        Kvot   Krav
   #4A4358  --black           namn, siffror i nedräkningen        #F7F4EF    8.56   4.5  OK
   #5E5273  --text-sekundar   ögonbryn, nav, etiketter, sidfot    #F7F4EF    6.53   4.5  OK
   #66805B  --salvia-text     platsraden, hårlinjen under fälten  #F7F4EF    3.98   3.0  OK
   #8371A8  --lavendel        stora kursiva &-tecknet (30px+)     #F7F4EF    3.91   3.0  OK
   #6E5C92  --lavendel-djup   länkar, litet &, fokusring          #F7F4EF    5.30   4.5  OK
   #FFFFFF  --vit             text på OSA-knappen                 #6E5C92    5.82   4.5  OK
   #FFFFFF  --vit             text på OSA-knappen vid hover       #4A4358    9.40   4.5  OK
   #4A4358  --black           text i den öppna mobilmenyn         #EFEBF3    7.99   4.5  OK
   #5E5273  --text-sekundar   navlänkar i den öppna mobilmenyn    #EFEBF3    6.09   4.5  OK
   #8F3A4A  --fel             felmeddelanden i formulär (OSA)     #F7F4EF    6.66   4.5  OK

   Två färger från kortet klarar inte kravet och är därför inga textfärger här.
   Båda står kvar som tokens eftersom senare sidor kan behöva dem:
   #7F9576  --salvia          2.96:1. Används inte alls på startsidan. Hårlinjerna
                              ritas med --salvia-linje och botanikens gröna toner
                              ligger inbakade i SVG-filerna. Platsraden, som på
                              kortet hade den här färgen, fick #66805B i stället.
   rgba(74,67,88,.6)  --text-dampad  motsvarar #8F8A94, 3.07:1, alltså bara tillåten
                              på text 24px eller större. Används inte på startsidan.
                              Kortets 12px-ögonbryn hade den färgen och har flyttats
                              till #5E5273.
   Hårlinjen --salvia-linje, rgba(127,149,118,.7), är dekor och inte text. Den
   omfattas därför inte av kontrastkravet.
   ============================================================================= */


/* ---------- 1. Tokens ------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Palett, exakt från bygg.py */
  --papper: #F7F4EF;
  --black: #4A4358;
  --text-sekundar: #5E5273;
  --text-dampad: rgba(74, 67, 88, 0.6);
  --salvia: #7F9576;
  --salvia-linje: rgba(127, 149, 118, 0.7);
  --salvia-text: #66805B;
  --lavendel: #8371A8;
  --lavendel-djup: #6E5C92;
  --falt: #EFEBF3;
  --vit: #FFFFFF;
  --fel: #8F3A4A;          /* felmeddelanden i formulär (OSA). 6.66:1 mot papperet */

  /* Typsnitt */
  --serif: 'Cormorant Garamond', 'Cormorant', 'Garamond', 'Georgia', serif;
  --sans: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;

  /* Flytande typskala. Namnen landar på ~46px i en 390px bred telefon,
     precis som på kortet, och växer till 76px på stor skärm. */
  --f-ogonbryn: 12px;
  --f-namn: clamp(46px, 35.2px + 2.9vw, 76px);
  --f-datum: clamp(13.5px, 10.2px + 1.05vw, 20px);   /* 16px vid 559px bredd, precis som kortet */
  --f-plats: clamp(24px, 19px + 1.6vw, 34px);
  --f-brod: clamp(16px, 15px + 0.3vw, 18px);
  --f-tal: clamp(34px, 26px + 2.2vw, 56px);
  --f-liten: 12px;

  /* Textsidornas skala. Rubriken är mindre än startsidans namn med flit:
     den ska inte konkurrera med hjälten, bara sortera sidan. */
  --f-rubrik: clamp(34px, 27px + 1.9vw, 54px);
  --f-ingress: clamp(19px, 17.4px + 0.45vw, 24px);
  --f-underrubrik: clamp(22px, 20px + 0.55vw, 28px);
  --f-underrubrik-2: clamp(18px, 16.6px + 0.4vw, 22px);

  /* Valvfotot styr hela hjältekompositionen. Botaniken positioneras i andelar
     av valvets bredd, så proportionerna från kortet håller i alla bredder.
     Kortet: foto 266px brett, 298px högt, hårlinje 7px utanför. */
  --ark-b: clamp(156px, 46vw, 400px);
  --ark-h: calc(var(--ark-b) * 1.1203);      /* 298 / 266 */
  --ark-linje: clamp(4px, calc(var(--ark-b) * 0.026), 10px);

  --mat: clamp(20px, 5vw, 48px);             /* sidmarginal */

  /* Läsbar radlängd. Samma mått på startsidans notis, textsidorna och
     OSA-formuläret, så kolumnen står still när man klickar mellan sidorna. */
  --spalt: 34rem;
}


/* ---------- 2. Reset-lite -------------------------------------------------- */

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

html {
  background: var(--papper);
  -webkit-text-size-adjust: 100%;
}

/* Flexkolumnen med main som enda växande del håller sidfoten nere på korta
   sidor (Presenter, Klädkod) i stället för att lämna den mitt på skärmen.
   100vh först som reserv: svh finns inte i äldre webbläsare, och där är vh
   rätt så när som på mobilens adressfält. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--papper);
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--f-brod);
  font-weight: 300;
  line-height: 1.7;
}

main { flex: 1 0 auto; }

h1, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
img { max-width: 100%; }

a { color: var(--lavendel-djup); }
a:hover { color: var(--black); }


/* ---------- 3. Fokus och hoppa-länk ---------------------------------------- */

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

/* Ingen övergång här med flit: en transition kan stå still i en flik som inte
   ritas om, och då blir hoppa-länken aldrig synlig när den får fokus. Den ska
   dyka upp direkt. */
.hoppa {
  position: absolute;
  top: -6rem;
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  background: var(--papper);
  border: 1px solid var(--salvia-linje);
  padding: 0.7rem 1.2rem;
  font-size: 14px;
  text-decoration: none;
}

.hoppa:focus { top: 8px; }


/* ---------- 4. Topp och meny ----------------------------------------------- */

.topp {
  padding: clamp(18px, 4vw, 30px) var(--mat) 0;
  border-bottom: 1px solid var(--salvia-linje);
}

.topp__rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ordmarke {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(18px, 14px + 0.9vw, 24px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.25;
  padding: 0.3rem 0;          /* träffytan blir minst 32px hög */
  color: var(--black);
  text-decoration: none;
}

.ordmarke__amp {
  font-style: italic;
  color: var(--lavendel-djup);
}

.meny-knapp {
  appearance: none;
  background: none;
  /* Ramen är knappens enda kant, alltså en komponentgräns: 3:1 (1.4.11).
     --salvia-linje ger 2.04:1, --salvia-text 3.98:1. Samma val som fältens
     hårlinjer i osa.css. */
  border: 1px solid var(--salvia-text);
  color: var(--text-sekundar);
  font-family: var(--sans);
  font-size: var(--f-liten);
  font-weight: 400;
  letter-spacing: 0.22em;
  padding: 0.9rem 1rem 0.9rem calc(1rem + 0.22em);   /* 44px hög, som allt annat klickbart */
  text-transform: uppercase;
  cursor: pointer;
}

.meny-knapp:hover { color: var(--black); }

/* Öppen som utgångsläge, stängd bara när site.js har lagt klassen js på
   <html>. Laddar skriptet inte (nätet, ett filter, en gammal telefon) står
   listan kvar i stället för att sitta bakom en knapp som inte gör något.
   noscript räcker inte för det: den slår bara till när skript är avstängt,
   inte när ett skript inte kom fram. */
.meny-knapp { display: none; }
.js .meny-knapp { display: inline-block; }

.js .meny {
  display: none;
  flex-direction: column;
  margin: clamp(14px, 3vw, 20px) calc(var(--mat) * -1) 0;
  padding: 0.25rem var(--mat) 0.75rem;
  background: var(--falt);
}

.js .meny.ar-oppen { display: flex; }

.meny a {
  display: block;
  padding: 0.75rem 0;    /* träffytan blir 45px hög */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-sekundar);
}

.meny a:hover { color: var(--black); }

/* Understrykning i stället för en inset-skugga: skuggan hade lagt sig längst
   ned i träffytan, långt under bokstäverna. */
.meny a[aria-current="page"] {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--salvia-linje);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}


/* ---------- 5. Hjälten ------------------------------------------------------ */

/* Kortet lät botaniken gå ut över kanten och beskars av kortets ytterkant.
   overflow: hidden gör samma sak här: på telefon beskärs de yttersta
   kvistarna, på stor skärm får hela buketten plats. */
.hjalte {
  overflow: hidden;
  padding: clamp(30px, 6vw, 66px) var(--mat) clamp(44px, 8vw, 96px);
  text-align: center;
}

.komposition {
  position: relative;
  width: var(--ark-b);
  height: var(--ark-h);
  margin: 0 auto;
}

/* Valvet: radie lika med halva bredden upptill, nästan rakt nedtill. */
.ark {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.ark__linje {
  position: absolute;
  inset: calc(var(--ark-linje) * -1);
  border: 1px solid var(--salvia-linje);
  border-radius: calc(var(--ark-b) / 2 + var(--ark-linje)) calc(var(--ark-b) / 2 + var(--ark-linje)) 4px 4px;
  pointer-events: none;
}

.ark__ram {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ark-b) / 2) calc(var(--ark-b) / 2) 3px 3px;
  overflow: hidden;
}

.ark__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botaniken. Talen är kortets geometri omräknad till andelar av valvbredden.
   Fästpunkten är basen i varje bukett, alltså där stjälkarna utgår: 9,2 procent
   utanför valvets sida och 28,6 procent nedanför dess underkant. translate
   flyttar bilden så att just den punkten hamnar där. */
.botanik {
  position: absolute;
  z-index: 2;
  height: auto;
  max-width: none;      /* buketterna är bredare än valvet, reset-regeln får inte kapa dem */
  pointer-events: none;
  user-select: none;
}

.botanik--v {
  width: calc(var(--ark-b) * 1.2180);
  left: calc(var(--ark-b) * -0.092);
  top: calc(var(--ark-h) + var(--ark-b) * 0.286);
  transform: translate(-59.26%, -72.27%);
}

.botanik--h {
  width: calc(var(--ark-b) * 1.2481);
  left: calc(var(--ark-b) * 1.092);
  top: calc(var(--ark-h) + var(--ark-b) * 0.286);
  transform: translate(-40.96%, -72.40%);
}

.hjalte__text {
  position: relative;
  z-index: 3;
  margin-top: clamp(26px, 5vw, 44px);
}

/* padding-left lika med letter-spacing är optisk centrering: mellanrummet
   efter sista bokstaven ska inte dra texten åt vänster. Knepet är kortets. */
.ogonbryn {
  font-size: var(--f-ogonbryn);
  font-weight: 300;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-sekundar);
  margin-bottom: 0.85rem;
}

.namn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif);
  font-size: var(--f-namn);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.06em;
  color: var(--black);
}

.namn__del { padding-left: 0.06em; }

.namn__amp {
  font-size: 0.652em;          /* kortet: 30 / 46 */
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--lavendel);
  margin: 0.04em 0;
}

/* Delaren följer namnstorleken, så proportionen från kortet håller i alla
   bredder: vid 46px namn blir det exakt kortets 54px streck, 12px luft och
   64px kvist. SVG-filen är 78 enheter bred eftersom den bär med sig marginal
   runt kvistens 64. */
.delare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--f-namn) * 0.26);
  margin: clamp(14px, 2.4vw, 22px) 0;
}

.delare__strack {
  width: calc(var(--f-namn) * 1.174);
  height: 1px;
  background: var(--salvia-linje);
}

.delare__kvist {
  display: block;
  width: calc(var(--f-namn) * 1.696);
  max-width: none;
  height: auto;
  flex: none;
}

.datum {
  font-size: var(--f-datum);
  font-weight: 500;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.5rem;
}

.plats {
  font-family: var(--serif);
  font-size: var(--f-plats);
  font-style: italic;
  font-weight: 400;          /* kortets vikt, får inte ärva bodyns 300 */
  line-height: 1.3;
  color: var(--salvia-text);
}


/* ---------- 6. Nedräkning, OSA och notis ------------------------------------ */

.inbjudan {
  padding: 0 var(--mat) clamp(56px, 9vw, 104px);
  text-align: center;
}

/* Utan JS är rutan tom och ska inte ta någon plats alls. */
.nedrakning {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.7rem, 7vw, 3.6rem);
}

.nedrakning:empty { display: none; }

.nedrakning__del {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.nedrakning__tal {
  font-family: var(--serif);
  font-size: var(--f-tal);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  /* Cormorant har gemena siffror som standard, och dess etta ser då ut som
     ett I. lining-nums tvingar fram versala siffror, tabular-nums håller
     bredden still så nedräkningen inte hoppar varje minut. */
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--black);
}

.nedrakning__etikett {
  font-size: 12px;           /* ingen text under 12px på sajten */
  font-weight: 400;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-transform: uppercase;
  color: var(--text-sekundar);
}

.nedrakning__notis {
  font-family: var(--serif);
  font-size: clamp(20px, 18px + 0.6vw, 26px);
  font-style: italic;
  font-weight: 400;          /* kortets vikt, får inte ärva bodyns 300 */
  color: var(--text-sekundar);
}

.osa-rad { margin-top: clamp(34px, 6vw, 56px); }

.knapp {
  display: inline-block;
  background: var(--lavendel-djup);
  color: var(--vit);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1;
  padding: 1.15rem 2.2rem 1.15rem calc(2.2rem + 0.26em);
  border-radius: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.knapp:hover {
  background: var(--black);
  color: var(--vit);
}

.notis {
  max-width: var(--spalt);
  margin: clamp(26px, 4vw, 40px) auto 0;
  font-size: var(--f-brod);
  line-height: 1.75;
  color: var(--text-sekundar);
}


/* Rullsidan under OSA-knappen. Fyra korta block som sammanfattar undersidorna,
   i den ordning Simon och Wilhelmina bad om. Ingen ruta och ingen ikon: samma
   papper som resten, bara mer luft mellan blocken än inuti dem, så att ögat
   ser var ett block slutar utan att något ritas ut. Blocken bär .brodtext och
   ärver därmed rubrik-, text- och länkformen från textsidorna. */

.delare--start { margin: 0 0 clamp(40px, 7vw, 76px); }

.start { padding: 0 var(--mat) clamp(56px, 9vw, 104px); }

.start__block {
  max-width: var(--spalt);
  margin: 0 auto;
  /* Menyn hoppar hit med ankare. Utan luft ovanför landar rubriken klistrad
     mot skärmkanten och man ser inte att man har kommit till en ny rubrik. */
  scroll-margin-top: clamp(24px, 6vw, 56px);
}

.delare--mellan { margin: clamp(46px, 8vw, 84px) 0; }

/* I .brodtext bär h2 sin egen toppmarginal. Här är det avståndet mellan
   blocken som ska bära luften, annars adderas de två. */
.start__block h2 { margin-top: 0; }

.start__block + .start__block { margin-top: clamp(46px, 8vw, 84px); }

.start__notis {
  margin-top: clamp(46px, 8vw, 84px);
  text-align: center;
}


/* ---------- 7. Sidfot ------------------------------------------------------- */

.sidfot {
  border-top: 1px solid var(--salvia-linje);
  padding: clamp(26px, 4vw, 38px) var(--mat);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.sidfot p {
  font-size: var(--f-liten);
  font-weight: 400;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  text-transform: uppercase;
  color: var(--text-sekundar);
}



/* ---------- 8. Textsidorna --------------------------------------------------

   De åtta undersidorna delar allt formspråk med startsidan. Här ligger bara det
   som löpande text behöver utöver det. Måttet är 34rem, alltså ungefär 60-65
   tecken per rad vid brödtextens storlek, vilket är det som är bekvämt att
   läsa. Sidhuvudet (ögonbryn, rubrik, kvistdelare) är centrerat som på kortet
   medan brödtexten är vänsterställd, för centrerad löptext är svårläst.
   Inga rutor, inga kort, inga ikoner: sidorna ska se ut som papper. */

.sida {
  padding: clamp(34px, 6vw, 64px) var(--mat) clamp(56px, 9vw, 104px);
}

.sida__topp,
.brodtext {
  max-width: var(--spalt);
  margin: 0 auto;
}

.sida__topp {
  text-align: center;
  margin-bottom: clamp(30px, 5vw, 46px);
}

/* padding-left lika med letter-spacing, samma optiska centrering som på kortet. */
.sida__rubrik {
  font-family: var(--serif);
  font-size: var(--f-rubrik);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.04em;
  padding-left: 0.04em;
  color: var(--black);
}

/* Kvistdelaren i mindre format. Startsidans mått hänger på namnstorleken;
   här är de fasta, eftersom rubrikerna varierar i längd men inte i storlek. */
.delare--sida {
  gap: 10px;
  margin: clamp(16px, 2.6vw, 22px) 0 0;
}

.delare--sida .delare__strack { width: 34px; }
.delare--sida .delare__kvist { width: 54px; }

.ingress {
  font-family: var(--serif);
  font-size: var(--f-ingress);
  font-style: italic;
  font-weight: 400;          /* kortets vikt, får inte ärva bodyns 300 */
  line-height: 1.5;
  color: var(--text-sekundar);
}

.brodtext h2 {
  font-family: var(--serif);
  font-size: var(--f-underrubrik);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--black);
  margin: clamp(30px, 4.5vw, 46px) 0 0.5rem;
}

/* Underrubrikerna inne i ett avsnitt (Vigsel, Mingel, Middag ...). Mindre än
   h2 men samma serif, så ordningen syns utan att en ny form införs. */
.brodtext h3 {
  font-family: var(--serif);
  font-size: var(--f-underrubrik-2);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--black);
  margin: clamp(22px, 3.2vw, 32px) 0 0.35rem;
}

.brodtext p + p,
.brodtext ul + p { margin-top: 1.05em; }
.brodtext p + ul { margin-top: 0.9em; }
.brodtext .ingress + p { margin-top: 1.5em; }

.brodtext ul { margin: 0; }
.brodtext li + li { margin-top: 0.35em; }

/* Punktmarkören är samma hårlinje som resten av sajten ritas med, inte en
   prick och inte ett streck i texten. Salviahårlinjen är dekor, inte text,
   och omfattas därför inte av kontrastkravet. */
.brodtext li {
  position: relative;
  padding-left: 1.5rem;
}

.brodtext li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 9px;
  height: 1px;
  background: var(--salvia-linje);
}

.brodtext strong { font-weight: 500; }

/* Bokningslänken till rummen på herrgården, på startsidan och på OSA-sidan.
   Adressen stämplas in i href. Är den tom finns ingen länk att visa, och då
   står meningen om att den kommer i stället. Växlingen görs på href="" i CSS
   och inte i javascript: raden bär information gästen behöver och ska stå
   rätt även om skript inte kör. Indraget med en hårlinje binder ihop den med
   stycket ovanför utan att rita en ruta. */
.rum {
  margin-top: clamp(14px, 2.5vw, 20px);
  border-left: 1px solid var(--salvia-linje);
  padding-left: clamp(12px, 3vw, 18px);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-sekundar);
}

.rum__lank[href=""] { display: none; }
.rum__lank:not([href=""]) ~ .rum__vantar { display: none; }

.brodtext a {
  text-decoration: underline;
  text-decoration-color: var(--salvia-linje);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.brodtext a:hover { text-decoration-color: currentColor; }

/* E-postadressen på kontaktsidan. Serif och större: den är sidans hela ärende
   och ska gå att läsa av på avstånd. break-word så att den inte spräcker
   layouten på en smal telefon. */
.epost {
  font-family: var(--serif);
  font-size: clamp(20px, 18px + 0.6vw, 26px);
  line-height: 1.35;
  margin-top: 1.2rem;
  word-break: break-word;
}


/* ---------- 9. Bredare skärmar ---------------------------------------------- */

/* Brytpunkten ligger på 62rem (992px) och inte lägre. Nio poster i spärrade
   versaler behöver ungefär så mycket bredd vid 12px, och 12px är golvet: hellre
   menyknappen kvar en bit upp än text som krymper under det. flex-wrap är
   skyddsnätet om en post skulle växa. */
@media (min-width: 62rem) {

  /* Ordmärket centreras och menyn lägger sig under, som en tryckt kolumntitel. */
  .topp { padding-bottom: clamp(14px, 2vw, 20px); }
  .topp__rad { justify-content: center; }
  .js .meny-knapp { display: none; }

  .meny {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 clamp(1.25rem, 2vw, 2rem);
    margin: clamp(14px, 2vw, 20px) 0 0;
    padding: 0;
    background: none;
  }

  .meny a {
    padding: 0.35rem 0;
    font-size: clamp(12px, 6px + 0.5vw, 13px);
    letter-spacing: 0.18em;
  }

  .ogonbryn { font-size: 13px; }
}


/* ---------- 10. Rörelse och utskrift ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .hoppa, .nav, .meny-knapp, .nedrakning, .osa-rad { display: none !important; }
  html, body { background: #FFFFFF; }
  .topp, .sidfot { border-color: var(--salvia-linje); }
  .hjalte { padding-top: 0; }
  .brodtext h2, .brodtext h3 { break-after: avoid; }
}