/* Jennifer Lin — Portfolio
   Palette: bone / navy / vermillion → warm wash
   Type: Brandon Grotesque (+ Condensed for tight set), Instrument Serif, JetBrains Mono
*/

:root {
  /* Jennifer's Figma palette */
  --light-gray: #F3F4F6;
  --dark-gray:  #191A1F;
  --blue:       #88B3D3;
  --med-gray:   #6B7F90;
  --elevation:  #222328;

  /* semantic, swapped by data-theme. --surface/--surface-fg now
     match --bg/--fg so every section follows the theme together
     (no inverted dark hero in light mode, and vice versa). */
  --bg:        var(--light-gray);
  --bg-2:      #FFFFFF;
  --fg:        var(--dark-gray);
  --fg-soft:   rgba(25,26,31,0.65);
  --fg-fade:   rgba(25,26,31,0.18);
  --surface:   var(--bg-2);
  --surface-fg: var(--dark-gray);
  --surface-fg-soft: rgba(25,26,31,0.72);
  --surface-fg-fade: rgba(25,26,31,0.28);
  --accent:    var(--blue);
  --muted:     var(--med-gray);

  /* pastel wash palette — based on blue */
  --wash-1: #CFE0ED; /* pale blue */
  --wash-2: #88B3D3; /* blue */
  --wash-3: #E5D4E0; /* pale lilac */
  --wash-4: #F3D8CC; /* pale peach */
  --wash-5: #D9E4D2; /* pale sage */
  --wash-6: #F5EED2; /* pale butter */

  --f-sans: "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-sans-cond: "brandon-grotesque-condensed", "brandon-grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1440px;
  --pad-x: clamp(24px, 4vw, 64px);
}

/* Dark theme */
[data-theme="dark"] {
  --bg:        var(--dark-gray);
  --bg-2:      var(--elevation);
  --fg:        var(--light-gray);
  --fg-soft:   rgba(243,244,246,0.72);
  --fg-fade:   rgba(243,244,246,0.18);
  --surface:   var(--bg-2);
  --surface-fg: var(--light-gray);
  --surface-fg-soft: rgba(243,244,246,0.72);
  --surface-fg-fade: rgba(243,244,246,0.28);
  --muted:     #8A99A8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

::selection { background: var(--blue); color: var(--dark-gray); }
::-moz-selection { background: var(--blue); color: var(--dark-gray); }

/* Nav uses mix-blend-mode: difference in light mode, so we invert the
   source color so the displayed selection still reads as --blue. */
.nav ::selection { background: #774C2C; color: var(--light-gray); }
.nav ::-moz-selection { background: #774C2C; color: var(--light-gray); }
[data-theme="dark"] .nav ::selection { background: var(--blue); color: var(--dark-gray); }
[data-theme="dark"] .nav ::-moz-selection { background: var(--blue); color: var(--dark-gray); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background 0.6s ease, color 0.6s ease;
}

em { font-style: italic; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ul { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ───────────── NAV ───────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--pad-x);
  mix-blend-mode: difference;
  color: #FFFFFF;
}
.nav a, .nav .mark, .nav .meta {
  color: inherit;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-center { display: flex; gap: 28px; }
.nav-center a { position: relative; }
.nav-center a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.nav-center a:hover::after { transform: scaleX(1); }
.nav-left .mark {
  font-family: var(--f-serif); font-size: 22px; font-style: italic; letter-spacing: -0.02em;
  text-transform: none;
}
.nav-right { text-align: right; padding-right: 52px; }

[data-theme="dark"] .nav {
  mix-blend-mode: normal;
  color: var(--light-gray);
}

/* ───────────── HERO ───────────── */
.hero {
  position: relative;
  background: var(--surface);
  color: var(--surface-fg);
  min-height: 100vh;
  padding: 80px var(--pad-x) 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(136,179,211,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(136,179,211,0.10), transparent 50%);
  pointer-events: none;
}

/* Hero variant 1: STACKED */
.hero-stacked { display: flex; flex-direction: column; justify-content: center; flex: 1; gap: clamp(24px, 5vh, 56px); }
.hero-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(243,244,246,0.2);
  padding-top: 14px;
}
.hero-meta-row .label { color: rgba(243,244,246,0.6); }

.hero-title {
  margin: 0;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-size: clamp(80px, 17vw, 280px);
  font-family: var(--f-sans); font-weight: 500; letter-spacing: -0.055em;
  transition: font-weight 0.7s cubic-bezier(.2,.7,.2,1);
  cursor: default;
}
.hero-title:hover {
  font-family: var(--f-sans); font-weight: 900; letter-spacing: -0.02em;
}
.hero-title .line { display: block; }
.hero-title .line-serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: 1em;
  line-height: 0.9;
  padding-left: 0.15em;
}
.hero-title .line-serif em { font-style: italic; }
.hero-title .ampersand { color: var(--accent); font-style: normal; font-family: var(--f-sans); font-weight: 800; }

.hero-footer-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: end;
  border-top: 1px solid rgba(243,244,246,0.2);
  padding-top: 20px;
}
.hero-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25;
  max-width: 34ch;
  margin: 0;
  letter-spacing: -0.01em;
}
.hero-sub em { color: var(--accent); font-style: italic; }
.hero-tags {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243,244,246,0.75);
}

/* Hero variant 2: EDITORIAL */
.hero-editorial {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(30px, 5vh, 60px);
}
.edit-topline {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--surface-fg-soft);
  border-bottom: 1px solid var(--surface-fg-fade);
  padding-bottom: 14px;
}
.edit-title {
  margin: 0;
  font-size: clamp(60px, 11vw, 180px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-family: var(--f-sans); font-weight: 800;
  text-transform: uppercase;
}
.edit-row { display: block; }
.edit-row .morph {
  display: inline-block;
  font-family: var(--f-sans); font-weight: 400;
  letter-spacing: -0.035em;
  transition: letter-spacing 0.2s ease;
  cursor: default;
}
.edit-row .morph:hover {
  font-weight: 900;
  letter-spacing: -0.015em;
}
.edit-row-2 { overflow: hidden; padding-bottom: 0.12em; }
.cycle-word {
  display: inline-block;
  text-transform: none;
}
.morph-word {
  display: inline-block;
  font-family: var(--f-sans); font-weight: 500; letter-spacing: -0.055em;
  transition: font-weight 0.8s cubic-bezier(.2,.7,.2,1), letter-spacing 0.8s cubic-bezier(.2,.7,.2,1);
  cursor: default;
}
.morph-word:hover {
  font-family: var(--f-sans); font-weight: 900; letter-spacing: -0.02em;
  letter-spacing: -0.02em;
}
.edit-row .serif {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-size: 1.18em;
  line-height: 1;
  cursor: default;
}
/* Headline layouts. `original` keeps the authored vw offsets; the
   other two sit on the 12-col site grid (percentages resolve to
   1/12 = 8.3333% per column of the row's containing block). */
body[data-headline-layout="original"] .edit-row-1 { padding-left: 0; }
body[data-headline-layout="original"] .edit-row-2 { padding-left: 6vw; }
body[data-headline-layout="original"] .edit-row-3 { padding-left: 2vw; }
body[data-headline-layout="original"] .edit-row-4 { padding-left: 12vw; }

/* Axis — two rhyming anchors at col 1 and col 7. Rows 1 & 3 stack
   on the left spine; rows 2 & 4 stack on the right spine. */
body[data-headline-layout="axis"] .edit-row-1 { padding-left: 0; }
body[data-headline-layout="axis"] .edit-row-2 { padding-left: 50%; }
body[data-headline-layout="axis"] .edit-row-3 { padding-left: 0; }
body[data-headline-layout="axis"] .edit-row-4 { padding-left: 50%; }

/* Crescendo — reverse staircase, 1 col per row, unwinds to flush-left
   so "PROBLEMS." lands at maximum impact. */
body[data-headline-layout="crescendo"] .edit-row-1 { padding-left: 25%; }
body[data-headline-layout="crescendo"] .edit-row-2 { padding-left: 16.6667%; }
body[data-headline-layout="crescendo"] .edit-row-3 { padding-left: 8.3333%; }
body[data-headline-layout="crescendo"] .edit-row-4 { padding-left: 0; }

/* Snap — the original rhythm, each row rounded to its nearest column
   on the 12-col grid (6vw → col 2, 2vw → col 1, 12vw → col 2). */
body[data-headline-layout="snap"] .edit-row-1 { padding-left: 0; }
body[data-headline-layout="snap"] .edit-row-2 { padding-left: 8.3333%; }
body[data-headline-layout="snap"] .edit-row-3 { padding-left: 0; }
body[data-headline-layout="snap"] .edit-row-4 { padding-left: 8.3333%; }

/* 12-col site grid overlay — spans viewport inside --pad-x gutters */
.site-grid-overlay {
  position: fixed;
  inset: 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  pointer-events: none;
  z-index: 50;
}
.site-grid-overlay > span {
  border-left: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
}
.site-grid-overlay > span:last-child {
  border-right: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Hero variant 3: MARQUEE */
.hero-marquee {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding-top: 60px;
}
.marquee-intro p {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.25;
  max-width: 22ch;
  letter-spacing: -0.01em;
  margin: 0;
}
.marquee-intro .serif em { font-style: italic; color: var(--accent); }
.marquee-track {
  display: flex;
  overflow: hidden;
  font-size: clamp(80px, 14vw, 220px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-family: var(--f-sans); font-weight: 800;
  text-transform: uppercase;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  padding: 20px 0;
}
.marquee-inner {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.marquee-item { padding-right: 0.3em; }
.marquee-item .serif { color: var(--accent); font-style: italic; text-transform: none; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.marquee-footer {
  display: flex; gap: 16px; align-items: center;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(243,244,246,0.65);
}
.marquee-footer .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* ───────────── WORK ───────────── */
.work {
  background: var(--surface);
  color: var(--surface-fg);
  position: relative;
  padding-top: 80px;
  padding-bottom: 40px;
  border-top: 1px solid color-mix(in srgb, var(--surface-fg) 18%, transparent);
}
.work-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--pad-x) 40px;
}
.work-header-left, .work-header-right { display: flex; gap: 20px; align-items: center; }
.work-header .label { color: color-mix(in srgb, currentColor 70%, transparent); }
.progress {
  width: 140px; height: 2px;
  background: color-mix(in srgb, currentColor 22%, transparent);
  position: relative; overflow: hidden;
  border-radius: 2px;
}
.progress-bar {
  position: absolute; inset: 0;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  border-radius: 2px;
}

.work-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.work-scroller::-webkit-scrollbar { display: none; }

.work-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--pad-x);
  min-width: max-content;
}

/* Pin-pan: section stays fixed while vertical scroll translates the track.
   Outer height is set from JS (viewport + horizontal overflow).
   The work-header lives inside the sticky container so the progress bar
   stays visible during the pan. */
.work[data-scroll-mode="pin-pan"] .work-pin-outer { position: relative; }
.work[data-scroll-mode="pin-pan"] .work-pin-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: 72px; /* clear the fixed .nav sitting at top of viewport */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.work[data-scroll-mode="pin-pan"] .work-pin-inner .work-header {
  flex: 0 0 auto;
}
.work[data-scroll-mode="pin-pan"] .work-pin-viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.work[data-scroll-mode="pin-pan"] .work-pin-viewport .work-track {
  will-change: transform;
}

/* Narrow viewports: disable sticky, fall back to native horizontal scroll.
   Header stacks above the scrollable viewport. */
@media (max-width: 860px) {
  .work[data-scroll-mode="pin-pan"] .work-pin-outer { height: auto !important; }
  .work[data-scroll-mode="pin-pan"] .work-pin-inner {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding-top: 0; /* desktop pin-pan needed 72px to clear the fixed nav;
                       on mobile the section flows in normal layout. */
  }
  .work[data-scroll-mode="pin-pan"] .work-pin-viewport {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .work[data-scroll-mode="pin-pan"] .work-pin-viewport::-webkit-scrollbar { display: none; }
  .work[data-scroll-mode="pin-pan"] .work-pin-viewport .work-track { transform: none !important; }
}

.company {
  flex-shrink: 0;
  min-width: 70vw;
  padding: 40px 5vw 40px 0;
  border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-left: 5vw;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.company:first-child { padding-left: 0; border-left: none; }

.company-meta {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.company-index {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--tint, var(--accent));
  letter-spacing: -0.02em;
}
.company-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
}
.company-year, .company-role {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.company-year { color: color-mix(in srgb, var(--surface-fg) 55%, transparent); }
.company-role { color: color-mix(in srgb, var(--surface-fg) 90%, transparent); }

.company-name {
  margin: 0;
  line-height: 0.85;
  font-size: clamp(100px, 14vw, 240px);
  font-family: var(--f-sans); font-weight: 400; letter-spacing: -0.055em;
  text-transform: uppercase;
  color: var(--surface-fg);
  transition: letter-spacing 0.2s ease;
  cursor: default;
}
.company-name:hover {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.project-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.project-row {
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.project-row:last-child { border-bottom: none; }
.project-link {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 24px 0;
  color: var(--surface-fg);
}
.project-link .project-name { flex: 0 0 auto; }
.project-link .project-note { flex: 1 1 auto; }

.project-name {
  font-size: clamp(36px, 4.2vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: var(--f-sans); font-weight: 500; letter-spacing: -0.055em;
  text-transform: uppercase;
}

.project-note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.3;
  max-width: 36ch;
  letter-spacing: -0.005em;
}

.work-end {
  flex-shrink: 0;
  min-width: 40vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5vw;
  border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.work-end .serif {
  font-size: clamp(80px, 10vw, 160px);
  color: rgba(243,244,246,0.25);
}

/* work-size variants */
[data-work-size="compact"] .company-name { font-size: clamp(80px, 10vw, 180px); }
[data-work-size="compact"] .project-name { font-size: clamp(28px, 3.2vw, 56px); }
[data-work-size="xl"] .company-name { font-size: clamp(140px, 18vw, 320px); }
[data-work-size="xl"] .project-name { font-size: clamp(48px, 5.5vw, 96px); }

/* ───────────── ABOUT ───────────── */
/* ───────────── ABOUT — shared ───────────── */
.about {
  position: relative;
  padding: clamp(80px, 12vh, 160px) var(--pad-x);
  overflow: hidden;
  color: #191A1F;
}
.portrait-ph-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(25,26,31,0.55);
  text-align: center;
  line-height: 1.6;
}
.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* ============================================================
   VARIANT 1 — HUG  (soft spring wash, circular portrait)
   Palette is intentionally outside the brand tokens: warm
   peach / butter / rose / sage — a gentle spring morning.
   ============================================================ */
.about-hug {
  background:
    radial-gradient(1200px 900px at 85% 10%, #FCE4D0 0%, transparent 55%),
    radial-gradient(1000px 800px at 10% 85%, #F7D8E4 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 50%, #FFF4D8 0%, transparent 60%),
    linear-gradient(180deg, #FFF7EE 0%, #F6E7D8 45%, #EED9C8 100%);
}
.hug-wash {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hug-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.65;
}
.hug-orb-peach  { width: 60vw; height: 60vw; left: -12vw; top: -12vw;  background: radial-gradient(circle, #FFD4B8 0%, transparent 70%); }
.hug-orb-butter { width: 55vw; height: 55vw; right: -10vw; top: 18vw;  background: radial-gradient(circle, #FFECC4 0%, transparent 70%); opacity: 0.75; }
.hug-orb-rose   { width: 50vw; height: 50vw; left: 20vw;  bottom: -15vw; background: radial-gradient(circle, #F6C6D4 0%, transparent 70%); opacity: 0.55; }
.hug-orb-sage   { width: 45vw; height: 45vw; right: 8vw;  bottom: 8vw;  background: radial-gradient(circle, #D8E4C4 0%, transparent 70%); opacity: 0.45; }
.hug-spot {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at var(--hug-mx, 50%) var(--hug-my, 50%),
      rgba(255, 60, 140, 1) 0%,
      rgba(255, 80, 160, 0.9) 8%,
      rgba(255, 110, 180, 0.65) 22%,
      rgba(255, 150, 200, 0.35) 38%,
      transparent 60%
    );
  mix-blend-mode: overlay;
  opacity: var(--hug-spot-op, 0);
  transition: opacity 0.6s ease;
}
.hug-spot::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    circle at var(--hug-mx, 50%) var(--hug-my, 50%),
    rgba(255, 70, 150, 0.95) 0%,
    rgba(245, 95, 170, 0.65) 12%,
    rgba(230, 120, 190, 0.35) 28%,
    transparent 48%
  );
  mix-blend-mode: overlay;
}
.hug-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.35 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.25;
  mix-blend-mode: overlay;
}
.hug-inner {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}
.hug-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  border-top: 1px solid rgba(25,26,31,0.22);
  padding-top: 14px;
  margin-bottom: 40px;
}
.hug-head .label { color: rgba(25,26,31,0.65); }
.hug-portrait { margin-top: 16px; }
.hug-circle {
  width: clamp(200px, 28vw, 340px);
  height: clamp(200px, 28vw, 340px);
  border-radius: 50%;
  background:
    repeating-linear-gradient(45deg,
      rgba(25,26,31,0.04) 0px, rgba(25,26,31,0.04) 8px,
      rgba(25,26,31,0.08) 8px, rgba(25,26,31,0.08) 16px),
    linear-gradient(140deg, rgba(255,255,255,0.5), rgba(255,255,255,0.15));
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 30px 60px -20px rgba(180, 110, 70, 0.25);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.hug-hello {
  margin: 0;
  font-family: var(--f-sans); font-weight: 500; letter-spacing: -0.045em;
  font-size: clamp(60px, 8vw, 120px);
  line-height: 0.92;
  color: #2A1E15;
}
.hug-hello .serif { color: #000; font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.hug-tagline {
  margin: 0;
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(42, 30, 21, 0.78);
  max-width: 56ch;
}
.hug-tagline em { color: #000; font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.hug-bio {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 56ch;
}
.hug-bio .hug-tagline { max-width: none; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
.hug-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.about-hug { padding-bottom: clamp(28px, 4vh, 48px); }
.about-hug > .site-footer { margin-top: 40px; }

/* ----------------------------------------------------------------
   Dark-mode adaptation for the default HUG about section.
   Inspired by Hilma af Klint: deep Klint-blue field with dusty
   rose, muted gold, and pearl-cream accents. The stellar variant
   renders `.about-hug.about-stellar`, so it inherits these rules
   automatically.
   ---------------------------------------------------------------- */
/* Warm earthy film-flare wash: peach halo at top, teal/sage ring,
   muted lavender-grey center, coral returning at the lower edges.
   Same pool mapping as light mode — only the tints change. */
[data-theme="dark"] .about-hug {
  background:
    radial-gradient(1200px 900px at 85% 10%,
      rgba(228, 170, 134, 0.7) 0%,
      rgba(228, 170, 134, 0.4) 25%,
      rgba(228, 170, 134, 0.15) 45%,
      transparent 70%),
    radial-gradient(1000px 800px at 10% 85%,
      rgba(202, 130, 110, 0.55) 0%,
      rgba(202, 130, 110, 0.3) 25%,
      rgba(202, 130, 110, 0.1) 45%,
      transparent 70%),
    radial-gradient(1400px 1000px at 50% 50%,
      rgba(164, 154, 180, 0.85) 0%,
      rgba(164, 154, 180, 0.6) 20%,
      rgba(164, 154, 180, 0.35) 40%,
      rgba(164, 154, 180, 0.15) 60%,
      rgba(164, 154, 180, 0.05) 75%,
      transparent 90%),
    linear-gradient(180deg, #B8826A 0%, #8C8AA0 48%, #A67862 100%);
}
[data-theme="dark"] .about-hug .hug-orb-peach  { left: -15vw; top: -20vw; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(92, 132, 118, 0.85) 0%, transparent 70%); opacity: 0.9; filter: blur(120px); mix-blend-mode: normal; }
[data-theme="dark"] .about-hug .hug-orb-butter { background: radial-gradient(circle, rgba(240, 204, 170, 0.45) 0%, transparent 70%); opacity: 0.45; filter: blur(120px); }
[data-theme="dark"] .about-hug .hug-orb-rose   { background: radial-gradient(circle, rgba(202, 130, 110, 0.5) 0%, transparent 70%); opacity: 0.45; filter: blur(120px); }
[data-theme="dark"] .about-hug .hug-orb-sage   { background: radial-gradient(circle, rgba(136, 160, 140, 0.55) 0%, transparent 70%); opacity: 0.55; filter: blur(120px); }
/* Gentle grain for a painterly/watercolor feel */
[data-theme="dark"] .about-hug .hug-grain { mix-blend-mode: overlay; opacity: 0.6; }

/* Burnt-orange cursor glow — Klint calligraphy hue, warm pool on blue */
[data-theme="dark"] .about-hug .hug-spot {
  background: radial-gradient(
    circle at var(--hug-mx, 50%) var(--hug-my, 50%),
    rgba(92, 132, 118, 1) 0%,
    rgba(92, 132, 118, 0.9) 8%,
    rgba(92, 132, 118, 0.65) 22%,
    rgba(92, 132, 118, 0.35) 38%,
    transparent 60%
  );
  mix-blend-mode: overlay;
  opacity: var(--hug-spot-op, 0);
  filter: none;
}
[data-theme="dark"] .about-hug .hug-spot::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    circle at var(--hug-mx, 50%) var(--hug-my, 50%),
    rgba(110, 150, 134, 0.95) 0%,
    rgba(92, 132, 118, 0.65) 12%,
    rgba(92, 132, 118, 0.35) 28%,
    transparent 48%
  );
  mix-blend-mode: overlay;
}
[data-theme="dark"] .about-hug .hug-spot::after {
  background: none;
}

/* Typography: all cream, no gold accents — serif italics share the body color */
[data-theme="dark"] .about-hug .hug-head { border-top-color: rgba(243, 244, 246, 0.22); }
[data-theme="dark"] .about-hug .hug-head .label { color: rgba(243, 244, 246, 0.65); }
[data-theme="dark"] .about-hug .hug-hello { color: var(--light-gray); }
[data-theme="dark"] .about-hug .hug-hello .serif { color: var(--light-gray); }
[data-theme="dark"] .about-hug .hug-tagline { color: rgba(243, 244, 246, 0.82); }
[data-theme="dark"] .about-hug .hug-tagline em { color: var(--light-gray); }

/* Portrait: warm rose rim on the blue field */
[data-theme="dark"] .about-hug .hug-circle {
  background:
    repeating-linear-gradient(45deg,
      rgba(243, 244, 246, 0.04) 0px, rgba(243, 244, 246, 0.04) 8px,
      rgba(243, 244, 246, 0.08) 8px, rgba(243, 244, 246, 0.08) 16px),
    linear-gradient(140deg, rgba(255, 235, 220, 0.1), rgba(255, 235, 220, 0.02));
  border: 1px solid rgba(232, 200, 180, 0.35);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(206, 142, 162, 0.2);
}

/* CTA buttons: warm cream outline, gold fill on hover */
[data-theme="dark"] .about-hug .cta-btn.cta-secondary {
  color: var(--light-gray);
  border-color: rgba(243, 244, 246, 0.35);
}
[data-theme="dark"] .about-hug .cta-btn.cta-secondary:hover {
  background: var(--light-gray);
  color: #3C1A24;
  border-color: var(--light-gray);
}

/* Footer legibility on the deep Klint blue */
[data-theme="dark"] .about-hug .site-footer {
  color: rgba(243, 244, 246, 0.7);
  border-top-color: rgba(243, 244, 246, 0.22);
}
[data-theme="dark"] .about-hug .site-footer .footer-center { color: var(--light-gray); }

/* ============================================================
   VARIANT 2 — BAUHAUS  (1923 Ausstellung homage)
   Cream field. 4×4 grid of hard-edged colored squares, each
   casting a solid black triangular drop-shadow down-right.
   A few cells hold portrait or text instead of a color.
   ============================================================ */
.about-bauhaus {
  background: #F6EFDB;
  color: #0C0D10;
  padding: clamp(60px, 8vh, 120px) var(--pad-x);
  border: 1px solid rgba(12,13,16,0.12);
  /* poster-style thin border inside the section */
  box-shadow: inset 0 0 0 1px rgba(12,13,16,0.12);
}
.bau-inner {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.bau-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(12,13,16,0.35);
  padding-top: 14px;
}
.bau-head .label { color: rgba(12,13,16,0.7); }

/* The grid itself: cells are square, gap is generous to make
   room for each cell's drop-shadow. Cells allow the shadow
   pseudo-elements to overflow into the gap and neighbor zone. */
.bau-grid {
  --gap: clamp(14px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--gap);
  aspect-ratio: 1 / 1;
}
.bau-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

/* The colored square — hard edges, no radius. */
.bau-sq {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 3;
}

/* Two real-DOM shadow wedges per cell, forming the L-shape that
   sits between the colored square and its diagonal neighbor.
   Both overflow into the grid's gap; grid has overflow: visible
   and cells have it too, so the black shapes extend beyond the
   cell's own box. z-index keeps them behind the next cell's
   square but above the grid background. */
.bau-shadow-h,
.bau-shadow-v {
  position: absolute;
  background: #0C0D10;
  z-index: 1;
  pointer-events: none;
}
/* Horizontal wedge: starts at the square's right edge, height
   equal to the square, width equal to one gap. Triangle points
   right (top-left corner → top-right corner → bottom-left). */
.bau-shadow-h {
  top: 0;
  left: 100%;
  height: 100%;
  width: var(--gap);
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
/* Vertical wedge: starts at the square's bottom edge, width
   equal to the square, height equal to one gap. Triangle points
   down (top-left → top-right → bottom-right). */
.bau-shadow-v {
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--gap);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

/* Tones — matching the 1923 poster */
.bau-cell[data-tone="Y"] .bau-sq { background: #F5C518; }
.bau-cell[data-tone="B"] .bau-sq { background: #1B5FAA; }
.bau-cell[data-tone="T"] .bau-sq { background: #2F9B9B; }
.bau-cell[data-tone="R"] .bau-sq { background: #D4352B; }

/* Portrait tile replaces the color square with a neutral block */
.bau-portrait {
  background: #0C0D10;
  display: flex; align-items: center; justify-content: center;
  color: rgba(243,244,246,0.6);
}
.bau-portrait .portrait-ph-label { color: rgba(243,244,246,0.65); }

/* Text cells stand in the grid and take 1 cell; no shadow */
.bau-cell-hello, .bau-cell-tagline {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  padding: 6px 4px 2px;
}
.bau-text {
  font-family: var(--f-sans);
  font-weight: 700;
  color: #0C0D10;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.bau-text-hello {
  display: flex; flex-direction: column; gap: 2px;
  font-size: clamp(22px, 3vw, 40px);
}
.bau-text-hello .serif {
  font-family: var(--f-serif);
  font-style: italic; font-weight: 400;
  text-transform: none;
  color: #D4352B;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1;
}
.bau-text-tag {
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.1;
}
.bau-text-tag em {
  font-family: var(--f-serif);
  font-style: italic; font-weight: 400;
  text-transform: none;
  color: #1B5FAA;
}

/* Poster footer — big condensed headline + meta line */
.bau-foot {
  border-top: 2px solid #0C0D10;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bau-title {
  margin: 0;
  font-family: var(--f-sans-cond), var(--f-sans);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0C0D10;
}
.bau-meta {
  margin: 0;
  font-family: var(--f-sans);
  font-size: clamp(14px, 1.2vw, 17px);
  color: rgba(12,13,16,0.75);
  line-height: 1.4;
  max-width: 52ch;
}
.bau-meta em {
  font-family: var(--f-serif);
  font-style: italic; font-weight: 400;
}
.bau-inner .spec-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.bau-inner .site-footer { margin-top: 24px; }

/* ============================================================
   VARIANT 3 — AURORA  (cursor-reactive light pool)
   Dark field. A warm light pool follows the cursor and reveals
   a portrait beneath a single serif sentence. Text is near-
   transparent; the pool increases its brightness where it lands.
   ============================================================ */
.about-aurora {
  background: #0C0D10;
  color: #F3F4F6;
  min-height: 100vh;
  cursor: crosshair;
}
.aurora-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 900px at 20% 0%, rgba(136,179,211,0.08) 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(243,216,204,0.06) 0%, transparent 60%),
    #0C0D10;
}
.aurora-portrait {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(360px, 42vw, 620px);
  height: clamp(360px, 42vw, 620px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.9;
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 12%, rgba(0,0,0,0) 30%);
          mask: radial-gradient(circle at var(--mx) var(--my), rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 12%, rgba(0,0,0,0) 30%);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.aurora-portrait-inner {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg,
      rgba(243,244,246,0.12) 0px, rgba(243,244,246,0.12) 10px,
      rgba(243,244,246,0.04) 10px, rgba(243,244,246,0.04) 20px),
    linear-gradient(140deg, #2A3542 0%, #1A1F27 100%);
  display: flex; align-items: center; justify-content: center;
}
.aurora-portrait-inner .portrait-ph-label { color: rgba(243,244,246,0.6); }
.aurora-spot {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(255, 220, 170, 0.35) 0%,
    rgba(255, 200, 150, 0.18) 8%,
    rgba(136, 179, 211, 0.06) 22%,
    transparent 40%
  );
  opacity: var(--aurora-op, 0.6);
  transition: opacity 0.6s ease;
  mix-blend-mode: screen;
}
.aurora-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
}
.aurora-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  min-height: calc(100vh - clamp(160px, 24vh, 320px));
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.aurora-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(243,244,246,0.2);
  padding-top: 14px;
  color: rgba(243,244,246,0.6);
}
.aurora-head .label { color: rgba(243,244,246,0.55); }
.aurora-hint { display: inline-flex; align-items: center; gap: 8px; }
.aurora-hint .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFC89B;
  box-shadow: 0 0 12px 2px rgba(255,200,155,0.7);
  animation: aurora-pulse 2s ease-in-out infinite;
}
@keyframes aurora-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}
.aurora-sentence {
  margin: auto 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: rgba(243,244,246,0.92);
  max-width: 22ch;
  text-wrap: pretty;
}
.aurora-sentence em {
  font-style: italic;
  color: #FFC89B;
}
.aurora-sentence .serif em { color: #FFC89B; }
.aurora-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-aurora-primary {
  background: #F3F4F6; color: #0C0D10; border: 1px solid #F3F4F6;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 28px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  transition: all 0.4s cubic-bezier(.2,.7,.2,1);
}
.cta-aurora-primary:hover { background: #FFC89B; border-color: #FFC89B; }
.cta-aurora-secondary {
  background: transparent; color: #F3F4F6; border: 1px solid rgba(243,244,246,0.5);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 28px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  transition: all 0.4s cubic-bezier(.2,.7,.2,1);
}
.cta-aurora-secondary:hover { border-color: #FFC89B; color: #FFC89B; }
.cta-aurora-primary svg, .cta-aurora-secondary svg { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
.cta-aurora-primary:hover svg, .cta-aurora-secondary:hover svg { transform: translate(3px, -3px); }

/* ── Light-mode aurora ──────────────────────────────────────
   Warm cream field. Cursor drags a peach/butter wash that
   deepens the ground rather than piercing it. Text is dark
   and stays legible everywhere; the wash adds warmth, not
   reveal. Portrait is a soft silhouette behind the sentence. */
[data-theme="light"] .about-aurora {
  background: #FDF5E8;
  color: #2A1E15;
  cursor: default;
}
[data-theme="light"] .aurora-bg {
  background:
    radial-gradient(1200px 900px at 20% 0%, rgba(255,220,180,0.35) 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(246,198,212,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #FFF7EE 0%, #F6E7D8 55%, #EED9C8 100%);
}
/* Big warm wash that follows the cursor — layered peach →
   butter → rose → sage for a spring-gradient feel. Uses
   multiply so it tints the cream rather than lighting it up. */
[data-theme="light"] .aurora-spot {
  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      rgba(255, 180, 130, 0.55) 0%,
      rgba(255, 210, 150, 0.35) 8%,
      rgba(246, 198, 212, 0.22) 22%,
      rgba(216, 228, 196, 0.14) 38%,
      transparent 55%
    );
  opacity: calc(var(--aurora-op, 0.6) + 0.15);
  mix-blend-mode: multiply;
  filter: blur(6px);
}
/* Portrait disc: a soft cream-on-cream silhouette, always
   faintly visible, brightened a touch where the cursor is. */
[data-theme="light"] .aurora-portrait {
  opacity: 1;
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 18%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.18) 100%);
          mask: radial-gradient(circle at var(--mx) var(--my), rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 18%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.18) 100%);
}
[data-theme="light"] .aurora-portrait-inner {
  background:
    repeating-linear-gradient(45deg,
      rgba(42, 30, 21, 0.08) 0px, rgba(42, 30, 21, 0.08) 10px,
      rgba(42, 30, 21, 0.03) 10px, rgba(42, 30, 21, 0.03) 20px),
    linear-gradient(140deg, #F4DFC8 0%, #E8CFB0 100%);
}
[data-theme="light"] .aurora-portrait-inner .portrait-ph-label {
  color: rgba(42, 30, 21, 0.55);
}
[data-theme="light"] .aurora-grain {
  opacity: 0.08;
  mix-blend-mode: multiply;
}
[data-theme="light"] .aurora-head {
  border-top-color: rgba(42, 30, 21, 0.25);
  color: rgba(42, 30, 21, 0.7);
}
[data-theme="light"] .aurora-head .label { color: rgba(42, 30, 21, 0.65); }
[data-theme="light"] .aurora-hint .dot {
  background: #D78A4F;
  box-shadow: 0 0 12px 2px rgba(215, 138, 79, 0.55);
}
[data-theme="light"] .aurora-sentence {
  color: rgba(42, 30, 21, 0.92);
}
[data-theme="light"] .aurora-sentence em,
[data-theme="light"] .aurora-sentence .serif em {
  color: #C28A5C;
}
/* Light-mode CTAs: dark solid + outlined (matching the hug
   variant) instead of the white-on-black dark-mode pair. */
[data-theme="light"] .cta-aurora-primary {
  background: #2A1E15; color: #FDF5E8; border-color: #2A1E15;
}
[data-theme="light"] .cta-aurora-primary:hover {
  background: #C28A5C; border-color: #C28A5C; color: #2A1E15;
}
[data-theme="light"] .cta-aurora-secondary {
  background: transparent; color: #2A1E15; border-color: rgba(42, 30, 21, 0.5);
}
[data-theme="light"] .cta-aurora-secondary:hover {
  background: #2A1E15; color: #FDF5E8; border-color: #2A1E15;
}
[data-theme="light"] .about-aurora .site-footer,
[data-theme="light"] .site-footer-aurora {
  border-top-color: rgba(42, 30, 21, 0.25);
  color: rgba(42, 30, 21, 0.7);
}
[data-theme="light"] .about-aurora .footer-center { color: #2A1E15; }

/* ============================================================
   Shared CTA button + footer (used by hug + spec)
   ============================================================ */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid #191A1F;
  transition: all 0.4s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid #191A1F;
  transition: all 0.4s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}
.cta-primary { background: #191A1F; color: #F3F4F6; }
.cta-primary:hover { background: var(--blue); border-color: var(--blue); color: #191A1F; }
.cta-secondary { background: transparent; color: #191A1F; }
.cta-secondary:hover { background: #FFFFFF; border-color: #FFFFFF; color: #191A1F; }
.cta-btn svg { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
.cta-btn:hover svg { transform: translate(3px, -3px); }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid rgba(25,26,31,0.25);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(25,26,31,0.65);
  align-items: center;
}
.footer-center { text-transform: none; font-size: 14px; letter-spacing: -0.005em; color: #191A1F; }

/* ───────────── THEME TOGGLE ───────────── */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: var(--pad-x);
  z-index: 60;
  background: transparent;
  border: 1px solid currentColor;
  color: #FFFFFF;
  mix-blend-mode: difference;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle svg { width: 16px; height: 16px; }

[data-theme="dark"] .theme-toggle {
  mix-blend-mode: normal;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

/* ───────────── TWEAKS PANEL ───────────── */
.tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: var(--surface);
  color: var(--surface-fg);
  border: 1px solid rgba(243,244,246,0.18);
  min-width: 260px;
  font-family: var(--f-mono);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.tweaks-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(243,244,246,0.12);
}
.tweaks-head .label { color: var(--surface-fg); }
.tweaks-toggle {
  background: transparent; border: none; color: var(--surface-fg);
  font-family: var(--f-mono); font-size: 18px; cursor: pointer; line-height: 1;
  padding: 0 4px;
}
.tweaks-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.tweak-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243,244,246,0.55);
  margin-bottom: 8px;
}
.tweak-options { display: flex; gap: 6px; flex-wrap: wrap; }
.tweak-opt {
  background: transparent;
  color: var(--surface-fg);
  border: 1px solid rgba(243,244,246,0.25);
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}
.tweak-opt:hover { border-color: var(--accent); }
.tweak-opt[data-active="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface-fg); }
.tweak-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(243,244,246,0.25);
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.tweak-swatch[data-active="true"] { border-color: var(--surface-fg); transform: scale(1.1); }

/* ───────────── RESPONSIVE ───────────── */
@media (max-width: 860px) {
  .nav-center { display: none; }
  /* With nav-center hidden, move SF · time into the middle column so it
     sits at the visual center of the viewport. */
  .nav-right { grid-column: 2; text-align: center; padding-right: 0; }
  .work { padding-top: 40px; }
  .work-header { padding-bottom: 24px; }
  .hero-footer-row { grid-template-columns: 1fr; gap: 24px; }
  .hero-tags { justify-content: flex-start; }
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { position: static; max-width: 280px; }
  .project-link { grid-template-columns: 1fr; }
  .company { min-width: 85vw; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

/* Narrow viewports: drop the headline to flush-left, scale the type so
   each line fills the column, and push topline/byline to the hero
   edges so the headline dominates the viewport. */
@media (max-width: 1024px) {
  body[data-headline-layout] .edit-row-1,
  body[data-headline-layout] .edit-row-2,
  body[data-headline-layout] .edit-row-3,
  body[data-headline-layout] .edit-row-4 { padding-left: 0; }

  /* svh keeps the hero full-height even when the mobile address bar
     toggles; vh fallback for browsers without small-viewport units. */
  .hero { min-height: 100vh; min-height: 100svh; padding-top: 92px; padding-bottom: 32px; }
  .hero-editorial { justify-content: center; gap: clamp(16px, 2.5vh, 28px); }

  .edit-title {
    font-size: clamp(68px, 16vw, 140px);
    line-height: 1.2;
    letter-spacing: -0.04em;
  }
  .edit-row-2 { padding-bottom: 0.18em; }
  .edit-row .serif { font-size: 1.15em; }
}