/* =========================================================
   BACKSTAGE – designsystem for Almas øveside
   Se DESIGNMANUAL.md før du endrer noe her.
   Regel: komponenter bruker KUN tokens (var(--…)), aldri rå hex.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Scene (bakgrunner) – varm svart, aldri lilla-svart */
  --stage:      #0E0B0D;   /* den eneste flaten: komponenter har ingen egen bakgrunn */
  --field:      #231F22;   /* kun felt man skriver i */
  --line:       #332B30;   /* hårstreker */
  --line-strong:#4A4046;   /* ramme rundt oppgaver */
  --line-field: #85787F;   /* kant på felt og knapper – minst 3:1 mot --stage */

  /* Tekst */
  --ink:        #F2EBEE;   /* hovedtekst  – 17:1 mot --stage */
  --ink-2:      #D2C7CD;   /* sekundær tekst – 12:1 */
  --ink-3:      #A89DA3;   /* metadata – 7:1 (kun ≥ 13px) */

  /* Spotlight (eneste aksent) */
  --pink:       #E87FAE;   /* 7,5:1 mot --stage. Tekst PÅ rosa = --on-pink */
  --pink-2:     #F09BC1;   /* hover / lys variant */
  --pink-dus:   #D9A3BC;   /* lenker i dempet tekst */
  --pink-soft:  #2D1B24;   /* svak toning, kun i figurer */
  --pink-edge:  #6E4258;   /* dempet rosa strek */
  --on-pink:    #1A0A12;   /* 6.2:1 på --pink. ALDRI hvit tekst på rosa */

  /* Programhefte (papir) – billetter, fasit, «manus» */
  --paper:      #E9DFD3;
  --paper-ink:  #1C1418;
  --paper-line: #D9C9B8;

  /* Signal – alltid sammen med ikon + tekst, aldri farge alene */
  --gold:       #E3BD72;   /* mål */
  --good:       #7CC9A2;
  --good-soft:  #1E2C25;
  --bad:        #E8978A;
  --bad-soft:   #2F2120;

  /* Typografi */
  --f-display: "Instrument Serif", "Times New Roman", serif;     /* titler */
  --f-ui:      "Bricolage Grotesque", system-ui, sans-serif;      /* UI, knapper, tall, kickers */
  --f-body:    "Atkinson Hyperlegible", system-ui, sans-serif;    /* all lesetekst */

  --fs-xs:  0.8125rem;  /* 13 – kicker, meta */
  --fs-sm:  0.9375rem;  /* 15 – hjelpetekst */
  --fs-base:1.125rem;   /* 18 – brødtekst */
  --fs-lg:  1.375rem;   /* 22 – h3, ingress */
  --fs-xl:  1.75rem;    /* 28 – h2 i kort */
  --fs-2xl: clamp(2.25rem, 4.5vw, 3.25rem);  /* h2 seksjon */
  --fs-3xl: clamp(3rem, 8vw, 6.25rem);       /* h1 / display */

  /* Avstand – 4-punkts skala */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* Form */
  --r-xs: 4px;     /* tags, inputs i rutenett */
  --r-sm: 10px;    /* knapper (firkantede), inputs */
  --r-md: 18px;    /* kort, seksjoner */
  --r-pill: 999px; /* kun primærknapp og chips */
  --r-arch: 999px 999px var(--r-md) var(--r-md); /* proscenium-bue */

  /* Bevegelse – se animasjonsguiden */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui:    220ms;
  --t-enter: 480ms;

  --gutter: 10px;          /* sidemarg, 24px fra 720px */
  --box: var(--s-3);       /* innermarg i bokser, 24px fra 720px */
  --max: 1180px;
  --read: 68ch;
  color-scheme: dark;
}
@media (min-width: 720px) {
  :root { --gutter: var(--s-5); --box: var(--s-5); }
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--stage);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; max-width: var(--read); text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 400; }

h1, .t-display {
  font-family: var(--f-display);
  font-size: var(--fs-3xl);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
h2, .t-h2 {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
h3, .t-h3 {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
em, .t-em { font-style: italic; color: var(--pink); }  /* ett uthevet ord per tittel */

.kicker {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.kicker--pink { color: var(--pink); }
.lede { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, var(--fs-lg)); line-height: 1.5; color: var(--ink-2); }
.meta { font-size: var(--fs-sm); color: var(--ink-3); }
.num { font-family: var(--f-ui); font-variant-numeric: tabular-nums; }

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

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap--read { width: min(100% - 2 * var(--gutter), 820px); margin-inline: auto; }
.section { padding-block: var(--s-8); }
@media (min-width: 720px) { .section { padding-block: var(--s-9); } }
.stack > * + * { margin-top: var(--s-4); }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-200%);
  background: var(--pink); color: var(--on-pink);
  font-family: var(--f-ui); font-weight: 700;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); z-index: 100;
  transition: transform var(--t-ui) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- 3. TOPPMENY ---------- */
site-header, site-footer { display: contents; }   /* komponentene (js/komponenter.js) skal ikke lage egne bokser */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--stage) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) ease;
}
.topbar[data-scrolled="true"] { border-bottom-color: var(--line); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; }
.wordmark { display: inline-flex; flex: none; align-items: center; gap: var(--s-3); min-height: 44px; text-decoration: none; }
.wordmark__logo { height: 38px; width: auto; }
.wordmark span { font-family: var(--f-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; color: var(--pink); }
@media (max-width: 420px) { .wordmark span { display: none; } }  /* navnet står i lenkens aria-label */
.nav { display: flex; gap: var(--s-1); }
.nav a {
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none; color: var(--ink-2);
  min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0 var(--s-3); border-radius: var(--r-sm);
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--pink); border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); } }

/* ---------- 4. KNAPPER ---------- */
.btn {
  --_bg: transparent; --_fg: var(--ink); --_bd: var(--line-field);
  font-family: var(--f-ui); font-weight: 700; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  background: var(--_bg); color: var(--_fg);
  border: 1px solid var(--_bd); border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { --_bg: var(--pink); --_fg: var(--on-pink); --_bd: var(--pink); border-radius: var(--r-pill); }
.btn--ghost   { --_bg: transparent; }
.btn svg { width: 18px; height: 18px; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { --_bg: var(--pink-2); --_bd: var(--pink-2); }
  .btn--ghost:hover   { --_bd: var(--ink-2); }
  .btn:hover svg      { transform: translateX(3px); }
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- 5. HERO MED PROSCENIUM ---------- */
.hero { position: relative; padding-block: var(--s-7) var(--s-8); overflow: clip; }
@media (min-width: 720px) { .hero { padding-block: var(--s-8) var(--s-9); } }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; } }
.hero h1 { margin-top: var(--s-4); }
.hero .lede { margin-top: var(--s-5); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.spot {                          /* spotlight som følger musepekeren (kun pynt) */
  position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(520px 420px at var(--sx, 70%) var(--sy, 30%),
              color-mix(in srgb, var(--pink) 16%, transparent), transparent 70%);
}

.arch {                          /* signaturelement 1: proscenium-bue */
  position: relative; aspect-ratio: 4 / 5; width: min(100%, 440px); justify-self: center;
  border-radius: var(--r-arch); overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 10px var(--stage), 0 0 0 11px var(--line), 0 40px 80px -30px rgba(0,0,0,.8);
}
.arch .ph { position: absolute; inset: 0; }
.arch__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Plassholder for bilder – byttes med <img> senere */
.ph {
  display: grid; place-items: center; text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.035) 14px 15px),
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--pink) 30%, transparent), transparent 70%),
    var(--stage);
  color: var(--ink-3); font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  padding: var(--s-5);
}

/* ---------- 6. PROGRAMMET (fagliste) ---------- */
.section__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.program { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .program { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
.program li { border-bottom: 1px solid var(--line); }
.prog {
  position: relative; display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-2); text-decoration: none; min-height: 88px;
}
.prog__n { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--ink-3);
           transition: color var(--t-hover) ease; font-variant-numeric: lining-nums; }
.prog__t { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-lg); line-height: 1.15; letter-spacing: -0.01em; }
.prog__d { display: block; font-family: var(--f-body); font-weight: 400; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
.prog__a { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.prog__a svg { width: 20px; height: 20px; transition: transform var(--t-ui) var(--ease-out); }
.prog::after {                     /* rosa strek tegnes inn på hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pink);
  clip-path: inset(0 100% 0 0); transition: clip-path var(--t-enter) var(--ease-out);
}
.prog:active { transform: scale(0.99); transition: transform var(--t-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .prog:hover .prog__n { color: var(--pink); }
  .prog:hover .prog__a svg { transform: translateX(4px); }
  .prog:hover::after { clip-path: inset(0 0 0 0); }
}
.prog:focus-visible .prog__n { color: var(--pink); }
.prog[aria-disabled="true"] { pointer-events: none; }
.prog[aria-disabled="true"] .prog__t { color: var(--ink-3); }

/* ---------- 7. BILLETT (signaturelement 2) ---------- */
.ticket {
  --notch: 14px;
  position: relative; background: var(--paper); color: var(--paper-ink);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 6px);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket .kicker { color: #6E5A64; }
.ticket__n { font-family: var(--f-display); font-size: 3rem; line-height: 1; }
.tickets { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .tickets { grid-template-columns: repeat(3, 1fr); } }
.ticket h3 { margin-top: var(--s-2); }
.ticket p { margin-top: var(--s-2); color: #4A3B42; font-size: var(--fs-sm); }

/* Fortsett-kort */
.continue {
  display: none; align-items: center; gap: var(--s-4); margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; max-width: 420px;
}
.continue[data-show="true"] { display: flex; }
.continue b { font-family: var(--f-ui); font-weight: 700; display: block; }
.bar { height: 6px; border-radius: 3px; background: var(--line-strong); overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; width: var(--p, 0%); background: var(--pink); border-radius: inherit; }

/* ---------- 8. AKT-LISTE (fagside) ---------- */
/* Gyllent snitt i typografien: meta 15 → tittel 24 → tall 64 (× 1,618 per trinn). */
.acts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 820px) { .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }
.acts > li { display: grid; }
.act {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "n body" "tag body";
  column-gap: var(--s-4); row-gap: var(--s-2); align-items: start;
  padding: var(--s-5) var(--box); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  text-decoration: none; transition: border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.act__n { grid-area: n; font-family: var(--f-display); font-size: 4rem; line-height: .85; color: var(--pink); }
.act .tag { grid-area: tag; justify-self: start; white-space: normal; line-height: 1.25; }
.act__body { grid-area: body; display: grid; gap: var(--s-1); align-content: start; min-width: 0; }
.act__body h3 { font-size: 1.5rem; }
.act__body .meta { color: var(--ink-2); line-height: 1.45; }
.act__body .bar { margin-top: var(--s-3); }
.act:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .act:hover { border-color: var(--pink-edge); } }
.act[aria-disabled="true"] { pointer-events: none; border-color: var(--line); }
.act[aria-disabled="true"] .act__n { color: var(--ink-3); }
.act[aria-disabled="true"] h3 { color: var(--ink-2); }
.act[aria-disabled="true"] .meta { color: var(--ink-3); }
.tag { font-family: var(--f-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tag--pink { color: var(--pink); }

/* ---------- 9. FOOTER ---------- */
.footer {
  margin-top: auto; border-top: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-5);
  color: var(--ink-3); font-size: var(--fs-sm); text-align: left;
}
.footer__in { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; gap: var(--s-7); }
.footer__top { display: grid; gap: var(--s-6); }
@media (min-width: 820px) { .footer__top { grid-template-columns: minmax(0, 0.618fr) minmax(0, 1fr); align-items: start; } }
.footer__logo { justify-self: start; display: block; }
.footer__logo img { width: clamp(260px, 70vw, 340px); height: auto; }
.footer__label {
  margin: 0 0 var(--s-2); font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
@media (min-width: 620px) { .footer__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer__list a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none;
  transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.footer__list a:active { transform: scale(0.97); }
.footer__list a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .footer__list a:hover { color: var(--ink); } }
.footer__legal {
  margin: 0; max-width: none; padding-top: var(--s-5); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s-2) var(--s-5);
}
.footer__link {
  display: inline-block; padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3));
  color: var(--pink-dus); text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.footer__link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .footer__link:hover { color: var(--pink-2); } }

@media (max-width: 819.98px) {   /* stablet footer: logo og juridisk midtstilt, fagene som en midtstilt blokk */
  .footer__logo { justify-self: center; }
  .footer__top > nav { justify-self: center; }
  .footer__list { grid-template-columns: repeat(2, auto); column-gap: var(--s-7); }
  .footer__legal { text-align: center; }
}
@media (min-width: 620px) and (max-width: 819.98px) {
  .footer__list { grid-template-columns: repeat(3, auto); }
}

/* ---------- 10. INNGANG (reveal on scroll) ---------- */
[data-reveal] { opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- 11. TILGJENGELIGHET ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  [data-reveal] { transform: none; transition: opacity 200ms ease !important; }
  .spot { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--stage); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: #EADDE3; --ink-3: #D2C7CD; --line: #6A5560; --line-strong: #85787F; }
}