@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Geist+Mono:wght@400;600&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fraunces:ital,opsz,wght@1,9..144,500;1,9..144,700&display=swap");

:root {
  --krem: #ffebc8;
  --papir: #faf7f1;
  --linje: #e3cfa8;
  --natt: #0c2027;
  --vann: #196160;
  --refleks: #f28c37;
  --sol: #f24b27;
  --dim: #5d625f;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Work Sans", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --serif: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papir); color: var(--natt); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.bar { background: var(--krem); border-bottom: 3px solid var(--natt); }
.bar-in { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.bar img.logo { width: 38px; height: 38px; }
.bar .word { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.bar .crumb { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--vann); }
.bar nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.bar nav a { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 15px; text-decoration: none; padding: 6px 10px; border: 2px solid transparent; }
.bar nav a[aria-current] { border-color: var(--natt); background: var(--papir); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.display { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: .005em; margin: 0; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.mono { font-family: var(--mono); }
.rule { height: 5px; background: var(--natt); position: relative; }
.rule::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: var(--refleks); }

.ico { display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; }

.kind { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 3px 7px; border: 1.5px solid currentColor; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; font-family: var(--display); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; background: var(--vann); color: var(--papir); border: 0; text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--natt); border: 2px solid var(--natt); }
.btn.sol { background: var(--sol); color: var(--natt); }
:focus-visible { outline: 3px solid var(--refleks); outline-offset: 2px; }

.foot { margin-top: 64px; background: var(--vann); color: var(--krem); }
.foot .wrap { padding: 22px 16px; font-family: var(--mono); font-size: 12px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

@media (max-width: 1100px) { .bar .crumb { display: none; } }
@media (max-width: 760px) {
  .bar .crumb { display: none; }
  .bar nav a { font-size: 14px; padding: 5px 8px; }
}

[hidden] { display: none !important; }
@media (max-width: 360px) {
  h1.display { font-size: 46px !important; }
  h1, h2, h3, .subj, .sq, .hit h3 { overflow-wrap: anywhere; hyphens: auto; }
}

.strip { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ev-b { font-family: var(--display); font-weight: 900; font-size: 15px; line-height: 1; padding: 7px 6px; background: var(--krem); color: var(--natt); text-transform: uppercase; }
.ev-b.goal { background: var(--tc, var(--sol)); color: var(--papir); box-shadow: 0 0 0 2px var(--krem); }
.ev-b.gaa { background: #cdb98f; }
.dot { width: 13px; height: 13px; display: inline-block; flex: none; }
.mixl { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--mono); font-size: 12px; }
.mixl span { display: inline-flex; gap: 6px; align-items: center; }
.c-event { background: var(--krem); } .c-media { background: #7fc6c4; } .c-utfordring { background: var(--refleks); } .c-sammen { background: var(--sol); } .c-finn { background: #c9a2e0; } .c-fortelling { background: #fff; }