/* ==========================================================================
   NordenTV.se — "Provbild"
   Implements references/design.md. If the two disagree, one of them is wrong.

   Oxblood canvas, bone reading surfaces, one brass accent, slab-serif display,
   and a seven-bar test-card strip as the signature element.

   No JavaScript is required by anything in this file. The mobile menu and the
   FAQ are both <details>.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root{
  /* Ground */
  --oxblod:       #3B1220;
  --oxblod-2:     #2A0C17;
  --oxblod-3:     #4E1B2C;
  --oxblod-line:  #63293C;

  /* Light surfaces */
  --ben:          #F3EBDD;
  --ben-2:        #E2D6C2;

  /* Ink */
  --black:        #241017;
  --black-2:      #5A4048;
  --dis:          #AE8E99;

  /* The one accent */
  --massing:      #E8A33D;
  --massing-d:    #8A5606;   /* AA-safe brass for text on bone */

  /* Reserved — .warn and nothing else */
  --test:         #2E6B6B;

  /* The seven bars. Always seven, always this order. */
  --bar1: #F3EBDD;
  --bar2: #E8A33D;
  --bar3: #C97B2B;
  --bar4: #A85434;
  --bar5: #7E3244;
  --bar6: #63293C;
  --bar7: #241017;

  --display: Rockwell, 'Rockwell Nova', 'Bookman Old Style', 'Palatino Linotype',
             Palatino, 'Iowan Old Style', 'Hoefler Text', serif;
  --body:    'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --r: 4px;                 /* the only radius on the site */
  --wrap: 1140px;
  --gut: 20px;
}

@media (min-width:720px){ :root{ --gut:24px } }

/* --- Reset -------------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--oxblod);
  color:var(--ben);
  font:400 1.0625rem/1.68 var(--body);
  font-synthesis-weight:none;
}

img,svg{ max-width:100%; height:auto; display:block }
table{ border-collapse:collapse; width:100% }

h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0 0 .5em }
h1{ font-size:clamp(2.05rem,1.35rem + 3.1vw,3.5rem); line-height:1.08; letter-spacing:-.015em }
h2{ font-size:clamp(1.5rem,1.2rem + 1.25vw,2.05rem); line-height:1.18; letter-spacing:-.01em }
h3{ font-size:1.15rem; line-height:1.3 }

p,ul,ol{ margin:0 0 1.1em }
li{ margin-bottom:.4em }

a{ color:var(--massing); text-decoration:none }

/* Bone surfaces that sit INSIDE a dark page — tables, warn boxes, the FAQ, the
   chain, pricing, any .on-ben section. A link in one of them inherits the rule
   above, and --massing on --ben is 1,8:1. These are the letterforms design.md
   means when it says brass on bone is a fill or a rule, never text.

   THE :where() IS LOAD-BEARING — do not unwrap it. Written plainly, `.plan a` is
   (0,1,1) and `.s.on-ben a` is (0,2,1); both outrank `.btn` at (0,1,0), so every
   button label inside a bone section rendered as --massing-d on --massing: 2,85:1,
   which is what Lighthouse failed on 18 August 2026. :where() contributes zero
   specificity, so context colours links while components keep their own. The rule
   still beats the bare `a` above on source order. audit-a11y enforces the wrapper. */
:where(.tbl, .warn, .faq, .chain, .plan, .on-ben) a{ color:var(--massing-d) }

/* Links in running text must not rely on colour alone. Brass against bone body text
   is 1,82:1 and --massing-d against --black is 2,94:1 — both under the 3:1 that
   would let hue carry the signal on its own, which was Lighthouse's second finding.
   So text-block links are underlined.

   Chrome is deliberately excluded: nav, footer, cards, the TOC and breadcrumbs are
   lists of links rather than prose, and underlining them adds noise without adding
   information. Buttons are excluded explicitly — an underlined button label reads
   as a mistake. */
:where(.prose, .s p, .hero p, .cta p, .tbl, .warn, .answer, .faq .a) a:not(.btn){
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:3px }
.btn:hover{ text-decoration:none }

:focus-visible{ outline:3px solid var(--massing); outline-offset:2px }

/* Numbers are set in the display face, never a monospace — see design.md, "Type". */
.num, td, th, .price, .stat b{ font-variant-numeric:tabular-nums }

/* --- Layout ------------------------------------------------------------- */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--massing); color:var(--black);
  padding:12px 18px; font-weight:700;
}
.skip:focus{ left:0 }

main{ display:block }
main:focus{ outline:none }

/* --- The seven bars ----------------------------------------------------- */
/* Hard edges, equal widths, no radius, no gaps. The geometry is what makes it
   read as a test card — see design.md, "The seven bars". */

.bars{
  background:linear-gradient(90deg,
    var(--bar1) 0 14.2857%, var(--bar2) 14.2857% 28.5714%,
    var(--bar3) 28.5714% 42.8571%, var(--bar4) 42.8571% 57.1429%,
    var(--bar5) 57.1429% 71.4286%, var(--bar6) 71.4286% 85.7143%,
    var(--bar7) 85.7143% 100%);
  border-radius:0;
}

.band{ height:10px }                      /* full-bleed divider between zones */
.rule{ width:84px; height:14px; margin-bottom:14px }   /* under a section head */

/* --- Topbar ------------------------------------------------------------- */

.topbar{
  background:var(--oxblod-2);
  border-bottom:1px solid var(--oxblod-line);
  font-size:.83rem; color:var(--dis);
}
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:8px 22px; padding-block:8px; justify-content:center }
.topbar b{ color:var(--ben); font-weight:600 }

@media (min-width:720px){ .topbar .wrap{ justify-content:space-between } }

/* --- Header ------------------------------------------------------------- */

.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--oxblod-2);
  border-bottom:1px solid var(--oxblod-line);
}
.site-header .wrap{
  display:flex; align-items:center; gap:16px;
  padding-block:12px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--ben); font-family:var(--display); font-weight:700;
  font-size:1.22rem; letter-spacing:-.01em; text-decoration:none;
  margin-right:auto;
}
.brand:hover{ text-decoration:none }
.brand .mark{ width:26px; height:26px; flex:none }
.brand em{ font-style:normal; color:var(--massing) }

/* Desktop nav. The header CTA rides alongside it and disappears at the same
   breakpoint, where it reappears at the foot of the mobile panel instead. */
.nav-desk{ display:none }
.hdr-cta{ display:none; padding:9px 16px; font-size:.94rem; flex:none }
.nav-desk ul{ display:flex; gap:20px; list-style:none; margin:0; padding:0 }
.nav-desk a:not(.btn){ color:var(--ben); font-size:.94rem; padding-block:6px; display:block }
.nav-desk a:not(.btn):hover{ color:var(--massing); text-decoration:none }

/* Mobile menu — <details>, no JavaScript */
.nav-mob{ margin-left:auto }
.nav-mob > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  min-height:44px; padding:0 12px;
  border:1px solid var(--oxblod-line); border-radius:var(--r);
  color:var(--ben); font-size:.9rem; font-weight:600;
}
.nav-mob > summary::-webkit-details-marker{ display:none }
.nav-mob > summary::after{ content:"▾"; font-size:.8rem; color:var(--massing) }
.nav-mob[open] > summary::after{ content:"▴" }
/* Positioned against .site-header, which is sticky and therefore the containing
   block. `top:100%` puts the panel directly under the bar at every header height
   instead of relying on the summary's static position. */
.nav-mob ul{
  position:absolute; top:100%; left:0; right:0;
  background:var(--oxblod-2); border-bottom:1px solid var(--oxblod-line);
  list-style:none; margin:0; padding:8px var(--gut) 16px;
}
/* :not(.btn) is required, not tidiness. The panel ends with the order button, and
   a bare `.nav-mob a` at (0,1,1) outranks `.btn` at (0,1,0) — it repainted the
   label --ben on --massing (1,82:1) and stripped its padding. Lighthouse never saw
   it because a closed <details> is hidden from the audit; it is still broken on a
   phone, which is the only place this menu exists. */
.nav-mob a:not(.btn){ display:block; color:var(--ben); padding:11px 0; min-height:44px;
  border-bottom:1px solid var(--oxblod-line) }
.nav-mob a:not(.btn):hover{ color:var(--massing); text-decoration:none }
.nav-mob li:last-child{ margin-top:12px }

@media (min-width:1000px){
  .nav-desk{ display:block }
  .hdr-cta{ display:inline-flex }
  .nav-mob{ display:none }
}

/* --- Buttons ------------------------------------------------------------ */
/* Label is always --black on --massing. Bone on brass is 1,8:1. */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:11px 22px;
  background:var(--massing); color:var(--black);
  font-family:var(--display); font-weight:700; font-size:1rem;
  border:2px solid var(--massing); border-radius:var(--r);
  text-decoration:none; transition:background 120ms linear, color 120ms linear;
}
.btn:hover{ background:var(--bar3); border-color:var(--bar3); color:var(--black); text-decoration:none }

.btn-ghost{ background:transparent; color:var(--ben); border-color:var(--oxblod-line) }
.btn-ghost:hover{ background:transparent; border-color:var(--massing); color:var(--massing) }

/* On a bone surface the ghost button needs bone-side colours. */
.on-ben .btn-ghost{ color:var(--black); border-color:var(--ben-2) }
.on-ben .btn-ghost:hover{ border-color:var(--massing-d); color:var(--massing-d) }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0 }

/* --- Hero --------------------------------------------------------------- */

.hero{ padding:52px 0 46px; border-bottom:1px solid var(--oxblod-line) }
.hero h1{ margin:0 0 .38em; max-width:16ch }
.hero .lead{ font-size:1.2rem; line-height:1.6; color:var(--ben); max-width:60ch; margin:0 }
.hero .kicker{ margin-bottom:10px }

@media (min-width:900px){ .hero{ padding:76px 0 64px } }

.stat-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px; background:var(--oxblod-line);
  border:1px solid var(--oxblod-line); border-radius:var(--r);
  margin-top:34px; overflow:hidden;
}
.stat{ background:var(--oxblod); padding:16px 18px }
.stat b{ display:block; font-family:var(--display); font-size:1.45rem; color:var(--massing); line-height:1.1 }
.stat span{ display:block; font-size:.85rem; color:var(--dis); margin-top:4px }

/* --- Sections ----------------------------------------------------------- */

.s{ padding:56px 0 }
@media (min-width:900px){ .s{ padding:72px 0 } }

/* Bone section — the reading surface */
.s.on-ben{ background:var(--ben); color:var(--black) }
.s.on-ben h1,.s.on-ben h2,.s.on-ben h3{ color:var(--black) }
.s.on-ben .kicker{ color:var(--massing-d) }

.kicker{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--massing); margin:0 0 8px;
}

.section-head{ max-width:62ch; margin-bottom:34px }
.section-head p{ color:var(--dis); margin-bottom:0 }
.on-ben .section-head p{ color:var(--black-2) }

/* --- Cards -------------------------------------------------------------- */

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px }

.card{
  background:var(--oxblod-3); border:1px solid var(--oxblod-line);
  border-radius:var(--r); padding:22px 20px;
}
.card h3{ margin:0 0 .45em }
.card p{ color:var(--dis); margin:0 0 .8em; font-size:.97rem }
.card p:last-child{ margin-bottom:0 }
/* .more sits inside a.card, which is colour:inherit, so it needs its own colour or
   it renders as body text and stops reading as the card's call to action. */
.card .more{ font-weight:600; font-size:.94rem; color:var(--massing) }
.on-ben .card .more{ color:var(--massing-d) }
.card:hover{ border-color:var(--massing) }

.on-ben .card{ background:#fff; border-color:var(--ben-2) }
.on-ben .card p{ color:var(--black-2) }
.on-ben .card:hover{ border-color:var(--massing-d) }

a.card{ display:block; color:inherit; text-decoration:none }
a.card:hover{ text-decoration:none }

/* --- The chain (homepage differentiator) -------------------------------- */
/* Five numbered links in the delivery chain. The number is the point. */

.chain{ display:grid; gap:1px; background:var(--ben-2); border:1px solid var(--ben-2);
  border-radius:var(--r); overflow:hidden }
.chain > li{ background:var(--ben); padding:18px 20px; margin:0; display:grid;
  grid-template-columns:44px 1fr; gap:16px; align-items:start }
.chain{ list-style:none; padding:0 }
.chain .n{
  font-family:var(--display); font-weight:700; font-size:1.3rem;
  color:var(--ben); background:var(--oxblod); border-radius:var(--r);
  width:44px; height:44px; display:grid; place-items:center;
}
.chain li:nth-child(3) .n{ background:var(--massing); color:var(--black) }
.chain h3{ margin:0 0 .25em; font-size:1.05rem }
.chain p{ margin:0; color:var(--black-2); font-size:.96rem }
.chain .who{ display:block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--massing-d); font-weight:700; margin-top:6px }

@media (min-width:760px){ .chain{ grid-template-columns:1fr } }

/* --- Pricing ------------------------------------------------------------ */

.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px }

.plan{
  background:#fff; border:1px solid var(--ben-2); border-radius:var(--r);
  padding:22px 20px; display:flex; flex-direction:column;
}
.plan h3{ margin:0 0 2px; font-size:1rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--black-2) }
.plan .price{ font-family:var(--display); font-weight:700; font-size:2.3rem;
  color:var(--black); line-height:1.05 }
.plan .per{ color:var(--black-2); font-size:.9rem; margin:2px 0 14px }
.plan ul{ list-style:none; padding:0; margin:0 0 18px; font-size:.95rem; color:var(--black-2) }
.plan li{ padding-left:18px; position:relative }
.plan li::before{ content:""; position:absolute; left:0; top:.62em;
  width:9px; height:3px; background:var(--massing) }
.plan .btn{ margin-top:auto; width:100% }
.plan.pick{ border-color:var(--oxblod); border-width:2px }
.plan .tag{
  align-self:flex-start; font-family:var(--display); font-weight:700;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--oxblod); color:var(--ben); padding:4px 9px; border-radius:var(--r);
  margin-bottom:10px;
}

/* --- Tables ------------------------------------------------------------- */

.tbl{ overflow-x:auto; margin:0 0 1.4em; border:1px solid var(--ben-2); border-radius:var(--r) }
.tbl table{ min-width:480px; font-size:.95rem }
.tbl th,.tbl td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--ben-2) }
.tbl thead th{
  background:var(--oxblod); color:var(--ben);
  font-family:var(--display); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{ border-bottom:0 }
.tbl tbody th{ font-weight:600; color:var(--black) }
.tbl td{ color:var(--black-2) }

/* On the oxblood ground a table keeps the bone body so it stays a reading surface. */
.tbl{ background:var(--ben); color:var(--black) }

/* --- The honest negative ------------------------------------------------ */
/* --test is the only cool colour on the site and it belongs to this box alone. */

.warn{
  background:var(--ben); color:var(--black);
  border:1px solid var(--ben-2); border-left:5px solid var(--test);
  border-radius:var(--r); padding:16px 18px; margin:0 0 1.4em;
}
.warn p:last-child{ margin-bottom:0 }
.warn strong{ color:var(--test) }

/* --- The answer block --------------------------------------------------- */

.answer{
  background:var(--oxblod-3); border:1px solid var(--oxblod-line);
  border-left:5px solid var(--massing);
  border-radius:var(--r); padding:18px 20px; margin:0 0 1.6em;
  font-size:1.08rem;
}
.answer p:last-child{ margin-bottom:0 }
.on-ben .answer{ background:#fff; border-color:var(--ben-2); border-left-color:var(--massing) }

/* --- FAQ ---------------------------------------------------------------- */

.faq{ border:1px solid var(--ben-2); border-radius:var(--r); overflow:hidden; background:var(--ben) }
.faq details{ border-bottom:1px solid var(--ben-2) }
.faq details:last-child{ border-bottom:0 }
.faq summary{
  cursor:pointer; list-style:none; padding:15px 18px; min-height:44px;
  font-family:var(--display); font-weight:700; color:var(--black);
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--massing-d); font-size:1.3rem; flex:none; line-height:1 }
.faq details[open] summary::after{ content:"–" }
.faq summary:hover{ color:var(--massing-d) }
.faq .a{ padding:0 18px 16px; color:var(--black-2) }
.faq .a p:last-child{ margin-bottom:0 }
.faq .a a:not(.btn){ color:var(--massing-d) }

/* --- CTA band ----------------------------------------------------------- */

.cta{ background:var(--oxblod-2); border-block:1px solid var(--oxblod-line); padding:48px 0 }
.cta h2{ margin:0 0 .4em; max-width:20ch }
.cta p{ color:var(--dis); max-width:56ch; margin:0 }

/* --- Breadcrumb --------------------------------------------------------- */

/* .crumb, .legal and footer .cols each share an element with .wrap. They must set
   padding-block only — a `padding` shorthand here wins on source order and wipes
   out the container's horizontal gutter, pinning the content to the viewport edge. */
.crumb{ font-size:.86rem; color:var(--dis); padding-block:18px 0 }
.crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.crumb li::after{ content:"/"; margin-left:8px; color:var(--oxblod-line) }
.crumb li:last-child::after{ content:"" }
.crumb a:not(.btn){ color:var(--dis) }
.crumb a:not(.btn):hover{ color:var(--massing) }
.crumb [aria-current]{ color:var(--ben) }

/* --- Article ------------------------------------------------------------ */

.article{ padding:20px 0 60px }
.article .meta{ font-size:.86rem; color:var(--dis); margin:0 0 28px;
  padding-bottom:18px; border-bottom:1px solid var(--oxblod-line) }
.prose{ max-width:68ch }
.prose h2{ margin-top:1.9em; scroll-margin-top:90px }
.prose h3{ margin-top:1.6em }
.prose > :first-child{ margin-top:0 }
.prose ul,.prose ol{ padding-left:22px }
.prose figure{ margin:0 0 1.4em }

.toc{
  background:var(--oxblod-3); border:1px solid var(--oxblod-line);
  border-radius:var(--r); padding:18px 20px; margin:0 0 32px;
}
.toc h2{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--massing); margin:0 0 10px }
.toc ol{ list-style:none; margin:0; padding:0; font-size:.94rem }
.toc li{ margin-bottom:7px }
.toc li:last-child{ margin-bottom:0 }
.toc a:not(.btn){ color:var(--ben) }
.toc a:not(.btn):hover{ color:var(--massing) }

@media (min-width:980px){
  .article .cols{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; align-items:start }
  .toc{ position:sticky; top:88px; margin:0; order:2 }
  .prose{ order:1 }
}

/* --- Footer ------------------------------------------------------------- */

footer{ background:var(--oxblod-2); border-top:1px solid var(--oxblod-line) }
footer .cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:32px; padding-block:48px 36px;
}
footer h2{ font-family:var(--display); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--massing); margin:0 0 12px }
footer ul{ list-style:none; margin:0; padding:0; font-size:.94rem }
footer li{ margin-bottom:8px }
/* :not(.btn) throughout the chrome is a uniform invariant, not defensive clutter:
   a descendant-link colour rule always outranks .btn, so the day a footer or TOC
   gains a CTA the label would silently repaint. audit-a11y enforces it. */
footer a:not(.btn){ color:var(--ben) }
footer a:not(.btn):hover{ color:var(--massing) }
footer .about p{ color:var(--dis); font-size:.92rem; margin:12px 0 0 }
.legal{ border-top:1px solid var(--oxblod-line); padding-block:20px 34px;
  font-size:.84rem; color:var(--dis) }
.legal p{ margin:0 0 .5em }
.legal p:last-child{ margin-bottom:0 }

/* --- 404 ---------------------------------------------------------------- */

.nf{ padding:70px 0 60px; text-align:center }
.nf .bars{ height:22px; max-width:420px; margin:0 auto 30px }
.nf p{ color:var(--dis); max-width:52ch; margin-inline:auto }

/* --- Utility ------------------------------------------------------------ */

.lead{ font-size:1.2rem; line-height:1.6 }
.center{ text-align:center }
.mt0{ margin-top:0 }
.small{ font-size:.9rem }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap }

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important }
}

/* --- Print -------------------------------------------------------------- */

@media print{
  body{ background:#fff; color:#000 }
  .topbar,.site-header,.cta,footer,.toc,.band{ display:none }
  .prose{ max-width:none }
}