/* KAV elite designsystem (byråkrat-luksus). Ref: design/DESIGNSYSTEM.md
   Sjølvhosta IBM Plex Sans (etat-stemma) + IBM Plex Mono (all metadata). */

@font-face { font-family:"Plex"; src:url("/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/fonts/ibm-plex-sans-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Plex"; src:url("/fonts/ibm-plex-sans-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight:600; font-display:swap; }

:root{
  --paper:#F1F0EC; --paper-2:#E9E8E3; --ink:#1A1C1E; --ink-2:#4A4D50;
  --grey:#9B9B97; --rule:#CFCEC8; --rule-2:#DCDBD5; --seal:#C30000;
  --font:"Plex","Helvetica Neue",Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  --mar:clamp(1.25rem,5vw,5rem);
  --label:.72rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; scroll-behavior:smooth}
section[id]{scroll-margin-top:4.5rem}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--paper); color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.55; font-weight:400;
  font-variant-numeric:tabular-nums;
}
/* Kornstruktur, dropar flat-AI-sjå */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* mono-label byggekloss */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{
  font-family:var(--mono); font-size:var(--label); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}
.rule{border:0;border-top:1px solid var(--rule)}

/* ---------- Header (institusjonsbar) ---------- */
.topp{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.topp-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:.85rem var(--mar);
}
.wordmark{
  font-weight:700; font-size:1.4rem; letter-spacing:.02em; color:var(--seal); line-height:1;
  justify-self:start;
}
.hovedmeny{display:flex; gap:2rem; justify-self:center; list-style:none}
.hovedmeny a{font-family:var(--mono); font-size:var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); padding-bottom:2px; border-bottom:1px solid transparent}
.hovedmeny a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.topp-hoyre{justify-self:end; display:flex; gap:1.25rem; align-items:center}
.topp-status{font-family:var(--mono); font-size:var(--label); letter-spacing:.12em; color:var(--ink-2)}
.topp-status b{color:var(--ink); font-weight:500}
@media(max-width:820px){ .topp-inner > nav{display:none} span.topp-status{display:none} .topp-inner{grid-template-columns:1fr auto} }

/* ---------- Hero ---------- */
.hero{position:relative}
.hero figure{margin:0}
.hero img{width:100%; aspect-ratio:16/9; object-fit:cover}
@media(max-width:720px){ .hero img{aspect-ratio:4/5; object-position:62% 42%} }
.hero-band{
  display:grid; grid-template-columns:1fr; gap:.4rem;
  padding:1.1rem var(--mar) 0;
}
.hero-over{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; align-items:baseline}
.hero-tittel{
  font-weight:600; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2.4rem,7vw,5.5rem); max-width:16ch; margin:.3rem 0 .2rem;
}
.hero-dek{max-width:52ch; color:var(--ink-2); font-size:1.05rem}

/* seksjonshovud */
.blokk{padding:clamp(3rem,7vw,6rem) var(--mar)}
.blokk-hovud{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:1px solid var(--ink); padding-bottom:.7rem; margin-bottom:1.6rem}
.blokk-hovud h2{font-size:1.15rem; font-weight:600; letter-spacing:-.01em}
.blokk-hovud .label{align-self:flex-end}

/* ---------- Kolleksjonen som arkivregister ---------- */
.register{width:100%; border-collapse:collapse; font-size:.94rem}
.register thead th{
  font-family:var(--mono); font-size:var(--label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); font-weight:500; text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--rule)
}
.register th.num, .register td.num{text-align:right}
.register tbody tr{border-bottom:1px solid var(--rule-2); cursor:pointer}
.register tbody tr:hover{background:var(--paper-2)}
.register td{padding:.85rem .6rem; vertical-align:baseline}
.register .betegning{font-weight:500; font-size:1.02rem}
.register .kode, .register .num, .register .status{font-family:var(--mono); font-variant-numeric:tabular-nums}
.register .status{font-size:var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.register .status[data-s="venteliste"]{color:var(--ink)}
.register tbody tr td:first-child{position:relative}
.register .betegning::after{content:" ›"; color:var(--ink-2)}
@media(max-width:720px){
  .register thead{display:none}
  .register tbody tr{display:grid; grid-template-columns:1fr auto; gap:.15rem .8rem; padding:.9rem 0}
  .register td{padding:0}
  .register .materiale{grid-column:1; color:var(--ink-2); font-size:.85rem}
  .register .kode{grid-column:2; grid-row:1; text-align:right; color:var(--ink-2)}
  .register .kvote{grid-column:2; text-align:right; color:var(--ink-2); font-size:.8rem}
  .register .kvote::before{content:"Kvote "}
  .register .status{grid-column:2; text-align:right}
}

/* ---------- Galleri (6-kol rytme: 3-opp rader, 2-opp feature, full-breidd lukkeplate) ---------- */
.galleri{display:grid; grid-template-columns:repeat(6,1fr); gap:2.5rem 1.75rem}
.plagg{grid-column:span 2}            /* 3-opp standard */
.plagg.par{grid-column:span 3}        /* 2-opp feature-rad (senior-paret, tilbehøret) */
.plagg.bred{grid-column:1/-1}         /* Uniformen: full-breidd lukkeplate */
@media(max-width:1100px){ .galleri{grid-template-columns:repeat(2,1fr)} .plagg, .plagg.par{grid-column:auto} .plagg.bred{grid-column:1/-1} }
@media(max-width:640px){ .galleri{grid-template-columns:1fr} .plagg.bred{grid-column:auto} }
.plagg figure{margin:0; position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2)}
/* Uniformen lukkar galleriet som full-breidd plate (16:9, jf. aspekt-trioen) */
.galleri .plagg.bred figure{aspect-ratio:16/9}
@media(max-width:640px){ .galleri .plagg.bred figure{aspect-ratio:4/5} }
.plagg figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* hover: broderiet lese inn i journalen, eit papir-annotasjonskort stig fram
   og syner den faktiske teksten på plagget, lesbart. Byråkrat-universet. */
.plagg .kort-legg{
  position:absolute; z-index:2; left:.85rem; right:.85rem; bottom:.85rem;
  background:var(--paper); border:1px solid var(--ink); padding:.72rem .82rem .68rem;
  display:grid; gap:.28rem; opacity:0; transform:translateY(10px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.plagg:hover .kort-legg, .plagg:focus-visible .kort-legg{opacity:1; transform:none}
.kort-legg .legg-topp{
  display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
  font-family:var(--mono); font-size:var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  border-bottom:1px solid var(--rule-2); padding-bottom:.32rem;
}
.kort-legg .legg-tekst{font-family:var(--font); font-weight:500; font-size:1.04rem; line-height:1.24; color:var(--ink)}
.kort-legg .legg-tekst.mark{color:var(--seal); font-weight:700; letter-spacing:.03em}
.kort-legg .legg-cta{font-family:var(--mono); font-size:var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-top:.02rem}
/* touch/mobil: ingen hover, kortet står statisk under biletet.
   Figuren må sleppe aspect-låsen: biletet ber 4:5 sjølv, kortet flyt etter. */
@media (hover:none){
  .plagg figure, .galleri .plagg.bred figure{aspect-ratio:auto; overflow:visible}
  .plagg figure img{position:static; aspect-ratio:4/5}
  .galleri .plagg.bred figure img{aspect-ratio:16/9}
  .plagg .kort-legg{position:static; opacity:1; transform:none; margin-top:.6rem}
}
@media (hover:none) and (max-width:640px){
  .galleri .plagg.bred figure img{aspect-ratio:4/5}
}
@media(prefers-reduced-motion:reduce){ .plagg .kort-legg{transition:opacity .2s ease} }
.plagg figcaption{padding-top:.7rem; display:grid; gap:.15rem}
.plagg .navn{font-weight:500}
.plagg .meta{font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--ink-2)}
.plagg .pris{font-family:var(--mono); font-size:.85rem}

/* ---------- Kunngjeringar (etaten) ---------- */
.kunngjering{display:grid; grid-template-columns:14rem 1fr; gap:1.5rem; padding:1.15rem 0; border-bottom:1px solid var(--rule-2)}
.kunngjering:first-of-type{border-top:1px solid var(--rule-2)}
.kunngjering .k-meta{font-family:var(--mono); font-size:var(--label); letter-spacing:.08em; color:var(--ink-2)}
.kunngjering h3{font-size:1.05rem; font-weight:600; margin-bottom:.2rem}
.kunngjering p{color:var(--ink-2); max-width:62ch}
@media(max-width:640px){ .kunngjering{grid-template-columns:1fr; gap:.35rem} }

/* ---------- Venteliste (skjema som rekvisisjon) ---------- */
.venteliste{max-width:560px}
.venteliste .label{display:block; margin-bottom:.5rem}
.skjemarad{display:flex; gap:.6rem; border-bottom:1px solid var(--ink); padding-bottom:.5rem; margin:1.4rem 0 1rem}
.skjemarad input{flex:1; border:0; background:transparent; font:inherit; font-size:1.05rem; color:var(--ink); padding:.35rem 0}
.skjemarad input:focus{outline:none}
.skjemarad button{
  font-family:var(--mono); font-size:var(--label); letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:0; padding:.6rem 1.1rem; cursor:pointer
}
.skjemarad button:hover{background:#000}
.finstilt{font-family:var(--mono); font-size:.76rem; color:var(--ink-2); line-height:1.6}
.feil{font-family:var(--mono); font-size:.8rem; color:var(--ink); line-height:1.6; margin-top:.8rem}
.feil a{border-bottom:1px solid var(--ink)}
.honning{position:absolute; left:-9999px}
.kvittering{display:none; align-items:center; gap:1rem; margin-top:1.2rem}
.kvittering.vis{display:flex}
.kvittering p{color:var(--ink-2); font-size:.92rem}
.stempel{
  font-family:var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.1em; color:var(--seal);
  border:2px solid var(--seal); border-radius:2px; padding:.35rem .7rem; transform:rotate(-6deg);
  white-space:nowrap; animation:stemple .35s cubic-bezier(.16,1,.3,1) both
}
@keyframes stemple{ from{opacity:0; transform:rotate(-6deg) scale(1.6)} to{opacity:1; transform:rotate(-6deg) scale(1)} }

/* ---------- Footer (kolofon) ---------- */
.kolofon{border-top:1px solid var(--ink); margin-top:2rem; padding:2.5rem var(--mar) 3rem}
.kolofon-topp{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; margin-bottom:2rem}
.kolofon-lenker{display:flex; gap:1.5rem; flex-wrap:wrap}
.kolofon-lenker a{font-family:var(--mono); font-size:var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.kolofon-lenker a:hover{color:var(--ink)}
@media(max-width:640px){ .kolofon-lenker{flex-direction:column; gap:.6rem} }
.kolofon-bunn{font-family:var(--mono); font-size:.76rem; color:var(--ink-2); line-height:1.7; max-width:70ch}
.kolofon-bunn .seal{color:var(--ink-2)}

/* ---------- Underside-prosa (personvern, tilgjengelighet) ---------- */
.prosa{max-width:64ch}
.prosa h1{font-size:clamp(1.9rem,4vw,2.8rem); font-weight:600; letter-spacing:-.02em; line-height:1.05; margin-bottom:.6rem}
.prosa .ingress{color:var(--ink-2); font-size:1.1rem; margin-bottom:.4rem; max-width:60ch}
.prosa .sist{font-family:var(--mono); font-size:.76rem; color:var(--ink-2); letter-spacing:.04em; margin-bottom:2.2rem}
.prosa h2{font-size:1.08rem; font-weight:600; letter-spacing:-.01em; margin:2rem 0 .5rem; padding-top:1.4rem; border-top:1px solid var(--rule-2)}
.prosa p{margin-bottom:.9rem}
.prosa ul{margin:0 0 .9rem 1.1rem}
.prosa li{margin-bottom:.35rem}
.prosa a{border-bottom:1px solid var(--rule)}
.prosa a:hover{border-bottom-color:var(--ink)}
.tilbake{display:inline-block; font-family:var(--mono); font-size:var(--label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:1.6rem}
.tilbake:hover{color:var(--ink)}

/* ---------- Rørsle: hårstrek-til-full reveal ----------
   Fail-safe: synleg som standard. Berre element under folden får .pending
   (via JS), så innhald blir ALDRI gøymt om JS/observer sviktar. */
.reveal{opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.pending{opacity:0; transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){
  .reveal, .reveal.pending{opacity:1; transform:none; transition:none}
  .stempel{animation:none}
}