/* ---------- Tokens ---------- */
:root {
  --bg: #f7f6f3;          /* gallery off-white */
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #2a2a2a;
  --muted: #8a877f;
  --rule: #e5e3dd;
  --accent: #1a1a1a;

  --serif: "EB Garamond", "Times New Roman", serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --header-h: 76px;
  --tab-h: 44px;          /* compressed band height */
  --ease: cubic-bezier(.7,.02,.18,1);
  --dur: 720ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- App layout ---------- */
.app {
  height: 100vh;
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
}

/* ---------- Header ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: relative;
  z-index: 30;
}
.wordmark {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: auto;
  color: var(--ink);
}
.wordmark > span:first-child { line-height: 1; }
.wordmark-sig { display: inline-flex; align-items: center; line-height: 0; }
.wordmark-sig img { display: block; height: 54px; width: auto; transform: translateY(-8px); }
.wordmark-sig .sig-light, .bio-sign .sig-light { display: none; }
.app.spot-active .wordmark-sig .sig-dark, .app.spot-active .bio-sign .sig-dark { display: none; }
.app.spot-active .wordmark-sig .sig-light, .app.spot-active .bio-sign .sig-light { display: block; }
/* Bio sign-off — the drawn mark, centred in the free space of its text column */
.bio-sign { break-inside: avoid; margin: 64px 0 26px; display: flex; justify-content: center; }
.bio-sign img { display: block; height: 72px; width: auto; }
.wordmark .sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  padding-left: 0;
  line-height: 1;
}
.wordmark-socials {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 6px;
}
.wordmark-socials a {
  position: relative;
  color: var(--muted);
  display: inline-flex;
  line-height: 0;
  transition: color 200ms var(--ease);
}
.wordmark-socials a:hover { color: var(--ink); }
.wordmark-socials svg { width: 15px; height: 15px; display: block; }
/* TikTok "live" state — brand red glow + blinking status dot */
.soc-tiktok.live { color: #e23744; animation: tiktokLive 1.4s ease-in-out infinite; }
.soc-tiktok.live:hover { color: #e23744; }
.soc-tiktok .live-dot {
  position: absolute; top: -2px; right: -3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #e23744;
  box-shadow: 0 0 0 2px var(--bg);
  animation: liveDot 1.4s ease-in-out infinite;
}
@keyframes tiktokLive { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes liveDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 6px 0;
  position: relative;
}
.nav button:hover { color: var(--ink); }
.nav button.active::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: var(--ink);
}
.lang {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--muted);
}
.lang button { color: var(--muted); }
.lang button.on { color: var(--ink); }
.lang .sep { opacity: .3; }

/* Language dropdown — small flag menu (desktop: right of the nav; mobile: name row) */
.lang-dd { display: inline-flex; position: relative; align-items: center; margin-left: 22px; }
.flag { display: block; width: 22px; height: 14px; object-fit: cover; border: 1px solid rgba(0,0,0,.16); border-radius: 1px; }
.lang-dd-btn { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.lang-dd-btn .car { color: var(--muted); font-size: 9px; transition: transform .2s var(--ease); }
.lang-dd.open .lang-dd-btn .car { transform: rotate(180deg); }
.lang-scrim { position: fixed; inset: 0; z-index: 45; }
.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 46; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 14px 34px rgba(0,0,0,.16); display: flex; flex-direction: column; min-width: 92px; }
.lang-menu button { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-align: left; padding: 12px 16px; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.lang-menu button { display: flex; align-items: center; justify-content: center; padding: 10px 16px; }
.lang-menu button .flag { width: 26px; height: 17px; }
.lang-menu button.on .flag { box-shadow: 0 0 0 2px var(--ink); }
.lang-menu button:last-child { border-bottom: 0; }
.lang-menu button.on { color: var(--ink); background: var(--bg); }
.descr-toggle { display: none; }

/* Nav dropdown toggle (mobile only) — a + that rotates into a × */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--ink); }
.nt-bars { position: relative; width: 15px; height: 15px; display: inline-block; }
.nt-bars i { position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); }
.nt-bars i:nth-child(1) { transform: translateY(-50%); }
.nt-bars i:nth-child(2) { transform: translateY(-50%) rotate(90deg); }
.nav-toggle.open .nt-bars i:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.nav-toggle.open .nt-bars i:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }

/* TikTok live-schedule tooltip */
.soc-tip { position: absolute; top: calc(100% + 10px); left: 0; z-index: 50; width: max-content; max-width: 260px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 10px; line-height: 1.55; letter-spacing: .03em; padding: 9px 12px; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.soc-tiktok:hover .soc-tip, .soc-tiktok:focus-visible .soc-tip { opacity: 1; transform: translateY(0); }

/* ---------- Bands stack ---------- */
.stack {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

.band {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  transition: flex-grow var(--dur) var(--ease),
              flex-basis var(--dur) var(--ease),
              min-height var(--dur) var(--ease);
  cursor: pointer;
}
.band:first-child { border-top: 0; }

/* When something is open: closed bands compress to tab height, open band fills. */
.stack[data-open="true"] .band {
  flex: 0 0 var(--tab-h);
  min-height: var(--tab-h);
}
.stack[data-open="true"] .band.open {
  flex: 1 1 auto;
  min-height: 0;
  cursor: default;
}

/* ---------- Band — closed state ---------- */
.band-inner {
  display: grid;
  grid-template-columns: 360px 1fr auto;
  align-items: stretch;
  height: 100%;
  position: relative;
}

.band-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 28px;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
  z-index: 2;
}
.band-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
}
.band-title {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.band-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  gap: 14px;
  align-items: center;
}
.band-meta .dot {
  width: 3px; height: 3px;
  background: var(--muted);
  border-radius: 50%;
  display: inline-block;
}

/* Cover image area shown when band is closed */
.band-cover {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  transition: opacity 320ms var(--ease);
}
.band-cover .ph { position: absolute; inset: 0; }

.band-cta {
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-left: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  gap: 10px;
  background: var(--paper);
  position: relative;
  z-index: 2;
}
.band-cta .arr {
  width: 22px; height: 1px; background: currentColor;
  position: relative;
  transition: width var(--dur) var(--ease);
}
.band-cta .arr::after {
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.band:hover .band-cta .arr { width: 38px; }

/* When band is open: hide closed-state cover + cta; keep label compact at top */
.band.open .band-cover { opacity: 0; pointer-events: none; }
.band.open .band-cta { display: none; }
.band.open .band-inner { display: none; }

/* Compressed bands (siblings of open) */
.stack[data-open="true"] .band:not(.open) .band-inner {
  grid-template-columns: 360px 1fr auto;
}
.stack[data-open="true"] .band:not(.open) .band-cover { display: none; }
.stack[data-open="true"] .band:not(.open) .band-label {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  border-right: 0;
}
.stack[data-open="true"] .band:not(.open) .band-title {
  font-size: 14px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.stack[data-open="true"] .band:not(.open) .band-num { font-size: 10px; }
.stack[data-open="true"] .band:not(.open) .band-meta {
  display: none;
}
.stack[data-open="true"] .band:not(.open) .band-cta {
  border-left: 0;
}

/* Open band internals */
.open-view {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease);
  transition-delay: 0ms;
}
.band.open .open-view {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 320ms;
}

.open-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 16px 36px 14px;
  border-bottom: 1px solid var(--rule);
  gap: 24px;
}
.oh-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.oh-titleline {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.oh-medium {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: baseline;
}
.open-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.open-head .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 18px;
  align-items: center;
}
.oh-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  padding-left: 18px;
  border-left: 1px solid var(--rule);
}
.oh-close:hover { color: var(--ink); }
.oh-close .x { width: 11px; height: 11px; position: relative; display: inline-block; }
.oh-close .x::before, .oh-close .x::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor;
}
.oh-close .x::before { transform: rotate(45deg); }
.oh-close .x::after { transform: rotate(-45deg); }
.open-head .num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.open-head .descr {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: none;
  margin: 0;
  flex: 0 0 auto;
  /* Fixed two-line box so the header height never changes with viewport width */
  height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Scroll viewport */
.scroller {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-2) transparent;
}
.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-thumb { background: var(--ink-2); }
.scroller::-webkit-scrollbar-track { background: transparent; }

.works {
  display: flex;
  gap: var(--workgap, 120px);
  padding: 36px var(--workgap, 96px) 28px;
  height: 100%;
  align-items: stretch;
  width: max-content;
  --capW: 150px;
}
.cartel { text-align: left; align-self: stretch; }
.work {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  height: 100%;
  min-height: 0;
  margin: 0;
  width: max(calc(var(--fh, 62vh) * var(--ar)), var(--capW, 150px));
}
.work-frame {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--fh, 62vh) * var(--ar));
  max-width: 100%;
  aspect-ratio: var(--ar);
  min-height: 0;
  background: var(--bg);
}
.work-frame .ph { position: absolute; inset: 0; }
.app.shade-bottom .work-frame {
  filter: drop-shadow(0 22px 26px rgba(20,18,14,0.32));
}
.cartel {
  margin-top: 26px;
  flex: 0 0 auto;
  height: var(--cartelH, 96px);
  overflow: visible;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ink-2);
  text-transform: uppercase;
  width: 100%;
}
.cartel .t {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.cartel .row { display: block; }
.cartel .row .k { color: var(--muted); margin-right: 6px; }

/* Footer hint inside open band */
.open-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 36px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.open-foot .close {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}
.open-foot .close:hover { color: var(--ink); }
.open-foot .close .x {
  width: 12px; height: 12px;
  position: relative;
}
.open-foot .close .x::before, .open-foot .close .x::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1px; background: currentColor;
}
.open-foot .close .x::before { transform: rotate(45deg); }
.open-foot .close .x::after { transform: rotate(-45deg); }

/* ---------- Curtain overlay (cinema feel) ---------- */
.curtain-top, .curtain-bot {
  position: absolute; left: 0; right: 0;
  background: #0c0c0c;
  z-index: 5;
  pointer-events: none;
  height: 0;
  transition: height 320ms var(--ease);
}
.curtain-top { top: 0; }
.curtain-bot { bottom: 0; }
.band.opening .curtain-top, .band.opening .curtain-bot { height: 50%; }
.band.open .curtain-top, .band.open .curtain-bot { height: 0; transition-delay: 60ms; }

/* ---------- Striped placeholder ---------- */
.ph {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(17,17,17,0.06) 14px 15px
    ),
    linear-gradient(0deg, var(--bg), var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph .ph-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  padding: 4px 10px;
  border: 1px solid var(--rule);
}

/* ---------- Side overlay (Bio / Contact / Press) ---------- */
.overlay-scrim {
  position: fixed; inset: 0;
  background: rgba(12,12,12,0.18);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.overlay-scrim.show { opacity: 1; pointer-events: auto; }

.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 92vw);
  background: var(--paper);
  z-index: 45;
  transform: translateX(100%);
  transition: transform 360ms var(--ease);
  display: grid;
  grid-template-rows: auto auto 1fr;
  border-left: 1px solid var(--rule);
}
.overlay.show { transform: translateX(0); }

.overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--rule);
}
.overlay-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 0;
  letter-spacing: -0.005em;
}
.overlay-head .close {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
}
.overlay-body {
  padding: 28px;
  overflow-y: auto;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.overlay-body p { margin: 0 0 14px; }
.overlay-body .bio-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: start;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.overlay-body .bio-portrait {
  width: 220px;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}
.app.spot-active .bio-portrait { mix-blend-mode: screen; filter: invert(1); }
.overlay-body .bio-head-text { padding-top: 4px; }
.overlay-body .bio-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.overlay-body .bio-name {
  font-family: var(--serif, var(--display));
  font-weight: 500;
  font-size: 34px;
  line-height: 1.05;
  margin: 8px 0 14px;
  color: var(--ink);
}
.overlay-body .bio-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.overlay-body .bio-body {
  columns: 2;
  column-gap: 34px;
}
.overlay-body .bio-body p { break-inside: avoid; }
.overlay-body .bio-body p:first-child::first-letter {
  font-family: var(--serif, var(--display));
  font-size: 46px;
  line-height: 0.8;
  float: left;
  padding: 4px 8px 0 0;
  color: var(--ink);
}
@media (max-width: 640px) {
  .overlay-body .bio-head { grid-template-columns: 150px 1fr; gap: 18px; }
  .overlay-body .bio-portrait { width: 150px; }
  .overlay-body .bio-name { font-size: 26px; }
  .overlay-body .bio-body { columns: 1; }
}
.overlay-body .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin: 24px 0 8px;
}
.overlay-body .label:first-child { margin-top: 0; }
.overlay-body ul { list-style: none; padding: 0; margin: 0; }
.overlay-body li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.overlay-body li:last-child { border-bottom: 0; }
.overlay-body li .y {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  padding-top: 2px;
}
.overlay-body a.link {
  border-bottom: 1px solid var(--ink);
}
.press-links li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}
.press-links li a { border-bottom: 1px solid var(--rule); line-height: 1.4; }
.press-links li a:hover { border-color: var(--ink); }
.press-links .plang {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  padding-top: 3px;
}
.site-credit {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.overlay-foot {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}
.ov-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  flex: 1 1 50%;
}
.ov-nav.next { justify-content: flex-end; text-align: right; border-left: 1px solid var(--rule); }
.ov-nav:hover { background: var(--bg); }
.ov-arr { font-size: 15px; color: var(--ink-2); }
.ov-nav:hover .ov-arr { color: var(--ink); }
.ov-nav-txt { display: flex; flex-direction: column; gap: 3px; }
.ov-nav-k {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.ov-nav-t {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}

/* Subtle indicator pulsing on closed bands */
@keyframes idle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.band:not(.open) .band-cta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink);
  animation: idle 2.6s var(--ease) infinite;
  margin-right: 12px;
}

/* ---------- Real artwork images (never cropped) ---------- */
.cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  padding: 14px;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.work-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.cover-cycle { position: absolute; inset: 0; }
.cover-cycle .cycle-layer { opacity: 0; transition: opacity 0.9s ease; }
.cover-cycle .cycle-layer.on { opacity: 1; }

/* ---------- Spotlight — whole-site light inversion ---------- */
/* Smooth palette transition on everything that carries colour */
.header, .wordmark, .wordmark .sub, .nav button, .lang, .lang button,
.stack, .band, .band-label, .band-num, .band-title, .band-meta,
.band-cta, .open-view, .open-head, .open-head h2, .open-head .num,
.open-head .descr, .open-foot, .cartel, .cartel .t, .cartel .k, .ph, .ph-label {
  transition: background-color 700ms var(--ease), color 700ms var(--ease),
              border-color 700ms var(--ease);
}

/* Re-define the design tokens on the spotlit app — every var() flips at once,
   so the header, bands, cartels and text all fall into darkness together and
   the type reads warm-white, as if the room lights went down. */
.app.spot-active {
  --bg: #0b0a08;
  --paper: #100f0c;
  --paper-alt: #100f0c;
  --ink: #f4eee2;
  --ink-2: #b8b0a0;
  --muted: #6c665a;
  --rule: rgba(255,255,255,0.09);
  color: var(--ink); /* re-resolve inherited text colour so titles flip too */
}
.app.spot-active .header { background: var(--bg); }
.app.spot-active .stack { background: #000; }
.app.spot-active .ph { background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.05) 14px 15px),
    #0d0c0a; }
.app.spot-active .ph-label { background: #17150f; border-color: var(--rule); }

/* moving light wash over a lit frame */
.lightwash {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; opacity: 0;
  mix-blend-mode: soft-light;
  background: radial-gradient(44% 48% at 32% 26%,
              rgba(255,255,255,0.95) 0%,
              rgba(255,246,230,0.4) 34%,
              rgba(255,246,230,0) 72%);
  transition: opacity 640ms var(--ease);
}

/* neighbours recede into shadow */
.work { transition: filter 560ms var(--ease); }
.work-frame { transition: filter 560ms var(--ease), box-shadow 560ms var(--ease); }
.cartel { transition: opacity 460ms var(--ease), color 560ms var(--ease); }
.work.dim .work-frame { filter: brightness(0.2) saturate(0.5); }
.work.dim .cartel { opacity: 0.12; }

/* the spotlit work is lifted above the light layer so the light never
   lands ON the artwork (its colours stay true); it only blooms around it. */
.work.lit { position: relative; z-index: 30; }
.work.lit .work-frame {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 24px 70px -24px rgba(0,0,0,0.55);
}
.work.lit .cartel { opacity: 1; }

@keyframes gallerylight {
  0%   { transform: translate(-2%, -1%) scale(1.02); opacity: 0.82; }
  50%  { transform: translate(2.5%, 1.5%) scale(1.06); opacity: 1; }
  100% { transform: translate(1%, -2%) scale(1.03); opacity: 0.9; }
}

/* The light itself — a soft, DIFFUSE, PURE-WHITE bloom on a fixed layer so it
   is never clipped by the category edges, and STATIC (it does not move or
   flicker). It sits behind the lit artwork (z 25 < 30) so it haloes the
   drawing without tinting it. */
.light-source {
  position: fixed; inset: 0; z-index: 25;
  pointer-events: none; opacity: 0;
  background:
    radial-gradient(52vw 70vh at var(--spot-x, 50%) var(--spot-y, 54%),
      rgba(255,255,255,0.34) 0%,
      rgba(255,255,255,0.18) 32%,
      rgba(255,255,255,0.07) 54%,
      rgba(255,255,255,0) 76%);
  transition: opacity 820ms var(--ease);
}
.app.spot-active .light-source { opacity: 1; }

/* ---------- Cursors (replace the zoom loupe) ---------- */
/* aim-a-light ring: dark on the lit gallery, warm-white once the room dims */
.open-view:not(.spotlit) .work {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='10' fill='none' stroke='%23141414' stroke-width='1.3'/%3E%3Ccircle cx='15' cy='15' r='1.6' fill='%23141414'/%3E%3C/svg%3E") 15 15, pointer;
}
.open-view.spotlit .work.dim {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='10' fill='none' stroke='%23fff2dc' stroke-width='1.3'/%3E%3Ccircle cx='15' cy='15' r='1.6' fill='%23fff2dc'/%3E%3C/svg%3E") 15 15, pointer;
}
.open-view.spotlit .work.lit {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cline x1='9.5' y1='9.5' x2='20.5' y2='20.5' stroke='%23fff2dc' stroke-width='1.4'/%3E%3Cline x1='20.5' y1='9.5' x2='9.5' y2='20.5' stroke='%23fff2dc' stroke-width='1.4'/%3E%3C/svg%3E") 15 15, pointer;
}

/* ---------- Sold marker ---------- */
.sold {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-left: 9px;
  vertical-align: middle;
  cursor: help;
  outline: none;
  font-style: normal;
}
.sold-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c0342b;
  box-shadow: 0 0 0 3px rgba(192,52,43,0.14);
  display: block;
}
.sold-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a1a1a;
  color: #fff;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 9px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 60;
}
.sold-tip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1a1a1a;
}
.sold:hover .sold-tip, .sold:focus .sold-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Commande overlay panel ---------- */
.com-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2e7d54;
  border: 1px solid rgba(46,125,84,0.45);
  padding: 4px 10px;
  margin-bottom: 20px;
}
.com-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2e7d54;
  box-shadow: 0 0 0 3px rgba(46,125,84,0.16);
}
.com-steps { list-style: none; margin: 0 0 8px; padding: 0; }
.com-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  padding: 0 0 20px;
}
.com-steps .n {
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 5px;
}
.com-steps .st {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 3px;
}
.com-steps .sd {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.com-note {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c0342b;
  margin-left: 10px;
  vertical-align: middle;
}
.fprice {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #c0342b;
  margin-left: 10px;
}
.com-formats { list-style: none; margin: 0 0 28px; padding: 0; }
.com-formats li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.com-formats li:first-child { border-top: 1px solid var(--rule); }
.com-formats .fname {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
}
.com-formats .fdim {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  align-self: end;
}
.com-formats .flead {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.com-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.com-cta:hover { color: var(--muted); border-color: var(--muted); }

/* ---------- Espresso cover photo (in the Couverture column) ---------- */
.cover-photo { object-fit: contain; object-position: center; padding: 12px; }

/* ---------- Reveal lens (show the original watercolor stain under cursor) ---------- */
.reveal-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  opacity: 0;
  pointer-events: none;
  -webkit-user-drag: none; user-select: none;
  transition: opacity 160ms var(--ease);
  -webkit-mask-image: radial-gradient(circle var(--lr, 90px) at var(--lx, 50%) var(--ly, 50%), #000 0%, #000 62%, rgba(0,0,0,0.35) 82%, transparent 100%);
  mask-image: radial-gradient(circle var(--lr, 90px) at var(--lx, 50%) var(--ly, 50%), #000 0%, #000 62%, rgba(0,0,0,0.35) 82%, transparent 100%);
}
.work-frame.revealable:hover .reveal-img { opacity: 1; }
.work-frame.revealable { cursor: crosshair; }

/* ---------- Read-more (pitch) button ---------- */
.readmore {
  margin-top: 0;
  flex: 0 0 auto;
  align-self: baseline;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.readmore .ar { transition: transform 260ms var(--ease); }
.readmore:hover .ar { transform: translateX(5px); }

/* ---------- Pitch reader modal ---------- */
.pitch-scrim {
  position: fixed; inset: 0;
  background: rgba(12,12,12,0.34);
  z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity 260ms ease;
}
.pitch-scrim.show { opacity: 1; pointer-events: auto; }
.pitch-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  width: min(720px, 92vw);
  max-height: 84vh;
  background: var(--paper);
  z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--rule);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.4);
}
.pitch-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.pitch-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 26px 34px 20px;
  border-bottom: 1px solid var(--rule);
}
.pitch-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 10px;
}
.pitch-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  margin: 0;
  letter-spacing: -0.01em;
}
.pitch-head .close {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
}
.pitch-head .close:hover { color: var(--ink); }
.pitch-head .x2 { width: 12px; height: 12px; position: relative; display: inline-block; }
.pitch-head .x2::before, .pitch-head .x2::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor;
}
.pitch-head .x2::before { transform: rotate(45deg); }
.pitch-head .x2::after { transform: rotate(-45deg); }
.pitch-body {
  padding: 26px 34px 34px;
  overflow-y: auto;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
}
.pitch-body p { margin: 0 0 16px; text-wrap: pretty; }
.key-hint {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; gap: 22px; z-index: 60;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); pointer-events: none;
  opacity: 0; animation: khfade 500ms var(--ease) 300ms forwards;
}
@keyframes khfade { to { opacity: 1; } }
.key-hint .kh-grp { display: inline-flex; align-items: center; gap: 6px; }
.key-hint kbd {
  font-family: var(--mono); font-size: 11px; line-height: 1;
  min-width: 18px; height: 18px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 4px; color: var(--ink-2);
}
.pitch-body .pitch-link { border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.pitch-body .pitch-link .ar { border-bottom: 0; }
.pitch-body .pitch-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 30px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}

@media (max-height: 720px) {
  .works { padding: 20px 40px; }
}

@media (max-width: 900px) {
  /* Phone/tablet — OPTION D: viewport-height accordion. All series fit the
     screen; the open series shows a horizontal filmstrip of its drawings, the
     others stay as tappable title bars. Tap a bar to open, tap title to close. */
  html, body { height: 100%; overflow: hidden; }
  .app { grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; }

  /* Header — name + glued socials, tagline on its own small line, FR▾ at right, then evenly-spread nav */
  .header { flex-wrap: wrap; height: auto; padding: 12px 16px 0; gap: 0; z-index: 40; position: relative; }
  .wordmark { flex: 1 1 auto; width: auto; font-size: 22px; gap: 10px; flex-wrap: nowrap; align-items: center; padding-bottom: 12px; min-width: 0; }
  .wordmark > span:first-child { order: 1; }
  .wordmark-sig img { height: 30px; transform: translateY(-4px); }
  .wordmark .sub { order: 2; display: inline-flex; flex: 0 1 auto; padding-left: 0; white-space: nowrap; }
  .wordmark-socials { order: 3; margin-left: 8px; padding-left: 0; gap: 12px; flex: 0 0 auto; }
  .wordmark-socials svg { width: 17px; height: 17px; }
  .lang-dd { display: inline-flex; margin-left: 8px; flex: 0 0 auto; align-self: center; }
  .lang { display: none; }
  .nav-toggle { display: inline-flex; margin-left: 10px; flex: 0 0 auto; align-self: center; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 44;
    width: 100%; order: 2; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 34px rgba(0,0,0,.14); padding: 0; display: none;
  }
  .nav.open { display: flex; }
  .nav button { width: 100%; text-align: left; font-size: 12px; letter-spacing: 0.16em; padding: 16px 18px; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
  .nav button:last-child { border-bottom: 0; }
  .nav button.active { color: var(--ink); }
  .nav button.active::after { display: none; }

  /* Stack fills the viewport; bands share height via the flex mechanic */
  .stack { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
  .band { overflow: hidden; }
  .stack[data-open="true"] .band:not(.open) { flex: 0 0 auto; min-height: 0; }
  .stack[data-open="true"] .band.open { flex: 1 1 auto; min-height: 0; }
  .band-inner { grid-template-columns: 1fr; height: 100%; }
  .band-label { padding: 18px; border-right: 0; justify-content: center; gap: 8px; }
  .band-title { font-size: 24px; }
  .band-meta { flex-wrap: wrap; gap: 8px 12px; }
  .band-cover, .band-cta { display: none; }

  /* Collapsed series = tappable title bars (title + number + "+") */
  .stack[data-open="true"] .band:not(.open) .band-inner { grid-template-columns: 1fr; }
  .stack[data-open="true"] .band:not(.open) .band-label {
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 14px; padding: 11px 18px;
  }
  .stack .band:not(.open) .band-title { font-size: 17px; font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
  .stack .band:not(.open) .band-num { font-size: 9px; flex: 0 0 auto; }
  .stack .band:not(.open) .band-meta { display: none; }
  .stack .band:not(.open) .band-label::after {
    content: "+"; margin-left: auto; font-family: var(--mono); font-size: 16px;
    color: var(--muted); line-height: 1; align-self: center;
  }

  .open-head { grid-template-columns: 1fr; padding: 14px 18px 10px; gap: 8px; align-items: start; }
  .open-head .meta { display: none; }
  .oh-titleline { flex-direction: row; align-items: baseline; flex-wrap: nowrap; gap: 8px; }
  .oh-titleline h2 { flex: 0 0 auto; }
  .oh-medium { font-size: 8px; letter-spacing: .09em; white-space: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .open-head h2 { font-size: 24px; }
  .open-head .num { margin-bottom: 2px; }
  .open-head .descr { font-size: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .open-head.descr-open .descr { -webkit-line-clamp: unset; overflow: visible; }
  .descr-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-family: var(--mono); font-size: 16px; line-height: 1; color: var(--muted); margin-top: 2px; }
  .open-head.descr-open .descr-toggle { color: var(--ink); }

  /* Keep the horizontal filmstrip; works are sized to the open bar's height */
  .works { padding: 18px 20px 20px; --capW: 116px; }
  .cartel .t { font-size: 13px; }
  .cartel { font-size: 9px; }
  .app.shade-bottom .work-frame { filter: drop-shadow(0 12px 18px rgba(20,18,14,0.24)); }

  /* Every series is expanded on mobile \u2014 no close/collapse affordance */
  .oh-close, .open-foot { display: none; }
  .key-hint { display: none; }

  /* Menu overlays: full-screen sheet, head fixed, body scrolls, foot pinned */
  .overlay { width: 100%; max-width: 100%; display: flex; flex-direction: column; }
  .overlay-body { flex: 1 1 auto; min-height: 0; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .com-grid { padding: 20px; grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  /* iPhone SE and narrower — drop work captions so drawings get the full height */
  .cartel { display: none; }
  .works { padding: 12px 14px; }
  .open-head h2 { font-size: 21px; }
}