/* ============================================================
   VELINGA — Palette layer
   Loaded AFTER atelier.css / monolith.css so it wins the cascade.
   :root[data-palette="x"] (0,2,0) beats :root (0,1,0).
   Spectrum: steel (coolest) → sage → bronze → clay (warmest)
   Default (no attribute) stays bronze, matching the base sheets.
   ============================================================ */

/* 1 — STEEL · cool charcoal + steel blue */
:root[data-palette="steel"]{
  --bg:#0C0E10; --bg-2:#101316; --surface:#15181C; --surface-2:#1A1F24;
  --ink:#E8ECF0; --ink-soft:#AEB7C0; --muted:#7A848E;
  --line:rgba(232,236,240,.11); --line-strong:rgba(232,236,240,.22);
  --accent:oklch(0.72 0.062 235); --accent-soft:oklch(0.72 0.062 235 / .15);
  --slot-bg:#15191E;
  --contrast-bg:#E8ECF0; --contrast-surface:#DDE3E9; --contrast-ink:#14171A;
  --contrast-ink-soft:#3E454C; --contrast-muted:#69727B;
  --contrast-line:rgba(12,14,16,.13); --contrast-line-strong:rgba(12,14,16,.24);
}
/* 2 — SAGE · graphite + muted sage */
:root[data-palette="sage"]{
  --bg:#0E100E; --bg-2:#121512; --surface:#171A16; --surface-2:#1C211B;
  --ink:#E9ECE6; --ink-soft:#B0B6AC; --muted:#7E857A;
  --line:rgba(233,236,230,.11); --line-strong:rgba(233,236,230,.22);
  --accent:oklch(0.74 0.052 145); --accent-soft:oklch(0.74 0.052 145 / .15);
  --slot-bg:#161A15;
  --contrast-bg:#E9ECE6; --contrast-surface:#DEE3DA; --contrast-ink:#16190F;
  --contrast-ink-soft:#424A3C; --contrast-muted:#6C7466;
  --contrast-line:rgba(14,16,12,.13); --contrast-line-strong:rgba(14,16,12,.24);
}
/* 3 — BRONZE · warm near-black + bronze (default / current) */
:root[data-palette="bronze"]{
  --bg:#14110D; --bg-2:#1A1611; --surface:#211C15; --surface-2:#272118;
  --ink:#ECE6DC; --ink-soft:#C8C0B2; --muted:#938A7C;
  --line:rgba(236,230,220,.13); --line-strong:rgba(236,230,220,.26);
  --accent:oklch(0.77 0.082 74); --accent-soft:oklch(0.77 0.082 74 / .16);
  --slot-bg:#221C15;
  --contrast-bg:#ECE6DC; --contrast-surface:#E4DCCE; --contrast-ink:#1A1611;
  --contrast-ink-soft:#4A4234; --contrast-muted:#6E6557;
  --contrast-line:rgba(26,22,17,.14); --contrast-line-strong:rgba(26,22,17,.26);
}
/* 4 — CLAY · espresso brown + terracotta / copper */
:root[data-palette="clay"]{
  --bg:#15100C; --bg-2:#1B1410; --surface:#221913; --surface-2:#2A1F16;
  --ink:#F0E7DC; --ink-soft:#CDBCA9; --muted:#9B8975;
  --line:rgba(240,231,220,.13); --line-strong:rgba(240,231,220,.26);
  --accent:oklch(0.70 0.115 47); --accent-soft:oklch(0.70 0.115 47 / .16);
  --slot-bg:#231910;
  --contrast-bg:#F0E7DC; --contrast-surface:#E7DCCD; --contrast-ink:#1A130D;
  --contrast-ink-soft:#4C3E30; --contrast-muted:#7A6857;
  --contrast-line:rgba(21,16,12,.14); --contrast-line-strong:rgba(21,16,12,.26);
}

/* ============================================================
   LIGHT MODE — airy backgrounds, dark ink, deepened accent.
   In light mode the "contrast" band flips to a DARK island so
   the rhythm is preserved. Applied via :root[data-mode="light"].
   ============================================================ */
:root[data-mode="light"][data-palette="steel"]{
  --bg:#F5F7F9; --bg-2:#EAEEF2; --surface:#FFFFFF; --surface-2:#E9EEF2;
  --ink:#171A1D; --ink-soft:#474E56; --muted:#79818A;
  --line:rgba(20,24,28,.12); --line-strong:rgba(20,24,28,.20);
  --accent:oklch(0.52 0.09 248); --accent-soft:oklch(0.52 0.09 248 / .12);
  --slot-bg:#E5EAEF;
  --contrast-bg:#14171A; --contrast-surface:#1B1F23; --contrast-ink:#E8ECF0;
  --contrast-ink-soft:#AEB7C0; --contrast-muted:#7A848E;
  --contrast-line:rgba(232,236,240,.12); --contrast-line-strong:rgba(232,236,240,.22);
}
:root[data-mode="light"][data-palette="sage"]{
  --bg:#F4F6F2; --bg-2:#EAEEE6; --surface:#FFFFFF; --surface-2:#E8EDE3;
  --ink:#181B13; --ink-soft:#474E40; --muted:#79806F;
  --line:rgba(22,25,15,.12); --line-strong:rgba(22,25,15,.20);
  --accent:oklch(0.50 0.07 150); --accent-soft:oklch(0.50 0.07 150 / .12);
  --slot-bg:#E5EADF;
  --contrast-bg:#16190F; --contrast-surface:#1D2116; --contrast-ink:#E9ECE6;
  --contrast-ink-soft:#B0B6AC; --contrast-muted:#7E857A;
  --contrast-line:rgba(233,236,230,.12); --contrast-line-strong:rgba(233,236,230,.22);
}
:root[data-mode="light"][data-palette="bronze"]{
  --bg:#F4EFE7; --bg-2:#EBE4D8; --surface:#FBF8F2; --surface-2:#E8E0D2;
  --ink:#1A1611; --ink-soft:#4A4234; --muted:#7A6F5E;
  --line:rgba(26,22,17,.13); --line-strong:rgba(26,22,17,.22);
  --accent:oklch(0.56 0.085 64); --accent-soft:oklch(0.56 0.085 64 / .13);
  --slot-bg:#E7DECE;
  --contrast-bg:#14110D; --contrast-surface:#1F1A13; --contrast-ink:#ECE6DC;
  --contrast-ink-soft:#C8C0B2; --contrast-muted:#938A7C;
  --contrast-line:rgba(236,230,220,.13); --contrast-line-strong:rgba(236,230,220,.26);
}
:root[data-mode="light"][data-palette="clay"],
:root[data-mode="light"]:not([data-palette]){
  --bg:#F4ECE3; --bg-2:#ECE1D3; --surface:#FBF6EF; --surface-2:#E9DDCC;
  --ink:#1A130D; --ink-soft:#4C3E30; --muted:#83715E;
  --line:rgba(26,19,13,.13); --line-strong:rgba(26,19,13,.22);
  --accent:oklch(0.55 0.125 45); --accent-soft:oklch(0.55 0.125 45 / .13);
  --slot-bg:#E8DBC9;
  --contrast-bg:#15100C; --contrast-surface:#221913; --contrast-ink:#F0E7DC;
  --contrast-ink-soft:#CDBCA9; --contrast-muted:#9B8975;
  --contrast-line:rgba(240,231,220,.13); --contrast-line-strong:rgba(240,231,220,.26);
}
/* fallback bronze light when palette unset */
:root[data-mode="light"]:not([data-palette]){
  --bg:#F4EFE7; --bg-2:#EBE4D8; --surface:#FBF8F2; --surface-2:#E8E0D2;
  --ink:#1A1611; --ink-soft:#4A4234; --muted:#7A6F5E;
  --accent:oklch(0.56 0.085 64);
}

/* Sections that overlay photography keep light text in light mode */
:root[data-mode="light"] .hero,
:root[data-mode="light"] .cta-band,
:root[data-mode="light"] .showcase{
  color:#F6F1EA;
  --ink:#F6F1EA; --ink-soft:#DAD2C6; --muted:#ABA193;
  --bg:#14171A; --bg-2:#1B1F23;
  --line:rgba(246,241,234,.16); --line-strong:rgba(246,241,234,.28);
  --surface:rgba(246,241,234,.08);
  --slot-bg:#17130D;
}

/* Nav: stays legible in light mode with a light glass bar at all times */
:root[data-mode="light"] .nav{
  background:rgba(248,244,238,.82);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid rgba(26,22,17,.10);
}
:root[data-mode="light"] .nav__menu{background:transparent;}
@media(max-width:780px){
  /* backdrop-filter on .nav makes it the containing block for the fixed
     slide-out menu, pinning the panel to the 88px bar — no blur on mobile */
  :root[data-mode="light"] .nav{backdrop-filter:none;background:rgba(248,244,238,.96);}
  :root[data-mode="light"] .nav__menu{background:rgba(248,244,238,.98);border-left-color:rgba(26,22,17,.1);}
  :root[data-mode="light"] .nav__toggle span{background:#1A1611;}
}
/* Baked-in photography fills its positioned container (parallax-ready) */
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* Shared gallery grid (home + portfolio) */
.gal-row{display:grid;gap:6px;}
.gal-row--2{grid-template-columns:1fr 1fr;}
.gal-row--3{grid-template-columns:1fr 1fr 1fr;}
.gal-cell{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--slot-bg);}
@media(max-width:760px){.gal-row--2,.gal-row--3{grid-template-columns:1fr;}}

.tone-raise{background:var(--bg-2);}
.tone-contrast{
  background:var(--contrast-bg);
  color:var(--contrast-ink);
  --bg:var(--contrast-surface);
  --bg-2:var(--contrast-bg);
  --surface:var(--contrast-surface);
  --surface-2:var(--contrast-surface);
  --ink:var(--contrast-ink);
  --ink-soft:var(--contrast-ink-soft);
  --muted:var(--contrast-muted);
  --line:var(--contrast-line);
  --line-strong:var(--contrast-line-strong);
  --slot-bg:var(--contrast-surface);
}

/* ============================================================
   Palette switcher UI
   ============================================================ */
.pal-switch{
  position:fixed;left:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,28px);z-index:90;
  display:flex;align-items:center;gap:13px;
  padding:9px 13px;background:rgba(20,16,12,.74);backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid var(--line-strong);
  font-family:var(--mono,"Space Mono",monospace);
  transition:opacity .4s ease,transform .4s ease,background .4s ease;
}
:root[data-palette="steel"] .pal-switch,
:root[data-palette="sage"]  .pal-switch{background:rgba(14,15,16,.72);}
:root[data-mode="light"] .pal-switch{background:rgba(250,247,242,.82);border-color:rgba(26,22,17,.16);}

/* Light / Dark segmented toggle */
.mode-toggle{display:flex;border:1px solid var(--line-strong);}
.mode-seg{
  font-family:inherit;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 10px;background:transparent;border:0;cursor:pointer;color:var(--muted);
  transition:background .25s ease,color .25s ease;
}
.mode-seg[aria-pressed="true"]{background:var(--accent);color:#fff;}
:root[data-mode="light"] .mode-seg[aria-pressed="true"]{color:#fff;}
.pal-switch__sep{width:1px;height:22px;background:var(--line-strong);}
.pal-switch__label{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.pal-switch__dots{display:flex;gap:9px;}
.pal-dot{
  width:22px;height:22px;border:1px solid var(--line-strong);cursor:pointer;padding:0;position:relative;
  background:var(--_c);transition:transform .25s ease,box-shadow .25s ease;
}
.pal-dot::after{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.18);opacity:0;transition:opacity .25s ease;}
.pal-dot:hover{transform:scale(1.12);}
.pal-dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--_c);}
.pal-dot[aria-pressed="true"]::after{opacity:1;}
.pal-switch__name{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);min-width:54px;}
@media (max-width:680px){
  .pal-switch__name,.pal-switch__sep{display:none;}
  .pal-switch{left:50%;transform:translateX(-50%);gap:10px;}
}
@media print{.pal-switch{display:none;}}