/* ============================================================
   SKRIFTER, hostet lokalt (ingen tredjeparts CDN, ingen cookies)
   Archivo & Newsreader, SIL Open Font License. Se /licenser/
   ============================================================ */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-var.woff2") format("woff2-variations");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-var-italic.woff2") format("woff2-variations");
  font-weight:200 800;
  font-style:italic;
  font-display:swap;
}

/* ============================================================
   KRABBESØSTRE, designsystem
   ============================================================ */
:root{
  --ink:#14130E;          /* varm næsten-sort */
  --ink-soft:#3B382E;
  --paper:#F6F2E9;        /* varm off-white */
  --paper-2:#EDE6D6;      /* sand */
  --muted:#68604F;
  --line:rgba(20,19,14,.16);
  --line-soft:rgba(20,19,14,.09);
  --sea:#1B3A6B;          /* fra logoet */
  --crab:#C1272D;         /* fra logoet, bruges yderst sparsomt */

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --text:"Newsreader",Georgia,"Times New Roman",serif;

  --pad:clamp(1.25rem,5vw,5.5rem);
  --max:78rem;
  --rule:1px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1.0625rem,.42vw + .96rem,1.1875rem);
  line-height:1.68;
  font-weight:350;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

::selection{background:var(--ink);color:var(--paper)}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;
  font-family:var(--display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- typografi ---------- */
.eyebrow{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.6875rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.5rem;
}
.eyebrow--light{color:rgba(246,242,233,.88)}

h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:"wdth" 74,"wght" 620;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.92;
  margin:0;
  text-wrap:balance;
}
h2{font-size:clamp(2.25rem,6.2vw,4.75rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.05}

.lede{
  font-size:clamp(1.1875rem,1.35vw + .9rem,1.6rem);
  line-height:1.5;
  font-weight:300;
  text-wrap:pretty;
}
p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}

/* ---------- knapper ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  padding:1.05rem 2rem;
  border:var(--rule) solid var(--ink);
  background:var(--ink);color:var(--paper);
  text-decoration:none;cursor:pointer;
  transition:background .35s ease,color .35s ease,transform .35s ease;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--light:hover{background:transparent;color:var(--paper)}
.btn--outline-light{background:transparent;color:var(--paper);border-color:rgba(246,242,233,.45)}
.btn--outline-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn .arw{transition:transform .35s ease}
.btn:hover .arw{transform:translateX(.3em)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
/* så den faste menulinje ikke dækker toppen af sektionen, man springer til */
#menu,#historien,#praktisk,#book,#indhold{scroll-margin-top:clamp(3.5rem,7vw,5rem)}
.section{padding-block:clamp(4.5rem,10vw,9.5rem)}
.rule{height:var(--rule);background:var(--line);border:0;margin:0}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem var(--pad);
  color:var(--paper);
  transition:background .4s ease,color .4s ease,padding .4s ease,box-shadow .4s ease;
}
.header.is-stuck{
  background:rgba(246,242,233,.86);color:var(--ink);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  padding-block:.85rem;
  box-shadow:0 1px 0 var(--line);
}
.header__brand{display:flex;align-items:center;gap:.62rem;text-decoration:none}
.header__crab{width:2.2rem;height:2.2rem;flex:0 0 auto;position:relative}
.header__crab img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s ease}
.header__crab .krabbe-lys{opacity:1}
.header__crab .krabbe-rod{opacity:0}
.header.is-stuck .header__crab .krabbe-lys{opacity:0}
.header.is-stuck .header__crab .krabbe-rod{opacity:1}
@media (max-width:420px){.header__crab{width:1.85rem;height:1.85rem}}

.header__mark{
  font-family:var(--display);
  font-variation-settings:"wdth" 78,"wght" 700;
  font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav a{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 500;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;position:relative;padding-block:.3rem;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.nav a:hover::after{transform:scaleX(1)}
.nav .nav__book{
  border:1px solid currentColor;padding:.55rem 1.1rem;
}
.nav .nav__book::after{display:none}
.nav .nav__book:hover{background:currentColor}
.header:not(.is-stuck) .nav__book:hover{color:var(--ink)}
.header.is-stuck .nav__book:hover{color:var(--paper)}
/* Historien og Praktisk skjules kun på de allersmalleste skærme. Grænsen lå
   på 760 pixels, dengang menuen havde fem punkter og Nytårskasse fyldte med.
   Med fire punkter er der plads fra omkring 360 pixels, altså på alle
   almindelige telefoner. Måles med alle punkter tvunget frem. */
@media (max-width:374px){.nav a:not(.nav__book):not(.nav__menu){display:none}}
/* Paa smaa skaerme viger ordet i menulinjen for logoet lige nedenunder,
   saa der bliver plads til nytaarskassen. Krabben bliver staaende. */
@media (max-width:620px){
  .header__mark{display:none}
  .nav{gap:.9rem}
  .nav a{font-size:.7rem;letter-spacing:.11em}
  .nav .nav__book{padding:.5rem .8rem}
}
/* Strammet yderligere på telefon, så alle fire punkter kan være der.
   Knappen må ikke brække over to linjer, for så bliver menulinjen høj. */
@media (max-width:480px){
  .nav{gap:.65rem}
  .nav a{font-size:.66rem;letter-spacing:.08em}
  .nav .nav__book{padding:.45rem .65rem;white-space:nowrap}
}

/* ============================================================
   MANIFEST
   ============================================================ */
/* Aabningen. Logoet er sidens overskrift og det foerste man moeder,
   saa der skal luft nok over det til den faste menulinje. */
.manifest{text-align:center;padding-top:clamp(7.5rem,14vw,11rem)}
.manifest__logo{
  margin:0 auto clamp(2rem,4vw,3.25rem);
  font-size:0;                       /* h1 skal ikke saette linjehoejde */
}
.manifest__logo img{
  width:clamp(11rem,23vw,18rem);height:auto;
  margin-inline:auto;
}
.manifest__fakta{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.55rem 1.75rem;
  max-width:46rem;margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  padding-top:1.35rem;
  border-top:var(--rule) solid var(--line);
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 450;
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
}
.manifest__quote{
  font-family:var(--text);
  font-size:clamp(1.75rem,4.6vw,3.5rem);
  line-height:1.16;
  font-weight:300;
  letter-spacing:-.015em;
  max-width:22ch;
  margin:0 auto clamp(2rem,4vw,3rem);
  text-transform:none;
  text-wrap:balance;
}
.manifest__body{
  max-width:50ch;margin-inline:auto;color:var(--ink-soft);
  font-size:1.075em;line-height:1.62;text-align:left;
}
@media (max-width:520px){.manifest__body{max-width:38ch}}

/* ============================================================
   FULDBREDDE-BÅND
   ============================================================ */
.band{position:relative;isolation:isolate}
.band img{width:100%;height:clamp(19rem,52vh,34rem);object-fit:cover;object-position:50% 38%}
.band--strand img{object-position:50% 26%}
.band--tall img{height:clamp(23rem,72vh,44rem)}
.band__caption{
  position:absolute;inset:auto 0 0;
  padding:var(--pad);
  color:var(--paper);
  background:linear-gradient(to top,rgba(12,11,8,.7),transparent);
  font-family:var(--display);
  font-variation-settings:"wdth" 84,"wght" 500;
  font-size:clamp(.8rem,1.4vw,1rem);
  letter-spacing:.2em;text-transform:uppercase;
  text-align:center;
}

/* ============================================================
   HISTORIEN
   ============================================================ */
.story{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:900px){
  .story{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .story__media{position:sticky;top:6rem}
}
.story__media figcaption{
  margin-top:.9rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 450;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.story__body p{max-width:52ch}
.story__body h2{margin-bottom:clamp(1.5rem,3vw,2.25rem)}

.pull{
  margin:clamp(2rem,4vw,3rem) 0;
  padding-left:clamp(1rem,2vw,1.75rem);
  border-left:2px solid var(--crab);
  font-size:clamp(1.25rem,2.1vw,1.7rem);
  line-height:1.32;font-weight:300;font-style:italic;
  max-width:26ch;
}
.pull cite{
  display:block;margin-top:.85rem;
  font-family:var(--display);font-style:normal;
  font-variation-settings:"wdth" 92,"wght" 500;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

/* RALIMA */
.ralima{
  border-top:var(--rule) solid var(--line);
  border-bottom:var(--rule) solid var(--line);
  padding-block:clamp(2.25rem,5vw,3.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(3,1fr);
}
.ralima__cell{text-align:center}
.ralima__syll{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 70,"wght" 700;
  font-size:clamp(2.25rem,7vw,4.25rem);
  line-height:.9;letter-spacing:-.01em;
}
.ralima__name{
  display:block;margin-top:.7rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 450;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.ralima__foot{
  grid-column:1/-1;text-align:center;margin-top:1rem;
  font-size:.95rem;color:var(--ink-soft);
}

/* ============================================================
   MENU
   ============================================================ */
.menu{background:var(--paper-2)}
.menu__head{text-align:center;margin-bottom:clamp(1rem,2vw,1.75rem)}

/* Overskriften over Ofte spurgt under Praktisk. Stod tidligere ogsaa
   over menuens lister, som nu er blevet til plakaten herunder. */
.list__title{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  margin:0 0 1.5rem;padding-bottom:.85rem;border-bottom:var(--rule) solid var(--line);
}

/* ============================================================
   MENUEN SOM PLAKAT
   Ingen fotos af retterne. Navnene er sat stort, så de får lov at
   fylde selv. Alt er centreret om én smal spalte, og hele menuen
   ligger i .plakat, så bredden kun ét sted skal rettes.
   ============================================================ */
.plakat{max-width:38rem;margin:0 auto;text-align:center}
.plakat__streg{
  width:2.5rem;height:1px;background:var(--crab);border:0;
  margin:clamp(1.5rem,3vw,2.25rem) auto;
}
.plakat__ret{padding-block:clamp(1.75rem,4vw,2.75rem)}
.plakat__ret + .plakat__ret{border-top:var(--rule) solid var(--line)}
.plakat__navn{
  font-family:var(--text);font-weight:400;text-transform:none;
  font-size:clamp(1.45rem,3.8vw,1.8rem);line-height:1.2;
  letter-spacing:-.015em;margin:0;text-wrap:balance;
}
.plakat__om{
  margin:.6rem auto 0;max-width:34ch;
  font-size:clamp(.92rem,2.2vw,1rem);line-height:1.55;color:var(--ink-soft);
}
.plakat__afsnit{margin-top:clamp(2.75rem,6vw,4rem)}
.plakat__titel{
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.35rem;
}
.plakat__linje{
  margin:0;padding-block:.5rem;
  font-size:clamp(1.02rem,3.2vw,1.2rem);line-height:1.4;
}
.plakat__linje + .plakat__linje{border-top:var(--rule) solid var(--line-soft)}
.plakat__sub{
  display:block;max-width:32ch;margin:.2rem auto 0;
  font-size:.84rem;color:var(--muted);line-height:1.5;
}

/* ============================================================
   PRAKTISK
   ============================================================ */
.facts{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border-top:var(--rule) solid var(--line);
}
.fact{
  padding:clamp(1.75rem,3.5vw,2.5rem) clamp(0rem,2.5vw,2rem) clamp(1.75rem,3.5vw,2.5rem) 0;
  border-bottom:var(--rule) solid var(--line);
}
@media (min-width:640px){
  .fact{border-right:var(--rule) solid var(--line);padding-left:clamp(1rem,2.5vw,2rem)}
  .fact:first-child{padding-left:0}
  .fact:last-child{border-right:0}
}
.fact dt{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.8rem;
}
.fact dd{margin:0;font-size:1.05rem;line-height:1.5}
.fact dd a{color:var(--sea);text-underline-offset:.22em;text-decoration-thickness:1px}

.kort{
  margin:clamp(3rem,6vw,4.5rem) 0 0;
  border:var(--rule) solid var(--line);
  background:var(--paper-2);
  overflow:hidden;
  aspect-ratio:16/9;
  position:relative;
}
@media (max-width:760px){.kort{aspect-ratio:4/5}}
.kort__flade{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.25rem;text-align:center;padding:var(--pad);
}
.kort__adresse{
  font-size:clamp(1.35rem,2.6vw,2.1rem);
  line-height:1.25;font-weight:300;margin:0;max-width:20ch;
}
.kort__note{
  margin:0;max-width:44ch;font-size:.92rem;line-height:1.5;color:var(--muted);
}
.kort__knapper{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.5rem}
.kort iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.howto{
  display:grid;gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin-top:clamp(3rem,6vw,5rem);
}
.howto__step{position:relative;padding-top:2.6rem}
.howto__num{
  position:absolute;top:0;left:0;
  font-family:var(--display);
  font-variation-settings:"wdth" 70,"wght" 700;
  font-size:1.6rem;color:var(--crab);line-height:1;
}
.howto__step h3{margin-bottom:.6rem;font-size:1rem;letter-spacing:.06em}
.howto__step p{font-size:.98rem;color:var(--ink-soft);line-height:1.55}

/* ============================================================
   OFTE SPURGT. Svar paa det gaesterne rent faktisk ringer om,
   sat i samme rolige raekker som resten af Praktisk.
   ============================================================ */
.faq{margin-top:clamp(3rem,6vw,5rem)}
.faq__liste{
  display:grid;margin:0;
  gap:0 clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;
  border-top:var(--rule) solid var(--line);
}
@media (min-width:760px){.faq__liste{grid-template-columns:1fr 1fr}}
.faq__punkt{
  padding-block:clamp(1.35rem,2.8vw,1.9rem);
  border-bottom:var(--rule) solid var(--line);
}
.faq dt{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7rem;
}
.faq dd{
  margin:0;font-size:1.02rem;line-height:1.55;
  color:var(--ink-soft);max-width:46ch;
}

/* ============================================================
   GALLERI
   ============================================================ */
.gallery{
  display:grid;gap:clamp(.4rem,1vw,.9rem);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0;overflow:hidden;background:var(--paper-2)}
.gallery img{
  width:100%;aspect-ratio:1;height:auto;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.gallery figure:hover img{transform:scale(1.04)}
/* beskæringen tilpasset hvert motiv */
.g1 img{object-position:50% 42%}
.g2 img{object-position:50% 64%}
.g3 img{object-position:50% 30%}
.g4 img{object-position:50% 50%}
.g5 img{object-position:44% 38%}
.g6 img{object-position:50% 56%}
.g7 img{object-position:74% 42%}
.g8 img{object-position:92% 50%}

/* ============================================================
   ANMELDELSER. Bygges ind af tools/hent_anmeldelser.py.
   Holdt lige saa knap som resten: ingen gule stjernerkasser,
   bare gaesternes ord og et lille maerke i krabberoed.
   ============================================================ */
.anmeldelser{background:var(--paper-2)}
.anm__hoved{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 450;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:1.25rem 0 0;
}
.anm__liste{
  display:grid;gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  margin-top:clamp(2.5rem,5vw,4rem);
}
.anm__kort{
  margin:0;padding-top:1.6rem;
  border-top:var(--rule) solid var(--line);
}
.anm__stjerner{
  display:block;margin-bottom:.9rem;
  color:var(--crab);font-size:.9rem;letter-spacing:.22em;
}
.anm__kort blockquote{
  margin:0;font-size:1.04rem;line-height:1.6;
  color:var(--ink-soft);text-wrap:pretty;
}
.anm__kort figcaption{
  margin-top:1.1rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 500;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.anm__naar{display:block;margin-top:.35rem;opacity:.72}
.anm__kilde{
  margin-top:clamp(2rem,4vw,3rem);
  font-size:.85rem;color:var(--muted);
}
.anm__kilde a{color:var(--muted);text-underline-offset:.22em}

/* ============================================================
   SÆSON / CTA
   ============================================================ */
.cta{background:var(--ink);color:var(--paper);padding-bottom:clamp(3rem,6vw,5rem)}
.cta h2{color:var(--paper)}
/* Én spalte, centreret. Var to spalter, dengang tilmeldingen til
   nyhedsbrevet stod i den højre. Reglerne for .signup er fjernet sammen
   med formularen og kan hentes frem fra historikken, hvis den skal tilbage. */
.cta__enkel{max-width:46ch;margin-inline:auto;text-align:center}
.cta__lede{color:rgba(246,242,233,.82);margin-top:clamp(1.5rem,3vw,2rem)}

/* Formularens regler bliver liggende: nytårssidens bestillingsformular
   bruger de samme klasser, se .bestil .signup nederst i filen. */
.signup{margin-top:2rem}
.signup__label{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 500;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,242,233,.65);margin-bottom:.9rem;
}
.signup__field{display:flex;flex-wrap:wrap;gap:.6rem}
.signup input[type=email]{
  flex:1 1 15rem;min-width:0;
  background:transparent;color:var(--paper);
  border:1px solid rgba(246,242,233,.35);
  padding:1rem 1.1rem;
  font-family:var(--text);font-size:1rem;
}
.signup input::placeholder{color:rgba(246,242,233,.52)}
.signup input:focus{border-color:var(--paper);outline:none}
.signup__note{
  margin-top:.9rem;font-size:.85rem;color:rgba(246,242,233,.62);max-width:40ch;
}
.signup__ok{
  margin-top:.9rem;font-size:.95rem;color:var(--paper);display:none;
}
.signup.is-done .signup__ok{display:block}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:rgba(246,242,233,.68);padding-bottom:clamp(2.5rem,5vw,4rem)}
.footer__top{
  border-top:1px solid rgba(246,242,233,.16);
  padding-top:clamp(2.5rem,5vw,4rem);
  display:grid;gap:2.25rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.footer h3{
  font-size:.68rem;letter-spacing:.22em;color:rgba(246,242,233,.60);
  font-variation-settings:"wdth" 92,"wght" 600;
  margin-bottom:1rem;
}
.footer a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(246,242,233,.25)}
.footer a:hover{border-bottom-color:var(--paper)}
.footer__logo{
  display:block;
  width:clamp(9rem,18vw,13rem);height:auto;
  margin:clamp(3rem,6vw,4.5rem) auto clamp(1.5rem,3vw,2rem);
  opacity:.92;
}
.footer__legal{
  margin-top:1.25rem;font-size:.78rem;color:rgba(246,242,233,.56);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem;
  text-align:center;
}

/* ============================================================
   ENKEL UNDERSIDE. Ingen topbillede, så indholdet skal selv holde
   afstand til den faste menulinje. Bruges af kontrolrapporten.
   ============================================================ */
.enkel{
  padding-top:clamp(5.75rem,11vw,8rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.enkel h1{
  font-size:clamp(1.9rem,4.4vw,3.25rem);
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
/* Tekstblokken på de enkle sider, fx bordreservationen. Bredden er bundet,
   så linjerne ikke bliver for lange at læse på en bred skærm. */
.besked{max-width:52ch}
.besked p{margin:0 0 1.1rem}
.besked p:last-child{margin-bottom:0}

/* Arket skalerer efter skærmhøjden, ikke bredden, så overskriften bliver
   stående, når siden åbnes. Hele arket er et link til PDF'en i fuld
   størrelse, for den, der vil læse det små med. */
.ark{
  display:inline-block;vertical-align:top;margin:0;
  max-width:100%;
  border:var(--rule) solid var(--line);
  background:#fff;
}
.ark a{display:block;text-decoration:none}
.ark img{
  display:block;
  width:auto;height:auto;max-width:100%;
  max-height:clamp(17rem,46vh,26rem);
  transition:opacity .35s ease;
}
.ark a:hover img{opacity:.86}
.ark__links{
  display:flex;flex-wrap:wrap;gap:.75rem;
  margin-top:clamp(1.5rem,3vw,2.25rem);
}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(1.6rem);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .gallery img{transition:none}
}

/* ============================================================
   SPOT OG DET MED SMAAT. Bruges af nytaarshenvisningen paa
   forsiden og af det med smaat paa nytaarssiden.
   ============================================================ */
/* det med småt */
.smaat{background:var(--paper-2)}
.smaat__grid{
  display:grid;gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.spot{
  background:var(--paper-2);
  border-top:var(--rule) solid var(--line);
  border-bottom:var(--rule) solid var(--line);
  text-align:center;
  padding-block:clamp(3.25rem,7vw,5.5rem);
}
.spot h2{font-size:clamp(1.9rem,4.6vw,3.4rem);margin-bottom:1.1rem}
.spot p{
  max-width:46ch;margin-inline:auto;color:var(--ink-soft);
  font-size:1.05rem;line-height:1.6;
}
.spot .btn{margin-top:clamp(1.75rem,3.5vw,2.5rem)}

.smaat h3{
  font-size:.72rem;letter-spacing:.22em;color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 600;margin-bottom:.85rem;
}
.smaat p{font-size:.98rem;line-height:1.55;color:var(--ink-soft)}

/* ============================================================
   BEVÆGELSE. Rolig, ensartet, aldrig hurtigere end en bølge.
   Alt slås fra for gæster med reduceret bevægelse.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @keyframes aande{from{transform:scale(1.14)}to{transform:scale(1.07)}}
  @keyframes stig{from{opacity:0;transform:translateY(1.1rem)}to{opacity:1;transform:none}}
}

/* ============================================================
   NYTÅRSSIDEN. Samme hus, andet lys.
   Restauranten taler i kondenseret versal signalskrift.
   Nytårskassen taler i graveret antikva, som en invitation.
   ============================================================ */
.nat{
  --nat:#0E0C09;
  --nat-hoej:#1A1710;
  --messing:#C9A46A;
  --messing-dyb:#BE9556;
  --nat-linje:rgba(201,164,106,.28);
  --nat-linje-svag:rgba(246,242,233,.14);
  --nat-mut:rgba(246,242,233,.68);
  position:relative;z-index:1;
  background:transparent;
  color:var(--paper);
}

/* stjernelaerredet ligger bagved alt og flytter sig ikke ved rul */
.stjerner{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;display:block;
}
.nat ::selection{background:var(--messing);color:var(--nat)}

/* menulinje og footer i samme lys */
.header--nat{color:var(--paper)}
.header--nat.is-stuck{
  background:rgba(16,14,9,.82);color:var(--paper);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 var(--nat-linje-svag);
}
.header--nat .header__crab .krabbe-lys{opacity:1}
.header--nat .header__crab .krabbe-rod{opacity:0}
.header--nat.is-stuck .header__crab .krabbe-lys{opacity:1}
.header--nat.is-stuck .header__crab .krabbe-rod{opacity:0}
.footer--nat{background:transparent;position:relative;z-index:1;border-top:1px solid var(--nat-linje)}
.footer--nat a{border-bottom-color:var(--messing)}

/* ---------- topbillede ---------- */
.natshero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;overflow:hidden;
}
.natshero__media{position:absolute;inset:0}
.natshero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:saturate(.86) brightness(.82)}
.natshero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 62% 38%,rgba(16,14,9,0) 0%,rgba(16,14,9,.55) 58%,rgba(16,14,9,.92) 100%),
    linear-gradient(to top,rgba(16,14,9,.96) 0%,rgba(16,14,9,.72) 26%,rgba(16,14,9,.18) 62%);
}
.natshero__inner{
  position:relative;width:100%;max-width:var(--max);margin-inline:auto;
  padding:0 var(--pad) clamp(3rem,7vw,5.5rem);
}
.natshero__mark{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--messing);margin:0 0 1.6rem;
}
.natshero h1{
  font-family:var(--text);
  font-weight:300;text-transform:none;
  font-size:clamp(2.9rem,8.4vw,6.4rem);
  line-height:1.02;letter-spacing:-.022em;
  color:var(--paper);margin:0 0 1.1rem;max-width:14ch;
}
.natshero h1 em{font-style:italic;color:var(--messing)}
.natshero__lede{
  max-width:40ch;font-size:clamp(1.08rem,1.1vw + .85rem,1.42rem);
  line-height:1.5;font-weight:300;color:rgba(246,242,233,.86);margin:0;
}
.natshero__fod{
  display:flex;flex-wrap:wrap;gap:.55rem 2.2rem;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.3rem;
  border-top:1px solid var(--nat-linje);
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 450;
  font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--nat-mut);
}

/* ---------- datoen ---------- */
.dato{
  text-align:center;
  padding-block:clamp(4rem,9vw,7.5rem);
  border-bottom:1px solid var(--nat-linje-svag);
}
.dato__tal{
  font-family:var(--text);font-weight:200;
  font-size:clamp(6rem,22vw,15rem);line-height:.82;
  letter-spacing:-.04em;color:var(--paper);
  display:block;font-variant-numeric:lining-nums;
}
.dato__maaned{
  display:block;margin-top:.9rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 500;
  font-size:.74rem;letter-spacing:.42em;text-transform:uppercase;color:var(--messing);
}
.dato__linje{
  max-width:34ch;margin:clamp(2rem,4vw,2.75rem) auto 0;
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;
  font-weight:300;color:rgba(246,242,233,.8);
}

/* ---------- kassens indhold, sat som et kort ---------- */
.kassen{padding-block:clamp(4rem,9vw,8rem)}
.kassen__hoved{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.kassen__hoved p{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--messing);margin:0 0 1.1rem;
}
.kassen__hoved h2{
  font-family:var(--text);font-weight:300;text-transform:none;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;letter-spacing:-.018em;
  color:var(--paper);
}
.kort-liste{
  list-style:none;margin:0 auto;padding:0;
  max-width:44rem;
  border-top:1px solid var(--nat-linje);
}
.kort-liste li{
  display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;
  padding-block:clamp(1.3rem,2.6vw,1.9rem);
  border-bottom:1px solid var(--nat-linje-svag);
}
.kort-liste b{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 500;
  font-size:.7rem;letter-spacing:.14em;color:var(--messing);
  padding-top:.5rem;font-variant-numeric:tabular-nums;
}
.kort-liste h3{
  font-family:var(--text);font-weight:400;text-transform:none;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25;letter-spacing:-.01em;
  color:var(--paper);margin:0 0 .3rem;
}
.kort-liste p{
  margin:0;font-size:1rem;line-height:1.55;color:var(--nat-mut);max-width:46ch;
}

/* ---------- levering ---------- */
.levering{
  background:rgba(24,21,15,.82);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border-block:1px solid var(--nat-linje);
  padding-block:clamp(3.25rem,7vw,5.5rem);
}
.levering__grid{
  display:grid;gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  text-align:center;
}
.levering dt{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--messing);margin-bottom:.9rem;
}
.levering dd{
  margin:0;font-family:var(--text);font-weight:300;
  font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.25;color:var(--paper);
}
.levering dd small{
  display:block;margin-top:.5rem;font-size:.92rem;
  color:var(--nat-mut);font-weight:400;line-height:1.5;
}

/* ---------- bestilling ---------- */
.bestil{padding-block:clamp(4rem,9vw,8rem);text-align:center}
.bestil h2{
  font-family:var(--text);font-weight:300;text-transform:none;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;letter-spacing:-.018em;
  color:var(--paper);margin-bottom:1.2rem;
}
.bestil__lede{
  max-width:44ch;margin:0 auto clamp(2rem,4vw,2.75rem);
  font-size:1.08rem;line-height:1.6;color:rgba(246,242,233,.8);
}
.btn--messing{
  background:var(--messing);color:var(--nat);border-color:var(--messing);
}
.btn--messing:hover{background:transparent;color:var(--messing)}
.bestil .signup{margin:0 auto;max-width:34rem;text-align:left}
.bestil .signup input[type=email]{border-color:var(--nat-linje)}
.bestil .signup input:focus{border-color:var(--messing)}
.bestil .signup__label{color:var(--messing)}
.bestil .signup__note{color:var(--nat-mut)}

/* ---------- det med småt på mørk bund ---------- */
.smaat--nat{background:rgba(24,21,15,.82);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-top:1px solid var(--nat-linje-svag)}
.smaat--nat h3{color:var(--messing)}
.smaat--nat p{color:var(--nat-mut)}
.smaat--nat .eyebrow{color:var(--messing)}
/* Det store billede vises ubeskåret, men står som en plade midt på siden,
   ikke i fuld bredde. Højden sætter målet, bredden følger med af sig selv,
   så et lodret motiv aldrig fylder mere end et skærmbillede. */
.nat .band img{
  width:auto;height:auto;
  max-width:100%;
  max-height:min(74vh,42rem);
  margin-inline:auto;
  object-fit:contain;
  border:1px solid var(--nat-linje);
  filter:brightness(.9) saturate(.94);
}
.nat .band{
  position:relative;z-index:1;
  padding-inline:var(--pad);
  padding-block:clamp(2rem,5vw,4rem);
}
.nat .band__caption{background:linear-gradient(to top,rgba(11,10,7,.72),transparent)}