:root {
  --bg: #f3efe7;
  --fg: #141414;
  --muted: rgba(20, 20, 20, 0.66);
  --muted-dim: rgba(20, 20, 20, 0.45);
  --hairline: rgba(20, 20, 20, 0.18);
  --up: #8c4a1d;
  --down: #3f6a2a;
  --pad-x: 4vw;
  --pad-y: 3.5vh;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: "General Sans", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-feature-settings: "ss01", "ss02", "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Live dashboard locks scroll (it's the wall display). Sub-pages scroll. */
html, body { height: 100%; }
body { overflow: hidden; }
body.page-timeline,
body.page-drinks,
body.page-metode {
  height: auto;
  min-height: 100%;
  overflow: visible;
}
html:has(body.page-timeline),
html:has(body.page-drinks),
html:has(body.page-metode) {
  height: auto;
  overflow: auto;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  z-index: 10;
}

/* Single hairline under the whole top chrome strip (brand + nav + chips) */
body::after {
  content: "";
  position: fixed;
  top: 5.4vh;
  left: 0; right: 0;
  height: 1px;
  background: var(--hairline);
  z-index: 7;
  pointer-events: none;
}

/* ────────────────── layout ────────────────── */
.landscape {
  height: 100vh;
  padding: 9vh var(--pad-x) 6vh;
  display: grid;
  grid-template-columns: 1fr 1px 1.15fr;
  gap: 5vw;
  align-items: stretch;
}
.divider { background: var(--hairline); }
.pane { display: flex; flex-direction: column; gap: 1.4vh; min-width: 0; }

.left { justify-content: space-between; }
.left-top, .left-bottom { display: flex; flex-direction: column; gap: 0.8vh; }
.left-bottom {
  padding-top: 3vh;
  gap: 1.6vh;
}
.month-header {
  font-size: 1.35vh;
  font-weight: 500;
  letter-spacing: 0.2em;
  padding-bottom: 1.2vh;
  border-bottom: 1px solid var(--hairline);
}
.month-stats { display: flex; gap: 4.5vw; margin-top: 1.4vh; }
.month-stats > div { display: flex; flex-direction: column; gap: 0.9vh; }
.month-stats .n {
  font-size: 5.6vh;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--fg);
}

/* ────────────────── labels ────────────────── */
.label {
  font-size: 1.7vh;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ────────────────── left pane ────────────────── */
.left .hero {
  font-size: clamp(72px, 18vh, 220px);
  font-weight: 200;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--fg);
  margin: 1.2vh 0 0.4vh;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01";
  white-space: nowrap;
}
.left .sub {
  font-size: 2.6vh;
  color: var(--fg);
  letter-spacing: 0.01em;
  font-weight: 300;
}
.left .sub-faint {
  font-size: 2vh;
  color: var(--muted);
  letter-spacing: 0.01em;
  font-weight: 300;
}

/* ────────────────── right pane ────────────────── */
.right .drink-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.2vw;
  margin-top: 0.6vh;
}
.right .drink-name {
  font-size: clamp(36px, 6vh, 80px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
}
.right .drink-floor {
  font-size: 1.7vh;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.right .drink-floor:empty { display: none; }
.right .composition {
  font-size: 2.3vh;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 0.6vh;
  font-weight: 300;
}
.right .brew-co2 {
  margin-top: 2vh;
  font-size: clamp(80px, 15vh, 200px);
  font-weight: 200;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--fg);
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01";
}
.right .delta-line {
  display: flex; align-items: baseline; gap: 1.2vw;
  margin-top: 0.8vh;
  padding-bottom: 0;
}
.right .delta-inline {
  font-size: 4vh;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.right .delta-inline.up   { color: var(--up); }
.right .delta-inline.down { color: var(--down); }
.right .vs {
  font-size: 1.8vh;
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}

/* "CO₂" tail on big numbers — smaller, muted, lifted to the cap-height baseline */
.hero .unit-tail,
.brew-co2 .unit-tail {
  color: var(--muted);
  font-weight: 300;
  font-size: 0.42em;
  letter-spacing: 0.04em;
  margin-left: 0.18em;
  vertical-align: 0.65em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Generic tail used in small contexts (previous-list rows) */
.unit-tail {
  color: var(--muted);
  font-weight: 300;
  margin-left: 0.15em;
  font-size: 0.85em;
}
.hero, .brew-co2 { white-space: nowrap; }

/* ────────────────── previous brews list ────────────────── */
.previous-brews {
  margin-top: auto;
  padding-top: 3vh;
  border-top: 1px solid var(--hairline);
}
.previous-brews .label { margin-bottom: 1vh; }
.previous-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 1.1vh;
}
.previous-list li {
  display: grid;
  grid-template-columns: 8vw 8vw 1fr auto;
  align-items: baseline;
  gap: 1.5vw;
  font-size: 2.1vh;
  color: var(--fg);
  font-weight: 300;
}
.previous-list .pb-floor {
  color: var(--muted);
  font-size: 1.55vh;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.previous-list .pb-time {
  color: var(--muted);
  font-size: 1.7vh;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.previous-list .pb-drink {
  letter-spacing: -0.01em;
}
.previous-list .pb-co2 {
  text-align: right;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.previous-list .pb-co2 .unit-tail { font-weight: 300; }
.previous-list li.empty {
  color: var(--muted-dim);
  font-style: italic;
  font-size: 1.7vh;
  grid-template-columns: 1fr;
}

/* ────────────────── footnote (bottom-left) ────────────────── */
.footnote {
  position: fixed;
  bottom: 1.6vh; left: 1.4vw;
  font-size: 1.3vh;
  letter-spacing: 0.05em;
  color: var(--muted-dim);
  z-index: 7;
  padding: 0.65vh 1.1vw;
  max-width: 60vw;
}

/* ────────────────── corner brand (top-left) ────────────────── */
.brand {
  position: fixed;
  top: 1.6vh; left: 1.4vw;
  font-size: 1.35vh;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  z-index: 8;
  padding: 0.75vh 1.1vw;
}

/* ────────────────── top-center navigation ────────────────── */
.nav {
  position: fixed;
  top: 1.6vh; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.4vw;
  z-index: 8;
  font-size: 1.35vh;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.75vh 1.1vw;
  transition: color 200ms;
}
.nav a.active { color: var(--fg); }
.nav a:hover { color: var(--fg); }

/* ────────────────── corner status (live + clock) — floating in top-right ────────────────── */
.status {
  position: fixed;
  top: 1.6vh; right: 1.4vw;
  display: flex; gap: 0.5vw;
  z-index: 8;
}
.status .chip {
  padding: 0.75vh 1.1vw;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  letter-spacing: 0.2em;
  font-size: 1.35vh;
  font-weight: 500;
  text-transform: uppercase;
  background: rgba(243, 239, 231, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(20, 20, 20, 0.06);
}
.status .chip.alt {
  color: var(--fg);
  border-color: rgba(20, 20, 20, 0.55);
}

/* ────────────────── stale badge ────────────────── */
.stale-badge {
  position: fixed;
  bottom: 3vh; left: 50%;
  transform: translateX(-50%);
  padding: 1.1vh 1.8vw;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 1.55vh;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--up);
  background: rgba(243, 239, 231, 0.85);
  backdrop-filter: blur(8px);
  z-index: 6;
  font-weight: 500;
}

/* ────────────────── entry animation ────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(0.6vh); }
  to   { opacity: 1; transform: translateY(0); }
}
.landscape > *,
.status {
  animation: rise 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.left     { animation-delay: 80ms; }
.divider  { animation-delay: 180ms; }
.right    { animation-delay: 240ms; }
.status   { animation-delay: 500ms; }

/* ────────────────── responsive: portrait phones & tablets ────────────────── */
@media (max-width: 820px), (orientation: portrait) {
  /* All chrome and content live on the same 5vw side gutter, so brand,
     header labels, hero numbers, and footnote line up vertically. */
  :root { --pad-x: 5vw; }

  html, body { overflow-x: hidden; overflow-y: auto; }
  .landscape {
    height: auto;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1fr); /* allow shrink to prevent overflow */
    gap: 4vh;
    padding: 9vh var(--pad-x) 4vh;
  }
  .divider { display: none; }
  .pane { min-width: 0; }
  .left, .right { min-width: 0; }
  .right {
    border-top: 1px solid var(--hairline);
    padding-top: 4vh;
  }

  /* Heroes: tighter clamp + tabular-fit guard so commas, "kg" and the CO₂
     tail all stay on one line on a 360 px phone. */
  .left .hero,
  .right .brew-co2 {
    font-size: clamp(40px, 12vw, 96px);
    line-height: 0.95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
  .hero .unit-tail,
  .brew-co2 .unit-tail {
    font-size: 0.38em;
    vertical-align: 0.6em;
  }

  /* Section heading hierarchy: month name slightly larger and stronger than
     the field labels below it (ANTAL KOPPER / CO₂ UDLEDT). */
  .label { font-size: clamp(10px, 2.6vw, 13px); }
  .month-header {
    font-size: clamp(13px, 3.4vw, 16px);
    letter-spacing: 0.24em;
    color: var(--fg);
    padding-bottom: 1.2vh;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 1.4vh;
  }
  .left-bottom { gap: 1.2vh; }
  .month-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
  }
  .month-stats .n { font-size: clamp(24px, 7vw, 40px); }

  .left .sub { font-size: clamp(14px, 3.8vw, 18px); }
  .right .drink-line { gap: 2.5vw; }
  .right .drink-name { font-size: clamp(26px, 7vw, 48px); }
  .right .delta-inline { font-size: clamp(28px, 7.5vw, 48px); }
  .right .composition { font-size: clamp(13px, 3.4vw, 16px); }
  .right .vs { font-size: clamp(10px, 2.4vw, 13px); }
  .right .drink-floor { font-size: clamp(10px, 2.4vw, 13px); }

  /* Previous list collapses to floor + name + co2 columns on narrow screens */
  .previous-list li {
    grid-template-columns: auto 1fr auto;
    gap: 3vw;
    font-size: clamp(13px, 3.4vw, 16px);
  }
  .previous-list .pb-floor { font-size: clamp(10px, 2.4vw, 12px); }
  .previous-list .pb-time { display: none; }

  /* Brand, nav, status and footnote all share the 5vw gutter for alignment. */
  .brand {
    top: 1.6vh; left: var(--pad-x);
    font-size: clamp(10px, 2.6vw, 13px);
    padding: 0;
  }
  .status {
    top: 1.6vh; right: var(--pad-x);
    gap: 1.5vw;
  }
  .status .chip {
    padding: 0.5vh 2vw;
    font-size: clamp(10px, 2.4vw, 12px);
  }
  /* On portrait the nav sits as its own strip below brand + status, so it
     doesn't collide with either. */
  .nav {
    top: auto;
    bottom: auto;
    position: static;
    transform: none;
    margin: 5vh var(--pad-x) -2vh;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 3vw;
    font-size: clamp(10px, 2.6vw, 13px);
  }
  .nav a { padding: 0.4vh 0; }

  /* Footnote becomes part of the flow at the bottom of the document */
  .footnote {
    position: static;
    margin-top: 4vh;
    padding: 0 var(--pad-x) 3vh;
    max-width: none;
    font-size: clamp(11px, 2.8vw, 13px);
    line-height: 1.5;
  }
}

/* ────────────────── sub-pages: shared frame ────────────────── */
.page {
  min-height: 100vh;
  padding: 14vh 6vw 12vh;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.page-head {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3vh;
  margin-bottom: 4vh;
}
.page-title {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0.6vh 0 1.4vh;
}
.page-stats {
  font-size: 1.9vh;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.01em;
}
.page-stats .stat-line { display: inline-block; }

/* ────────────────── timeline chart ────────────────── */
.chart-section { display: flex; flex-direction: column; gap: 2vh; flex: 1; }
.chart-toggle {
  display: flex; gap: 0.4vw;
  font-size: 1.35vh;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.chart-toggle button {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0.6vh 0.4vw;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 200ms, border-color 200ms;
}
.chart-toggle button.active { color: var(--fg); border-bottom-color: var(--fg); }
.chart-toggle button:hover { color: var(--fg); }

.chart-wrap {
  position: relative;
  width: 100%;
  height: 56vh;
  min-height: 320px;
}
#chart { width: 100% !important; height: 100% !important; display: block; }

/* ────────────────── drinks list ────────────────── */
.drink-list-section { display: flex; flex-direction: column; gap: 1.2vh; }
.dl-header,
.drink-list li {
  display: grid;
  /* drink | bar | share | cups | co2 | delta */
  grid-template-columns:
    minmax(160px, 1.4fr)    /* drink name */
    minmax(120px, 1.6fr)    /* share bar */
    56px                    /* share % */
    minmax(60px, 0.7fr)     /* cups */
    minmax(110px, 0.9fr)    /* total co2 */
    minmax(90px, 0.9fr);    /* delta vs sort kaffe */
  align-items: center;
  gap: 1.4vw;
  padding: 1.3vh 0;
}
.dl-header {
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 1.4vh;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 1.4vh;
  margin-bottom: 1vh;
}
.dl-h-cups, .dl-h-co2, .dl-h-share, .dl-h-delta { text-align: right; }
.dl-h-delta { letter-spacing: 0.14em; }
.drink-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.drink-list li {
  border-bottom: 1px solid var(--hairline);
  font-size: 2.2vh;
  font-weight: 300;
}
.drink-list li.empty {
  grid-template-columns: 1fr;
  color: var(--muted-dim);
  font-style: italic;
}
.dl-drink { letter-spacing: -0.01em; }
.dl-bar {
  position: relative;
  height: 4px;
  background: var(--bar-bg);
  border-radius: 2px;
}
.dl-bar-fill {
  display: block;
  height: 100%;
  background: var(--fg);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dl-share, .dl-cups, .dl-co2, .dl-delta {
  text-align: right;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.dl-share { color: var(--muted); font-size: 1.8vh; }
.dl-co2 .unit-tail { font-size: 0.85em; color: var(--muted); }
.dl-delta { font-size: 1.9vh; color: var(--muted); }
.dl-delta.up   { color: var(--up); }
.dl-delta.down { color: var(--down); }

/* ────────────────── methodology prose ────────────────── */
.prose {
  max-width: 720px;
  font-size: clamp(15px, 2.4vh, 19px);
  line-height: 1.6;
  color: var(--fg);
}
.prose .lead {
  font-size: clamp(17px, 2.7vh, 22px);
  line-height: 1.5;
  color: var(--fg);
  margin-bottom: 3vh;
}
.prose p { margin: 1.4em 0; }
.prose h2 {
  font-size: clamp(20px, 3vh, 28px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 4vh;
  margin-bottom: 1vh;
  padding-top: 3vh;
  border-top: 1px solid var(--hairline);
}
.prose code,
.prose .formula {
  font-family: "General Sans", monospace;
  background: rgba(20,20,20,0.06);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.95em;
}
.prose .formula {
  display: block;
  padding: 1.4em;
  font-size: clamp(15px, 2.2vh, 18px);
  margin: 2vh 0;
  text-align: center;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: var(--fg); }

/* sub-page mobile tweaks */
@media (max-width: 820px), (orientation: portrait) {
  .page { padding: 14vh var(--pad-x) 4vh; }
  .page-head { padding-bottom: 2vh; margin-bottom: 3vh; }
  .dl-header { display: none; }
  .drink-list li {
    /* Two-column main row + a full-width bar row below */
    grid-template-columns: 1fr auto;
    gap: 1vh 1.5vw;
    padding: 1.8vh 0;
    font-size: clamp(15px, 4vw, 19px);
  }
  .drink-list li .dl-drink { order: 1; grid-column: 1; }
  .drink-list li .dl-co2   { order: 2; grid-column: 2; }
  .drink-list li .dl-bar   { order: 3; grid-column: 1 / -1; }
  .drink-list li .dl-cups,
  .drink-list li .dl-share,
  .drink-list li .dl-delta {
    order: 4;
    font-size: clamp(11px, 3vw, 13px);
    color: var(--muted);
  }
  .drink-list li .dl-cups   { grid-column: 1; text-align: left; }
  .drink-list li .dl-share  { grid-column: 1; text-align: left; }
  .drink-list li .dl-delta  { grid-column: 2; text-align: right; }
  .drink-list li .dl-cups::after  { content: " kopper"; color: var(--muted); font-size: 0.9em; }
  .drink-list li .dl-share::after { content: " af CO₂"; color: var(--muted); font-size: 0.9em; }
  #chart { height: 44vh; min-height: 240px; }
}