@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400.b0a8ad37ac.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500.cd759df8ef.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-600.4b52ddd483.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bebas-neue-400.a7c90c8924.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/newsreader-400.6e4f2958c3.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader-400-italic.2bf0dbb1a4.woff2") format("woff2");
}

:root {
  --paper: #F2F3F1; --panel: #E7EAE8; --ink: #16191D; --ink-2: #3A434A; --mist: #6E777D; --line: #D6DBD9;
  --storm: #263038; --storm-ink: #EEF1EF; --storm-mist: #A9B3B9; --signal: #D23A21; --photo: #34414B; --photo-2: #1E272E;
  --display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15191D; --panel: #1E252A; --ink: #ECEEEB; --ink-2: #C5CBCF; --mist: #98A2A8; --line: #2B343A;
    --storm: #0E1316; --storm-ink: #EEF1EF; --storm-mist: #98A2A8; --signal: #E8543B; --photo: #2A343C; --photo-2: #171E23; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.display { font-family: var(--display); line-height: .92; letter-spacing: .01em; }
.num { font-variant-numeric: tabular-nums; }
section { padding: 64px 0; border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.sec-head h2 { font-family: var(--display); font-size: 58px; line-height: 1; }
.sec-head .more { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }

/* sidhuvud */
header.nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); transition: transform .28s ease; }
header.nav.hidden { transform: translateY(-100%); }
header.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand .name { font-family: var(--display); font-size: 26px; letter-spacing: .04em; }
.brand .tag { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 14px; font-weight: 500; }
nav .cta { padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 2px; }
nav .cta:hover { text-decoration: none; background: var(--ink); color: var(--paper); }
.menu-btn { display: none; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 2px; }
@media (max-width: 900px) {
  .menu-btn { display: inline-block; }
  header.nav .wrap { flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
  nav#menu { display: none; width: 100%; }
  nav#menu.open { display: block; }
  nav#menu ul { flex-direction: column; gap: 0; padding: 8px 0 4px; border-top: 1px solid var(--line); margin-top: 10px; }
  nav#menu ul li { display: block !important; }
  nav#menu ul li[hidden] { display: none !important; }
  nav#menu ul li a { display: block; padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  nav#menu ul li a.cta { border: 0; padding: 14px 0; color: var(--signal); font-weight: 600; }
  nav#menu ul li a.cta:hover { background: transparent; color: var(--signal); }
}
@media (prefers-reduced-motion: reduce) { header.nav { transition: none; } html { scroll-behavior: auto; } }

/* foto */
.photo { background: var(--photo); position: relative; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.photo:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .photo img { transition: none; } .photo:hover img { transform: none; } }
.photo .cap { position: absolute; left: 12px; bottom: 12px; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--storm-ink); background: rgba(14,19,22,.72); padding: 4px 7px; }

/* hjälten */
.hero { position: relative; background: #1c2126; color: var(--storm-ink); padding: 0; border-top: 0; overflow: hidden; min-height: 640px; display: grid; align-items: end; }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%; }
.hero .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,22,26,.92) 0%, rgba(18,22,26,.55) 38%, rgba(18,22,26,0) 70%), linear-gradient(to right, rgba(18,22,26,.55) 0%, rgba(18,22,26,0) 55%); }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .11; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; }
.hero .wrap { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: end; padding-top: 220px; padding-bottom: 44px; }
.hero-txt .label { color: var(--storm-mist); }
.hero h1 { font-family: var(--display); font-size: clamp(84px, 11vw, 168px); line-height: .84; margin-top: 10px; letter-spacing: .005em; }
.hero h1 .line { display: block; animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 .line:nth-child(2) { animation-delay: .08s; }
.hero h1 small { display: block; font-size: .36em; color: var(--storm-mist); letter-spacing: .08em; margin-top: 8px; animation: rise .8s .18s cubic-bezier(.2,.7,.2,1) both; }
.hero .lede { font-size: 20px; max-width: 34ch; margin-top: 18px; color: #E4E8E6; }
@keyframes rise { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .line, .hero h1 small { animation: none; } }
.fight { background: rgba(14,19,22,.66); border: 1px solid rgba(255,255,255,.14); padding: 20px 22px; font-family: var(--sans); display: grid; gap: 12px; }
.fight .k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--storm-mist); display: flex; justify-content: space-between; }
.fight .k b { color: var(--signal); font-weight: 600; }
.fight .ev { font-family: var(--display); font-size: 34px; line-height: .95; }
.fight .ev small { display: block; font-family: var(--sans); font-size: 14px; color: var(--storm-mist); margin-top: 6px; line-height: 1.4; }
.fight .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fight .btn { padding: 10px 12px; font-size: 14px; border: 1.5px solid var(--storm-ink); background: var(--storm-ink); color: #16191D; }
.fight .btn.quiet { background: transparent; color: var(--storm-ink); }
.fight .btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.fight .last { border-top: 1px solid rgba(255,255,255,.14); padding-top: 10px; font-size: 14px; color: var(--storm-mist); }
.fight .last b { color: var(--storm-ink); font-weight: 600; }
.fight[data-fight-night-mode="matchdag"] .btns, .fight[data-fight-night-mode="efter"] .k { color: var(--signal); }

/* segerbandet */
.victory-band {
  --vb-gold: #E8B84B; --vb-green: #4ADE80;
  border: 1.5px solid var(--vb-gold); box-shadow: 0 0 28px rgba(232,184,75,.22); background: rgba(16,20,24,.78);
  padding: 22px 24px; margin-bottom: 26px; display: grid; gap: 16px;
}
/* [hidden] has the UA default `display: none`, but the author rule above
   also sets `display: grid` with equal specificity — the later rule in the
   author stylesheet wins regardless of the attribute, so the box still
   painted at 342×46px with no result on file. The attribute selector here
   outranks the plain class selector (0,2,0 vs 0,1,0), so it wins no matter
   which rule comes first or which media query repeats `display: grid`. */
.victory-band[hidden] { display: none; }
.vb-meta { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vb-gold); margin: 0; }
.vb-headline { font-family: var(--display); font-size: clamp(88px, 11.5vw, 172px); line-height: .88; margin: 0; color: var(--storm-ink); }
.vb-headline .line { display: block; }
.vb-headline .vb-line2 { font-size: .5em; color: var(--vb-gold); margin-top: 4px; }
.vb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vb-card { border: 1.5px solid rgba(255,255,255,.22); padding: 14px 16px; }
.vb-card:only-child { grid-column: 1 / -1; }
.vb-card:first-child { border-color: var(--vb-green); }
.vb-card:first-child .vb-card-label { color: var(--vb-green); }
.vb-card:last-child:not(:only-child) { border-color: var(--vb-gold); }
.vb-card:last-child:not(:only-child) .vb-card-label { color: var(--vb-gold); }
.vb-card-label { font-family: var(--sans); font-weight: 700; font-size: 16px; margin: 0; }
.vb-card-detail { font-family: var(--sans); font-size: 13px; color: var(--storm-mist); margin: 6px 0 0; }
.vb-watch { display: block; width: 100%; text-align: center; padding: 14px 22px; background: var(--vb-gold); color: #1A1300; font-family: var(--sans); font-weight: 700; letter-spacing: .02em; border: 1.5px solid var(--vb-gold); }
.vb-watch:hover { background: transparent; color: var(--vb-gold); text-decoration: none; }
@media (min-width: 901px) {
  /* Grid, not flex: the headline keeps growing with the viewport (it must
     stay the page's biggest text, egenskap "krymp aldrig namnet") and needs
     its own full-width row to wrap onto, or wrapped lines would overlap
     cards/button centered beside it in a shared row. Cards and the button
     share the row below instead — the closest a headline this large can get
     to "one row" without breaking. */
  .victory-band { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 24px; row-gap: 14px; padding: 22px 28px; }
  .vb-head { grid-column: 1 / -1; }
  .vb-cards { grid-column: 1; grid-template-columns: repeat(2, 200px); width: auto; justify-self: start; }
  .vb-watch { grid-column: 2; width: auto; justify-self: end; }
}

/* senaste */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 28px; }
.post { border: 1px solid var(--line); padding: 16px; font-family: var(--sans); }
.post time { display: block; font-size: 12px; color: var(--mist); margin-bottom: 8px; }
.post p { font-size: 15px; line-height: 1.5; }
.empty { border: 1px dashed var(--line); padding: 18px; color: var(--mist); font-family: var(--sans); font-size: 14px; }

/* rekord */
.record { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.fig .display { font-size: 84px; line-height: .9; }
.fig .fig-l { margin-top: 6px; }
.fig .src { font-family: var(--sans); font-size: 12px; color: var(--mist); margin-top: 4px; }
.titles { list-style: none; margin: 0; padding: 0; }
.titles li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.titles li:first-child { border-top: 1px solid var(--line); }
.titles .yr { font-family: var(--sans); font-weight: 600; color: var(--ink-2); }
.titles .t { font-size: 18px; }
.titles .t small { display: block; font-family: var(--sans); font-size: 13px; color: var(--mist); margin-top: 2px; }

/* pressen — Hemsidan 13: each card is one link, media box always 16:9 so a
   fallback and a loaded thumbnail take the same height (egenskap 5). */
.press { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.press-card { border: 1px solid var(--line); }
.press-link { display: block; color: inherit; }
.press-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--panel); overflow: hidden; }
.press-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.press-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--mist); }
.press-media.has-image .press-fallback { display: none; }
.press-media.has-image.broken img { display: none; }
.press-media.has-image.broken .press-fallback { display: flex; }
.press-body { display: block; padding: 16px; }
.press-body .src { display: block; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.press-body .src small { display: block; font-weight: 400; color: var(--mist); }
.press-body .hl { display: block; font-size: 18px; margin-top: 6px; }
.press-body .arrow { display: block; font-family: var(--sans); font-size: 14px; color: var(--mist); margin-top: 10px; }
@media (min-width: 901px) {
  .press { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* berättelsen */
.story { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
.story .photo { aspect-ratio: 3 / 4; }
.story .body { max-width: 62ch; font-size: 19px; }
.story .body p + p { margin-top: 1em; }
.story blockquote { margin: 28px 0; padding-left: 20px; border-left: 3px solid var(--signal); font-style: italic; font-size: 24px; line-height: 1.3; }
.story-page .body { max-width: 62ch; font-size: 19px; margin: 0 auto; }
.story-page .body p + p { margin-top: 1em; }

/* partners */
.partners { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; }
.logos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.logo { border: 1px solid var(--line); height: 92px; display: grid; place-items: center; padding: 14px; }
.logo img { max-height: 60px; width: auto; }
.work { background: var(--panel); padding: 28px; }
.work h3 { font-family: var(--display); font-size: 34px; }
.work p { font-size: 17px; margin-top: 10px; }
.work ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; font-family: var(--sans); font-size: 15px; }
.work li a { border-bottom: 1.5px solid var(--ink); }
.work li a:hover { text-decoration: none; color: var(--signal); border-color: var(--signal); }

/* Ask Smilla (Hemsidan 8) — skissen hemsidan-8.png */
.ama { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.ama .photo { aspect-ratio: 3 / 4; }
.ama .photo img { object-position: 50% 20%; }
.ama .intro { font-size: 19px; max-width: 48ch; margin: 0 0 24px; }
.ama-form { display: grid; gap: 14px; font-family: var(--sans); }
.ama-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.ama-q-head { display: grid; gap: 6px; }
.ama-form .count { font-size: 12px; color: var(--mist); text-transform: none; letter-spacing: 0; font-weight: 400; justify-self: end; }
.ama-form textarea, .ama-form input, .ama-form select, .ama-offer input { font: inherit; font-family: var(--sans); font-size: 16px; padding: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 2px; width: 100%; }
.ama-form textarea { min-height: 96px; resize: vertical; }
.ama-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ama-social-fields { display: grid; gap: 14px; }
.ama-tag-consent { grid-template-columns: 20px 1fr !important; gap: 4px 12px !important; align-items: center; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.ama-form .ama-tag-consent input { width: 20px; height: 20px; margin: 0; padding: 0; grid-row: 1; }
.ama-tag-consent-text { grid-column: 2; grid-row: 1; font-size: 15px; }
.ama-tag-consent-help { grid-column: 2; grid-row: 2; font-size: 13px; font-weight: 400; color: var(--mist); }
.ama-btn { font-family: var(--sans); font-weight: 600; font-size: 15px; padding: 12px 18px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 2px; }
.ama-btn.quiet { background: transparent; color: var(--ink); }
.ama-btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.ama-form :disabled, .ama-offer :disabled { opacity: .5; cursor: not-allowed; }
.ama-form .fine { font-size: 13px; color: var(--mist); margin: 0; }
.ama-status { font-family: var(--sans); font-size: 14px; color: var(--ink); border-left: 3px solid var(--signal); padding: 6px 0 6px 12px; margin: 0; }
.ama-list-head { margin: 32px 0 0; padding-bottom: 8px; }
.ama-qs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ama-qs li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ama .vote { font-family: var(--sans); border: 1.5px solid var(--line); background: transparent; color: var(--ink); border-radius: 2px; padding: 6px 0; display: grid; justify-items: center; line-height: 1.1; }
.ama .vote b { font-size: 16px; font-weight: 600; }
.ama .vote small { font-size: 10px; letter-spacing: .06em; }
.ama .vote.top, .ama .vote:hover, .ama .vote[aria-pressed="true"] { border-color: var(--signal); color: var(--signal); }
.ama-qs .q { font-size: 18px; overflow-wrap: anywhere; }
.ama-qs .who { font-family: var(--sans); font-size: 13px; color: var(--mist); margin-top: 4px; }
.ama-qs .answered { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.ama-main > .ama-status { margin-top: 12px; }
.ama-offer { margin-top: 32px; background: var(--panel); padding: 18px 20px; display: grid; gap: 10px; font-family: var(--sans); }
.ama-offer[hidden] { display: none; }
.ama-offer .t { font-size: 16px; font-weight: 600; }
.ama-offer-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.ama-offer input { font-size: 15px; padding: 10px 12px; }
.ama-offer .fine { font-size: 12px; color: var(--mist); margin: 0; }
.ama-offer .when { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.ama-offer-status { font-size: 14px; margin: 0; color: var(--ink); }
@media (max-width: 900px) {
  .ama { grid-template-columns: 1fr; gap: 32px; }
  .ama .photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .ama-row { grid-template-columns: 1fr; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

footer { background: var(--storm); color: var(--storm-ink); padding: 48px 0 32px; }
footer .wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
footer .label { color: var(--storm-mist); }
footer ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-family: var(--sans); font-size: 15px; }
footer .fine { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; font-family: var(--sans); font-size: 13px; color: var(--storm-mist); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 900px) {
  body { font-size: 17px; }
  .hero { min-height: 0; }
  .hero .wrap { grid-template-columns: 1fr; padding-top: 300px; gap: 24px; }
  .hero .bg { object-position: 60% 20%; }
  .hero h1 { font-size: clamp(64px, 18vw, 110px); }
  .fight .ev { font-size: 28px; }
  .posts { grid-template-columns: 1fr 1fr; }
  .record, .story, .partners { grid-template-columns: 1fr; gap: 32px; }
  .story .photo { aspect-ratio: 16 / 10; }
  footer .wrap { grid-template-columns: 1fr 1fr; }
  .sec-head h2 { font-size: 36px; }
}
/* Hemsidan 7: Watch — the big clip left (two rows), four small ones 2 × 2
   right. A clip is a thumbnail served from HQ until it is clicked; only then
   does the one YouTube iframe (youtube-nocookie.com) take its place. */
.rule { font-family: var(--sans); font-size: 14px; color: var(--mist); margin-top: 16px; max-width: 70ch; }
.videos { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.video { display: grid; gap: 10px; align-content: start; min-width: 0; }
.video .photo { aspect-ratio: 16 / 9; width: 100%; margin: 0; padding: 0; border: 0; display: block; color: inherit; text-align: left; }
.video button.photo { cursor: pointer; }
.video:first-child { grid-row: span 2; }
.video:first-child .photo { aspect-ratio: auto; height: 100%; min-height: 320px; }
.video .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .vt { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.video .vs { font-family: var(--sans); font-size: 13px; color: var(--mist); }
.play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 2px solid var(--storm-ink); border-radius: 50%; display: grid; place-items: center; color: var(--storm-ink); font-family: var(--sans); font-size: 18px; line-height: 1; background: rgba(14,19,22,.35); }
.video button.photo:hover .play, .video button.photo:focus-visible .play { background: var(--signal); border-color: var(--signal); }
@media (max-width: 900px) {
  .videos { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .video:first-child { grid-row: auto; grid-column: 1 / -1; }
  .video:first-child .photo { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .videos { grid-template-columns: 1fr; }
  .video .cap { font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
  .posts { grid-template-columns: 1fr; }
  .figs { gap: 16px; }
  .fig .display { font-size: 64px; }
  footer .wrap { grid-template-columns: 1fr; }
  /* Hemsidan 13, egenskap 6: one horizontally-scrolled row inside the
     section — the page itself must never scroll sideways (Hemsidan 12's
     lock), only this row does, via its own overflow-x. */
  .press { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .press-card { flex: 0 0 80%; scroll-snap-align: start; }
}

/* kakruta */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--storm); color: var(--storm-ink); border-top: 1px solid rgba(255,255,255,.14); padding: 20px 24px; }
.consent-banner[hidden] { display: none; }
.consent-banner-wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.consent-banner-copy { flex: 1 1 420px; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.consent-readmore { background: none; border: 0; padding: 0; margin-left: 4px; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.consent-details { margin-top: 10px; display: grid; gap: 6px; font-size: 13px; color: var(--storm-mist); }
.consent-details[hidden] { display: none; }
.consent-details a { color: inherit; text-decoration: underline; }
.consent-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.consent-btn { width: 176px; box-sizing: border-box; padding: 12px 0; border: 1.5px solid var(--storm-ink); background: var(--storm-ink); color: #16191D; border-radius: 2px; font-family: var(--sans); font-weight: 600; font-size: 14px; text-align: center; }
.consent-btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
@media (max-width: 480px) {
  .consent-banner-actions { flex-direction: column; width: 100%; }
  .consent-btn { width: 100%; }
}

/* cookies-sidan */
.cookies-page .body { max-width: 62ch; font-size: 17px; display: grid; gap: 12px; }
.consent-form { max-width: 640px; margin-top: 32px; display: grid; gap: 14px; font-family: var(--sans); }
.consent-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.consent-row-copy p { font-size: 14px; color: var(--mist); margin-top: 4px; }
.consent-row input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
#consent-save { justify-self: start; width: auto; padding: 10px 20px; }
[data-consent-status] { margin-top: 16px; font-family: var(--sans); font-size: 14px; color: var(--mist); }

/* Hemsidan 5: All posts — överlägget, byggt av site.js efter skissen */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(22,25,29,.55); overflow-y: auto; padding: 32px 16px; }
.overlay[hidden] { display: none; }
body.overlay-open { overflow: hidden; }
.overlay-in { max-width: 1180px; margin: 0 auto; background: var(--paper); color: var(--ink); padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.ov-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.ov-head h2 { font-family: var(--display); font-size: 56px; line-height: .92; letter-spacing: .01em; }
.ov-btn { font-family: var(--sans); font-weight: 600; font-size: 15px; padding: 12px 18px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 2px; }
.ov-btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.ov-head .ov-btn { padding: 8px 12px; font-size: 14px; }
.ov-tools { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-bottom: 20px; }
.ov-tools input { font: inherit; font-family: var(--sans); font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 2px; width: 100%; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 7px 12px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 2px; }
.chip[hidden] { display: none; }
.chip.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.ov-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
/* Enda avvikelsen från skissen: flödet bär ingen bild, så rutan är skissens
   mörka ruta med kortets text i stället för ett foto. */
.tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--photo); color: var(--storm-ink); display: block; width: 100%; padding: 0; border: 0; border-radius: 0; text-align: left; font: inherit; }
.tile .tile-text { position: absolute; left: 12px; right: 12px; top: 12px; font-family: var(--serif); font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tile .tile-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; font-family: var(--sans); font-size: 12px; color: var(--storm-ink); background: linear-gradient(to top, rgba(14,19,22,.85), rgba(14,19,22,0)); }
.tile:hover, .tile:focus-visible { background: var(--storm); }
.ov-more { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-family: var(--sans); }
.ov-more .ov-btn[hidden] { display: none; }
.ov-more .fine { font-size: 13px; color: var(--mist); }
.ov-note { font-family: var(--sans); font-size: 14px; color: var(--mist); padding: 18px 0; }
.ov-note[hidden] { display: none; }
.ov-note a { text-decoration: underline; }
.ov-detail { display: grid; gap: 14px; max-width: 70ch; padding: 8px 0 12px; }
.ov-detail[hidden] { display: none; }
.ov-detail .ov-back { justify-self: start; padding: 8px 12px; font-size: 14px; }
.ov-detail time, .ov-detail .ov-channels { font-family: var(--sans); font-size: 14px; color: var(--mist); }
.ov-detail .ov-text { font-size: 18px; white-space: pre-line; overflow-wrap: anywhere; }
.posts-page { min-height: 50vh; }
@media (max-width: 900px) { .ov-grid { grid-template-columns: repeat(3, 1fr); } .ov-tools { grid-template-columns: 1fr; } .ov-head h2 { font-size: 40px; } }
@media (max-width: 560px) { .ov-grid { grid-template-columns: repeat(2, 1fr); } .overlay { padding: 0; } .overlay-in { padding: 20px 16px; } .tile .tile-text { font-size: 13px; -webkit-line-clamp: 5; } }