/* ────────────────────────────────────────────────────────────
   NORDBRIEF · Design system — Source Serif 4 · Geist · Press
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* PAPER theme (default) */
  --paper:#f3ede0;
  --paper-2:#ebe4d3;
  --ink:#15120c;
  --ink-soft:#3a342a;
  --muted:#7a7160;
  --rule:#d4caaf;
  --rule-soft:#e3dac0;
  --carmine:#9c2a32;
  --carmine-deep:#7d1f26;
  --carmine-wash:#f3d8d7;
  --forest:#2d4a2b;

  --bg:var(--paper);
  --surface:#ece4d0;
  --surface-2:#e2d9c2;
  --text:var(--ink);
  --text-soft:var(--ink-soft);
  --accent:var(--carmine);
  --accent-deep:var(--carmine-deep);
  --accent-wash:var(--carmine-wash);
  --hairline:var(--rule);
  --hairline-soft:var(--rule-soft);

  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Geist','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:min(1680px, calc(100% - 48px));
}

html[data-theme="ink"]{
  --bg:#15120c;
  --surface:#1d1810;
  --surface-2:#2a2317;
  --text:#ede6d2;
  --text-soft:#c6bea8;
  --muted:#8c8270;
  --hairline:#3a3326;
  --hairline-soft:#2a251a;
  --accent:#d77a7f;
  --accent-deep:#e89499;
  --accent-wash:#3a1f22;
}

html[data-theme="press"]{
  /* Original NordBrief palette — gold on dark blue-grey */
  --bg:#07070c;
  --surface:#0f1019;
  --surface-2:#151620;
  --text:#eeeef4;
  --text-soft:#c8c8d4;
  --muted:#7a7a92;
  --hairline:#22232e;
  --hairline-soft:#16171f;
  --accent:#c9a84c;
  --accent-deep:#e8d5a3;
  --accent-wash:rgba(201,168,76,0.12);
}

html[data-accent="forest"]{ --accent:#3d6939; --accent-deep:#2d4a2b; --accent-wash:#dde7d4; }
html[data-accent="ink"]{ --accent:var(--text); --accent-deep:var(--text); --accent-wash:var(--surface); }

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  font-feature-settings:'ss01','cv11';
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .35s ease, color .35s ease;
}

html[data-theme="press"] body{ font-family:var(--sans); font-size:16px; }

/* Paper texture */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0,0,0,.04), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(0,0,0,.03), transparent 60%);
  mix-blend-mode:multiply;
  opacity:.6;
}
html[data-theme="ink"] body::before,
html[data-theme="press"] body::before{
  opacity:.4;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255,255,255,.025), transparent 60%);
}

a{color:inherit;text-decoration:none}

/* ────── MASTHEAD ────── */
.masthead{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.mast-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:14px 48px 12px;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.mast-left, .mast-right{ display:flex; align-items:center; gap:18px; }
.mast-right{ justify-content:flex-end; }

.dateline{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex; gap:14px; align-items:center;
}
.dateline strong{ color:var(--text); font-weight:600; }
.dateline .dot{ width:4px; height:4px; background:var(--accent); border-radius:50%; display:inline-block; }

.wordmark{
  font-family:var(--serif);
  font-weight:700;
  font-size:34px;
  letter-spacing:0;
  line-height:1;
  color:var(--text);
  white-space:nowrap;
  font-variation-settings:"opsz" 60;
}
.wordmark .nb{ color:var(--accent); }

.mast-nav{ display:flex; gap:22px; }
.mast-nav a{
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  color:var(--text-soft);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .15s, color .15s;
}
.mast-nav a:hover, .mast-nav a.on{
  border-bottom-color:var(--accent);
  color:var(--text);
}

/* Mobile burger */
.mast-burger{
  display:none;
  background:transparent;
  border:1px solid var(--hairline);
  width:38px;
  height:38px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:0;
  margin-left:auto;
}
.mast-burger span{
  display:block;
  width:18px;
  height:1.5px;
  background:var(--text);
  transition:transform .25s, opacity .2s;
}
#mast-toggle{ display:none; }

.lang-pick{
  font-family:var(--mono);
  font-size:11px;
  display:flex;
  gap:0;
  border:1px solid var(--hairline);
}
.lang-pick button{
  background:none;
  border:none;
  font:inherit;
  padding:4px 9px;
  color:var(--muted);
  cursor:pointer;
  border-right:1px solid var(--hairline);
  transition:background .15s, color .15s;
}
.lang-pick button:last-child{ border-right:none; }
.lang-pick button.on{ background:var(--text); color:var(--bg); }
.lang-pick button:hover:not(.on){ color:var(--text); }

.btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:13px;
  padding:9px 16px;
  border:1px solid var(--text);
  background:var(--text);
  color:var(--bg);
  cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
  display:inline-flex; align-items:center; gap:8px;
  letter-spacing:.005em;
  text-decoration:none;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost{ background:transparent; color:var(--text); }
.btn.ghost:hover{ background:var(--text); color:var(--bg); }
.btn.sm{ padding:6px 12px; font-size:12px; }
.btn .arrow{ font-family:var(--serif); font-size:16px; line-height:1; transform:translateY(-1px); }

/* ────── USER MENU (dropdown) ────── */
.user-menu{ position:relative; display:inline-flex; }
.user-menu-btn{
  font-family:var(--sans);
  font-weight:500;
  font-size:12px;
  letter-spacing:.005em;
  padding:6px 12px;
  background:var(--bg);
  border:1px solid var(--text);
  color:var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .15s, color .15s;
}
.user-menu-btn:hover,
.user-menu.open .user-menu-btn{ background:var(--text); color:var(--bg); }
.user-menu-btn .arrow{
  font-family:var(--serif);
  font-size:16px; line-height:1;
  transform:translateY(-1px);
  transition:transform .18s;
}
.user-menu.open .user-menu-btn .arrow{ transform:translateY(-1px) rotate(180deg); }
.user-menu-btn{ position:relative; }
.user-menu-btn.has-news::after{
  content:'';
  position:absolute;
  top:4px; right:6px;
  width:7px; height:7px;
  background:var(--accent);
  border:1px solid var(--bg);
  border-radius:50%;
  pointer-events:none;
}
.user-menu.open .user-menu-btn.has-news::after,
.user-menu-btn.has-news:hover::after{ border-color:var(--text); }
.user-menu-btn .av{
  width:18px; height:18px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:10px;
  font-variation-settings:"opsz" 12;
  display:inline-flex; align-items:center; justify-content:center;
  letter-spacing:0;
}

.user-menu-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:240px;
  background:var(--bg);
  border:1px solid var(--text);
  box-shadow:6px 6px 0 var(--surface), 6px 6px 0 1px var(--text);
  z-index:60;
  display:none;
  flex-direction:column;
  padding:0;
}
.user-menu.open .user-menu-pop{ display:flex; }

.umm-head{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--hairline);
  background:var(--surface);
}
.umm-head .nm{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:18px;
  letter-spacing:0;
  color:var(--text);
  font-variation-settings:"opsz" 20;
  margin-bottom:2px;
}
.umm-head .em{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--muted);
}
.umm-head .pl{
  margin-top:6px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:6px;
}
.umm-head .pl::before{
  content:'';
  width:5px; height:5px;
  background:var(--accent);
  border-radius:50%;
}

.user-menu-pop a{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 16px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--hairline-soft);
  transition:background .12s, color .12s, padding .15s;
}
.user-menu-pop a:hover{
  background:var(--surface);
  padding-left:20px;
}
.user-menu-pop a .k{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--muted);
  border:1px solid var(--hairline);
  padding:1px 5px;
}
.user-menu-pop a .ar{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--muted);
}
.user-menu-pop a:hover .ar{ color:var(--accent); }

.user-menu-pop .umm-sep{ height:1px; background:var(--hairline); }
.user-menu-pop .umm-out{
  color:var(--accent);
  border-bottom:none;
}
.user-menu-pop .umm-out:hover{
  background:var(--accent);
  color:#fff;
}
.user-menu-pop .umm-out:hover .ar{ color:#fff; }

.user-menu-pop .umm-foot{
  padding:10px 16px 12px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  color:var(--muted);
  background:var(--surface);
  border-top:1px solid var(--hairline);
  line-height:1.55;
}
.user-menu-pop .umm-foot strong{ color:var(--text); font-weight:600; }

/* ────── Language banner (when UI != LV) ────── */
#nb-lang-banner{
  display:none;
  background:var(--text);
  color:var(--bg);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  border-bottom:1px solid var(--text);
  position:relative;
  z-index:60;
}
#nb-lang-banner .nb-lb-in{
  max-width:var(--max);
  margin:0 auto;
  padding:9px 32px;
  display:flex; align-items:center; gap:14px;
}
#nb-lang-banner .nb-lb-mark{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:var(--accent);
  line-height:1;
  font-variation-settings:"opsz" 18;
}
#nb-lang-banner .nb-lb-txt{
  flex:1;
  line-height:1.5;
  letter-spacing:.02em;
}
#nb-lang-banner .nb-lb-txt strong{
  color:var(--bg);
  font-weight:600;
  border-bottom:1px solid var(--accent);
}
#nb-lang-banner .nb-lb-x{
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:var(--bg);
  font-family:inherit;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 10px;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
#nb-lang-banner .nb-lb-x:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* lang-pick — universal styling tweak: on-state */
.lang-pick button.on{ font-weight:700; }

/* RSS link in footers */
.nb-rss-link{
  font-family:var(--mono);
  font-size:inherit;
  letter-spacing:.06em;
  color:var(--accent) !important;
  margin-left:0;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .15s;
}
.nb-rss-link:hover{ border-bottom-color:var(--accent); }

.mast-rule{
  height:0;
  border-top:3px double var(--hairline);
  max-width:var(--max);
  margin:0 auto;
}

/* ────── COMMON TYPE ────── */
.kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.kicker::before{
  content:'';
  display:inline-block;
  width:24px;
  height:1px;
  background:var(--accent);
}

.headline-xl{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(48px, 6.4vw, 96px);
  line-height:.96;
  letter-spacing:0;
  color:var(--text);
  font-variation-settings:"opsz" 60;
  text-wrap:balance;
}
.headline-xl em{
  font-style:italic;
  font-weight:500;
  color:var(--accent);
}

.h-strike{
  position:relative;
  color:var(--muted);
  font-weight:400;
  font-style:italic;
}
.h-strike::after{
  content:'';
  position:absolute;
  left:-2%;
  right:-2%;
  top:55%;
  height:2px;
  background:var(--accent);
  transform:rotate(-3deg);
}

.lede{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.5;
  color:var(--text-soft);
  max-width:54ch;
  font-variation-settings:"opsz" 18;
}
.lede strong{ color:var(--text); font-weight:600; }

.sec-head{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:56px;
  align-items:end;
  margin-bottom:48px;
  padding-bottom:24px;
  border-bottom:1px solid var(--hairline-soft);
}
.sec-head .label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.sec-head .label .num{
  color:var(--accent);
  margin-right:8px;
  font-weight:600;
}
.sec-h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(34px, 4vw, 56px);
  line-height:1.02;
  letter-spacing:0;
  color:var(--text);
  font-variation-settings:"opsz" 48;
  text-wrap:balance;
}
.sec-h2 em{ font-style:italic; color:var(--accent); font-weight:500; }
.sec-sub{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.55;
  color:var(--text-soft);
  font-variation-settings:"opsz" 18;
  max-width:48ch;
  margin-top:14px;
}

section{
  max-width:var(--max);
  margin:0 auto;
  padding:64px 32px;
  border-bottom:1px solid var(--hairline);
  position:relative;
  z-index:2;
}

/* ────── COLOPHON / FOOTER ────── */
.colophon{
  background:var(--bg);
  padding:48px 32px 24px;
  position:relative;
  z-index:2;
  border-top:1px solid var(--hairline);
}
.col-inner{ max-width:var(--max); margin:0 auto; }
.col-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:32px;
  border-bottom:1px solid var(--hairline);
}
.col-brand .wordmark{ font-size:38px; margin-bottom:14px; }
.col-tag{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--text-soft);
  font-variation-settings:"opsz" 18;
  max-width:32ch;
}
.col h5{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.col ul{ list-style:none; display:flex; flex-direction:column; gap:7px; }
.col ul a{
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--text);
}
.col ul a:hover{ color:var(--accent); }

.col-bot{
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--muted);
  letter-spacing:.05em;
}
.col-bot a{ color:var(--muted); margin-left:18px; }
.col-bot a:hover{ color:var(--text); }

/* Mobile baseline */
@media (max-width: 1100px){
  .mast-top{ grid-template-columns:auto 1fr; gap:14px; }
  .mast-top .dateline{ grid-column:1/-1; order:3; padding-top:8px; border-top:1px solid var(--hairline-soft); margin-top:6px; }
  .sec-head{ grid-template-columns:1fr; gap:24px; }
  .col-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px){
  /* 1fr auto auto: mast-left | mast-right | mast-burger — keeps burger on row 1 */
  .mast-top{ padding:12px 20px 10px; grid-template-columns:1fr auto auto; gap:8px; align-items:center; }
  .wordmark{ font-size:24px; }
  section{ padding:44px 20px; }
  .col-top{ grid-template-columns:1fr 1fr; gap:20px; }
  .col-brand{ grid-column:1/-1; }

  .mast-burger{ display:flex; }
  .mast-left{ flex:1; }
  .mast-nav{
    display:none;
    position:absolute;
    left:0; right:0;
    top:100%;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    border-bottom:3px double var(--hairline);
    flex-direction:column;
    gap:0;
    padding:8px 20px 16px;
    z-index:60;
  }
  .mast-nav a{
    padding:14px 0;
    font-family:var(--serif);
    font-size:20px;
    font-variation-settings:"opsz" 20;
    border-bottom:1px solid var(--hairline-soft);
  }
  .mast-nav a:last-child{ border-bottom:none; }
  .mast-nav a.on{ color:var(--accent); border-left:none; border-bottom-color:var(--hairline-soft); }
  #mast-toggle:checked ~ .masthead .mast-nav,
  .masthead:has(#mast-toggle:checked) .mast-nav{ display:flex; }
  .masthead{ position:relative; }
  .dateline{ display:none !important; }
  .mast-right a:not(.btn){ font-size:12px; color:var(--text-soft); white-space:nowrap; }
  .mast-right .lang-pick{ display:none; }
}
@media (max-width: 1100px) and (min-width: 681px){
  .mast-burger{ display:none; }
}

/* ── Appearance opsz — variable optical size ── */
html[data-opsz="off"] .wordmark,
html[data-opsz="off"] h1,
html[data-opsz="off"] h2,
html[data-opsz="off"] h3,
html[data-opsz="off"] h4 {
  font-variation-settings: 'opsz' 16 !important;
}

/* ── Appearance density — applies site-wide ── */
html[data-density="compact"] { --body-size:13.5px; --body-lh:1.6; --section-pad:48px; }
html[data-density="cozy"]    { --body-size:15px;   --body-lh:1.72; --section-pad:64px; }
html[data-density="airy"]    { --body-size:17px;   --body-lh:1.85; --section-pad:80px; }
html[data-density="compact"] body, html[data-density="compact"] p { font-size:var(--body-size); line-height:var(--body-lh); }
html[data-density="airy"]    body, html[data-density="airy"]    p { font-size:var(--body-size); line-height:var(--body-lh); }

/* ── Appearance heading size — applies site-wide ── */
html[data-size="sm"] h1 { font-size:clamp(32px,4vw,52px) !important; }
html[data-size="sm"] h2 { font-size:clamp(20px,2.8vw,32px) !important; }
html[data-size="lg"] h1 { font-size:clamp(52px,7vw,108px) !important; }
html[data-size="lg"] h2 { font-size:clamp(28px,4vw,52px) !important; }