/* Self-hosted so no request goes to Google before consent. Latin and Latin Extended cover ë and ç. */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/familjen-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/familjen-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mrs Saint Delafield';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/mrs-saint-delafield-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mrs Saint Delafield';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/mrs-saint-delafield-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/schibsted-grotesk-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shared by the magazine (/) and the article pages (/lexo/...): tokens, base, reading layout, consent banner.
   The @font-face rules from src/fonts.css are prepended at build time. Light-only by design, like paper. */
:root {
  --desk: #e7e8e5;
  --paper: #ffffff;
  --ink: #151719;
  --grey: #6b6f74;        /* 5.2:1 on white */
  --grey-desk: #5d6166;   /* 4.9:1 on the desk */
  --hair: #dcddd9;
  --denim: #2d4a6b;
  --stone: #d9d6cf;
  --char: #24272b;
  --sage: #b9c3b5;
  --wash: #f3f4f1;
  --disp: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 }
:focus-visible { outline: 2px solid var(--denim); outline-offset: 3px }
.lbl { font: 600 12px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase }
.meta { font: 500 13px var(--text); color: var(--grey); letter-spacing: .04em; font-variant-numeric: tabular-nums }
.ttl { font-family: var(--disp); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; margin: 0; text-wrap: balance }
.more { display: inline-flex; align-items: center; gap: .6em; font: 600 14px var(--text); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; align-self: flex-start }
.more:hover { color: var(--denim) }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* reading layout: the article sheet in the magazine and the standalone article pages */
.article { max-width: 44rem; margin: 0 auto; padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 32px) 96px; display: grid; gap: 24px }
.article h1.ttl { font-size: clamp(38px, 6vw, 72px); font-weight: 600; letter-spacing: -.035em; line-height: 1 }
.article .note { margin: 0; color: var(--grey); font-style: italic }
.article .body { display: grid; gap: 1.1em; font: 400 clamp(19px, 1.5vw, 21px)/1.7 var(--text); color: #1f2124 }
.article .body p { margin: 0; max-width: 38em }
.article .body p.dc:first-child::first-letter { font: 600 3.6em/.8 var(--disp); float: left; padding: .08em .12em 0 0; color: var(--denim) }
.article .lede { font: 400 clamp(20px, 2vw, 24px)/1.6 var(--text); margin: 0 }
.cont { display: grid; gap: 12px; justify-items: start; background: var(--wash); padding: 22px }
.cont p { margin: 0; color: #4a4e54 }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1.5px solid var(--ink); padding-top: 16px }
.pn a { display: grid; gap: 6px }
.pn a:last-child { text-align: right }
.pn .ttl { font-size: 20px }
.pn a:hover .ttl { color: var(--denim) }
@media (max-width: 560px) { .pn { grid-template-columns: 1fr } .pn a:last-child { text-align: left } }

/* analytics consent: Accept and Decline are equal, nothing from Google loads before Accept */
.consent { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; width: min(680px, calc(100% - 24px)); background: var(--paper); border-radius: 14px; box-shadow: 0 18px 50px -12px rgb(20 22 25 / .28); padding: 18px 20px; display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; font: 400 14px/1.5 var(--text) }
.mag .consent { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) }
.consent p { margin: 0; max-width: 40ch; color: #4a4e54 }
.consent b { display: block; color: var(--ink); font: 600 15px var(--disp); margin-bottom: 2px }
.consent .ch { display: flex; gap: 8px }
.consent button { font: 600 14px var(--text); padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--ink); min-width: 96px }
.consent .yes { background: var(--ink); color: var(--paper) }
.consent .no { background: var(--paper); color: var(--ink) }