/* Askepott og Askeladden, prototype v5. Kveldsstemning i farger: petrol, blåtime og lilla på kvelden, lys grunn under all lesetekst. 8px rytme, 12px radius. */

:root {
  /* Gudruns egne fargeprøver, 25. september 2026. Sju farger, hver med én jobb.
     Der hennes verdi ikke holder som tekst brukes den som flate, og en løst variant (samme tone) som tekst.
     Alle tekst/bakgrunn-par er kontrollert mot WCAG AA (4,5:1). */

  /* Kvelden. Hero, sidehoder og bunn. Aldri under lange avsnitt. */
  --petrol-deep: #022d2b;   /* hennes mørke petrol */
  --night: #0e4168;         /* hennes mørke blå */
  --burgundy: #55000a;      /* hennes dype burgunder, kveldens siste stopp og bunnen av Kjærlighet-flisen */
  --blue: #075296;          /* hennes blå. Bestillingsboksen og lenker på lys grunn */

  /* Lys grunn. Alt som skal leses. */
  --paper: #fff9f5;
  --card: #ffffff;
  --sun: #ffecdf;
  --ink: #04233c;           /* tekst: hennes mørke blå trukket ned til blekk */
  --grey: #5d6d7c;          /* sekundær tekst, 4,5:1 også på tonene */
  --line: #d7dfe8;
  --line-2: #e6ecf2;

  /* Aksentene. */
  --fire: #e37d00;          /* hennes oransje #e77920, nudget litt mot gult som hun foreslo. Knapper og gnisten, aldri store flater */
  --fire-hover: #f18a1f;
  --btn: #f8a541;           /* lysere oransje på knappene, Si fra 25. sep */
  --btn-hover: #ffb65e;
  --btn-text: #04233c;      /* tekst på oransje knapp. Blekk om dagen, nesten svart om natten, der blekket selv er lyst */
  --fire-text: #a55900;     /* oransje som tekst på lys grunn */
  --glow: #ffc79c;          /* oransje som tekst på kvelden, 7:1 */
  --red: #9d1515;           /* hennes røde. Kjærlighet */
  --red-tint: #ffe8e5;
  --petrol: #007975;        /* hennes petrol løst lysere for tekst. Vennskap */
  --petrol-tint: #d5f7f4;
  --purple: #8f1ab2;        /* hennes lilla, som den er. De tre ordene du velger, og fokus */
  --purple-tint: #f4e6fb;
  --lilac: #df86ff;         /* lilla som kant på kvelden */

  /* Fontene, 29. sep: "mer menneskelig/manuelt/rundt/lunt". Averia Sans Libre til titler (tegnet som et gjennomsnitt av
     mange fonter, derfor den lille skjelvingen i strekene), Livvic til brødtekst (rund, men klar i 18px), Agbalumo bare til mottoet,
     og Berkshire Swash til de to store A-ene i navnet, som i Canva-logoen hennes. Systemfonten som reserve til alt er lastet. */
  --display: "Averia Sans Libre", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: "Livvic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --script: "Agbalumo", cursive;
  --swash: "Berkshire Swash", "Averia Sans Libre", cursive;
  --wrap: 1240px;
  --gutter: 24px;
  --r: 12px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.5;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button, select { cursor: pointer; font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: 34px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }
.grey { color: var(--grey); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.night :focus-visible { outline-color: var(--glow); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--btn);
  background: var(--btn); color: var(--btn-text); font-weight: 700; font-size: 17px;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; white-space: nowrap;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); box-shadow: 0 8px 20px rgba(248,165,65,.35); }
.btn:active { transform: scale(.98); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.btn-block { width: 100%; height: 52px; font-size: 18px; }

/* the spark: the one fairy-tale detail, used in the mark and as the meeting marker */
.spark { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }

/* the evening: one treatment for every dark band. Petrol into blue hour into purple, an ember low on the left, a whisper of grain */
.night { position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, var(--petrol-deep) 0%, var(--night) 55%, var(--burgundy) 100%); }
.night::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 8% 105%, rgba(227,125,0,.34) 0%, rgba(227,125,0,0) 68%);
}
.night::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: .12; mix-blend-mode: soft-light; }
.night > * { position: relative; z-index: 1; }
.night a:not(.btn) { color: #fff; }

/* header: part of the evening, so the hero and the page heads start right under it */
.top { position: sticky; top: 0; z-index: 20; background: rgba(2,45,43,.94); color: #fff; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.1); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
/* the wordmark: her Canva logo is a plain sans with a heavy, rounded, swashy A starting each word. The A is Berkshire Swash,
   the rest is the body font, and "&" sits in the candle colour. "&" only here; in copy it is always "og" */
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.005em; white-space: nowrap; }
.brand .wm { display: inline; }
.brand .A { font-family: var(--swash); font-weight: 400; font-size: 1.32em; line-height: .8; margin-right: .02em; }
.brand .spark { color: var(--glow); font-size: 20px; }
.brand em { font-style: normal; color: var(--glow); }
.top-nav { display: none; gap: 4px; font-size: 16px; font-weight: 500; }
.top-nav a { white-space: nowrap; padding: 10px 14px; border-radius: 999px; transition: background .15s; }
.top-nav a:hover { background: rgba(255,255,255,.12); }
.top-nav a.is-here { background: rgba(255,255,255,.16); font-weight: 600; }
.top .btn { height: 40px; padding: 0 16px; font-size: 16px; flex: 0 0 auto; }

/* front page opener: the line dance loop under her evening colours, and one message with one thing to do */
.opener { isolation: isolate; padding: 72px 0 48px; min-height: 72vh; display: flex; align-items: flex-end; }
.opener > .opener-bg { position: absolute; inset: 0; z-index: 0; }
.opener-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; display: block; }
.opener-bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2,45,43,.4) 0%, rgba(2,45,43,0) 30%, rgba(14,65,104,.45) 60%, rgba(4,35,60,.9) 100%),
    linear-gradient(100deg, rgba(2,45,43,.88) 0%, rgba(14,65,104,.65) 50%, rgba(85,0,10,.35) 100%); }
.opener > .wrap { position: relative; z-index: 2; width: 100%; }
.opener-copy { display: grid; gap: 16px; justify-items: start; }
.opener-copy > * { max-width: 720px; }
.motto { display: inline-flex; align-items: center; gap: 10px; font-family: var(--script); font-size: 24px; font-weight: 400; color: var(--glow); margin: 0; }
.opener h1 { font-size: 38px; color: #fff; text-wrap: balance; }
.opener-sub { color: rgba(255,255,255,.9); font-size: 18px; max-width: 46ch; }
.opener-sub a { text-decoration: underline; text-underline-offset: 3px; }
.opener-sub a:hover { color: var(--glow); }
.opener .btn-big { margin-top: 8px; height: 56px; padding: 0 32px; font-size: 18px; }

/* the sentence: the three words you choose, sitting right above the cards they filter. Underlined words, not boxes */
.sentence { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.6; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.pick { position: relative; display: inline-block; vertical-align: baseline; }
.pick select {
  appearance: none; -webkit-appearance: none; border: 0; border-bottom: 2px solid var(--purple); border-radius: 0; background: transparent; color: var(--purple);
  --pad: 30; padding: 0 26px 0 2px; height: 1.35em; line-height: 1.35em; font: inherit; font-weight: 700; outline: none;
  transition: background .15s, border-color .15s;
}
.pick select:hover, .pick select:focus { background: var(--purple-tint); }
.pick select option { color: var(--ink); background: #fff; font-weight: 400; }
.pick::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: translateY(-65%) rotate(45deg);
}

/* the activity strip: what an evening here can be, low on the page, on paper */
.activities { padding: 0 0 64px; }
.strip-head { margin: 0 0 16px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fire-text); }
.strip { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip li { flex: 0 0 44%; scroll-snap-align: start; }
.strip a { display: block; }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .15s; }
.strip a:hover img { transform: translateY(-3px); border-color: var(--fire); }
.strip span { display: block; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.strip a:hover span { color: var(--fire-text); }

/* the two worlds, on her photos, each in its own colour */
.worlds { padding: 40px 0 8px; }
.worlds-grid { display: grid; gap: 16px; }
.world { position: relative; display: block; min-height: 280px; border-radius: 16px; overflow: hidden; color: #fff; isolation: isolate; }
.world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); z-index: -2; }
.world:hover img { transform: scale(1.04); }
.world::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.world.is-love::before { background: linear-gradient(180deg, rgba(85,0,10,0) 45%, rgba(85,0,10,.85) 100%); }
.world.is-friend::before { background: linear-gradient(180deg, rgba(2,45,43,0) 45%, rgba(2,45,43,.85) 100%); }
.world-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: grid; gap: 6px; }
.world-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--glow); }
.world h3 { font-size: 24px; max-width: 18ch; text-wrap: balance; }
.world p { font-size: 17px; color: rgba(255,255,255,.88); max-width: 40ch; }
.world .go { margin-top: 4px; font-weight: 600; font-size: 15px; color: rgba(255,255,255,.85); }
.world:hover .go { color: var(--glow); }

/* cards */
.catalog { padding: 40px 0 64px; }
.catalog-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px 16px; margin-bottom: 24px; }
.catalog-head h2 { font-size: 29px; }
.catalog-head .sentence { grid-column: 1 / -1; }
.count { grid-column: 2; grid-row: 1; font-size: 16px; color: var(--grey); }
.grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
.card {
  --world: var(--red); --world-soft: var(--red-tint);
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.card.is-friend { --world: var(--petrol); --world-soft: var(--petrol-tint); }
.card:hover { border-color: var(--world); transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(4,35,60,.25); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sun); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-media img { transform: scale(1.04); }
.card-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--world); }
.card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.card-kicker { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--world-soft); color: var(--world); font-weight: 700; letter-spacing: .04em; }
.tag .spark { font-size: 13px; }
.card-title { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.card:hover .card-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--world); }
.meet { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.meet li { display: grid; grid-template-columns: 14px 56px 1fr; gap: 8px; align-items: baseline; font-size: 16px; }
.meet .spark { color: var(--world); font-size: 14px; align-self: center; }
.meet b { font-weight: 600; white-space: nowrap; }
.meet span { color: var(--grey); }
.card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; color: var(--grey); }
.card-foot b { color: var(--ink); font-size: 18px; font-weight: 700; }
.empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--line); border-radius: 16px; color: var(--grey); font-size: 17px; background: var(--card); }
.empty a { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* payment trust */
.secure { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.secure-label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--grey); }
.pays { display: inline-flex; gap: 6px; }
.pay { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.pay-vipps { background: #ff5b24; color: #fff; }
.pay-klarna { background: #ffb3c7; color: #17120f; }
.pay-card { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.secure-quiet { margin-top: 32px; justify-content: center; }
.secure-quiet .pay { color: var(--grey); border: 1px solid var(--line); font-weight: 600; }
.secure-dark { margin-top: 16px; }
.secure-dark .secure-label { color: rgba(255,255,255,.8); }
.secure-dark .pay-card { color: #fff; border-color: rgba(255,255,255,.4); }

/* footer: the evening again, with the motto */
.foot { padding: 48px 0 32px; font-size: 16px; color: rgba(255,255,255,.78); }
.foot-inner { display: grid; gap: 24px; }
.foot-brand { display: grid; gap: 8px; }
.foot-motto { display: inline-flex; align-items: center; gap: 10px; font-family: var(--script); font-weight: 400; color: #fff; font-size: 32px; }
.foot-motto .spark { color: var(--glow); font-size: 22px; }
.foot-mark { display: inline-flex; margin: -4px 0 4px; font-size: 20px; color: #fff; }
.foot-mark em { font-style: normal; color: var(--glow); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-links a { color: #fff; font-weight: 500; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--glow); }
.foot p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.foot p a:hover { color: var(--glow); }

/* subpages: an evening head, then paper for the reading */
.page { padding: 0 0 80px; }
.page-head { padding: 40px 0; margin-bottom: 32px; }
.page-head h1 { font-size: 40px; }
.page-head p { margin-top: 8px; color: rgba(255,255,255,.82); font-size: 18px; max-width: 60ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--glow); margin-bottom: 12px; }
.prose { font-size: 18px; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 16px; }
.prose ul { padding-left: 20px; margin: 0; }
.prose li + li { margin-top: 4px; }
.prose strong { font-weight: 700; }
.prose a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.program-list { display: grid; gap: 32px 24px; }
.program-row { display: grid; gap: 12px; align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.program-row img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.program-row > div { padding: 4px 16px 16px; }
.program-row h2 { font-size: 22px; margin-bottom: 2px; }
.program-row ul { margin: 4px 0 16px; padding-left: 18px; color: var(--grey); font-size: 17px; }
.program-row .meta { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fire-text); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: s; }
.steps li { padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.steps li::before {
  counter-increment: s; content: counter(s); display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--fire); color: var(--btn-text); font-family: var(--display); font-weight: 700; font-size: 17px; margin-bottom: 16px;
}
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--grey); font-size: 17px; }

.about-grid { display: grid; gap: 24px; }
.about-grid img { border-radius: 16px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 35%; width: 100%; }

.faq-list { display: grid; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 18px; display: flex; justify-content: space-between; gap: 16px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--fire-text); font-size: 22px; line-height: 1; flex: 0 0 auto; }
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list p { margin-top: 8px; color: var(--grey); max-width: 62ch; font-size: 17px; }
.faq-list a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* event page: evening head, the photo breaking out of it */
.event { padding: 0 0 120px; }
.event-head { padding: 40px 0 96px; }
.event-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--glow); margin-bottom: 8px; }
.event-kicker span { color: rgba(255,255,255,.8); font-weight: 600; flex-basis: 100%; }
.event-title h1 { font-size: 38px; }
.event-title p { margin-top: 8px; color: rgba(255,255,255,.82); font-size: 17px; }
.hero { border-radius: 16px; overflow: hidden; margin-top: -72px; position: relative; z-index: 2; box-shadow: 0 24px 48px -24px rgba(4,35,60,.5); }
.hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.event-grid { display: grid; gap: 32px; margin-top: 24px; align-items: start; }
.event-main > section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.event-main > section:first-child { padding-top: 0; }
.event-main > section:last-child { border-bottom: 0; }
.event-main h2 { margin-bottom: 16px; }
.host { display: flex; align-items: center; gap: 16px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 6%; transform: scale(2.6); transform-origin: 58% 6%; }
.host b { display: block; font-weight: 600; }
.host span { color: var(--grey); font-size: 16px; }
.host a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding-bottom: 24px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 4px; border-left: 2px dashed var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline .spark { width: 24px; height: 24px; color: var(--fire); }
.timeline .when { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fire-text); }
.timeline b { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; margin: 2px 0; }
.timeline span { color: var(--grey); font-size: 16px; }

/* the booking box: the poker table's blue, the one solid dark accent on a light page */
.book { position: sticky; top: 88px; border-radius: 16px; padding: 24px; background: var(--blue); color: #fff; }
.book-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--glow); }
.book h2 { font-size: 27px; margin: 8px 0 4px; }
.book-price { font-size: 17px; color: rgba(255,255,255,.8); }
.book-price b { color: #fff; font-size: 25px; font-family: var(--display); }
.book-fields { margin: 16px 0; display: grid; gap: 8px; }
.book-field { position: relative; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 10px; padding: 8px 12px; display: grid; }
.book-field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.8); }
.book-field select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0; font-size: 17px; width: 100%; outline: none; height: 22px; color: #fff; }
.book-field select option { color: var(--ink); }
.book-field::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-60%) rotate(45deg); }
.book-note { color: rgba(255,255,255,.8); font-size: 15px; margin-top: 12px; }
.book-sum { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); display: flex; justify-content: space-between; font-weight: 600; }

.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--blue); color: #fff;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 -8px 24px rgba(4,35,60,.25);
}
.bookbar b { font-size: 18px; font-family: var(--display); }
.bookbar span { display: block; color: rgba(255,255,255,.8); font-size: 15px; }
.bookbar .btn { height: 44px; padding: 0 24px; }

/* tablet */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .sentence { font-size: 28px; }
  .opener h1 { font-size: 48px; }
  .strip li { flex-basis: 30%; }
  .worlds-grid { grid-template-columns: 1fr 1fr; }
  .foot-inner { grid-template-columns: 1fr auto; align-items: end; }
  .program-list { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
  .hero img { aspect-ratio: 21 / 9; }
  .hero { margin-top: -80px; }
  .event-kicker span { flex-basis: auto; }
  .event-kicker span::before { content: "·"; margin-right: 8px; }
}

/* desktop */
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .opener { padding: 120px 0 72px; min-height: 80vh; }
  .opener-copy { gap: 20px; }
  .opener-copy > * { max-width: 800px; }
  .motto { font-size: 28px; }
  .opener h1 { font-size: 60px; }
  .opener-sub { font-size: 20px; }
  .sentence { font-size: 32px; white-space: nowrap; }
  .strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; }
  .strip li { flex: none; }
  .activities { padding-bottom: 96px; }
  .worlds { padding-top: 48px; }
  .world { min-height: 420px; }
  .world-body { padding: 32px; }
  .catalog { padding: 48px 0 80px; }
  .event { padding-bottom: 80px; }
  .event-head { padding: 48px 0 112px; }
  .event-grid { grid-template-columns: 1.6fr 1fr; gap: 64px; }
  .bookbar { display: none; }
  .about-grid img { aspect-ratio: 4 / 5; }
  .page { padding-bottom: 96px; }
  .page-head { padding: 56px 0; margin-bottom: 40px; }
  .program-list { grid-template-columns: repeat(3, 1fr); }
}

/* the nav only once it fits on one line at the larger type */
@media (min-width: 1120px) { .top-nav { display: flex; } }

/* phones: the larger type must still fit 390px without sideways scroll */
@media (max-width: 479px) {
  .brand { font-size: 16px; gap: 6px; }
  .top .btn { padding: 0 14px; height: 40px; font-size: 15px; }
  .opener h1 { font-size: 36px; }
}
.opener-copy > .opener-sub { max-width: 46ch; }
.age-note { grid-column: 1 / -1; margin: 12px 0 0; max-width: 68ch; font-size: 16px; line-height: 1.6; color: var(--grey); }

/* front page: the menu floats transparent over the line dance, and takes its
   petrol colour once the page is scrolled (script.js sets .is-scrolled) */
.top-over { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .25s, border-color .25s, backdrop-filter .25s; }
.top-over.is-scrolled { background: var(--petrol-deep); border-bottom-color: rgba(255,255,255,.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.top-over + .opener { padding-top: 136px; }
@media (min-width: 960px) { .top-over + .opener { padding-top: 184px; } }

/* the search pill, Airbnb style: By · Alder · Søker and a dark button with the count */
.catalog-head .search { grid-column: 1 / -1; }
.search { position: relative; display: grid; gap: 0; margin: 8px 0 0; padding: 8px; border: 1px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: 0 10px 28px -16px rgba(4,35,60,.35); }
.seg { position: relative; }
.seg + .seg { border-top: 1px solid var(--line); }
.seg-btn { display: grid; gap: 2px; width: 100%; padding: 12px 20px; border: 0; border-radius: 16px; background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.seg-btn:hover, .seg.is-open .seg-btn { background: #f3eee8; }
.seg-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.seg-value { font-size: 19px; }
.seg.is-set .seg-value { font-weight: 600; }
.seg-list { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px -12px rgba(4,35,60,.35), 0 0 0 1px var(--line); }
.seg-list li { padding: 12px 16px; border-radius: 10px; font-size: 18px; cursor: pointer; }
.seg-list li:hover { background: #f3eee8; }
.seg-list li[aria-selected="true"] { font-weight: 700; color: var(--purple); }
.search-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; height: 56px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 18px; font-weight: 600; cursor: pointer; }
.search-go:hover { background: #0e4168; }
@media (min-width: 760px) {
  .search { grid-template-columns: 1fr 1fr 1fr auto; align-items: center; border-radius: 999px; padding: 8px 8px 8px 12px; }
  .seg + .seg { border-top: 0; }
  .seg + .seg::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; border-left: 1px solid var(--line); }
  .seg-btn { border-radius: 999px; padding: 12px 28px; }
  .search-go { margin: 0 0 0 8px; }
}
.catalog-head .count { display: none; } /* the search button carries the count now */
.legal h2 { margin: 40px 0 12px; font-size: 24px; color: var(--ink); }
.legal ul + p, .legal p + ul { margin-top: 12px; }

/* booking form in the booking box */
.book-input input { border: 0; background: transparent; padding: 0; font: inherit; font-size: 17px; color: #fff; outline: none; height: 24px; width: 100%; }
.book-input::after { display: none; }
.book-field:focus-within { border-color: #fff; }
.book-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.9); cursor: pointer; }
.book-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--btn); cursor: pointer; }
.book-check a { text-decoration: underline; }
.book-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fff; color: var(--red); font-size: 15px; font-weight: 600; }
.book-form .btn { margin-top: 16px; }
.book-form .btn:disabled { opacity: .6; cursor: default; }
/* [hidden] must win over the fields' own display:grid, or "Navnet til vennen din" always shows */
.book-form [hidden] { display: none !important; }
.book-row2 { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }

/* booking box: a white card on the paper page, like the rest of the site,
   instead of the solid blue block that stood apart from everything around it */
.book { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 44px -24px rgba(4,35,60,.35); }
.book-kicker { color: var(--fire-text); }
.book-price { color: var(--grey); }
.book-price b { color: var(--ink); }
.book-field { background: #fff; border: 1px solid var(--line); }
.book-field:hover { border-color: #b9c6d3; }
.book-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.book-field label { color: var(--grey); }
.book-field select, .book-input input { color: var(--ink); }
.book-field::after { border-color: var(--ink); }
.book-check { color: var(--ink); }
.book-check a, .book-note a { color: var(--blue); }
.book-note { color: var(--grey); }
.book-sum { border-top-color: var(--line); }
.book-err { background: #ffe8e5; }
.book .secure-dark .secure-label { color: var(--grey); }
.book .secure-dark .pay-card { color: var(--ink); border-color: var(--line); }
.book-form .btn:disabled { opacity: .5; }
.bookbar { background: var(--petrol-deep); } /* same colour as the menu, not the old blue */

/* Om oss: the concept first, then the bridge to Gudrun */
.about-aa { margin-bottom: 48px; }
.about-aa ul { margin: 4px 0 16px; }
.about-gudrun { padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.about-gudrun h2 { font-size: 32px; margin: 32px 0 8px; }
.about-bridge { font-size: 20px; color: var(--grey); margin: 0 0 32px; }

/* Natt: Gudruns opprinnelige idé, sort bakgrunn. "Som å tenne et stearinlys i vinternatta", 29. sep.
   Slås på med ?tema=natt (huskes) eller Dag / Natt i bunnen. Samme sju farger, men nå er sida selve natta,
   og oransje er lyset: en glød rundt knappene, gnisten og bildene. Alle tekstpar kontrollert mot WCAG AA på mørkt. */
html[data-theme="natt"] {
  color-scheme: dark;
  --paper: #12100d;         /* varm nesten-sort, ikke kald #000 */
  --card: #1c1813;          /* kort og flater, et hakk lysere */
  --sun: #241e17;
  --ink: #f3ebe1;           /* varm off-white */
  --grey: #b5aa9c;          /* sekundær tekst, 7,7:1 på kort */
  --line: #2f2922;
  --line-2: #262019;
  --blue: #93c5f5;          /* hennes blå løftet til lenke på mørkt, 9,7:1 */
  --fire-text: #ffb066;     /* oransje som tekst på mørkt, 9,8:1 */
  --btn-text: #1a1208;      /* nesten-sort på den oransje knappen, 9,2:1 */
  --red: #ff8f80;           /* Kjærlighet som tekst på mørkt, 7,3:1 på sin egen tone */
  --red-tint: #3b1411;      /* hennes røde #9d1515 som skygge under */
  --petrol: #4fd6c8;        /* Vennskap som tekst på mørkt, 8,1:1 */
  --petrol-tint: #0f2e2c;
  --purple: #d9a3ff;        /* hennes lilla løftet, 8,9:1. Fokus og valgt ord */
  --purple-tint: #2e1638;
  --candle: 255, 199, 156;  /* lysets farge, til glød (rgba) */
  --ember: 227, 125, 0;
}
html[data-theme="natt"] body { background: var(--paper); }

/* kvelden er nå bare litt mørkere enn sida, med hennes petrol og burgunder som et pust i sorten, og lyset nede til venstre */
html[data-theme="natt"] .night { color: var(--ink); background: linear-gradient(160deg, #0e1615 0%, #0d0b09 55%, #1c0c0b 100%); }
html[data-theme="natt"] .night::before { background: radial-gradient(60% 70% at 8% 105%, rgba(var(--ember),.36) 0%, rgba(var(--ember),0) 68%); }
html[data-theme="natt"] .night a:not(.btn) { color: var(--ink); }
html[data-theme="natt"] .night :focus-visible { outline-color: var(--glow); }
html[data-theme="natt"] .top { background: rgba(13,11,9,.92); border-bottom-color: rgba(var(--candle),.12); color: var(--ink); }
html[data-theme="natt"] .top-over { background: transparent; border-bottom-color: transparent; }
html[data-theme="natt"] .top-over.is-scrolled { background: rgba(13,11,9,.92); border-bottom-color: rgba(var(--candle),.12); }
html[data-theme="natt"] .top-nav a:hover { background: rgba(var(--candle),.1); }
html[data-theme="natt"] .top-nav a.is-here { background: rgba(var(--candle),.14); }
html[data-theme="natt"] .opener h1 { color: var(--ink); }
html[data-theme="natt"] .opener-sub, html[data-theme="natt"] .page-head p, html[data-theme="natt"] .event-title p { color: rgba(243,235,225,.8); }
html[data-theme="natt"] .event-kicker span { color: rgba(243,235,225,.78); }
html[data-theme="natt"] .opener-bg::after {
  background:
    linear-gradient(180deg, rgba(13,11,9,.5) 0%, rgba(13,11,9,.05) 30%, rgba(13,11,9,.55) 60%, rgba(13,11,9,.96) 100%),
    linear-gradient(100deg, rgba(13,11,9,.85) 0%, rgba(13,11,9,.5) 50%, rgba(60,10,8,.4) 100%);
}
html[data-theme="natt"] .opener-bg video { filter: saturate(.9) brightness(.9); }

/* lyset: gnisten gløder, knappene gløder, bildene står opplyst mot mørket */
html[data-theme="natt"] .spark { filter: drop-shadow(0 0 5px rgba(var(--candle),.75)); }
html[data-theme="natt"] .brand .spark, html[data-theme="natt"] .motto .spark, html[data-theme="natt"] .foot-motto .spark { color: var(--btn); filter: drop-shadow(0 0 7px rgba(var(--ember),.9)) drop-shadow(0 0 16px rgba(var(--ember),.45)); }
html[data-theme="natt"] .btn { box-shadow: 0 0 0 1px rgba(var(--candle),.18), 0 0 24px -4px rgba(var(--ember),.55); }
html[data-theme="natt"] .btn:hover { box-shadow: 0 0 0 1px rgba(var(--candle),.3), 0 0 32px -2px rgba(var(--ember),.75); }
html[data-theme="natt"] .btn-outline { color: var(--ink); border-color: rgba(var(--candle),.45); box-shadow: none; }
html[data-theme="natt"] .btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
html[data-theme="natt"] .btn:disabled { box-shadow: none; }
html[data-theme="natt"] .card { border-color: rgba(var(--candle),.14); box-shadow: 0 0 0 0 rgba(var(--ember),0), 0 14px 40px -18px rgba(var(--ember),.35); }
html[data-theme="natt"] .card:hover { border-color: var(--world); box-shadow: 0 0 32px -6px rgba(var(--ember),.45), 0 16px 32px -12px rgba(0,0,0,.6); }
html[data-theme="natt"] .card { --world-solid: #9d1515; }
html[data-theme="natt"] .card.is-friend { --world-solid: #007975; }
html[data-theme="natt"] .card-media::after { background: var(--world-solid); }
html[data-theme="natt"] .world { box-shadow: 0 0 0 1px rgba(var(--candle),.14), 0 18px 48px -16px rgba(var(--ember),.4); }
html[data-theme="natt"] .hero { box-shadow: 0 0 0 1px rgba(var(--candle),.16), 0 0 64px -12px rgba(var(--ember),.5), 0 24px 48px -24px rgba(0,0,0,.8); }
html[data-theme="natt"] .about-grid img, html[data-theme="natt"] .strip img { box-shadow: 0 0 0 1px rgba(var(--candle),.16), 0 0 48px -12px rgba(var(--ember),.45); border-color: transparent; }
html[data-theme="natt"] .program-row { border-color: rgba(var(--candle),.14); box-shadow: 0 14px 40px -18px rgba(var(--ember),.35); }
html[data-theme="natt"] .steps li { border-color: rgba(var(--candle),.14); }
html[data-theme="natt"] .steps li::before { box-shadow: 0 0 20px -2px rgba(var(--ember),.6); }
html[data-theme="natt"] .avatar { box-shadow: 0 0 0 2px rgba(var(--candle),.25), 0 0 18px -2px rgba(var(--ember),.6); }
html[data-theme="natt"] .timeline .spark { color: var(--btn); }
html[data-theme="natt"] .empty { background: var(--card); border-color: rgba(var(--candle),.22); }

/* søkepilla og listene: kort på natta, ikke hvitt */
html[data-theme="natt"] .search { background: var(--card); border-color: rgba(var(--candle),.28); box-shadow: 0 0 0 0 transparent, 0 16px 40px -18px rgba(var(--ember),.35); }
html[data-theme="natt"] .seg-btn:hover, html[data-theme="natt"] .seg.is-open .seg-btn { background: #2a241d; }
html[data-theme="natt"] .seg-list { background: var(--card); box-shadow: 0 16px 40px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--candle),.22); }
html[data-theme="natt"] .seg-list li:hover { background: #2a241d; }
html[data-theme="natt"] .search-go { background: var(--btn); color: var(--btn-text); box-shadow: 0 0 24px -4px rgba(var(--ember),.55); }
html[data-theme="natt"] .search-go:hover { background: var(--btn-hover); }
html[data-theme="natt"] .pick select option { background: var(--card); }

/* bestillingsboksen: samme kort som resten, feltene et hakk mørkere så de leses som felt */
html[data-theme="natt"] .book { background: var(--card); color: var(--ink); border-color: rgba(var(--candle),.2); box-shadow: 0 0 0 0 transparent, 0 0 64px -16px rgba(var(--ember),.4), 0 18px 44px -24px rgba(0,0,0,.7); }
html[data-theme="natt"] .book-field { background: var(--paper); border-color: var(--line); }
html[data-theme="natt"] .book-field:hover { border-color: rgba(var(--candle),.4); }
html[data-theme="natt"] .book-field:focus-within { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow), 0 0 16px -4px rgba(var(--ember),.6); }
html[data-theme="natt"] .book-field::after { border-color: var(--ink); }
html[data-theme="natt"] .book-field select option { color: var(--ink); background: var(--card); }
html[data-theme="natt"] .book-check a, html[data-theme="natt"] .book-note a { color: var(--blue); }
html[data-theme="natt"] .book-err { background: var(--red-tint); color: #ffb3a8; }
html[data-theme="natt"] .book .secure-dark .pay-card { color: var(--ink); border-color: var(--line); }
html[data-theme="natt"] .bookbar { background: #1c1813; color: var(--ink); border-top: 1px solid rgba(var(--candle),.16); box-shadow: 0 -8px 24px rgba(0,0,0,.6); }
html[data-theme="natt"] .bookbar span { color: var(--grey); }

/* bunn og skille */
html[data-theme="natt"] .foot { color: rgba(243,235,225,.72); }
html[data-theme="natt"] .foot-links a, html[data-theme="natt"] .foot p a, html[data-theme="natt"] .foot-motto, html[data-theme="natt"] .foot-mark { color: var(--ink); }
html[data-theme="natt"] .faq-list details, html[data-theme="natt"] .faq-list details:first-child, html[data-theme="natt"] .about-gudrun, html[data-theme="natt"] .event-main > section { border-color: var(--line); }
html[data-theme="natt"] .card-media { background: var(--sun); }

/* Dag / Natt: den lille bryteren nederst, på alle sider */
.tema { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: rgba(255,255,255,.6); }
.tema button { padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: rgba(255,255,255,.75); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.tema button:hover { color: #fff; background: rgba(255,255,255,.1); }
.tema button[aria-pressed="true"] { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--glow); }
html[data-theme="natt"] .tema { color: rgba(243,235,225,.55); }
html[data-theme="natt"] .tema button { color: rgba(243,235,225,.7); }
html[data-theme="natt"] .tema button:hover, html[data-theme="natt"] .tema button[aria-pressed="true"] { color: var(--ink); }

/* Natt: the program cards are light, like lit windows on a dark evening, so
   they stand out clearly against the black. Light-mode tokens are re-set
   inside the card so every text colour inside it is readable on cream. */
html[data-theme="natt"] .card {
  --ink: #1d1712; --grey: #5e554c; --line-2: #e7ddd0;
  --world: #9d1515; --world-soft: #fbe3de;
  background: #fbf5ec; color: var(--ink);
  border-color: #fbf5ec;
  box-shadow: 0 0 0 1px rgba(255,236,210,.35), 0 18px 48px -18px rgba(227,125,0,.45);
}
html[data-theme="natt"] .card.is-friend { --world: #007975; --world-soft: #d5f3ef; }
html[data-theme="natt"] .card:hover { border-color: #fff; box-shadow: 0 0 0 2px var(--world), 0 22px 56px -16px rgba(227,125,0,.6); }
html[data-theme="natt"] .card .card-title, html[data-theme="natt"] .card .meet b, html[data-theme="natt"] .card .card-foot b { color: var(--ink); }
html[data-theme="natt"] .card .card-kicker, html[data-theme="natt"] .card .meet span, html[data-theme="natt"] .card .card-foot { color: var(--grey); }
html[data-theme="natt"] .card .tag { background: var(--world-soft); color: var(--world); }
html[data-theme="natt"] .card .meet .spark { color: var(--world); filter: none; text-shadow: none; }

/* The hero headline is handwritten, like a line in a cabin guestbook, and is
   "written" out line by line in about 2.5 seconds. Everything else keeps the
   standard fonts. --hand can be swapped (fontlab.js cycles it on click). */
:root { --hand: "Parisienne", cursive; }
.opener h1.hand { font-family: var(--hand); font-weight: 400; letter-spacing: 0; line-height: 1.35; font-size: 34px; text-wrap: initial; }
.hand .ln { display: block; width: fit-content; padding: .1em .15em .25em 0; clip-path: inset(-30% 100% -30% 0); animation: hand-write 1.2s cubic-bezier(.45,.05,.55,.95) forwards; }
.hand .ln + .ln { animation-delay: 1.25s; }
@keyframes hand-write { to { clip-path: inset(-30% -5% -30% 0); } }
@media (prefers-reduced-motion: reduce) { .hand .ln { animation: none; clip-path: none; } }
@media (min-width: 640px) { .opener h1.hand { font-size: 44px; } }
@media (min-width: 960px) { .opener h1.hand { font-size: 56px; } }

/* Natt: the booking box is light, so it stands out against the dark page */
html[data-theme="natt"] .book {
  --ink: #1d1712; --grey: #5e554c; --line: #e2d7c8;
  background: #fbf5ec; color: var(--ink); border-color: #fbf5ec;
  box-shadow: 0 0 0 1px rgba(255,236,210,.35), 0 0 64px -16px rgba(227,125,0,.45), 0 18px 44px -24px rgba(0,0,0,.7);
}
html[data-theme="natt"] .book h2, html[data-theme="natt"] .book-price b, html[data-theme="natt"] .book-sum { color: var(--ink); }
html[data-theme="natt"] .book-price, html[data-theme="natt"] .book-note, html[data-theme="natt"] .book .secure-label { color: var(--grey); }
html[data-theme="natt"] .book-kicker { color: #a55900; }
html[data-theme="natt"] .book-field { background: #fff; border-color: var(--line); }
html[data-theme="natt"] .book-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
html[data-theme="natt"] .book-field label { color: var(--grey); }
html[data-theme="natt"] .book-field select, html[data-theme="natt"] .book-input input { color: var(--ink); background: transparent; }
html[data-theme="natt"] .book-field select option { color: var(--ink); background: #fff; }
html[data-theme="natt"] .book-field::after { border-color: var(--ink); }
html[data-theme="natt"] .book-check { color: var(--ink); }
html[data-theme="natt"] .book-check input { accent-color: #e37d00; }
html[data-theme="natt"] .book a { color: #075296; }
html[data-theme="natt"] .book .pay-card { color: var(--ink); border-color: var(--line); }
html[data-theme="natt"] .book-sum { border-top-color: var(--line); }
html[data-theme="natt"] .book, html[data-theme="natt"] .card { color-scheme: light; } /* native checkboxes and selects render light inside the light cards */

/* Intro on the front page, in order:
   1. only the line dance, 2. the motto, 3. the handwritten headline is written
   (2.5 s), 4. the line under it and the button. Then everything else rises in
   as you scroll (reveal.js). All of it is skipped for reduced motion. */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.opener .motto { opacity: 0; animation: rise-in .8s ease-out .6s forwards; }
.opener h1.hand .ln { animation-delay: 1.3s; }
.opener h1.hand .ln + .ln { animation-delay: 2.55s; }
.opener .opener-sub { opacity: 0; animation: rise-in .8s ease-out 3.9s forwards; }
.opener .btn-big { opacity: 0; animation: rise-in .8s ease-out 4.2s forwards; }

.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .opener .motto, .opener .opener-sub, .opener .btn-big { opacity: 1; animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}
/* Parisienne has a small x-height: bigger and tighter than the old pen hand */
.opener h1.hand { font-size: 44px; line-height: 1.12; }
@media (min-width: 640px) { .opener h1.hand { font-size: 60px; } }
@media (min-width: 960px) { .opener h1.hand { font-size: 78px; } }