/* ============================================================
   QVi — Art portfolio & shop
   Shared design system
   ============================================================ */

:root {
  /* Gallery neutrals — warm paper, deep ink */
  --bg: #F4F2EC;
  --surface: #FBFAF6;
  --surface-2: #EEEBE2;
  --ink: #1A1917;
  --ink-soft: #5C5A53;
  --ink-faint: #8E8B81;
  --line: #DEDACF;
  --line-strong: #CBC6B8;

  /* Accent — deep petrol/teal, the single color note */
  --accent: #275C5E;
  --accent-deep: #1C4547;
  --accent-soft: #E1EAE7;

  --gold: #9A7B3F;
  --sold: #9E4B3C;

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --wrap: 1200px;
  --gap: clamp(20px, 4vw, 48px);
  --radius: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131316;
    --surface: #1A1A1E;
    --surface-2: #222227;
    --ink: #ECEAE3;
    --ink-soft: #A4A199;
    --ink-faint: #74716A;
    --line: #2C2C32;
    --line-strong: #3A3A41;
    --accent: #6FA9AC;
    --accent-deep: #8FC0C2;
    --accent-soft: #16292A;
    --gold: #C6A45E;
    --sold: #D2796A;
  }
}
:root[data-theme="dark"] {
  --bg: #131316; --surface: #1A1A1E; --surface-2: #222227; --ink: #ECEAE3;
  --ink-soft: #A4A199; --ink-faint: #74716A; --line: #2C2C32; --line-strong: #3A3A41;
  --accent: #6FA9AC; --accent-deep: #8FC0C2; --accent-soft: #16292A; --gold: #C6A45E; --sold: #D2796A;
}
:root[data-theme="light"] {
  --bg: #F4F2EC; --surface: #FBFAF6; --surface-2: #EEEBE2; --ink: #1A1917;
  --ink-soft: #5C5A53; --ink-faint: #8E8B81; --line: #DEDACF; --line-strong: #CBC6B8;
  --accent: #275C5E; --accent-deep: #1C4547; --accent-soft: #E1EAE7; --gold: #9A7B3F; --sold: #9E4B3C;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }

/* ---------- Typography ---------- */
.display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.lead { color: var(--ink-soft); font-size: clamp(16px, 1.6vw, 18px); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn--accent, .btn--accent { }
@media (prefers-color-scheme: dark) { .btn--accent { color: #10201f; } }
:root[data-theme="dark"] .btn--accent { color: #10201f; }
:root[data-theme="light"] .btn--accent { color: #fff; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
}
.brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 500;
  letter-spacing: 0.03em; padding: 4px 0; position: relative; transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--accent); transition: width .25s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 18px; }
.cart-btn {
  background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; padding: 6px;
}
.cart-count {
  background: var(--accent); color: #fff; font-family: var(--mono); font-size: 11px;
  min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 5px;
}
@media (prefers-color-scheme: dark){ .cart-count { color: #10201f; } }
:root[data-theme="dark"] .cart-count { color:#10201f; }
:root[data-theme="light"] .cart-count { color:#fff; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--ink); padding: 6px; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px 0; transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: 14px var(--gap); width: 100%; }
  .nav-links a::after { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(60px, 11vw, 130px) 0 clamp(40px, 7vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(44px, 8vw, 92px); margin: 18px 0 22px; }
.hero .lead { max-width: 44ch; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art {
  aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
}
.hero-art svg { width: 100%; height: 100%; }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; }
}

/* ---------- Section scaffolding ---------- */
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap; }
.section-head h2 { font-size: clamp(28px, 4.4vw, 44px); margin: 12px 0 0; }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }
.link-arrow { text-decoration: none; color: var(--accent); font-weight: 600; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Gallery grid ---------- */

/* Masonry columns so each card keeps the photo's true aspect ratio */
.gallery { columns: 3 300px; column-gap: clamp(18px, 2.6vw, 34px); }
@media (max-width: 900px) { .gallery { columns: 2 240px; } }
@media (max-width: 520px) { .gallery { columns: 1; } }

.card { cursor: pointer; border: none; background: none; padding: 0; text-align: left; font: inherit; color: inherit; display: block; width: 100%; break-inside: avoid; margin-bottom: clamp(18px, 2.6vw, 34px); }
.card-media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.card-media svg, .card-media img { width: 100%; height: auto; display: block; transition: transform .5s var(--ease); }
.card:hover .card-media svg, .card:hover .card-media img { transform: scale(1.04); }
.badge {
  position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(4px); color: var(--ink);
}
.badge--sold { background: var(--sold); color: #fff; }
.card-body { padding: 14px 2px 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.card-title { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 0 0 3px; }
.card-meta { font-size: 13px; color: var(--ink-faint); }
.card-price { font-family: var(--mono); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-price.sold { color: var(--sold); }

/* ---------- Modal (product detail) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,10,12,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative; background: var(--surface); border-radius: 6px; max-width: 620px; width: 100%;
  max-height: 92vh; overflow: auto; display: block;
  transform: translateY(12px) scale(.98); transition: transform .25s var(--ease); border: 1px solid var(--line);
}
.modal-backdrop.open .modal { transform: none; }
/* image shown whole, at its true ratio — never cropped */
.modal-art { background: var(--surface-2); display: flex; align-items: center; justify-content: center; padding: clamp(26px, 6%, 56px); }
.modal-art img { max-width: 100%; max-height: 46vh; width: auto; height: auto; object-fit: contain; display: block; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 18px 40px -18px rgba(0,0,0,.32); }
.modal-art svg { width: 74%; height: auto; max-height: 46vh; display: block; box-shadow: 0 18px 40px -18px rgba(0,0,0,.32); }
.modal-info { padding: clamp(22px, 3vw, 36px); }
.modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(18,18,20,.5); border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: #fff; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(18,18,20,.82); }
.modal-info h3 { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); font-weight: 600; margin: 6px 0 4px; }
.spec { list-style: none; margin: 20px 0; padding: 20px 0; border-block: 1px solid var(--line); display: grid; gap: 10px; }
.spec li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.spec .k { color: var(--ink-faint); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.spec .v { text-align: right; }
.modal-price { font-family: var(--mono); font-size: 26px; font-variant-numeric: tabular-nums; margin: 6px 0 20px; }
.modal-desc { color: var(--ink-soft); font-size: 15px; margin-bottom: 2px; }
.story { margin: 22px 0 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.story-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.story p { font-family: var(--serif); font-size: 16.5px; line-height: 1.68; color: var(--ink); margin: 0 0 12px; }
.story p:last-child { margin-bottom: 0; }
.made-note { font-size: 13px; color: var(--ink-faint); margin-top: 14px; }
.size-select { margin: 6px 0 16px; }
.size-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.size-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.size-opt { font-family: var(--sans); font-size: 13px; padding: 8px 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); border-radius: 100px; cursor: pointer; transition: all .2s; }
.size-opt:hover { border-color: var(--ink); color: var(--ink); }
.size-opt.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (max-width: 680px) { .modal-art { padding: clamp(18px, 5%, 34px); } .modal-art img, .modal-art svg { max-height: 40vh; } }

/* ---------- Cart drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 209; background: rgba(10,10,12,.45); opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; width: min(420px, 100%);
  background: var(--surface); border-left: 1px solid var(--line); transform: translateX(100%);
  transition: transform .3s var(--ease); display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; font-family: var(--serif); font-size: 22px; }
.drawer-items { flex: 1; overflow: auto; padding: 8px 24px; }
.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-line-art { width: 56px; height: 70px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.cart-line-art svg { width: 100%; height: 100%; }
.cart-line-title { font-family: var(--serif); font-size: 16px; margin: 0 0 2px; }
.cart-line-meta { font-size: 12px; color: var(--ink-faint); }
.cart-line-price { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.cart-remove { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 2px 0; margin-top: 4px; }
.cart-remove:hover { color: var(--sold); }
.drawer-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); }
.cart-total { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 6px; }
.cart-total strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cart-empty { text-align: center; color: var(--ink-faint); padding: 60px 0; }
.checkout-note { font-size: 12px; color: var(--ink-faint); margin: 14px 0 0; text-align: center; }

/* ---------- Info strip / features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.feature { background: var(--surface); padding: 28px 26px; }
.feature h4 { margin: 0 0 8px; font-size: 15px; }
.feature p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.feature .fi { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
@media (max-width: 760px) { .features { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.about-portrait { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: sticky; top: 90px; }
.about-portrait svg { width: 100%; height: 100%; }
.prose p { margin: 0 0 18px; }
.prose h3 { font-family: var(--sans); font-size: 15px; margin: 30px 0 8px; }
@media (max-width: 760px){ .about-grid { grid-template-columns: 1fr; } .about-portrait { position: static; max-width: 360px; } }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.field input, .field textarea {
  font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--bg); color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-note { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }
.form-error { font-size: 14px; color: var(--sold); background: color-mix(in srgb, var(--sold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sold) 40%, transparent); border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.form-error a { color: var(--sold); font-weight: 600; text-decoration: underline; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 13px 22px; border-radius: 100px; font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s var(--ease); z-index: 120; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: clamp(44px, 6vw, 72px) 0 40px; }
.footer-grid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 16px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { text-decoration: none; color: var(--ink-soft); font-size: 14px; }
.footer-links a:hover { color: var(--accent); }
.footer-brand { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 12px; }
.footer-brand span { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint); }
.newsletter { display: flex; gap: 8px; margin-top: 6px; }
.newsletter input { flex: 1; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.newsletter button { padding: 10px 16px; }
.footer-follow { margin: 16px 0 0; font-size: 14px; color: var(--ink-faint); }
.footer-follow a { color: var(--accent); text-decoration: none; }
.footer-follow a:hover { text-decoration: underline; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Page header (interior pages) ---------- */
.page-head { padding: clamp(48px, 8vw, 90px) 0 clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(38px, 6.5vw, 72px); margin: 14px 0 16px; }
.page-head .lead { max-width: 56ch; }

/* ---------- Gallery (photos only) ---------- */
.g-item {
  display: block; width: 100%; margin: 0 0 clamp(16px, 2.4vw, 28px); padding: 0;
  border: none; background: none; cursor: pointer; text-align: left; color: inherit;
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
.g-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.g-media svg { width: 100%; height: auto; display: block; transition: transform .5s var(--ease), filter .4s; }
.g-item:hover .g-media svg { transform: scale(1.03); }
.g-cap { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px 0; font-size: 13px; }
.g-cap span:first-child { font-family: var(--serif); font-size: 16px; }
.g-cap span:last-child { font-family: var(--mono); color: var(--ink-faint); }
/* stagger heights a touch for a gallery feel */
.g-item:nth-child(3n+1) .g-media svg { aspect-ratio: 4/5; object-fit: cover; }
.g-item:nth-child(3n+2) .g-media svg { aspect-ratio: 1/1; object-fit: cover; }
.g-item:nth-child(3n) .g-media svg   { aspect-ratio: 4/6; object-fit: cover; }

/* Full-bleed home showcase — dark gallery wall, photos in white mats */
.section--showcase { background: #141417; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 92px); }
.section--showcase .eyebrow { color: #8fb0ad; }
.section--showcase .section-head h2 { color: #F0EEE7; }
.section--showcase .link-arrow { color: #EDEBE4; }
.section--showcase .link-arrow:hover { color: #fff; }
.home-gallery { columns: 3; column-gap: clamp(10px, 1.5vw, 24px); padding: clamp(8px, 1vw, 16px) clamp(10px, 1.6vw, 28px) 0; }
.home-gallery .g-item { margin-bottom: clamp(10px, 1.5vw, 24px); }
.home-gallery .g-media { border-radius: 0; border: none; background: transparent; padding: 0; overflow: visible; box-shadow: none; transition: transform .3s var(--ease); }
.home-gallery .g-media img { box-sizing: border-box; border: clamp(16px, 2.8vw, 44px) solid #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 16px 40px -18px rgba(0,0,0,.7); }
.home-gallery .g-item:hover .g-media { transform: translateY(-3px); }
.home-gallery .g-item:hover .g-media img { transform: none; }
.home-gallery .g-cap { display: none; }   /* pure image wall; details on click */
@media (max-width: 1000px) { .home-gallery { columns: 2; } }
@media (max-width: 600px) { .home-gallery { columns: 1; } }

/* Gallery page — modern hover-overlay masonry (photos never cropped) */
.gallery-grid {
  columns: 3;
  column-gap: clamp(10px, 1.4vw, 20px);
  padding: clamp(6px, 1vw, 14px) 0 0;
}
.gallery-grid .g-item { position: relative; display: block; width: 100%; margin: 0 0 clamp(10px, 1.4vw, 20px); overflow: hidden; border-radius: var(--radius); background: var(--surface-2); break-inside: avoid; -webkit-column-break-inside: avoid; }
.gallery-grid .g-media { border-radius: 0; border: none; background: transparent; overflow: hidden; }
.gallery-grid .g-media img,
.gallery-grid .g-media svg { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; display: block; transition: transform .6s var(--ease); }
.gallery-grid .g-item:hover .g-media img,
.gallery-grid .g-item:hover .g-media svg { transform: scale(1.05); }

/* ── GLOBAL RULE — photographs are NEVER cropped: every artwork photo is shown at its
   own native aspect ratio. No skin may cover-crop a photo. Only decorative page chrome
   (hero banner, about portrait, project cover thumbnail) may fill/crop. See principles.md §5. ── */
.g-media img,
.card-media img,
.pphoto-media img {
  object-fit: contain !important;
  aspect-ratio: auto !important;
  height: auto !important;
}
/* filmstrip is a horizontal strip: it sizes by height with width:auto — already uncropped, keep it */
:root[data-skin="filmstrip"] .g-media img { height: 100% !important; width: auto !important; }

/* ── GLOBAL RULE — a photo is NEVER taller than the screen: on the homepage and gallery
   every artwork photo fits within one viewport height, so the whole image is visible at once
   without scrolling to see a single photo. Tall photos scale DOWN preserving aspect ratio
   (their width follows), so this never crops. Landscape photos are unaffected. See principles.md §5. ── */
.g-media img,
.g-media svg {
  max-height: 80vh !important;
  width: auto !important;
  max-width: 100% !important;
  margin-inline: auto;
}
/* filmstrip sizes to its own (sub-viewport) strip height — exempt from the vh cap */
:root[data-skin="filmstrip"] .g-media img { max-height: none !important; }

/* Grids originally built for cover-crop: let each cell shrink to its (now uncropped)
   photo instead of stretching and showing empty filler. Harmless on masonry (multicol). */
.gallery-grid { align-items: start; }
.g-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 3px; padding: clamp(12px, 1.6vw, 18px);
  background: linear-gradient(to top, rgba(10,10,12,.80) 0%, rgba(10,10,12,.32) 44%, rgba(10,10,12,0) 70%);
  color: #fff; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.gallery-grid .g-item:hover .g-overlay,
.gallery-grid .g-item:focus-visible .g-overlay { opacity: 1; }
.g-title { font-family: var(--serif); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.2; }
.g-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.82); }
.home-gallery .g-overlay { display: none; }
.g-note { display: none; }   /* explanation text; revealed only by art-book skins */
@media (max-width: 1000px) { .gallery-grid { columns: 2; } }
@media (max-width: 560px) { .gallery-grid { columns: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gallery-grid .g-media img, .gallery-grid .g-media svg, .g-overlay { transition: none; }
  .gallery-grid .g-item:hover .g-media img, .gallery-grid .g-item:hover .g-media svg { transform: none; }
}

/* Facet filter bar */
.facets { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 26px); align-items: flex-start; margin-bottom: 16px; }
.facet-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.facet-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-right: 2px; }
.facet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.facet-actions { margin-left: auto; }
.facet-clear { font: inherit; font-size: 13px; background: none; border: none; cursor: pointer; color: var(--accent); padding: 8px 4px; }
.facet-clear:hover { text-decoration: underline; }
.facet-count { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin: 0 0 18px; }
.facet-empty { column-span: all; text-align: center; padding: clamp(40px, 8vw, 90px) 0; color: var(--ink-soft); }
.facet-empty .linklike { font: inherit; background: none; border: none; cursor: pointer; color: var(--accent); text-decoration: underline; padding: 0; }

/* ---------- Lightbox (gallery view: image + story placard) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 130; background: rgba(10,10,12,.94);
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 28px);
  padding: clamp(16px, 4vw, 48px); opacity: 0; transition: opacity .3s; -webkit-font-smoothing: antialiased;
}
.lightbox.open { opacity: 1; }
.lb-stage {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 56px);
  max-width: 1200px; max-height: 88vh; width: 100%;
  transform: scale(.985); transition: transform .3s var(--ease);
}
.lightbox.open .lb-stage { transform: none; }
.lb-art { flex: 1 1 62%; min-width: 0; border-radius: 3px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); background: #0c0c0e; max-height: 88vh; }
.lb-art img, .lb-art svg { width: 100%; height: auto; max-height: 88vh; object-fit: contain; display: block; }
.lb-placard { flex: 1 1 30%; max-width: 360px; color: #ECEAE3; }
.lb-place { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #9aa7a5; margin: 0 0 10px; }
.lb-title { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 20px; }
.lb-story { font-family: var(--serif); font-size: 17px; line-height: 1.7; color: #d8d6cf; }
.lb-story p { margin: 0 0 14px; }
.lb-story p:last-child { margin-bottom: 0; }
.lb-meta { font-family: var(--mono); font-size: 12px; color: #7f8a88; margin: 22px 0 18px; letter-spacing: 0.02em; }
.lb-shoplink { color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.lb-shoplink:hover { border-bottom-color: #fff; }
.lb-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; opacity: .75; z-index: 2; }
.lb-close:hover { opacity: 1; }
.lb-nav { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; flex: none; transition: background .2s; z-index: 2; }
.lb-nav:hover { background: rgba(255,255,255,.2); }
@media (max-width: 820px) {
  .lb-stage { flex-direction: column; gap: 20px; max-height: none; overflow: auto; }
  .lb-art { flex: none; width: 100%; max-height: 56vh; }
  .lb-art img, .lb-art svg { max-height: 56vh; }
  .lb-placard { flex: none; max-width: 640px; width: 100%; }
  .lb-nav { position: fixed; bottom: 20px; }
  .lb-prev { left: 26%; } .lb-next { right: 26%; }
}

/* ---------- Ambient music mini-player (persistent, bottom-left) ---------- */
.audio-player {
  position: fixed; left: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--surface, #fff); color: var(--ink, #1a1a1a);
  border: 1px solid var(--line, rgba(0,0,0,.14));
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
  font-size: 13px; max-width: min(76vw, 320px);
}
.audio-player[hidden] { display: none; }
.audio-now { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.audio-note { color: var(--accent, #b3542e); }
.audio-name { font-family: var(--serif, Georgia, serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-btn {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line, rgba(0,0,0,.14)); background: var(--surface-2, rgba(0,0,0,.04));
  color: inherit; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease, ease), transform .2s var(--ease, ease);
}
.audio-btn:hover { background: var(--accent-soft, rgba(0,0,0,.08)); }
.audio-btn:focus-visible { outline: 2px solid var(--accent, #b3542e); outline-offset: 2px; }
.audio-player.is-muted { opacity: .82; }

/* ---------- Project page (project.html) — sequenced uncropped plates ---------- */
.project-page { padding-top: clamp(8px, 2vw, 20px); }
.project-back-link { display: inline-block; font-family: var(--mono, monospace); font-size: 13px; color: var(--ink-faint, #777); text-decoration: none; margin-bottom: clamp(18px, 3vw, 30px); }
.project-back-link:hover { color: var(--accent, #b3542e); }
.project-page-head { max-width: 60ch; margin-bottom: clamp(28px, 5vw, 56px); }
.project-page-title { font-size: clamp(34px, 6vw, 66px); margin: 0 0 14px; }
.project-page-blurb { font-size: clamp(16px, 1.7vw, 20px); color: var(--ink-soft, #555); line-height: 1.55; }
.project-page-count { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint, #999); margin-top: 12px; }
.plates { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 110px); max-width: 1040px; margin: 0 auto; }
.plate { display: block; text-decoration: none; color: inherit; position: relative; }
.plate-num { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .16em; color: var(--ink-faint, #999); display: block; margin-bottom: 12px; }
.plate-media { background: var(--surface-2, rgba(0,0,0,.03)); overflow: hidden; border-radius: var(--radius, 2px); }
.plate-media img { width: 100%; height: auto; object-fit: contain; display: block; transition: transform .6s var(--ease, ease); }
.plate:hover .plate-media img { transform: scale(1.02); }
.plate-cap { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 12px 2px 0; }
.plate-title { font-family: var(--serif, Georgia, serif); font-size: clamp(18px, 2vw, 24px); }
.plate-meta { font-family: var(--mono, monospace); font-size: 12px; color: var(--ink-faint, #999); white-space: nowrap; }
.project-missing { text-align: center; padding: clamp(40px, 10vw, 120px) 0; }
.project-missing h1 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 12px; }
.project-missing a { color: var(--accent, #b3542e); }
@media (max-width: 620px) { .plate-cap { flex-direction: column; gap: 2px; } .plate-meta { white-space: normal; } }


.hero-art img, .about-portrait img, .cart-line-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-media img { width: 100%; height: auto; display: block; }   /* natural aspect → nice masonry */

/* utility */
.stack-sm > * + * { margin-top: 10px; }
.center { text-align: center; }
.mt-l { margin-top: clamp(40px, 6vw, 72px); }

/* postcard set CTA + builder */
.set-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px 20px; margin: 18px 0 26px;
  background: var(--accent-soft); }
.set-cta-title { font-weight: 600; }
.set-cta-desc { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.set-modal { max-width: 560px; }
.set-list { margin: 14px 0; border-top: 1px solid var(--line); }
.set-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.set-row-art { width: 52px; height: 66px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); flex: 0 0 auto; }
.set-row-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-row-art svg { width: 100%; height: 100%; }
.set-row-info { flex: 1 1 auto; min-width: 0; }
.set-qty { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.qtybtn { width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface);
  color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qtybtn:hover { border-color: var(--ink); }
.qtyval { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.set-status { font-weight: 600; }


/* ============================================================
   Theme skins — photo-forward preview modes (data-skin on <html>)
   Layer over the light/dark colour scheme. Switchable live via
   the .skin-switch control; choice persists in localStorage and
   can always be set back to "Featured" (default).
   ============================================================ */

/* --- Live theme switcher control (collapsed pill; expands on hover) --- */
.skin-switch {
  position: fixed; z-index: 200; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: calc(100vw - 24px);
  padding: 6px 12px; border-radius: 22px;
  background: var(--surface); background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px -14px rgba(0,0,0,.55);
  font-family: var(--mono); font-size: 12px;
}
.skin-switch-label {
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; padding: 2px 4px;
  cursor: default; -webkit-user-select: none; user-select: none; white-space: nowrap;
}
.skin-switch-label::after { content: ' \25B8'; }            /* right-caret when collapsed */
.skin-switch:hover .skin-switch-label::after,
.skin-switch:focus-within .skin-switch-label::after { content: ' \25BE'; }  /* down-caret when open */
.skin-switch-list {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; text-align: left;
  max-width: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-width .35s ease, max-height .35s ease, opacity .25s ease;
}
.skin-switch:hover .skin-switch-list,
.skin-switch:focus-within .skin-switch-list {
  max-width: min(680px, calc(100vw - 40px)); max-height: 52vh; overflow-y: auto; opacity: 1;
}
.skin-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.skin-group-label {
  flex: 0 0 100%; font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); opacity: .7; margin: 3px 2px 1px;
}
.skin-btn {
  font: inherit; cursor: pointer; padding: 6px 12px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--ink-soft);
  transition: color .2s, background .2s; white-space: nowrap;
}
.skin-btn:hover { color: var(--ink); }
.skin-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
/* 0-5 rating badge on each skin button in the list */
.skin-btn[data-rating]::after {
  content: ' ' attr(data-rating); font-size: 9px; opacity: .5; vertical-align: super;
}
.skin-btn[aria-pressed="true"][data-rating]::after { opacity: .9; }
/* Single-hue INTENSITY GRADIENT so magnitude reads instantly: the stronger /
   darker the green fill, the higher the rating. 0 = unrated (faint grey).
   1 -> 5 climbs monotonically in saturation, fill and weight, so a 5 clearly
   pops over a 3, which pops over a 1. Rules are global (every skin). */
.skin-btn[data-rating="0"] {
  color: var(--ink-faint); border-color: rgba(140,140,140,.22); background: rgba(140,140,140,.04);
}
.skin-btn[data-rating="0"]::after { color: #9A9A9A; opacity: .6; }
.skin-btn[data-rating="1"] {
  color: var(--ink-soft); border-color: rgba(46,158,91,.30); background: rgba(46,158,91,.08);
}
.skin-btn[data-rating="1"]::after { color: #2E9E5B; opacity: .75; }
.skin-btn[data-rating="2"] {
  color: var(--ink); border-color: rgba(46,158,91,.46); background: rgba(46,158,91,.16);
}
.skin-btn[data-rating="2"]::after { color: #2E9E5B; opacity: .85; }
.skin-btn[data-rating="3"] {
  color: var(--ink); border-color: rgba(41,146,84,.64); background: rgba(46,158,91,.28);
  font-weight: 500;
}
.skin-btn[data-rating="3"]::after { color: #1F7A46; opacity: .9; }
.skin-btn[data-rating="4"] {
  color: var(--ink); border-color: rgba(36,128,74,.85); background: rgba(41,146,84,.48);
  font-weight: 600;
}
.skin-btn[data-rating="4"]::after { color: #14603A; opacity: .95; }
.skin-btn[data-rating="5"] {
  color: #fff; border-color: rgba(30,108,62,1); background: rgba(38,140,80,.96);
  font-weight: 700; box-shadow: 0 1px 4px rgba(30,108,62,.40);
}
.skin-btn[data-rating="5"]::after { color: rgba(255,255,255,.9); opacity: 1; }
/* Keep the intensity signal when this theme is the active (pressed) one:
   ink fill plus a green ring whose weight grows with the rating. */
.skin-btn[aria-pressed="true"][data-rating="1"] {
  background: var(--ink); color: var(--bg); box-shadow: 0 0 0 1px rgba(46,158,91,.55);
}
.skin-btn[aria-pressed="true"][data-rating="2"] {
  background: var(--ink); color: var(--bg); box-shadow: 0 0 0 2px rgba(46,158,91,.65);
}
.skin-btn[aria-pressed="true"][data-rating="3"] {
  background: var(--ink); color: var(--bg); box-shadow: 0 0 0 2px rgba(46,158,91,.80);
}
.skin-btn[aria-pressed="true"][data-rating="4"] {
  background: var(--ink); color: var(--bg); box-shadow: 0 0 0 3px rgba(46,158,91,.90);
}
.skin-btn[aria-pressed="true"][data-rating="5"] {
  background: var(--ink); color: var(--bg); box-shadow: 0 0 0 3px rgba(46,158,91,1);
}
/* the 0-5 rating control for the active theme (next to the Theme label) */
.skin-rate { display: inline-flex; align-items: center; gap: 3px; }
.skin-rate-hint {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 2px;
}
.skin-rate-btn {
  font: inherit; font-size: 11px; cursor: pointer; line-height: 1;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  transition: color .2s, background .2s, border-color .2s;
}
.skin-rate-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.skin-rate-btn[aria-pressed="true"] {
  color: var(--bg); background: var(--ink); border-color: var(--ink);
}
/* Standalone "Interesting" flag — a keepsake toggle separate from the 0-5 rating.
   Persisted under localStorage 'qvi-skin-interesting'. */
.skin-interesting-btn {
  font: inherit; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  transition: color .2s, background .2s, border-color .2s, box-shadow .25s, transform .1s;
}
.skin-interesting-star {
  font-size: 12px; line-height: 1; transition: transform .3s ease, color .2s;
}
.skin-interesting-btn:hover {
  color: var(--ink); border-color: var(--ink-soft);
}
.skin-interesting-btn:hover .skin-interesting-star { transform: rotate(72deg); }
.skin-interesting-btn:active { transform: translateY(1px); }
.skin-interesting-btn[aria-pressed="true"] {
  color: #1a1205; border-color: #e8b23a;
  background: linear-gradient(135deg, #ffd66b, #f0a52c);
  box-shadow: 0 0 0 1px rgba(240,165,44,.35), 0 0 14px rgba(240,165,44,.55);
}
.skin-interesting-btn[aria-pressed="true"] .skin-interesting-star {
  color: #1a1205; transform: rotate(72deg) scale(1.12);
  filter: drop-shadow(0 0 4px rgba(255,214,107,.9));
}
@media (prefers-reduced-motion: reduce) {
  .skin-interesting-btn, .skin-interesting-star { transition: none; }
  .skin-interesting-btn:hover .skin-interesting-star { transform: none; }
}
@media (max-width: 600px) {
  .skin-switch { font-size: 11px; gap: 6px; padding: 5px 8px; }
  .skin-btn { padding: 5px 9px; }
}
/* touch devices have no hover — keep the switcher open so it stays usable */
@media (hover: none) {
  .skin-switch-list { max-width: min(680px, calc(100vw - 40px)); max-height: 52vh; overflow-y: auto; opacity: 1; }
  .skin-switch-label::after { content: ''; }
}
@media print { .skin-switch { display: none; } }

/* --- 1) Dark Gallery: near-black chrome, images glow --- */
:root[data-skin="dark-gallery"] {
  --bg: #0C0C0E; --surface: #141416; --surface-2: #1C1C20; --ink: #F2F0EA;
  --ink-soft: #B7B4AC; --ink-faint: #7C7A72; --line: #2A2A30; --line-strong: #3A3A41;
  --accent: #7FB6B8; --accent-deep: #9FC8CA; --accent-soft: #14282A; --gold: #C6A45E; --sold: #D2796A;
}
:root[data-skin="dark-gallery"] .gallery-grid .g-item { background: #0C0C0E; box-shadow: 0 18px 44px -22px rgba(0,0,0,.85); }

/* --- 2) Editorial Minimal: bright, airy, quiet type, captions kept below --- */
:root[data-skin="editorial"] {
  --bg: #FCFBF8; --surface: #FFFFFF; --surface-2: #F2F0EA; --ink: #161513;
  --ink-soft: #55534C; --ink-faint: #9C998F; --line: #E8E5DC; --line-strong: #D8D4C8;
  --accent: #1E1E1C; --accent-deep: #000; --accent-soft: #EEECE5;
}
:root[data-skin="editorial"] .gallery-grid { columns: 2; column-gap: clamp(20px, 3vw, 48px); }
:root[data-skin="editorial"] .gallery-grid .g-item { margin-bottom: clamp(24px, 3.4vw, 56px); background: transparent; border-radius: 0; }
:root[data-skin="editorial"] .gallery-grid .g-overlay {
  position: static; opacity: 1; background: none; color: var(--ink);
  padding: 12px 2px 0; pointer-events: auto;
}
:root[data-skin="editorial"] .g-title { font-size: clamp(15px, 1.4vw, 17px); }
:root[data-skin="editorial"] .g-meta { color: var(--ink-faint); }
:root[data-skin="editorial"] .home-gallery .g-overlay { display: none; }

/* --- 3) Cinematic: full-bleed, big images, minimal gutter --- */
:root[data-skin="cinematic"] {
  --bg: #0A0A0B; --surface: #111112; --surface-2: #171719; --ink: #F4F2EC;
  --ink-soft: #BDBAB2; --ink-faint: #84817A; --line: #242428; --line-strong: #33333A;
  --accent: #E7E4DC; --accent-deep: #FFFFFF; --accent-soft: #1A1A1D;
}
:root[data-skin="cinematic"] .gallery-grid {
  columns: 2; column-gap: 4px; padding-top: 4px;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-left: clamp(4px, 1.4vw, 20px); padding-right: clamp(4px, 1.4vw, 20px);
}
:root[data-skin="cinematic"] .gallery-grid .g-item { margin-bottom: 4px; border-radius: 0; }
:root[data-skin="cinematic"] .gallery-grid .g-overlay { padding: clamp(16px, 2vw, 28px); }
@media (max-width: 700px) { :root[data-skin="cinematic"] .gallery-grid { columns: 1; } }

/* --- 4) Framed: Cinematic's dark room, photos matted in white frames
   (the home Featured wall treatment), captions shown quietly below. --- */
:root[data-skin^="framed"] {
  --bg: #0C0C0E; --surface: #141416; --surface-2: #1C1C20; --ink: #F2F0EA;
  --ink-soft: #B7B4AC; --ink-faint: #7C7A72; --line: #2A2A30; --line-strong: #3A3A41;
  --accent: #7FB6B8; --accent-deep: #9FC8CA; --accent-soft: #14282A; --gold: #C6A45E; --sold: #D2796A;
}
:root[data-skin^="framed"] .gallery-grid {
  columns: 3; column-gap: clamp(10px, 1.6vw, 28px); padding-top: clamp(8px, 1.2vw, 18px);
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-left: clamp(10px, 2.4vw, 40px); padding-right: clamp(10px, 2.4vw, 40px);
}
:root[data-skin^="framed"] .gallery-grid .g-item {
  margin-bottom: clamp(20px, 2.6vw, 44px); background: transparent; border-radius: 0; overflow: visible; box-shadow: none;
}
:root[data-skin^="framed"] .gallery-grid .g-media { overflow: visible; background: transparent; transition: transform .3s var(--ease); }
:root[data-skin^="framed"] .gallery-grid .g-media img,
:root[data-skin^="framed"] .gallery-grid .g-media svg {
  box-sizing: border-box; border: clamp(8px, 1.3vw, 20px) solid #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), 0 16px 40px -18px rgba(0,0,0,.7);
  transition: none;
}
:root[data-skin^="framed"] .gallery-grid .g-item:hover .g-media { transform: translateY(-3px); }
:root[data-skin^="framed"] .gallery-grid .g-item:hover .g-media img,
:root[data-skin^="framed"] .gallery-grid .g-item:hover .g-media svg { transform: none; }
:root[data-skin^="framed"] .gallery-grid .g-overlay {
  position: static; opacity: 1; background: none; color: var(--ink);
  padding: 8px 4px 0; pointer-events: auto;
}
:root[data-skin^="framed"] .g-meta { color: var(--ink-faint); }
:root[data-skin^="framed"] .lb-art { background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
:root[data-skin^="framed"] .lb-art img,
:root[data-skin^="framed"] .lb-art svg {
  box-sizing: border-box; border: clamp(9px, 1.1vw, 18px) solid #fff;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
:root[data-skin^="framed"] .home-gallery .g-overlay { display: none; }
@media (max-width: 1000px) { :root[data-skin^="framed"] .gallery-grid { columns: 2; } }
@media (max-width: 640px) { :root[data-skin^="framed"] .gallery-grid { columns: 1; } }

/* 4b) Wide Mat — the thicker white frame variation */
:root[data-skin="framed-wide"] .gallery-grid .g-media img,
:root[data-skin="framed-wide"] .gallery-grid .g-media svg { border-width: clamp(14px, 2.4vw, 40px); }
:root[data-skin="framed-wide"] .lb-art img,
:root[data-skin="framed-wide"] .lb-art svg { border-width: clamp(16px, 2vw, 34px); }

/* 4c) Thin Mat — an even thinner white frame variation */
:root[data-skin="framed-thin"] .gallery-grid .g-media img,
:root[data-skin="framed-thin"] .gallery-grid .g-media svg { border-width: clamp(3px, 0.5vw, 8px); }
:root[data-skin="framed-thin"] .lb-art img,
:root[data-skin="framed-thin"] .lb-art svg { border-width: clamp(4px, 0.5vw, 9px); }

/* 4d) Mixed Mat — thick mat on thumbnails, thin mat when opened */
:root[data-skin="framed-mixed"] .gallery-grid .g-media img,
:root[data-skin="framed-mixed"] .gallery-grid .g-media svg { border-width: clamp(14px, 2.4vw, 40px); }
:root[data-skin="framed-mixed"] .lb-art img,
:root[data-skin="framed-mixed"] .lb-art svg { border-width: clamp(4px, 0.5vw, 9px); }


/* --- 5) Museum: plaster gallery wall, prints mounted flush, placard below --- */
:root[data-skin="museum"] {
  --bg: #E9E6DF; --surface: #F3F1EA; --surface-2: #E1DDD3; --ink: #232019;
  --ink-soft: #5A554A; --ink-faint: #928C7E; --line: #D3CEC1; --line-strong: #BEB8A8;
  --accent: #3A362D; --accent-deep: #000000; --accent-soft: #DAD5C8;
}
:root[data-skin="museum"] .gallery-grid { columns: 2; column-gap: clamp(28px, 5vw, 90px); padding-top: clamp(12px, 2vw, 28px); }
:root[data-skin="museum"] .gallery-grid .g-item { margin-bottom: clamp(40px, 6vw, 96px); background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
:root[data-skin="museum"] .gallery-grid .g-media { overflow: visible; background: transparent; }
:root[data-skin="museum"] .gallery-grid .g-media img,
:root[data-skin="museum"] .gallery-grid .g-media svg { box-shadow: 0 2px 2px rgba(0,0,0,.06), 0 26px 50px -26px rgba(0,0,0,.42); }
:root[data-skin="museum"] .gallery-grid .g-overlay {
  position: static; opacity: 1; background: none; pointer-events: auto; color: var(--ink);
  text-align: center; align-items: center; padding: clamp(14px, 1.6vw, 20px) 0 0; gap: 4px;
}
:root[data-skin="museum"] .g-title { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.4vw, 18px); }
:root[data-skin="museum"] .g-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-skin="museum"] .home-gallery .g-overlay { display: none; }
@media (max-width: 700px) { :root[data-skin="museum"] .gallery-grid { columns: 1; } }

/* --- 6) Salon: dark gallery, gold accents, dramatic spotlight shadows --- */
:root[data-skin="salon"] {
  --bg: #0E0D10; --surface: #161418; --surface-2: #1E1C21; --ink: #EDEAE3;
  --ink-soft: #B4B0A8; --ink-faint: #807C74; --line: #2A2830; --line-strong: #3A3742;
  --accent: #C9A24B; --accent-deep: #E0BE6B; --accent-soft: #241E12; --gold: #C9A24B;
}
:root[data-skin="salon"] .gallery-grid { columns: 3; column-gap: clamp(20px, 3vw, 48px); padding-top: clamp(10px, 1.6vw, 24px); }
:root[data-skin="salon"] .gallery-grid .g-item { margin-bottom: clamp(24px, 3vw, 52px); background: transparent; border-radius: 2px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); }
:root[data-skin="salon"] .gallery-grid .g-media img,
:root[data-skin="salon"] .gallery-grid .g-media svg { border: 1px solid rgba(0,0,0,.55); }
@media (max-width: 1000px) { :root[data-skin="salon"] .gallery-grid { columns: 2; } }
@media (max-width: 560px) { :root[data-skin="salon"] .gallery-grid { columns: 1; } }

/* --- 7) Book: monograph — single centered column of large plates --- */
:root[data-skin="book"] {
  --bg: #F7F4EC; --surface: #FCFAF3; --surface-2: #ECE7DA; --ink: #2A2620;
  --ink-soft: #5E584C; --ink-faint: #948D7C; --line: #E3DDCD; --line-strong: #D2CAB6;
  --accent: #7A2E22; --accent-deep: #5A2019; --accent-soft: #EFE6D6;
}
:root[data-skin="book"] .gallery-grid { columns: 1; max-width: 820px; margin: 0 auto; column-gap: 0; padding-top: clamp(10px, 2vw, 24px); counter-reset: plate; }
:root[data-skin="book"] .gallery-grid .g-item { margin-bottom: clamp(48px, 7vw, 110px); background: transparent; border-radius: 0; overflow: visible; box-shadow: none; counter-increment: plate; }
:root[data-skin="book"] .gallery-grid .g-media { overflow: visible; background: transparent; }
:root[data-skin="book"] .gallery-grid .g-media img,
:root[data-skin="book"] .gallery-grid .g-media svg { box-shadow: 0 20px 44px -26px rgba(0,0,0,.5); }
:root[data-skin="book"] .gallery-grid .g-overlay {
  position: static; opacity: 1; background: none; pointer-events: auto; color: var(--ink);
  padding: clamp(12px, 1.4vw, 18px) 0 0; gap: 3px;
}
:root[data-skin="book"] .g-title { font-family: var(--serif); font-size: clamp(16px, 1.5vw, 19px); }
:root[data-skin="book"] .g-title::before { content: "Plate " counter(plate) " \2014 "; font-style: italic; color: var(--ink-faint); }
:root[data-skin="book"] .g-meta { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-soft); }
:root[data-skin="book"] .home-gallery .g-overlay { display: none; }


/* --- 8) Monograph: flexible photobook layout — paced scale, diptychs,
   alternating offsets and generous whitespace instead of uniform columns.
   See docs/design/photobook.md. --- */
:root[data-skin="monograph-1"] {
  --bg: #F2EFE8; --surface: #FAF8F2; --surface-2: #E7E3D8; --ink: #221F1A;
  --ink-soft: #57524A; --ink-faint: #938C7E; --line: #E1DBCD; --line-strong: #CFC8B6;
  --accent: #2B2822; --accent-deep: #000000; --accent-soft: #E6E1D4;
}
:root[data-skin="monograph-1"] .gallery-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 3vw, 56px); row-gap: clamp(56px, 9vw, 150px);
  grid-auto-flow: row; align-items: start;
  max-width: 1500px; margin: 0 auto; padding-top: clamp(16px, 3vw, 40px);
}
:root[data-skin="monograph-1"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
:root[data-skin="monograph-1"] .gallery-grid .g-media { overflow: visible; background: transparent; }
:root[data-skin="monograph-1"] .gallery-grid .g-media img,
:root[data-skin="monograph-1"] .gallery-grid .g-media svg { box-shadow: 0 24px 54px -28px rgba(0,0,0,.5); transition: transform .5s var(--ease); }
:root[data-skin="monograph-1"] .gallery-grid .g-item:hover .g-media img,
:root[data-skin="monograph-1"] .gallery-grid .g-item:hover .g-media svg { transform: none; }
/* editorial rhythm: hero -> asymmetric diptych -> left offset -> right offset (repeat) */
:root[data-skin="monograph-1"] .gallery-grid .g-item:nth-child(5n+1) { grid-column: 1 / -1; }
:root[data-skin="monograph-1"] .gallery-grid .g-item:nth-child(5n+2) { grid-column: 1 / 6; }
:root[data-skin="monograph-1"] .gallery-grid .g-item:nth-child(5n+3) { grid-column: 6 / 13; }
:root[data-skin="monograph-1"] .gallery-grid .g-item:nth-child(5n+4) { grid-column: 1 / 8; }
:root[data-skin="monograph-1"] .gallery-grid .g-item:nth-child(5n+5) { grid-column: 6 / 13; }
:root[data-skin="monograph-1"] .gallery-grid .g-overlay { display: none; }
:root[data-skin="monograph-1"] .lb-art { background: transparent; }
@media (max-width: 820px) {
  :root[data-skin="monograph-1"] .gallery-grid { row-gap: clamp(34px, 9vw, 72px); }
  :root[data-skin="monograph-1"] .gallery-grid .g-item { grid-column: 1 / -1 !important; }
}

/* ============================================================
   New modern / contemporary, photo-forward skins
   ============================================================ */

/* --- Full Bleed: seamless edge-to-edge photo mosaic, zero chrome --- */
:root[data-skin="bleed"] {
  --bg: #09090A; --surface: #121214; --surface-2: #171719; --ink: #F0EEE8;
  --ink-soft: #B2AFA8; --ink-faint: #78756E; --line: #242429; --line-strong: #34343A;
}
:root[data-skin="bleed"] .gallery-grid { columns: 4; column-gap: 0; padding: 0; width: 100vw; margin-left: calc(50% - 50vw); }
:root[data-skin="bleed"] .gallery-grid .g-item { margin: 0; border-radius: 0; background: #09090A; }
:root[data-skin="bleed"] .gallery-grid .g-item:hover .g-media img { transform: scale(1.03); }
:root[data-skin="bleed"] .g-overlay { background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 58%); }
:root[data-skin="bleed"] .section--showcase { background: #09090A; }
:root[data-skin="bleed"] .home-gallery { columns: 3; column-gap: 0; padding: 0; }
:root[data-skin="bleed"] .home-gallery .g-item { margin: 0; }
:root[data-skin="bleed"] .home-gallery .g-media img { border: none; box-shadow: none; }
@media (max-width: 1000px) { :root[data-skin="bleed"] .gallery-grid, :root[data-skin="bleed"] .home-gallery { columns: 2; } }
@media (max-width: 560px) { :root[data-skin="bleed"] .gallery-grid, :root[data-skin="bleed"] .home-gallery { columns: 1; } }

/* --- Grid: uniform tiles, tight, contemporary index --- */
:root[data-skin="grid"] {
  --bg: #F6F6F3; --surface: #FFFFFF; --surface-2: #EAEAE6; --ink: #16161A;
  --ink-soft: #55555B; --ink-faint: #97978F; --line: #E3E3DE; --line-strong: #D2D2CC;
}
:root[data-skin="grid"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 21vw, 300px), 1fr)); gap: clamp(6px, 0.7vw, 12px); padding-top: clamp(6px, 1vw, 14px); }
:root[data-skin="grid"] .gallery-grid .g-item { margin: 0; border-radius: 0; }
:root[data-skin="grid"] .gallery-grid .g-media img,
:root[data-skin="grid"] .gallery-grid .g-media svg { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
:root[data-skin="grid"] .g-overlay { background: linear-gradient(to top, rgba(10,10,12,.72), rgba(10,10,12,0) 56%); }
:root[data-skin="grid"] .section--showcase { background: var(--bg); }
:root[data-skin="grid"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="grid"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="grid"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="grid"] .home-gallery { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 19vw, 250px), 1fr)); gap: clamp(6px, 0.7vw, 12px); padding: clamp(6px, 1vw, 14px) clamp(10px, 1.6vw, 28px) 0; }
:root[data-skin="grid"] .home-gallery .g-item { margin: 0; }
:root[data-skin="grid"] .home-gallery .g-media img { border: none; box-shadow: none; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* --- Contemporary: cool neutral, spacious, photos float with quiet labels --- */
:root[data-skin="contemporary"] {
  --bg: #E9E9E7; --surface: #F3F3F1; --surface-2: #DDDDDA; --ink: #1A1A1C;
  --ink-soft: #55555A; --ink-faint: #8C8C8D; --line: #D5D5D2; --line-strong: #C2C2BE; --accent: #38383B;
}
:root[data-skin="contemporary"] .gallery-grid { columns: 2; column-gap: clamp(26px, 4vw, 64px); padding-top: clamp(12px, 2vw, 30px); }
:root[data-skin="contemporary"] .gallery-grid .g-item { margin-bottom: clamp(44px, 5vw, 88px); background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="contemporary"] .gallery-grid .g-media { overflow: visible; }
:root[data-skin="contemporary"] .gallery-grid .g-media img,
:root[data-skin="contemporary"] .gallery-grid .g-media svg { box-shadow: 0 34px 64px -34px rgba(0,0,0,.42); }
:root[data-skin="contemporary"] .gallery-grid .g-item:hover .g-media img,
:root[data-skin="contemporary"] .gallery-grid .g-item:hover .g-media svg { transform: none; }
:root[data-skin="contemporary"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); padding: 15px 2px 0; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 14px; pointer-events: auto; }
:root[data-skin="contemporary"] .g-title { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
:root[data-skin="contemporary"] .g-meta { color: var(--ink-faint); }
:root[data-skin="contemporary"] .section--showcase { background: var(--bg); }
:root[data-skin="contemporary"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="contemporary"] .section--showcase .eyebrow { color: var(--ink-faint); }
:root[data-skin="contemporary"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="contemporary"] .home-gallery { columns: 2; column-gap: clamp(26px, 4vw, 64px); padding: clamp(12px, 2vw, 30px) clamp(20px, 4vw, 72px) 0; }
:root[data-skin="contemporary"] .home-gallery .g-item { margin-bottom: clamp(44px, 5vw, 88px); }
:root[data-skin="contemporary"] .home-gallery .g-media img { border: none; box-shadow: 0 34px 64px -34px rgba(0,0,0,.42); }
:root[data-skin="contemporary"] .home-gallery .g-overlay { display: flex; position: static; opacity: 1; background: none; color: var(--ink); padding: 15px 2px 0; flex-direction: row; justify-content: space-between; align-items: baseline; }
@media (max-width: 720px) { :root[data-skin="contemporary"] .gallery-grid, :root[data-skin="contemporary"] .home-gallery { columns: 1; } }

/* ============================================================
   Bolder exploratory skins
   ============================================================ */

/* --- Spotlight: one oversized photo per row, cinematic scroll --- */
:root[data-skin="spotlight"] {
  --bg: #0E0E10; --surface: #161618; --surface-2: #1C1C20; --ink: #F2F0EA;
  --ink-soft: #B4B1AA; --ink-faint: #7C7A72; --line: #28282E; --line-strong: #3A3A41;
}
:root[data-skin="spotlight"] .gallery-grid { columns: unset; display: block; max-width: 1100px; margin: 0 auto; padding-top: clamp(10px, 2vw, 30px); }
:root[data-skin="spotlight"] .gallery-grid .g-item { margin: 0 0 clamp(60px, 9vw, 150px); border-radius: 0; background: transparent; }
:root[data-skin="spotlight"] .gallery-grid .g-media img,
:root[data-skin="spotlight"] .gallery-grid .g-media svg { box-shadow: 0 50px 100px -40px rgba(0,0,0,.85); }
:root[data-skin="spotlight"] .gallery-grid .g-item:hover .g-media img { transform: none; }
:root[data-skin="spotlight"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); text-align: center; align-items: center; padding: 22px 0 0; }
:root[data-skin="spotlight"] .g-title { font-size: clamp(20px, 2.4vw, 30px); }
:root[data-skin="spotlight"] .g-meta { color: var(--ink-faint); }
:root[data-skin="spotlight"] .section--showcase { background: #0E0E10; }
:root[data-skin="spotlight"] .home-gallery { columns: unset; display: block; max-width: 1100px; margin: 0 auto; padding: clamp(10px, 2vw, 30px) clamp(16px, 3vw, 40px) 0; }
:root[data-skin="spotlight"] .home-gallery .g-item { margin: 0 0 clamp(52px, 8vw, 130px); }
:root[data-skin="spotlight"] .home-gallery .g-media img { border: none; box-shadow: 0 50px 100px -40px rgba(0,0,0,.85); }
:root[data-skin="spotlight"] .home-gallery .g-overlay { display: flex; position: static; opacity: 1; background: none; color: var(--ink); text-align: center; align-items: center; padding: 22px 0 0; }

/* --- Duotone: high-contrast B&W, colour on hover --- */
:root[data-skin="duotone-1"] {
  --bg: #EDEBE4; --surface: #F6F4EE; --surface-2: #E0DDD3; --ink: #171613;
  --ink-soft: #54524B; --ink-faint: #918E84; --line: #DAD6CA; --line-strong: #C9C4B7;
}
:root[data-skin="duotone-1"] .gallery-grid .g-media img,
:root[data-skin="duotone-1"] .gallery-grid .g-media svg { filter: grayscale(1) contrast(1.06); transition: filter .5s var(--ease), transform .6s var(--ease); }
:root[data-skin="duotone-1"] .gallery-grid .g-item:hover .g-media img,
:root[data-skin="duotone-1"] .gallery-grid .g-item:hover .g-media svg { filter: grayscale(0) contrast(1); }
:root[data-skin="duotone-1"] .g-overlay { background: linear-gradient(to top, rgba(20,18,14,.78), rgba(20,18,14,0) 55%); }
:root[data-skin="duotone-1"] .section--showcase { background: var(--bg); }
:root[data-skin="duotone-1"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="duotone-1"] .section--showcase .eyebrow { color: var(--ink-faint); }
:root[data-skin="duotone-1"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="duotone-1"] .home-gallery .g-media img { border: 10px solid var(--surface); box-shadow: 0 14px 34px -18px rgba(0,0,0,.4); filter: grayscale(1) contrast(1.06); transition: filter .5s var(--ease); }
:root[data-skin="duotone-1"] .home-gallery .g-item:hover .g-media img { filter: grayscale(0) contrast(1); }

/* --- Brutalist: stark exposed grid, hard black rules, mono type --- */
:root[data-skin="brutalist"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0F0F0; --ink: #000000;
  --ink-soft: #1A1A1A; --ink-faint: #666666; --line: #000000; --line-strong: #000000; --accent: #000000;
}
:root[data-skin="brutalist"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 24vw, 340px), 1fr)); gap: 0; border-top: 2px solid #000; border-left: 2px solid #000; padding: 0; }
:root[data-skin="brutalist"] .gallery-grid .g-item { margin: 0; border-radius: 0; border-right: 2px solid #000; border-bottom: 2px solid #000; background: #fff; }
:root[data-skin="brutalist"] .gallery-grid .g-media img,
:root[data-skin="brutalist"] .gallery-grid .g-media svg { aspect-ratio: 1 / 1; object-fit: cover; }
:root[data-skin="brutalist"] .gallery-grid .g-item:hover .g-media img { transform: none; }
:root[data-skin="brutalist"] .g-overlay { position: static; inset: auto; opacity: 1; background: #fff; color: #000; border-top: 2px solid #000; padding: 8px 10px; flex-direction: row; justify-content: space-between; align-items: baseline; }
:root[data-skin="brutalist"] .g-title { font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: #000; }
:root[data-skin="brutalist"] .g-meta { font-family: var(--mono); color: #000; }
:root[data-skin="brutalist"] .section--showcase { background: #fff; }
:root[data-skin="brutalist"] .section--showcase .section-head h2 { color: #000; }
:root[data-skin="brutalist"] .section--showcase .eyebrow { color: #000; }
:root[data-skin="brutalist"] .section--showcase .link-arrow { color: #000; }
:root[data-skin="brutalist"] .home-gallery { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 21vw, 300px), 1fr)); gap: 0; padding: 0 clamp(10px, 1.6vw, 28px); border-top: 2px solid #000; border-left: 2px solid #000; }
:root[data-skin="brutalist"] .home-gallery .g-item { margin: 0; border-right: 2px solid #000; border-bottom: 2px solid #000; }
:root[data-skin="brutalist"] .home-gallery .g-media img { border: none; box-shadow: none; aspect-ratio: 1 / 1; object-fit: cover; }
:root[data-skin="brutalist"] .home-gallery .g-overlay { display: flex; position: static; opacity: 1; background: #fff; color: #000; border-top: 2px solid #000; padding: 8px 10px; flex-direction: row; justify-content: space-between; }

/* --- Filmstrip: horizontal scrolling strip of full-height frames --- */
:root[data-skin="filmstrip"] {
  --bg: #0C0C0D; --surface: #141416; --surface-2: #1A1A1D; --ink: #F2F0EA;
  --ink-soft: #B4B1AA; --ink-faint: #7C7A72; --line: #26262B; --line-strong: #35353B;
}
:root[data-skin="filmstrip"] .gallery-grid { columns: unset; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: clamp(10px, 1.2vw, 20px); padding: clamp(10px, 2vw, 28px) clamp(16px, 3vw, 40px) clamp(20px, 3vw, 36px); width: 100vw; margin-left: calc(50% - 50vw); scroll-snap-type: x proximity; }
:root[data-skin="filmstrip"] .gallery-grid .g-item { flex: 0 0 auto; width: auto; height: clamp(320px, 62vh, 640px); margin: 0; border-radius: 0; background: transparent; scroll-snap-align: start; }
:root[data-skin="filmstrip"] .gallery-grid .g-media { height: 100%; }
:root[data-skin="filmstrip"] .gallery-grid .g-media img,
:root[data-skin="filmstrip"] .gallery-grid .g-media svg { height: 100%; width: auto; max-width: none; object-fit: contain; }
:root[data-skin="filmstrip"] .gallery-grid .g-item:hover .g-media img { transform: none; }
:root[data-skin="filmstrip"] .g-overlay { background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 55%); }
:root[data-skin="filmstrip"] .section--showcase { background: #0C0C0D; }
:root[data-skin="filmstrip"] .home-gallery { columns: unset; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: clamp(10px, 1.2vw, 20px); padding: clamp(10px, 2vw, 28px) clamp(16px, 3vw, 40px) clamp(20px, 3vw, 36px); width: 100vw; margin-left: calc(50% - 50vw); scroll-snap-type: x proximity; }
:root[data-skin="filmstrip"] .home-gallery .g-item { flex: 0 0 auto; width: auto; height: clamp(300px, 58vh, 600px); margin: 0; scroll-snap-align: start; }
:root[data-skin="filmstrip"] .home-gallery .g-media { height: 100%; }
:root[data-skin="filmstrip"] .home-gallery .g-media img { border: none; box-shadow: 0 20px 44px -24px rgba(0,0,0,.7); height: 100%; width: auto; max-width: none; object-fit: contain; }
:root[data-skin="filmstrip"] .home-gallery .g-overlay { display: none; }

/* ============================================================
   Art-book & editorial skins (image + explanation, not a grid)
   ============================================================ */

/* --- Folio: alternating photo / text spreads, like an art book --- */
:root[data-skin="folio-1"] {
  --bg: #F5F2EA; --surface: #FBF9F2; --surface-2: #EAE5D9; --ink: #1A1813;
  --ink-soft: #57534A; --ink-faint: #948F82; --line: #DED9CC; --line-strong: #CCC6B6;
}
:root[data-skin="folio-1"] .gallery-grid { columns: unset; display: block; max-width: 1080px; margin: 0 auto; padding-top: clamp(12px, 2vw, 32px); }
:root[data-skin="folio-1"] .gallery-grid .g-item,
:root[data-skin="folio-1"] .home-gallery .g-item {
  display: grid; grid-template-columns: 1.4fr 1fr; column-gap: clamp(24px, 4vw, 64px);
  align-items: center; margin: 0 0 clamp(50px, 7vw, 116px); background: transparent; border-radius: 0; overflow: visible; text-align: left;
}
:root[data-skin="folio-1"] .g-media { grid-column: 1; grid-row: 1 / 3; overflow: visible; }
:root[data-skin="folio-1"] .g-media img, :root[data-skin="folio-1"] .g-media svg { border: none !important; box-shadow: 0 30px 60px -32px rgba(0,0,0,.4); }
:root[data-skin="folio-1"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="folio-1"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); padding: 0; display: block; grid-column: 2; grid-row: 1; align-self: end; }
:root[data-skin="folio-1"] .g-note { display: block; grid-column: 2; grid-row: 2; align-self: start; font-family: var(--serif); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; color: var(--ink-soft); max-width: 34ch; margin-top: 14px; }
:root[data-skin="folio-1"] .g-title { display: block; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; color: var(--ink); margin-bottom: 8px; }
:root[data-skin="folio-1"] .g-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-skin="folio-1"] .g-item:nth-child(even) { grid-template-columns: 1fr 1.4fr; }
:root[data-skin="folio-1"] .g-item:nth-child(even) .g-media { grid-column: 2; }
:root[data-skin="folio-1"] .g-item:nth-child(even) .g-overlay,
:root[data-skin="folio-1"] .g-item:nth-child(even) .g-note { grid-column: 1; }
:root[data-skin="folio-1"] .section--showcase { background: var(--bg); }
:root[data-skin="folio-1"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="folio-1"] .section--showcase .eyebrow { color: var(--ink-faint); }
:root[data-skin="folio-1"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="folio-1"] .home-gallery { columns: unset; display: block; max-width: 1080px; margin: 0 auto; padding: clamp(12px, 2vw, 32px) clamp(20px, 4vw, 56px) 0; }
:root[data-skin="folio-1"] .home-gallery .g-overlay { display: block; }
@media (max-width: 760px) {
  :root[data-skin="folio-1"] .gallery-grid .g-item, :root[data-skin="folio-1"] .home-gallery .g-item { display: block; }
  :root[data-skin="folio-1"] .g-media { margin-bottom: 16px; }
  :root[data-skin="folio-1"] .g-note { max-width: none; }
}

/* --- Plates: exhibition-catalog plates, centered caption + note below --- */
:root[data-skin="plates"] {
  --bg: #FAF9F5; --surface: #FFFFFF; --surface-2: #EFEDE6; --ink: #181712;
  --ink-soft: #54524B; --ink-faint: #9A968B; --line: #E6E2D8; --line-strong: #D5D0C3;
}
:root[data-skin="plates"] .gallery-grid { columns: unset; display: block; max-width: 820px; margin: 0 auto; padding-top: clamp(12px, 2vw, 32px); }
:root[data-skin="plates"] .gallery-grid .g-item,
:root[data-skin="plates"] .home-gallery .g-item { margin: 0 0 clamp(54px, 8vw, 116px); background: transparent; border-radius: 0; overflow: visible; text-align: center; }
:root[data-skin="plates"] .g-media img, :root[data-skin="plates"] .g-media svg { border: none !important; box-shadow: 0 24px 54px -30px rgba(0,0,0,.34); }
:root[data-skin="plates"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="plates"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 22px 0 0; text-align: center; }
:root[data-skin="plates"] .g-title { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.8vw, 25px); color: var(--ink); }
:root[data-skin="plates"] .g-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 7px; }
:root[data-skin="plates"] .g-note { display: block; font-family: var(--serif); font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 54ch; margin: 13px auto 0; }
:root[data-skin="plates"] .section--showcase { background: var(--bg); }
:root[data-skin="plates"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="plates"] .section--showcase .eyebrow { color: var(--ink-faint); }
:root[data-skin="plates"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="plates"] .home-gallery { columns: unset; display: block; max-width: 820px; margin: 0 auto; padding: clamp(12px, 2vw, 32px) clamp(20px, 4vw, 40px) 0; }
:root[data-skin="plates"] .home-gallery .g-overlay { display: block; }

/* --- Poster: bold oversized type over the image --- */
:root[data-skin="poster"] {
  --bg: #100F12; --surface: #19181C; --surface-2: #201F24; --ink: #F4F1EA;
  --ink-soft: #B6B2AA; --ink-faint: #7C7970; --line: #28272C; --line-strong: #38373D;
}
:root[data-skin="poster"] .gallery-grid { columns: 2; column-gap: clamp(14px, 2vw, 30px); }
:root[data-skin="poster"] .g-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.84) 0%, rgba(0,0,0,.16) 46%, transparent 70%); justify-content: flex-end; padding: clamp(16px, 2vw, 32px); }
:root[data-skin="poster"] .g-title { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.2vw, 52px); line-height: 1.0; color: #fff; }
:root[data-skin="poster"] .g-meta { font-family: var(--mono); color: rgba(255,255,255,.78); margin-top: 6px; }
:root[data-skin="poster"] .section--showcase { background: #100F12; }
:root[data-skin="poster"] .home-gallery .g-media img { border: none; box-shadow: none; }
:root[data-skin="poster"] .home-gallery .g-overlay { display: flex; opacity: 1; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.84), transparent 66%); justify-content: flex-end; padding: clamp(16px, 2vw, 32px); color: #fff; }
:root[data-skin="poster"] .home-gallery .g-title { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.6vw, 42px); line-height: 1.0; color: #fff; }
@media (max-width: 700px) { :root[data-skin="poster"] .gallery-grid { columns: 1; } }

/* --- Slate: moody cool blue-grey, cinematic calm --- */
:root[data-skin="slate"] {
  --bg: #1B2027; --surface: #232A33; --surface-2: #2B333D; --ink: #E7ECF0;
  --ink-soft: #A9B4BF; --ink-faint: #6E7A85; --line: #333C46; --line-strong: #44505C;
  --accent: #8FB0C4; --accent-deep: #AAC6D6; --accent-soft: #1E2A33;
}
:root[data-skin="slate"] .gallery-grid .g-item { box-shadow: 0 20px 46px -24px rgba(0,0,0,.75); }
:root[data-skin="slate"] .g-overlay { background: linear-gradient(to top, rgba(8,12,17,.85), rgba(8,12,17,0) 56%); }
:root[data-skin="slate"] .section--showcase { background: #12161C; }
:root[data-skin="slate"] .home-gallery .g-media img { border: none; box-shadow: 0 20px 46px -24px rgba(0,0,0,.75); }

/* ============================================================
   Reference-led skins — designers, editors, galleries, books
   ============================================================ */

/* --- Ma (間): Kenya Hara / MUJI — emptiness; plates adrift in white --- */
/* ============================================================
   Ma 間 · version 1 (ORIGINAL) — the centred void.
   Preserved as a rateable variant alongside ma-2. Its reading of Ma is
   the calm, symmetric, evenly-spaced centre column. (Kept verbatim so the
   two versions can be compared side by side in the rating loop.)
   ============================================================ */
:root[data-skin="ma-1"] {
  --bg: #FCFBF8; --surface: #FFFFFF; --surface-2: #F2F0EA; --ink: #23211C;
  --ink-soft: #6A675E; --ink-faint: #A8A499; --line: #E9E6DD; --line-strong: #D8D4C8;
}
:root[data-skin="ma-1"] .gallery-grid { columns: unset; display: block; max-width: 600px; margin: 0 auto; padding-top: clamp(40px, 9vw, 130px); }
:root[data-skin="ma-1"] .gallery-grid .g-item,
:root[data-skin="ma-1"] .home-gallery .g-item { margin: 0 auto clamp(90px, 16vw, 230px); background: transparent; border-radius: 0; overflow: visible; text-align: center; }
:root[data-skin="ma-1"] .g-media img, :root[data-skin="ma-1"] .g-media svg { border: none !important; box-shadow: none; }
:root[data-skin="ma-1"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="ma-1"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: clamp(20px, 3vw, 40px) 0 0; text-align: center; }
:root[data-skin="ma-1"] .g-title { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .04em; color: var(--ink-soft); }
:root[data-skin="ma-1"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }
:root[data-skin="ma-1"] .section--showcase { background: var(--bg); }
:root[data-skin="ma-1"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="ma-1"] .section--showcase .eyebrow { color: var(--ink-faint); }
:root[data-skin="ma-1"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="ma-1"] .home-gallery { columns: unset; display: block; max-width: 600px; margin: 0 auto; padding: clamp(40px, 9vw, 130px) clamp(16px, 4vw, 40px) 0; }
:root[data-skin="ma-1"] .home-gallery .g-media img { border: none; box-shadow: none; }
:root[data-skin="ma-1"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); text-align: center; padding: clamp(20px, 3vw, 40px) 0 0; }

/* Ma 間 · version 2 (NEW — tension held). See whole-site block below. */
:root[data-skin="ma-2"] {
  --bg: #FCFBF8; --surface: #FFFFFF; --surface-2: #F2F0EA; --ink: #23211C;
  --ink-soft: #6A675E; --ink-faint: #A8A499; --line: #E9E6DD; --line-strong: #D8D4C8;
}
/* Ma gallery — each image is OFF-PLACED, not centred: items alternate to the
   left and right edge of a wide track so the void between them reads as a
   directional, held interval rather than an even, resolved column. */
:root[data-skin="ma-2"] .gallery-grid { columns: unset; display: block; max-width: 980px; margin: 0 auto; padding-top: clamp(40px, 9vw, 130px); }
:root[data-skin="ma-2"] .gallery-grid .g-item,
:root[data-skin="ma-2"] .home-gallery .g-item { width: min(62%, 560px); margin: 0 0 clamp(90px, 16vw, 230px); background: transparent; border-radius: 0; overflow: visible; text-align: left; }
:root[data-skin="ma-2"] .gallery-grid .g-item:nth-child(odd),
:root[data-skin="ma-2"] .home-gallery .g-item:nth-child(odd) { margin-left: 0; margin-right: auto; }
:root[data-skin="ma-2"] .gallery-grid .g-item:nth-child(even),
:root[data-skin="ma-2"] .home-gallery .g-item:nth-child(even) { margin-left: auto; margin-right: 0; text-align: right; }
:root[data-skin="ma-2"] .g-media img, :root[data-skin="ma-2"] .g-media svg { border: none !important; box-shadow: none; }
:root[data-skin="ma-2"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="ma-2"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: clamp(20px, 3vw, 40px) 0 0; text-align: inherit; }
:root[data-skin="ma-2"] .g-title { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .04em; color: var(--ink-soft); }
:root[data-skin="ma-2"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }
:root[data-skin="ma-2"] .section--showcase { background: var(--bg); }
:root[data-skin="ma-2"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="ma-2"] .section--showcase .eyebrow { color: var(--ink-faint); }
:root[data-skin="ma-2"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="ma-2"] .home-gallery { columns: unset; display: block; max-width: 980px; margin: 0 auto; padding: clamp(40px, 9vw, 130px) clamp(16px, 4vw, 40px) 0; }
:root[data-skin="ma-2"] .home-gallery .g-media img { border: none; box-shadow: none; }
:root[data-skin="ma-2"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); text-align: inherit; padding: clamp(20px, 3vw, 40px) 0 0; }

/* --- Tategaki (縦書き): Japanese vertical setting beside each frame --- */
:root[data-skin="tategaki"] {
  --bg: #F4F1E8; --surface: #FBF9F2; --surface-2: #E7E2D5; --ink: #201C15;
  --ink-soft: #57534A; --ink-faint: #948F82; --line: #DDD8CB; --line-strong: #CCC6B7; --accent: #8A3A2E;
}
:root[data-skin="tategaki"] .gallery-grid { columns: unset; display: block; max-width: 1000px; margin: 0 auto; padding-top: clamp(16px, 2.4vw, 36px); }
:root[data-skin="tategaki"] .gallery-grid .g-item,
:root[data-skin="tategaki"] .home-gallery .g-item { display: flex; align-items: flex-start; gap: clamp(18px, 2.4vw, 40px); margin: 0 0 clamp(48px, 7vw, 110px); background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="tategaki"] .g-media { flex: 1 1 auto; min-width: 0; overflow: visible; }
:root[data-skin="tategaki"] .g-media img, :root[data-skin="tategaki"] .g-media svg { border: none !important; box-shadow: 0 26px 54px -30px rgba(0,0,0,.34); }
:root[data-skin="tategaki"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="tategaki"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); flex: 0 0 clamp(120px, 18%, 200px); display: flex; flex-direction: column; gap: 8px; padding: 4px 0; align-items: flex-start; }
:root[data-skin="tategaki"] .g-title { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 23px); letter-spacing: .03em; line-height: 1.2; color: var(--ink); }
:root[data-skin="tategaki"] .g-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
:root[data-skin="tategaki"] .g-item:nth-child(even) { flex-direction: row-reverse; }
:root[data-skin="tategaki"] .section--showcase { background: var(--bg); }
:root[data-skin="tategaki"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="tategaki"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="tategaki"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="tategaki"] .home-gallery { columns: unset; display: block; max-width: 1000px; margin: 0 auto; padding: clamp(16px, 2.4vw, 36px) clamp(20px, 4vw, 48px) 0; }
:root[data-skin="tategaki"] .home-gallery .g-media img { border: none; box-shadow: 0 26px 54px -30px rgba(0,0,0,.34); }
:root[data-skin="tategaki"] .home-gallery .g-overlay { display: flex; flex-direction: column; gap: 8px; position: static; opacity: 1; background: none; color: var(--ink); flex: 0 0 clamp(120px, 18%, 200px); padding: 4px 0; }
@media (max-width: 640px) {
  :root[data-skin="tategaki"] .gallery-grid .g-item, :root[data-skin="tategaki"] .home-gallery .g-item { gap: 12px; }
  :root[data-skin="tategaki"] .g-title { font-size: 16px; }
}

/* --- Bazaar: Alexey Brodovitch / Harper's Bazaar — dynamic asymmetry --- */
:root[data-skin="bazaar"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1EFEA; --ink: #111010;
  --ink-soft: #514E49; --ink-faint: #928E86; --line: #E7E3DA; --line-strong: #D3CEC3; --accent: #C8102E;
}
:root[data-skin="bazaar"] .gallery-grid { columns: unset; display: block; max-width: 1160px; margin: 0 auto; padding-top: clamp(20px, 3vw, 50px); }
:root[data-skin="bazaar"] .gallery-grid .g-item,
:root[data-skin="bazaar"] .home-gallery .g-item { display: block; margin: 0 0 clamp(60px, 9vw, 150px); background: transparent; border-radius: 0; overflow: visible; width: 66%; }
:root[data-skin="bazaar"] .g-media img, :root[data-skin="bazaar"] .g-media svg { border: none !important; box-shadow: 0 40px 80px -40px rgba(0,0,0,.4); }
:root[data-skin="bazaar"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="bazaar"] .gallery-grid .g-item:nth-child(4n+1), :root[data-skin="bazaar"] .home-gallery .g-item:nth-child(4n+1) { width: 58%; margin-left: 0; }
:root[data-skin="bazaar"] .gallery-grid .g-item:nth-child(4n+2), :root[data-skin="bazaar"] .home-gallery .g-item:nth-child(4n+2) { width: 44%; margin-left: auto; margin-right: 5%; }
:root[data-skin="bazaar"] .gallery-grid .g-item:nth-child(4n+3), :root[data-skin="bazaar"] .home-gallery .g-item:nth-child(4n+3) { width: 90%; margin-left: auto; margin-right: auto; }
:root[data-skin="bazaar"] .gallery-grid .g-item:nth-child(4n), :root[data-skin="bazaar"] .home-gallery .g-item:nth-child(4n) { width: 50%; margin-left: 12%; }
:root[data-skin="bazaar"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 16px 2px 0; }
:root[data-skin="bazaar"] .g-title { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.2vw, 32px); line-height: 1.05; color: var(--ink); }
:root[data-skin="bazaar"] .g-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
:root[data-skin="bazaar"] .section--showcase { background: var(--bg); }
:root[data-skin="bazaar"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="bazaar"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="bazaar"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="bazaar"] .home-gallery { columns: unset; display: block; max-width: 1160px; margin: 0 auto; padding: clamp(20px, 3vw, 50px) clamp(20px, 4vw, 56px) 0; }
:root[data-skin="bazaar"] .home-gallery .g-media img { border: none; box-shadow: 0 40px 80px -40px rgba(0,0,0,.4); }
:root[data-skin="bazaar"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); padding: 16px 2px 0; }
@media (max-width: 760px) {
  :root[data-skin="bazaar"] .gallery-grid .g-item, :root[data-skin="bazaar"] .home-gallery .g-item,
  :root[data-skin="bazaar"] .gallery-grid .g-item:nth-child(4n+1), :root[data-skin="bazaar"] .gallery-grid .g-item:nth-child(4n+2),
  :root[data-skin="bazaar"] .gallery-grid .g-item:nth-child(4n+3), :root[data-skin="bazaar"] .gallery-grid .g-item:nth-child(4n),
  :root[data-skin="bazaar"] .home-gallery .g-item:nth-child(4n+1), :root[data-skin="bazaar"] .home-gallery .g-item:nth-child(4n+2),
  :root[data-skin="bazaar"] .home-gallery .g-item:nth-child(4n+3), :root[data-skin="bazaar"] .home-gallery .g-item:nth-child(4n) { width: 100%; margin-left: 0; margin-right: 0; }
}

/* --- Unigrid: Massimo Vignelli — red hairline grid, numbered plates --- */
:root[data-skin="unigrid"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F4F4F2; --ink: #111111;
  --ink-soft: #3A3A3A; --ink-faint: #7A7A7A; --line: #111111; --line-strong: #111111; --accent: #E3140A;
}
:root[data-skin="unigrid"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(210px, 26vw, 320px), 1fr)); gap: 0; counter-reset: plate; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
:root[data-skin="unigrid"] .gallery-grid .g-item { counter-increment: plate; margin: 0; border-radius: 0; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); background: #fff; overflow: hidden; }
:root[data-skin="unigrid"] .g-media { padding: clamp(12px, 1.4vw, 20px) clamp(12px, 1.4vw, 20px) 0; }
:root[data-skin="unigrid"] .g-media img, :root[data-skin="unigrid"] .g-media svg { aspect-ratio: 4 / 5; object-fit: cover; }
:root[data-skin="unigrid"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="unigrid"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 10px clamp(12px, 1.4vw, 20px) 13px; }
:root[data-skin="unigrid"] .g-overlay::before { content: "No. " counter(plate, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-bottom: 6px; }
:root[data-skin="unigrid"] .g-title { display: block; font-family: var(--sans); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .03em; line-height: 1.25; color: var(--ink); }
:root[data-skin="unigrid"] .g-meta { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .01em; color: var(--ink-faint); margin-top: 2px; }
:root[data-skin="unigrid"] .section--showcase { background: #fff; }
:root[data-skin="unigrid"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="unigrid"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="unigrid"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="unigrid"] .home-gallery { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 23vw, 300px), 1fr)); gap: 0; counter-reset: plate; padding: 0 clamp(10px, 1.6vw, 28px); border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
:root[data-skin="unigrid"] .home-gallery .g-item { counter-increment: plate; margin: 0; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); overflow: hidden; }
:root[data-skin="unigrid"] .home-gallery .g-media img { border: none; box-shadow: none; aspect-ratio: 4 / 5; object-fit: cover; }
:root[data-skin="unigrid"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); padding: 10px clamp(12px, 1.4vw, 20px) 13px; }
:root[data-skin="unigrid"] .home-gallery .g-overlay::before { content: "No. " counter(plate, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-bottom: 6px; }
@media (max-width: 560px) {
  :root[data-skin="unigrid"] .gallery-grid, :root[data-skin="unigrid"] .home-gallery { grid-template-columns: 1fr 1fr; }
}

/* --- Blue Chip: Gagosian / Zwirner — monumental single column on white --- */
:root[data-skin="bluechip"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F3F3F3; --ink: #161616;
  --ink-soft: #5A5A5A; --ink-faint: #9A9A9A; --line: #EAEAEA; --line-strong: #D6D6D6;
}
:root[data-skin="bluechip"] .gallery-grid { columns: unset; display: block; max-width: 1000px; margin: 0 auto; padding-top: clamp(24px, 4vw, 70px); }
:root[data-skin="bluechip"] .gallery-grid .g-item,
:root[data-skin="bluechip"] .home-gallery .g-item { margin: 0 auto clamp(72px, 11vw, 170px); background: transparent; border-radius: 0; overflow: visible; text-align: center; }
:root[data-skin="bluechip"] .g-media img, :root[data-skin="bluechip"] .g-media svg { border: none !important; box-shadow: none; }
:root[data-skin="bluechip"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="bluechip"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 18px 0 0; text-align: center; }
:root[data-skin="bluechip"] .g-title { display: block; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
:root[data-skin="bluechip"] .g-meta { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .01em; color: var(--ink-faint); margin-top: 6px; }
:root[data-skin="bluechip"] .section--showcase { background: var(--bg); }
:root[data-skin="bluechip"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="bluechip"] .section--showcase .eyebrow { color: var(--ink-faint); }
:root[data-skin="bluechip"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="bluechip"] .home-gallery { columns: unset; display: block; max-width: 1000px; margin: 0 auto; padding: clamp(24px, 4vw, 70px) clamp(16px, 4vw, 40px) 0; }
:root[data-skin="bluechip"] .home-gallery .g-media img { border: none; box-shadow: none; }
:root[data-skin="bluechip"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); text-align: center; padding: 18px 0 0; }

/* --- Sabi: wabi-sabi — warm tea-toned sepia plates on textured paper --- */
:root[data-skin="sabi"] {
  --bg: #E9E1D2; --surface: #F1EADC; --surface-2: #DED4C0; --ink: #2A241B;
  --ink-soft: #5E564A; --ink-faint: #948B79; --line: #D3C8B2; --line-strong: #BFB39A; --accent: #7A5A3A;
}
:root[data-skin="sabi"] .gallery-grid { columns: 2; column-gap: clamp(24px, 3.6vw, 60px); padding-top: clamp(12px, 2vw, 30px); }
:root[data-skin="sabi"] .gallery-grid .g-item { margin-bottom: clamp(34px, 4.6vw, 80px); background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="sabi"] .gallery-grid .g-media { overflow: visible; }
:root[data-skin="sabi"] .gallery-grid .g-media img, :root[data-skin="sabi"] .gallery-grid .g-media svg { filter: sepia(.42) saturate(.82) contrast(.98) brightness(1.02); box-shadow: 0 30px 58px -32px rgba(60,45,25,.5); }
:root[data-skin="sabi"] .gallery-grid .g-item:hover .g-media img { transform: none; }
:root[data-skin="sabi"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 15px 2px 0; }
:root[data-skin="sabi"] .g-title { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.7vw, 22px); color: var(--ink); }
:root[data-skin="sabi"] .g-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
:root[data-skin="sabi"] .section--showcase { background: var(--bg); }
:root[data-skin="sabi"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="sabi"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="sabi"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="sabi"] .home-gallery { columns: 2; column-gap: clamp(24px, 3.6vw, 60px); padding: clamp(12px, 2vw, 30px) clamp(16px, 3vw, 40px) 0; }
:root[data-skin="sabi"] .home-gallery .g-media img { border: none; box-shadow: 0 30px 58px -32px rgba(60,45,25,.5); filter: sepia(.42) saturate(.82) contrast(.98) brightness(1.02); }
:root[data-skin="sabi"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); padding: 15px 2px 0; }
@media (max-width: 720px) {
  :root[data-skin="sabi"] .gallery-grid, :root[data-skin="sabi"] .home-gallery { columns: 1; }
}

/* --- Swiss: Josef Müller-Brockmann — objective column grid, red accent --- */
:root[data-skin="swiss"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F2F0; --ink: #0E0E0E;
  --ink-soft: #3C3C3C; --ink-faint: #7C7C7C; --line: #E2E2E0; --line-strong: #111111; --accent: #D81E05;
}
:root[data-skin="swiss"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px) clamp(16px, 2vw, 30px); padding-top: clamp(14px, 2vw, 30px); }
:root[data-skin="swiss"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="swiss"] .g-media img, :root[data-skin="swiss"] .g-media svg { aspect-ratio: 4 / 5; object-fit: cover; }
:root[data-skin="swiss"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="swiss"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; margin-top: 9px; padding: 9px 0 0; border-top: 2px solid var(--accent); }
:root[data-skin="swiss"] .g-title { display: block; font-family: var(--sans); font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--ink); }
:root[data-skin="swiss"] .g-meta { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
:root[data-skin="swiss"] .section--showcase { background: #fff; }
:root[data-skin="swiss"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="swiss"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="swiss"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="swiss"] .home-gallery { columns: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px) clamp(16px, 2vw, 30px); padding: clamp(14px, 2vw, 30px) clamp(10px, 1.6vw, 28px) 0; }
:root[data-skin="swiss"] .home-gallery .g-item { margin: 0; }
:root[data-skin="swiss"] .home-gallery .g-media img { border: none; box-shadow: none; aspect-ratio: 4 / 5; object-fit: cover; }
:root[data-skin="swiss"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); margin-top: 9px; padding: 9px 0 0; border-top: 2px solid var(--accent); }
@media (max-width: 700px) { :root[data-skin="swiss"] .gallery-grid, :root[data-skin="swiss"] .home-gallery { grid-template-columns: 1fr 1fr; } }

/* --- Saville: Peter Saville — art-historical restraint, muted, tracked caps --- */
:root[data-skin="saville-1"] {
  --bg: #E3E2DC; --surface: #ECEBE5; --surface-2: #D6D5CD; --ink: #26261F;
  --ink-soft: #55554C; --ink-faint: #8E8E84; --line: #CFCEC4; --line-strong: #BBBAAF; --accent: #6E7B6A;
}
:root[data-skin="saville-1"] .gallery-grid { columns: 2; column-gap: clamp(30px, 5vw, 84px); padding-top: clamp(16px, 2.4vw, 40px); }
:root[data-skin="saville-1"] .gallery-grid .g-item { margin-bottom: clamp(44px, 6vw, 100px); background: transparent; border-radius: 0; overflow: visible; text-align: center; }
:root[data-skin="saville-1"] .gallery-grid .g-media { overflow: visible; }
:root[data-skin="saville-1"] .gallery-grid .g-media img, :root[data-skin="saville-1"] .gallery-grid .g-media svg { filter: saturate(.8) contrast(.97); box-shadow: 0 24px 54px -30px rgba(0,0,0,.34); }
:root[data-skin="saville-1"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="saville-1"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 20px 0 0; text-align: center; }
:root[data-skin="saville-1"] .g-title { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: .34em; text-transform: uppercase; color: var(--ink); }
:root[data-skin="saville-1"] .g-meta { display: block; font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: .02em; color: var(--ink-faint); margin-top: 9px; }
:root[data-skin="saville-1"] .section--showcase { background: var(--bg); }
:root[data-skin="saville-1"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="saville-1"] .section--showcase .eyebrow { color: var(--ink-faint); }
:root[data-skin="saville-1"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="saville-1"] .home-gallery { columns: 2; column-gap: clamp(30px, 5vw, 84px); padding: clamp(16px, 2.4vw, 40px) clamp(20px, 4vw, 56px) 0; }
:root[data-skin="saville-1"] .home-gallery .g-media img { border: none; box-shadow: 0 24px 54px -30px rgba(0,0,0,.34); filter: saturate(.8) contrast(.97); }
:root[data-skin="saville-1"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); text-align: center; padding: 20px 0 0; }
@media (max-width: 720px) { :root[data-skin="saville-1"] .gallery-grid, :root[data-skin="saville-1"] .home-gallery { columns: 1; } }

/* --- Essay: Aperture-style photo-essay — reading column, drop-cap text --- */
:root[data-skin="essay"] {
  --bg: #FBFAF7; --surface: #FFFFFF; --surface-2: #EFEDE6; --ink: #1B1A15;
  --ink-soft: #4E4B43; --ink-faint: #938F84; --line: #E6E2D8; --line-strong: #D5D0C3; --accent: #9A3B2E;
}
:root[data-skin="essay"] .gallery-grid { columns: unset; display: block; max-width: 660px; margin: 0 auto; padding-top: clamp(16px, 2.4vw, 40px); }
:root[data-skin="essay"] .gallery-grid .g-item,
:root[data-skin="essay"] .home-gallery .g-item { margin: 0 0 clamp(50px, 7vw, 104px); background: transparent; border-radius: 0; overflow: visible; text-align: left; }
:root[data-skin="essay"] .g-media img, :root[data-skin="essay"] .g-media svg { border: none !important; box-shadow: 0 24px 50px -30px rgba(0,0,0,.3); }
:root[data-skin="essay"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="essay"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 18px 0 0; }
:root[data-skin="essay"] .g-title { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; color: var(--ink); }
:root[data-skin="essay"] .g-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
:root[data-skin="essay"] .g-note { display: block; font-family: var(--serif); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.75; color: var(--ink-soft); margin-top: 15px; }
:root[data-skin="essay"] .g-note::first-letter { float: left; font-family: var(--serif); font-size: 3.1em; line-height: .82; padding: 6px 10px 0 0; color: var(--ink); }
:root[data-skin="essay"] .section--showcase { background: var(--bg); }
:root[data-skin="essay"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="essay"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="essay"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="essay"] .home-gallery { columns: unset; display: block; max-width: 660px; margin: 0 auto; padding: clamp(16px, 2.4vw, 40px) clamp(20px, 4vw, 40px) 0; }
:root[data-skin="essay"] .home-gallery .g-media img { border: none; box-shadow: 0 24px 50px -30px rgba(0,0,0,.3); }
:root[data-skin="essay"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); padding: 18px 0 0; }

/* --- Riso: Risograph zine — fluoro duotone ink, DIY mono type --- */
:root[data-skin="riso"] {
  --bg: #F3EFE3; --surface: #F3EFE3; --surface-2: #E7E0CE; --ink: #1B1A17;
  --ink-soft: #45423B; --ink-faint: #8A8578; --line: #D8D0BC; --line-strong: #C4BAA1; --accent: #FF3E7F;
}
:root[data-skin="riso"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 24vw, 300px), 1fr)); gap: clamp(18px, 2.4vw, 36px); padding-top: clamp(14px, 2vw, 30px); }
:root[data-skin="riso"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="riso"] .gallery-grid .g-media { background: var(--accent); overflow: hidden; }
:root[data-skin="riso"] .gallery-grid .g-media img, :root[data-skin="riso"] .gallery-grid .g-media svg { aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: multiply; }
:root[data-skin="riso"] .gallery-grid .g-item:hover .g-media img { transform: none; }
:root[data-skin="riso"] .gallery-grid .g-item:nth-child(3n+2) .g-media { background: #2C7FFF; }
:root[data-skin="riso"] .gallery-grid .g-item:nth-child(3n) .g-media { background: #17B890; }
:root[data-skin="riso"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 9px 0 0; }
:root[data-skin="riso"] .g-title { display: block; font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .02em; color: var(--ink); }
:root[data-skin="riso"] .g-meta { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
:root[data-skin="riso"] .section--showcase { background: var(--bg); }
:root[data-skin="riso"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="riso"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="riso"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="riso"] .home-gallery { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 22vw, 280px), 1fr)); gap: clamp(18px, 2.4vw, 36px); padding: clamp(14px, 2vw, 30px) clamp(10px, 1.6vw, 28px) 0; }
:root[data-skin="riso"] .home-gallery .g-item { margin: 0; }
:root[data-skin="riso"] .home-gallery .g-media { background: var(--accent); overflow: hidden; }
:root[data-skin="riso"] .home-gallery .g-item:nth-child(3n+2) .g-media { background: #2C7FFF; }
:root[data-skin="riso"] .home-gallery .g-item:nth-child(3n) .g-media { background: #17B890; }
:root[data-skin="riso"] .home-gallery .g-media img { border: none; box-shadow: none; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: multiply; }
:root[data-skin="riso"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); padding: 9px 0 0; }
@media (max-width: 560px) { :root[data-skin="riso"] .gallery-grid, :root[data-skin="riso"] .home-gallery { grid-template-columns: 1fr 1fr; } }

/* --- Contact: 35mm contact sheet — tiny uniform frames on a light table --- */
:root[data-skin="contact"] {
  --bg: #17150F; --surface: #1E1B14; --surface-2: #242017; --ink: #EFE7D4;
  --ink-soft: #C6BCA2; --ink-faint: #8E856E; --line: #33301F; --line-strong: #45412C; --accent: #E9A23B;
}
:root[data-skin="contact"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 15vw, 180px), 1fr)); gap: clamp(12px, 1.6vw, 22px) clamp(8px, 1vw, 14px); counter-reset: frame; padding-top: clamp(14px, 2vw, 30px); }
:root[data-skin="contact"] .gallery-grid .g-item { counter-increment: frame; margin: 0; background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="contact"] .g-media { border: 1px solid var(--line-strong); padding: 3px; background: #0C0B07; overflow: hidden; }
:root[data-skin="contact"] .g-media img, :root[data-skin="contact"] .g-media svg { aspect-ratio: 3 / 2; object-fit: cover; }
:root[data-skin="contact"] .g-item:hover .g-media img { transform: none; filter: brightness(1.12); }
:root[data-skin="contact"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink-soft); display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 1px 0; }
:root[data-skin="contact"] .g-overlay::before { content: counter(frame, decimal-leading-zero) "A"; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--accent); flex: 0 0 auto; }
:root[data-skin="contact"] .g-title { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-skin="contact"] .g-meta { display: none; }
:root[data-skin="contact"] .section--showcase { background: #121009; }
:root[data-skin="contact"] .home-gallery { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 13vw, 170px), 1fr)); gap: clamp(12px, 1.6vw, 22px) clamp(8px, 1vw, 14px); counter-reset: frame; padding: clamp(14px, 2vw, 30px) clamp(10px, 1.6vw, 28px) 0; }
:root[data-skin="contact"] .home-gallery .g-item { counter-increment: frame; margin: 0; }
:root[data-skin="contact"] .home-gallery .g-media { border: 1px solid var(--line-strong); padding: 3px; background: #0C0B07; overflow: hidden; }
:root[data-skin="contact"] .home-gallery .g-media img { border: none; box-shadow: none; aspect-ratio: 3 / 2; object-fit: cover; }
:root[data-skin="contact"] .home-gallery .g-overlay { display: flex; position: static; opacity: 1; background: none; color: var(--ink-soft); flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 1px 0; }
:root[data-skin="contact"] .home-gallery .g-overlay::before { content: counter(frame, decimal-leading-zero) "A"; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--accent); flex: 0 0 auto; }

/* ============================================================
   Reference-led skins — Los Angeles / new wave (LA lineage)
   See docs/design/traditions.md §4. Use the bold gesture sparingly;
   the photograph still leads.
   ============================================================ */

/* --- Newwave: April Greiman — spatial layering, skewed type chips --- */
:root[data-skin="newwave"] {
  --bg: #F4F3EF; --surface: #FFFFFF; --surface-2: #E6E5DF; --ink: #141318;
  --ink-soft: #45444C; --ink-faint: #86858E; --line: #DAD9D2; --line-strong: #C6C5BC;
  --accent: #E5007D; --accent-cyan: #00A6B8;
}
:root[data-skin="newwave"] .gallery-grid { columns: 2; column-gap: clamp(24px, 4vw, 64px); padding-top: clamp(20px, 3vw, 48px); }
:root[data-skin="newwave"] .gallery-grid .g-item { margin-bottom: clamp(44px, 6vw, 96px); background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="newwave"] .gallery-grid .g-item:nth-child(even) { margin-top: clamp(20px, 5vw, 70px); }
:root[data-skin="newwave"] .gallery-grid .g-media img, :root[data-skin="newwave"] .gallery-grid .g-media svg { box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); }
:root[data-skin="newwave"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="newwave"] .g-overlay { position: relative; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 0; margin: -22px 0 0 -6px; }
:root[data-skin="newwave"] .g-title { display: inline-block; font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.8vw, 22px); letter-spacing: .01em; line-height: 1; color: #fff; background: var(--accent); padding: 7px 11px; transform: skewX(-8deg); }
:root[data-skin="newwave"] .g-meta { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-cyan); margin: 12px 0 0 4px; }
:root[data-skin="newwave"] .section--showcase { background: var(--bg); }
:root[data-skin="newwave"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="newwave"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="newwave"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="newwave"] .home-gallery { columns: 2; column-gap: clamp(24px, 4vw, 64px); padding: clamp(20px, 3vw, 48px) clamp(20px, 4vw, 56px) 0; }
:root[data-skin="newwave"] .home-gallery .g-item { margin-bottom: clamp(44px, 6vw, 96px); }
:root[data-skin="newwave"] .home-gallery .g-item:nth-child(even) { margin-top: clamp(20px, 5vw, 70px); }
:root[data-skin="newwave"] .home-gallery .g-media img { border: none; box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); }
:root[data-skin="newwave"] .home-gallery .g-overlay { display: block; position: relative; opacity: 1; background: none; margin: -22px 0 0 -6px; padding: 0; }
@media (max-width: 700px) {
  :root[data-skin="newwave"] .gallery-grid, :root[data-skin="newwave"] .home-gallery { columns: 1; }
  :root[data-skin="newwave"] .gallery-grid .g-item:nth-child(even), :root[data-skin="newwave"] .home-gallery .g-item:nth-child(even) { margin-top: 0; }
}

/* --- Ruscha: Ed Ruscha — word-as-image, oversized deadpan all-caps --- */
:root[data-skin="ruscha"] {
  --bg: #ECE7D8; --surface: #F3EFE3; --surface-2: #DED8C6; --ink: #1E1B14;
  --ink-soft: #524D40; --ink-faint: #928B79; --line: #D6CFBB; --line-strong: #C3BAA1; --accent: #E8622A;
}
:root[data-skin="ruscha"] .gallery-grid { columns: unset; display: block; max-width: 1000px; margin: 0 auto; padding-top: clamp(20px, 3vw, 50px); }
:root[data-skin="ruscha"] .gallery-grid .g-item,
:root[data-skin="ruscha"] .home-gallery .g-item { margin: 0 0 clamp(56px, 8vw, 130px); background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="ruscha"] .g-media img, :root[data-skin="ruscha"] .g-media svg { border: none !important; box-shadow: 0 30px 64px -36px rgba(0,0,0,.4); }
:root[data-skin="ruscha"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="ruscha"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 18px 0 0; }
:root[data-skin="ruscha"] .g-title { display: block; font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 6vw, 74px); line-height: .92; letter-spacing: -.01em; color: var(--ink); }
:root[data-skin="ruscha"] .g-meta { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: 12px; }
:root[data-skin="ruscha"] .section--showcase { background: var(--bg); }
:root[data-skin="ruscha"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="ruscha"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="ruscha"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="ruscha"] .home-gallery { columns: unset; display: block; max-width: 1000px; margin: 0 auto; padding: clamp(20px, 3vw, 50px) clamp(20px, 4vw, 40px) 0; }
:root[data-skin="ruscha"] .home-gallery .g-media img { border: none; box-shadow: 0 30px 64px -36px rgba(0,0,0,.4); }
:root[data-skin="ruscha"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: none; color: var(--ink); padding: 18px 0 0; }

/* --- Supergraphic: Deborah Sussman — saturated colour blocks, label chips --- */
:root[data-skin="supergraphic"] {
  --bg: #FBFAF7; --surface: #FBFAF7; --surface-2: #EFEDE6; --ink: #16151A;
  --ink-soft: #45444C; --ink-faint: #86858E; --line: #E0DED6; --line-strong: #CCCABC; --accent: #FF4E2A;
}
:root[data-skin="supergraphic"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 26vw, 340px), 1fr)); gap: clamp(14px, 2vw, 26px); padding-top: clamp(16px, 2vw, 32px); }
:root[data-skin="supergraphic"] .gallery-grid .g-item,
:root[data-skin="supergraphic"] .home-gallery .g-item { margin: 0; background: var(--accent); border-radius: 0; overflow: hidden; padding: clamp(12px, 1.4vw, 20px); }
:root[data-skin="supergraphic"] .gallery-grid .g-item:nth-child(5n+2), :root[data-skin="supergraphic"] .home-gallery .g-item:nth-child(5n+2) { background: #1F6FEB; }
:root[data-skin="supergraphic"] .gallery-grid .g-item:nth-child(5n+3), :root[data-skin="supergraphic"] .home-gallery .g-item:nth-child(5n+3) { background: #F4B400; }
:root[data-skin="supergraphic"] .gallery-grid .g-item:nth-child(5n+4), :root[data-skin="supergraphic"] .home-gallery .g-item:nth-child(5n+4) { background: #00A98F; }
:root[data-skin="supergraphic"] .gallery-grid .g-item:nth-child(5n+5), :root[data-skin="supergraphic"] .home-gallery .g-item:nth-child(5n+5) { background: #7A3FF2; }
:root[data-skin="supergraphic"] .g-media { overflow: hidden; }
:root[data-skin="supergraphic"] .g-media img, :root[data-skin="supergraphic"] .g-media svg { aspect-ratio: 1 / 1; object-fit: cover; }
:root[data-skin="supergraphic"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="supergraphic"] .g-overlay { position: static; inset: auto; opacity: 1; background: #fff; color: var(--ink); display: block; padding: 9px 11px; margin-top: clamp(12px, 1.4vw, 20px); }
:root[data-skin="supergraphic"] .g-title { display: block; font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .02em; line-height: 1.2; color: var(--ink); }
:root[data-skin="supergraphic"] .g-meta { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
:root[data-skin="supergraphic"] .section--showcase { background: var(--bg); }
:root[data-skin="supergraphic"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="supergraphic"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="supergraphic"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="supergraphic"] .home-gallery { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 24vw, 320px), 1fr)); gap: clamp(14px, 2vw, 26px); padding: clamp(16px, 2vw, 32px) clamp(10px, 1.6vw, 28px) 0; }
:root[data-skin="supergraphic"] .home-gallery .g-media img { border: none; box-shadow: none; aspect-ratio: 1 / 1; object-fit: cover; }
:root[data-skin="supergraphic"] .home-gallery .g-overlay { display: block; position: static; opacity: 1; background: #fff; color: var(--ink); padding: 9px 11px; margin-top: clamp(12px, 1.4vw, 20px); }
@media (max-width: 560px) {
  :root[data-skin="supergraphic"] .gallery-grid, :root[data-skin="supergraphic"] .home-gallery { grid-template-columns: 1fr 1fr; }
}

/* --- Brodovitch: NY editorial spread (Harper's Bazaar) — 12-col asymmetry, feature row --- */
:root[data-skin="brodovitch"] {
  --bg: #F7F5F0; --surface: #FFFFFF; --surface-2: #ECE9E1; --ink: #14130F;
  --ink-soft: #4E4B43; --ink-faint: #928E82; --line: #E4E0D5; --line-strong: #CFC9BB;
}
:root[data-skin="brodovitch"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(26px, 4vw, 70px) clamp(20px, 3vw, 48px); padding-top: clamp(16px, 2.4vw, 40px); }
:root[data-skin="brodovitch"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; position: relative; }
:root[data-skin="brodovitch"] .gallery-grid .g-item:nth-child(4n+1) { grid-column: 1 / -1; }
:root[data-skin="brodovitch"] .gallery-grid .g-item:nth-child(4n+2) { grid-column: 1 / 6; align-self: end; }
:root[data-skin="brodovitch"] .gallery-grid .g-item:nth-child(4n+3) { grid-column: 7 / 13; }
:root[data-skin="brodovitch"] .gallery-grid .g-item:nth-child(4n+0) { grid-column: 3 / 11; }
:root[data-skin="brodovitch"] .g-media { overflow: hidden; background: var(--surface-2); }
:root[data-skin="brodovitch"] .g-media img, :root[data-skin="brodovitch"] .g-media svg { border: none !important; box-shadow: 0 30px 60px -34px rgba(0,0,0,.4); }
:root[data-skin="brodovitch"] .gallery-grid .g-item:nth-child(4n+1) .g-media img { width: 100%; height: min(78vh, 820px); object-fit: cover; }
:root[data-skin="brodovitch"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="brodovitch"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: 14px 2px 0; color: var(--ink); }
:root[data-skin="brodovitch"] .g-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.4vw, 40px); line-height: 1.04; color: var(--ink); }
:root[data-skin="brodovitch"] .g-meta { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
:root[data-skin="brodovitch"] .home-gallery .g-overlay { display: none; }
:root[data-skin="brodovitch"] .section--showcase { background: var(--bg); }
:root[data-skin="brodovitch"] .section--showcase .section-head h2 { color: var(--ink); font-family: var(--serif); font-style: italic; }
:root[data-skin="brodovitch"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="brodovitch"] .lb-art { background: transparent; }
@media (max-width: 820px) {
  :root[data-skin="brodovitch"] .gallery-grid .g-item[class] { grid-column: 1 / -1 !important; }
}

/* --- Aperture: museum / Tate exhibition catalogue — full-bleed plates, tombstone captions --- */
:root[data-skin="aperture"] {
  --bg: #F4F1EA; --surface: #FCFAF5; --surface-2: #E7E2D6; --ink: #1A1813;
  --ink-soft: #4A463C; --ink-faint: #8C877A; --line: #DED8C9; --line-strong: #C6BFAD;
}
:root[data-skin="aperture"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(48px, 6vw, 120px) clamp(30px, 4vw, 72px); padding-top: clamp(20px, 3vw, 48px); }
:root[data-skin="aperture"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
:root[data-skin="aperture"] .g-media { overflow: hidden; background: var(--surface-2); }
:root[data-skin="aperture"] .g-media img, :root[data-skin="aperture"] .g-media svg { border: none !important; width: 100%; height: min(72vh, 760px); object-fit: cover; box-shadow: 0 24px 54px -34px rgba(0,0,0,.42); }
:root[data-skin="aperture"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="aperture"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: 16px 2px 0; margin-top: 14px; border-top: 1px solid var(--line-strong); color: var(--ink); }
:root[data-skin="aperture"] .g-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.2; color: var(--ink); }
:root[data-skin="aperture"] .g-meta { font-family: var(--serif); font-size: 12px; letter-spacing: .02em; color: var(--ink-faint); margin-top: 5px; }
:root[data-skin="aperture"] .g-note { font-family: var(--serif); font-size: 12.5px; line-height: 1.5; text-align: justify; color: var(--ink-soft); margin-top: 8px; max-width: 46ch; }
:root[data-skin="aperture"] .home-gallery .g-overlay { display: none; }
:root[data-skin="aperture"] .section--showcase { background: var(--bg); }
:root[data-skin="aperture"] .section--showcase .section-head h2 { color: var(--ink); font-family: var(--serif); font-style: italic; }
:root[data-skin="aperture"] .lb-art { background: transparent; }
@media (max-width: 720px) { :root[data-skin="aperture"] .gallery-grid { grid-template-columns: 1fr; } :root[data-skin="aperture"] .g-media img { height: min(62vh, 560px); } }

/* --- Zwirner: blue-chip gallery web (Zwirner / Gagosian / Pace) — work-first, vast even gutters, hover caption --- */
:root[data-skin="zwirner"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F2F2F0; --ink: #111111;
  --ink-soft: #555555; --ink-faint: #999999; --line: #EAEAE8; --line-strong: #D5D5D2;
}
:root[data-skin="zwirner"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(56px, 7vw, 132px) clamp(36px, 4.5vw, 80px); padding-top: clamp(24px, 3.4vw, 56px); }
:root[data-skin="zwirner"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; position: relative; }
:root[data-skin="zwirner"] .g-media { overflow: hidden; background: var(--surface-2); }
:root[data-skin="zwirner"] .g-media img, :root[data-skin="zwirner"] .g-media svg { border: none !important; box-shadow: none; }
:root[data-skin="zwirner"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="zwirner"] .g-overlay { opacity: 0; background: none; position: static; inset: auto; display: block; padding: 14px 2px 0; color: var(--ink); transition: opacity .28s ease; }
:root[data-skin="zwirner"] .g-item:hover .g-overlay, :root[data-skin="zwirner"] .g-item:focus-within .g-overlay { opacity: 1; }
:root[data-skin="zwirner"] .g-title { font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: .01em; line-height: 1.35; color: var(--ink); }
:root[data-skin="zwirner"] .g-meta { font-family: var(--sans); font-size: 12.5px; letter-spacing: .01em; color: var(--ink-faint); margin-top: 3px; }
:root[data-skin="zwirner"] .home-gallery .g-overlay { display: none; }
:root[data-skin="zwirner"] .section--showcase { background: var(--bg); }
:root[data-skin="zwirner"] .section--showcase .section-head h2 { color: var(--ink); font-family: var(--sans); font-weight: 400; }
:root[data-skin="zwirner"] .lb-art { background: transparent; }
@media (max-width: 900px) { :root[data-skin="zwirner"] .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { :root[data-skin="zwirner"] .gallery-grid { grid-template-columns: 1fr; } :root[data-skin="zwirner"] .g-overlay { opacity: 1; } }

/* --- Taschen: maximalist art book — saturated glossy plates, oversized overlapping display titles --- */
:root[data-skin="taschen"] {
  --bg: #120E0A; --surface: #1C1610; --surface-2: #261E15; --ink: #F6EFE4;
  --ink-soft: #C9BCA6; --ink-faint: #9A8B72; --line: #2E2519; --line-strong: #453722;
  --accent: #E7B23C; --accent-deep: #F4C860;
}
:root[data-skin="taschen"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 3.6vw, 66px); padding-top: clamp(14px, 2vw, 32px); }
:root[data-skin="taschen"] .gallery-grid .g-item { margin: 0; border-radius: 0; overflow: hidden; background: #000; box-shadow: 0 30px 64px -30px rgba(0,0,0,.7); position: relative; }
:root[data-skin="taschen"] .gallery-grid .g-item:nth-child(3n+1) { grid-column: 1 / -1; }
:root[data-skin="taschen"] .g-media img, :root[data-skin="taschen"] .g-media svg { border: none !important; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.28) contrast(1.08); }
:root[data-skin="taschen"] .gallery-grid .g-item:nth-child(3n+1) .g-media img { height: min(80vh, 860px); }
:root[data-skin="taschen"] .g-item:hover .g-media img { transform: scale(1.03); filter: saturate(1.42) contrast(1.12); }
:root[data-skin="taschen"] .g-overlay { opacity: 1; background: linear-gradient(to top, rgba(18,14,10,.9) 0%, rgba(18,14,10,.15) 46%, transparent 74%); justify-content: flex-end; padding: clamp(16px, 2vw, 34px); }
:root[data-skin="taschen"] .g-title { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 4.4vw, 68px); line-height: 0.92; letter-spacing: -0.015em; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
:root[data-skin="taschen"] .g-meta { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); margin-top: 10px; }
:root[data-skin="taschen"] .section--showcase { background: var(--bg); }
:root[data-skin="taschen"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="taschen"] .home-gallery .g-media img { border: none; box-shadow: none; }
:root[data-skin="taschen"] .lb-art { background: #000; }
@media (max-width: 640px) { :root[data-skin="taschen"] .gallery-grid { grid-template-columns: 1fr; } :root[data-skin="taschen"] .gallery-grid .g-item:nth-child(3n+1) { grid-column: auto; } }

/* --- Fleckhaus: twen magazine — brash condensed caps on colour blocks, grayscale plates, 12-col rhythm --- */
:root[data-skin="fleckhaus"] {
  --bg: #EFECE6; --surface: #FFFFFF; --surface-2: #E2DED6; --ink: #14120F;
  --ink-soft: #45423B; --ink-faint: #837E74; --line: #D8D3C8; --line-strong: #BEB8AA;
  --accent: #E8481F; --accent-deep: #FF5A2E; --accent-ink: #FFFFFF;
}
:root[data-skin="fleckhaus"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.8vw, 30px); padding-top: clamp(12px, 1.8vw, 28px); }
:root[data-skin="fleckhaus"] .gallery-grid .g-item { margin: 0; border-radius: 0; overflow: hidden; background: var(--ink); box-shadow: none; position: relative; }
:root[data-skin="fleckhaus"] .gallery-grid .g-item:nth-child(5n+1) { grid-column: 1 / 8; }
:root[data-skin="fleckhaus"] .gallery-grid .g-item:nth-child(5n+2) { grid-column: 8 / 13; }
:root[data-skin="fleckhaus"] .gallery-grid .g-item:nth-child(5n+3) { grid-column: 1 / 5; }
:root[data-skin="fleckhaus"] .gallery-grid .g-item:nth-child(5n+4) { grid-column: 5 / 13; }
:root[data-skin="fleckhaus"] .gallery-grid .g-item:nth-child(5n+0) { grid-column: 1 / -1; }
:root[data-skin="fleckhaus"] .g-media img, :root[data-skin="fleckhaus"] .g-media svg { border: none !important; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); }
:root[data-skin="fleckhaus"] .gallery-grid .g-item:nth-child(5n+1) .g-media img { height: min(66vh, 640px); }
:root[data-skin="fleckhaus"] .gallery-grid .g-item:nth-child(5n+0) .g-media img { height: min(78vh, 780px); }
:root[data-skin="fleckhaus"] .g-item:hover .g-media img { transform: none; filter: grayscale(0) contrast(1.05); }
:root[data-skin="fleckhaus"] .g-overlay { opacity: 1; background: var(--accent); justify-content: flex-end; padding: clamp(12px, 1.4vw, 22px); mix-blend-mode: normal; }
:root[data-skin="fleckhaus"] .g-title { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.8vw, 46px); line-height: 0.9; letter-spacing: -0.02em; color: var(--accent-ink); }
:root[data-skin="fleckhaus"] .g-meta { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); opacity: .8; margin-top: 8px; }
:root[data-skin="fleckhaus"] .home-gallery .g-media img { border: none; box-shadow: none; }
:root[data-skin="fleckhaus"] .section--showcase { background: var(--ink); }
:root[data-skin="fleckhaus"] .section--showcase .section-head h2 { color: var(--accent-ink); font-family: var(--sans); font-weight: 800; text-transform: uppercase; }
:root[data-skin="fleckhaus"] .section--showcase .eyebrow { color: var(--accent-deep); }
:root[data-skin="fleckhaus"] .lb-art { background: transparent; }
@media (max-width: 820px) {
  :root[data-skin="fleckhaus"] .gallery-grid .g-item[class] { grid-column: 1 / -1 !important; }
  :root[data-skin="fleckhaus"] .gallery-grid .g-item .g-media img { height: min(60vh, 520px) !important; }
}

/* --- Tillmans: mixed-scale, borderless, no hierarchy (magazine-wall) --- */
:root[data-skin="tillmans"] {
  --bg: #FBFAF8; --surface: #FFFFFF; --surface-2: #F0EEE9; --ink: #17150F;
  --ink-soft: #4C493F; --ink-faint: #918C80; --line: #E7E3D9; --line-strong: #D3CEC1;
}
:root[data-skin="tillmans"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 76px) clamp(18px, 2.6vw, 46px); align-items: start; padding-top: clamp(16px, 2.4vw, 40px); }
:root[data-skin="tillmans"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
:root[data-skin="tillmans"] .gallery-grid .g-item:nth-child(6n+1) { grid-column: 1 / 7; }
:root[data-skin="tillmans"] .gallery-grid .g-item:nth-child(6n+2) { grid-column: 8 / 11; align-self: end; }
:root[data-skin="tillmans"] .gallery-grid .g-item:nth-child(6n+3) { grid-column: 11 / 13; }
:root[data-skin="tillmans"] .gallery-grid .g-item:nth-child(6n+4) { grid-column: 2 / 6; }
:root[data-skin="tillmans"] .gallery-grid .g-item:nth-child(6n+5) { grid-column: 6 / 13; }
:root[data-skin="tillmans"] .gallery-grid .g-item:nth-child(6n+0) { grid-column: 1 / 5; align-self: end; }
:root[data-skin="tillmans"] .g-media { overflow: hidden; background: var(--surface-2); }
:root[data-skin="tillmans"] .g-media img, :root[data-skin="tillmans"] .g-media svg { border: none !important; box-shadow: none; }
:root[data-skin="tillmans"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="tillmans"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: 8px 1px 0; color: var(--ink); }
:root[data-skin="tillmans"] .g-title { font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.3; color: var(--ink); }
:root[data-skin="tillmans"] .g-meta { font-family: var(--sans); font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
:root[data-skin="tillmans"] .home-gallery .g-overlay { display: none; }
:root[data-skin="tillmans"] .section--showcase { background: var(--bg); }
:root[data-skin="tillmans"] .lb-art { background: transparent; }
@media (max-width: 820px) { :root[data-skin="tillmans"] .gallery-grid .g-item[class] { grid-column: 1 / -1 !important; } }

/* --- Moriyama: are-bure-boke — grainy high-contrast B&W, dense, restless --- */
:root[data-skin="moriyama"] {
  --bg: #090909; --surface: #111; --surface-2: #161616; --ink: #ECECEC;
  --ink-soft: #B4B4B4; --ink-faint: #7C7C7C; --line: #242424; --line-strong: #333;
}
:root[data-skin="moriyama"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 220px), 1fr)); gap: 4px; padding-top: clamp(10px, 1.4vw, 22px); }
:root[data-skin="moriyama"] .gallery-grid .g-item { margin: 0; background: #000; border-radius: 0; overflow: hidden; box-shadow: none; }
:root[data-skin="moriyama"] .g-media img, :root[data-skin="moriyama"] .g-media svg { border: none !important; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1) contrast(1.55) brightness(.9); }
:root[data-skin="moriyama"] .g-item:hover .g-media img { transform: scale(1.05); filter: grayscale(1) contrast(1.75) brightness(.95); }
:root[data-skin="moriyama"] .g-overlay { opacity: 0; background: linear-gradient(to top, rgba(0,0,0,.9), transparent 60%); }
:root[data-skin="moriyama"] .g-item:hover .g-overlay { opacity: 1; }
:root[data-skin="moriyama"] .g-title { font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; color: #fff; }
:root[data-skin="moriyama"] .g-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 4px; }
:root[data-skin="moriyama"] .section--showcase { background: #090909; }
:root[data-skin="moriyama"] .home-gallery .g-media img { border: none; box-shadow: none; filter: grayscale(1) contrast(1.5) brightness(.9); }
:root[data-skin="moriyama"] .lb-art { background: #000; }

/* --- Sugimoto: ultra-minimal, very large plates, vast meditative spacing --- */
:root[data-skin="sugimoto"] {
  --bg: #EDEEEC; --surface: #F6F6F4; --surface-2: #E2E3E0; --ink: #24262A;
  --ink-soft: #565A5F; --ink-faint: #9CA0A2; --line: #DBDCD9; --line-strong: #C6C7C3;
}
:root[data-skin="sugimoto"] .gallery-grid { columns: unset; display: grid; grid-template-columns: 1fr; max-width: 1120px; margin: 0 auto; gap: clamp(120px, 20vw, 320px); padding-top: clamp(60px, 12vw, 180px); }
:root[data-skin="sugimoto"] .gallery-grid .g-item { margin: 0; text-align: center; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
:root[data-skin="sugimoto"] .g-media img, :root[data-skin="sugimoto"] .g-media svg { border: none !important; width: 100%; height: min(80vh, 880px); object-fit: cover; box-shadow: 0 40px 90px -52px rgba(0,0,0,.5); }
:root[data-skin="sugimoto"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="sugimoto"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: clamp(22px, 3vw, 44px) 0 0; text-align: center; color: var(--ink); }
:root[data-skin="sugimoto"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .04em; color: var(--ink-soft); }
:root[data-skin="sugimoto"] .g-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }
:root[data-skin="sugimoto"] .home-gallery .g-overlay { display: none; }
:root[data-skin="sugimoto"] .section--showcase { background: var(--bg); }
:root[data-skin="sugimoto"] .lb-art { background: transparent; }

/* --- Eggleston: democratic vivid-colour uniform grid, eye-level --- */
:root[data-skin="eggleston"] {
  --bg: #FAF7F1; --surface: #FFFFFF; --surface-2: #EFEAE0; --ink: #1C1A15;
  --ink-soft: #4E4A40; --ink-faint: #948E80; --line: #E6E0D3; --line-strong: #D2CBBB; --accent: #C1272D;
}
:root[data-skin="eggleston"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 42px); padding-top: clamp(14px, 2vw, 34px); }
:root[data-skin="eggleston"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: hidden; box-shadow: 0 14px 32px -24px rgba(0,0,0,.45); }
:root[data-skin="eggleston"] .g-media img, :root[data-skin="eggleston"] .g-media svg { border: none !important; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: saturate(1.22) contrast(1.03); }
:root[data-skin="eggleston"] .g-item:hover .g-media img { transform: none; filter: saturate(1.32) contrast(1.05); }
:root[data-skin="eggleston"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: 12px 2px 0; color: var(--ink); }
:root[data-skin="eggleston"] .g-title { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); }
:root[data-skin="eggleston"] .g-meta { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); margin-top: 3px; }
:root[data-skin="eggleston"] .home-gallery .g-overlay { display: none; }
:root[data-skin="eggleston"] .section--showcase { background: var(--bg); }
:root[data-skin="eggleston"] .lb-art { background: transparent; }
@media (max-width: 720px) { :root[data-skin="eggleston"] .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Leiter: muted misty colour, intimate small prints (masonry) --- */
:root[data-skin="leiter"] {
  --bg: #E8E4DC; --surface: #F2EFE8; --surface-2: #DAD5CB; --ink: #3A352D;
  --ink-soft: #635D52; --ink-faint: #97907F; --line: #D5CFC2; --line-strong: #C0B9A9; --accent: #9E5A4C;
}
:root[data-skin="leiter"] .gallery-grid { columns: 3; column-gap: clamp(20px, 3vw, 46px); max-width: 1040px; margin: 0 auto; padding-top: clamp(16px, 2.4vw, 40px); }
:root[data-skin="leiter"] .gallery-grid .g-item { break-inside: avoid; margin: 0 0 clamp(20px, 3vw, 46px); background: var(--surface); border-radius: 0; overflow: hidden; padding: 10px 10px 0; box-shadow: 0 18px 44px -30px rgba(58,53,45,.55); }
:root[data-skin="leiter"] .g-media img, :root[data-skin="leiter"] .g-media svg { border: none !important; box-shadow: none; filter: saturate(.82) contrast(.98) brightness(1.02); }
:root[data-skin="leiter"] .g-item:hover .g-media img { transform: none; filter: saturate(.95) contrast(1); }
:root[data-skin="leiter"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: 10px 2px 12px; color: var(--ink); }
:root[data-skin="leiter"] .g-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px; color: var(--ink-soft); }
:root[data-skin="leiter"] .g-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
:root[data-skin="leiter"] .home-gallery .g-overlay { display: none; }
:root[data-skin="leiter"] .section--showcase { background: var(--bg); }
:root[data-skin="leiter"] .lb-art { background: transparent; }
@media (max-width: 760px) { :root[data-skin="leiter"] .gallery-grid { columns: 2; } }
@media (max-width: 480px) { :root[data-skin="leiter"] .gallery-grid { columns: 1; } }

/* --- Bauhaus: primary blocks, geometric sans, modular grid --- */
:root[data-skin="bauhaus"] {
  --bg: #F1EEE6; --surface: #FFFFFF; --surface-2: #E6E2D8; --ink: #121212;
  --ink-soft: #3C3C3C; --ink-faint: #7A7A74; --line: #121212; --line-strong: #121212;
  --bh-red: #D8402C; --bh-blue: #1E5AA8; --bh-yellow: #F2B417;
}
:root[data-skin="bauhaus"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.6vw, 22px); padding-top: clamp(14px, 2vw, 32px); }
:root[data-skin="bauhaus"] .gallery-grid .g-item { margin: 0; grid-column: span 2; background: #fff; border: 2px solid #121212; border-radius: 0; overflow: hidden; box-shadow: none; }
:root[data-skin="bauhaus"] .gallery-grid .g-item:nth-child(5n+1) { grid-column: span 3; }
:root[data-skin="bauhaus"] .gallery-grid .g-item:nth-child(5n+4) { grid-column: span 4; }
:root[data-skin="bauhaus"] .g-media img, :root[data-skin="bauhaus"] .g-media svg { border: none !important; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
:root[data-skin="bauhaus"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="bauhaus"] .g-overlay { opacity: 1; background: var(--bh-yellow); position: static; inset: auto; display: block; padding: 10px 12px; border-top: 2px solid #121212; color: #121212; }
:root[data-skin="bauhaus"] .gallery-grid .g-item:nth-child(3n+1) .g-overlay { background: var(--bh-red); color: #fff; }
:root[data-skin="bauhaus"] .gallery-grid .g-item:nth-child(3n+2) .g-overlay { background: var(--bh-blue); color: #fff; }
:root[data-skin="bauhaus"] .g-title { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 15px; line-height: 1; color: inherit; }
:root[data-skin="bauhaus"] .g-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .85; margin-top: 5px; }
:root[data-skin="bauhaus"] .home-gallery .g-overlay { display: none; }
:root[data-skin="bauhaus"] .section--showcase { background: var(--bg); }
:root[data-skin="bauhaus"] .lb-art { background: transparent; }
@media (max-width: 720px) { :root[data-skin="bauhaus"] .gallery-grid { grid-template-columns: repeat(2, 1fr); } :root[data-skin="bauhaus"] .gallery-grid .g-item[class] { grid-column: span 1 !important; } }

/* --- De Stijl: Mondrian — thick black rules, primary rectangles --- */
:root[data-skin="destijl"] {
  --bg: #F4F2EC; --surface: #FFFFFF; --surface-2: #ECE9E1; --ink: #0E0E0E;
  --ink-soft: #333; --ink-faint: #777; --line: #0E0E0E; --line-strong: #0E0E0E;
  --ds-red: #D5261F; --ds-blue: #143C82; --ds-yellow: #F7CE00;
}
:root[data-skin="destijl"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border: 7px solid #0E0E0E; background: #0E0E0E; padding-top: 0; }
:root[data-skin="destijl"] .gallery-grid .g-item { margin: 0; border: 7px solid #0E0E0E; background: #fff; border-radius: 0; overflow: hidden; box-shadow: none; }
:root[data-skin="destijl"] .gallery-grid .g-item:nth-child(4n+1) { grid-column: 1 / 7; }
:root[data-skin="destijl"] .gallery-grid .g-item:nth-child(4n+2) { grid-column: 7 / 13; }
:root[data-skin="destijl"] .gallery-grid .g-item:nth-child(4n+3) { grid-column: 1 / 5; }
:root[data-skin="destijl"] .gallery-grid .g-item:nth-child(4n+0) { grid-column: 5 / 13; }
:root[data-skin="destijl"] .g-media img, :root[data-skin="destijl"] .g-media svg { border: none !important; width: 100%; height: 100%; min-height: clamp(180px, 22vw, 320px); object-fit: cover; }
:root[data-skin="destijl"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="destijl"] .g-overlay { opacity: 1; background: #fff; position: static; inset: auto; display: block; padding: 9px 12px; border-top: 7px solid #0E0E0E; color: #0E0E0E; }
:root[data-skin="destijl"] .gallery-grid .g-item:nth-child(4n+2) .g-overlay { background: var(--ds-red); color: #fff; }
:root[data-skin="destijl"] .gallery-grid .g-item:nth-child(4n+3) .g-overlay { background: var(--ds-blue); color: #fff; }
:root[data-skin="destijl"] .gallery-grid .g-item:nth-child(4n+0) .g-overlay { background: var(--ds-yellow); color: #0E0E0E; }
:root[data-skin="destijl"] .g-title { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: 14px; line-height: 1; color: inherit; }
:root[data-skin="destijl"] .g-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .85; margin-top: 4px; }
:root[data-skin="destijl"] .home-gallery .g-overlay { display: none; }
:root[data-skin="destijl"] .section--showcase { background: var(--bg); }
:root[data-skin="destijl"] .lb-art { background: transparent; }
@media (max-width: 720px) { :root[data-skin="destijl"] .gallery-grid .g-item[class] { grid-column: 1 / -1 !important; } }

/* --- Constructivist: red/black, angular, rotated titles --- */
:root[data-skin="constructivist"] {
  --bg: #ECE8E1; --surface: #FFFFFF; --surface-2: #DFDAD1; --ink: #141210;
  --ink-soft: #3E3A34; --ink-faint: #857F73; --line: #CFC9BC; --line-strong: #B6AF9F;
  --cv-red: #C42B1C; --cv-red-deep: #E24230;
}
:root[data-skin="constructivist"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 2.8vw, 48px); padding-top: clamp(16px, 2.4vw, 40px); }
:root[data-skin="constructivist"] .gallery-grid .g-item { margin: 0; background: #111; border-radius: 0; overflow: hidden; box-shadow: 0 20px 44px -28px rgba(0,0,0,.62); position: relative; }
:root[data-skin="constructivist"] .gallery-grid .g-item:nth-child(3n+1) { grid-column: 1 / 8; }
:root[data-skin="constructivist"] .gallery-grid .g-item:nth-child(3n+2) { grid-column: 8 / 13; transform: rotate(-1.6deg); }
:root[data-skin="constructivist"] .gallery-grid .g-item:nth-child(3n+0) { grid-column: 3 / 11; transform: rotate(1deg); }
:root[data-skin="constructivist"] .g-media img, :root[data-skin="constructivist"] .g-media svg { border: none !important; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
:root[data-skin="constructivist"] .gallery-grid .g-item:nth-child(3n+1) .g-media img { height: min(70vh, 680px); }
:root[data-skin="constructivist"] .g-item:hover .g-media img { transform: none; filter: grayscale(1) contrast(1.35); }
:root[data-skin="constructivist"] .g-overlay { opacity: 1; background: var(--cv-red); justify-content: flex-end; padding: clamp(12px, 1.6vw, 24px); }
:root[data-skin="constructivist"] .g-title { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 2.4vw, 40px); line-height: .92; letter-spacing: -.02em; color: #fff; transform: rotate(-2deg); transform-origin: left; }
:root[data-skin="constructivist"] .g-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; opacity: .85; margin-top: 10px; }
:root[data-skin="constructivist"] .home-gallery .g-media img { border: none; box-shadow: none; }
:root[data-skin="constructivist"] .section--showcase { background: var(--ink); }
:root[data-skin="constructivist"] .section--showcase .section-head h2 { color: #fff; font-family: var(--sans); font-weight: 800; text-transform: uppercase; }
:root[data-skin="constructivist"] .section--showcase .eyebrow { color: var(--cv-red-deep); }
:root[data-skin="constructivist"] .lb-art { background: transparent; }
@media (max-width: 820px) {
  :root[data-skin="constructivist"] .gallery-grid .g-item[class] { grid-column: 1 / -1 !important; transform: none !important; }
}

/* --- Rams: Braun functionalism — "less, but better"; warm grey, single orange accent --- */
:root[data-skin="rams"] {
  --bg: #EFEDE7; --surface: #F7F5F0; --surface-2: #E2E0D9; --ink: #232323;
  --ink-soft: #55534E; --ink-faint: #8C8A83; --line: #DCD9D1; --line-strong: #C6C3B9;
  --accent: #ED3F1C; --accent-deep: #ED8008;
}
:root[data-skin="rams"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 24vw, 300px), 1fr)); gap: clamp(18px, 2.2vw, 34px); padding-top: clamp(14px, 2vw, 32px); }
:root[data-skin="rams"] .gallery-grid .g-item { margin: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; box-shadow: none; }
:root[data-skin="rams"] .g-media img, :root[data-skin="rams"] .g-media svg { border: none !important; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
:root[data-skin="rams"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="rams"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: 11px 13px 13px; border-top: 1px solid var(--line); color: var(--ink); }
:root[data-skin="rams"] .g-title { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .01em; color: var(--ink); }
:root[data-skin="rams"] .g-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-faint); margin-top: 4px; }
:root[data-skin="rams"] .g-meta::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); vertical-align: baseline; }
:root[data-skin="rams"] .home-gallery .g-overlay { display: none; }
:root[data-skin="rams"] .section--showcase { background: var(--bg); }
:root[data-skin="rams"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="rams"] .lb-art { background: var(--surface); }

/* --- Cyanotype: Anna Atkins blueprint — prussian-blue monochrome photogram --- */
:root[data-skin="cyanotype-1"] {
  --bg: #0E2C4E; --surface: #123457; --surface-2: #0B2540; --ink: #E4EEF6;
  --ink-soft: #A9C4DB; --ink-faint: #6E92B4; --line: #1D4470; --line-strong: #2A5788;
}
:root[data-skin="cyanotype-1"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 52px); padding-top: clamp(18px, 2.6vw, 44px); }
:root[data-skin="cyanotype-1"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: hidden; box-shadow: 0 20px 44px -28px rgba(0,0,0,.6); }
:root[data-skin="cyanotype-1"] .g-media { background: #0B2540; }
:root[data-skin="cyanotype-1"] .g-media img, :root[data-skin="cyanotype-1"] .g-media svg { border: none !important; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) brightness(1.05) sepia(1) hue-rotate(170deg) saturate(3.2) contrast(1.05); }
:root[data-skin="cyanotype-1"] .g-item:hover .g-media img { transform: none; filter: grayscale(1) brightness(1.12) sepia(1) hue-rotate(170deg) saturate(3.6) contrast(1.08); }
:root[data-skin="cyanotype-1"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: 12px 2px 0; color: var(--ink); }
:root[data-skin="cyanotype-1"] .g-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16px; color: var(--ink); }
:root[data-skin="cyanotype-1"] .g-meta { font-family: var(--serif); font-size: 12px; letter-spacing: .02em; color: var(--ink-faint); margin-top: 4px; }
:root[data-skin="cyanotype-1"] .home-gallery .g-overlay { display: none; }
:root[data-skin="cyanotype-1"] .home-gallery .g-media img { filter: grayscale(1) brightness(1.05) sepia(1) hue-rotate(170deg) saturate(3.2) contrast(1.05); }
:root[data-skin="cyanotype-1"] .section--showcase { background: var(--bg); }
:root[data-skin="cyanotype-1"] .section--showcase .section-head h2 { color: var(--ink); font-family: var(--serif); font-style: italic; }
:root[data-skin="cyanotype-1"] .lb-art { background: #0B2540; }
@media (max-width: 720px) { :root[data-skin="cyanotype-1"] .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Broadsheet: newspaper — ruled serif columns, masthead, dateline captions --- */
:root[data-skin="broadsheet"] {
  --bg: #F4F1E8; --surface: #FBF9F2; --surface-2: #E8E4D6; --ink: #1A1814;
  --ink-soft: #3E3B34; --ink-faint: #7E7A6E; --line: #C9C4B4; --line-strong: #1A1814;
  --accent: #AE2B19;
}
:root[data-skin="broadsheet"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 3px double var(--ink); padding-top: 0; }
:root[data-skin="broadsheet"] .gallery-grid .g-item { margin: 0; background: transparent; border-radius: 0; overflow: hidden; box-shadow: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 16px 18px; }
:root[data-skin="broadsheet"] .gallery-grid .g-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
:root[data-skin="broadsheet"] .g-media img, :root[data-skin="broadsheet"] .g-media svg { border: none !important; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
:root[data-skin="broadsheet"] .g-item:hover .g-media img { transform: none; filter: grayscale(1) contrast(1.12); }
:root[data-skin="broadsheet"] .g-overlay { opacity: 1; background: none; position: static; inset: auto; display: block; padding: 10px 0 0; color: var(--ink); }
:root[data-skin="broadsheet"] .g-title { font-family: var(--serif); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.08; color: var(--ink); }
:root[data-skin="broadsheet"] .gallery-grid .g-item:nth-child(6n+1) .g-title { font-size: clamp(22px, 2.6vw, 38px); }
:root[data-skin="broadsheet"] .g-meta { font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
:root[data-skin="broadsheet"] .home-gallery .g-overlay { display: none; }
:root[data-skin="broadsheet"] .section--showcase { background: var(--bg); }
:root[data-skin="broadsheet"] .section--showcase .section-head h2 { color: var(--ink); font-family: var(--serif); font-weight: 700; }
:root[data-skin="broadsheet"] .lb-art { background: var(--surface); }
@media (max-width: 720px) {
  :root[data-skin="broadsheet"] .gallery-grid { grid-template-columns: 1fr 1fr; }
  :root[data-skin="broadsheet"] .gallery-grid .g-item[class] { grid-column: auto !important; grid-row: auto !important; }
}

/* ============================================================
   Projects — a series of photographs shown in many layouts.
   The Gallery "Projects" tab lists project cards; opening one
   shows its photos. The layout is chosen live via the .layout-switch
   pill and applied through <html data-project-mode> (pure CSS).
   ============================================================ */

/* --- Photos | Projects view toggle --- */
.view-toggle {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 22px;
  border: 1px solid var(--line); border-radius: 999px;
}
.view-tab {
  font: inherit; cursor: pointer; border: 0; background: transparent; color: var(--ink-soft);
  padding: 7px 20px; border-radius: 999px; font-size: 14px; transition: color .2s, background .2s;
}
.view-tab:hover { color: var(--ink); }
.view-tab.is-active { background: var(--ink); color: var(--bg); }

/* --- Project index (cards) --- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.project-card {
  display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0; color: inherit;
  border: 1px solid var(--line); background: var(--surface); border-radius: 4px; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.project-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -22px rgba(0,0,0,.5); border-color: var(--line-strong); }
.project-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.project-cover img, .project-cover svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card-body { padding: 14px 16px; }
.project-card-title { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.project-card-count { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }

/* --- Opened project (series view) --- */
.project-view { }
.project-back { font: inherit; cursor: pointer; border: 0; background: transparent; color: var(--ink-soft); padding: 4px 0; font-size: 14px; margin-bottom: 10px; }
.project-back:hover { color: var(--ink); }
.project-head { margin-bottom: 6px; }
.project-title { font-family: var(--serif); font-size: clamp(26px, 4vw, 40px); margin: 0; line-height: 1.05; }
.project-blurb { max-width: 62ch; color: var(--ink-soft); margin-top: 10px; }
.project-fullpage { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--accent); text-decoration: none; }
.project-fullpage:hover { text-decoration: underline; }

/* Shared photo cell — layouts below re-flow these */
.project-photos { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.pphoto { position: relative; margin: 0; cursor: zoom-in; break-inside: avoid; }
.pphoto-media { overflow: hidden; border-radius: 2px; background: var(--surface-2); }
.pphoto-media img, .pphoto-media svg { display: block; width: 100%; height: auto; }
.pphoto-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.pphoto-title { font-weight: 600; color: var(--ink); }
.pphoto-num { position: absolute; top: 8px; left: 8px; z-index: 2; font-family: var(--mono); font-size: 11px; color: #fff; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 3px; opacity: 0; transition: opacity .2s; }
.pphoto:hover .pphoto-num, .pphoto:focus .pphoto-num { opacity: 1; }

/* Layout 1 — Grid (default): even responsive tiles */
:root[data-project-mode="grid"] .project-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }

/* Layout 2 — Masonry: varied heights, column flow */
:root[data-project-mode="masonry"] .project-photos { display: block; columns: 3 260px; column-gap: 18px; }
:root[data-project-mode="masonry"] .pphoto { margin: 0 0 18px; }

/* Layout 3 — Filmstrip: horizontal scroll, snap */
:root[data-project-mode="strip"] .project-photos { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; }
:root[data-project-mode="strip"] .pphoto { flex: 0 0 auto; width: min(78vw, 460px); scroll-snap-align: center; }

/* Layout 4 — Essay: photo-book, single centred column */
:root[data-project-mode="essay"] .project-photos { display: flex; flex-direction: column; gap: 64px; max-width: 820px; margin: 40px auto 0; }
:root[data-project-mode="essay"] .pphoto-cap { justify-content: center; margin-top: 14px; font-style: italic; }

/* Layout 5 — Contact Sheet: uniform crops on a dark board, frame numbers */
:root[data-project-mode="contact"] .project-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; background: #141210; padding: 16px; border-radius: 4px; }
:root[data-project-mode="contact"] .pphoto-media { aspect-ratio: 1 / 1; }
:root[data-project-mode="contact"] .pphoto-media img, :root[data-project-mode="contact"] .pphoto-media svg { width: 100%; height: 100%; object-fit: cover; }
:root[data-project-mode="contact"] .pphoto-cap { display: none; }
:root[data-project-mode="contact"] .pphoto-num { position: static; display: block; margin-top: 5px; text-align: center; opacity: 1; background: none; color: #c9c26a; letter-spacing: .12em; }

/* Layout 6 — Slideshow: one frame at a time, full-width snap */
:root[data-project-mode="slideshow"] .project-photos { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 4px; background: #0c0c0c; }
:root[data-project-mode="slideshow"] .pphoto { flex: 0 0 100%; scroll-snap-align: center; cursor: default; }
:root[data-project-mode="slideshow"] .pphoto-media { border-radius: 0; background: #0c0c0c; }
:root[data-project-mode="slideshow"] .pphoto-media img, :root[data-project-mode="slideshow"] .pphoto-media svg { width: 100%; max-height: 76vh; object-fit: contain; }
:root[data-project-mode="slideshow"] .pphoto-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 26px 22px 16px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
:root[data-project-mode="slideshow"] .pphoto-title { color: #fff; }

/* Layout 7 — Full Bleed: edge-to-edge stacked frames */
:root[data-project-mode="stack"] .project-photos { display: flex; flex-direction: column; gap: 0; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }
:root[data-project-mode="stack"] .pphoto-media { border-radius: 0; }
:root[data-project-mode="stack"] .pphoto-media img, :root[data-project-mode="stack"] .pphoto-media svg { width: 100%; max-height: 100vh; object-fit: cover; }
:root[data-project-mode="stack"] .pphoto-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 6vw 20px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
:root[data-project-mode="stack"] .pphoto-title { color: #fff; }

/* Layout 8 — Mosaic: feature-first collage */
:root[data-project-mode="mosaic"] .project-photos { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; gap: 12px; grid-auto-flow: dense; }
:root[data-project-mode="mosaic"] .pphoto { grid-column: span 2; grid-row: span 1; }
:root[data-project-mode="mosaic"] .pphoto:first-child { grid-column: span 2; grid-row: span 2; }
:root[data-project-mode="mosaic"] .pphoto:nth-child(4n+3) { grid-column: span 2; grid-row: span 2; }
:root[data-project-mode="mosaic"] .pphoto-media { height: 100%; }
:root[data-project-mode="mosaic"] .pphoto-media img, :root[data-project-mode="mosaic"] .pphoto-media svg { width: 100%; height: 100%; object-fit: cover; }
:root[data-project-mode="mosaic"] .pphoto-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 22px 12px 10px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); font-size: 12px; }
:root[data-project-mode="mosaic"] .pphoto-title { color: #fff; }

@media (max-width: 700px) {
  :root[data-project-mode="mosaic"] .project-photos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  :root[data-project-mode="mosaic"] .pphoto, :root[data-project-mode="mosaic"] .pphoto:first-child, :root[data-project-mode="mosaic"] .pphoto:nth-child(4n+3) { grid-column: span 1; grid-row: span 1; }
  :root[data-project-mode="masonry"] .project-photos { columns: 2 160px; }
}

/* --- Live layout switcher pill (mirrors the theme switcher; shows in Projects view) --- */
.layout-switch {
  position: fixed; z-index: 200; left: 16px; bottom: 16px; display: none;
  flex-direction: column; align-items: flex-start; gap: 8px; max-width: calc(100vw - 24px);
  padding: 6px 12px; border-radius: 22px;
  background: var(--surface); background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px -14px rgba(0,0,0,.55);
  font-family: var(--mono); font-size: 12px;
}
.layout-switch.is-live { display: flex; }
.layout-switch-label { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; padding: 2px 4px; cursor: default; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.layout-switch-label::after { content: ' \25B8'; }
.layout-switch:hover .layout-switch-label::after, .layout-switch:focus-within .layout-switch-label::after { content: ' \25BE'; }
.layout-switch-list {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left;
  max-width: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-width .35s ease, max-height .35s ease, opacity .25s ease;
}
.layout-switch:hover .layout-switch-list, .layout-switch:focus-within .layout-switch-list { max-width: min(320px, calc(100vw - 40px)); max-height: 60vh; overflow-y: auto; opacity: 1; }
.layout-btn { font: inherit; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink-soft); white-space: nowrap; text-align: left; transition: color .2s, background .2s; }
.layout-btn:hover { color: var(--ink); }
.layout-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (hover: none) {
  .layout-switch-list { max-width: min(320px, calc(100vw - 40px)); max-height: 60vh; overflow-y: auto; opacity: 1; }
  .layout-switch-label::after { content: ''; }
}
@media print { .layout-switch { display: none !important; } }
/* ============================================================
   Japanese lineages, wave 2 — 10 skins grounded in aesthetic
   principles (yūgen, iki, shibui, mono no aware), classical arts
   (ukiyo-e, sumi-e, rinpa, aizome, kintsugi) and postwar
   modernism (Ikko Tanaka). Traditional Nippon colour names noted.
   ============================================================ */

/* --- Yūgen 幽玄: subtle, shadowed depth; images emerge from dark --- */
:root[data-skin="yugen"] {
  --bg: #14131A; --surface: #1C1B24; --surface-2: #252533; --ink: #E7E4EC;
  --ink-soft: #A5A2B4; --ink-faint: #6E6B80; --line: #2E2C3B; --line-strong: #403D52; --accent: #9A93C0;
}
:root[data-skin="yugen"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 7vw, 120px); max-width: 1040px; margin: 0 auto; padding-top: clamp(30px, 5vw, 80px); }
:root[data-skin="yugen"] .gallery-grid .g-item, :root[data-skin="yugen"] .home-gallery .g-item { background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="yugen"] .g-media { position: relative; }
:root[data-skin="yugen"] .g-media img, :root[data-skin="yugen"] .g-media svg { border: none !important; box-shadow: 0 40px 80px -40px #000; filter: brightness(.82) contrast(1.06); transition: filter .8s ease; }
:root[data-skin="yugen"] .g-item:hover .g-media img { filter: brightness(1) contrast(1); transform: none; }
:root[data-skin="yugen"] .g-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 34px rgba(20,19,26,.72); }
:root[data-skin="yugen"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: clamp(16px, 2vw, 26px) 0 0; }
:root[data-skin="yugen"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .08em; color: var(--ink); }
:root[data-skin="yugen"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; }
:root[data-skin="yugen"] .section--showcase, :root[data-skin="yugen"] .home-gallery { background: var(--bg); }
:root[data-skin="yugen"] .section--showcase .section-head h2, :root[data-skin="yugen"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="yugen"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="yugen"] .lb-art { box-shadow: 0 40px 90px -40px #000; }

/* --- Iki 粋: refined urbane restraint; indigo + ivory, one vermilion --- */
:root[data-skin="iki"] {
  --bg: #F5F3EC; --surface: #FFFFFF; --surface-2: #E9E6DB; --ink: #1B2430;
  --ink-soft: #54606E; --ink-faint: #98A0A9; --line: #DDD8CC; --line-strong: #22366E; --accent: #C4442E;
}
:root[data-skin="iki"] .gallery-grid { column-gap: clamp(20px, 3vw, 44px); }
:root[data-skin="iki"] .gallery-grid .g-item, :root[data-skin="iki"] .home-gallery .g-item { background: transparent; border-radius: 0; overflow: visible; margin-bottom: clamp(30px, 4vw, 56px); }
:root[data-skin="iki"] .g-media img, :root[data-skin="iki"] .g-media svg { border: none !important; border-bottom: 2px solid var(--line-strong); box-shadow: none; }
:root[data-skin="iki"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="iki"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 12px 0 0; }
:root[data-skin="iki"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .02em; color: var(--ink); }
:root[data-skin="iki"] .g-title::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-right: 9px; vertical-align: middle; }
:root[data-skin="iki"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 7px; }
:root[data-skin="iki"] .section--showcase { background: var(--bg); }
:root[data-skin="iki"] .section--showcase .section-head h2, :root[data-skin="iki"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="iki"] .section--showcase .eyebrow { color: var(--accent); }

/* --- Shibui 渋い: quiet, complex, desaturated refinement --- */
:root[data-skin="shibui-1"] {
  --bg: #DAD6CC; --surface: #E4E0D6; --surface-2: #CBC6B9; --ink: #33352E;
  --ink-soft: #5E6157; --ink-faint: #8E9084; --line: #C6C1B3; --line-strong: #A9A594; --accent: #6E7B58;
}
:root[data-skin="shibui-1"] .gallery-grid .g-item, :root[data-skin="shibui-1"] .home-gallery .g-item { background: var(--surface); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
:root[data-skin="shibui-1"] .g-media img, :root[data-skin="shibui-1"] .g-media svg { border: none !important; box-shadow: none; filter: saturate(.72) contrast(.96); transition: filter .6s ease; }
:root[data-skin="shibui-1"] .g-item:hover .g-media img { filter: saturate(1) contrast(1); transform: none; }
:root[data-skin="shibui-1"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 12px 14px 14px; }
:root[data-skin="shibui-1"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); }
:root[data-skin="shibui-1"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
:root[data-skin="shibui-1"] .section--showcase { background: var(--bg); }
:root[data-skin="shibui-1"] .section--showcase .section-head h2, :root[data-skin="shibui-1"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="shibui-1"] .section--showcase .eyebrow { color: var(--accent); }

/* --- Mono no Aware 物の哀れ: sakura ephemera; soft pink & faded gold --- */
:root[data-skin="mono-aware"] {
  --bg: #FAF0EE; --surface: #FFF8F6; --surface-2: #F2E0DD; --ink: #4A3338;
  --ink-soft: #8A6E72; --ink-faint: #BFA3A6; --line: #EBD7D4; --line-strong: #DDBEBA; --accent: #C97A86;
}
:root[data-skin="mono-aware"] .gallery-grid { max-width: 1080px; margin: 0 auto; }
:root[data-skin="mono-aware"] .gallery-grid .g-item, :root[data-skin="mono-aware"] .home-gallery .g-item { background: transparent; border-radius: 0; overflow: visible; margin-bottom: clamp(34px, 5vw, 64px); }
:root[data-skin="mono-aware"] .g-media img, :root[data-skin="mono-aware"] .g-media svg { border: none !important; box-shadow: 0 24px 48px -30px rgba(120,70,80,.4); animation: monoAwareBreath 11s var(--ease) infinite; }
/* Effect A — beauty passes as you scroll: mono-aware-transience.js sets a per-item
   --presence (0.3..1) from each work's distance to the viewport centre; it becomes a soft,
   slightly trailing opacity, so every image is caught arriving AND departing (never gone). */
:root[data-skin="mono-aware"] .gallery-grid .g-item, :root[data-skin="mono-aware"] .home-gallery .g-item { opacity: var(--presence, 1); transition: opacity .55s var(--ease); }
/* hover holds the moment: it steadies to full presence and its breath pauses */
:root[data-skin="mono-aware"] .g-item:hover { opacity: 1 !important; }
:root[data-skin="mono-aware"] .g-item:hover .g-media img { transform: none; animation-play-state: paused; }
/* Effect B — a slow perpetual "breath": each work is eternally on the verge of fading */
@keyframes monoAwareBreath { 0%, 100% { filter: brightness(1.04) saturate(.96); } 50% { filter: brightness(.965) saturate(.85); } }
/* Effect C — beauty falls: a sparse, slow drift of sakura petals (built by mono-aware-transience.js).
   Few, small, translucent — they pass through the frame without cropping or hiding any photograph. */
#mono-aware-petals { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
#mono-aware-petals .mono-petal {
  position: absolute; top: 0; left: var(--left, 50vw);
  width: var(--sz, 11px); height: calc(var(--sz, 11px) * 0.82);
  background: linear-gradient(135deg, #f9d7e0, #e8a9bd);
  border-radius: 100% 0 62% 0;
  filter: hue-rotate(var(--hue, 0deg)) drop-shadow(0 1px 1px rgba(150,90,110,.15));
  opacity: 0; will-change: transform, opacity;
  animation: sakuraFall var(--dur, 15s) linear var(--delay, 0s) infinite,
             sakuraDrift var(--dur, 15s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes sakuraFall {
  0%   { transform: translate3d(0, -12vh, 0) rotateZ(0deg) rotateY(0deg); }
  20%  { transform: translate3d(var(--sway, 16px), 15vh, 0) rotateZ(70deg) rotateY(120deg); }
  40%  { transform: translate3d(calc(var(--sway, 16px) * -1), 40vh, 0) rotateZ(150deg) rotateY(240deg); }
  60%  { transform: translate3d(var(--sway, 16px), 65vh, 0) rotateZ(220deg) rotateY(360deg); }
  80%  { transform: translate3d(calc(var(--sway, 16px) * -0.6), 90vh, 0) rotateZ(300deg) rotateY(480deg); }
  100% { transform: translate3d(var(--sway, 16px), 114vh, 0) rotateZ(360deg) rotateY(600deg); }
}
@keyframes sakuraDrift { 0% { opacity: 0; } 10% { opacity: var(--pop, .38); } 88% { opacity: var(--pop, .38); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin="mono-aware"] .gallery-grid .g-item, :root[data-skin="mono-aware"] .home-gallery .g-item { opacity: 1 !important; transition: none; }
  :root[data-skin="mono-aware"] .g-media img, :root[data-skin="mono-aware"] .g-media svg { animation: none !important; filter: brightness(1.02) saturate(.94); }
  #mono-aware-petals { display: none !important; }
}
:root[data-skin="mono-aware"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; text-align: center; padding: 16px 0 0; }
:root[data-skin="mono-aware"] .g-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(15px, 1.3vw, 19px); color: var(--ink); }
:root[data-skin="mono-aware"] .g-meta { display: block; font-family: var(--serif); font-size: 12px; letter-spacing: .1em; color: var(--accent); margin-top: 6px; }
:root[data-skin="mono-aware"] .section--showcase { background: var(--bg); }
:root[data-skin="mono-aware"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="mono-aware"] .section--showcase .eyebrow, :root[data-skin="mono-aware"] .section--showcase .link-arrow { color: var(--accent); }

/* --- Ukiyo-e 浮世絵: woodblock; cream paper, Prussian blue, vermilion, hard outlines --- */
:root[data-skin="ukiyoe"] {
  --bg: #EDE6D2; --surface: #F5EFDD; --surface-2: #E2D8BE; --ink: #17213C;
  --ink-soft: #384B72; --ink-faint: #8A7F63; --line: #17213C; --line-strong: #17213C; --accent: #C4442E;
}
:root[data-skin="ukiyoe"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(16px, 2.4vw, 34px); }
:root[data-skin="ukiyoe"] .gallery-grid .g-item, :root[data-skin="ukiyoe"] .home-gallery .g-item { background: var(--surface); border: 2px solid var(--ink); border-radius: 0; overflow: hidden; }
:root[data-skin="ukiyoe"] .g-media img, :root[data-skin="ukiyoe"] .g-media svg { border: none !important; border-bottom: 2px solid var(--ink); box-shadow: none; filter: saturate(1.08) contrast(1.05); }
:root[data-skin="ukiyoe"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="ukiyoe"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 10px 12px 12px; }
:root[data-skin="ukiyoe"] .g-title { font-family: var(--serif); font-weight: 600; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); }
:root[data-skin="ukiyoe"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: 5px; }
:root[data-skin="ukiyoe"] .section--showcase { background: var(--bg); }
:root[data-skin="ukiyoe"] .section--showcase .section-head h2 { color: var(--ink); }
:root[data-skin="ukiyoe"] .section--showcase .eyebrow, :root[data-skin="ukiyoe"] .section--showcase .link-arrow { color: var(--accent); }

/* --- Sumi-e 墨絵: ink wash; washi white, near-monochrome, vast ma --- */
:root[data-skin="sumie"] {
  --bg: #F6F4EE; --surface: #FBFAF5; --surface-2: #ECE9E0; --ink: #2C2C2C;
  --ink-soft: #5E5E5A; --ink-faint: #9A9A93; --line: #E4E1D7; --line-strong: #2C2C2C; --accent: #7A2E22;
}
:root[data-skin="sumie"] .gallery-grid { columns: unset; display: block; max-width: 560px; margin: 0 auto; padding-top: clamp(40px, 8vw, 120px); }
:root[data-skin="sumie"] .gallery-grid .g-item, :root[data-skin="sumie"] .home-gallery .g-item { margin: 0 auto clamp(80px, 14vw, 200px); background: transparent; border-radius: 0; overflow: visible; text-align: center; }
:root[data-skin="sumie"] .g-media img, :root[data-skin="sumie"] .g-media svg { border: none !important; box-shadow: none; filter: grayscale(1) contrast(1.08) brightness(1.02); transition: filter 1s ease; }
:root[data-skin="sumie"] .g-item:hover .g-media img { filter: grayscale(.35) contrast(1.05); transform: none; }
:root[data-skin="sumie"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: clamp(18px, 2.6vw, 34px) 0 0; }
:root[data-skin="sumie"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .05em; color: var(--ink); }
:root[data-skin="sumie"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); margin-top: 9px; }
:root[data-skin="sumie"] .section--showcase, :root[data-skin="sumie"] .home-gallery { background: var(--bg); }
:root[data-skin="sumie"] .section--showcase .section-head h2, :root[data-skin="sumie"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="sumie"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="sumie"] .lb-art img, :root[data-skin="sumie"] .lb-art svg { filter: grayscale(1) contrast(1.06); }

/* --- Rinpa 琳派: gold-leaf decorative; opulent ground, dark ink, kurenai --- */
:root[data-skin="rinpa-1"] {
  --bg: #C6A94A; --surface: #CDAF52; --surface-2: #B8992F; --ink: #221C0E;
  --ink-soft: #473C1E; --ink-faint: #6C5C2E; --line: #B0912A; --line-strong: #8A6E1E; --accent: #9C2B2B;
}
:root[data-skin="rinpa-1"] .gallery-grid .g-item, :root[data-skin="rinpa-1"] .home-gallery .g-item { background: transparent; border-radius: 0; overflow: visible; margin-bottom: clamp(26px, 3.4vw, 52px); }
:root[data-skin="rinpa-1"] .g-media img, :root[data-skin="rinpa-1"] .g-media svg { border: 3px solid var(--ink) !important; box-shadow: 0 22px 44px -26px rgba(60,45,10,.6); }
:root[data-skin="rinpa-1"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="rinpa-1"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 12px 2px 0; }
:root[data-skin="rinpa-1"] .g-title { font-family: var(--serif); font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .03em; color: var(--ink); }
:root[data-skin="rinpa-1"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
:root[data-skin="rinpa-1"] .section--showcase, :root[data-skin="rinpa-1"] .home-gallery { background: var(--bg); }
:root[data-skin="rinpa-1"] .section--showcase .section-head h2, :root[data-skin="rinpa-1"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="rinpa-1"] .section--showcase .eyebrow { color: var(--accent); }

/* --- Aizome 藍: indigo dye; deep blue field, shibori-white captions --- */
:root[data-skin="aizome"] {
  --bg: #172846; --surface: #1E3358; --surface-2: #29456F; --ink: #EAF0F8;
  --ink-soft: #AFC0DA; --ink-faint: #7389AC; --line: #2C4A78; --line-strong: #43608E; --accent: #E4ECF6;
}
:root[data-skin="aizome"] .gallery-grid .g-item, :root[data-skin="aizome"] .home-gallery .g-item { background: transparent; border-radius: 0; overflow: visible; margin-bottom: clamp(24px, 3vw, 48px); }
:root[data-skin="aizome"] .g-media { padding: 6px; background: repeating-linear-gradient(90deg, #12213c 0, #12213c 1px, #1a2f52 1px, #1a2f52 3px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
:root[data-skin="aizome"] .g-media img, :root[data-skin="aizome"] .g-media svg { border: 1px solid var(--line-strong) !important; box-shadow: 0 30px 60px -34px rgba(0,0,0,.7); filter: saturate(.9); }
:root[data-skin="aizome"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="aizome"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 12px 0 0; }
:root[data-skin="aizome"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .05em; color: var(--ink); }
:root[data-skin="aizome"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); margin-top: 7px; }
:root[data-skin="aizome"] .section--showcase, :root[data-skin="aizome"] .home-gallery { background: var(--bg); }
:root[data-skin="aizome"] .section--showcase .section-head h2, :root[data-skin="aizome"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="aizome"] .section--showcase .eyebrow { color: var(--ink-soft); }

/* --- Kintsugi 金継ぎ: wabi-sabi ceramic grey mended with gold seams --- */
:root[data-skin="kintsugi"] {
  --bg: #E6E1D8; --surface: #F0EBE2; --surface-2: #D6D0C4; --ink: #33302A;
  --ink-soft: #6B665D; --ink-faint: #9E988C; --line: #CFC8BB; --line-strong: #B8912F; --accent: #B8912F;
}
:root[data-skin="kintsugi"] .gallery-grid .g-item, :root[data-skin="kintsugi"] .home-gallery .g-item { background: var(--surface); border-radius: 0; overflow: hidden; border-top: 2px solid var(--line-strong); }
:root[data-skin="kintsugi"] .g-media { position: relative; }
:root[data-skin="kintsugi"] .g-media img, :root[data-skin="kintsugi"] .g-media svg { border: none !important; box-shadow: none; }
:root[data-skin="kintsugi"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="kintsugi"] .g-media::after { content: ''; position: absolute; top: 0; bottom: 0; left: 62%; width: 2px; background: linear-gradient(180deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent); transform: skewX(-8deg); opacity: .8; pointer-events: none; }
:root[data-skin="kintsugi"] .g-media::before { content: ''; position: absolute; top: 0; bottom: 0; left: 30%; width: 1px; background: linear-gradient(180deg, transparent, var(--line-strong) 32%, transparent 72%); transform: skewX(7deg); opacity: .5; pointer-events: none; }
:root[data-skin="kintsugi"] .g-item:nth-child(2n) .g-media::after { left: 44%; transform: skewX(11deg); }
:root[data-skin="kintsugi"] .g-item:nth-child(3n) .g-media::after { left: 72%; transform: skewX(-14deg); }
:root[data-skin="kintsugi"] .g-item:nth-child(3n) .g-media::before { left: 54%; transform: skewX(-6deg); }
:root[data-skin="kintsugi"] .g-item:nth-child(2n) { border-top-width: 3px; }
:root[data-skin="kintsugi"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 12px 14px 14px; }
:root[data-skin="kintsugi"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); }
:root[data-skin="kintsugi"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--line-strong); margin-top: 6px; }
:root[data-skin="kintsugi"] .section--showcase { background: var(--bg); }
:root[data-skin="kintsugi"] .section--showcase .section-head h2, :root[data-skin="kintsugi"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="kintsugi"] .section--showcase .eyebrow { color: var(--accent); }

/* --- Tanaka 田中: Ikko Tanaka modernism; flat planes, hard grid, Japan red --- */
:root[data-skin="tanaka-1"] {
  --bg: #EDE9DE; --surface: #FFFFFF; --surface-2: #E0DACB; --ink: #1A1A1A;
  --ink-soft: #4A4A46; --ink-faint: #8A867B; --line: #1A1A1A; --line-strong: #1A1A1A; --accent: #C8102E;
}
:root[data-skin="tanaka-1"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; border-top: 3px solid var(--ink); border-left: 3px solid var(--ink); }
:root[data-skin="tanaka-1"] .gallery-grid .g-item, :root[data-skin="tanaka-1"] .home-gallery .g-item { background: var(--surface); border-radius: 0; overflow: hidden; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
:root[data-skin="tanaka-1"] .g-media img, :root[data-skin="tanaka-1"] .g-media svg { border: none !important; box-shadow: none; filter: saturate(1.05) contrast(1.03); }
:root[data-skin="tanaka-1"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="tanaka-1"] .g-overlay { position: static; inset: auto; opacity: 1; background: var(--surface); color: var(--ink); display: block; padding: 12px 14px 14px; border-top: 3px solid var(--ink); }
:root[data-skin="tanaka-1"] .g-title { font-family: var(--sans); font-weight: 800; font-size: clamp(14px, 1.2vw, 17px); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
:root[data-skin="tanaka-1"] .g-title::after { content: ''; display: inline-block; width: 9px; height: 9px; background: var(--accent); margin-left: 9px; vertical-align: baseline; }
:root[data-skin="tanaka-1"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }
:root[data-skin="tanaka-1"] .section--showcase { background: var(--bg); }
:root[data-skin="tanaka-1"] .section--showcase .section-head h2, :root[data-skin="tanaka-1"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="tanaka-1"] .section--showcase .eyebrow { color: var(--accent); }
/* ============================================================
   Japanese lineages, wave 3 — the deeper principles (native sources)
   Structure & philosophy, not just mood: the Yamato ratio (白銀比 1:√2),
   Kenya Hara's emptiness-as-vessel (白), the dry garden (枯山水/砂紋),
   wagara patterns (市松・青海波), the artist's seal (落款/朱印), the round
   window / mitate (丸窓/見立て), deliberate asymmetry (不均整), the folding
   screen (屏風) and the folk-craft movement (民藝).
   ============================================================ */

/* --- Hakugin 白銀比: the Yamato ratio 1:√2 — every frame shares it --- */
:root[data-skin="hakugin"] {
  --bg: #EEF1F2; --surface: #F8FAFB; --surface-2: #DFE4E7; --ink: #232629;
  --ink-soft: #59606A; --ink-faint: #97A0A8; --line: #DCE1E4; --line-strong: #C2C8CC; --accent: #4A6E86;
}
:root[data-skin="hakugin"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(13px, 1.7vw, 24px) clamp(18px, 2.4vw, 34px); }
:root[data-skin="hakugin"] .gallery-grid .g-item, :root[data-skin="hakugin"] .home-gallery .g-item { background: var(--surface); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
:root[data-skin="hakugin"] .g-media { aspect-ratio: 1.414 / 1; overflow: hidden; }
:root[data-skin="hakugin"] .g-media img, :root[data-skin="hakugin"] .g-media svg { width: 100%; height: 100%; object-fit: cover; border: none !important; box-shadow: none; }
:root[data-skin="hakugin"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="hakugin"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 12px 17px; aspect-ratio: 2.828 / 1; }
:root[data-skin="hakugin"] .section--showcase .section-head { margin-bottom: clamp(24px, 3.4vw, 48px); }
:root[data-skin="hakugin"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); }
:root[data-skin="hakugin"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
:root[data-skin="hakugin"] .section--showcase { background: var(--bg); }
:root[data-skin="hakugin"] .section--showcase .section-head h2, :root[data-skin="hakugin"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="hakugin"] .section--showcase .eyebrow { color: var(--accent); }

/* --- Shiro 白 (Hara): radical emptiness; white as a vessel of meaning --- */
:root[data-skin="shiro"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F6F6F4; --ink: #242424;
  --ink-soft: #767676; --ink-faint: #B4B4B0; --line: #F0F0EE; --line-strong: #E2E2DE; --accent: #B7282E;
}
:root[data-skin="shiro"] .gallery-grid { columns: unset; display: block; max-width: 380px; margin: 0 auto; padding-top: clamp(60px, 12vw, 180px); }
:root[data-skin="shiro"] .gallery-grid .g-item, :root[data-skin="shiro"] .home-gallery .g-item { margin: 0 auto clamp(120px, 22vw, 300px); background: transparent; border-radius: 0; overflow: visible; text-align: center; }
:root[data-skin="shiro"] .g-media img, :root[data-skin="shiro"] .g-media svg { border: none !important; box-shadow: none; }
:root[data-skin="shiro"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="shiro"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: clamp(22px, 3.4vw, 44px) 0 0; }
:root[data-skin="shiro"] .g-title { font-family: var(--serif); font-weight: 400; font-size: 14px; letter-spacing: .06em; color: var(--ink-soft); }
:root[data-skin="shiro"] .g-meta { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }
:root[data-skin="shiro"] .section--showcase, :root[data-skin="shiro"] .home-gallery { background: var(--bg); }
:root[data-skin="shiro"] .section--showcase .section-head h2, :root[data-skin="shiro"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="shiro"] .section--showcase .eyebrow { color: var(--accent); }

/* (Karesansui, Ichimatsu, Seigaiha removed 2026-07-21 per user request — no background-pattern themes; see principles.md §5) */

/* --- Rakkan 落款: the artist's red seal (朱印) stamped on each work --- */
:root[data-skin="rakkan"] {
  --bg: #F5F2E9; --surface: #FCFAF3; --surface-2: #E8E3D4; --ink: #211D16;
  --ink-soft: #565043; --ink-faint: #948E7E; --line: #E2DCCC; --line-strong: #CFC8B4; --accent: #B7282E;
}
:root[data-skin="rakkan"] .gallery-grid .g-item, :root[data-skin="rakkan"] .home-gallery .g-item { position: relative; background: transparent; border-radius: 0; overflow: visible; margin-bottom: clamp(28px, 3.6vw, 54px); }
:root[data-skin="rakkan"] .g-media { position: relative; }
:root[data-skin="rakkan"] .g-media img, :root[data-skin="rakkan"] .g-media svg { border: none !important; box-shadow: 0 18px 40px -26px rgba(0,0,0,.4); }
:root[data-skin="rakkan"] .g-media::after { content: '印'; position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, #C4342E, #A11F1F 68%, #8E1A1A); color: #F6EDE6; font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1; clip-path: polygon(6% 2%, 96% 0, 100% 92%, 92% 100%, 4% 97%, 0 8%); transform: rotate(-3deg); box-shadow: inset 0 0 5px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(255,240,235,.16), 0 0 3px rgba(160,25,25,.45); opacity: .95; pointer-events: none; }
:root[data-skin="rakkan"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="rakkan"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 12px 2px 0; }
:root[data-skin="rakkan"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); }
:root[data-skin="rakkan"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
:root[data-skin="rakkan"] .section--showcase .section-head h2, :root[data-skin="rakkan"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="rakkan"] .section--showcase .eyebrow { color: var(--accent); }

/* --- Marumado 丸窓: the round window / mitate — images seen as circles --- */
:root[data-skin="marumado"] {
  --bg: #F2EFE7; --surface: #FAF8F1; --surface-2: #E5E0D3; --ink: #292620;
  --ink-soft: #5C574C; --ink-faint: #948E80; --line: #E0DACC; --line-strong: #C9C2B0; --accent: #6E5A3A;
}
:root[data-skin="marumado"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(36px, 5vw, 80px); justify-items: center; }
:root[data-skin="marumado"] .gallery-grid .g-item, :root[data-skin="marumado"] .home-gallery .g-item { background: transparent; border-radius: 0; overflow: visible; text-align: center; }
:root[data-skin="marumado"] .g-media { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle, var(--surface) 60%, var(--surface-2)); box-shadow: 0 24px 50px -30px rgba(0,0,0,.32); }
:root[data-skin="marumado"] .gallery-grid .g-item:nth-child(3n) .g-media { aspect-ratio: auto; border-radius: 0; border: none; background: none; box-shadow: 0 22px 46px -30px rgba(0,0,0,.34); }
:root[data-skin="marumado"] .g-media img, :root[data-skin="marumado"] .g-media svg { width: 100%; height: 100%; object-fit: cover; border: none !important; box-shadow: none; }
:root[data-skin="marumado"] .g-item:hover .g-media img { transform: scale(1.04); }
:root[data-skin="marumado"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 14px 0 0; }
:root[data-skin="marumado"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); }
:root[data-skin="marumado"] .g-meta { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
:root[data-skin="marumado"] .section--showcase .section-head h2, :root[data-skin="marumado"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="marumado"] .section--showcase .eyebrow { color: var(--accent); }
:root[data-skin="marumado"] .section--showcase .eyebrow::before { content: ''; display: inline-block; width: 9px; height: 9px; border: 1.5px solid var(--accent); border-radius: 50%; margin-right: 9px; vertical-align: middle; }

/* --- Fukinsei 不均整: deliberate asymmetry; staggered off-balance rhythm --- */
:root[data-skin="fukinsei"] {
  --bg: #F1EEE6; --surface: #FAF8F2; --surface-2: #E4DFD2; --ink: #232019;
  --ink-soft: #575247; --ink-faint: #938D7F; --line: #E1DBCD; --line-strong: #CAC3B1; --accent: #9A4A2E;
}
:root[data-skin="fukinsei"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: start; }
:root[data-skin="fukinsei"] .gallery-grid .g-item, :root[data-skin="fukinsei"] .home-gallery .g-item { background: transparent; border-radius: 0; overflow: visible; }
:root[data-skin="fukinsei"] .gallery-grid .g-item:nth-child(6n+1) { grid-column: span 2; margin-top: 0; }
:root[data-skin="fukinsei"] .gallery-grid .g-item:nth-child(6n+2) { margin-top: clamp(50px, 8vw, 120px); }
:root[data-skin="fukinsei"] .gallery-grid .g-item:nth-child(6n+4) { margin-top: clamp(26px, 4vw, 64px); }
:root[data-skin="fukinsei"] .gallery-grid .g-item:nth-child(6n+5) { grid-column: span 2; margin-top: clamp(30px, 5vw, 80px); }
:root[data-skin="fukinsei"] .g-media img, :root[data-skin="fukinsei"] .g-media svg { border: none !important; box-shadow: 0 22px 44px -28px rgba(0,0,0,.42); }
:root[data-skin="fukinsei"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="fukinsei"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 11px 0 0; }
:root[data-skin="fukinsei"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(13px, 1.1vw, 16px); color: var(--ink); }
:root[data-skin="fukinsei"] .g-meta { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
:root[data-skin="fukinsei"] .section--showcase .section-head h2, :root[data-skin="fukinsei"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="fukinsei"] .section--showcase .eyebrow { color: var(--accent); }
@media (max-width: 720px) { :root[data-skin="fukinsei"] .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Byōbu 屏風: the folding screen; panelled columns with fold shading --- */
:root[data-skin="byobu"] {
  --bg: #E9E3D3; --surface: #F3EEDF; --surface-2: #DAD2BC; --ink: #2A2519;
  --ink-soft: #574F3B; --ink-faint: #948B72; --line: #C9BF9F; --line-strong: #9C8E63; --accent: #8A2E24;
}
:root[data-skin="byobu"] .gallery-grid { columns: unset; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 2px solid var(--line-strong); background: var(--surface); }
:root[data-skin="byobu"] .gallery-grid .g-item, :root[data-skin="byobu"] .home-gallery .g-item { background: transparent; border-radius: 0; overflow: hidden; border-right: 2px solid var(--line-strong); }
:root[data-skin="byobu"] .gallery-grid .g-item:nth-child(2n) { background: linear-gradient(90deg, rgba(0,0,0,.06), transparent 18%, transparent 82%, rgba(0,0,0,.06)); }
:root[data-skin="byobu"] .gallery-grid .g-item:nth-child(2n+1) { background: linear-gradient(90deg, rgba(255,255,255,.35), transparent 20%); }
:root[data-skin="byobu"] .g-media img, :root[data-skin="byobu"] .g-media svg { border: none !important; box-shadow: none; }
:root[data-skin="byobu"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="byobu"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 10px 12px 12px; }
:root[data-skin="byobu"] .g-title { font-family: var(--serif); font-weight: 400; font-size: clamp(13px, 1.1vw, 16px); color: var(--ink); }
:root[data-skin="byobu"] .g-meta { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-top: 5px; }
:root[data-skin="byobu"] .section--showcase .section-head h2, :root[data-skin="byobu"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="byobu"] .section--showcase .eyebrow { color: var(--accent); }
@media (max-width: 720px) { :root[data-skin="byobu"] .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Mingei 民藝: folk-craft (Yanagi Sōetsu); honest, earthen, handmade --- */
:root[data-skin="mingei"] {
  --bg: #DED3BE; --surface: #E7DDC8; --surface-2: #CDBF9F; --ink: #302617;
  --ink-soft: #5A4E38; --ink-faint: #8C7E60; --line: #C3B392; --line-strong: #A2906A; --accent: #A85832;
}
:root[data-skin="mingei"] .gallery-grid .g-item, :root[data-skin="mingei"] .home-gallery .g-item { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; overflow: hidden; box-shadow: 0 2px 0 var(--line-strong); }
:root[data-skin="mingei"] .g-media img, :root[data-skin="mingei"] .g-media svg { border: none !important; box-shadow: none; filter: saturate(.88) sepia(.12) contrast(1.02); }
:root[data-skin="mingei"] .g-item:hover .g-media img { transform: none; }
:root[data-skin="mingei"] .g-overlay { position: static; inset: auto; opacity: 1; background: none; color: var(--ink); display: block; padding: 12px 14px 14px; }
:root[data-skin="mingei"] .g-title { font-family: var(--serif); font-weight: 600; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); }
:root[data-skin="mingei"] .g-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
:root[data-skin="mingei"] .section--showcase { background: var(--bg); }
:root[data-skin="mingei"] .section--showcase .section-head h2, :root[data-skin="mingei"] .section--showcase .link-arrow { color: var(--ink); }
:root[data-skin="mingei"] .section--showcase .eyebrow { color: var(--accent); }

/* ---- Japanese skins, wave 4 (Zen aesthetics + layout + pattern + textile) ---- */

/* Kanso 簡素 — simplicity: strip all ornament, essential form only, generous void */
:root[data-skin="kanso"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --ink:#1B1B1B; --ink-soft:#5A5A5A;
  --ink-faint:#A6A6A6; --line:#ECECEC; --line-strong:#DADADA; --accent:#1B1B1B;
}
:root[data-skin="kanso"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:64px; }
:root[data-skin="kanso"] .g-item{ background:none; border:0; box-shadow:none; }
:root[data-skin="kanso"] .g-media{ box-shadow:none; border:1px solid var(--line); }
:root[data-skin="kanso"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:14px 2px 0; }
:root[data-skin="kanso"] .g-title{ font-weight:400; letter-spacing:.04em; }
:root[data-skin="kanso"] .g-meta{ color:var(--ink-faint); }

/* Kokō 枯高 — austere, weathered loftiness; aged patina, tall lean frames */
:root[data-skin="kokou"]{
  --bg:#E7E2D6; --surface:#E1DBCB; --surface-2:#D8D1BE; --ink:#443E33; --ink-soft:#6B6252;
  --ink-faint:#948B77; --line:#CDC5B0; --line-strong:#B4AA90; --accent:#7A6E54;
}
:root[data-skin="kokou"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
:root[data-skin="kokou"] .g-media{ aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line-strong); }
:root[data-skin="kokou"] .g-media img, :root[data-skin="kokou"] .g-media svg{ width:100%; height:100%; object-fit:cover; filter:sepia(.28) contrast(.9) brightness(.98) saturate(.7); }
:root[data-skin="kokou"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 2px 0; }
:root[data-skin="kokou"] .g-title{ font-weight:400; font-style:italic; color:var(--ink-soft); }

/* Shizen 自然 — naturalness, no artifice; organic earth tones, soft edges */
:root[data-skin="shizen-1"]{
  --bg:#F1EEE3; --surface:#ECE8DA; --surface-2:#E2DCCA; --ink:#33362C; --ink-soft:#5C6150;
  --ink-faint:#8C9078; --line:#D8D3C0; --line-strong:#C2BCA4; --accent:#5A6B4A;
}
:root[data-skin="shizen-1"] .gallery-grid{ column-gap:34px; }
:root[data-skin="shizen-1"] .g-media{ border-radius:14px 4px 12px 6px; overflow:hidden; box-shadow:0 2px 0 var(--line); }
:root[data-skin="shizen-1"] .g-media img, :root[data-skin="shizen-1"] .g-media svg{ filter:saturate(.9) brightness(1.01); }
:root[data-skin="shizen-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 4px 0; }
:root[data-skin="shizen-1"] .g-title{ font-weight:500; }
:root[data-skin="shizen-1"] .g-meta{ color:var(--accent); }

/* Datsuzoku 脱俗 — freedom from convention: break the grid, one rule-breaking element */
:root[data-skin="datsuzoku"]{
  --bg:#FBFAF6; --surface:#FFFFFF; --surface-2:#F2EFE7; --ink:#1C1C1C; --ink-soft:#565656;
  --ink-faint:#9A9A9A; --line:#E6E2D8; --line-strong:#D2CCBE; --accent:#D24A34;
}
:root[data-skin="datsuzoku"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; gap:22px; }
:root[data-skin="datsuzoku"] .g-item{ grid-column:span 2; }
:root[data-skin="datsuzoku"] .g-item:nth-child(5n+1){ grid-column:span 4; grid-row:span 2; }
:root[data-skin="datsuzoku"] .g-item:nth-child(7n+3){ grid-column:span 3; transform:rotate(-1.5deg); }
:root[data-skin="datsuzoku"] .g-item:nth-child(4n+2){ align-self:end; }
:root[data-skin="datsuzoku"] .g-media{ border:1px solid var(--line-strong); }
:root[data-skin="datsuzoku"] .g-item:nth-child(5n+1) .g-media{ border-color:var(--accent); }

/* Seijaku 静寂 — energized calm, stillness; quiet cool ground, one centred focus, vast rest */
:root[data-skin="seijaku"]{
  --bg:#EAEDEC; --surface:#F2F4F3; --surface-2:#E0E4E3; --ink:#2C3335; --ink-soft:#5B6466;
  --ink-faint:#93999A; --line:#D5DAD9; --line-strong:#BFC6C5; --accent:#4E6A6A;
}
:root[data-skin="seijaku"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(2,1fr); gap:96px; max-width:940px; margin-inline:auto; }
:root[data-skin="seijaku"] .g-media{ box-shadow:0 24px 60px -34px rgba(44,51,53,.4); }
:root[data-skin="seijaku"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; text-align:center; padding:22px 0 0; }
:root[data-skin="seijaku"] .g-title{ font-weight:400; letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; }
:root[data-skin="seijaku"] .g-meta{ letter-spacing:.1em; }

/* Notan 濃淡 — dark-light massing; pure black & white, alternating positive/negative cells */
:root[data-skin="notan"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#000000; --ink:#000000; --ink-soft:#000000;
  --ink-faint:#000000; --line:#000000; --line-strong:#000000; --accent:#000000;
}
:root[data-skin="notan"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:2px solid #000; }
:root[data-skin="notan"] .g-item{ border:1px solid #000; }
:root[data-skin="notan"] .g-media img, :root[data-skin="notan"] .g-media svg{ filter:grayscale(1) contrast(1.4); }
:root[data-skin="notan"] .g-item:nth-child(2n){ background:#000; }
:root[data-skin="notan"] .g-item:nth-child(2n) .g-media img, :root[data-skin="notan"] .g-item:nth-child(2n) .g-media svg{ filter:grayscale(1) contrast(1.4) invert(1); }
:root[data-skin="notan"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:8px 10px; }
:root[data-skin="notan"] .g-item:nth-child(2n) .g-title, :root[data-skin="notan"] .g-item:nth-child(2n) .g-meta{ color:#fff; }

/* Ensō 円相 — one-brush Zen circle; circular crops ringed by a single ink stroke */
:root[data-skin="enso"]{
  --bg:#FBFAF6; --surface:#FBFAF6; --surface-2:#F2EFE7; --ink:#161412; --ink-soft:#4A463F;
  --ink-faint:#948E82; --line:#E4E0D5; --line-strong:#CFC9BB; --accent:#161412;
}
:root[data-skin="enso"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:56px; }
:root[data-skin="enso"] .g-item{ position:relative; }
:root[data-skin="enso"] .g-media{ aspect-ratio:1/1; border-radius:50%; overflow:hidden; }
:root[data-skin="enso"] .g-media img, :root[data-skin="enso"] .g-media svg{ width:100%; height:100%; object-fit:cover; }
:root[data-skin="enso"] .g-item::before{ content:""; position:absolute; inset:-12px; border-radius:50%; border:3px solid var(--ink); border-right-color:transparent; transform:rotate(24deg); pointer-events:none; }
:root[data-skin="enso"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; text-align:center; padding:18px 0 0; }

/* Chanoyu 茶の湯 — tea gathering as an integrated aesthetic practice: wabi-sabi + ma +
   seijaku + shibui fused into one roji-to-tokonoma journey, never a borrowed
   "Japanese" motif (see traditions.md § "Chanoyu — the Way of Tea"). This block is
   the shared palette + gallery half (A-J); the whole-site nav/lightbox/footer/
   controls/hero/section-heads/commerce/facets/forms/toast/about/projects/switcher/
   sound rules (K-Y) live under body[data-struct="chanoyu"] and
   :root[data-skin="chanoyu"] further down in the STRUCTURAL SKINS — PART 2 section,
   next to the Rothko · 2 whole-site block. See the "Chanoyu 茶の湯" A-Y table in
   docs/design/src/philosophy-in-the-interface.md for the full reverse mapping. */
:root[data-skin="chanoyu"]{
  --bg:#C9C0AC; --surface:#D8D0BE; --surface-2:#B8AA91;
  --ink:#292821; --ink-soft:#5D584B; --ink-faint:#817A68;
  --line:rgba(58,54,44,.18); --line-strong:rgba(58,54,44,.34);
  --accent:#6E4932; --accent-deep:#423328; --accent-soft:#A99374;
}
:root[data-skin="chanoyu"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:minmax(0,760px); justify-content:center; gap:clamp(80px,14vh,170px); }
:root[data-skin="chanoyu"] .gallery-grid .g-item:nth-child(even){ transform:translateX(clamp(0px,3vw,24px)); }
:root[data-skin="chanoyu"] .g-media{ padding:clamp(22px,4vw,52px); background:#D8D0BE; border:1px solid rgba(64,55,43,.24); border-radius:1px; overflow:visible; }
:root[data-skin="chanoyu"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:16px 0 0; color:var(--ink-faint); }
:root[data-skin="chanoyu"] .g-title{ font-family:var(--serif); font-weight:400; letter-spacing:.04em; color:var(--ink-soft); }
:root[data-skin="chanoyu"] .g-meta{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); }

/* (Chirashi, Asanoha removed 2026-07-21 per user request — no background-pattern themes; see principles.md §5) */

/* (Boro skin removed 2026-07-21 per user request — see traditions.md §14) */


/* ---- Modern German skins (corporate ID, signage, machine age) ---- */

/* (Ulm skin removed 2026-07-21 per user request — see traditions.md §15) */

/* Aicher '72 — Munich Olympics rainbow; non-nationalistic bright coded strips, modular grid */
:root[data-skin="aicher-1"]{
  --bg:#F4F6F7; --surface:#FFFFFF; --surface-2:#E8EDEF; --ink:#16242F; --ink-soft:#465A66;
  --ink-faint:#8CA0AB; --line:#DCE3E6; --line-strong:#C4CED2; --accent:#3E9BD4;
}
:root[data-skin="aicher-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
:root[data-skin="aicher-1"] .g-item{ background:var(--surface); border-top:6px solid var(--accent); box-shadow:0 1px 0 var(--line-strong); }
:root[data-skin="aicher-1"] .g-item:nth-child(4n+2){ border-top-color:#17A67B; }
:root[data-skin="aicher-1"] .g-item:nth-child(4n+3){ border-top-color:#F5A623; }
:root[data-skin="aicher-1"] .g-item:nth-child(4n){ border-top-color:#6FB7E0; }
:root[data-skin="aicher-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 12px 12px; }
:root[data-skin="aicher-1"] .g-title{ font-weight:600; }

/* DIN 1451 — autobahn signage; black plates, DIN yellow, engineered uppercase */
:root[data-skin="din"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#111111; --ink:#111111; --ink-soft:#333333;
  --ink-faint:#777777; --line:#111111; --line-strong:#111111; --accent:#FBBA00;
}
:root[data-skin="din"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
:root[data-skin="din"] .g-item{ border:6px solid #111; border-radius:12px; padding:8px; background:#fff; }
:root[data-skin="din"] .g-item:nth-child(3n+2){ border-color:var(--accent); }
:root[data-skin="din"] .g-media img, :root[data-skin="din"] .g-media svg{ filter:grayscale(.2) contrast(1.05); }
:root[data-skin="din"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:10px 6px 4px; }
:root[data-skin="din"] .g-title{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
:root[data-skin="din"] .g-meta{ text-transform:uppercase; letter-spacing:.1em; font-variant-numeric:tabular-nums; }

/* Spiekermann — FF Meta / MetaDesign information design; warm ground, red rules, tight hierarchy */
:root[data-skin="spiekermann"]{
  --bg:#F7F5F1; --surface:#FFFFFF; --surface-2:#EEEAE1; --ink:#1C1B19; --ink-soft:#565049;
  --ink-faint:#948D82; --line:#E4E0D8; --line-strong:#CFC9BC; --accent:#E30613;
}
:root[data-skin="spiekermann"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:30px 26px; }
:root[data-skin="spiekermann"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:10px 0 0; border-top:2px solid var(--accent); margin-top:10px; }
:root[data-skin="spiekermann"] .g-title{ font-weight:600; letter-spacing:-.01em; }
:root[data-skin="spiekermann"] .g-meta{ color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }

/* (Stankowski skin removed 2026-07-21 per user request — see traditions.md §15) */

/* (Behrens AEG skin removed 2026-07-21 per user request — see traditions.md §15) */

/* (Kraftwerk skin removed 2026-07-21 per user request — see traditions.md §15) */

/* Werkbund — form follows function; honest muted materials, unadorned utility */
:root[data-skin="werkbund-1"]{
  --bg:#E8E4D8; --surface:#E1DCCC; --surface-2:#D6D0BC; --ink:#2E2B22; --ink-soft:#5A5443;
  --ink-faint:#8E876F; --line:#CDC6B2; --line-strong:#B2AA90; --accent:#6E4A2E;
}
:root[data-skin="werkbund-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line-strong); }
:root[data-skin="werkbund-1"] .g-item{ border:1px solid var(--line-strong); padding:12px; background:var(--surface); }
:root[data-skin="werkbund-1"] .g-media img, :root[data-skin="werkbund-1"] .g-media svg{ filter:saturate(.75) sepia(.1); }
:root[data-skin="werkbund-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:10px 0 0; }
:root[data-skin="werkbund-1"] .g-title{ font-weight:600; }
:root[data-skin="werkbund-1"] .g-meta{ color:var(--accent); }

/* (Neue Sachlichkeit + Tschichold skins removed 2026-07-21 per user request — see traditions.md §15) */


/* ================= British skins ================= */

/* Brody · The Face — type-as-image editorial; grid-breaking, bold condensed caps, black bars */
:root[data-skin="brody"]{
  --bg:#ECEAE2; --surface:#F4F2EA; --surface-2:#16130F; --ink:#16130F; --ink-soft:#44403A;
  --ink-faint:#847E72; --line:#CFC9BA; --line-strong:#16130F; --accent:#D8382A;
}
:root[data-skin="brody"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:30px 26px; align-items:end; }
:root[data-skin="brody"] .g-item:nth-child(3n+2){ margin-bottom:40px; }
:root[data-skin="brody"] .g-media{ border-top:10px solid #16130F; }
:root[data-skin="brody"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:8px 0 0; }
:root[data-skin="brody"] .g-title{ text-transform:uppercase; font-weight:800; letter-spacing:-.02em; font-size:1.15rem; line-height:.95; }
:root[data-skin="brody"] .g-meta{ text-transform:uppercase; letter-spacing:.28em; color:var(--accent); font-weight:700; }

/* Reid · Punk — ransom-note cut-up; rotated tiles, torn day-glo tape captions */
:root[data-skin="reid"]{
  --bg:#E7E1D0; --surface:#EFE9D9; --surface-2:#111111; --ink:#111111; --ink-soft:#3A382F;
  --ink-faint:#7C776A; --line:#111111; --line-strong:#111111; --accent:#FF2D95;
}
:root[data-skin="reid"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
:root[data-skin="reid"] .g-item{ background:#EFE9D9; padding:8px; border:2px solid #111; box-shadow:4px 4px 0 #111; }
:root[data-skin="reid"] .g-item:nth-child(2n){ transform:rotate(-2deg); }
:root[data-skin="reid"] .g-item:nth-child(3n){ transform:rotate(1.6deg); }
:root[data-skin="reid"] .g-media img, :root[data-skin="reid"] .g-media svg{ filter:grayscale(1) contrast(1.2); }
:root[data-skin="reid"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:8px 2px 0; }
:root[data-skin="reid"] .g-title{ display:inline; background:var(--accent); color:#111; padding:2px 6px; font-weight:800; text-transform:uppercase; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
:root[data-skin="reid"] .g-meta{ display:inline-block; background:#FFE500; color:#111; padding:1px 5px; margin-top:6px; transform:rotate(-1deg); font-weight:700; }

/* Designers Republic — digital maximalism; dense grid, hazard borders, hyper magenta, mono */
:root[data-skin="tdr"]{
  --bg:#EEF0EA; --surface:#FFFFFF; --surface-2:#0E0E12; --ink:#0E0E12; --ink-soft:#3C3C44;
  --ink-faint:#7A7A84; --line:#0E0E12; --line-strong:#0E0E12; --accent:#FF0098;
}
:root[data-skin="tdr"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
:root[data-skin="tdr"] .g-item{ background:#fff; border:2px solid #0E0E12; padding:5px; position:relative; }
:root[data-skin="tdr"] .g-item::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:repeating-linear-gradient(45deg,#0E0E12 0 7px,#FFE500 7px 14px); }
:root[data-skin="tdr"] .g-media{ margin-top:5px; }
:root[data-skin="tdr"] .g-media img, :root[data-skin="tdr"] .g-media svg{ filter:saturate(1.15) contrast(1.08); }
:root[data-skin="tdr"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:6px 4px 2px; }
:root[data-skin="tdr"] .g-title{ font-family:var(--mono, ui-monospace, monospace); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:var(--accent); font-weight:700; }
:root[data-skin="tdr"] .g-meta{ font-family:var(--mono, ui-monospace, monospace); font-size:.62rem; letter-spacing:.14em; }

/* ================= New York skins ================= */

/* Paul Rand — corporate modernism; flat primary colour blocks in a calm grid */
:root[data-skin="rand-1"]{
  --bg:#F3F1EA; --surface:#FFFFFF; --surface-2:#EAE7DE; --ink:#1A1A1A; --ink-soft:#4C4C4C;
  --ink-faint:#8C8C8C; --line:#E0DDD3; --line-strong:#C9C5B9; --accent:#E4231B;
}
:root[data-skin="rand-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
:root[data-skin="rand-1"] .g-media{ border-left:10px solid var(--accent); }
:root[data-skin="rand-1"] .g-item:nth-child(3n+2) .g-media{ border-left-color:#154BA0; }
:root[data-skin="rand-1"] .g-item:nth-child(3n) .g-media{ border-left-color:#F2B417; }
:root[data-skin="rand-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 2px 0; }
:root[data-skin="rand-1"] .g-title{ font-weight:700; letter-spacing:-.01em; }
:root[data-skin="rand-1"] .g-meta{ color:var(--ink-faint); }

/* Lubalin — typographic expressionism; type-as-image, tight ligature-packed caps */
:root[data-skin="lubalin"]{
  --bg:#F5F3EC; --surface:#FBFAF4; --surface-2:#171717; --ink:#171717; --ink-soft:#3E3E3E;
  --ink-faint:#808080; --line:#E2DED4; --line-strong:#171717; --accent:#171717;
}
:root[data-skin="lubalin"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:22px 20px; }
:root[data-skin="lubalin"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:10px 0 0; border-bottom:4px solid #171717; margin-top:10px; padding-bottom:6px; }
:root[data-skin="lubalin"] .g-title{ text-transform:uppercase; font-weight:800; letter-spacing:-.05em; font-size:1.35rem; line-height:.9; }
:root[data-skin="lubalin"] .g-meta{ text-transform:uppercase; letter-spacing:.02em; font-weight:600; }

/* Glaser · Push Pin — eclectic pop; warm cream, rainbow accent, Art-Nouveau curves */
:root[data-skin="glaser"]{
  --bg:#F6EFDC; --surface:#FCF7E9; --surface-2:#E9DFC2; --ink:#241C10; --ink-soft:#5A4E38;
  --ink-faint:#938769; --line:#E1D6B8; --line-strong:#C9BB95; --accent:#E23B6D;
}
:root[data-skin="glaser"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
:root[data-skin="glaser"] .g-media{ border-radius:26px 26px 4px 26px; overflow:hidden; border:3px solid var(--ink); }
:root[data-skin="glaser"] .g-item:nth-child(2n) .g-media{ border-radius:4px 26px 26px 26px; }
:root[data-skin="glaser"] .g-media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:linear-gradient(90deg,#E23B6D,#F2B417,#2FA36B,#2E7BD6,#7A3FB0); }
:root[data-skin="glaser"] .g-media{ position:relative; }
:root[data-skin="glaser"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 4px 0; }
:root[data-skin="glaser"] .g-title{ font-family:var(--serif); font-weight:700; }
:root[data-skin="glaser"] .g-meta{ color:var(--accent); font-weight:600; }

/* Baron · Bazaar — extreme minimalism; razor Didot serif, vast white space, big photos */
:root[data-skin="baron"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F4F4; --ink:#111111; --ink-soft:#555555;
  --ink-faint:#9C9C9C; --line:#ECECEC; --line-strong:#D6D6D6; --accent:#111111;
}
:root[data-skin="baron"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(2,1fr); gap:110px 80px; max-width:1000px; margin-inline:auto; }
:root[data-skin="baron"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; text-align:center; padding:24px 0 0; }
:root[data-skin="baron"] .g-title{ font-family:var(--serif); font-weight:400; font-size:1.5rem; letter-spacing:.02em; }
:root[data-skin="baron"] .g-meta{ text-transform:uppercase; letter-spacing:.34em; font-size:.66rem; color:var(--ink-faint); }

/* (Los Angeles skins — bass, greiman, sussman — removed 2026-07-21 per user request; see traditions.md §16) */

/* ============================================================
   ARCHITECTURE skins — 2026-07-22
   Each encodes a real operative system + the architect's philosophy.
   Photos stay uncropped (global rule); mats live on .g-media.
   ============================================================ */

/* Le Corbusier — "a machine for living": beauty is mathematical. Modulor φ-series
   proportion, ochre + ultramarine polychromy on béton-white, horizontal datum rules. */
:root[data-skin="corbusier"]{
  --bg:#F5F0E8; --surface:#FBF8F1; --surface-2:#E7E0D3; --ink:#1E1C18; --ink-soft:#4E4A42;
  --ink-faint:#8C8578; --line:#D8CFBE; --line-strong:#C0B8AC; --accent:#C89020; --accent-deep:#1A3E88; --accent-soft:#EEE7D6;
}
:root[data-skin="corbusier"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:42px 26px; }
:root[data-skin="corbusier"] .g-item{ border-top:2px solid var(--ink); padding-top:13px; }
:root[data-skin="corbusier"] .g-media{ background:#FBF8F1; padding:17px; box-shadow:inset 0 0 0 1px var(--line-strong); }
:root[data-skin="corbusier"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:11px 0 0; color:var(--ink); }
:root[data-skin="corbusier"] .g-title{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.92rem; color:var(--ink); }
:root[data-skin="corbusier"] .g-meta{ font-family:var(--mono); color:var(--accent-deep); }

/* Mies van der Rohe — "less is more" / "God is in the details": truth over expression.
   Travertine mat, 24-ft-bay even grid, cruciform tectonic joint at each cell. */
:root[data-skin="mies"]{
  --bg:#EDE7DB; --surface:#F6F1E7; --surface-2:#DCD3C0; --ink:#1C1E20; --ink-soft:#4A4C4E;
  --ink-faint:#8A8778; --line:#CFC7B4; --line-strong:#B4AB96; --accent:#C09050; --accent-deep:#3A5040; --accent-soft:#E7E0CE;
}
:root[data-skin="mies"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
:root[data-skin="mies"] .gallery-grid .g-item{ overflow:visible; }
:root[data-skin="mies"] .g-media{ background:#D4C0A0; padding:15px; border:1px solid var(--line-strong); }
:root[data-skin="mies"] .g-item{ position:relative; }
:root[data-skin="mies"] .g-item::before{ content:""; position:absolute; top:-9px; left:50%; width:1px; height:18px; background:var(--ink-faint); }
:root[data-skin="mies"] .g-item::after{ content:""; position:absolute; top:-1px; left:calc(50% - 9px); width:18px; height:1px; background:var(--ink-faint); }
:root[data-skin="mies"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:11px 0 0; color:var(--ink); }
:root[data-skin="mies"] .g-title{ font-family:var(--sans); font-weight:300; letter-spacing:.05em; color:var(--ink); }
:root[data-skin="mies"] .g-meta{ font-family:var(--mono); color:var(--ink-faint); }

/* Frank Lloyd Wright — organic architecture "married to the ground". 4-ft unit grid,
   Cherokee-red brick-course border, sand mat, autumnal earth palette. */
:root[data-skin="wright-1"]{
  --bg:#F0EAD8; --surface:#F7F1E2; --surface-2:#E3D9BE; --ink:#1E1810; --ink-soft:#5A3820;
  --ink-faint:#8C7A54; --line:#D8CBA6; --line-strong:#B89A62; --accent:#8A2818; --accent-deep:#6A8A58; --accent-soft:#E6D9B4;
}
:root[data-skin="wright-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
:root[data-skin="wright-1"] .g-item{ border-left:4px solid var(--accent); padding-left:12px; }
:root[data-skin="wright-1"] .g-media{ background:#C4A878; padding:14px; }
:root[data-skin="wright-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:10px 0 0; color:var(--ink); }
:root[data-skin="wright-1"] .g-title{ font-family:var(--serif); font-weight:600; letter-spacing:0; color:var(--ink); }
:root[data-skin="wright-1"] .g-meta{ font-family:var(--mono); color:var(--ink-soft); }

/* Tadao Ando — emptiness is fullness: bare concrete, silence, light. 900mm ken module,
   fair-faced concrete mat, form-tie dot rule, generous ma (interval). */
:root[data-skin="ando"]{
  --bg:#B4AEA8; --surface:#C4BEB8; --surface-2:#9A9490; --ink:#1E1C18; --ink-soft:#45423E;
  --ink-faint:#6E6A64; --line:#8E8A84; --line-strong:#726E68; --accent:#5A5550; --accent-deep:#788EA0; --accent-soft:#C9C4BE;
}
:root[data-skin="ando"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1000px; margin-inline:auto; }
:root[data-skin="ando"] .g-media{ background:#C4BEB8; padding:30px; box-shadow:inset 0 0 0 1px rgba(30,28,24,.14); }
:root[data-skin="ando"] .g-item{ border-top:2px dotted var(--ink-faint); padding-top:16px; }
:root[data-skin="ando"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:14px 0 0; color:var(--ink); }
:root[data-skin="ando"] .g-title{ font-family:var(--sans); font-weight:300; text-transform:lowercase; letter-spacing:.08em; color:var(--ink); }
:root[data-skin="ando"] .g-meta{ font-family:var(--mono); color:var(--ink-soft); }

/* Luis Barragán — "emotional architecture": any work without serenity is a mistake.
   Saturated pigment planes (bougainvillea, ochre, terracotta) with white-mat apertures. */
:root[data-skin="barragan-1"]{
  --bg:#EFE8DC; --surface:#F6F0E6; --surface-2:#E2D8C8; --ink:#3A2418; --ink-soft:#5A3818;
  --ink-faint:#9A8875; --line:#DED2C0; --line-strong:#C7B7A0; --accent:#D63568; --accent-deep:#783878; --accent-soft:#F1DFD6;
}
:root[data-skin="barragan-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
:root[data-skin="barragan-1"] .g-media{ background:#EFE8DC; padding:18px; }
:root[data-skin="barragan-1"] .g-item{ padding:22px; }
:root[data-skin="barragan-1"] .g-item:nth-child(4n+1){ background:#D63568; }
:root[data-skin="barragan-1"] .g-item:nth-child(4n+2){ background:#D4A020; }
:root[data-skin="barragan-1"] .g-item:nth-child(4n+3){ background:#783878; }
:root[data-skin="barragan-1"] .g-item:nth-child(4n){ background:#B82818; }
:root[data-skin="barragan-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 2px 0; color:#F6F0E6; }
:root[data-skin="barragan-1"] .g-title{ font-family:var(--serif); font-weight:400; letter-spacing:.02em; color:#FBF6EE; }
:root[data-skin="barragan-1"] .g-meta{ font-family:var(--mono); color:rgba(255,255,255,.82); }

/* Louis Kahn — "what does the brick want to be": every space has a will. Served/servant
   split, Roman-brick + travertine, a silver Kimbell light-slot above each photo. */
:root[data-skin="kahn"]{
  --bg:#E0D8C4; --surface:#E8E0CC; --surface-2:#C8B898; --ink:#2A201A; --ink-soft:#5A4030;
  --ink-faint:#8A7A64; --line:#CBBE9E; --line-strong:#A8946E; --accent:#8A3E28; --accent-deep:#6A4828; --accent-soft:#DAD0B6;
}
:root[data-skin="kahn"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
:root[data-skin="kahn"] .g-item{ border-left:14px solid var(--accent); padding-left:16px; }
:root[data-skin="kahn"] .g-media{ background:#C8B898; padding:16px; position:relative; }
:root[data-skin="kahn"] .g-media::before{ content:""; position:absolute; top:7px; left:16px; right:16px; height:2px; background:#B8B4AC; }
:root[data-skin="kahn"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 0 0; color:var(--ink); }
:root[data-skin="kahn"] .g-title{ font-family:var(--serif); font-weight:600; letter-spacing:.01em; color:var(--ink); }
:root[data-skin="kahn"] .g-meta{ font-family:var(--mono); color:var(--ink-soft); }

/* Oscar Niemeyer — "the free curve", not the right angle: architecture should be
   sensual and joyful. Brilliant white on Brasília cerulean, a parabolic arc divider. */
:root[data-skin="niemeyer"]{
  --bg:#1A4878; --surface:#215489; --surface-2:#5A96C0; --ink:#F2EFEA; --ink-soft:#D5E2ED;
  --ink-faint:#9FBBD4; --line:#2E609A; --line-strong:#5A96C0; --accent:#F2EFEA; --accent-deep:#FAFAF8; --accent-soft:#3070A0;
}
:root[data-skin="niemeyer"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; position:relative; padding-top:46px; }
:root[data-skin="niemeyer"] .gallery-grid::before{ content:""; position:absolute; top:0; left:0; right:0; height:38px; background:#F2EFEA; border-radius:0 0 50% 50%/0 0 100% 100%; }
:root[data-skin="niemeyer"] .g-media{ background:#F2EFEA; padding:16px; border-radius:120px 120px 4px 4px; }
:root[data-skin="niemeyer"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 4px 0; color:var(--ink); }
:root[data-skin="niemeyer"] .g-title{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.2rem; color:var(--ink); }
:root[data-skin="niemeyer"] .g-meta{ font-family:var(--mono); color:var(--ink-faint); }

/* ============================================================================
   STRUCTURAL SKINS — the root philosophy restructures the WHOLE site, not just
   the gallery. A thin DOM layer (js/skin-structure.js) injects an aria-hidden
   #skin-structure scaffold with N empty .skin-structure-layer nodes that the
   active skin's CSS paints. No existing DOM is moved, so every skin is fully
   reversible. body[data-struct="id"] is the structural hook.
   ============================================================================ */
#skin-structure{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; contain:strict; }
.skin-structure-layer{ position:absolute; inset:0; }
body[data-struct]{ position:relative; }
body[data-struct] > *:not(#skin-structure){ position:relative; z-index:1; }

/* ---- Niemeyer (rated 4) — "Not the right angle, but the free, sensual curve"
   Root philosophy: freedom, sensuality and joy live in the curve drawn from
   mountains, rivers and the body; brilliant white forms stand against the open
   Brasília sky; the whole (the sweeping gesture) precedes the parts. So the
   orthogonal page is overruled everywhere: the top bar becomes a sweeping vault,
   sections become arched bays, every hard corner softens into an arc, and the
   scaffold hangs three white parabolas in the blue sky behind it all. ------- */
body[data-struct="niemeyer"] #skin-structure{ background:#1A4878; }
body[data-struct="niemeyer"] .skin-structure-layer:nth-child(1){
  /* the signature parabolic sweep arcing across the sky */
  top:-40vh; left:-20vw; width:140vw; height:120vh;
  background:radial-gradient(120% 80% at 50% 100%, rgba(242,239,234,.10) 0 60%, transparent 62%);
}
body[data-struct="niemeyer"] .skin-structure-layer:nth-child(2){
  /* a second, offset arc — the colonnade / vault repeated */
  top:auto; bottom:-30vh; left:-10vw; width:120vw; height:80vh;
  background:radial-gradient(90% 100% at 30% 0%, rgba(242,239,234,.07) 0 55%, transparent 57%);
}
body[data-struct="niemeyer"] .skin-structure-layer:nth-child(3){
  /* a floating white disc — a pure form against the sky */
  top:12vh; right:8vw; left:auto; width:min(30vw,320px); height:min(30vw,320px);
  border-radius:50%; background:radial-gradient(circle at 38% 34%, rgba(250,250,248,.16), rgba(242,239,234,.05) 70%, transparent 72%);
}
/* the header stops being a straight sticky bar: it becomes a low white vault */
:root[data-skin="niemeyer"] .site-header{
  position:relative; background:#F2EFEA; border-bottom:none;
  border-radius:0 0 48% 48% / 0 0 90px 90px; box-shadow:0 18px 40px rgba(0,0,0,.12);
  padding-bottom:14px;
}
:root[data-skin="niemeyer"] .site-header .nav{ height:80px; }
:root[data-skin="niemeyer"] .brand,
:root[data-skin="niemeyer"] .nav-links a,
:root[data-skin="niemeyer"] .site-header .btn,
:root[data-skin="niemeyer"] .cart-btn{ color:#1A4878; }
:root[data-skin="niemeyer"] .nav-links a::after{ background:#1A4878; }
/* every actionable form loses its corners — the free curve replaces the angle */
:root[data-skin="niemeyer"] .btn,
:root[data-skin="niemeyer"] .skin-btn,
:root[data-skin="niemeyer"] input,
:root[data-skin="niemeyer"] select,
:root[data-skin="niemeyer"] textarea,
:root[data-skin="niemeyer"] .cart-btn{ border-radius:999px; }
/* the hero art and every card image become arched vault bays (no crop: mat only) */
:root[data-skin="niemeyer"] .hero-art,
:root[data-skin="niemeyer"] .card-media,
:root[data-skin="niemeyer"] .about-portrait{
  background:#F2EFEA; padding:16px; border-radius:150px 150px 8px 8px;
}
:root[data-skin="niemeyer"] .hero h1{ font-family:var(--serif); font-style:italic; font-weight:400; }
/* sections are not stacked boxes but arched bays carved into the sky */
:root[data-skin="niemeyer"] .section--alt,
:root[data-skin="niemeyer"] .section--showcase{
  border-radius:60px 60px 0 0 / 90px 90px 0 0; border-block:none;
}
:root[data-skin="niemeyer"] .section--showcase{ background:#153c65; }
/* the footer closes the page with an upturned vault echoing the header */
:root[data-skin="niemeyer"] .site-footer{
  background:#F2EFEA; color:#1A4878; border-top:none;
  border-radius:48% 48% 0 0 / 90px 90px 0 0; margin-top:60px;
}
:root[data-skin="niemeyer"] .site-footer a,
:root[data-skin="niemeyer"] .site-footer h4{ color:#1A4878; }

/* Alvar Aalto — technology must serve "the little man": modernism made humane. Finnish
   birch mat + copper reveal, soft radii, one grid-breaking organic exception per row. */
:root[data-skin="aalto"]{
  --bg:#F4EEE2; --surface:#FAF5EA; --surface-2:#E6DAC2; --ink:#2A2418; --ink-soft:#5A4A30;
  --ink-faint:#8E8064; --line:#DED0B4; --line-strong:#C4B48E; --accent:#A03C28; --accent-deep:#6A9070; --accent-soft:#EDE2CC;
}
:root[data-skin="aalto"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start; }
:root[data-skin="aalto"] .g-media{ background:#D0AE68; padding:15px; border:1px solid var(--accent-deep); border-radius:8px; }
:root[data-skin="aalto"] .g-item:nth-child(5n+3){ grid-column:span 2; }
:root[data-skin="aalto"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:11px 2px 0; color:var(--ink); }
:root[data-skin="aalto"] .g-title{ font-family:var(--serif); font-weight:600; color:var(--ink); }
:root[data-skin="aalto"] .g-meta{ font-family:var(--mono); color:var(--ink-soft); }

/* ============================================================
   PAINTERS skins — 2026-07-22
   ============================================================ */

/* Kazimir Malevich — Suprematism: art escapes the object; pure feeling is the supreme
   reality. Linen void, black/red, one 4°-tilted Black Square as page chrome. */
:root[data-skin="malevich-1"]{
  --bg:#F4F0E8; --surface:#FBF8F1; --surface-2:#E7E1D3; --ink:#1A1818; --ink-soft:#45423E;
  --ink-faint:#8C867A; --line:#DCD5C6; --line-strong:#C2BBA9; --accent:#CC2B1D; --accent-deep:#1B3A73; --accent-soft:#EFE7D6;
}
:root[data-skin="malevich-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px; position:relative; padding-top:64px; }
:root[data-skin="malevich-1"] .gallery-grid::before{ content:""; position:absolute; top:6px; left:6px; width:44px; height:44px; background:#1A1818; transform:rotate(4deg); }
:root[data-skin="malevich-1"] .g-media{ background:#FFFFFF; padding:16px 16px 22px; box-shadow:inset 0 0 0 1px var(--line-strong); }
:root[data-skin="malevich-1"] .g-item:nth-child(3n+2) .g-media{ box-shadow:inset 0 0 0 2px var(--accent); }
:root[data-skin="malevich-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 0 0; color:var(--ink); }
:root[data-skin="malevich-1"] .g-title{ font-family:var(--sans); text-transform:uppercase; font-weight:700; letter-spacing:.08em; font-size:.9rem; color:var(--ink); }
:root[data-skin="malevich-1"] .g-meta{ font-family:var(--mono); color:var(--accent); }

/* Wassily Kandinsky — painting as spiritual vibration from "inner necessity". Warm-cold
   contrast, yellow-triangle/red-square/blue-circle color meaning, a blue-circle motif. */
:root[data-skin="kandinsky-1"]{
  --bg:#F8F3E3; --surface:#FDF9ED; --surface-2:#EAE1C4; --ink:#1C1A28; --ink-soft:#454258;
  --ink-faint:#8C8878; --line:#DED6BC; --line-strong:#C6BC9A; --accent:#C8281C; --accent-deep:#1B3A8C; --accent-soft:#F1E7CE;
}
:root[data-skin="kandinsky-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; position:relative; padding-top:56px; }
:root[data-skin="kandinsky-1"] .gallery-grid::before{ content:""; position:absolute; top:6px; left:8px; width:38px; height:38px; border-radius:50%; background:#1B3A8C; }
:root[data-skin="kandinsky-1"] .g-media{ background:#FDF9ED; padding:16px; box-shadow:inset 0 0 0 1px var(--line-strong); }
:root[data-skin="kandinsky-1"] .g-item:nth-child(3n+1) .g-title{ color:#C8281C; }
:root[data-skin="kandinsky-1"] .g-item:nth-child(3n+2) .g-title{ color:#E0A500; }
:root[data-skin="kandinsky-1"] .g-item:nth-child(3n) .g-title{ color:#1B3A8C; }
:root[data-skin="kandinsky-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 0 0; color:var(--ink); }
:root[data-skin="kandinsky-1"] .g-title{ font-family:var(--sans); font-weight:600; letter-spacing:.02em; }
:root[data-skin="kandinsky-1"] .g-meta{ font-family:var(--mono); color:var(--ink-faint); }

/* Mark Rothko — not color but "basic human emotions": the canvas envelops you. Deep
   maroon-on-plum field, soft feathered color bands, near-invisible serif you lean into. */
:root[data-skin="rothko"]{
  --bg:#2A1418; --surface:#3A1C22; --surface-2:#4B232A; --ink:#EBD9C4; --ink-soft:#C9A98E;
  --ink-faint:#9A7663; --line:#4B232A; --line-strong:#5E2E36; --accent:#C4451A; --accent-deep:#E8A020; --accent-soft:#3A1C22;
}
:root[data-skin="rothko"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:1fr; gap:8vh; max-width:820px; margin-inline:auto; }
:root[data-skin="rothko"] .g-media{ background:#181417; padding:9vh 5vw 7vh; box-shadow:inset 0 0 90px 24px #4B232A; }
:root[data-skin="rothko"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:20px 0 0; text-align:center; color:var(--ink-soft); }
:root[data-skin="rothko"] .g-title{ font-family:var(--serif); font-weight:400; font-variant:small-caps; letter-spacing:.08em; font-size:1rem; color:var(--ink-soft); }
:root[data-skin="rothko"] .g-meta{ font-family:var(--serif); font-style:italic; color:var(--ink-faint); }

/* Mark Rothko · 2 — "the chapel becomes the entire encounter": the gallery treatment
   above (A-J) only touches the grid, so this pilot carries the same maroon chapel
   across every surface the whole site has. This block is the shared palette + gallery
   half (additive alongside the original Rothko skin, its own independent data-skin
   value); the whole-site nav/hero/footer/controls/forms/commerce/facets/toast/
   about/projects/switcher/sound rules live under body[data-struct="rothko-2"] and
   :root[data-skin="rothko-2"] further down in the STRUCTURAL SKINS section, next to
   the original Rothko structural block. See the "Rothko · 2" A-Y table in
   docs/design/src/philosophy-in-the-interface.md for the full reverse mapping. */
:root[data-skin="rothko-2"]{
  --bg:#2A1418; --surface:#32171D; --surface-2:#421E25; --ink:#E8D8C8; --ink-soft:#B89C91;
  --ink-faint:#80666A; --line:rgba(232,216,200,.10); --line-strong:rgba(232,216,200,.22);
  --accent:#C56E42; --accent-deep:#E5A36F; --accent-soft:#4B232A;
}
:root[data-skin="rothko-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:minmax(0,820px); justify-content:center; gap:clamp(72px,12vh,150px); }
:root[data-skin="rothko-2"] .g-media{ background:#181417; padding:clamp(30px,8vh,86px) clamp(24px,5vw,72px); box-shadow:inset 0 0 100px 28px #4B232A; overflow:visible; }
:root[data-skin="rothko-2"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:20px 0 0; text-align:center; color:var(--ink-soft); }
:root[data-skin="rothko-2"] .g-title{ font-family:var(--serif); font-weight:400; font-variant:small-caps; letter-spacing:.08em; font-size:1rem; color:var(--ink-soft); }
:root[data-skin="rothko-2"] .g-meta{ font-family:var(--serif); font-style:italic; color:var(--ink-faint); }

/* Josef Albers — "color is the most relative medium": humility before the deceiving eye.
   Bottom-weighted nested squares (top margin = 2× the sides), interacting warm sequence. */
:root[data-skin="albers-1"]{
  --bg:#F5EDD0; --surface:#FAF3DC; --surface-2:#E7D9AE; --ink:#1A0A00; --ink-soft:#5C1A1A;
  --ink-faint:#8A6A3A; --line:#DECDA0; --line-strong:#C0A868; --accent:#A03818; --accent-deep:#5C1A1A; --accent-soft:#EFE1BC;
}
:root[data-skin="albers-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(2,1fr); gap:40px; max-width:1000px; margin-inline:auto; }
:root[data-skin="albers-1"] .g-media{ background:#D4A820; padding:40px 32px 32px; box-shadow:inset 0 0 0 26px #C47318, inset 0 0 0 52px #A03818; }
:root[data-skin="albers-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:14px 0 0; text-align:center; color:var(--ink); }
:root[data-skin="albers-1"] .g-title{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.15em; font-weight:400; font-size:.82rem; color:var(--ink); }
:root[data-skin="albers-1"] .g-meta{ font-family:var(--mono); color:var(--ink-soft); }

/* Agnes Martin — the grid as "innocence", not minimalism: an egoless serenity received,
   not made. Barely-there warm washes, hairline rules, ultra-thin tracked type. */
:root[data-skin="agnes-martin-1"]{
  --bg:#F5F1E8; --surface:#FAF7EF; --surface-2:#EDE5C8; --ink:#4A4440; --ink-soft:#6E685E;
  --ink-faint:#A49C8C; --line:#D8D0BE; --line-strong:#B8B0A0; --accent:#B8B0A0; --accent-deep:#8AA0B0; --accent-soft:#EDE5C8;
}
:root[data-skin="agnes-martin-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-strong); }
:root[data-skin="agnes-martin-1"] .g-item{ padding:34px; border-bottom:1px solid var(--line-strong); }
:root[data-skin="agnes-martin-1"] .g-item:nth-child(3n+1){ background:#EDE5C8; }
:root[data-skin="agnes-martin-1"] .g-item:nth-child(3n+2){ background:#D8E4EC; }
:root[data-skin="agnes-martin-1"] .g-item:nth-child(3n){ background:#EFE0D8; }
:root[data-skin="agnes-martin-1"] .g-media{ background:transparent; }
:root[data-skin="agnes-martin-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:14px 0 0; color:var(--ink); }
:root[data-skin="agnes-martin-1"] .g-title{ font-family:var(--sans); font-weight:200; letter-spacing:.2em; text-transform:lowercase; font-size:.9rem; color:var(--ink); }
:root[data-skin="agnes-martin-1"] .g-meta{ font-family:var(--mono); font-weight:300; color:var(--ink-faint); }

/* Yves Klein — IKB (#002FA7): blue is the infinite, the immaterial made visible. The
   ground IS the art — a full monochrome void; each photo floats as a window in the blue. */
:root[data-skin="klein"]{
  --bg:#002FA7; --surface:#0A38B0; --surface-2:#0030A0; --ink:#FFFFFF; --ink-soft:#D6DEF4;
  --ink-faint:#A6B4E0; --line:#1B44B4; --line-strong:#2E56C0; --accent:#F07C9E; --accent-deep:#C9A84C; --accent-soft:#0A38B0;
}
:root[data-skin="klein"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(2,1fr); gap:10vh 8vw; max-width:1040px; margin-inline:auto; padding:4vh 0; }
:root[data-skin="klein"] .g-media{ background:#002FA7; padding:8vh 3vw; }
:root[data-skin="klein"] .g-item{ border-top:1px solid var(--accent); padding-top:18px; }
:root[data-skin="klein"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:16px 0 0; text-align:center; color:#FFFFFF; }
:root[data-skin="klein"] .g-title{ font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.3em; font-size:.82rem; color:#FFFFFF; }
:root[data-skin="klein"] .g-meta{ font-family:var(--mono); color:var(--ink-soft); }

/* Ellsworth Kelly — remove the artist's ego: the shape itself is the whole subject.
   Full spectrum, hard-edge flat panels, no gaps, the panel color IS the photo's mat. */
:root[data-skin="kelly"]{
  --bg:#F8F8F8; --surface:#FFFFFF; --surface-2:#EFEFEF; --ink:#111111; --ink-soft:#444444;
  --ink-faint:#8C8C8C; --line:#E4E4E4; --line-strong:#CFCFCF; --accent:#EC1C24; --accent-deep:#0072BC; --accent-soft:#F0F0F0;
}
:root[data-skin="kelly"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
:root[data-skin="kelly"] .g-item{ padding:26px; }
:root[data-skin="kelly"] .g-item:nth-child(6n+1){ background:#FFB300; }
:root[data-skin="kelly"] .g-item:nth-child(6n+2){ background:#FF3B30; }
:root[data-skin="kelly"] .g-item:nth-child(6n+3){ background:#B53389; }
:root[data-skin="kelly"] .g-item:nth-child(6n+4){ background:#4354B6; }
:root[data-skin="kelly"] .g-item:nth-child(6n+5){ background:#009CA6; }
:root[data-skin="kelly"] .g-item:nth-child(6n){ background:#39B54A; }
:root[data-skin="kelly"] .g-media{ background:transparent; }
:root[data-skin="kelly"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 0 0; color:#111111; }
:root[data-skin="kelly"] .g-title{ font-family:var(--sans); font-weight:400; letter-spacing:.03em; color:#111111; }
:root[data-skin="kelly"] .g-meta{ font-family:var(--sans); font-size:11px; color:#111111; }

/* Donald Judd — "Specific Objects": literal, whole, non-hierarchical — one thing after
   another. Single serial column, interval = block, galvanized/plexiglass, zero radius. */
:root[data-skin="judd"]{
  --bg:#E8E4DC; --surface:#EFEBE3; --surface-2:#D6D2CA; --ink:#1A1A1A; --ink-soft:#454545;
  --ink-faint:#8A8A88; --line:#C4C2BC; --line-strong:#A8AAA8; --accent:#3A8A5A; --accent-deep:#B87020; --accent-soft:#DCD8D0;
}
:root[data-skin="judd"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:1fr; gap:60vh; max-width:760px; margin-inline:auto; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
:root[data-skin="judd"] .g-media{ background:#C8CACC; padding:20px; border-radius:0; }
:root[data-skin="judd"] .g-item:nth-child(3n+1) .g-media{ box-shadow:inset 0 0 0 4px #3A8A5A; }
:root[data-skin="judd"] .g-item:nth-child(3n+2) .g-media{ box-shadow:inset 0 0 0 4px #B87020; }
:root[data-skin="judd"] .g-item:nth-child(3n) .g-media{ box-shadow:inset 0 0 0 4px #B82020; }
:root[data-skin="judd"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:10px 0 0; color:var(--ink); }
:root[data-skin="judd"] .g-title{ font-family:var(--sans); text-transform:uppercase; font-weight:400; letter-spacing:.04em; font-size:.86rem; color:var(--ink); }
:root[data-skin="judd"] .g-meta{ font-family:var(--mono); color:var(--ink-faint); }

/* Henri Matisse — the cut-outs: "drawing with scissors"; art as a life-affirming joy.
   Vivid Linel color sections in simultaneous-contrast pairs, photos pinned, no frame. */
:root[data-skin="matisse-1"]{
  --bg:#F8F8F5; --surface:#FFFFFF; --surface-2:#EDEDE8; --ink:#111111; --ink-soft:#3E3E3E;
  --ink-faint:#8A8A84; --line:#E2E2DA; --line-strong:#CACAC0; --accent:#CC2020; --accent-deep:#007BA7; --accent-soft:#F0F0EA;
}
:root[data-skin="matisse-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
:root[data-skin="matisse-1"] .g-item{ padding:22px; }
:root[data-skin="matisse-1"] .g-item:nth-child(6n+1){ background:#007BA7; }
:root[data-skin="matisse-1"] .g-item:nth-child(6n+2){ background:#CC2020; }
:root[data-skin="matisse-1"] .g-item:nth-child(6n+3){ background:#F5C400; }
:root[data-skin="matisse-1"] .g-item:nth-child(6n+4){ background:#1A2E8C; }
:root[data-skin="matisse-1"] .g-item:nth-child(6n+5){ background:#E83070; }
:root[data-skin="matisse-1"] .g-item:nth-child(6n){ background:#00A86B; }
:root[data-skin="matisse-1"] .g-media{ background:#F8F8F5; padding:12px; }
:root[data-skin="matisse-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 2px 0; color:#F8F8F5; }
:root[data-skin="matisse-1"] .g-title{ font-family:var(--sans); font-weight:700; color:#F8F8F5; }
:root[data-skin="matisse-1"] .g-meta{ font-family:var(--mono); color:rgba(255,255,255,.85); }

/* ============================================================
   DESIGN & PHOTOGRAPHY skins — 2026-07-22
   ============================================================ */

/* Charles & Ray Eames — design as hospitality: "the best, for the most, for the least".
   Warm cream + steel-black frame, one primary panel, Ray's Mondrian panel-bar chrome. */
:root[data-skin="eames"]{
  --bg:#F2EDE4; --surface:#FAF6EE; --surface-2:#E2DBCB; --ink:#1A1A1A; --ink-soft:#454540;
  --ink-faint:#88857C; --line:#D8D0BE; --line-strong:#BAB2A0; --accent:#C82B1A; --accent-deep:#1B558A; --accent-soft:#EDE6D6;
}
:root[data-skin="eames"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; padding-top:26px; }
:root[data-skin="eames"] .gallery-grid::before{ content:""; position:absolute; top:0; left:0; right:0; height:12px; background:linear-gradient(90deg,#1A1A1A 0 25%,#C82B1A 25% 42%,#F0C12C 42% 50%,#1B558A 50% 58%,#C8B89A 58% 100%); }
:root[data-skin="eames"] .g-media{ background:#FAF6EE; padding:14px; border:2px solid #1A1A1A; }
:root[data-skin="eames"] .g-item:nth-child(4n+1) .g-media{ border-color:#C82B1A; }
:root[data-skin="eames"] .g-item:nth-child(4n+3) .g-media{ border-color:#1B558A; }
:root[data-skin="eames"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:11px 0 0; color:var(--ink); }
:root[data-skin="eames"] .g-title{ font-family:var(--sans); font-weight:700; letter-spacing:.01em; color:var(--ink); }
:root[data-skin="eames"] .g-meta{ font-family:var(--mono); color:var(--ink-faint); }

/* Bruno Munari — "design as art": beauty belongs in ordinary life, anonymous and useful.
   Remove the superfluous — vast white, one accent only, a single pure geometric form. */
:root[data-skin="munari-1"]{
  --bg:#F7F5F0; --surface:#FCFAF5; --surface-2:#E8E6DE; --ink:#1A1A1A; --ink-soft:#454540;
  --ink-faint:#8C8C8A; --line:#E0DDD3; --line-strong:#CBC8BC; --accent:#E42313; --accent-deep:#1A1A1A; --accent-soft:#EEEBE2;
}
:root[data-skin="munari-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(2,1fr); gap:70px; max-width:940px; margin-inline:auto; position:relative; padding-top:52px; }
:root[data-skin="munari-1"] .gallery-grid::before{ content:""; position:absolute; top:0; left:0; width:34px; height:34px; border-radius:50%; background:#F5D800; }
:root[data-skin="munari-1"] .g-media{ background:#FCFAF5; padding:12px; box-shadow:inset 0 0 0 1px var(--line-strong); }
:root[data-skin="munari-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 0 0; color:var(--ink); }
:root[data-skin="munari-1"] .g-title{ font-family:var(--sans); font-weight:700; text-transform:lowercase; color:var(--ink); }
:root[data-skin="munari-1"] .g-meta{ font-family:var(--sans); font-weight:300; color:var(--ink-faint); }

/* Saul Bass — "design is thinking made visual": reduce a whole idea to one symbolic mark.
   Black ground, one hot orange-red, condensed caps, a hand-cut flat shape as chrome.
   (Supersedes the shallow LA `bass` removed 2026-07-21 — now built from the real method.) */
:root[data-skin="bass"]{
  --bg:#0D0D0D; --surface:#161412; --surface-2:#211E1A; --ink:#F5F0E8; --ink-soft:#C9C3B8;
  --ink-faint:#8A857A; --line:#2A2622; --line-strong:#3A352E; --accent:#E8291C; --accent-deep:#FFAE20; --accent-soft:#1A1512;
}
:root[data-skin="bass"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; padding-top:44px; }
:root[data-skin="bass"] .gallery-grid::before{ content:""; position:absolute; top:0; left:8px; width:44px; height:30px; background:#E8291C; clip-path:polygon(0 0,100% 22%,86% 100%,14% 78%); }
:root[data-skin="bass"] .g-media{ background:#F5F0E8; padding:14px; }
:root[data-skin="bass"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 0 0; color:var(--ink); }
:root[data-skin="bass"] .g-title{ font-family:var(--sans); text-transform:uppercase; font-weight:800; letter-spacing:-.01em; font-size:1.15rem; line-height:1; color:var(--ink); }
:root[data-skin="bass"] .g-meta{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; color:var(--accent); }

/* Isamu Noguchi — sculpture defines space, not mass; even light (Akari) is sculpture.
   Warm void ground, an amber glow emerging around each photo, a single glowing ovoid. */
:root[data-skin="noguchi"]{
  --bg:#1E1C19; --surface:#26231F; --surface-2:#2E2A25; --ink:#F2ECE0; --ink-soft:#C4BCAC;
  --ink-faint:#8A8272; --line:#332F29; --line-strong:#463F36; --accent:#E8C880; --accent-deep:#C4A96B; --accent-soft:#26231F;
}
:root[data-skin="noguchi"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:56px; position:relative; padding-top:60px; }
:root[data-skin="noguchi"] .gallery-grid::before{ content:""; position:absolute; top:6px; left:8px; width:46px; height:58px; border-radius:50%; background:radial-gradient(ellipse at center,#E8C880 0%,#C4A96B 40%,#1E1C19 82%); }
:root[data-skin="noguchi"] .g-media{ background:#26231F; padding:26px; box-shadow:0 0 46px 6px rgba(232,200,128,.16); }
:root[data-skin="noguchi"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:16px 0 0; text-align:center; color:var(--ink-soft); }
:root[data-skin="noguchi"] .g-title{ font-family:var(--sans); font-weight:300; letter-spacing:.1em; color:var(--ink); }
:root[data-skin="noguchi"] .g-meta{ font-family:var(--mono); color:var(--ink-faint); }

/* Ansel Adams — the Zone System & previsualization: imagine the final print, then command
   every tone. No color — the full 11-zone greyscale ramp as palette + a footer strip. */
:root[data-skin="ansel-adams-1"]{
  --bg:#E8E8E8; --surface:#F2F2F2; --surface-2:#D0D0D0; --ink:#141414; --ink-soft:#393939;
  --ink-faint:#737373; --line:#C4C4C4; --line-strong:#919191; --accent:#141414; --accent-deep:#525252; --accent-soft:#D8D8D8;
}
:root[data-skin="ansel-adams-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; position:relative; padding-bottom:34px; }
:root[data-skin="ansel-adams-1"] .gallery-grid::after{ content:""; position:absolute; bottom:0; left:0; width:264px; height:16px; background:linear-gradient(90deg,#000 0 9.09%,#141414 9.09% 18.18%,#272727 18.18% 27.27%,#393939 27.27% 36.36%,#525252 36.36% 45.45%,#737373 45.45% 54.54%,#919191 54.54% 63.63%,#B4B4B4 63.63% 72.72%,#D0D0D0 72.72% 81.81%,#E8E8E8 81.81% 90.9%,#FFF 90.9% 100%); border:1px solid #919191; }
:root[data-skin="ansel-adams-1"] .g-media{ background:#F2F2F2; padding:16px; border:1px solid var(--line-strong); filter:grayscale(1); }
:root[data-skin="ansel-adams-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 0 0; color:var(--ink); }
:root[data-skin="ansel-adams-1"] .g-title{ font-family:var(--serif); font-weight:400; letter-spacing:.02em; color:var(--ink); }
:root[data-skin="ansel-adams-1"] .g-meta{ font-family:var(--mono); color:var(--ink-faint); }

/* Henri Cartier-Bresson — the "decisive moment": head, eye and heart on one axis; the
   frame is composed in-camera and never cropped — proven by the Leica black film rebate. */
:root[data-skin="cartier-bresson-1"]{
  --bg:#F5F1EA; --surface:#FAF7F0; --surface-2:#E7E1D4; --ink:#141210; --ink-soft:#45403A;
  --ink-faint:#8A8478; --line:#DAD3C4; --line-strong:#B8B0A0; --accent:#2A2720; --accent-deep:#928880; --accent-soft:#EDE7DA;
}
:root[data-skin="cartier-bresson-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
:root[data-skin="cartier-bresson-1"] .g-media{ background:#F5F1EA; padding:20px; box-shadow:inset 0 0 0 3px #2A2720; }
:root[data-skin="cartier-bresson-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:12px 2px 0; color:var(--ink); }
:root[data-skin="cartier-bresson-1"] .g-title{ font-family:var(--serif); font-weight:400; letter-spacing:.01em; color:var(--ink); }
:root[data-skin="cartier-bresson-1"] .g-meta{ font-family:var(--serif); font-style:italic; color:var(--ink-faint); }

/* Irving Penn — elegance through exclusion: strip context until only subject, light and
   truth remain. Platinum-grey seamless, vast negative space, an acute corner-trap mark. */
:root[data-skin="penn-1"]{
  --bg:#F2EDE8; --surface:#F8F4EF; --surface-2:#E4DDD4; --ink:#2A2320; --ink-soft:#5A5048;
  --ink-faint:#9A9088; --line:#DDD5CA; --line-strong:#C0B6AA; --accent:#2A2320; --accent-deep:#9A9088; --accent-soft:#EAE3DA;
}
:root[data-skin="penn-1"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(2,1fr); gap:90px 70px; max-width:1000px; margin-inline:auto; padding:40px 0; }
:root[data-skin="penn-1"] .gallery-grid .g-item{ overflow:visible; position:relative; }
:root[data-skin="penn-1"] .g-item::before{ content:""; position:absolute; top:0; left:0; width:34px; height:34px; border-top:1.5px solid #2A2320; border-left:1.5px solid #2A2320; transform:skewX(-12deg); transform-origin:top left; }
:root[data-skin="penn-1"] .g-media{ background:#EDE8E2; padding:40px; }
:root[data-skin="penn-1"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; display:block; padding:16px 0 0; color:var(--ink); }
:root[data-skin="penn-1"] .g-title{ font-family:var(--serif); font-weight:400; letter-spacing:.06em; font-size:1.2rem; color:var(--ink); }
:root[data-skin="penn-1"] .g-meta{ font-family:var(--serif); font-style:italic; color:var(--ink-faint); }

/* ============================================================================
   STRUCTURAL SKINS — PART 2 (rated >=3). Each master's ROOT PHILOSOPHY reshapes
   the whole site (nav, hero, sections, buttons, footer, reading axis, chrome),
   not just the gallery. Scoped :root[data-skin] + body[data-struct] so normal
   skins are untouched. Scaffold layers come from js/skin-structure.js.
   ============================================================================ */

/* ---- DIN 1451 (rated 3) — "legibility as infrastructure"
   Root: standards culture removes ambiguity; the page is a specification sheet,
   the road plate, the machine-cut letter. So the WHOLE site squares off: every
   corner is right-angled, chrome becomes signage plates, type is uppercase and
   tabular, and a faint engineering grid rule underlies everything. ---------- */
body[data-struct="din"] .skin-structure-layer:nth-child(1){
  background-image:
    repeating-linear-gradient(0deg, rgba(17,17,17,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(17,17,17,.05) 0 1px, transparent 1px 40px);
}
:root[data-skin="din"] *{ border-radius:0 !important; }
:root[data-skin="din"] .site-header{ background:#111; border-bottom:4px solid var(--accent); }
:root[data-skin="din"] .brand,
:root[data-skin="din"] .nav-links a,
:root[data-skin="din"] .site-header .btn,
:root[data-skin="din"] .cart-btn,
:root[data-skin="din"] .nav-toggle{ color:#fff; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
:root[data-skin="din"] .brand span{ color:var(--accent); }
:root[data-skin="din"] .nav-links a::after{ background:var(--accent); height:3px; }
:root[data-skin="din"] .hero h1,
:root[data-skin="din"] .section-head h2{ text-transform:uppercase; letter-spacing:.04em; font-weight:700; font-family:var(--sans); }
:root[data-skin="din"] .eyebrow{ font-variant-numeric:tabular-nums; letter-spacing:.2em; }
:root[data-skin="din"] .btn,
:root[data-skin="din"] .skin-btn{ border:3px solid #111; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
:root[data-skin="din"] .btn-primary{ background:var(--accent); color:#111; border-color:#111; }
:root[data-skin="din"] input,
:root[data-skin="din"] select,
:root[data-skin="din"] textarea{ border:2px solid #111; }
:root[data-skin="din"] .section--alt{ border-block:4px solid #111; background:#fff; }
:root[data-skin="din"] .section--showcase{ background:#111; }
:root[data-skin="din"] .card-media,
:root[data-skin="din"] .hero-art,
:root[data-skin="din"] .about-portrait{ border:4px solid #111; }
:root[data-skin="din"] .site-footer{ background:#111; color:#fff; border-top:4px solid var(--accent); }
:root[data-skin="din"] .site-footer a,
:root[data-skin="din"] .site-footer h4{ color:#fff; text-transform:uppercase; letter-spacing:.06em; }

/* ---- Rothko (rated 3) — "not colour, but basic human emotions"
   Root: the large canvas ENVELOPS the viewer; luminous fields with dissolving
   edges; silence; one canvas at a time. So chrome recedes until summoned, huge
   soft-edged colour fields float behind the page, borders dissolve into halos,
   and everything centres into a slow frontal encounter. --------------------- */
body[data-struct="rothko"] #skin-structure{ background:#2A1418; }
body[data-struct="rothko"] .skin-structure-layer{ filter:blur(40px); mix-blend-mode:screen; }
body[data-struct="rothko"] .skin-structure-layer:nth-child(1){
  top:6vh; left:12vw; right:12vw; bottom:52vh; background:rgba(196,69,26,.30); border-radius:40px;
}
body[data-struct="rothko"] .skin-structure-layer:nth-child(2){
  top:46vh; left:16vw; right:16vw; bottom:14vh; background:rgba(232,160,32,.20); border-radius:40px;
}
body[data-struct="rothko"] .skin-structure-layer:nth-child(3){
  top:80vh; left:20vw; right:20vw; height:40vh; background:rgba(120,30,40,.35); border-radius:40px;
}
:root[data-skin="rothko"] .site-header{ background:transparent; border-bottom:none; position:absolute; width:100%; opacity:.35; transition:opacity 1s ease; }
:root[data-skin="rothko"] .site-header:hover,
:root[data-skin="rothko"] .site-header:focus-within{ opacity:1; }
:root[data-skin="rothko"] .nav-links a,
:root[data-skin="rothko"] .brand{ color:var(--accent-deep); }
:root[data-skin="rothko"] .hero{ padding-top:clamp(120px,20vh,240px); text-align:center; }
:root[data-skin="rothko"] .hero-grid,
:root[data-skin="rothko"] .footer-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
:root[data-skin="rothko"] .hero h1{ font-family:var(--serif); font-variant:small-caps; letter-spacing:.08em; font-weight:400; color:var(--ink-soft); }
:root[data-skin="rothko"] .section{ padding-block:clamp(80px,14vh,180px); }
:root[data-skin="rothko"] .section--alt,
:root[data-skin="rothko"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="rothko"] .btn{ border:none; border-radius:2px; box-shadow:0 0 60px 8px rgba(196,69,26,.35); background:var(--surface-2); color:var(--ink); }
:root[data-skin="rothko"] .card-media,
:root[data-skin="rothko"] .hero-art,
:root[data-skin="rothko"] .about-portrait{ background:#181417; padding:5vh 4vw; box-shadow:inset 0 0 90px 24px #4B232A; border:none; border-radius:2px; }
:root[data-skin="rothko"] .site-footer{ background:transparent; border-top:none; margin-top:clamp(80px,16vh,200px); }

/* ---- Rothko · 2 — "the chapel becomes the entire encounter"
   Root: the gallery-only Rothko treatment above evaporates the instant a visitor
   looks at the header, footer, lightbox, a button, a form, or the switcher — the
   interface reappears as an object standing between the viewer and the work. So
   EVERY surface here sits on the same maroon ground with soft outward glows
   replacing hard borders/panels: nav becomes an altar inscription, the hero and
   about/footer collapse to one centred track, controls stay dormant text until
   touched, and the lightbox is one frontal haloed work in chapel gloom. Full A-Y
   mapping: docs/design/src/philosophy-in-the-interface.md § "Rothko · 2". -------- */
body[data-struct="rothko-2"] #skin-structure{ background:#2A1418; }
body[data-struct="rothko-2"] .skin-structure-layer{ filter:blur(46px); mix-blend-mode:screen; }
body[data-struct="rothko-2"] .skin-structure-layer:nth-child(1){
  inset:5vh 11vw 58vh; background:rgba(126,37,32,.30); border-radius:14%;
}
body[data-struct="rothko-2"] .skin-structure-layer:nth-child(2){
  inset:43vh 15vw 20vh; background:rgba(180,73,31,.18); border-radius:13%;
}
body[data-struct="rothko-2"] .skin-structure-layer:nth-child(3){
  top:82vh; left:20vw; right:20vw; height:44vh; background:rgba(94,24,40,.32); border-radius:16%;
}
/* K — nav: a header rendered as a bar is "the interface as an object"; remove the
   plane entirely and let it brighten to legible only on hover/focus-within. */
:root[data-skin="rothko-2"] .site-header{ position:absolute; inset:0 0 auto; width:100%; background:linear-gradient(#2A1418,transparent); backdrop-filter:none; -webkit-backdrop-filter:none; border:0; opacity:.42; transition:opacity 1.4s ease; }
:root[data-skin="rothko-2"] .site-header:hover,
:root[data-skin="rothko-2"] .site-header:focus-within{ opacity:1; }
/* The shared body[data-struct] > *:not(#skin-structure) rule (line ~2751)
   carries ID-level specificity via :not(#skin-structure), so it silently beats
   the class-based rule above and would pin the chapel nav back to
   position:relative/z-index:1 in the normal document flow. Matching its own
   specificity mechanism (plus the .site-header class) restores the floating,
   centred, transparent desktop placement the approved design requires. */
body[data-struct="rothko-2"] > .site-header:not(#skin-structure){ position:absolute; z-index:50; }
:root[data-skin="rothko-2"] .nav{ justify-content:center; }
:root[data-skin="rothko-2"] .nav-links{ font-family:var(--serif); font-variant:small-caps; letter-spacing:.12em; }
:root[data-skin="rothko-2"] .page-head{ padding-top:clamp(96px,15vh,180px); }
/* O — hero: the opening breath is itself the tall centred colour field. */
:root[data-skin="rothko-2"] .hero{ min-height:88vh; padding-top:clamp(150px,24vh,280px); text-align:center; }
/* C — layout: gallery (above), hero, footer and about all collapse to one centred track. */
:root[data-skin="rothko-2"] .hero-grid,
:root[data-skin="rothko-2"] .footer-grid,
:root[data-skin="rothko-2"] .about-grid{ grid-template-columns:minmax(0,760px); justify-content:center; justify-items:center; text-align:center; }
/* U — about: the portrait keeps the chapel's own field + halo, borderless, in the
   same narrow centred column as the biography (no more sticky side-by-side rail). */
:root[data-skin="rothko-2"] .about-portrait{ position:static; background:#181417; border:none; box-shadow:inset 0 0 100px 28px #4B232A; }
/* P — section heads: recede and centre rather than partition the page. */
:root[data-skin="rothko-2"] .section-head{ justify-content:center; text-align:center; }
:root[data-skin="rothko-2"] .eyebrow{ font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:.06em; }
/* M — footer: a last dim breath, not a sign-off bar. */
:root[data-skin="rothko-2"] .site-footer{ background:transparent; border:0; margin-top:clamp(100px,18vh,220px); text-align:center; }
/* N — controls: dormant text until :hover/:focus-visible raises the glow. */
:root[data-skin="rothko-2"] .btn,
:root[data-skin="rothko-2"] .link-arrow{ border:0; background:transparent; color:var(--ink-soft); box-shadow:0 0 42px rgba(197,110,66,.14); border-radius:0; }
:root[data-skin="rothko-2"] .btn:hover,
:root[data-skin="rothko-2"] .btn:focus-visible,
:root[data-skin="rothko-2"] .link-arrow:hover,
:root[data-skin="rothko-2"] .link-arrow:focus-visible{ color:var(--ink); box-shadow:0 0 64px rgba(197,110,66,.36); }
/* W — switcher: dim and borderless until focus asks it to speak. */
:root[data-skin="rothko-2"] .skin-switch{ background:rgba(42,20,24,.72); border-color:transparent; color:var(--ink-faint); opacity:.55; }
:root[data-skin="rothko-2"] .skin-switch:hover,
:root[data-skin="rothko-2"] .skin-switch:focus-within{ opacity:1; }
/* X — sound: a faint text control resting in the lower field, not a media bar. */
:root[data-skin="rothko-2"] .audio-player{ background:rgba(42,20,24,.72); border-color:transparent; color:var(--ink-faint); opacity:.55; }
/* The shared body[data-struct] > *:not(#skin-structure) rule (line ~2751) also
   demotes the theme switcher and the ambient-music mini-player — both
   appended straight to <body> by theme.js/audio.js — to position:relative/
   z-index:1, pulling these always-reachable controls into normal document
   flow instead of floating fixed above the page. Matching specificity (plus
   the class) restores their fixed placement without disturbing W/X above.
   .layout-switch (js/projects.js, the Projects-view layout pill) is appended
   to <body> the same way with the same base position:fixed;z-index:200, and
   is live/reachable on gallery.html whenever the Projects tab is selected —
   the same bug, so it needs the same guard. */
body[data-struct="rothko-2"] > .skin-switch:not(#skin-structure){ position:fixed; z-index:200; }
body[data-struct="rothko-2"] > .audio-player:not(#skin-structure){ position:fixed; z-index:60; }
body[data-struct="rothko-2"] > .layout-switch:not(#skin-structure){ position:fixed; z-index:200; }
:root[data-skin="rothko-2"] .hero-art,
:root[data-skin="rothko-2"] .project-cover{ aspect-ratio:auto; overflow:visible; }
/* Photo constraints — every photo-bearing surface (home/gallery/project/about)
   stays whole: uncropped and never taller than 80vh, matching the gallery's E/L. */
:root[data-skin="rothko-2"] .g-media img,
:root[data-skin="rothko-2"] .g-media svg,
:root[data-skin="rothko-2"] .hero-art img,
:root[data-skin="rothko-2"] .hero-art svg,
:root[data-skin="rothko-2"] .about-portrait img,
:root[data-skin="rothko-2"] .about-portrait svg,
:root[data-skin="rothko-2"] .card-media img,
:root[data-skin="rothko-2"] .card-media svg,
:root[data-skin="rothko-2"] .project-cover img,
:root[data-skin="rothko-2"] .project-cover svg,
:root[data-skin="rothko-2"] .pphoto-media img,
:root[data-skin="rothko-2"] .pphoto-media svg,
:root[data-skin="rothko-2"] .plate-media img,
:root[data-skin="rothko-2"] .plate-media svg{ object-fit:contain; max-height:80vh; width:auto; height:auto; max-width:100%; margin-inline:auto; }
/* L — beholding: one frontal, uncropped, haloed work in chapel gloom. */
:root[data-skin="rothko-2"] .lightbox{ background:rgba(42,20,24,.98); gap:clamp(14px,3vw,42px); transition:opacity 1.2s ease; }
:root[data-skin="rothko-2"] .lb-stage{ flex-direction:column; justify-content:flex-start; max-width:1040px; max-height:92vh; overflow-y:auto; transform:scale(.995); transition:transform 1.2s ease, filter 1.2s ease; }
:root[data-skin="rothko-2"] .lb-art{ flex:none; width:100%; background:#181417; border-radius:0; overflow:visible; box-shadow:0 0 90px 24px rgba(105,41,48,.68); max-height:80vh; }
:root[data-skin="rothko-2"] .lb-art img,
:root[data-skin="rothko-2"] .lb-art svg{ object-fit:contain; max-height:80vh; }
:root[data-skin="rothko-2"] .lb-placard{ flex:none; width:100%; max-width:680px; text-align:center; color:var(--ink-soft); }
:root[data-skin="rothko-2"] .lb-title{ font-variant:small-caps; letter-spacing:.09em; font-weight:400; }
:root[data-skin="rothko-2"] .lb-place,
:root[data-skin="rothko-2"] .lb-meta{ font-family:var(--serif); font-style:italic; color:var(--ink-faint); }
:root[data-skin="rothko-2"] .lb-close,
:root[data-skin="rothko-2"] .lb-nav{ border:0; background:transparent; color:var(--ink-soft); }
/* The shared body[data-struct] > *:not(#skin-structure) rule (line ~2751) also
   demotes #lightbox — created by app.js as a direct child of <body> — to
   position:relative/z-index:1, dropping the "one frontal haloed work" out of
   its fixed-viewport overlay and into normal flow below the page (off-screen
   while body's scroll is locked). Matching specificity restores the fixed,
   correctly-stacked overlay defined by the base .lightbox rule. */
body[data-struct="rothko-2"] > #lightbox:not(#skin-structure){ position:fixed; z-index:130; }
/* Q — commerce: buying stays inside the same maroon ground, never a bright box. */
:root[data-skin="rothko-2"] .modal,
:root[data-skin="rothko-2"] .drawer{ background:#32171D; border:0; box-shadow:0 0 90px rgba(0,0,0,.55); color:var(--ink); }
/* The body[data-struct] > * structural rule above (line ~2751) demotes every
   direct child of body — including the cart drawer/backdrop — to
   position:relative/z-index:1, which pulls the off-canvas closed drawer into
   normal flow, causes horizontal overflow, and lets later body siblings like
   the footer paint above the open cart. Matching that rule's own :not(#id)
   specificity restores the base cart stacking exactly. */
body[data-struct="rothko-2"] > #cart-drawer:not(#skin-structure){ position:fixed; z-index:210; }
body[data-struct="rothko-2"] > #drawer-backdrop:not(#skin-structure){ position:fixed; z-index:209; }
/* #modal-root is an always-present, empty direct-body child that app.js fills
   with a .modal-backdrop (position:fixed; z-index:100) once a product opens.
   The shared rule above doesn't just move #modal-root — it gives it an
   explicit position + z-index, which (unlike the element's normal static,
   non-positioned default) turns #modal-root into its OWN stacking context, so
   the fixed .modal-backdrop child is confined to stack at that z-index:1
   context instead of the page root and can end up painted under later body
   siblings. Restoring position:static/z-index:auto removes that stacking
   context so the fixed backdrop participates in the root stacking order. */
body[data-struct="rothko-2"] > #modal-root:not(#skin-structure){ position:static; z-index:auto; }
/* R — facets: unboxed text moving from dim to luminous, never box-to-box. */
:root[data-skin="rothko-2"] .facet-group{ justify-content:center; }
:root[data-skin="rothko-2"] .chip,
:root[data-skin="rothko-2"] .facet-clear{ border:0; border-radius:0; background:transparent; color:var(--ink-faint); }
:root[data-skin="rothko-2"] .chip:hover,
:root[data-skin="rothko-2"] .chip:focus-visible,
:root[data-skin="rothko-2"] .facet-clear:hover,
:root[data-skin="rothko-2"] .facet-clear:focus-visible{ color:var(--ink-soft); }
:root[data-skin="rothko-2"] .chip[aria-pressed="true"]{ background:transparent; color:var(--accent-deep); }
/* S — forms: the site listening, not a container waiting to be filled; focus
   raises luminosity instead of adding a box outline. */
:root[data-skin="rothko-2"] input,
:root[data-skin="rothko-2"] textarea,
:root[data-skin="rothko-2"] select{ background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--line-strong); border-radius:0; }
:root[data-skin="rothko-2"] input:focus,
:root[data-skin="rothko-2"] input:focus-visible,
:root[data-skin="rothko-2"] textarea:focus,
:root[data-skin="rothko-2"] textarea:focus-visible,
:root[data-skin="rothko-2"] select:focus,
:root[data-skin="rothko-2"] select:focus-visible{ outline:0; border-bottom-color:var(--accent-deep); box-shadow:0 1px 0 var(--accent-deep); }
/* T — feedback: a low rectangular ember field, never a floating pill. */
:root[data-skin="rothko-2"] .toast{ background:#4B232A; color:var(--ink); border-radius:0; box-shadow:0 0 50px rgba(197,110,66,.28); }
/* The shared body[data-struct] > *:not(#skin-structure) rule (line ~2751) also
   demotes #toast — created by app.js as a direct child of <body> — to
   position:relative/z-index:1, so the ember notice would render in normal
   document flow (typically far below the fold) instead of floating fixed at
   the bottom of the viewport. Matching specificity restores the fixed toast. */
body[data-struct="rothko-2"] > #toast:not(#skin-structure){ position:fixed; z-index:120; }
/* V — projects: a body of work reads as one procession, never a shelf of tiles. */
:root[data-skin="rothko-2"] .project-grid,
:root[data-skin="rothko-2"] .project-photos{ grid-template-columns:minmax(0,820px); justify-content:center; gap:clamp(64px,10vh,130px); }
:root[data-skin="rothko-2"] .project-card{ border:0; background:transparent; box-shadow:none; }
:root[data-skin="rothko-2"] .project-card:hover{ transform:none; box-shadow:none; }
@media (max-width:820px){
  /* K mobile safeguard — keep brand/cart/menu-toggle usably spaced instead of
     clumped centre, and preserve normal keyboard/touch operation of the menu. */
  :root[data-skin="rothko-2"] .nav{ justify-content:space-between; }
  /* L mobile safeguard — the single beheld work never exceeds 56vh here. */
  :root[data-skin="rothko-2"] .lb-art,
  :root[data-skin="rothko-2"] .lb-art img,
  :root[data-skin="rothko-2"] .lb-art svg{ max-height:56vh; }
}
@media (max-width:760px){
  :root[data-skin="rothko-2"] .site-header{ position:sticky; inset:auto; top:0; background:linear-gradient(180deg, rgba(42,20,24,.96) 0%, rgba(50,23,29,.88) 72%, rgba(50,23,29,.72) 100%); opacity:1; }
  /* Same specificity fix as the desktop rule above, restated with
     position:sticky so the accessible hamburger header stays reachable. */
  body[data-struct="rothko-2"] > .site-header:not(#skin-structure){ position:sticky; top:0; z-index:50; }
  :root[data-skin="rothko-2"] .nav-links{ background:linear-gradient(180deg, rgba(42,20,24,.98) 0%, rgba(50,23,29,.96) 100%); }
}

/* ---- Chanoyu 茶の湯 — synthesis: wabi-sabi + ma + seijaku + shibui. A tea gathering
   has no separate decorative zone, so the same roji-to-tokonoma journey carries
   across every surface: the header recedes to a single mark, the lightbox becomes
   an alcove holding one uncropped work, and every control — button, chip, toast,
   switcher — stays as unshowy and utensil-like as the room itself asks. Full A-Y
   mapping: docs/design/src/philosophy-in-the-interface.md § "Chanoyu 茶の湯". ---- */
body[data-struct="chanoyu"] #skin-structure{ background:#C9C0AC; }
/* J — motif: no literal tea bowl/whisk/fan; structure alone stands for the doctrine. */
body[data-struct="chanoyu"] .skin-structure-layer:nth-child(1){
  inset:7vh 8vw 10vh 31vw; background:rgba(229,221,202,.32);
  clip-path:polygon(2% 0,100% 1%,98% 99%,0 96%);
}
body[data-struct="chanoyu"] .skin-structure-layer:nth-child(2){
  top:0; bottom:0; left:clamp(18px,8vw,120px); width:1px;
  background:rgba(74,63,47,.25);
}
/* K — nav: the roji recedes to a humble mark, revealing a sparse menu only on
   hover/keyboard focus — never a fixed bar. Gated to desktop (where hover exists);
   mobile keeps the site's normal reachable sticky header + hamburger drawer,
   untouched, per the max-width:760px safeguard below. */
:root[data-skin="chanoyu"] .site-header{
  position:absolute; inset:auto auto auto 0; top:clamp(18px,4vh,48px); left:clamp(18px,4vw,60px);
  /* shrink-to-fit (only `left` set, `width:auto`) can resolve to the full
     containing-block width instead of the header's own content width because
     its .nav child carries .wrap's width:100%; cap it so it can never reach
     past the viewport's right edge and force horizontal overflow. */
  width:auto; max-width:calc(100vw - clamp(18px,4vw,60px) * 2);
  background:transparent; border:0; backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* The shared body[data-struct] > *:not(#skin-structure) rule (line ~2751)
   carries ID-level specificity via :not(#skin-structure), so it silently beats
   the class-based rule above and would pin the roji mark back to
   position:relative/z-index:1 in normal flow. Matching its own specificity
   mechanism (plus the .site-header class) restores the upper-left absolute
   placement the approved design requires. */
body[data-struct="chanoyu"] > .site-header:not(#skin-structure){ position:absolute; z-index:50; }
:root[data-skin="chanoyu"] .nav{ width:auto; max-width:none; height:auto; margin:0; padding:0; gap:18px; }
@media (min-width:761px) and (hover:hover) and (pointer:fine){
  :root[data-skin="chanoyu"] .nav-links{
    opacity:0; transform:translateX(-8px); pointer-events:none;
    transition:opacity .8s ease, transform .8s ease;
  }
  :root[data-skin="chanoyu"] .site-header:hover .nav-links,
  :root[data-skin="chanoyu"] .site-header:focus-within .nav-links{
    opacity:1; transform:none; pointer-events:auto;
  }
}
/* P — non-hero page spacing: compensates the desktop absolute mark so About/
   Gallery/Shop/Policies/Project pages never sit beneath it (no overlap). */
:root[data-skin="chanoyu"] .page-head,
:root[data-skin="chanoyu"] main > .section:first-child{ padding-top:clamp(90px,15vh,170px); }
/* O — hero: crossing into the tea room takes longer than crossing into a shop — a
   tall, asymmetric threshold before the first work appears. */
:root[data-skin="chanoyu"] .hero{ min-height:86vh; padding-top:clamp(130px,20vh,240px); }
:root[data-skin="chanoyu"] .hero-grid{ grid-template-columns:minmax(0,42ch) minmax(280px,520px); gap:clamp(60px,10vw,150px); align-items:end; }
/* P — section heads: a hairline and a modest eyebrow, never a loud banner rule. */
:root[data-skin="chanoyu"] .section-head{ align-items:end; border-bottom:1px solid var(--line); padding-bottom:18px; }
/* M — footer: the gathering ends with a bow, not a sign-off banner. */
:root[data-skin="chanoyu"] .site-footer{ background:transparent; border:0; margin-top:clamp(90px,16vh,190px); }
/* N — controls: utensils are handled, not decorated — thin, rectangular, tactile,
   with a clear (if restrained) hover/focus response. */
:root[data-skin="chanoyu"] .btn,
:root[data-skin="chanoyu"] .link-arrow{ background:transparent; border:1px solid var(--line-strong); border-radius:1px; color:var(--ink); box-shadow:none; }
:root[data-skin="chanoyu"] .link-arrow{ display:inline-block; padding:8px 14px; text-decoration:none; }
:root[data-skin="chanoyu"] .btn:hover,
:root[data-skin="chanoyu"] .btn:focus-visible,
:root[data-skin="chanoyu"] .link-arrow:hover,
:root[data-skin="chanoyu"] .link-arrow:focus-visible{ border-color:var(--accent); color:var(--accent-deep); text-decoration:none; }
/* W/X — switcher/sound: a small labelled tray, never a floating capsule. */
:root[data-skin="chanoyu"] .skin-switch,
:root[data-skin="chanoyu"] .audio-player{ background:rgba(216,208,190,.88); border:1px solid var(--line); border-radius:1px; color:var(--ink-soft); }
/* The shared body[data-struct] > *:not(#skin-structure) rule (line ~2751) also
   demotes the theme switcher and the ambient-music mini-player — both
   appended straight to <body> by theme.js/audio.js — to position:relative/
   z-index:1, pulling these always-reachable controls into normal document
   flow instead of floating fixed above the page. Matching specificity (plus
   the class) restores their fixed placement without disturbing W/X above.
   .layout-switch (js/projects.js, the Projects-view layout pill) is appended
   to <body> the same way with the same base position:fixed;z-index:200, and
   is live/reachable on gallery.html whenever the Projects tab is selected —
   the same bug, so it needs the same guard. */
body[data-struct="chanoyu"] > .skin-switch:not(#skin-structure){ position:fixed; z-index:200; }
body[data-struct="chanoyu"] > .audio-player:not(#skin-structure){ position:fixed; z-index:60; }
body[data-struct="chanoyu"] > .layout-switch:not(#skin-structure){ position:fixed; z-index:200; }
/* Reset base crop wrappers so no art surface stays cropped. */
:root[data-skin="chanoyu"] .hero-art,
:root[data-skin="chanoyu"] .project-cover,
:root[data-skin="chanoyu"] .about-portrait{ aspect-ratio:auto; overflow:visible; }
/* E/L/U/V — photo constraints: every photo-bearing surface (gallery/hero/about/
   shop/project) stays whole — uncropped and never taller than 80vh. */
:root[data-skin="chanoyu"] .g-media img,
:root[data-skin="chanoyu"] .g-media svg,
:root[data-skin="chanoyu"] .hero-art img,
:root[data-skin="chanoyu"] .hero-art svg,
:root[data-skin="chanoyu"] .about-portrait img,
:root[data-skin="chanoyu"] .about-portrait svg,
:root[data-skin="chanoyu"] .card-media img,
:root[data-skin="chanoyu"] .card-media svg,
:root[data-skin="chanoyu"] .project-cover img,
:root[data-skin="chanoyu"] .project-cover svg,
:root[data-skin="chanoyu"] .pphoto-media img,
:root[data-skin="chanoyu"] .pphoto-media svg,
:root[data-skin="chanoyu"] .plate-media img,
:root[data-skin="chanoyu"] .plate-media svg{ object-fit:contain; max-height:80vh; width:auto; height:auto; max-width:100%; margin-inline:auto; }
/* L — beholding: the tokonoma alcove — one uncropped work, paper support, a quiet
   side inscription, an unhurried transition; flex children may shrink so the row
   never overflow-traps the stage. */
:root[data-skin="chanoyu"] .lightbox{ background:rgba(50,45,36,.96); padding:clamp(22px,6vw,86px); transition:opacity .8s ease; }
:root[data-skin="chanoyu"] .lb-stage{ max-width:1080px; max-height:92vh; overflow-y:auto; align-items:flex-end; align-items:safe flex-end; gap:clamp(28px,7vw,92px); }
:root[data-skin="chanoyu"] .lb-art{ flex:1 1 auto; min-width:0; background:#D8D0BE; padding:clamp(18px,4vw,48px); border:1px solid rgba(224,214,194,.2); border-radius:0; box-shadow:none; max-height:80vh; }
:root[data-skin="chanoyu"] .lb-art img,
:root[data-skin="chanoyu"] .lb-art svg{ width:auto; max-width:100%; object-fit:contain; max-height:72vh; margin-inline:auto; }
:root[data-skin="chanoyu"] .lb-placard{ flex:0 0 auto; width:auto; max-width:290px; color:#DED5C1; padding-bottom:4vh; }
:root[data-skin="chanoyu"] .lb-title{ font-weight:400; letter-spacing:.04em; }
:root[data-skin="chanoyu"] .lb-place,
:root[data-skin="chanoyu"] .lb-meta{ font-family:var(--serif); font-style:italic; color:#B7AC96; }
:root[data-skin="chanoyu"] .lb-close,
:root[data-skin="chanoyu"] .lb-nav{ background:transparent; border:1px solid rgba(222,213,193,.34); border-radius:1px; color:#DED5C1; }
/* The shared body[data-struct] > *:not(#skin-structure) rule (line ~2751) also
   demotes #lightbox — created by app.js as a direct child of <body> — to
   position:relative/z-index:1, dropping the tokonoma alcove out of its
   fixed-viewport overlay and into normal flow below the page (off-screen
   while body's scroll is locked). Matching specificity restores the fixed,
   correctly-stacked overlay defined by the base .lightbox rule. */
body[data-struct="chanoyu"] > #lightbox:not(#skin-structure){ position:fixed; z-index:130; }
/* Q — commerce: a valued object offered across tatami, not a checkout billboard. */
:root[data-skin="chanoyu"] .modal,
:root[data-skin="chanoyu"] .drawer{ background:#D8D0BE; border:1px solid var(--line-strong); border-radius:1px; box-shadow:0 24px 70px rgba(48,42,31,.22); color:var(--ink); }
/* The body[data-struct] > * structural rule (line ~2751) demotes every direct
   child of body — including the cart drawer/backdrop — to
   position:relative/z-index:1, pulling the off-canvas closed drawer into
   normal flow, causing horizontal overflow, and letting later body siblings
   paint above the open cart. Matching that rule's own :not(#id) specificity
   restores the base cart stacking exactly. */
body[data-struct="chanoyu"] > #cart-drawer:not(#skin-structure){ position:fixed; z-index:210; }
body[data-struct="chanoyu"] > #drawer-backdrop:not(#skin-structure){ position:fixed; z-index:209; }
/* #modal-root is an always-present, empty direct-body child that app.js fills
   with a .modal-backdrop (position:fixed; z-index:100) once a product opens.
   The shared rule above doesn't just move #modal-root — it gives it an
   explicit position + z-index, which (unlike the element's normal static,
   non-positioned default) turns #modal-root into its OWN stacking context, so
   the fixed .modal-backdrop child is confined to stack at that z-index:1
   context instead of the page root and can end up painted under later body
   siblings. Restoring position:static/z-index:auto removes that stacking
   context so the fixed backdrop participates in the root stacking order. */
body[data-struct="chanoyu"] > #modal-root:not(#skin-structure){ position:static; z-index:auto; }
/* R — facets: utensils set out for approval, not plastic pills; the lower rule
   appears only for the selected or focused chip. */
:root[data-skin="chanoyu"] .facet-group{ gap:12px; }
:root[data-skin="chanoyu"] .chip,
:root[data-skin="chanoyu"] .facet-clear{ background:transparent; border:0; border-bottom:1px solid transparent; border-radius:0; color:var(--ink-soft); }
:root[data-skin="chanoyu"] .chip[aria-pressed="true"],
:root[data-skin="chanoyu"] .chip:focus-visible{ border-bottom-color:var(--line-strong); color:var(--ink); }
:root[data-skin="chanoyu"] .facet-clear:hover,
:root[data-skin="chanoyu"] .facet-clear:focus-visible{ border-bottom-color:var(--line-strong); color:var(--ink); }
/* S — forms: the host listening, not a filled container; focus brightens the rule. */
:root[data-skin="chanoyu"] input,
:root[data-skin="chanoyu"] textarea,
:root[data-skin="chanoyu"] select{ background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--line-strong); border-radius:0; }
:root[data-skin="chanoyu"] input:focus,
:root[data-skin="chanoyu"] input:focus-visible,
:root[data-skin="chanoyu"] textarea:focus,
:root[data-skin="chanoyu"] textarea:focus-visible,
:root[data-skin="chanoyu"] select:focus,
:root[data-skin="chanoyu"] select:focus-visible{ outline:0; border-bottom-color:var(--accent-deep); box-shadow:0 1px 0 var(--accent-deep); }
/* T — feedback: a small square earthen nod, not a floating pill. */
:root[data-skin="chanoyu"] .toast{ background:#5A4B39; color:#E5DDCB; border-radius:1px; box-shadow:none; }
/* The shared body[data-struct] > *:not(#skin-structure) rule (line ~2751) also
   demotes #toast — created by app.js as a direct child of <body> — to
   position:relative/z-index:1, so the earthen notice would render in normal
   document flow (typically far below the fold) instead of floating fixed at
   the bottom of the viewport. Matching specificity restores the fixed toast. */
body[data-struct="chanoyu"] > #toast:not(#skin-structure){ position:fixed; z-index:120; }
/* U — about: the maker sits beside the material — an asymmetric tokonoma-like
   arrangement; the portrait stays uncropped (see the photo constraints above). */
:root[data-skin="chanoyu"] .about-grid{ grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr); gap:clamp(54px,10vw,140px); }
/* V — projects: a seasonal progression met one thing at a time, never a shelf. */
:root[data-skin="chanoyu"] .project-grid,
:root[data-skin="chanoyu"] .project-photos{ grid-template-columns:minmax(0,760px); justify-content:center; gap:clamp(60px,10vh,130px); }
:root[data-skin="chanoyu"] .project-card{ background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; }
:root[data-skin="chanoyu"] .project-card:hover{ transform:none; box-shadow:none; }
@media (max-width:820px){
  /* C mobile safeguard — the alternating offset is a desktop-only asymmetry. */
  :root[data-skin="chanoyu"] .gallery-grid .g-item:nth-child(even){ transform:none; }
  :root[data-skin="chanoyu"] .hero-grid,
  :root[data-skin="chanoyu"] .about-grid{ grid-template-columns:1fr; }
  /* L mobile safeguard — the stage recentres and the work never exceeds 56vh. */
  :root[data-skin="chanoyu"] .lb-stage{ align-items:center; align-items:safe center; }
  :root[data-skin="chanoyu"] .lb-art,
  :root[data-skin="chanoyu"] .lb-art img,
  :root[data-skin="chanoyu"] .lb-art svg{ max-height:56vh; }
  :root[data-skin="chanoyu"] .lb-placard{ max-width:640px; padding-bottom:0; }
}
@media (max-width:760px){
  /* K mobile safeguard — the header returns to the site's normal reachable sticky
     bar and the hamburger drawer works exactly as it does for every other skin. */
  :root[data-skin="chanoyu"] .site-header{ position:sticky; inset:auto; top:0; left:auto; width:100%; background:var(--surface); border-bottom:1px solid var(--line); }
  /* Same specificity fix as the desktop rule above, restated with
     position:sticky so the accessible hamburger header stays reachable. */
  body[data-struct="chanoyu"] > .site-header:not(#skin-structure){ position:sticky; top:0; z-index:50; }
  :root[data-skin="chanoyu"] .nav{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gap); height:68px; }
  :root[data-skin="chanoyu"] .page-head,
  :root[data-skin="chanoyu"] main > .section:first-child{ padding-top:clamp(48px,8vw,90px); }
}

/* ---- Tategaki (rated 3) — vertical Japanese reading as the organising form
   Root: reading direction and the asymmetry of the vertically-ruled page.
   IMPORTANT: the site is bilingual (English + Japanese). Vertical writing-mode
   suits Japanese but rotates Latin sideways, so it must NOT be forced on the
   menu or English headings. Instead the vertical axis is expressed structurally
   through the ruled columns of the page and a right-to-left (RTL) reading
   procession, while all chrome stays horizontally legible. ------------------ */
body[data-struct="tategaki"] .skin-structure-layer:nth-child(1){
  left:auto; right:9vw; width:1px; background:var(--line-strong); /* the right ruled column edge */
}
body[data-struct="tategaki"] .skin-structure-layer:nth-child(2){
  left:9vw; right:auto; width:1px; background:var(--line); /* the left ruled column edge */
}
/* menu stays a normal, readable horizontal bar — but pulled to the right so the
   eye enters from the right edge, the tategaki reading origin */
:root[data-skin="tategaki"] .site-header{ background:transparent; border-bottom:1px solid var(--line); }
:root[data-skin="tategaki"] .nav{ justify-content:flex-end; gap:36px; }
:root[data-skin="tategaki"] .nav .brand{ margin-right:auto; }
:root[data-skin="tategaki"] .nav-links{ gap:28px; }
/* the reading procession runs right-to-left: hero, section heads and footer are
   right-anchored, echoing where a vertical page begins */
:root[data-skin="tategaki"] .hero-grid{ direction:rtl; }
:root[data-skin="tategaki"] .hero-grid > *{ direction:ltr; }
:root[data-skin="tategaki"] .hero h1,
:root[data-skin="tategaki"] .hero .lead,
:root[data-skin="tategaki"] .hero .eyebrow{ text-align:right; }
:root[data-skin="tategaki"] .hero-cta{ justify-content:flex-end; }
:root[data-skin="tategaki"] .hero h1{ font-family:var(--serif); letter-spacing:.02em; }
:root[data-skin="tategaki"] .section-head{ flex-direction:row-reverse; text-align:right; }
/* a short vertical rule marks each section head as a written-column origin —
   a decorative line, never rotated text */
:root[data-skin="tategaki"] .section-head h2{ position:relative; padding-right:18px; }
:root[data-skin="tategaki"] .section-head h2::after{ content:""; position:absolute; top:2px; right:0; width:2px; height:1.1em; background:var(--accent); }
:root[data-skin="tategaki"] .card-media,
:root[data-skin="tategaki"] .hero-art,
:root[data-skin="tategaki"] .about-portrait{ box-shadow:0 26px 54px -30px rgba(0,0,0,.34); border:none; }

/* ---- Munari (rated 3) — "remove the superfluous"; play, lightness, humour
   Root: beauty in ordinary useful things, reached by ethical subtraction to the
   fewest purest elements, with one pure geometric sign. So the WHOLE site is
   stripped of borders/shadows/chrome, opened up with air, set in friendly
   lowercase sans, and marked by playful primary shapes. -------------------- */
body[data-struct="munari-1"] .skin-structure-layer:nth-child(1){
  top:14vh; right:8vw; left:auto; width:min(22vw,230px); height:min(22vw,230px);
  border-radius:50%; background:#F5D800;
}
body[data-struct="munari-1"] .skin-structure-layer:nth-child(2){
  bottom:12vh; left:7vw; top:auto; width:min(16vw,150px); height:min(16vw,150px);
  background:var(--accent);
}
:root[data-skin="munari-1"] .site-header{ background:transparent; border-bottom:none; }
:root[data-skin="munari-1"] .nav-links a,
:root[data-skin="munari-1"] .brand,
:root[data-skin="munari-1"] .hero h1,
:root[data-skin="munari-1"] .section-head h2{ font-family:var(--sans); text-transform:lowercase; font-weight:700; }
:root[data-skin="munari-1"] .nav-links a::after{ display:none; }
:root[data-skin="munari-1"] .section{ padding-block:clamp(70px,12vw,150px); }
:root[data-skin="munari-1"] .section--alt,
:root[data-skin="munari-1"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="munari-1"] .btn{ border:none; background:var(--accent); color:#fff; border-radius:0; font-family:var(--sans); text-transform:lowercase; font-weight:700; }
:root[data-skin="munari-1"] .btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
:root[data-skin="munari-1"] .card-media,
:root[data-skin="munari-1"] .hero-art,
:root[data-skin="munari-1"] .about-portrait{ background:transparent; border:none; box-shadow:none; padding:0; }
:root[data-skin="munari-1"] .site-footer{ background:transparent; border-top:none; }

/* ---- Ma 間 · version 1 (ORIGINAL) whole-site — the centred void.
   Chrome withdraws; everything narrows to one CENTRED column with vast
   intervals; two symmetric fields (top + bottom) hold the void open. ------ */
body[data-struct="ma-1"] .skin-structure-layer:nth-child(1){
  top:0; height:22vh; background:linear-gradient(#F2F0EA, transparent); /* upper interval band */
}
body[data-struct="ma-1"] .skin-structure-layer:nth-child(2){
  top:auto; bottom:0; height:22vh; background:linear-gradient(transparent, #F2F0EA); /* lower interval band */
}
:root[data-skin="ma-1"] .site-header{ background:transparent; border-bottom:none; }
:root[data-skin="ma-1"] .nav{ height:96px; justify-content:center; gap:48px; }
:root[data-skin="ma-1"] .nav-links{ gap:clamp(28px,4vw,64px); }
:root[data-skin="ma-1"] .nav-links a::after{ display:none; }
:root[data-skin="ma-1"] .hero{ padding-block:clamp(120px,20vw,300px) clamp(80px,12vw,180px); }
:root[data-skin="ma-1"] .hero-grid{ grid-template-columns:1fr; max-width:600px; margin:0 auto; }
:root[data-skin="ma-1"] .wrap{ max-width:760px; }
:root[data-skin="ma-1"] .section{ padding-block:clamp(120px,22vw,300px); }
:root[data-skin="ma-1"] .section--alt,
:root[data-skin="ma-1"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="ma-1"] .btn{ border:none; background:transparent; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); }
:root[data-skin="ma-1"] .card-media,
:root[data-skin="ma-1"] .hero-art,
:root[data-skin="ma-1"] .about-portrait{ background:transparent; border:none; box-shadow:none; padding:0; }
:root[data-skin="ma-1"] .site-footer{ background:transparent; border-top:none; margin-top:clamp(120px,20vw,260px); }

/* ---- Ma 間 · version 2 (rated 3) — the charged void as the subject, held in TENSION
   Purpose (not surface): the interval is the protagonist and it must feel
   HELD, not resolved — asymmetric, off-placed, suspended, incomplete on
   purpose, so the eye holds its breath. (Seijaku is the released, centred
   repose; Ma must look nothing like it.) So the WHOLE site is weighted to
   one side: chrome withdraws, content is held left of centre against a
   directional void, and a single hairline interval hangs off-centre without
   touching an edge. --------------------------------------------------------- */
body[data-struct="ma-2"] .skin-structure-layer:nth-child(1){
  inset:0; background:linear-gradient(104deg, #F2F0EA 0%, color-mix(in srgb, #F2F0EA 40%, transparent) 30%, transparent 52%); /* the void, weighted left, opening to the right */
}
body[data-struct="ma-2"] .skin-structure-layer:nth-child(2){
  inset:auto; left:62%; top:14vh; width:1px; height:54vh; background:linear-gradient(transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); /* the held interval: off-placed, stops short of both edges */
}
:root[data-skin="ma-2"] .site-header{ background:transparent; border-bottom:none; }
:root[data-skin="ma-2"] .nav{ height:96px; justify-content:flex-start; gap:clamp(40px,11vw,150px); }
:root[data-skin="ma-2"] .nav-links{ gap:clamp(28px,4vw,64px); }
:root[data-skin="ma-2"] .nav-links a::after{ display:none; }
:root[data-skin="ma-2"] .hero{ padding-block:clamp(120px,20vw,300px) clamp(80px,12vw,180px); }
:root[data-skin="ma-2"] .hero-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,9vw,140px); max-width:1080px; margin-left:max(24px,8vw); margin-right:auto; align-items:start; }
:root[data-skin="ma-2"] .wrap{ max-width:1080px; }
:root[data-skin="ma-2"] .section{ padding-block:clamp(120px,22vw,300px); }
:root[data-skin="ma-2"] .section--alt,
:root[data-skin="ma-2"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="ma-2"] .section-head{ text-align:left; max-width:40ch; margin-left:max(24px,8vw); margin-right:auto; }
:root[data-skin="ma-2"] .btn{ border:none; background:transparent; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); }
:root[data-skin="ma-2"] .card-media,
:root[data-skin="ma-2"] .hero-art,
:root[data-skin="ma-2"] .about-portrait{ background:transparent; border:none; box-shadow:none; padding:0; }
:root[data-skin="ma-2"] .site-footer{ background:transparent; border-top:none; margin-top:clamp(120px,20vw,260px); }

/* ---- Yugen 幽玄 (rated 3) — subtle profound grace; beauty hinted through shadow
   Root: profundity requires delay and concealment; images emerge from darkness;
   the unseen intensifies the seen. So the WHOLE site sinks into twilight: chrome
   dissolves and is summoned from shadow, depth-suggesting mist floats behind,
   and a global vignette veils every edge. ---------------------------------- */
body[data-struct="yugen"] #skin-structure{ background:#14131A; }
body[data-struct="yugen"] .skin-structure-layer:nth-child(1){
  background:radial-gradient(60% 50% at 50% 30%, rgba(154,147,192,.14), transparent 70%);
}
body[data-struct="yugen"] .skin-structure-layer:nth-child(2){
  background:radial-gradient(70% 60% at 70% 90%, rgba(64,61,82,.5), transparent 72%);
}
body[data-struct="yugen"] .skin-structure-layer:nth-child(3){
  box-shadow:inset 0 0 220px 90px rgba(10,9,14,.9); /* the signature vignette over the whole page */
}
:root[data-skin="yugen"] .site-header{ background:transparent; border-bottom:none; opacity:.4; transition:opacity 1s ease; }
:root[data-skin="yugen"] .site-header:hover,
:root[data-skin="yugen"] .site-header:focus-within{ opacity:1; }
:root[data-skin="yugen"] .hero h1{ font-family:var(--serif); font-weight:400; letter-spacing:.08em; color:var(--ink-soft); }
:root[data-skin="yugen"] .section--alt,
:root[data-skin="yugen"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="yugen"] .btn{ border:1px solid var(--line-strong); background:transparent; color:var(--ink-soft); transition:color .8s ease,border-color .8s ease; }
:root[data-skin="yugen"] .btn:hover{ color:var(--ink); border-color:var(--accent); }
:root[data-skin="yugen"] .card-media,
:root[data-skin="yugen"] .hero-art,
:root[data-skin="yugen"] .about-portrait{ border:none; box-shadow:0 40px 80px -40px #000; }
:root[data-skin="yugen"] .site-footer{ background:transparent; border-top:none; }

/* ---- Shiro 白 (rated 4) — white as Hara's empty receptive vessel
   Root: white is not absence but readiness the viewer completes; yohaku is the
   protagonist; the signature is omission. So the WHOLE site becomes pure white
   with nearly all chrome removed, one narrow centred column, vast intervals,
   and a single distant red pulse proving the vessel is inhabited. ---------- */
body[data-struct="shiro"] #skin-structure{ background:#fff; }
body[data-struct="shiro"] .skin-structure-layer:nth-child(1){
  top:12vh; left:50%; transform:translateX(-50%); width:min(60vw,720px); height:76vh;
  box-shadow:0 60px 120px -60px rgba(0,0,0,.10); /* the barely-sensed vessel edge */
}
body[data-struct="shiro"] .skin-structure-layer:nth-child(2){
  top:8vh; right:9vw; left:auto; width:8px; height:8px; border-radius:50%; background:var(--accent);
}
:root[data-skin="shiro"] .site-header{ background:transparent; border-bottom:none; }
:root[data-skin="shiro"] .nav{ height:104px; justify-content:center; gap:clamp(28px,4vw,64px); }
:root[data-skin="shiro"] .nav-links{ gap:clamp(28px,4vw,64px); }
:root[data-skin="shiro"] .nav-links a{ color:var(--ink-soft); }
:root[data-skin="shiro"] .nav-links a::after{ display:none; }
:root[data-skin="shiro"] .brand span{ color:var(--accent); }
:root[data-skin="shiro"] .hero{ padding-block:clamp(140px,22vw,320px) clamp(90px,14vw,200px); }
:root[data-skin="shiro"] .hero-grid{ grid-template-columns:1fr; max-width:560px; margin:0 auto; }
:root[data-skin="shiro"] .hero h1{ font-family:var(--serif); font-weight:400; letter-spacing:.04em; }
:root[data-skin="shiro"] .wrap{ max-width:720px; }
:root[data-skin="shiro"] .section{ padding-block:clamp(140px,24vw,320px); }
:root[data-skin="shiro"] .section--alt,
:root[data-skin="shiro"] .section--showcase{ background:#fff; border-block:none; }
:root[data-skin="shiro"] .btn{ border:none; background:transparent; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); }
:root[data-skin="shiro"] .card-media,
:root[data-skin="shiro"] .hero-art,
:root[data-skin="shiro"] .about-portrait{ background:transparent; border:none; box-shadow:none; padding:0; }
:root[data-skin="shiro"] .site-footer{ background:transparent; border-top:none; margin-top:clamp(140px,22vw,300px); }


/* ============ penn-2 (purpose-first redesign) ============ */
:root[data-skin="penn-2"]{
  --bg:#F0EAE3; --surface:#F8F4EF; --surface-2:#E4DDD3; --ink:#241D19; --ink-soft:#51473F;
  --ink-faint:#91877D; --line:#D8CEC2; --line-strong:#B8ADA0; --accent:#241D19;
  --accent-deep:#0E0B09; --accent-soft:#EEE6DC;
}
body[data-struct="penn-2"] #skin-structure{ background:var(--bg); }
body[data-struct="penn-2"] .skin-structure-layer:nth-child(1){
  inset:0; background:radial-gradient(70vw 90vh at 50% 28%, rgba(255,255,255,.88), rgba(240,234,227,.12) 58%, transparent 78%);
}
body[data-struct="penn-2"] .skin-structure-layer:nth-child(2){
  left:50%; top:10vh; width:1px; height:72vh; background:linear-gradient(transparent,var(--line-strong) 24%,var(--line-strong) 76%,transparent);
}
:root[data-skin="penn-2"] .site-header{ background:transparent; border-bottom:none; }
:root[data-skin="penn-2"] .nav{ height:92px; justify-content:center; gap:clamp(32px,6vw,90px); }
:root[data-skin="penn-2"] .brand{ font-family:var(--serif); font-size:clamp(22px,2.8vw,42px); letter-spacing:.04em; color:var(--ink); }
:root[data-skin="penn-2"] .hero-grid{ grid-template-columns:1fr; max-width:760px; margin-inline:auto; text-align:center; padding-block:clamp(90px,14vw,190px); }
:root[data-skin="penn-2"] .section-head{ max-width:720px; margin-inline:auto; text-align:center; }
:root[data-skin="penn-2"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="penn-2"] .section--showcase .section-head h2{ color:var(--ink); font-family:var(--serif); font-size:clamp(38px,6.4vw,96px); line-height:.94; letter-spacing:-.035em; }
:root[data-skin="penn-2"] .section--showcase .eyebrow{ color:var(--ink-faint); font-family:var(--mono); letter-spacing:.26em; }
:root[data-skin="penn-2"] .section--showcase .link-arrow{ color:var(--ink); border-bottom:1px solid var(--ink); }
:root[data-skin="penn-2"] .site-footer{ background:transparent; border-top:1px solid var(--line); color:var(--ink-faint); }
:root[data-skin="penn-2"] .btn{ background:transparent; color:var(--ink); border:1px solid var(--ink); border-radius:0; box-shadow:none; }
:root[data-skin="penn-2"] .gallery-grid,
:root[data-skin="penn-2"] .home-gallery{
  columns:unset; display:block; max-width:980px; margin-inline:auto; padding-top:clamp(36px,7vw,110px);
}
:root[data-skin="penn-2"] .gallery-grid .g-item,
:root[data-skin="penn-2"] .home-gallery .g-item{
  min-height:88vh; display:grid; place-items:center; margin:0 auto clamp(90px,14vw,200px); background:transparent; border-radius:0; overflow:visible; text-align:center;
}
:root[data-skin="penn-2"] .g-media{
  overflow:visible; background:radial-gradient(65% 78% at 50% 42%, #FFFDF9 0%, var(--surface) 54%, var(--surface-2) 100%);
  padding:clamp(24px,5vw,82px); text-align:center;
}
:root[data-skin="penn-2"] .g-media img,
:root[data-skin="penn-2"] .g-media svg{ border:0; box-shadow:0 28px 70px -44px rgba(36,29,25,.46); filter:saturate(.86) contrast(1.02); }
:root[data-skin="penn-2"] .g-item:hover .g-media img{ box-shadow:0 32px 76px -44px rgba(36,29,25,.5); filter:saturate(.86) contrast(1.02); }
:root[data-skin="penn-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; color:var(--ink); padding:clamp(18px,2vw,28px) 0 0; text-align:center; }
:root[data-skin="penn-2"] .g-title{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(22px,3.2vw,48px); line-height:1; letter-spacing:.015em; color:var(--ink); }
:root[data-skin="penn-2"] .g-meta{ display:block; margin-top:10px; font-family:var(--serif); font-style:italic; font-size:clamp(13px,1.2vw,17px); color:var(--ink-faint); }
@media (max-width:760px){
  :root[data-skin="penn-2"] .nav{ height:76px; }
  :root[data-skin="penn-2"] .gallery-grid .g-item,
  :root[data-skin="penn-2"] .home-gallery .g-item{ min-height:auto; margin-bottom:72px; }
  :root[data-skin="penn-2"] .g-media{ padding:20px; }
  body[data-struct="penn-2"] .skin-structure-layer:nth-child(2){ display:none; }
}


/* ============ barragan-2 (purpose-first redesign) ============ */
:root[data-skin="barragan-2"]{
  --bg:#F1E5D5; --surface:#FBF2E4; --surface-2:#E5D0B6; --ink:#2E1C13; --ink-soft:#654329;
  --ink-faint:#9A8068; --line:#D8C5AA; --line-strong:#B99B78; --accent:#A3214B; --accent-deep:#5B2B63; --accent-soft:#EACB8A;
}
body[data-struct="barragan-2"] #skin-structure{ background:#F1E5D5; }
body[data-struct="barragan-2"] .skin-structure-layer:nth-child(1){ top:0; bottom:0; left:0; width:28vw; background:#A3214B; opacity:.92; }
body[data-struct="barragan-2"] .skin-structure-layer:nth-child(2){ top:30vh; right:0; bottom:0; width:36vw; background:#8F5A16; opacity:.86; }
body[data-struct="barragan-2"] .skin-structure-layer:nth-child(3){ top:0; right:12vw; width:42vw; height:54vh; background:radial-gradient(ellipse at 50% 0%,rgba(255,222,156,.42),transparent 68%); }
body[data-struct="barragan-2"] .skin-structure-layer:nth-child(4){ left:18vw; right:20vw; top:18vh; bottom:18vh; background:linear-gradient(90deg,transparent,rgba(91,43,99,.12),transparent); }

:root[data-skin="barragan-2"] .site-header{ background:color-mix(in srgb,var(--bg) 78%,transparent); border-bottom:none; backdrop-filter:blur(14px); }
:root[data-skin="barragan-2"] .nav{ height:112px; justify-content:center; gap:clamp(36px,7vw,110px); }
:root[data-skin="barragan-2"] .brand{ font-family:var(--serif); font-weight:400; color:var(--ink); }
:root[data-skin="barragan-2"] .btn{ border-radius:0; background:var(--accent); border:none; color:#FFF7EA; padding:16px 34px; box-shadow:0 22px 60px -34px rgba(46,28,19,.5); }
:root[data-skin="barragan-2"] .hero{ padding-block:clamp(110px,17vw,230px); }
:root[data-skin="barragan-2"] .hero-grid{ grid-template-columns:1fr; max-width:760px; margin-inline:auto; gap:clamp(36px,7vw,96px); }
:root[data-skin="barragan-2"] .section-head{ max-width:720px; margin-inline:auto; align-items:flex-start; }
:root[data-skin="barragan-2"] .section-head h2{ font-family:var(--serif); font-weight:400; color:var(--ink); }
:root[data-skin="barragan-2"] .eyebrow{ color:var(--accent); letter-spacing:.28em; }
:root[data-skin="barragan-2"] .link-arrow{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line-strong); }
:root[data-skin="barragan-2"] .section--showcase{ background:linear-gradient(180deg,rgba(251,242,228,.82),rgba(241,229,213,.72)); border-block:none; padding-block:clamp(100px,15vw,220px); }
:root[data-skin="barragan-2"] .site-footer{ background:var(--ink); border-top:none; color:#FFF2E0; margin-top:clamp(100px,16vw,220px); }

:root[data-skin="barragan-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:1fr; gap:clamp(140px,19vw,260px); max-width:980px; margin:0 auto; padding-top:clamp(80px,12vw,170px); }
:root[data-skin="barragan-2"] .gallery-grid .g-item{ margin:0; padding:clamp(52px,7vw,96px); background:#8D1E45; border-radius:0; overflow:visible; box-shadow:inset 0 0 0 1px rgba(255,246,226,.18); }
:root[data-skin="barragan-2"] .gallery-grid .g-item:nth-child(3n+2){ background:#825316; }
:root[data-skin="barragan-2"] .gallery-grid .g-item:nth-child(3n){ background:#4F285B; }
:root[data-skin="barragan-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(72px,10vw,150px); max-width:1120px; margin:0 auto; padding:clamp(80px,12vw,160px) clamp(20px,4vw,70px) 0; }
:root[data-skin="barragan-2"] .home-gallery .g-item{ margin:0; padding:clamp(42px,5vw,80px); background:#8D1E45; border-radius:0; overflow:visible; }
:root[data-skin="barragan-2"] .home-gallery .g-item:nth-child(even){ background:#825316; margin-top:clamp(80px,10vw,150px); }
:root[data-skin="barragan-2"] .g-media{ background:#FBF2E4; padding:clamp(18px,2.4vw,34px); border:none; border-radius:0; overflow:visible; }
:root[data-skin="barragan-2"] .g-media img, :root[data-skin="barragan-2"] .g-media svg{ border:none; box-shadow:0 34px 72px -44px rgba(46,28,19,.62); }
:root[data-skin="barragan-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="barragan-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; padding:clamp(24px,3vw,44px) 0 0; color:#FFF3E4; }
:root[data-skin="barragan-2"] .g-title{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,2vw,25px); color:#FFF7EA; letter-spacing:.01em; }
:root[data-skin="barragan-2"] .g-meta{ font-family:var(--mono); color:rgba(255,247,234,.78); letter-spacing:.14em; text-transform:uppercase; }

@media (max-width:820px){
  :root[data-skin="barragan-2"] .nav{ height:82px; justify-content:space-between; }
  :root[data-skin="barragan-2"] .home-gallery{ grid-template-columns:1fr; }
  :root[data-skin="barragan-2"] .home-gallery .g-item:nth-child(even){ margin-top:0; }
  :root[data-skin="barragan-2"] .gallery-grid .g-item,
  :root[data-skin="barragan-2"] .home-gallery .g-item{ padding:clamp(32px,8vw,58px); }
  body[data-struct="barragan-2"] .skin-structure-layer:nth-child(1){ width:18vw; }
  body[data-struct="barragan-2"] .skin-structure-layer:nth-child(2){ width:24vw; }
}


/* ============ wright-2 (purpose-first redesign) ============ */
:root[data-skin="wright-2"]{
  --bg:#EFE3C7; --surface:#F8EFD9; --surface-2:#D9C394; --ink:#21160D; --ink-soft:#5A3A22;
  --ink-faint:#8B7650; --line:#D7C393; --line-strong:#A9834D; --accent:#8C2F1B; --accent-deep:#5F7B45; --accent-soft:#E6D3A8;
}
body[data-struct="wright-2"] #skin-structure{ background:linear-gradient(180deg,#EFE3C7 0 62%,#D7C393 100%); }
body[data-struct="wright-2"] .skin-structure-layer:nth-child(1){ top:auto; bottom:0; height:28vh; background:linear-gradient(180deg,transparent,rgba(74,47,23,.18)); }
body[data-struct="wright-2"] .skin-structure-layer:nth-child(2){ top:72px; left:-8vw; width:72vw; height:clamp(52px,9vh,108px); background:rgba(96,63,31,.16); box-shadow:18vw 22px 0 -6px rgba(140,47,27,.26); }
body[data-struct="wright-2"] .skin-structure-layer:nth-child(3){ top:42vh; left:18vw; width:76vw; height:2px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }

:root[data-skin="wright-2"] .site-header{ background:color-mix(in srgb,var(--surface) 92%,transparent); border-bottom:6px solid var(--accent); box-shadow:0 12px 0 -7px var(--line-strong); }
:root[data-skin="wright-2"] .nav{ height:48px; align-items:center; gap:clamp(24px,5vw,72px); }
:root[data-skin="wright-2"] .brand{ font-family:var(--serif); color:var(--ink); letter-spacing:.04em; }
:root[data-skin="wright-2"] .brand span{ color:var(--accent); }
:root[data-skin="wright-2"] .btn{ border-radius:0; background:var(--ink); border:1px solid var(--ink); color:var(--bg); box-shadow:10px 10px 0 var(--accent-soft); }
:root[data-skin="wright-2"] .hero{ padding-block:clamp(24px,5vw,70px) clamp(80px,12vw,160px); }
:root[data-skin="wright-2"] .hero-grid{ grid-template-columns:minmax(240px,.62fr) minmax(420px,1.38fr); gap:clamp(22px,3vw,48px); align-items:end; border-bottom:12px solid var(--line-strong); padding-bottom:clamp(18px,3vw,42px); }
:root[data-skin="wright-2"] .section-head{ align-items:flex-end; border-top:10px solid var(--accent); padding-top:18px; }
:root[data-skin="wright-2"] .section-head h2{ font-family:var(--serif); color:var(--ink); letter-spacing:-.01em; }
:root[data-skin="wright-2"] .eyebrow{ color:var(--accent); letter-spacing:.24em; }
:root[data-skin="wright-2"] .link-arrow{ color:var(--ink); border-bottom:3px solid var(--accent); text-decoration:none; }
:root[data-skin="wright-2"] .section--showcase{ background:linear-gradient(180deg,var(--accent-soft),var(--bg)); border-block:12px solid var(--line-strong); }
:root[data-skin="wright-2"] .site-footer{ background:#D7C393; border-top:14px solid var(--accent); color:var(--ink); }

:root[data-skin="wright-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(80px,10vw,160px) clamp(22px,3vw,48px); max-width:1360px; margin:0 auto; padding-top:clamp(90px,12vw,190px); }
:root[data-skin="wright-2"] .gallery-grid .g-item{ grid-column:span 6; margin:0; padding-top:clamp(12px,1.6vw,22px); border-top:clamp(8px,1.1vw,16px) solid var(--accent); background:transparent; overflow:visible; }
:root[data-skin="wright-2"] .gallery-grid .g-item:nth-child(4n+1){ grid-column:1 / span 7; }
:root[data-skin="wright-2"] .gallery-grid .g-item:nth-child(4n+2){ grid-column:7 / span 6; margin-top:clamp(40px,7vw,110px); }
:root[data-skin="wright-2"] .gallery-grid .g-item:nth-child(4n+3){ grid-column:2 / span 5; }
:root[data-skin="wright-2"] .gallery-grid .g-item:nth-child(4n){ grid-column:6 / span 7; margin-top:clamp(24px,4vw,72px); }
:root[data-skin="wright-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(44px,7vw,110px); max-width:1280px; margin:0 auto; padding:clamp(56px,8vw,130px) clamp(18px,3vw,44px) 0; }
:root[data-skin="wright-2"] .home-gallery .g-item{ grid-column:span 6; margin:0; padding-top:14px; border-top:10px solid var(--accent); background:transparent; overflow:visible; }
:root[data-skin="wright-2"] .home-gallery .g-item:nth-child(even){ grid-column:6 / span 7; margin-top:clamp(28px,5vw,82px); }
:root[data-skin="wright-2"] .g-media{ background:#C6AA72; padding:clamp(12px,1.8vw,22px); border:none; border-radius:0; overflow:visible; }
:root[data-skin="wright-2"] .g-media img, :root[data-skin="wright-2"] .g-media svg{ border:1px solid var(--line-strong); box-shadow:-28px 18px 0 -12px rgba(140,47,27,.34),0 28px 54px -34px rgba(33,22,13,.42); }
:root[data-skin="wright-2"] .g-item:hover .g-media img{ transform:translateY(-2px); }
:root[data-skin="wright-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; padding:14px 0 0; color:var(--ink); }
:root[data-skin="wright-2"] .g-title{ font-family:var(--serif); font-weight:650; color:var(--ink); letter-spacing:.01em; }
:root[data-skin="wright-2"] .g-meta{ font-family:var(--mono); color:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; }

@media (max-width:860px){
  :root[data-skin="wright-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="wright-2"] .gallery-grid,
  :root[data-skin="wright-2"] .home-gallery{ display:block; max-width:720px; }
  :root[data-skin="wright-2"] .gallery-grid .g-item,
  :root[data-skin="wright-2"] .home-gallery .g-item,
  :root[data-skin="wright-2"] .gallery-grid .g-item:nth-child(n),
  :root[data-skin="wright-2"] .home-gallery .g-item:nth-child(n){ margin:0 0 clamp(54px,12vw,100px); }
  body[data-struct="wright-2"] .skin-structure-layer:nth-child(2){ width:96vw; }
}


/* ============ folio-2 (purpose-first redesign) ============ */
:root[data-skin="folio-2"]{
  --bg:#11100E; --surface:#1B1916; --surface-2:#25221D; --ink:#F4EFE4; --ink-soft:#C8BFAE;
  --ink-faint:#8E8577; --line:#39352E; --line-strong:#6F6657; --accent:#D8C6A4;
  --accent-deep:#050504; --accent-soft:#EEE2C7;
}
body[data-struct="folio-2"] #skin-structure{ background:var(--bg); }
body[data-struct="folio-2"] .skin-structure-layer:nth-child(1){
  inset:0; background:radial-gradient(90vw 70vh at 50% 18%, rgba(216,198,164,.13), transparent 64%);
}
:root[data-skin="folio-2"] .site-header{ background:rgba(17,16,14,.88); border-bottom:1px solid var(--line); }
:root[data-skin="folio-2"] .nav{ height:96px; justify-content:center; gap:clamp(36px,8vw,130px); }
:root[data-skin="folio-2"] .brand{ font-family:var(--serif); font-size:clamp(24px,3.4vw,52px); color:var(--ink); letter-spacing:-.035em; }
:root[data-skin="folio-2"] .hero-grid{ grid-template-columns:1fr; max-width:980px; margin-inline:auto; text-align:center; padding-block:clamp(90px,14vw,190px); }
:root[data-skin="folio-2"] .section-head{ max-width:980px; margin-inline:auto; text-align:center; color:var(--ink); }
:root[data-skin="folio-2"] .section--showcase{ background:transparent; border-block:1px solid var(--line); }
:root[data-skin="folio-2"] .section--showcase .section-head h2{ color:var(--ink); font-family:var(--serif); font-size:clamp(42px,7vw,110px); letter-spacing:-.055em; }
:root[data-skin="folio-2"] .section--showcase .eyebrow{ color:var(--accent); letter-spacing:.24em; }
:root[data-skin="folio-2"] .section--showcase .link-arrow{ color:var(--accent-soft); border-bottom:1px solid var(--accent); }
:root[data-skin="folio-2"] .site-footer{ background:#080807; border-top:1px solid var(--line-strong); color:var(--ink-faint); }
:root[data-skin="folio-2"] .btn{ background:transparent; color:var(--accent-soft); border:1px solid var(--accent); border-radius:0; box-shadow:none; }
:root[data-skin="folio-2"] .gallery-grid,
:root[data-skin="folio-2"] .home-gallery{
  columns:unset; display:block; max-width:1500px; margin-inline:auto; padding-top:clamp(50px,8vw,120px); scroll-snap-type:y proximity;
}
:root[data-skin="folio-2"] .gallery-grid .g-item,
:root[data-skin="folio-2"] .home-gallery .g-item{
  min-height:82vh; display:grid; place-items:center; margin:0 0 clamp(90px,15vw,220px); padding:clamp(22px,4vw,70px);
  background:linear-gradient(180deg,var(--surface),var(--accent-deep)); border:1px solid var(--line); border-radius:0; overflow:visible; scroll-snap-align:center;
}
:root[data-skin="folio-2"] .g-media{ overflow:visible; background:transparent; text-align:center; }
:root[data-skin="folio-2"] .g-media img,
:root[data-skin="folio-2"] .g-media svg{ border:1px solid var(--line-strong); box-shadow:0 60px 120px -54px rgba(0,0,0,.95); filter:saturate(.92) contrast(1.04); }
:root[data-skin="folio-2"] .g-item:hover .g-media img{ box-shadow:0 68px 132px -56px rgba(0,0,0,.98); filter:saturate(.92) contrast(1.04); }
:root[data-skin="folio-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; width:min(100%,920px); background:none; color:var(--ink); padding:clamp(20px,2.4vw,34px) 0 0; text-align:left; }
:root[data-skin="folio-2"] .g-title{ display:block; font-family:var(--serif); font-size:clamp(28px,4.4vw,72px); line-height:.95; letter-spacing:-.055em; color:var(--ink); }
:root[data-skin="folio-2"] .g-meta{ display:block; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
@media (max-width:760px){
  :root[data-skin="folio-2"] .nav{ height:76px; gap:28px; }
  :root[data-skin="folio-2"] .gallery-grid .g-item,
  :root[data-skin="folio-2"] .home-gallery .g-item{ min-height:auto; padding:22px; margin-bottom:74px; }
  :root[data-skin="folio-2"] .g-title{ font-size:34px; }
}


/* ============ monograph-2 (purpose-first redesign) ============ */
:root[data-skin="monograph-2"]{
  --bg:#EEE8DD; --surface:#FAF7EF; --surface-2:#E2D8C8; --ink:#17120D; --ink-soft:#51483B;
  --ink-faint:#8A7D69; --line:#D7CCBA; --line-strong:#9E907A; --accent:#5A2A18;
  --accent-deep:#17120D; --accent-soft:#E8DED0;
}
body[data-struct="monograph-2"] #skin-structure{ background:var(--bg); }
body[data-struct="monograph-2"] .skin-structure-layer:nth-child(1){
  inset:0 auto 0 0; width:clamp(10px,1.6vw,28px); background:var(--accent-deep);
}
body[data-struct="monograph-2"] .skin-structure-layer:nth-child(2){
  top:12vh; bottom:10vh; right:clamp(24px,7vw,120px); width:1px; background:var(--line-strong);
}
:root[data-skin="monograph-2"] .site-header{ background:var(--bg); border-bottom:1px solid var(--line-strong); }
:root[data-skin="monograph-2"] .nav{ height:clamp(82px,9vw,132px); justify-content:space-between; align-items:flex-end; padding-bottom:22px; }
:root[data-skin="monograph-2"] .brand{ font-family:var(--serif); font-size:clamp(28px,4.8vw,72px); letter-spacing:-.055em; color:var(--ink); }
:root[data-skin="monograph-2"] .hero-grid{ grid-template-columns:minmax(0,1fr); max-width:1180px; margin-inline:auto; padding-top:clamp(50px,8vw,130px); }
:root[data-skin="monograph-2"] .section-head{ max-width:980px; margin-inline:auto; text-align:left; border-top:2px solid var(--ink); padding-top:clamp(22px,3vw,42px); }
:root[data-skin="monograph-2"] .section--showcase{ background:var(--bg); border-block:1px solid var(--line); }
:root[data-skin="monograph-2"] .section--showcase .section-head h2{ font-family:var(--serif); font-size:clamp(44px,7vw,118px); line-height:.9; letter-spacing:-.06em; color:var(--ink); }
:root[data-skin="monograph-2"] .section--showcase .eyebrow{ color:var(--accent); font-family:var(--mono); letter-spacing:.22em; }
:root[data-skin="monograph-2"] .section--showcase .link-arrow{ color:var(--accent); border-bottom:1px solid var(--accent); }
:root[data-skin="monograph-2"] .site-footer{ background:var(--surface-2); border-top:2px solid var(--ink); color:var(--ink-soft); }
:root[data-skin="monograph-2"] .btn{ background:var(--ink); color:var(--surface); border:1px solid var(--ink); box-shadow:none; border-radius:0; }
:root[data-skin="monograph-2"] .gallery-grid,
:root[data-skin="monograph-2"] .home-gallery{
  columns:unset; display:block; max-width:1240px; margin-inline:auto; padding-top:clamp(44px,6vw,96px); counter-reset:plate;
}
:root[data-skin="monograph-2"] .gallery-grid .g-item,
:root[data-skin="monograph-2"] .home-gallery .g-item{
  width:min(100%,1040px); margin:0 auto clamp(90px,13vw,210px); background:transparent; border-radius:0; overflow:visible; counter-increment:plate;
}
:root[data-skin="monograph-2"] .gallery-grid .g-item:nth-child(3n+1),
:root[data-skin="monograph-2"] .home-gallery .g-item:nth-child(3n+1){ width:min(100%,1240px); }
:root[data-skin="monograph-2"] .g-media{ overflow:visible; background:transparent; }
:root[data-skin="monograph-2"] .g-media img,
:root[data-skin="monograph-2"] .g-media svg{ border:0; box-shadow:0 34px 80px -42px rgba(23,18,13,.58); filter:none; }
:root[data-skin="monograph-2"] .g-item:hover .g-media img{ box-shadow:0 34px 80px -42px rgba(23,18,13,.58); filter:none; }
:root[data-skin="monograph-2"] .g-overlay{
  position:static; inset:auto; opacity:1; display:grid; grid-template-columns:minmax(120px,18%) 1fr; gap:clamp(18px,3vw,46px);
  background:none; color:var(--ink); padding:clamp(20px,2.4vw,34px) 0 0; border-top:1px solid var(--line-strong);
}
:root[data-skin="monograph-2"] .g-title{ display:block; font-family:var(--serif); font-size:clamp(26px,3.6vw,58px); line-height:.95; letter-spacing:-.04em; color:var(--ink); }
:root[data-skin="monograph-2"] .g-title::before{ content:"Plate " counter(plate, decimal-leading-zero); display:block; font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
:root[data-skin="monograph-2"] .g-meta{ display:block; font-family:var(--serif); font-size:clamp(14px,1.2vw,18px); font-style:italic; color:var(--ink-soft); align-self:end; }
@media (max-width:820px){
  :root[data-skin="monograph-2"] .nav{ height:84px; align-items:center; padding-bottom:0; }
  :root[data-skin="monograph-2"] .brand{ font-size:34px; }
  :root[data-skin="monograph-2"] .hero-grid{ padding-top:48px; }
  :root[data-skin="monograph-2"] .gallery-grid .g-item,
  :root[data-skin="monograph-2"] .home-gallery .g-item{ width:100%; margin-bottom:72px; }
  :root[data-skin="monograph-2"] .g-overlay{ grid-template-columns:1fr; gap:10px; }
  body[data-struct="monograph-2"] .skin-structure-layer:nth-child(2){ display:none; }
}


/* ============ duotone-2 (purpose-first redesign) ============ */
:root[data-skin="duotone-2"]{
  --bg:#E7DCC8; --surface:#F2E8D6; --surface-2:#CDBB9B; --ink:#102A2D; --ink-soft:#294A4B;
  --ink-faint:#6B7770; --line:#BBAA8C; --line-strong:#102A2D; --accent:#B86E32;
  --accent-deep:#082022; --accent-soft:#E1B981; --duo-shadow:#102A2D; --duo-highlight:#B86E32;
}
body[data-struct="duotone-2"] #skin-structure{ background:linear-gradient(135deg,var(--bg) 0%,#D8C8AA 100%); }
body[data-struct="duotone-2"] .skin-structure-layer:nth-child(1){
  inset:0; background:linear-gradient(115deg, color-mix(in srgb,var(--duo-shadow) 10%,transparent) 0 42%, transparent 43%);
}
body[data-struct="duotone-2"] .skin-structure-layer:nth-child(2){
  inset:auto 0 0 0; height:28vh; background:linear-gradient(0deg, color-mix(in srgb,var(--duo-highlight) 24%,transparent), transparent);
}
:root[data-skin="duotone-2"] .site-header{ background:color-mix(in srgb,var(--surface) 86%,transparent); border-bottom:3px solid var(--duo-shadow); }
:root[data-skin="duotone-2"] .nav{ height:88px; justify-content:space-between; gap:36px; }
:root[data-skin="duotone-2"] .brand{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em; color:var(--duo-shadow); }
:root[data-skin="duotone-2"] .hero-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,6vw,96px); align-items:end; }
:root[data-skin="duotone-2"] .section-head{ border-left:10px solid var(--duo-highlight); padding-left:clamp(18px,2vw,32px); text-align:left; }
:root[data-skin="duotone-2"] .section--showcase{ background:transparent; border-block:3px solid var(--duo-shadow); }
:root[data-skin="duotone-2"] .section--showcase .section-head h2{ color:var(--duo-shadow); font-family:var(--sans); font-weight:800; letter-spacing:-.04em; }
:root[data-skin="duotone-2"] .section--showcase .eyebrow{ color:var(--duo-highlight); font-family:var(--mono); letter-spacing:.26em; }
:root[data-skin="duotone-2"] .section--showcase .link-arrow{ color:var(--duo-shadow); box-shadow:inset 0 -3px 0 var(--duo-highlight); }
:root[data-skin="duotone-2"] .site-footer{ background:var(--duo-shadow); border-top:0; color:var(--surface); }
:root[data-skin="duotone-2"] .btn{ background:var(--duo-highlight); color:var(--duo-shadow); border:2px solid var(--duo-shadow); border-radius:0; box-shadow:6px 6px 0 var(--duo-shadow); }
:root[data-skin="duotone-2"] .gallery-grid,
:root[data-skin="duotone-2"] .home-gallery{
  columns:unset; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,4vw,64px); max-width:1240px; margin-inline:auto; padding-top:clamp(28px,4vw,64px);
}
:root[data-skin="duotone-2"] .gallery-grid .g-item,
:root[data-skin="duotone-2"] .home-gallery .g-item{
  margin:0; background:var(--surface); border:2px solid var(--duo-shadow); border-radius:0; overflow:visible; padding:clamp(10px,1.4vw,18px);
}
:root[data-skin="duotone-2"] .g-media{ position:relative; overflow:visible; background:var(--duo-shadow); }
:root[data-skin="duotone-2"] .g-media::after{
  content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb,var(--duo-highlight) 34%,transparent), color-mix(in srgb,var(--duo-shadow) 18%,transparent)); mix-blend-mode:soft-light;
}
:root[data-skin="duotone-2"] .g-media img,
:root[data-skin="duotone-2"] .g-media svg{ border:0; box-shadow:none; filter:grayscale(1) contrast(1.18) sepia(.62) hue-rotate(150deg) saturate(1.25) brightness(.88); }
:root[data-skin="duotone-2"] .g-item:hover .g-media img{ box-shadow:none; filter:grayscale(1) contrast(1.24) sepia(.68) hue-rotate(150deg) saturate(1.35) brightness(.9); }
:root[data-skin="duotone-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:var(--duo-shadow); color:var(--surface); padding:14px 16px 16px; border-top:6px solid var(--duo-highlight); }
:root[data-skin="duotone-2"] .g-title{ display:block; font-family:var(--sans); font-weight:800; font-size:clamp(18px,2vw,30px); line-height:1; letter-spacing:-.035em; color:var(--surface); }
:root[data-skin="duotone-2"] .g-meta{ display:block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-soft); }
@media (max-width:760px){
  :root[data-skin="duotone-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="duotone-2"] .gallery-grid,
  :root[data-skin="duotone-2"] .home-gallery{ grid-template-columns:1fr; }
  :root[data-skin="duotone-2"] .nav{ height:76px; }
}


/* ============ ansel-adams-2 (purpose-first redesign) ============ */
:root[data-skin="ansel-adams-2"]{
  --bg:#DCDCDC; --surface:#F7F7F7; --surface-2:#BEBEBE; --ink:#050505; --ink-soft:#2D2D2D;
  --ink-faint:#686868; --line:#A8A8A8; --line-strong:#4A4A4A; --accent:#FFFFFF;
  --accent-deep:#000000; --accent-soft:#EAEAEA;
}
body[data-struct="ansel-adams-2"] #skin-structure{ background:linear-gradient(180deg,#F4F4F4 0%,#D0D0D0 42%,#8C8C8C 100%); }
body[data-struct="ansel-adams-2"] .skin-structure-layer:nth-child(1){
  inset:0; background:radial-gradient(80vw 70vh at 50% 0%, rgba(255,255,255,.72), transparent 70%);
}
body[data-struct="ansel-adams-2"] .skin-structure-layer:nth-child(2){
  left:0; right:0; bottom:0; height:18px; background:linear-gradient(90deg,#000 0 9.09%,#141414 9.09% 18.18%,#272727 18.18% 27.27%,#393939 27.27% 36.36%,#525252 36.36% 45.45%,#737373 45.45% 54.54%,#919191 54.54% 63.63%,#B4B4B4 63.63% 72.72%,#D0D0D0 72.72% 81.81%,#E8E8E8 81.81% 90.9%,#FFF 90.9% 100%);
}
:root[data-skin="ansel-adams-2"] .site-header{ background:rgba(244,244,244,.9); border-bottom:1px solid var(--line-strong); }
:root[data-skin="ansel-adams-2"] .nav{ height:104px; justify-content:space-between; }
:root[data-skin="ansel-adams-2"] .brand{ font-family:var(--serif); font-size:clamp(24px,3vw,46px); color:var(--ink); letter-spacing:.02em; }
:root[data-skin="ansel-adams-2"] .hero-grid{ grid-template-columns:1fr; max-width:1280px; margin-inline:auto; padding-block:clamp(110px,17vw,260px); }
:root[data-skin="ansel-adams-2"] .section-head{ max-width:1100px; margin-inline:auto; text-align:center; }
:root[data-skin="ansel-adams-2"] .section--showcase{ background:transparent; border-block:1px solid var(--line-strong); }
:root[data-skin="ansel-adams-2"] .section--showcase .section-head h2{ color:var(--ink); font-family:var(--serif); font-size:clamp(46px,8vw,132px); line-height:.9; letter-spacing:-.05em; }
:root[data-skin="ansel-adams-2"] .section--showcase .eyebrow{ color:var(--ink-soft); font-family:var(--mono); letter-spacing:.28em; }
:root[data-skin="ansel-adams-2"] .section--showcase .link-arrow{ color:var(--ink); border-bottom:1px solid var(--ink); }
:root[data-skin="ansel-adams-2"] .site-footer{ background:#111; border-top:0; color:var(--accent-soft); }
:root[data-skin="ansel-adams-2"] .btn{ background:var(--ink); color:var(--accent); border:1px solid var(--ink); border-radius:0; box-shadow:none; }
:root[data-skin="ansel-adams-2"] .gallery-grid,
:root[data-skin="ansel-adams-2"] .home-gallery{
  columns:unset; display:block; max-width:1480px; margin-inline:auto; padding-top:clamp(70px,10vw,160px);
}
:root[data-skin="ansel-adams-2"] .gallery-grid .g-item,
:root[data-skin="ansel-adams-2"] .home-gallery .g-item{
  margin:0 0 clamp(130px,20vw,310px); padding:clamp(14px,2.5vw,42px); background:var(--surface); border:1px solid var(--line-strong); border-radius:0; overflow:visible;
}
:root[data-skin="ansel-adams-2"] .g-media{ overflow:visible; background:var(--surface); text-align:center; }
:root[data-skin="ansel-adams-2"] .g-media img,
:root[data-skin="ansel-adams-2"] .g-media svg{ border:0; box-shadow:0 46px 110px -58px rgba(0,0,0,.72); filter:grayscale(1) contrast(1.24) brightness(1.05); }
:root[data-skin="ansel-adams-2"] .g-item:hover .g-media img{ box-shadow:0 52px 120px -58px rgba(0,0,0,.78); filter:grayscale(1) contrast(1.28) brightness(1.06); }
:root[data-skin="ansel-adams-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:flex; justify-content:space-between; gap:24px; background:none; color:var(--ink); padding:18px 0 0; border-top:1px solid var(--line); margin-top:18px; }
:root[data-skin="ansel-adams-2"] .g-title{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.4vw,42px); letter-spacing:.01em; color:var(--ink); }
:root[data-skin="ansel-adams-2"] .g-meta{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); text-align:right; }
@media (max-width:760px){
  :root[data-skin="ansel-adams-2"] .nav{ height:78px; }
  :root[data-skin="ansel-adams-2"] .hero-grid{ padding-block:80px; }
  :root[data-skin="ansel-adams-2"] .gallery-grid .g-item,
  :root[data-skin="ansel-adams-2"] .home-gallery .g-item{ margin-bottom:86px; padding:14px; }
  :root[data-skin="ansel-adams-2"] .g-overlay{ display:block; }
  :root[data-skin="ansel-adams-2"] .g-meta{ text-align:left; margin-top:8px; }
}


/* ============ munari-2 (purpose-first redesign) ============ */
:root[data-skin="munari-2"]{
  --bg:#F8F6EF; --surface:#FFFCF4; --surface-2:#EDE8DC; --ink:#171717; --ink-soft:#484640;
  --ink-faint:#8C877C; --line:#DDD6C8; --line-strong:#BFB6A5; --accent:#E4261A;
  --munari-yellow:#F5D21E; --munari-blue:#1F67B3;
}
body[data-struct="munari-2"] #skin-structure{ background:var(--bg); }
body[data-struct="munari-2"] .skin-structure-layer:nth-child(1){
  top:12vh; right:8vw; width:min(22vw,230px); height:min(22vw,230px);
  border-radius:50%; background:var(--munari-yellow); box-shadow:-34px 42px 0 rgba(228,38,26,.22);
}
body[data-struct="munari-2"] .skin-structure-layer:nth-child(1)::after{
  content:""; position:absolute; left:34%; top:34%; width:42%; height:42%; border-radius:50%; background:var(--bg);
}
body[data-struct="munari-2"] .skin-structure-layer:nth-child(2){
  left:7vw; bottom:12vh; width:min(18vw,180px); height:min(18vw,180px);
  background:var(--accent); clip-path:polygon(0 0,100% 14%,86% 100%,0 86%);
}
:root[data-skin="munari-2"] .site-header{ background:transparent; border-bottom:0; box-shadow:none; }
:root[data-skin="munari-2"] .nav{ height:78px; gap:clamp(18px,4vw,54px); }
:root[data-skin="munari-2"] .brand{ font-family:var(--sans); font-weight:800; letter-spacing:-.035em; color:var(--ink); text-transform:lowercase; position:relative; }
:root[data-skin="munari-2"] .brand::after{ content:""; display:inline-block; width:.62em; height:.62em; margin-left:.22em; border-radius:50%; background:var(--accent); box-shadow:.62em 0 0 var(--munari-yellow); }
:root[data-skin="munari-2"] .nav-links{ gap:12px; }
:root[data-skin="munari-2"] .nav-links a{ font-family:var(--sans); font-weight:700; text-transform:lowercase; color:var(--ink); padding:7px 10px; }
:root[data-skin="munari-2"] .nav-links a::after{ height:0; }
:root[data-skin="munari-2"] .nav-links a:hover{ background:var(--munari-yellow); }
:root[data-skin="munari-2"] .hero-grid{ grid-template-columns:minmax(0,5fr) minmax(260px,4fr); gap:clamp(36px,7vw,96px); align-items:center; }
:root[data-skin="munari-2"] .hero h1{ font-family:var(--sans); font-weight:800; letter-spacing:-.055em; line-height:.95; text-transform:lowercase; }
:root[data-skin="munari-2"] .hero .lead{ color:var(--ink-soft); border-left:18px solid var(--munari-yellow); padding-left:18px; }
:root[data-skin="munari-2"] .hero-art{ border:0; border-radius:0; background:var(--surface); padding:clamp(12px,2vw,22px); box-shadow:12px 12px 0 var(--accent), -12px -12px 0 var(--munari-yellow); overflow:visible; }
:root[data-skin="munari-2"] .section-head{ align-items:flex-start; position:relative; padding-top:26px; }
:root[data-skin="munari-2"] .section-head::before{ content:""; position:absolute; top:0; left:0; width:72px; height:18px; background:linear-gradient(90deg,var(--accent) 0 33%,var(--munari-yellow) 33% 66%,var(--munari-blue) 66%); }
:root[data-skin="munari-2"] .section-head h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; text-transform:lowercase; color:var(--ink); }
:root[data-skin="munari-2"] .section--showcase{ background:var(--bg); border-block:0; }
:root[data-skin="munari-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="munari-2"] .eyebrow{ color:var(--accent); font-family:var(--sans); font-weight:800; letter-spacing:.08em; text-transform:lowercase; }
:root[data-skin="munari-2"] .link-arrow{ color:var(--ink); font-family:var(--sans); font-weight:800; text-decoration-thickness:5px; text-decoration-color:var(--munari-yellow); }
:root[data-skin="munari-2"] .btn{ border:2px solid var(--ink); border-radius:0; background:var(--munari-yellow); color:var(--ink); font-family:var(--sans); font-weight:800; text-transform:lowercase; box-shadow:6px 6px 0 var(--accent); }
:root[data-skin="munari-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(42px,6vw,86px); max-width:980px; margin-inline:auto; padding-top:clamp(28px,5vw,70px); }
:root[data-skin="munari-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(34px,5vw,72px); padding:clamp(24px,4vw,54px); }
:root[data-skin="munari-2"] .gallery-grid .g-item,
:root[data-skin="munari-2"] .home-gallery .g-item{ position:relative; background:transparent; border-radius:0; overflow:visible; padding:clamp(16px,2.5vw,26px); cursor:crosshair; }
:root[data-skin="munari-2"] .gallery-grid .g-item::before,
:root[data-skin="munari-2"] .home-gallery .g-item::before{ content:""; position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%; background:var(--accent); transition:transform .25s var(--ease); }
:root[data-skin="munari-2"] .gallery-grid .g-item::after,
:root[data-skin="munari-2"] .home-gallery .g-item::after{ content:""; position:absolute; left:22px; top:22px; width:42px; height:42px; background:var(--surface); border:2px solid var(--ink); transition:transform .25s var(--ease); }
:root[data-skin="munari-2"] .gallery-grid .g-item:nth-child(even)::before,
:root[data-skin="munari-2"] .home-gallery .g-item:nth-child(even)::before{ border-radius:0; background:var(--munari-blue); }
:root[data-skin="munari-2"] .gallery-grid .g-item:hover::before,
:root[data-skin="munari-2"] .home-gallery .g-item:hover::before{ transform:translate(10px,-8px); }
:root[data-skin="munari-2"] .gallery-grid .g-item:hover::after,
:root[data-skin="munari-2"] .home-gallery .g-item:hover::after{ transform:translate(-8px,10px); }
:root[data-skin="munari-2"] .g-media{ background:var(--surface); padding:10px; border:1px solid var(--line-strong); overflow:visible; }
:root[data-skin="munari-2"] .g-media img, :root[data-skin="munari-2"] .g-media svg{ border:0; box-shadow:0 14px 28px -24px rgba(23,23,23,.42); }
:root[data-skin="munari-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="munari-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; color:var(--ink); padding:12px 0 0; }
:root[data-skin="munari-2"] .g-title{ font-family:var(--sans); font-weight:800; text-transform:lowercase; color:var(--ink); }
:root[data-skin="munari-2"] .g-meta{ font-family:var(--sans); font-weight:500; font-size:12px; color:var(--ink-faint); }
:root[data-skin="munari-2"] .site-footer{ background:transparent; color:var(--ink); border-top:0; box-shadow:inset 0 10px 0 var(--munari-yellow); }
@media (max-width:820px){
  :root[data-skin="munari-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="munari-2"] .gallery-grid, :root[data-skin="munari-2"] .home-gallery{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  :root[data-skin="munari-2"] .nav{ height:auto; min-height:70px; }
  :root[data-skin="munari-2"] .gallery-grid .g-item, :root[data-skin="munari-2"] .home-gallery .g-item{ padding:14px; }
}


/* ============ saville-2 (purpose-first redesign) ============ */
:root[data-skin="saville-2"]{
  --bg:#F2F2EE; --surface:#FFFFFF; --surface-2:#D9D9D2; --ink:#050505; --ink-soft:#242424;
  --ink-faint:#6A6A64; --line:#050505; --line-strong:#050505; --accent:#D71920;
  --accent-deep:#000000; --accent-soft:#F7C9C9;
}
body[data-struct="saville-2"] #skin-structure{ background:var(--bg); }
body[data-struct="saville-2"] .skin-structure-layer:nth-child(1)::before{
  content:"EXPOSED"; position:absolute; left:-4vw; top:8vh; font-family:var(--sans); font-weight:900; font-size:clamp(92px,18vw,300px);
  line-height:.75; letter-spacing:-.12em; color:rgba(0,0,0,.08); white-space:nowrap; transform:skewX(-6deg);
}
body[data-struct="saville-2"] .skin-structure-layer:nth-child(2){
  left:auto; right:0; top:0; width:clamp(28px,5vw,86px); height:100vh; background:var(--ink);
}
body[data-struct="saville-2"] .skin-structure-layer:nth-child(3){
  left:0; top:62vh; width:72vw; height:clamp(6px,1vw,14px); background:var(--accent);
}
:root[data-skin="saville-2"] .site-header{ background:var(--surface); border-bottom:4px solid var(--ink); }
:root[data-skin="saville-2"] .nav{ height:74px; justify-content:flex-start; gap:clamp(18px,7vw,120px); align-items:center; }
:root[data-skin="saville-2"] .brand{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.08em; color:var(--ink); }
:root[data-skin="saville-2"] .hero-grid{ grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:clamp(16px,4vw,70px); align-items:start; max-width:1320px; margin-left:0; margin-right:auto; }
:root[data-skin="saville-2"] .section-head{ max-width:760px; margin-left:0; margin-right:auto; text-align:left; border-top:6px solid var(--ink); padding-top:16px; }
:root[data-skin="saville-2"] .section--showcase{ background:transparent; border-block:4px solid var(--ink); }
:root[data-skin="saville-2"] .section--showcase .section-head h2{ color:var(--ink); font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.09em; line-height:.82; }
:root[data-skin="saville-2"] .section--showcase .eyebrow{ color:var(--accent); font-family:var(--mono); letter-spacing:.16em; }
:root[data-skin="saville-2"] .section--showcase .link-arrow{ color:var(--ink); background:var(--accent-soft); box-shadow:inset 0 -4px 0 var(--accent); }
:root[data-skin="saville-2"] .site-footer{ background:var(--ink); border-top:0; color:var(--surface); }
:root[data-skin="saville-2"] .btn{ background:var(--ink); color:var(--surface); border:0; border-radius:0; box-shadow:8px 8px 0 var(--accent); text-transform:uppercase; }
:root[data-skin="saville-2"] .gallery-grid,
:root[data-skin="saville-2"] .home-gallery{
  columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(18px,3vw,48px); max-width:1380px; margin-inline:auto; padding-top:clamp(24px,5vw,84px);
}
:root[data-skin="saville-2"] .gallery-grid .g-item,
:root[data-skin="saville-2"] .home-gallery .g-item{
  grid-column:span 7; margin:0 0 clamp(36px,7vw,110px); background:var(--surface); border:4px solid var(--ink); border-radius:0; overflow:visible; padding:clamp(8px,1.4vw,18px);
}
:root[data-skin="saville-2"] .gallery-grid .g-item:nth-child(3n+2),
:root[data-skin="saville-2"] .home-gallery .g-item:nth-child(3n+2){ grid-column:5 / span 8; }
:root[data-skin="saville-2"] .gallery-grid .g-item:nth-child(3n+3),
:root[data-skin="saville-2"] .home-gallery .g-item:nth-child(3n+3){ grid-column:2 / span 5; }
:root[data-skin="saville-2"] .g-media{ overflow:visible; background:var(--surface); }
:root[data-skin="saville-2"] .g-media img,
:root[data-skin="saville-2"] .g-media svg{ border:0; box-shadow:none; filter:grayscale(1) contrast(1.28) brightness(1.03); }
:root[data-skin="saville-2"] .g-item:hover .g-media img{ box-shadow:none; filter:grayscale(1) contrast(1.38) brightness(1.05); }
:root[data-skin="saville-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:var(--ink); color:var(--surface); padding:clamp(12px,1.8vw,24px); margin-top:clamp(8px,1vw,14px); text-align:left; }
:root[data-skin="saville-2"] .g-title{ display:block; font-family:var(--sans); font-weight:900; font-size:clamp(28px,5vw,86px); line-height:.78; letter-spacing:-.1em; text-transform:uppercase; color:var(--surface); }
:root[data-skin="saville-2"] .g-meta{ display:block; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-soft); }
@media (max-width:820px){
  :root[data-skin="saville-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="saville-2"] .gallery-grid,
  :root[data-skin="saville-2"] .home-gallery{ grid-template-columns:1fr; }
  :root[data-skin="saville-2"] .gallery-grid .g-item,
  :root[data-skin="saville-2"] .home-gallery .g-item,
  :root[data-skin="saville-2"] .gallery-grid .g-item:nth-child(3n+2),
  :root[data-skin="saville-2"] .home-gallery .g-item:nth-child(3n+2),
  :root[data-skin="saville-2"] .gallery-grid .g-item:nth-child(3n+3),
  :root[data-skin="saville-2"] .home-gallery .g-item:nth-child(3n+3){ grid-column:1; }
  body[data-struct="saville-2"] .skin-structure-layer:nth-child(2){ width:14px; }
}


/* ============ aicher-2 (purpose-first redesign) ============ */
:root[data-skin="aicher-2"]{
  --bg:#F3F7F8; --surface:#FFFFFF; --surface-2:#E7EEF1; --ink:#142633; --ink-soft:#425C68;
  --ink-faint:#7F98A4; --line:#D9E4E8; --line-strong:#AFC1C9; --accent:#2F96D1;
  --aicher-green:#19A879; --aicher-orange:#F3A11F; --aicher-sky:#6FB8DF;
}
body[data-struct="aicher-2"] #skin-structure{ background:var(--bg); }
body[data-struct="aicher-2"] .skin-structure-layer:nth-child(1){
  top:0; left:0; width:100%; height:26vh;
  background:linear-gradient(90deg,rgba(47,150,209,.18) 0 25%,rgba(25,168,121,.16) 25% 50%,rgba(243,161,31,.16) 50% 75%,rgba(111,184,223,.18) 75%);
  clip-path:polygon(0 0,100% 0,100% 48%,0 100%);
}
body[data-struct="aicher-2"] .skin-structure-layer:nth-child(2){
  left:clamp(18px,5vw,72px); top:18vh; width:clamp(56px,7vw,92px); height:58vh;
  background:rgba(255,255,255,.72); border-top:8px solid var(--accent); box-shadow:0 1px 0 var(--line-strong);
}
:root[data-skin="aicher-2"] .site-header{ background:color-mix(in srgb,var(--bg) 94%,transparent); border-bottom:0; box-shadow:inset 0 -8px 0 var(--accent); }
:root[data-skin="aicher-2"] .nav{ height:78px; display:grid; grid-template-columns:minmax(130px,2fr) 7fr 3fr; gap:20px; align-items:center; }
:root[data-skin="aicher-2"] .brand{ font-family:var(--sans); font-weight:800; letter-spacing:-.02em; color:var(--ink); display:flex; align-items:center; gap:10px; }
:root[data-skin="aicher-2"] .brand::before{ content:""; width:30px; height:30px; background:radial-gradient(circle at 50% 28%,var(--ink) 0 18%,transparent 19%),linear-gradient(var(--ink) 0 0) 50% 68%/54% 16% no-repeat,var(--accent); }
:root[data-skin="aicher-2"] .nav-links{ gap:16px; }
:root[data-skin="aicher-2"] .nav-links a{ font-family:var(--sans); font-weight:700; color:var(--ink); padding:8px 8px 8px 28px; position:relative; }
:root[data-skin="aicher-2"] .nav-links a::before{ content:""; position:absolute; left:0; top:50%; width:18px; height:18px; transform:translateY(-50%); background:var(--accent); border-radius:50%; }
:root[data-skin="aicher-2"] .nav-links a::after{ height:5px; bottom:0; background:var(--accent); }
:root[data-skin="aicher-2"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:20px; align-items:stretch; }
:root[data-skin="aicher-2"] .hero-grid > :first-child{ grid-column:2 / span 5; background:var(--surface); border-top:10px solid var(--accent); padding:clamp(24px,4vw,54px); }
:root[data-skin="aicher-2"] .hero-art{ grid-column:8 / -1; border:0; border-top:10px solid var(--aicher-green); border-radius:0; padding:clamp(12px,2vw,22px); background:var(--surface); box-shadow:0 1px 0 var(--line-strong); overflow:visible; }
:root[data-skin="aicher-2"] .section-head{ display:grid; grid-template-columns:80px 1fr auto; gap:18px; align-items:stretch; }
:root[data-skin="aicher-2"] .section-head::before{ content:""; background:var(--accent); clip-path:polygon(0 0,100% 0,100% 100%,0 70%); }
:root[data-skin="aicher-2"] .section-head h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; color:var(--ink); }
:root[data-skin="aicher-2"] .section--showcase{ background:var(--bg); border-block:0; }
:root[data-skin="aicher-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="aicher-2"] .eyebrow{ color:var(--accent); font-family:var(--sans); font-weight:800; letter-spacing:.14em; }
:root[data-skin="aicher-2"] .link-arrow{ color:var(--ink); font-family:var(--sans); font-weight:800; }
:root[data-skin="aicher-2"] .btn{ border:0; border-top:7px solid var(--accent); border-radius:0; background:var(--surface); color:var(--ink); font-family:var(--sans); font-weight:800; }
:root[data-skin="aicher-2"] .gallery-grid{ counter-reset:aicher-panel; columns:unset; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1180px; margin-inline:auto; }
:root[data-skin="aicher-2"] .home-gallery{ counter-reset:aicher-panel; columns:unset; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding:clamp(18px,3vw,36px); }
:root[data-skin="aicher-2"] .gallery-grid .g-item,
:root[data-skin="aicher-2"] .home-gallery .g-item{ counter-increment:aicher-panel; position:relative; background:var(--surface); border-radius:0; overflow:visible; padding:14px 14px 14px 66px; border-top:7px solid var(--accent); box-shadow:0 1px 0 var(--line-strong); }
:root[data-skin="aicher-2"] .gallery-grid .g-item:nth-child(4n+2),
:root[data-skin="aicher-2"] .home-gallery .g-item:nth-child(4n+2){ border-top-color:var(--aicher-green); }
:root[data-skin="aicher-2"] .gallery-grid .g-item:nth-child(4n+3),
:root[data-skin="aicher-2"] .home-gallery .g-item:nth-child(4n+3){ border-top-color:var(--aicher-orange); }
:root[data-skin="aicher-2"] .gallery-grid .g-item:nth-child(4n),
:root[data-skin="aicher-2"] .home-gallery .g-item:nth-child(4n){ border-top-color:var(--aicher-sky); }
:root[data-skin="aicher-2"] .gallery-grid .g-item::before,
:root[data-skin="aicher-2"] .home-gallery .g-item::before{ content:""; position:absolute; left:16px; top:18px; width:34px; height:34px; background:radial-gradient(circle at 50% 28%,var(--ink) 0 16%,transparent 17%),linear-gradient(var(--ink) 0 0) 50% 68%/54% 14% no-repeat,var(--surface-2); }
:root[data-skin="aicher-2"] .gallery-grid .g-item::after,
:root[data-skin="aicher-2"] .home-gallery .g-item::after{ content:counter(aicher-panel,decimal-leading-zero); position:absolute; left:17px; top:58px; font:700 11px/1 var(--mono); color:var(--ink-faint); letter-spacing:.08em; }
:root[data-skin="aicher-2"] .g-media img, :root[data-skin="aicher-2"] .g-media svg{ border:1px solid var(--line); box-shadow:0 10px 22px -20px rgba(20,38,51,.45); }
:root[data-skin="aicher-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="aicher-2"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; color:var(--ink); display:block; padding:12px 0 0; }
:root[data-skin="aicher-2"] .g-title{ font-family:var(--sans); font-weight:800; color:var(--ink); }
:root[data-skin="aicher-2"] .g-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-soft); text-transform:uppercase; }
:root[data-skin="aicher-2"] .site-footer{ background:var(--surface); color:var(--ink); border-top:8px solid var(--accent); }
@media (max-width:900px){
  :root[data-skin="aicher-2"] .hero-grid, :root[data-skin="aicher-2"] .section-head{ grid-template-columns:1fr; }
  :root[data-skin="aicher-2"] .hero-grid > :first-child, :root[data-skin="aicher-2"] .hero-art{ grid-column:auto; }
  :root[data-skin="aicher-2"] .gallery-grid, :root[data-skin="aicher-2"] .home-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  :root[data-skin="aicher-2"] .nav{ display:flex; height:auto; min-height:72px; }
  :root[data-skin="aicher-2"] .gallery-grid, :root[data-skin="aicher-2"] .home-gallery{ grid-template-columns:1fr; }
}


/* ============ werkbund-2 (purpose-first redesign) ============ */
:root[data-skin="werkbund-2"]{
  --bg:#E7E0D0; --surface:#F2EBDD; --surface-2:#D8CBB4; --ink:#29251C; --ink-soft:#5B513D;
  --ink-faint:#8D8168; --line:#CBBEA6; --line-strong:#9E8F72; --accent:#7A4E2E;
  --craft:#B57948; --craft-soft:#E9D5BA;
}
body[data-struct="werkbund-2"] #skin-structure{ background:var(--bg); }
body[data-struct="werkbund-2"] .skin-structure-layer:nth-child(1){
  left:0; top:0; width:100%; height:100%;
  background:linear-gradient(90deg,transparent 0 16%,rgba(41,37,28,.06) 16% calc(16% + 1px),transparent calc(16% + 1px) 50%,rgba(41,37,28,.06) 50% calc(50% + 1px),transparent calc(50% + 1px));
}
body[data-struct="werkbund-2"] .skin-structure-layer:nth-child(2){
  top:14vh; left:7vw; width:24px; height:66vh; background:linear-gradient(180deg,var(--craft-soft),var(--craft));
  border-left:1px solid rgba(41,37,28,.18); border-right:1px solid rgba(41,37,28,.18); border-radius:999px; opacity:.55;
}
:root[data-skin="werkbund-2"] .site-header{ background:var(--surface); border-bottom:1px solid var(--line-strong); box-shadow:inset 0 -6px 0 var(--craft-soft); }
:root[data-skin="werkbund-2"] .nav{ height:72px; display:grid; grid-template-columns:2fr 7fr 3fr; gap:0; border-left:1px solid var(--line-strong); }
:root[data-skin="werkbund-2"] .brand{ display:flex; align-items:center; height:72px; padding:0 18px; border-right:1px solid var(--line-strong); font-family:var(--sans); font-weight:700; color:var(--ink); }
:root[data-skin="werkbund-2"] .brand::before{ content:""; width:16px; height:16px; margin-right:10px; background:var(--craft); clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%,28% 50%); }
:root[data-skin="werkbund-2"] .nav-links{ gap:0; height:72px; }
:root[data-skin="werkbund-2"] .nav-links a{ height:72px; display:flex; align-items:center; padding:0 clamp(12px,1.6vw,22px); border-right:1px solid var(--line-strong); color:var(--ink-soft); font-family:var(--sans); font-weight:700; }
:root[data-skin="werkbund-2"] .nav-links a::after{ background:var(--craft); height:3px; bottom:16px; }
:root[data-skin="werkbund-2"] .hero-grid{ grid-template-columns:repeat(12,1fr); gap:0; background:var(--surface); border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong); }
:root[data-skin="werkbund-2"] .hero-grid > :first-child{ grid-column:1 / span 6; padding:clamp(24px,4vw,54px); border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); box-shadow:inset 10px 0 0 var(--craft-soft); }
:root[data-skin="werkbund-2"] .hero-art{ grid-column:7 / -1; border:0; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); border-radius:0; padding:clamp(14px,2.4vw,30px); background:var(--surface); box-shadow:inset 10px 0 0 var(--craft-soft); overflow:visible; }
:root[data-skin="werkbund-2"] .section-head{ display:grid; grid-template-columns:1fr 2fr 1fr; gap:0; background:var(--surface); border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong); }
:root[data-skin="werkbund-2"] .section-head > *{ padding:14px 16px; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
:root[data-skin="werkbund-2"] .section-head h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.035em; color:var(--ink); }
:root[data-skin="werkbund-2"] .section--showcase{ background:var(--surface); border-block:1px solid var(--line-strong); }
:root[data-skin="werkbund-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="werkbund-2"] .eyebrow{ color:var(--accent); font-family:var(--sans); font-weight:800; }
:root[data-skin="werkbund-2"] .link-arrow{ color:var(--accent); font-weight:800; }
:root[data-skin="werkbund-2"] .btn{ border-radius:0; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-family:var(--sans); font-weight:700; box-shadow:inset 7px 0 0 var(--craft-soft); }
:root[data-skin="werkbund-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; max-width:1120px; margin-inline:auto; border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong); }
:root[data-skin="werkbund-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0; border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong); background:var(--surface); }
:root[data-skin="werkbund-2"] .gallery-grid .g-item,
:root[data-skin="werkbund-2"] .home-gallery .g-item{ position:relative; background:linear-gradient(180deg,var(--surface),var(--craft-soft)); border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); padding:clamp(14px,2vw,22px); border-radius:0; overflow:visible; }
:root[data-skin="werkbund-2"] .gallery-grid .g-item::before,
:root[data-skin="werkbund-2"] .home-gallery .g-item::before{ content:""; position:absolute; left:-1px; top:-1px; width:34px; height:18px; background:var(--craft); clip-path:polygon(0 0,100% 0,74% 100%,26% 100%); }
:root[data-skin="werkbund-2"] .gallery-grid .g-item::after,
:root[data-skin="werkbund-2"] .home-gallery .g-item::after{ content:""; position:absolute; right:12px; bottom:12px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:-16px 0 0 var(--craft-soft); }
:root[data-skin="werkbund-2"] .g-media{ padding:8px; background:var(--surface); border:1px solid var(--line); overflow:visible; }
:root[data-skin="werkbund-2"] .g-media img, :root[data-skin="werkbund-2"] .g-media svg{ border:1px solid var(--line-strong); box-shadow:0 12px 22px -22px rgba(41,37,28,.5); }
:root[data-skin="werkbund-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="werkbund-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; color:var(--ink); padding:12px 0 0; }
:root[data-skin="werkbund-2"] .g-title{ font-family:var(--sans); font-weight:700; color:var(--ink); }
:root[data-skin="werkbund-2"] .g-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent); text-transform:uppercase; }
:root[data-skin="werkbund-2"] .site-footer{ background:var(--surface); color:var(--ink); border-top:1px solid var(--line-strong); box-shadow:inset 0 10px 0 var(--craft-soft); }
@media (max-width:900px){
  :root[data-skin="werkbund-2"] .nav{ display:flex; }
  :root[data-skin="werkbund-2"] .hero-grid, :root[data-skin="werkbund-2"] .section-head{ grid-template-columns:1fr; }
  :root[data-skin="werkbund-2"] .hero-grid > :first-child, :root[data-skin="werkbund-2"] .hero-art{ grid-column:auto; }
  :root[data-skin="werkbund-2"] .gallery-grid, :root[data-skin="werkbund-2"] .home-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  :root[data-skin="werkbund-2"] .gallery-grid, :root[data-skin="werkbund-2"] .home-gallery{ grid-template-columns:1fr; }
}


/* ============ rinpa-2 (purpose-first redesign) ============ */
:root[data-skin="rinpa-2"]{
  --bg:#C8A33A; --surface:#D7B85A; --surface-2:#AE8428; --ink:#20170B;
  --ink-soft:#4A3516; --ink-faint:#6F5622; --line:#8D6A1E; --line-strong:#24190C; --accent:#9B2424;
}

body[data-struct="rinpa-2"] #skin-structure{ background:linear-gradient(90deg,#B98F24 0 34%,#D6B95C 34% 68%,#C49A34 68% 100%); }
body[data-struct="rinpa-2"] #skin-structure .skin-structure-layer:nth-child(1){
  top:-12vh; left:-16vw; width:72vw; height:76vh; border-radius:0 0 80% 0;
  background:radial-gradient(ellipse at 38% 42%, rgba(255,232,142,.48), rgba(213,170,58,.14) 64%, transparent 70%);
}
body[data-struct="rinpa-2"] #skin-structure .skin-structure-layer:nth-child(2){
  top:22vh; right:-10vw; left:auto; width:52vw; height:42vh; border-radius:50%;
  background:radial-gradient(ellipse at 42% 50%, rgba(155,36,36,.42), rgba(155,36,36,.12) 48%, transparent 70%);
}
body[data-struct="rinpa-2"] #skin-structure .skin-structure-layer:nth-child(3){
  top:auto; bottom:0; height:30vh; background:linear-gradient(0deg, rgba(32,23,11,.28), transparent);
}

:root[data-skin="rinpa-2"] .site-header{ background:transparent; border-bottom:2px solid rgba(32,23,11,.38); }
:root[data-skin="rinpa-2"] .nav{ height:86px; justify-content:space-between; }
:root[data-skin="rinpa-2"] .brand{ color:var(--ink); font-family:var(--serif); font-weight:700; }
:root[data-skin="rinpa-2"] .hero-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,6vw,96px); max-width:1180px; align-items:center; }
:root[data-skin="rinpa-2"] .section-head{ text-align:left; max-width:50ch; }
:root[data-skin="rinpa-2"] .btn{ background:var(--ink); color:#F9E7A0; border:1px solid var(--ink); border-radius:0; }
:root[data-skin="rinpa-2"] .site-footer{ background:rgba(32,23,11,.18); border-top:2px solid rgba(32,23,11,.36); }

:root[data-skin="rinpa-2"] .gallery-grid,
:root[data-skin="rinpa-2"] .home-gallery{
  columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(28px,4vw,68px) clamp(18px,3vw,46px);
  max-width:1240px; margin:0 auto; padding:clamp(34px,6vw,98px) clamp(18px,4vw,56px) 0;
}
:root[data-skin="rinpa-2"] .gallery-grid .g-item,
:root[data-skin="rinpa-2"] .home-gallery .g-item{
  grid-column:span 4; margin:0; background:linear-gradient(135deg,var(--surface),var(--surface-2));
  border-radius:0; overflow:visible; padding:clamp(10px,1.4vw,18px); border:2px solid var(--ink);
}
:root[data-skin="rinpa-2"] .gallery-grid .g-item:nth-child(6n+1),
:root[data-skin="rinpa-2"] .home-gallery .g-item:nth-child(6n+1){ grid-column:1 / span 6; }
:root[data-skin="rinpa-2"] .gallery-grid .g-item:nth-child(6n+2),
:root[data-skin="rinpa-2"] .home-gallery .g-item:nth-child(6n+2){ grid-column:8 / span 5; margin-top:clamp(36px,6vw,92px); }
:root[data-skin="rinpa-2"] .gallery-grid .g-item:nth-child(6n+3),
:root[data-skin="rinpa-2"] .home-gallery .g-item:nth-child(6n+3){ grid-column:3 / span 4; }
:root[data-skin="rinpa-2"] .gallery-grid .g-item:nth-child(6n+4),
:root[data-skin="rinpa-2"] .home-gallery .g-item:nth-child(6n+4){ grid-column:7 / span 6; }
:root[data-skin="rinpa-2"] .gallery-grid .g-item:nth-child(6n+5),
:root[data-skin="rinpa-2"] .home-gallery .g-item:nth-child(6n+5){ grid-column:1 / span 5; margin-top:clamp(24px,4vw,70px); }

:root[data-skin="rinpa-2"] .g-media img,
:root[data-skin="rinpa-2"] .g-media svg{ border:2px solid var(--ink) !important; box-shadow:0 28px 54px -30px rgba(32,23,11,.72); }
:root[data-skin="rinpa-2"] .g-item:hover .g-media img,
:root[data-skin="rinpa-2"] .g-item:hover .g-media svg{ transform:none; }

:root[data-skin="rinpa-2"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; color:var(--ink); display:block; padding:14px 2px 0; }
:root[data-skin="rinpa-2"] .g-title{ font-family:var(--serif); font-weight:700; font-size:clamp(16px,1.6vw,22px); letter-spacing:.025em; color:var(--ink); }
:root[data-skin="rinpa-2"] .g-meta{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:7px; }

:root[data-skin="rinpa-2"] .section--showcase{ background:transparent; border-block:2px solid rgba(32,23,11,.28); }
:root[data-skin="rinpa-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="rinpa-2"] .section--showcase .eyebrow{ color:var(--accent); }
:root[data-skin="rinpa-2"] .section--showcase .link-arrow{ color:var(--ink); }

@media (max-width:820px){
  :root[data-skin="rinpa-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="rinpa-2"] .gallery-grid,
  :root[data-skin="rinpa-2"] .home-gallery{ grid-template-columns:1fr; }
  :root[data-skin="rinpa-2"] .gallery-grid .g-item,
  :root[data-skin="rinpa-2"] .home-gallery .g-item,
  :root[data-skin="rinpa-2"] .gallery-grid .g-item:nth-child(n),
  :root[data-skin="rinpa-2"] .home-gallery .g-item:nth-child(n){ grid-column:auto; margin-top:0; }
}


/* ============ shibui-2 (purpose-first redesign) ============ */
:root[data-skin="shibui-2"]{
  --bg:#D8D3C7; --surface:#E3DED2; --surface-2:#CFC8B8; --ink:#2F332B;
  --ink-soft:#5B5F52; --ink-faint:#85897B; --line:#C2BBAA; --line-strong:#9F9988; --accent:#59634D;
}

body[data-struct="shibui-2"] #skin-structure{ background:#D8D3C7; }
body[data-struct="shibui-2"] #skin-structure .skin-structure-layer:nth-child(1){
  inset:0; background:linear-gradient(115deg, rgba(238,235,226,.70) 0 18%, rgba(238,235,226,.22) 42%, transparent 66%);
}
body[data-struct="shibui-2"] #skin-structure .skin-structure-layer:nth-child(2){
  inset:auto 8vw 18vh auto; width:min(28vw,360px); height:62vh;
  background:linear-gradient(180deg, transparent, rgba(89,99,77,.08) 18%, rgba(89,99,77,.06) 82%, transparent);
}

:root[data-skin="shibui-2"] .site-header{ background:transparent; border-bottom:1px solid rgba(47,51,43,.08); }
:root[data-skin="shibui-2"] .nav{ height:92px; justify-content:flex-start; gap:clamp(36px,8vw,120px); }
:root[data-skin="shibui-2"] .brand{ color:var(--ink); letter-spacing:.08em; }
:root[data-skin="shibui-2"] .hero-grid{ grid-template-columns:minmax(0,5fr) minmax(0,4fr); gap:clamp(42px,8vw,120px); max-width:1040px; align-items:end; }
:root[data-skin="shibui-2"] .section-head{ max-width:42ch; text-align:left; }
:root[data-skin="shibui-2"] .btn{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); border-radius:0; }
:root[data-skin="shibui-2"] .site-footer{ background:transparent; border-top:1px solid rgba(47,51,43,.10); }

:root[data-skin="shibui-2"] .gallery-grid,
:root[data-skin="shibui-2"] .home-gallery{ columns:unset; display:block; max-width:1060px; margin:0 auto; padding:clamp(30px,6vw,96px) clamp(18px,4vw,48px) 0; }

:root[data-skin="shibui-2"] .gallery-grid .g-item,
:root[data-skin="shibui-2"] .home-gallery .g-item{
  position:relative; width:min(72%,720px); margin:0 0 clamp(54px,8vw,126px);
  background:var(--surface); border:1px solid var(--line); border-radius:0; overflow:visible;
  padding:clamp(8px,1.2vw,16px); box-shadow:inset 0 -18px 0 rgba(207,200,184,.28);
}
:root[data-skin="shibui-2"] .gallery-grid .g-item::before,
:root[data-skin="shibui-2"] .home-gallery .g-item::before{
  content:""; position:absolute; inset:clamp(12px,1.6vw,22px); border:1px solid rgba(159,153,136,.28); pointer-events:none;
}
:root[data-skin="shibui-2"] .gallery-grid .g-item:nth-child(3n+2),
:root[data-skin="shibui-2"] .home-gallery .g-item:nth-child(3n+2){ width:min(54%,560px); margin-left:auto; }
:root[data-skin="shibui-2"] .gallery-grid .g-item:nth-child(3n),
:root[data-skin="shibui-2"] .home-gallery .g-item:nth-child(3n){ width:min(64%,660px); margin-left:12%; }

:root[data-skin="shibui-2"] .g-media img,
:root[data-skin="shibui-2"] .g-media svg{ border:none !important; box-shadow:none; }
:root[data-skin="shibui-2"] .g-item:hover .g-media img,
:root[data-skin="shibui-2"] .g-item:hover .g-media svg{ transform:none; }

:root[data-skin="shibui-2"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; color:var(--ink); display:block; padding:clamp(14px,2vw,24px) 2px 0; }
:root[data-skin="shibui-2"] .g-title{ font-family:var(--serif); font-weight:400; font-size:clamp(14px,1.2vw,17px); letter-spacing:.035em; color:var(--ink-soft); }
:root[data-skin="shibui-2"] .g-meta{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px; }

:root[data-skin="shibui-2"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="shibui-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="shibui-2"] .section--showcase .eyebrow{ color:var(--accent); }
:root[data-skin="shibui-2"] .section--showcase .link-arrow{ color:var(--ink); }

@media (max-width:760px){
  :root[data-skin="shibui-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="shibui-2"] .gallery-grid .g-item,
  :root[data-skin="shibui-2"] .home-gallery .g-item,
  :root[data-skin="shibui-2"] .gallery-grid .g-item:nth-child(3n+2),
  :root[data-skin="shibui-2"] .home-gallery .g-item:nth-child(3n+2),
  :root[data-skin="shibui-2"] .gallery-grid .g-item:nth-child(3n),
  :root[data-skin="shibui-2"] .home-gallery .g-item:nth-child(3n){ width:100%; margin-left:0; margin-right:0; }
}


/* ============ shizen-2 (purpose-first redesign) ============ */
:root[data-skin="shizen-2"]{
  --bg:#F0EBDD; --surface:#F6F2E8; --surface-2:#E5DCC9; --ink:#30362B;
  --ink-soft:#59624F; --ink-faint:#858B76; --line:#D6CEBA; --line-strong:#BDB39B; --accent:#5D704E;
}

body[data-struct="shizen-2"] #skin-structure{ background:linear-gradient(180deg,#F3EFE4 0%,#EFE8D8 62%,#E7DDC8 100%); }
body[data-struct="shizen-2"] #skin-structure .skin-structure-layer:nth-child(1){
  inset:0; background:linear-gradient(120deg, transparent 0 18%, rgba(255,255,255,.22) 42%, transparent 78%);
}

:root[data-skin="shizen-2"] .site-header{ background:transparent; border-bottom:1px solid rgba(48,54,43,.10); }
:root[data-skin="shizen-2"] .nav{ height:88px; justify-content:flex-start; gap:clamp(32px,7vw,110px); }
:root[data-skin="shizen-2"] .brand{ color:var(--ink); font-weight:500; letter-spacing:.04em; }
:root[data-skin="shizen-2"] .hero-grid{ grid-template-columns:minmax(0,4fr) minmax(0,5fr); gap:clamp(36px,8vw,120px); max-width:1100px; align-items:end; }
:root[data-skin="shizen-2"] .section-head{ max-width:44ch; text-align:left; margin-left:clamp(0px,5vw,72px); }
:root[data-skin="shizen-2"] .btn{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); border-radius:0; }
:root[data-skin="shizen-2"] .site-footer{ background:transparent; border-top:1px solid rgba(48,54,43,.12); }

:root[data-skin="shizen-2"] .gallery-grid,
:root[data-skin="shizen-2"] .home-gallery{ columns:unset; display:block; max-width:1120px; margin:0 auto; padding:clamp(28px,5vw,86px) clamp(18px,4vw,52px) 0; }

:root[data-skin="shizen-2"] .gallery-grid .g-item,
:root[data-skin="shizen-2"] .home-gallery .g-item{
  width:min(66%,700px); margin:0 0 clamp(48px,7vw,116px); background:transparent;
  border-radius:0; overflow:visible; border-top:1px solid var(--line);
  padding-top:clamp(12px,1.6vw,22px);
}
:root[data-skin="shizen-2"] .gallery-grid .g-item:nth-child(4n+1),
:root[data-skin="shizen-2"] .home-gallery .g-item:nth-child(4n+1){ width:min(72%,760px); margin-left:4%; }
:root[data-skin="shizen-2"] .gallery-grid .g-item:nth-child(4n+2),
:root[data-skin="shizen-2"] .home-gallery .g-item:nth-child(4n+2){ width:min(54%,560px); margin-left:auto; }
:root[data-skin="shizen-2"] .gallery-grid .g-item:nth-child(4n+3),
:root[data-skin="shizen-2"] .home-gallery .g-item:nth-child(4n+3){ width:min(62%,640px); margin-left:18%; margin-bottom:clamp(62px,9vw,144px); }

:root[data-skin="shizen-2"] .g-media img,
:root[data-skin="shizen-2"] .g-media svg{ border:none !important; box-shadow:0 1px 0 var(--line); }
:root[data-skin="shizen-2"] .g-item:hover .g-media img,
:root[data-skin="shizen-2"] .g-item:hover .g-media svg{ transform:none; }

:root[data-skin="shizen-2"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; color:var(--ink); display:block; padding:12px 0 0; }
:root[data-skin="shizen-2"] .g-title{ font-family:var(--serif); font-weight:400; font-size:clamp(14px,1.2vw,17px); letter-spacing:.01em; color:var(--ink); }
:root[data-skin="shizen-2"] .g-meta{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:6px; }

:root[data-skin="shizen-2"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="shizen-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="shizen-2"] .section--showcase .eyebrow{ color:var(--accent); }
:root[data-skin="shizen-2"] .section--showcase .link-arrow{ color:var(--ink); }

@media (max-width:760px){
  :root[data-skin="shizen-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="shizen-2"] .gallery-grid .g-item,
  :root[data-skin="shizen-2"] .home-gallery .g-item,
  :root[data-skin="shizen-2"] .gallery-grid .g-item:nth-child(n),
  :root[data-skin="shizen-2"] .home-gallery .g-item:nth-child(n){ width:100%; margin-left:0; margin-right:0; }
}

/* Checkout address and destination-tax quote */
html body .checkout-dialog{
  width:min(720px,calc(100vw - 28px)); max-height:calc(100vh - 28px); margin:auto;
  padding:0; overflow:auto; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.28);
}
html body .checkout-dialog::backdrop{ background:rgba(0,0,0,.58); backdrop-filter:blur(3px); }
.checkout-address-form{ padding:clamp(20px,4vw,38px); }
.checkout-dialog-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.checkout-dialog-head h2{ margin:4px 0 0; font-size:clamp(24px,4vw,38px); }
.checkout-address-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.checkout-field{ display:grid; gap:7px; color:var(--ink-soft); font-size:12px; font-weight:700; letter-spacing:.04em; }
.checkout-field span{ color:var(--ink-faint); font-weight:400; }
.checkout-field--wide{ grid-column:1 / -1; }
.checkout-field input,.checkout-field select{
  width:100%; min-height:44px; padding:10px 12px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:8px; font:inherit; font-size:15px; letter-spacing:0;
}
.checkout-field input:focus,.checkout-field select:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.checkout-address-error{ min-height:22px; margin-top:16px; color:#b42318; font-size:14px; }
.checkout-quote-summary{ margin-top:14px; padding:18px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.checkout-quote-summary > div{ display:flex; justify-content:space-between; gap:20px; padding:5px 0; }
.checkout-quote-summary .checkout-quote-total{ margin-top:8px; padding-top:13px; border-top:1px solid var(--line-strong); font-size:18px; }
.checkout-standardized,.checkout-tax-note{ margin:0 0 12px; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.checkout-tax-note{ margin:12px 0 0; }
.checkout-address-confirmation{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:14px; line-height:1.45; }
.checkout-address-confirmation input{ margin-top:3px; }
.checkout-dialog-actions{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:22px; }
.checkout-dialog [hidden]{ display:none !important; }

@media (max-width:620px){
  .checkout-address-grid{ grid-template-columns:1fr; }
  .checkout-field--wide{ grid-column:auto; }
  .checkout-dialog-actions .btn{ flex:1 1 100%; }
}


/* ============ tanaka-2 (purpose-first redesign) ============ */
:root[data-skin="tanaka-2"]{
  --bg:#F1E7D4; --surface:#FFFDF7; --surface-2:#E7D7BA; --ink:#111111;
  --ink-soft:#3C3932; --ink-faint:#7A7264; --line:#111111; --line-strong:#111111; --accent:#D0182D;
}

body[data-struct="tanaka-2"] #skin-structure{ background:#F1E7D4; }
body[data-struct="tanaka-2"] #skin-structure .skin-structure-layer:nth-child(1){
  top:6vh; left:8vw; width:min(42vw,520px); height:min(42vw,520px); border-radius:50%; background:rgba(208,24,45,.92);
}
body[data-struct="tanaka-2"] #skin-structure .skin-structure-layer:nth-child(2){
  top:18vh; right:10vw; left:auto; width:min(24vw,280px); height:min(24vw,280px); border:10px solid rgba(17,17,17,.88);
  border-radius:50%; box-shadow:inset 0 0 0 34px #F1E7D4, inset 0 0 0 44px rgba(17,17,17,.88);
}
body[data-struct="tanaka-2"] #skin-structure .skin-structure-layer:nth-child(3){
  background:linear-gradient(180deg, transparent 0 66%, rgba(17,17,17,.92) 66%, rgba(17,17,17,.92) calc(66% + 18px), transparent calc(66% + 18px));
}

:root[data-skin="tanaka-2"] .site-header{ background:transparent; border-bottom:4px solid var(--ink); }
:root[data-skin="tanaka-2"] .nav{ height:82px; justify-content:space-between; }
:root[data-skin="tanaka-2"] .brand{ color:var(--ink); font-family:var(--sans); font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
:root[data-skin="tanaka-2"] .hero-grid{ grid-template-columns:minmax(0,4fr) minmax(0,5fr); gap:0; max-width:1120px; border:4px solid var(--ink); background:var(--surface); }
:root[data-skin="tanaka-2"] .section-head{ text-align:left; border-left:18px solid var(--accent); padding-left:18px; max-width:56ch; }
:root[data-skin="tanaka-2"] .btn{ background:var(--accent); color:#FFFDF7; border:4px solid var(--ink); border-radius:0; font-family:var(--sans); font-weight:900; text-transform:uppercase; }
:root[data-skin="tanaka-2"] .site-footer{ background:var(--ink); color:#FFFDF7; border-top:0; }

:root[data-skin="tanaka-2"] .gallery-grid,
:root[data-skin="tanaka-2"] .home-gallery{
  columns:unset; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:14px;
  max-width:1180px; margin:0 auto; padding:clamp(28px,5vw,84px) clamp(16px,4vw,48px) 0;
}
:root[data-skin="tanaka-2"] .gallery-grid .g-item,
:root[data-skin="tanaka-2"] .home-gallery .g-item{
  position:relative; grid-column:span 3; margin:0; background:var(--surface); border:4px solid var(--ink);
  border-radius:0; overflow:hidden; padding:clamp(12px,1.6vw,22px);
}
:root[data-skin="tanaka-2"] .gallery-grid .g-item::before,
:root[data-skin="tanaka-2"] .home-gallery .g-item::before{
  content:""; position:absolute; top:-34px; right:-34px; width:96px; height:96px; border-radius:50%; background:var(--accent); z-index:0;
}
:root[data-skin="tanaka-2"] .gallery-grid .g-item:nth-child(5n+1),
:root[data-skin="tanaka-2"] .home-gallery .g-item:nth-child(5n+1){ grid-column:span 5; }
:root[data-skin="tanaka-2"] .gallery-grid .g-item:nth-child(5n+3),
:root[data-skin="tanaka-2"] .home-gallery .g-item:nth-child(5n+3){ grid-column:2 / span 4; }
:root[data-skin="tanaka-2"] .g-media,
:root[data-skin="tanaka-2"] .g-overlay{ position:relative; z-index:1; }

:root[data-skin="tanaka-2"] .g-media img,
:root[data-skin="tanaka-2"] .g-media svg{ border:4px solid var(--ink) !important; box-shadow:none; }
:root[data-skin="tanaka-2"] .g-item:hover .g-media img,
:root[data-skin="tanaka-2"] .g-item:hover .g-media svg{ transform:none; }

:root[data-skin="tanaka-2"] .g-overlay{ position:static; inset:auto; opacity:1; background:var(--surface); color:var(--ink); display:block; padding:12px 0 0; border-top:4px solid var(--ink); margin-top:12px; }
:root[data-skin="tanaka-2"] .g-title{ font-family:var(--sans); font-weight:900; font-size:clamp(15px,1.5vw,21px); text-transform:uppercase; letter-spacing:.01em; color:var(--ink); }
:root[data-skin="tanaka-2"] .g-title::before{ content:""; display:inline-block; width:14px; height:14px; border-radius:50%; background:var(--accent); margin-right:10px; vertical-align:-1px; }
:root[data-skin="tanaka-2"] .g-meta{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }

:root[data-skin="tanaka-2"] .section--showcase{ background:transparent; border-block:4px solid var(--ink); }
:root[data-skin="tanaka-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="tanaka-2"] .section--showcase .eyebrow{ color:var(--accent); }
:root[data-skin="tanaka-2"] .section--showcase .link-arrow{ color:var(--ink); }

@media (max-width:820px){
  :root[data-skin="tanaka-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="tanaka-2"] .gallery-grid,
  :root[data-skin="tanaka-2"] .home-gallery{ grid-template-columns:1fr; }
  :root[data-skin="tanaka-2"] .gallery-grid .g-item,
  :root[data-skin="tanaka-2"] .home-gallery .g-item,
  :root[data-skin="tanaka-2"] .gallery-grid .g-item:nth-child(n),
  :root[data-skin="tanaka-2"] .home-gallery .g-item:nth-child(n){ grid-column:auto; }
}


/* ============ rand-2 (purpose-first redesign) ============ */
:root[data-skin="rand-2"]{
  --bg:#F5F1E8; --surface:#FFFFFF; --surface-2:#EEE8DC; --ink:#171717; --ink-soft:#4B4A46;
  --ink-faint:#858178; --line:#DED7CA; --line-strong:#BEB5A6; --accent:#E32920;
  --rand-blue:#154BA0; --rand-yellow:#F0B51F;
}
body[data-struct="rand-2"] #skin-structure{ background:var(--bg); }
body[data-struct="rand-2"] .skin-structure-layer:nth-child(1){ top:12vh; right:9vw; width:min(22vw,260px); height:min(22vw,260px); background:var(--ink); opacity:.08; }
body[data-struct="rand-2"] .skin-structure-layer:nth-child(2){ top:18vh; right:calc(9vw - 34px); width:min(9vw,96px); height:min(9vw,96px); border-radius:50%; background:var(--accent); opacity:.78; }
body[data-struct="rand-2"] .skin-structure-layer:nth-child(3){ bottom:12vh; left:8vw; width:min(34vw,430px); height:22px; border-radius:999px; background:var(--rand-yellow); opacity:.42; }
:root[data-skin="rand-2"] .site-header{ background:color-mix(in srgb,var(--bg) 94%,transparent); border-bottom:0; box-shadow:inset 0 -10px 0 var(--ink); }
:root[data-skin="rand-2"] .nav{ height:76px; gap:clamp(18px,3vw,42px); }
:root[data-skin="rand-2"] .brand{ position:relative; display:flex; align-items:center; gap:12px; font-family:var(--sans); font-weight:900; letter-spacing:-.055em; color:var(--ink); }
:root[data-skin="rand-2"] .brand::before{ content:""; width:30px; height:30px; background:var(--ink); }
:root[data-skin="rand-2"] .brand::after{ content:""; position:absolute; left:20px; top:50%; width:16px; height:16px; border-radius:50%; background:var(--accent); transform:translateY(-50%); }
:root[data-skin="rand-2"] .nav-links{ gap:12px; }
:root[data-skin="rand-2"] .nav-links a{ color:var(--ink); font-weight:800; padding:8px 12px; border:2px solid transparent; }
:root[data-skin="rand-2"] .nav-links a::after{ height:10px; bottom:2px; background:var(--rand-yellow); border-radius:999px; z-index:-1; }
:root[data-skin="rand-2"] .hero-grid{ grid-template-columns:minmax(0,5fr) minmax(280px,4fr); gap:clamp(32px,6vw,86px); align-items:center; }
:root[data-skin="rand-2"] .hero h1{ font-family:var(--sans); font-weight:900; line-height:.88; letter-spacing:-.075em; max-width:9ch; }
:root[data-skin="rand-2"] .hero h1::after{ content:""; display:inline-block; width:.38em; height:.38em; margin-left:.08em; border-radius:50%; background:var(--accent); box-shadow:-.42em 0 0 var(--ink); }
:root[data-skin="rand-2"] .hero-art{ border:0; border-radius:0; background:var(--surface); padding:12px; box-shadow:16px 16px 0 var(--rand-yellow), -12px -12px 0 var(--ink); overflow:visible; }
:root[data-skin="rand-2"] .section-head{ position:relative; border-left:20px solid var(--ink); padding-left:18px; }
:root[data-skin="rand-2"] .section-head::after{ content:""; position:absolute; left:8px; top:18px; width:18px; height:18px; border-radius:50%; background:var(--accent); }
:root[data-skin="rand-2"] .section-head h2{ font-family:var(--sans); font-weight:900; letter-spacing:-.055em; color:var(--ink); }
:root[data-skin="rand-2"] .section--showcase{ background:linear-gradient(90deg,var(--surface) 0 calc(100% - 24px),var(--ink) calc(100% - 24px)); border-block:0; }
:root[data-skin="rand-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="rand-2"] .eyebrow{ color:var(--accent); font-family:var(--mono); font-weight:800; letter-spacing:.18em; }
:root[data-skin="rand-2"] .link-arrow{ color:var(--ink); font-weight:900; text-decoration-color:var(--rand-yellow); text-decoration-thickness:4px; }
:root[data-skin="rand-2"] .btn{ border:2px solid var(--ink); border-radius:999px; background:var(--accent); color:#fff; font-weight:900; box-shadow:inset -12px 0 0 var(--rand-blue); }
:root[data-skin="rand-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,42px); max-width:1080px; margin-inline:auto; }
:root[data-skin="rand-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,38px); padding:clamp(18px,3vw,36px); }
:root[data-skin="rand-2"] .gallery-grid .g-item,
:root[data-skin="rand-2"] .home-gallery .g-item{ position:relative; background:var(--surface); border-radius:0; overflow:visible; padding:12px; box-shadow:0 1px 0 var(--line-strong); }
:root[data-skin="rand-2"] .gallery-grid .g-item::before,
:root[data-skin="rand-2"] .home-gallery .g-item::before{ content:""; position:absolute; left:-10px; top:-10px; width:42px; height:42px; background:var(--ink); z-index:2; }
:root[data-skin="rand-2"] .gallery-grid .g-item::after,
:root[data-skin="rand-2"] .home-gallery .g-item::after{ content:""; position:absolute; left:22px; top:4px; width:20px; height:20px; border-radius:50%; background:var(--accent); z-index:3; }
:root[data-skin="rand-2"] .gallery-grid .g-item:nth-child(3n+2)::after,
:root[data-skin="rand-2"] .home-gallery .g-item:nth-child(3n+2)::after{ background:var(--rand-blue); }
:root[data-skin="rand-2"] .gallery-grid .g-item:nth-child(3n)::after,
:root[data-skin="rand-2"] .home-gallery .g-item:nth-child(3n)::after{ background:var(--rand-yellow); }
:root[data-skin="rand-2"] .g-media img, :root[data-skin="rand-2"] .g-media svg{ border:0; box-shadow:0 18px 34px -28px rgba(23,23,23,.5); }
:root[data-skin="rand-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="rand-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; color:var(--ink); padding:14px 2px 0; }
:root[data-skin="rand-2"] .g-title{ font-family:var(--sans); font-weight:900; letter-spacing:-.035em; color:var(--ink); }
:root[data-skin="rand-2"] .g-title::after{ content:""; display:inline-block; width:.48em; height:.48em; margin-left:.3em; border-radius:50%; background:var(--accent); vertical-align:baseline; }
:root[data-skin="rand-2"] .g-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; }
:root[data-skin="rand-2"] .site-footer{ background:var(--surface); color:var(--ink); border-top:18px solid var(--ink); box-shadow:inset 0 10px 0 var(--accent); }
@media (max-width:860px){
  :root[data-skin="rand-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="rand-2"] .gallery-grid, :root[data-skin="rand-2"] .home-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  :root[data-skin="rand-2"] .nav{ height:auto; min-height:70px; }
  :root[data-skin="rand-2"] .gallery-grid, :root[data-skin="rand-2"] .home-gallery{ grid-template-columns:1fr; }
}


/* ============ agnes-martin-2 (purpose-first redesign) ============ */
:root[data-skin="agnes-martin-2"]{
  --bg:#FFFDF8; --surface:#FFFEFA; --surface-2:#F7F4EC; --ink:#3C3934; --ink-soft:#706B62;
  --ink-faint:#B2ACA0; --line:#ECE8DE; --line-strong:#D8D2C5; --accent:#9A9488; --accent-deep:#6C675E; --accent-soft:#F4F0E7;
}
body[data-struct="agnes-martin-2"] #skin-structure{ background:linear-gradient(180deg,#FFFDF8 0%,#F8F5ED 100%); }
body[data-struct="agnes-martin-2"] .skin-structure-layer:nth-child(1){ top:14vh; left:13vw; width:1px; height:70vh; background:linear-gradient(transparent,rgba(126,120,108,.22),transparent); transform:rotate(.35deg); }
body[data-struct="agnes-martin-2"] .skin-structure-layer:nth-child(2){ top:38vh; left:8vw; right:10vw; height:1px; background:linear-gradient(90deg,transparent,rgba(126,120,108,.18),transparent); transform:rotate(-.18deg); }
body[data-struct="agnes-martin-2"] .skin-structure-layer:nth-child(3){ top:64vh; left:18vw; right:20vw; height:1px; background:linear-gradient(90deg,transparent,rgba(126,120,108,.14),transparent); transform:rotate(.22deg); }
body[data-struct="agnes-martin-2"] .skin-structure-layer:nth-child(4){ top:8vh; bottom:12vh; left:58vw; width:1px; background:linear-gradient(transparent,rgba(126,120,108,.12),transparent); transform:rotate(-.28deg); }

:root[data-skin="agnes-martin-2"] .site-header{ background:transparent; border-bottom:none; }
:root[data-skin="agnes-martin-2"] .nav{ height:110px; justify-content:center; gap:clamp(34px,7vw,112px); }
:root[data-skin="agnes-martin-2"] .brand{ font-family:var(--sans); font-weight:300; text-transform:lowercase; letter-spacing:.18em; color:var(--ink-soft); }
:root[data-skin="agnes-martin-2"] .btn{ border-radius:0; background:transparent; border:1px solid var(--line-strong); color:var(--ink-soft); box-shadow:none; font-weight:300; text-transform:lowercase; letter-spacing:.12em; }
:root[data-skin="agnes-martin-2"] .hero{ padding-block:clamp(140px,22vw,310px) clamp(90px,14vw,190px); }
:root[data-skin="agnes-martin-2"] .hero-grid{ grid-template-columns:1fr; max-width:760px; margin:0 auto; text-align:center; gap:clamp(50px,8vw,120px); }
:root[data-skin="agnes-martin-2"] .section-head{ max-width:780px; margin-inline:auto; justify-content:center; text-align:center; }
:root[data-skin="agnes-martin-2"] .section-head h2{ font-family:var(--sans); font-weight:300; text-transform:lowercase; letter-spacing:.08em; color:var(--ink-soft); }
:root[data-skin="agnes-martin-2"] .eyebrow{ color:var(--ink-faint); letter-spacing:.3em; text-transform:lowercase; }
:root[data-skin="agnes-martin-2"] .link-arrow{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line-strong); font-weight:300; }
:root[data-skin="agnes-martin-2"] .section--showcase{ background:transparent; border-block:none; padding-block:clamp(120px,20vw,280px); }
:root[data-skin="agnes-martin-2"] .site-footer{ background:transparent; border-top:1px solid rgba(126,120,108,.16); color:var(--ink-faint); margin-top:clamp(140px,22vw,300px); }

:root[data-skin="agnes-martin-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); row-gap:clamp(140px,18vw,270px); max-width:1180px; margin:0 auto; padding-top:clamp(100px,15vw,230px); }
:root[data-skin="agnes-martin-2"] .gallery-grid .g-item{ grid-column:2 / span 6; margin:0; padding:clamp(36px,5vw,76px) 0; border-top:1px solid rgba(126,120,108,.20); border-bottom:1px solid rgba(126,120,108,.12); background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="agnes-martin-2"] .gallery-grid .g-item:nth-child(3n+2){ grid-column:1 / span 6; transform:translateX(1.2vw); }
:root[data-skin="agnes-martin-2"] .gallery-grid .g-item:nth-child(3n){ grid-column:3 / span 5; transform:translateX(-.8vw); }
:root[data-skin="agnes-martin-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); row-gap:clamp(110px,16vw,230px); max-width:1080px; margin:0 auto; padding:clamp(90px,14vw,210px) clamp(20px,4vw,60px) 0; }
:root[data-skin="agnes-martin-2"] .home-gallery .g-item{ grid-column:2 / span 6; margin:0; padding:clamp(30px,4vw,60px) 0; border-top:1px solid rgba(126,120,108,.18); border-bottom:1px solid rgba(126,120,108,.10); background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="agnes-martin-2"] .home-gallery .g-item:nth-child(even){ grid-column:3 / span 5; }
:root[data-skin="agnes-martin-2"] .g-media{ background:transparent; border:none; border-radius:0; overflow:visible; padding:0; }
:root[data-skin="agnes-martin-2"] .g-media img, :root[data-skin="agnes-martin-2"] .g-media svg{ border:1px solid rgba(126,120,108,.24); box-shadow:0 0 0 14px rgba(255,255,255,.24),0 18px 70px -54px rgba(60,57,52,.28); }
:root[data-skin="agnes-martin-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="agnes-martin-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; padding:clamp(22px,3vw,44px) 0 0; text-align:center; color:var(--ink-soft); }
:root[data-skin="agnes-martin-2"] .g-title{ font-family:var(--sans); font-weight:300; text-transform:lowercase; letter-spacing:.18em; font-size:clamp(12px,1vw,15px); color:var(--ink-soft); }
:root[data-skin="agnes-martin-2"] .g-meta{ font-family:var(--mono); font-weight:300; color:var(--ink-faint); letter-spacing:.22em; text-transform:lowercase; }

@media (max-width:820px){
  :root[data-skin="agnes-martin-2"] .nav{ height:84px; gap:24px; }
  :root[data-skin="agnes-martin-2"] .gallery-grid,
  :root[data-skin="agnes-martin-2"] .home-gallery{ display:block; max-width:680px; }
  :root[data-skin="agnes-martin-2"] .gallery-grid .g-item:nth-child(n),
  :root[data-skin="agnes-martin-2"] .home-gallery .g-item:nth-child(n){ margin:0 0 clamp(90px,18vw,150px); transform:none; }
  body[data-struct="agnes-martin-2"] .skin-structure-layer:nth-child(1){ left:8vw; }
  body[data-struct="agnes-martin-2"] .skin-structure-layer:nth-child(4){ left:72vw; }
}


/* ============ malevich-2 (purpose-first redesign) ============ */
:root[data-skin="malevich-2"]{
  --bg:#FEFDF8; --surface:#FFFFFF; --surface-2:#F7F5EE; --ink:#161412; --ink-soft:#3F3B34;
  --ink-faint:#8D887C; --line:#EEEAE0; --line-strong:#D5D0C2; --accent:#C82017; --accent-deep:#0D3F8F; --accent-soft:#F6F2E8;
}
body[data-struct="malevich-2"] #skin-structure{ background:#FEFDF8; }
body[data-struct="malevich-2"] .skin-structure-layer:nth-child(1){ top:16vh; left:72vw; width:min(13vw,150px); height:min(13vw,150px); background:#15130F; transform:rotate(-11deg); }
body[data-struct="malevich-2"] .skin-structure-layer:nth-child(2){ top:55vh; left:8vw; width:min(24vw,300px); height:min(4vw,44px); background:#C82017; transform:rotate(18deg); }
body[data-struct="malevich-2"] .skin-structure-layer:nth-child(3){ top:78vh; right:18vw; width:min(18vw,220px); height:min(3vw,34px); background:#0D3F8F; transform:rotate(-27deg); }
body[data-struct="malevich-2"] .skin-structure-layer:nth-child(4){ top:34vh; left:36vw; width:min(30vw,360px); height:2px; background:#15130F; transform:rotate(-16deg); }

:root[data-skin="malevich-2"] .site-header{ background:transparent; border-bottom:none; box-shadow:none; }
:root[data-skin="malevich-2"] .nav{ height:120px; justify-content:space-between; }
:root[data-skin="malevich-2"] .brand{ font-family:var(--sans); font-weight:500; letter-spacing:.02em; color:var(--ink); }
:root[data-skin="malevich-2"] .btn{ border-radius:0; background:transparent; border:1px solid var(--ink); color:var(--ink); box-shadow:none; }
:root[data-skin="malevich-2"] .hero{ padding-block:clamp(120px,18vw,260px); }
:root[data-skin="malevich-2"] .hero-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:0; align-items:start; min-height:52vh; }
:root[data-skin="malevich-2"] .hero-grid > :first-child{ grid-column:2 / span 5; }
:root[data-skin="malevich-2"] .hero-grid > :last-child{ grid-column:8 / span 4; margin-top:clamp(80px,12vw,170px); }
:root[data-skin="malevich-2"] .section-head{ max-width:1180px; margin-inline:auto; align-items:flex-start; }
:root[data-skin="malevich-2"] .section-head h2{ font-family:var(--sans); font-weight:400; color:var(--ink); letter-spacing:0; }
:root[data-skin="malevich-2"] .eyebrow{ color:var(--accent); letter-spacing:.18em; }
:root[data-skin="malevich-2"] .link-arrow{ color:var(--ink); text-decoration:none; }
:root[data-skin="malevich-2"] .section--showcase{ background:transparent; border-block:none; padding-block:clamp(90px,16vw,240px); }
:root[data-skin="malevich-2"] .site-footer{ background:transparent; border-top:none; color:var(--ink-soft); margin-top:clamp(160px,22vw,320px); }

:root[data-skin="malevich-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(130px,18vw,280px) 0; max-width:1380px; margin:0 auto; padding-block:clamp(120px,18vw,260px); }
:root[data-skin="malevich-2"] .gallery-grid .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="malevich-2"] .gallery-grid .g-item:nth-child(5n+1){ grid-column:2 / span 4; }
:root[data-skin="malevich-2"] .gallery-grid .g-item:nth-child(5n+2){ grid-column:8 / span 3; margin-top:clamp(60px,8vw,140px); }
:root[data-skin="malevich-2"] .gallery-grid .g-item:nth-child(5n+3){ grid-column:5 / span 5; }
:root[data-skin="malevich-2"] .gallery-grid .g-item:nth-child(5n+4){ grid-column:1 / span 3; margin-top:clamp(90px,12vw,180px); }
:root[data-skin="malevich-2"] .gallery-grid .g-item:nth-child(5n){ grid-column:9 / span 4; }
:root[data-skin="malevich-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(100px,15vw,220px) 0; max-width:1240px; margin:0 auto; padding:clamp(100px,15vw,210px) clamp(20px,4vw,60px) 0; }
:root[data-skin="malevich-2"] .home-gallery .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="malevich-2"] .home-gallery .g-item:nth-child(3n+1){ grid-column:2 / span 4; }
:root[data-skin="malevich-2"] .home-gallery .g-item:nth-child(3n+2){ grid-column:8 / span 3; margin-top:clamp(70px,10vw,150px); }
:root[data-skin="malevich-2"] .home-gallery .g-item:nth-child(3n){ grid-column:5 / span 5; }
:root[data-skin="malevich-2"] .g-media{ background:transparent; border:none; border-radius:0; overflow:visible; padding:0; }
:root[data-skin="malevich-2"] .g-media img, :root[data-skin="malevich-2"] .g-media svg{ border:none; box-shadow:0 22px 70px -54px rgba(22,20,18,.5); }
:root[data-skin="malevich-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="malevich-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; padding:18px 0 0; color:var(--ink); }
:root[data-skin="malevich-2"] .g-title{ font-family:var(--sans); font-weight:400; font-size:clamp(13px,1.1vw,16px); letter-spacing:.03em; color:var(--ink); }
:root[data-skin="malevich-2"] .g-meta{ font-family:var(--mono); color:var(--accent); letter-spacing:.12em; }

@media (max-width:860px){
  :root[data-skin="malevich-2"] .nav{ height:84px; }
  :root[data-skin="malevich-2"] .hero-grid,
  :root[data-skin="malevich-2"] .gallery-grid,
  :root[data-skin="malevich-2"] .home-gallery{ display:block; max-width:720px; }
  :root[data-skin="malevich-2"] .hero-grid > :first-child,
  :root[data-skin="malevich-2"] .hero-grid > :last-child,
  :root[data-skin="malevich-2"] .gallery-grid .g-item:nth-child(n),
  :root[data-skin="malevich-2"] .home-gallery .g-item:nth-child(n){ margin:0 0 clamp(78px,16vw,140px); }
  body[data-struct="malevich-2"] .skin-structure-layer:nth-child(1){ left:62vw; }
}


/* ============ cyanotype-2 (purpose-first redesign) ============ */
:root[data-skin="cyanotype-2"]{
  --bg:#0A2E55; --surface:#0E3A68; --surface-2:#082642; --ink:#EAF4FA;
  --ink-soft:#BBD6E9; --ink-faint:#7FA8C8; --line:#2C5F8E; --line-strong:#D8EEF8; --accent:#F1F7FB;
}

body[data-struct="cyanotype-2"] #skin-structure{ background:#0A2E55; }
body[data-struct="cyanotype-2"] #skin-structure .skin-structure-layer:nth-child(1){
  inset:clamp(18px,3vw,44px); border:1px solid rgba(216,238,248,.34);
  box-shadow:inset 0 0 0 clamp(10px,1.8vw,26px) rgba(234,244,250,.035), inset 0 0 90px rgba(234,244,250,.08);
}
body[data-struct="cyanotype-2"] #skin-structure .skin-structure-layer:nth-child(2){
  top:8vh; left:4vw; width:34vw; height:78vh; opacity:.28;
  background:
    linear-gradient(90deg, transparent 48%, rgba(234,244,250,.60) 49%, rgba(234,244,250,.60) 51%, transparent 52%),
    radial-gradient(ellipse at 42% 18%, rgba(234,244,250,.50), transparent 16%),
    radial-gradient(ellipse at 58% 30%, rgba(234,244,250,.42), transparent 15%),
    radial-gradient(ellipse at 38% 44%, rgba(234,244,250,.38), transparent 14%),
    radial-gradient(ellipse at 60% 58%, rgba(234,244,250,.34), transparent 13%);
}
body[data-struct="cyanotype-2"] #skin-structure .skin-structure-layer:nth-child(3){
  right:6vw; top:18vh; left:auto; width:26vw; height:54vh; opacity:.20;
  background:
    linear-gradient(180deg, transparent 0, rgba(234,244,250,.55) 8%, rgba(234,244,250,.55) 92%, transparent 100%),
    radial-gradient(ellipse at 50% 24%, rgba(234,244,250,.58), transparent 18%),
    radial-gradient(ellipse at 50% 48%, rgba(234,244,250,.42), transparent 16%),
    radial-gradient(ellipse at 50% 72%, rgba(234,244,250,.34), transparent 14%);
}

:root[data-skin="cyanotype-2"] .site-header{ background:transparent; border-bottom:1px solid rgba(216,238,248,.28); }
:root[data-skin="cyanotype-2"] .nav{ height:90px; justify-content:space-between; }
:root[data-skin="cyanotype-2"] .brand{ color:var(--ink); font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase; }
:root[data-skin="cyanotype-2"] .hero-grid{ grid-template-columns:minmax(0,5fr) minmax(0,4fr); gap:clamp(34px,7vw,110px); max-width:1120px; align-items:start; }
:root[data-skin="cyanotype-2"] .section-head{ text-align:left; max-width:50ch; border-top:1px solid rgba(216,238,248,.42); padding-top:18px; }
:root[data-skin="cyanotype-2"] .btn{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); border-radius:0; }
:root[data-skin="cyanotype-2"] .site-footer{ background:transparent; border-top:1px solid rgba(216,238,248,.28); }

:root[data-skin="cyanotype-2"] .gallery-grid,
:root[data-skin="cyanotype-2"] .home-gallery{
  columns:unset; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.4vw,56px);
  max-width:1180px; margin:0 auto; padding:clamp(32px,6vw,96px) clamp(18px,4vw,56px) 0; counter-reset:specimen;
}
:root[data-skin="cyanotype-2"] .gallery-grid .g-item,
:root[data-skin="cyanotype-2"] .home-gallery .g-item{
  position:relative; counter-increment:specimen; margin:0; background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid rgba(216,238,248,.40); border-radius:0; overflow:hidden; padding:clamp(14px,2vw,26px);
  box-shadow:inset 0 0 0 10px rgba(234,244,250,.035), 0 24px 54px -34px rgba(0,0,0,.65);
}
:root[data-skin="cyanotype-2"] .gallery-grid .g-item::before,
:root[data-skin="cyanotype-2"] .home-gallery .g-item::before{
  content:"SPECIMEN " counter(specimen, decimal-leading-zero); display:block; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; color:var(--ink-soft); margin-bottom:12px;
}
:root[data-skin="cyanotype-2"] .gallery-grid .g-item::after,
:root[data-skin="cyanotype-2"] .home-gallery .g-item::after{
  content:""; position:absolute; right:10px; top:42px; width:54px; height:130px; opacity:.24; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 47%, var(--accent) 48%, var(--accent) 52%, transparent 53%),
    radial-gradient(ellipse at 32% 24%, var(--accent), transparent 34%),
    radial-gradient(ellipse at 68% 42%, var(--accent), transparent 32%),
    radial-gradient(ellipse at 34% 62%, var(--accent), transparent 30%);
}

:root[data-skin="cyanotype-2"] .g-media{ background:#061F38; padding:clamp(8px,1.2vw,14px); }
:root[data-skin="cyanotype-2"] .g-media img,
:root[data-skin="cyanotype-2"] .g-media svg{ border:1px solid rgba(216,238,248,.36) !important; box-shadow:0 0 0 8px rgba(234,244,250,.04); }
:root[data-skin="cyanotype-2"] .g-item:hover .g-media img,
:root[data-skin="cyanotype-2"] .g-item:hover .g-media svg{ transform:none; }

:root[data-skin="cyanotype-2"] .g-overlay{ position:static; inset:auto; opacity:1; background:none; color:var(--ink); display:block; padding:14px 0 0; border-top:1px solid rgba(216,238,248,.30); margin-top:14px; }
:root[data-skin="cyanotype-2"] .g-title{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(15px,1.3vw,18px); color:var(--ink); }
:root[data-skin="cyanotype-2"] .g-meta{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; }

:root[data-skin="cyanotype-2"] .section--showcase{ background:transparent; border-block:1px solid rgba(216,238,248,.28); }
:root[data-skin="cyanotype-2"] .section--showcase .section-head h2{ color:var(--ink); font-family:var(--serif); font-style:italic; font-weight:400; }
:root[data-skin="cyanotype-2"] .section--showcase .eyebrow{ color:var(--ink-soft); }
:root[data-skin="cyanotype-2"] .section--showcase .link-arrow{ color:var(--ink); }

@media (max-width:820px){
  :root[data-skin="cyanotype-2"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="cyanotype-2"] .gallery-grid,
  :root[data-skin="cyanotype-2"] .home-gallery{ grid-template-columns:1fr; }
}


/* ============ kandinsky-2 (purpose-first redesign) ============ */
/* ===== kandinsky-2 (purpose-first redesign) ===== */
:root[data-skin="kandinsky-2"]{
  --bg:#F6EBCF; --surface:#FFF8E6; --surface-2:#EAD8A8; --ink:#17162A; --ink-soft:#3F3A5A;
  --ink-faint:#8C806C; --line:#D8C99C; --line-strong:#B9A76E; --accent:#C8281C; --accent-deep:#183C93; --accent-soft:#F0D84A;
}
body[data-struct="kandinsky-2"] #skin-structure{ background:#F6EBCF; }
body[data-struct="kandinsky-2"] .skin-structure-layer:nth-child(1){ top:10vh; left:9vw; width:min(18vw,210px); height:min(18vw,210px); background:#F0D84A; clip-path:polygon(50% 0,100% 100%,0 100%); transform:rotate(13deg); }
body[data-struct="kandinsky-2"] .skin-structure-layer:nth-child(2){ top:17vh; right:13vw; width:min(13vw,150px); height:min(13vw,150px); border-radius:50%; background:#183C93; transform:rotate(-8deg); }
body[data-struct="kandinsky-2"] .skin-structure-layer:nth-child(3){ top:46vh; left:57vw; width:min(22vw,280px); height:min(15vw,190px); background:#C8281C; transform:rotate(-11deg); }
body[data-struct="kandinsky-2"] .skin-structure-layer:nth-child(4){ top:33vh; left:13vw; width:min(48vw,620px); height:8px; background:#17162A; transform:rotate(-24deg); }
body[data-struct="kandinsky-2"] .skin-structure-layer:nth-child(5){ top:72vh; right:8vw; width:min(42vw,540px); height:6px; background:#183C93; transform:rotate(18deg); }

:root[data-skin="kandinsky-2"] .site-header{ background:transparent; border-bottom:none; box-shadow:none; }
:root[data-skin="kandinsky-2"] .nav{ height:118px; justify-content:space-between; }
:root[data-skin="kandinsky-2"] .brand{ font-family:var(--sans); font-weight:700; letter-spacing:.04em; color:var(--ink); }
:root[data-skin="kandinsky-2"] .btn{ border-radius:999px; background:#F0D84A; border:2px solid var(--ink); color:var(--ink); box-shadow:10px 10px 0 #C8281C; font-weight:700; }
:root[data-skin="kandinsky-2"] .hero{ padding-block:clamp(120px,18vw,260px) clamp(70px,10vw,150px); }
:root[data-skin="kandinsky-2"] .hero-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:0; align-items:start; min-height:54vh; }
:root[data-skin="kandinsky-2"] .hero-grid > :first-child{ grid-column:2 / span 5; }
:root[data-skin="kandinsky-2"] .hero-grid > :last-child{ grid-column:8 / span 4; margin-top:clamp(70px,10vw,150px); }
:root[data-skin="kandinsky-2"] .section-head{ max-width:1180px; margin-inline:auto; align-items:flex-start; border-left:8px solid #183C93; padding-left:18px; }
:root[data-skin="kandinsky-2"] .section-head h2{ font-family:var(--sans); font-weight:700; color:var(--ink); letter-spacing:-.02em; }
:root[data-skin="kandinsky-2"] .eyebrow{ color:#C8281C; letter-spacing:.2em; }
:root[data-skin="kandinsky-2"] .link-arrow{ color:var(--ink); text-decoration-color:#F0D84A; text-decoration-thickness:4px; }
:root[data-skin="kandinsky-2"] .section--showcase{ background:transparent; border-block:none; padding-block:clamp(90px,15vw,230px); }
:root[data-skin="kandinsky-2"] .site-footer{ background:transparent; border-top:6px solid #17162A; color:var(--ink-soft); margin-top:clamp(120px,18vw,260px); }

:root[data-skin="kandinsky-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(80px,12vw,190px) 0; max-width:1320px; margin:0 auto; padding-block:clamp(90px,14vw,220px); }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item:nth-child(5n+1){ grid-column:2 / span 4; }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item:nth-child(5n+2){ grid-column:8 / span 3; margin-top:clamp(50px,7vw,120px); }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item:nth-child(5n+3){ grid-column:5 / span 5; }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item:nth-child(5n+4){ grid-column:1 / span 3; margin-top:clamp(80px,10vw,160px); }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item:nth-child(5n){ grid-column:9 / span 4; }
:root[data-skin="kandinsky-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(70px,10vw,170px) 0; max-width:1180px; margin:0 auto; padding:clamp(80px,12vw,180px) clamp(20px,4vw,56px) 0; }
:root[data-skin="kandinsky-2"] .home-gallery .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="kandinsky-2"] .home-gallery .g-item:nth-child(3n+1){ grid-column:2 / span 4; }
:root[data-skin="kandinsky-2"] .home-gallery .g-item:nth-child(3n+2){ grid-column:8 / span 3; margin-top:clamp(52px,8vw,130px); }
:root[data-skin="kandinsky-2"] .home-gallery .g-item:nth-child(3n){ grid-column:5 / span 5; }
:root[data-skin="kandinsky-2"] .g-media{ background:#FFF8E6; border:2px solid #17162A; border-radius:0; overflow:visible; padding:16px; box-shadow:14px 14px 0 #F0D84A, -10px -10px 0 #183C93; }
:root[data-skin="kandinsky-2"] .g-media img, :root[data-skin="kandinsky-2"] .g-media svg{ border:none; box-shadow:none; }
:root[data-skin="kandinsky-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="kandinsky-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; padding:18px 0 0; color:var(--ink); }
:root[data-skin="kandinsky-2"] .g-title{ font-family:var(--sans); font-weight:700; font-size:clamp(14px,1.2vw,18px); letter-spacing:.02em; color:var(--ink); }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item:nth-child(3n+1) .g-title, :root[data-skin="kandinsky-2"] .home-gallery .g-item:nth-child(3n+1) .g-title{ color:#C8281C; }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item:nth-child(3n+2) .g-title, :root[data-skin="kandinsky-2"] .home-gallery .g-item:nth-child(3n+2) .g-title{ color:#B89A00; }
:root[data-skin="kandinsky-2"] .gallery-grid .g-item:nth-child(3n) .g-title, :root[data-skin="kandinsky-2"] .home-gallery .g-item:nth-child(3n) .g-title{ color:#183C93; }
:root[data-skin="kandinsky-2"] .g-meta{ font-family:var(--mono); color:var(--ink-faint); letter-spacing:.12em; }


/* ============ albers-2 (purpose-first redesign) ============ */
/* ===== albers-2 (purpose-first redesign) ===== */
:root[data-skin="albers-2"]{
  --bg:#F4E6BD; --surface:#FFF2C8; --surface-2:#D79A22; --ink:#1C0D02; --ink-soft:#5E260F;
  --ink-faint:#8E6532; --line:#D2B16A; --line-strong:#A66A24; --accent:#B63A18; --accent-deep:#6E1E12; --accent-soft:#F8D26A;
}
body[data-struct="albers-2"] #skin-structure{ background:#F4E6BD; }
body[data-struct="albers-2"] .skin-structure-layer:nth-child(1){ top:10vh; left:8vw; width:min(34vw,420px); height:min(34vw,420px); background:#E6B13E; }
body[data-struct="albers-2"] .skin-structure-layer:nth-child(2){ top:18vh; left:calc(8vw + min(5vw,62px)); width:min(24vw,300px); height:min(24vw,300px); background:#C8751B; }
body[data-struct="albers-2"] .skin-structure-layer:nth-child(3){ top:29vh; left:calc(8vw + min(9vw,112px)); width:min(15vw,190px); height:min(15vw,190px); background:#A93416; }
body[data-struct="albers-2"] .skin-structure-layer:nth-child(4){ top:42vh; left:calc(8vw + min(12vw,150px)); width:min(8vw,104px); height:min(8vw,104px); background:#68190E; }
body[data-struct="albers-2"] .skin-structure-layer:nth-child(5){ top:18vh; right:10vw; width:min(22vw,280px); height:min(22vw,280px); background:#F3C64E; box-shadow:0 min(4vw,48px) 0 -10px #D9821F, 0 min(8vw,96px) 0 -22px #B63A18; }

:root[data-skin="albers-2"] .site-header{ background:transparent; border-bottom:none; box-shadow:none; }
:root[data-skin="albers-2"] .nav{ height:112px; justify-content:space-between; }
:root[data-skin="albers-2"] .brand{ font-family:var(--sans); font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:var(--ink); }
:root[data-skin="albers-2"] .btn{ border-radius:0; background:#E6B13E; border:1px solid #1C0D02; color:#1C0D02; box-shadow:inset 0 0 0 8px #C8751B, inset 0 0 0 16px #A93416; font-weight:600; }
:root[data-skin="albers-2"] .hero{ padding-block:clamp(120px,18vw,260px) clamp(80px,12vw,170px); }
:root[data-skin="albers-2"] .hero-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:0; align-items:start; min-height:50vh; }
:root[data-skin="albers-2"] .hero-grid > :first-child{ grid-column:2 / span 4; }
:root[data-skin="albers-2"] .hero-grid > :last-child{ grid-column:7 / span 4; margin-top:clamp(90px,12vw,170px); }
:root[data-skin="albers-2"] .section-head{ max-width:1040px; margin-inline:auto; align-items:flex-start; border-top:18px solid #E6B13E; padding-top:20px; }
:root[data-skin="albers-2"] .section-head h2{ font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.12em; color:var(--ink); }
:root[data-skin="albers-2"] .eyebrow{ color:#A93416; letter-spacing:.2em; }
:root[data-skin="albers-2"] .link-arrow{ color:var(--ink); text-decoration-color:#C8751B; text-decoration-thickness:5px; }
:root[data-skin="albers-2"] .section--showcase{ background:transparent; border-block:none; padding-block:clamp(90px,14vw,220px); }
:root[data-skin="albers-2"] .site-footer{ background:transparent; border-top:1px solid #A66A24; color:var(--ink-soft); margin-top:clamp(130px,18vw,260px); }

:root[data-skin="albers-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(90px,12vw,180px) 0; max-width:1240px; margin:0 auto; padding-block:clamp(90px,14vw,220px); }
:root[data-skin="albers-2"] .gallery-grid .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="albers-2"] .gallery-grid .g-item:nth-child(4n+1){ grid-column:2 / span 4; }
:root[data-skin="albers-2"] .gallery-grid .g-item:nth-child(4n+2){ grid-column:7 / span 4; margin-top:clamp(70px,9vw,140px); }
:root[data-skin="albers-2"] .gallery-grid .g-item:nth-child(4n+3){ grid-column:4 / span 4; }
:root[data-skin="albers-2"] .gallery-grid .g-item:nth-child(4n){ grid-column:9 / span 3; margin-top:clamp(95px,12vw,180px); }
:root[data-skin="albers-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(80px,11vw,160px) 0; max-width:1120px; margin:0 auto; padding:clamp(80px,12vw,180px) clamp(20px,4vw,56px) 0; }
:root[data-skin="albers-2"] .home-gallery .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="albers-2"] .home-gallery .g-item:nth-child(3n+1){ grid-column:2 / span 4; }
:root[data-skin="albers-2"] .home-gallery .g-item:nth-child(3n+2){ grid-column:7 / span 4; margin-top:clamp(60px,8vw,130px); }
:root[data-skin="albers-2"] .home-gallery .g-item:nth-child(3n){ grid-column:4 / span 4; }
:root[data-skin="albers-2"] .g-media{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#E6B13E; border:28px solid #C8751B; border-radius:0; overflow:visible; padding:72px 42px 30px; box-shadow:inset 0 0 0 34px #A93416, inset 0 0 0 68px #68190E; }
:root[data-skin="albers-2"] .g-media img, :root[data-skin="albers-2"] .g-media svg{ width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; border:none; box-shadow:0 16px 50px -38px rgba(28,13,2,.55); }
:root[data-skin="albers-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="albers-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; padding:18px 0 0; text-align:center; color:var(--ink); }
:root[data-skin="albers-2"] .g-title{ font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.16em; font-size:clamp(12px,1vw,15px); color:var(--ink); }
:root[data-skin="albers-2"] .g-meta{ font-family:var(--mono); color:var(--ink-soft); letter-spacing:.08em; }


/* ============ matisse-2 (purpose-first redesign) ============ */
/* ===== matisse-2 (purpose-first redesign) ===== */
:root[data-skin="matisse-2"]{
  --bg:#FBFAF2; --surface:#FFFFFF; --surface-2:#F2EFE5; --ink:#111111; --ink-soft:#3E3A34;
  --ink-faint:#8A8174; --line:#E6E0D2; --line-strong:#CEC4AE; --accent:#F05A3D; --accent-deep:#0057A8; --accent-soft:#2FA66A;
}
body[data-struct="matisse-2"] #skin-structure{ background:#FBFAF2; }
body[data-struct="matisse-2"] .skin-structure-layer:nth-child(1){ top:9vh; left:7vw; width:min(28vw,350px); height:min(18vw,230px); background:#0057A8; border-radius:62% 38% 58% 42% / 46% 60% 40% 54%; transform:rotate(-12deg); }
body[data-struct="matisse-2"] .skin-structure-layer:nth-child(2){ top:18vh; right:10vw; width:min(22vw,280px); height:min(20vw,250px); background:#F05A3D; clip-path:polygon(10% 26%,42% 0,72% 20%,100% 48%,72% 82%,34% 100%,0 70%); transform:rotate(16deg); }
body[data-struct="matisse-2"] .skin-structure-layer:nth-child(3){ top:55vh; left:13vw; width:min(24vw,300px); height:min(26vw,330px); background:#2FA66A; border-radius:48% 52% 44% 56% / 68% 32% 68% 32%; clip-path:ellipse(38% 50% at 50% 50%); transform:rotate(25deg); }
body[data-struct="matisse-2"] .skin-structure-layer:nth-child(4){ top:62vh; right:15vw; width:min(20vw,250px); height:min(15vw,190px); background:#E94F86; border-radius:70% 30% 66% 34% / 44% 62% 38% 56%; transform:rotate(-18deg); }
body[data-struct="matisse-2"] .skin-structure-layer:nth-child(5){ top:36vh; left:45vw; width:min(18vw,220px); height:min(24vw,300px); background:#F6C626; clip-path:polygon(50% 0,61% 32%,96% 22%,70% 50%,94% 78%,60% 68%,50% 100%,40% 68%,6% 78%,30% 50%,4% 22%,39% 32%); transform:rotate(8deg); }

:root[data-skin="matisse-2"] .site-header{ background:transparent; border-bottom:none; box-shadow:none; }
:root[data-skin="matisse-2"] .nav{ height:116px; justify-content:space-between; }
:root[data-skin="matisse-2"] .brand{ font-family:var(--sans); font-weight:800; letter-spacing:-.02em; color:var(--ink); }
:root[data-skin="matisse-2"] .btn{ border-radius:999px 46px 999px 46px; background:#0057A8; border:none; color:#FBFAF2; box-shadow:12px 10px 0 #F05A3D; font-weight:800; }
:root[data-skin="matisse-2"] .hero{ padding-block:clamp(130px,18vw,270px) clamp(80px,11vw,160px); }
:root[data-skin="matisse-2"] .hero-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:0; align-items:center; min-height:54vh; }
:root[data-skin="matisse-2"] .hero-grid > :first-child{ grid-column:2 / span 5; }
:root[data-skin="matisse-2"] .hero-grid > :last-child{ grid-column:8 / span 4; margin-top:clamp(50px,8vw,120px); }
:root[data-skin="matisse-2"] .section-head{ max-width:1160px; margin-inline:auto; align-items:flex-start; }
:root[data-skin="matisse-2"] .section-head h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; color:var(--ink); }
:root[data-skin="matisse-2"] .eyebrow{ color:#F05A3D; letter-spacing:.18em; }
:root[data-skin="matisse-2"] .link-arrow{ color:var(--ink); text-decoration-color:#2FA66A; text-decoration-thickness:5px; }
:root[data-skin="matisse-2"] .section--showcase{ background:transparent; border-block:none; padding-block:clamp(90px,14vw,220px); }
:root[data-skin="matisse-2"] .site-footer{ background:transparent; border-top:18px solid #0057A8; color:var(--ink-soft); margin-top:clamp(120px,18vw,260px); }

:root[data-skin="matisse-2"] .gallery-grid{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(72px,10vw,160px) 0; max-width:1300px; margin:0 auto; padding-block:clamp(90px,14vw,220px); }
:root[data-skin="matisse-2"] .gallery-grid .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="matisse-2"] .gallery-grid .g-item:nth-child(5n+1){ grid-column:2 / span 4; }
:root[data-skin="matisse-2"] .gallery-grid .g-item:nth-child(5n+2){ grid-column:8 / span 4; margin-top:clamp(40px,6vw,110px); }
:root[data-skin="matisse-2"] .gallery-grid .g-item:nth-child(5n+3){ grid-column:5 / span 5; }
:root[data-skin="matisse-2"] .gallery-grid .g-item:nth-child(5n+4){ grid-column:1 / span 3; margin-top:clamp(70px,10vw,150px); }
:root[data-skin="matisse-2"] .gallery-grid .g-item:nth-child(5n){ grid-column:9 / span 3; }
:root[data-skin="matisse-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(66px,9vw,150px) 0; max-width:1180px; margin:0 auto; padding:clamp(80px,12vw,180px) clamp(20px,4vw,56px) 0; }
:root[data-skin="matisse-2"] .home-gallery .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="matisse-2"] .home-gallery .g-item:nth-child(3n+1){ grid-column:2 / span 4; }
:root[data-skin="matisse-2"] .home-gallery .g-item:nth-child(3n+2){ grid-column:8 / span 4; margin-top:clamp(44px,7vw,120px); }
:root[data-skin="matisse-2"] .home-gallery .g-item:nth-child(3n){ grid-column:5 / span 5; }
:root[data-skin="matisse-2"] .g-media{ background:#FBFAF2; border:none; border-radius:42px 18px 54px 22px; overflow:visible; padding:18px; box-shadow:18px 16px 0 #0057A8, -14px 12px 0 #F05A3D, 8px -10px 0 #2FA66A; }
:root[data-skin="matisse-2"] .g-media img, :root[data-skin="matisse-2"] .g-media svg{ border-radius:28px 12px 34px 16px; border:0; box-shadow:0 18px 48px -34px rgba(17,17,17,.35); }
:root[data-skin="matisse-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="matisse-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; padding:20px 4px 0; color:var(--ink); }
:root[data-skin="matisse-2"] .g-title{ font-family:var(--sans); font-weight:800; letter-spacing:-.02em; font-size:clamp(15px,1.4vw,22px); color:var(--ink); }
:root[data-skin="matisse-2"] .g-meta{ font-family:var(--mono); color:#F05A3D; letter-spacing:.1em; }


/* ============ cartier-bresson-2 (purpose-first redesign) ============ */
/* ===== cartier-bresson-2 (purpose-first redesign) ===== */
:root[data-skin="cartier-bresson-2"]{
  --bg:#F4F0E8; --surface:#FBF8F1; --surface-2:#E5DED1; --ink:#11100E; --ink-soft:#3E3932;
  --ink-faint:#827A70; --line:#D6CDBD; --line-strong:#1A1713; --accent:#8E2D22; --accent-deep:#070706; --accent-soft:#EFE7DA;
}
body[data-struct="cartier-bresson-2"] #skin-structure{ background:#F4F0E8; }
body[data-struct="cartier-bresson-2"] .skin-structure-layer:nth-child(1){ top:0; bottom:0; left:33.333%; width:1px; background:rgba(17,16,14,.16); }
body[data-struct="cartier-bresson-2"] .skin-structure-layer:nth-child(2){ top:0; bottom:0; left:61.8%; width:1px; background:rgba(142,45,34,.22); }
body[data-struct="cartier-bresson-2"] .skin-structure-layer:nth-child(3){ left:0; right:0; top:33.333%; height:1px; background:rgba(17,16,14,.14); }
body[data-struct="cartier-bresson-2"] .skin-structure-layer:nth-child(4){ left:0; right:0; top:61.8%; height:1px; background:rgba(142,45,34,.18); }

:root[data-skin="cartier-bresson-2"] .site-header{ background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:1px solid rgba(17,16,14,.18); box-shadow:none; }
:root[data-skin="cartier-bresson-2"] .nav{ height:96px; justify-content:space-between; }
:root[data-skin="cartier-bresson-2"] .brand{ font-family:var(--serif); font-weight:400; letter-spacing:.015em; color:var(--ink); }
:root[data-skin="cartier-bresson-2"] .btn{ border-radius:0; background:transparent; border:1px solid var(--ink); color:var(--ink); box-shadow:none; }
:root[data-skin="cartier-bresson-2"] .hero{ padding-block:clamp(96px,15vw,220px); }
:root[data-skin="cartier-bresson-2"] .hero-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:0; align-items:start; min-height:62vh; }
:root[data-skin="cartier-bresson-2"] .hero-grid > :first-child{ grid-column:2 / span 4; padding-top:clamp(18px,4vw,76px); }
:root[data-skin="cartier-bresson-2"] .hero-grid > :last-child{ grid-column:7 / span 5; margin-top:clamp(72px,10vw,160px); }
:root[data-skin="cartier-bresson-2"] .section-head{ max-width:1180px; margin-inline:auto; align-items:flex-start; border-top:1px solid rgba(17,16,14,.24); padding-top:18px; }
:root[data-skin="cartier-bresson-2"] .section-head h2{ font-family:var(--serif); font-weight:400; color:var(--ink); letter-spacing:-.018em; }
:root[data-skin="cartier-bresson-2"] .eyebrow{ color:var(--accent); font-family:var(--mono); letter-spacing:.18em; }
:root[data-skin="cartier-bresson-2"] .link-arrow{ color:var(--ink); text-decoration-color:var(--accent); text-decoration-thickness:1px; }
:root[data-skin="cartier-bresson-2"] .section--showcase{ background:transparent; border-block:1px solid rgba(17,16,14,.18); padding-block:clamp(86px,14vw,220px); }
:root[data-skin="cartier-bresson-2"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="cartier-bresson-2"] .site-footer{ background:transparent; border-top:1px solid rgba(17,16,14,.22); color:var(--ink-soft); margin-top:clamp(120px,18vw,260px); }

:root[data-skin="cartier-bresson-2"] .gallery-grid,
:root[data-skin="cartier-bresson-2"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(56px,8vw,140px) 0; max-width:1380px; margin:0 auto; padding-block:clamp(86px,14vw,220px); }
:root[data-skin="cartier-bresson-2"] .gallery-grid .g-item,
:root[data-skin="cartier-bresson-2"] .home-gallery .g-item{ margin:0; background:transparent; border-radius:0; overflow:visible; }
:root[data-skin="cartier-bresson-2"] .gallery-grid .g-item:nth-child(6n+1),
:root[data-skin="cartier-bresson-2"] .home-gallery .g-item:nth-child(5n+1){ grid-column:2 / span 7; }
:root[data-skin="cartier-bresson-2"] .gallery-grid .g-item:nth-child(6n+2),
:root[data-skin="cartier-bresson-2"] .home-gallery .g-item:nth-child(5n+2){ grid-column:8 / span 4; margin-top:clamp(44px,7vw,120px); }
:root[data-skin="cartier-bresson-2"] .gallery-grid .g-item:nth-child(6n+3),
:root[data-skin="cartier-bresson-2"] .home-gallery .g-item:nth-child(5n+3){ grid-column:4 / span 5; }
:root[data-skin="cartier-bresson-2"] .gallery-grid .g-item:nth-child(6n+4),
:root[data-skin="cartier-bresson-2"] .home-gallery .g-item:nth-child(5n+4){ grid-column:1 / span 4; margin-top:clamp(76px,11vw,170px); }
:root[data-skin="cartier-bresson-2"] .gallery-grid .g-item:nth-child(6n+5),
:root[data-skin="cartier-bresson-2"] .home-gallery .g-item:nth-child(5n){ grid-column:7 / span 5; }
:root[data-skin="cartier-bresson-2"] .gallery-grid .g-item:nth-child(6n),
:root[data-skin="cartier-bresson-2"] .home-gallery .g-item:nth-child(5n+5){ grid-column:3 / span 8; margin-top:clamp(28px,5vw,90px); }
:root[data-skin="cartier-bresson-2"] .g-media{ background:#070706; border:none; border-radius:0; overflow:visible; padding:clamp(10px,1.8vw,22px); box-shadow:0 24px 70px -48px rgba(17,16,14,.58); }
:root[data-skin="cartier-bresson-2"] .g-media img,
:root[data-skin="cartier-bresson-2"] .g-media svg{ border:1px solid rgba(244,240,232,.32); box-shadow:0 0 0 1px rgba(7,7,6,.88); filter:grayscale(.92) saturate(.18) contrast(1.08) brightness(1.02); }
:root[data-skin="cartier-bresson-2"] .g-item:hover .g-media img{ transform:none; }
:root[data-skin="cartier-bresson-2"] .g-overlay{ position:static; inset:auto; opacity:1; display:block; background:none; padding:14px 0 0; color:var(--ink); border-top:1px solid rgba(17,16,14,.18); margin-top:14px; }
:root[data-skin="cartier-bresson-2"] .g-title{ font-family:var(--serif); font-weight:400; font-size:clamp(15px,1.4vw,20px); letter-spacing:.012em; color:var(--ink); }
:root[data-skin="cartier-bresson-2"] .g-meta{ display:block; margin-top:5px; font-family:var(--serif); font-style:italic; font-size:clamp(12px,1vw,15px); color:var(--ink-faint); }

@media (max-width:860px){
  :root[data-skin="cartier-bresson-2"] .nav{ height:78px; }
  :root[data-skin="cartier-bresson-2"] .hero-grid,
  :root[data-skin="cartier-bresson-2"] .gallery-grid,
  :root[data-skin="cartier-bresson-2"] .home-gallery{ display:block; max-width:720px; }
  :root[data-skin="cartier-bresson-2"] .hero-grid > :first-child,
  :root[data-skin="cartier-bresson-2"] .hero-grid > :last-child,
  :root[data-skin="cartier-bresson-2"] .gallery-grid .g-item:nth-child(n),
  :root[data-skin="cartier-bresson-2"] .home-gallery .g-item:nth-child(n){ margin:0 0 clamp(70px,15vw,130px); }
  body[data-struct="cartier-bresson-2"] .skin-structure-layer:nth-child(2),
  body[data-struct="cartier-bresson-2"] .skin-structure-layer:nth-child(4){ opacity:.45; }
}

/* ===== shibui-3 (reveal-on-attention) ===== */
:root[data-skin="shibui-3"]{
  --bg:#DAD5C9; --surface:#E6E1D6; --surface-2:#D1C8B8; --ink:#2C3029;
  --ink-soft:#565B4F; --ink-faint:#8A8D80; --line:#C8C0AE; --line-strong:#A79E8B; --accent:#6B7258;
  --accent-deep:#343A2F; --accent-soft:#D9C4A4;
}

body[data-struct="shibui-3"] #skin-structure{ background:linear-gradient(180deg,#DAD5C9 0%,#D4CEC0 72%,#C9C0AE 100%); }
body[data-struct="shibui-3"] #skin-structure .skin-structure-layer:nth-child(1){
  inset:0; background:linear-gradient(115deg, transparent 0 22%, rgba(230,225,214,.34) 42%, transparent 68%); opacity:.62;
}
body[data-struct="shibui-3"] #skin-structure .skin-structure-layer:nth-child(2){
  top:12vh; right:9vw; left:auto; width:min(26vw,340px); height:68vh;
  background:linear-gradient(180deg, transparent, rgba(107,114,88,.075) 22%, rgba(107,114,88,.045) 76%, transparent); opacity:.78;
}
body[data-struct="shibui-3"] #skin-structure .skin-structure-layer:nth-child(3){
  left:clamp(18px,6vw,96px); right:clamp(18px,8vw,130px); top:58vh; height:1px;
  background:linear-gradient(90deg, transparent, rgba(52,58,47,.16), rgba(217,196,164,.28), transparent); opacity:.72;
}

:root[data-skin="shibui-3"] .site-header{ background:color-mix(in srgb,var(--bg) 88%,transparent); border-bottom:1px solid rgba(44,48,41,.10); box-shadow:none; }
:root[data-skin="shibui-3"] .nav{ height:94px; justify-content:flex-start; gap:clamp(34px,7vw,118px); }
:root[data-skin="shibui-3"] .brand{ color:var(--ink-soft); font-family:var(--serif); font-weight:400; letter-spacing:.055em; }
:root[data-skin="shibui-3"] .nav-links a{ color:var(--ink-soft); }
:root[data-skin="shibui-3"] .nav-links a::after{ background:var(--accent); opacity:.35; height:1px; }
:root[data-skin="shibui-3"] .hero-grid{ grid-template-columns:minmax(0,5fr) minmax(0,4fr); gap:clamp(44px,8vw,128px); max-width:1080px; align-items:end; }
:root[data-skin="shibui-3"] .section-head{ position:relative; max-width:43ch; text-align:left; color:var(--ink-soft); }
:root[data-skin="shibui-3"] .section-head::after{ content:""; display:block; width:0; height:1px; margin-top:18px; background:var(--accent-soft); opacity:0; transition:width 820ms var(--ease), opacity 820ms var(--ease); }
:root[data-skin="shibui-3"] .section--showcase:hover .section-head::after,
:root[data-skin="shibui-3"] .section--showcase:focus-within .section-head::after{ width:min(100%,220px); opacity:.72; }
:root[data-skin="shibui-3"] .btn{ background:transparent; color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:0; box-shadow:inset 0 0 0 0 var(--accent-soft); transition:box-shadow 780ms var(--ease), color 780ms var(--ease); }
:root[data-skin="shibui-3"] .btn:hover,
:root[data-skin="shibui-3"] .btn:focus-visible{ color:var(--ink); box-shadow:inset 0 -4px 0 rgba(217,196,164,.42); }
:root[data-skin="shibui-3"] .site-footer{ background:transparent; border-top:1px solid rgba(44,48,41,.10); color:var(--ink-faint); }

:root[data-skin="shibui-3"] .gallery-grid,
:root[data-skin="shibui-3"] .home-gallery{ columns:unset; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:clamp(64px,9vw,150px) clamp(18px,3vw,48px); max-width:1180px; margin:0 auto; padding:clamp(46px,7vw,110px) clamp(18px,4vw,56px) 0; }
:root[data-skin="shibui-3"] .gallery-grid .g-item,
:root[data-skin="shibui-3"] .home-gallery .g-item{ position:relative; grid-column:2 / span 6; margin:0; background:var(--surface); border:1px solid rgba(167,158,139,.34); border-radius:0; overflow:visible; padding:clamp(10px,1.4vw,18px); box-shadow:inset 0 -16px 0 rgba(209,200,184,.18); transition:border-color 820ms var(--ease), box-shadow 820ms var(--ease), background 820ms var(--ease); }
:root[data-skin="shibui-3"] .gallery-grid .g-item:nth-child(4n+2),
:root[data-skin="shibui-3"] .home-gallery .g-item:nth-child(4n+2){ grid-column:5 / span 5; }
:root[data-skin="shibui-3"] .gallery-grid .g-item:nth-child(4n+3),
:root[data-skin="shibui-3"] .home-gallery .g-item:nth-child(4n+3){ grid-column:1 / span 5; }
:root[data-skin="shibui-3"] .gallery-grid .g-item:nth-child(4n),
:root[data-skin="shibui-3"] .home-gallery .g-item:nth-child(4n){ grid-column:4 / span 6; }
:root[data-skin="shibui-3"] .gallery-grid .g-item::before,
:root[data-skin="shibui-3"] .home-gallery .g-item::before{ content:""; position:absolute; inset:clamp(10px,1.5vw,20px); background:linear-gradient(180deg, rgba(217,196,164,.10), transparent 58%); opacity:.08; pointer-events:none; transition:opacity 820ms var(--ease); }
:root[data-skin="shibui-3"] .gallery-grid .g-item::after,
:root[data-skin="shibui-3"] .home-gallery .g-item::after{ content:""; position:absolute; right:clamp(14px,2vw,24px); bottom:clamp(14px,2vw,24px); width:10px; height:10px; border:1px solid var(--accent); background:var(--accent-soft); opacity:0; pointer-events:none; transition:opacity 760ms var(--ease); }
:root[data-skin="shibui-3"] .gallery-grid .g-item:hover,
:root[data-skin="shibui-3"] .gallery-grid .g-item:focus-within,
:root[data-skin="shibui-3"] .home-gallery .g-item:hover,
:root[data-skin="shibui-3"] .home-gallery .g-item:focus-within{ border-color:rgba(107,114,88,.55); background:#E9E2D3; box-shadow:inset 0 -24px 0 rgba(217,196,164,.24), 0 18px 48px -46px rgba(44,48,41,.46); }
:root[data-skin="shibui-3"] .gallery-grid .g-item:hover::before,
:root[data-skin="shibui-3"] .gallery-grid .g-item:focus-within::before,
:root[data-skin="shibui-3"] .home-gallery .g-item:hover::before,
:root[data-skin="shibui-3"] .home-gallery .g-item:focus-within::before{ opacity:.46; }
:root[data-skin="shibui-3"] .gallery-grid .g-item:hover::after,
:root[data-skin="shibui-3"] .gallery-grid .g-item:focus-within::after,
:root[data-skin="shibui-3"] .home-gallery .g-item:hover::after,
:root[data-skin="shibui-3"] .home-gallery .g-item:focus-within::after{ opacity:.72; }

:root[data-skin="shibui-3"] .g-media{ position:relative; background:var(--surface-2); border:1px solid rgba(167,158,139,.28); border-radius:0; overflow:visible; padding:clamp(4px,.7vw,8px); transition:background 820ms var(--ease), border-color 820ms var(--ease); }
:root[data-skin="shibui-3"] .g-item:hover .g-media,
:root[data-skin="shibui-3"] .g-item:focus-within .g-media{ background:#D8CDB8; border-color:rgba(107,114,88,.42); }
:root[data-skin="shibui-3"] .g-media img,
:root[data-skin="shibui-3"] .g-media svg{ width:100%; height:auto; border:none !important; box-shadow:0 1px 0 rgba(44,48,41,.10); filter:saturate(.88) contrast(.96) brightness(1.01); transition:filter 820ms var(--ease), box-shadow 820ms var(--ease); }
:root[data-skin="shibui-3"] .g-item:hover .g-media img,
:root[data-skin="shibui-3"] .g-item:focus-within .g-media img,
:root[data-skin="shibui-3"] .g-item:hover .g-media svg,
:root[data-skin="shibui-3"] .g-item:focus-within .g-media svg{ transform:none; filter:saturate(.96) contrast(1) brightness(1.02); box-shadow:0 1px 0 rgba(44,48,41,.16); }
:root[data-skin="shibui-3"] .g-item:hover .g-media img{ transform:none; }

:root[data-skin="shibui-3"] .g-overlay{ position:static; inset:auto; display:block; background:none; color:var(--ink-soft); padding:clamp(14px,2vw,26px) 2px 0; opacity:.38; transition:opacity 880ms var(--ease), color 880ms var(--ease); }
:root[data-skin="shibui-3"] .g-title{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(14px,1.15vw,17px); letter-spacing:.03em; color:var(--ink-soft); transition:color 880ms var(--ease), letter-spacing 880ms var(--ease); }
:root[data-skin="shibui-3"] .g-meta{ display:block; margin-top:8px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); opacity:.46; transition:opacity 880ms var(--ease), color 880ms var(--ease); }
:root[data-skin="shibui-3"] .g-item:hover .g-overlay,
:root[data-skin="shibui-3"] .g-item:focus-within .g-overlay{ opacity:1; color:var(--ink); }
:root[data-skin="shibui-3"] .g-item:hover .g-title,
:root[data-skin="shibui-3"] .g-item:focus-within .g-title{ color:var(--ink); letter-spacing:.045em; }
:root[data-skin="shibui-3"] .g-item:hover .g-meta,
:root[data-skin="shibui-3"] .g-item:focus-within .g-meta{ opacity:1; color:var(--accent); }

:root[data-skin="shibui-3"] .section--showcase{ background:transparent; border-block:none; }
:root[data-skin="shibui-3"] .section--showcase .section-head h2{ color:var(--ink); }
:root[data-skin="shibui-3"] .section--showcase .eyebrow{ color:var(--ink-faint); transition:color 820ms var(--ease); }
:root[data-skin="shibui-3"] .section--showcase:hover .eyebrow,
:root[data-skin="shibui-3"] .section--showcase:focus-within .eyebrow{ color:var(--accent); }
:root[data-skin="shibui-3"] .section--showcase .link-arrow{ color:var(--ink-soft); border-bottom:1px solid rgba(107,114,88,.25); transition:color 820ms var(--ease), border-color 820ms var(--ease); }
:root[data-skin="shibui-3"] .section--showcase:hover .link-arrow,
:root[data-skin="shibui-3"] .section--showcase:focus-within .link-arrow{ color:var(--ink); border-bottom-color:var(--accent); }

@media (max-width:820px){
  :root[data-skin="shibui-3"] .hero-grid{ grid-template-columns:1fr; }
  :root[data-skin="shibui-3"] .gallery-grid,
  :root[data-skin="shibui-3"] .home-gallery{ display:block; max-width:720px; }
  :root[data-skin="shibui-3"] .gallery-grid .g-item,
  :root[data-skin="shibui-3"] .home-gallery .g-item,
  :root[data-skin="shibui-3"] .gallery-grid .g-item:nth-child(n),
  :root[data-skin="shibui-3"] .home-gallery .g-item:nth-child(n){ margin:0 0 clamp(62px,12vw,116px); }
}