/* ==========================================================================
   panels.css — new panel-based content structure for panels.html
   Shell (loader, grain, cursor, top/bottom bar, menu, hero) stays in
   panels.html's inline <style> + style.css. This file ONLY styles the
   new .panel-stack, its panels, the Floema-style stack effect, and the
   adaptive bottom bar — so it can never collide with the shell.
   ========================================================================== */

/* --------------------------------------------------------------------------
   STACK / SLIDE-OVER (Floema-style)
   body has `overflow-x:hidden` in style.css, which forces overflow-y to auto
   and breaks position:sticky. `overflow-x:clip` clips horizontally WITHOUT
   turning body into a scroll container, so sticky works again. Scoped here,
   so it only affects panels.html.
   -------------------------------------------------------------------------- */
/* Self-hosted Roboto (latin subset) — replaces the Google Fonts CDN <link> that
   used to sit in panels.html's <head>, so visitors' IPs are never sent to Google.
   Roboto v51 serves one variable file across the 300–400 weight range. Latin
   subset covers Danish characters (æ ø å live in U+00E0-00FF). */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('assets/fonts/roboto/roboto-latin.woff2') format('woff2');
}

html, body { overflow-x: clip; }

/* SCROLL / SNAP — native CSS scroll-snap, no Lenis, no JS snap engine.
   The browser's compositor does the snapping, which is the only thing that
   reliably tames a free-spin mouse wheel (MX Master MagSpeed) as well as
   trackpad + touch. `scroll-snap-stop:always` forces exactly one panel per
   gesture → never scroll past, never "1/3 of the next panel". Neutralise the
   live onepager's `scroll-behavior:smooth` (style.css) so it can't fight the
   native snap glide. Scoped to panels.html only. */
html { scroll-behavior: auto; scroll-snap-type: y mandatory; }
.section-hero, .panel, .p-foot {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Layout isolation: keeps each panel's layout self-contained so a moving
   panel doesn't force layout work elsewhere in the stack. (No `paint` here —
   that would clip the leading-edge box-shadow that sells the slide-over.) */
.panel { contain: layout; }

/* Hero = the back panel: it pins and stays put while panels slide over it. */
.section-hero {
  position: sticky;
  top: 0;
  z-index: 1;            /* below the panels so they cover it */
}

.panel-stack { position: relative; }

/* Each panel pins at the top; later panels (further down the DOM) paint over
   earlier ones as they scroll up → the stack/slide-over effect. */
.panel {
  position: sticky;
  top: 0;
  z-index: 2;            /* above the hero */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 6vw 72px;
  /* Leading-edge lift: a 1px light hairline so the slide-over reads even on
     dark-over-dark transitions (zenit→capabilities, cover→facts), where a
     black shadow is invisible. On the light panels the hairline is imperceptible
     and colour contrast already sells the slide. */
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .10),
              0 -20px 44px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   PANEL 2 — WELCOME (light)
   [ hello! and ]   [ portrait ]   [ welcome ]
   -------------------------------------------------------------------------- */
.panel--welcome {
  background: #f5f1ea;
  color: #0c0c0c;
}
.welcome-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  max-width: 1400px;
}
.welcome-word {
  font-family: 'Nohemi', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #0c0c0c;
}
.welcome-word--l { text-align: right; }
.welcome-word--r { text-align: left; }
.welcome-media {
  width: clamp(280px, 34vw, 520px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.welcome-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .welcome-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 22px;
  }
  .welcome-word--l,
  .welcome-word--r { text-align: center; }
}

/* --------------------------------------------------------------------------
   PANEL 3 — MANIFESTO (light / green)
   Left-aligned, width-capped column with a clear label → lead → body → punch
   hierarchy, so it reads as a deliberate statement rather than a wall.
   -------------------------------------------------------------------------- */
.panel--manifesto {
  background: #00e676;
  color: #0c0c0c;
  justify-content: flex-start;   /* anchor the column left, not dead-centre */
}
.manifesto {
  width: 100%;
  max-width: 640px;
  margin-left: clamp(0px, 8vw, 160px);
}
.manifesto-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Nohemi', sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(12, 12, 12, .62);
  margin-bottom: 34px;
}
.manifesto-label .m-no {
  font-variant-numeric: tabular-nums;
  color: #0c0c0c;
}
.manifesto-label .m-no::after { content: " —"; }

.manifesto-body {
  font-family: 'Nohemi', sans-serif;
  color: #0c0c0c;
}
.manifesto-body p { margin: 0 0 1.15em; }
.manifesto-body p:last-child { margin-bottom: 0; }

.m-lead {
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin-bottom: 1.4em !important;
}
.manifesto-body p:not(.m-lead):not(.m-punch) {
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(12, 12, 12, .82);
}
.m-punch {
  font-size: clamp(23px, 2.9vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-top: 1.5em !important;
}

@media (max-width: 768px) {
  .manifesto { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   PANEL 4 — COVER (dark stage)
   The exported magazine cover sits as a physical object on a dark stage:
   height-capped so it clears both bars, with a soft drop shadow and a
   subtle lift on hover so it feels tactile.
   -------------------------------------------------------------------------- */
.panel--cover { background: #0c0c0c; }
.cover { margin: 0; line-height: 0; }
.cover img {
  display: block;
  height: auto;
  width: auto;
  max-height: calc(100vh - 200px);   /* clears the top + bottom bars */
  max-width: min(560px, 88vw);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .55s ease;
}
.cover img:hover {
  transform: translateY(-8px);
  box-shadow: 0 46px 110px rgba(0, 0, 0, .62);
}

/* --------------------------------------------------------------------------
   PANEL 5 — PERSONAL / FACTS (dark)
   Two-column key/value rows with a focus-dim interaction: hovering a row
   lights it up and dims the rest, so the eye lands on one fact at a time.
   -------------------------------------------------------------------------- */
.panel--facts { background: #0c0c0c; }
.facts { width: 100%; max-width: 1280px; }

.fact-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
  padding: clamp(20px, 3.2vh, 38px) 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
  transition: opacity .35s ease;
}
.fact-row:first-child { border-top: 0; }

.fact-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nohemi', sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, .42);
  transition: color .35s ease;
}
.fact-value {
  font-family: 'Nohemi', sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 1.75vw, 26px);
  line-height: 1.34;
  color: rgba(240, 240, 240, .5);
  transition: color .35s ease;
}

/* focus-dim: dim the whole group on hover, then lift the hovered row */
.facts:hover .fact-row { opacity: .4; }
.facts .fact-row:hover { opacity: 1; }
.facts .fact-row:hover .fact-value { color: #f0f0f0; }
.facts .fact-row:hover .fact-label { color: rgba(240, 240, 240, .7); }

/* "Now" chip in the current-obsession label */
@media (max-width: 768px) {
  .fact-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   PANEL 6 — CREATIVE CORE IN PICTURES (light)
   Big bold statement type, centred. overflow:hidden clips the native image
   trail so stamped photos never spill past the panel edges.
   -------------------------------------------------------------------------- */
.panel--pictures {
  background: #f5f1ea;
  color: #0c0c0c;
  overflow: hidden;
}
.pictures-title {
  font-family: 'Nohemi', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 8vw, 120px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0c0c0c;
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 2;                 /* keep type above the stamped trail */
  pointer-events: none;       /* let the mouse move freely to stamp */
}

/* --------------------------------------------------------------------------
   PANEL 7 — HOW COLLEAGUES DESCRIBE ME (dark)
   Keeps the familiar pill language but earns the full-screen height with a
   numbered label, a big statement heading and two captioned groups (the
   strengths + the honest bits). Focus-dim on hover mirrors the facts panel.
   -------------------------------------------------------------------------- */
.panel--colleagues { background: #0c0c0c; justify-content: flex-start; }
.colls {
  width: 100%;
  max-width: 1280px;
  margin-left: clamp(0px, 4vw, 80px);
}

.colls-title {
  font-family: 'Nohemi', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #f0f0f0;
  margin: 0 0 clamp(34px, 5vh, 56px);
}

.colls-group { margin-top: clamp(22px, 3.4vh, 40px); }
.colls-group:first-of-type { margin-top: 0; }
.colls-cap {
  display: block;
  font-family: 'Nohemi', sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, .34);
  margin-bottom: 16px;
}
.colls-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.coll-tag {
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(14px, 1.15vw, 17px);
  letter-spacing: 0.01em;
  color: rgba(240, 240, 240, .78);
  border: 0.5px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  padding: 13px 26px;
  transition: border-color .3s ease, color .3s ease, background .3s ease, opacity .3s ease;
}
.coll-tag--soft { color: rgba(240, 240, 240, .5); }

/* focus-dim: hovering any tag dims the whole set, then lights the hovered one */
.colls:hover .coll-tag { opacity: .38; }
.colls .coll-tag:hover {
  opacity: 1;
  border-color: var(--p-accent, #4ADE80);
  color: #0c0c0c;
  background: var(--p-accent, #4ADE80);
}

@media (max-width: 768px) {
  .colls { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   PANEL 8 — FEATURED WORK / NIKO BLONDE COVER (green stage)
   Square cover sits as an object on the green stage with a soft shadow and a
   subtle hover lift (echoing the cover panel), a small caption, and a pill
   CTA that opens the track. Same green as the manifesto for continuity.
   -------------------------------------------------------------------------- */
.panel--work {
  background: #00e676;
  /* Center the image+caption in the space ABOVE the CTA zone. The "watch work"
     CTA is absolutely anchored a constant distance above the fixed bottom bar
     (see .work-cta) so it lands at the exact same viewport Y as .zenit-cta at
     every screen height — no dependence on image/column height. */
  align-items: center;
  padding-bottom: 160px;
}
.work {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3.4vh, 40px);
}
.work-cover { margin: 0; }
.work-cover img {
  display: block;
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  /* Keep the whole panel within 100vh so it pins/snaps cleanly and the
     absolutely-anchored .work-cta lands on the same viewport line as
     .zenit-cta. Budget: 96 top pad + 160 bottom pad + gap + caption ≈ 290px. */
  max-height: calc(100vh - 300px);
  max-width: min(600px, 84vw);
  object-fit: cover;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.work-cap {
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.01em;
  color: rgba(12, 12, 12, .8);
  text-align: center;
}
.work-cta {
  /* Anchored to the panel (base .panel is position:sticky = containing block).
     bottom = 52px bottom bar + 56px gap → identical to .zenit-cta. */
  position: absolute;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%);
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(11px, .95vw, 13px);
  letter-spacing: 0.01em;
  color: #0c0c0c;
  text-decoration: none;
  border: 1px solid rgba(12, 12, 12, .55);
  border-radius: 5px;
  padding: 9px 20px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.work-cta:hover {
  background: #0c0c0c;
  color: #00e676;
  border-color: #0c0c0c;
}

/* --------------------------------------------------------------------------
   PANEL 9 — FEATURED WORK / ZENIT (full-bleed still)
   The ZENIT title is baked into the still, so the panel is just the full-bleed
   cinematic frame with a light-outline CTA anchored near the bottom (clearing
   the bottom bar). A faint bottom gradient keeps the pill legible on the road.
   -------------------------------------------------------------------------- */
.panel--zenit {
  /* NB: no `position: relative` here — the base .panel is `position: sticky`,
     which already establishes the containing block for ::after. Overriding it
     to relative removed zenit from the sticky stack and broke the slide-over. */
  background: #0c0c0c url('assets/carousel/col-3/zenit_tn.jpg') center / cover no-repeat;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(84px, 12vh, 120px);
}
.panel--zenit::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
}
.zenit-cta {
  /* Same constant anchor as .work-cta so both land at the identical viewport Y.
     Panel base is position:sticky, which is the containing block for absolute. */
  position: absolute;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%);
  z-index: 1;
  font-family: 'Nohemi', sans-serif;
  font-size: clamp(11px, .95vw, 13px);
  letter-spacing: 0.01em;
  color: #f0f0f0;
  text-decoration: none;
  border: 1px solid rgba(240, 240, 240, .55);
  border-radius: 5px;
  padding: 9px 20px;
  background: rgba(12, 12, 12, .25);
  backdrop-filter: blur(2px);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.zenit-cta:hover {
  background: #f0f0f0;
  color: #0c0c0c;
  border-color: #f0f0f0;
}

/* --------------------------------------------------------------------------
   PANEL 10 — CAPABILITIES (dark)
   Reuses the existing .capability-* markup + styles from style.css (so the look
   is 1:1 with the current site: big names, right-aligned items, tooltips, and
   the row focus-dim). Here we only fit it into one 100vh panel by dropping the
   old bottom margin and compressing the vertical rhythm with vh-based padding.
   -------------------------------------------------------------------------- */
.panel--capabilities {
  background: #0c0c0c;
  /* Tighter than the base .panel padding so the five rows fit inside one
     viewport — a panel taller than 100vh can't pin/snap, and the content was
     sliding under the fixed bottom bar. Padding clears the ~52px top/bottom
     bars with a small gap; vh terms keep it airy on tall screens. */
  padding-top: clamp(64px, 8vh, 84px);
  padding-bottom: clamp(74px, 9.5vh, 98px);
}
.caps-panel {
  width: 100%;
  max-width: 1280px;
  margin: 0;                 /* kill .about-capabilities' 100px bottom margin */
}
.caps-panel .capabilities-heading {
  margin-bottom: clamp(10px, 1.8vh, 22px);
}
/* Compress each row so all five clear the top + bottom bars within 100vh. */
.caps-panel .capability-row {
  padding: clamp(5px, 0.85vh, 13px) 0;
}
.caps-panel .capability-items { gap: 8px; }
/* Slightly smaller names on this panel only, to keep the two-line ones in bounds. */
.caps-panel .capability-name {
  font-size: clamp(24px, 3.2vw, 46px);
}

/* --------------------------------------------------------------------------
   PANEL 11 — TOOLS (cream)
   Reuses the .about-tools / .tool-tag markup from style.css, but flips the chip
   palette for a light stage: dark hairline + dark text on a soft white chip so
   the colourful favicons read cleanly. Cream (not green) keeps accent scarce
   and breaks the zenit→capabilities→tools dark run so the slide-over lands.
   -------------------------------------------------------------------------- */
.panel--tools {
  background: #f5f1ea;
  /* Tighter padding than base .panel: 37 chips is a lot, and a panel taller
     than the viewport can't pin (kills the slide-over). */
  padding-top: clamp(70px, 9vh, 94px);
  padding-bottom: clamp(50px, 7vh, 70px);
}
.tools-panel {
  width: 100%;
  max-width: 1280px;
  margin: 0;                 /* kill .about-tools' 80px bottom margin */
}
.tools-panel > .about-section-label {
  color: rgba(12, 12, 12, .55);
  margin-bottom: clamp(10px, 1.8vh, 24px);
}
.tools-panel .sec-no::after { color: rgba(12, 12, 12, .4); }
.tools-panel .tools-category { margin-bottom: clamp(8px, 1.4vh, 24px); }
.tools-panel .tools-category:last-child { margin-bottom: 0; }
.tools-panel .tools-category-name {
  color: rgba(12, 12, 12, .5);
  margin-bottom: clamp(5px, 0.8vh, 11px);
}
.tools-panel .tools-tags { gap: 7px; }
.tools-panel .tool-tag { padding: 5px 11px 5px 7px; }
.tools-panel .tool-count { color: rgba(12, 12, 12, .32); }
.tools-panel .tool-tag {
  border-color: rgba(12, 12, 12, .18);
  color: rgba(12, 12, 12, .82);
  background: rgba(255, 255, 255, .4);
}
.tools-panel .tool-tag:hover {
  border-color: #0c0c0c;
  color: #0c0c0c;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   PANEL 12 — FEATURED WORK / FACTOR × POSTDANMARK (full-bleed still)
   Same full-bleed treatment as zenit, caption anchored bottom-right. Preceded
   by the cream tools panel, so cream → dark gives a strong slide-over. No
   position:relative here (keep the base sticky, or the stack breaks like zenit).
   -------------------------------------------------------------------------- */
.panel--factor {
  background: #0c0c0c url('assets/carousel/col-1/DSCF4697.JPG') center / cover no-repeat;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 96px 6vw clamp(80px, 11vh, 116px);
}
.factor-cap {
  text-align: right;
  font-family: 'Nohemi', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.1;
  color: #f0f0f0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.factor-cap span {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(240, 240, 240, .62);
}

/* ==========================================================================
   ADAPTIVE BOTTOM BAR (top bar is left untouched)
   panels.js watches which panel sits under the bottom bar and toggles
   .chrome-bot-light. A LIGHT panel behind the bar → flip its content DARK.
   ========================================================================== */
.p-bottom::before { transition: background .35s ease; }

body.chrome-bot-light .p-bottom::before { background: rgba(0, 0, 0, .28); }
body.chrome-bot-light .p-bottom .bb-item { color: rgba(12, 12, 12, .72); }
body.chrome-bot-light .p-bottom .bb-clock { color: #0c0c0c; }
body.chrome-bot-light .p-bottom a.bb-item:hover { color: #0c0c0c; }
body.chrome-bot-light .bb-cta {
  color: #0c0c0c;
  border-color: rgba(0, 0, 0, .35);
}
body.chrome-bot-light .bb-cta:hover {
  background: #0c0c0c;
  color: #f5f1ea;
  border-color: #0c0c0c;
}
/* green pulse dot stays green — it reads on both themes */

/* ==========================================================================
   GRAIN — panels.html override (protects shared style.css / live onepager)
   The #noiseCanvas pixels are fully opaque, so visibility is 100% controlled
   by this opacity. Scoped here so the live site keeps its lighter 0.05.
   ========================================================================== */
.noise-overlay { opacity: 0.07; }

/* ==========================================================================
   CREATIVE CORE — mobile "photobook coming soon" teaser (≤768px)
   The desktop hover trail can't fire on touch, so on mobile the panel shows just
   the "Photobook" title and a "coming soon" CTA styled like the "watch work"
   pill (.work-cta). The section title + trail are hidden here. Hidden on desktop.
   ========================================================================== */
.pictures-soon { display: none; }

@media (max-width: 768px) {
  .panel--pictures {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .pictures-title { display: none; }
  .pictures-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 4vh, 34px);
  }
  .pictures-soon-word {
    font-family: 'Nohemi', sans-serif;
    font-weight: 700;
    font-size: clamp(52px, 15vw, 88px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: #0c0c0c;
  }
  /* Same look as .work-cta: dark outline pill on the cream stage. */
  .pictures-soon-cta {
    font-family: 'Nohemi', sans-serif;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: #0c0c0c;
    border: 1px solid rgba(12, 12, 12, .55);
    border-radius: 5px;
    padding: 9px 20px;
  }
}

/* ==========================================================================
   MOBILE FIT (≤768px) — keep content-heavy panels within 100vh so the
   sticky stack + snap still works (a panel taller than the viewport can't pin,
   and its content slides under the fixed bars). Compress the capabilities item
   lists into wrapped rows and tighten the facts rhythm.
   ========================================================================== */
@media (max-width: 768px) {
  /* Capabilities: name over a WRAPPED (not stacked) item list → much shorter. */
  .caps-panel .capability-row { padding: clamp(6px, 1.1vh, 12px) 0; gap: 6px; }
  .caps-panel .capability-name { font-size: clamp(21px, 6.2vw, 30px); }
  .caps-panel .capability-items {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
    padding-top: 2px;
  }
  .caps-panel .capability-item { font-size: 12.5px; }

  /* Facts: tighter rows + smaller value type so all five clear the bars. */
  .panel--facts .fact-row { padding: clamp(9px, 1.5vh, 16px) 0; gap: 3px; }
  .panel--facts .fact-value { font-size: 15px; line-height: 1.28; }
  .panel--facts .fact-label { font-size: 10px; }
}

/* ==========================================================================
   PRIVACY POLICY — footer link + modal
   Small quiet link at the bottom of the footer panel opens a scrollable modal
   with the privacy policy. Self-contained (own scrim), so it doesn't touch the
   menu/dropdown overlay system.
   ========================================================================== */
.p-foot-legal {
  position: absolute;
  left: 50%;
  bottom: clamp(76px, 12vh, 104px);
  transform: translateX(-50%);
  font-family: 'Nohemi', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(240, 240, 240, .45);
  background: none;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s ease;
}
.p-foot-legal:hover { color: var(--p-accent, #4ADE80); }

.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;               /* above chrome + grain */
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vh, 60px) clamp(12px, 5vw, 40px);
}
.privacy-modal.is-open { display: flex; }
.privacy-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, .72);
  backdrop-filter: blur(4px);
}
.privacy-card {
  position: relative;
  width: min(680px, 100%);
  max-height: 100%;
  background: #f5f1ea;
  color: #0c0c0c;
  border-radius: 12px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.privacy-x {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
  color: #0c0c0c;
  background: rgba(12, 12, 12, .06);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s ease;
}
.privacy-x:hover { background: rgba(12, 12, 12, .14); }
.privacy-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(28px, 5vw, 48px);
}
.privacy-scroll h2 {
  font-family: 'Nohemi', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.privacy-updated {
  font-family: 'Nohemi', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(12, 12, 12, .5);
  margin: 0 0 22px;
}
.privacy-scroll h3 {
  font-family: 'Nohemi', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 24px 0 8px;
}
.privacy-scroll p {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(12, 12, 12, .82);
  margin: 0 0 8px;
}
.privacy-scroll a {
  color: #0c0c0c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.privacy-lock { overflow: hidden; }