/* =========================================================
   Selena Yang — portfolio
   One serif. White paper. The paintings are the design.
   ========================================================= */

/* Self-hosted Noto Sans (latin variable) so text renders in the right font on
   first paint — no swap from the system fallback, which previously shifted
   type metrics/spacing on every page navigation. */
@font-face{
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/noto-sans-latin.woff2") format("woff2");
}

:root{
  --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ink:   #f2f1ee;                 /* primary text (light, on dark) */
  --paper: #000000;                 /* page background — pitch black */
  --surface:#000000;
  --muted: #9b9b95;                 /* secondary text */
  --line:  rgba(255,255,255,0.12);  /* hairlines */
  --t: 200ms;                       /* the only transition speed in the building */

  /* Müller-Brockmann modular grid — single source of truth (content + overlay read these) */
  --cols: 12;
  --gutter: 24px;
  --margin: 40px;
  /* One continuous 12-col grid spans the whole viewport. The sidebar occupies
     columns 1–3, content occupies columns 4–12 (9 cols → three 3-col masonry
     blocks). Everything below is derived so the page IS the grid. */
  --colw: calc((100vw - 2*var(--margin) - 11*var(--gutter)) / var(--cols));
  --content-cols: 11;               /* columns 2–12 */
  /* Sidebar = column 1; content begins at column 2 left edge. A floor keeps the
     nav labels readable on narrower laptops (where 1 grid column is too thin). */
  --sidebar: max(calc(var(--margin) + var(--colw) + var(--gutter)), 240px);   /* floor widened to fit the larger signature */
  --bl: 8px;                        /* baseline unit */
  --lh: 24px;                       /* leading = 3 × baseline */
  --maxw: 1280px;
  /* One shared horizontal inset for EVERY full-bleed element, so all content
     aligns to the same centered grid columns at any viewport width. */
  --pad-inline: max(var(--margin), calc(50% - var(--maxw) / 2 + var(--margin)));

  /* Hero spacing decoupled from viewport height so the copy→paintings gap is
     CONSTANT at every size; only the peek (overlap into the gradient) scales. */
  --hero-foot: clamp(160px, 16vw, 260px);   /* gradient area below the copy */
  --hero-gap: 80px;                          /* fixed distance: copy → paintings */
}

html{ scroll-behavior:smooth; scroll-padding-top:16px; }

*, *::before, *::after{ box-sizing: border-box; }

html, body{ margin:0; padding:0; }
/* Always reserve the scrollbar track so 100vw (which the grid + sidebar math
   depend on) stays constant between short and long pages. Without this the
   sidebar width and spacing shift every time you navigate between pages. */
html{ overflow-y:scroll; scrollbar-gutter:stable; }

body{
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;                 /* 24px = 3 × 8px baseline */
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; }
figure{ margin:0; }                /* kill the UA 0 40px default so figures sit on the grid */
a{ color: inherit; }
address{ font-style: normal; }
cite{ font-style: normal; }
/* Italics are now used deliberately for artwork titles (Artsy-style). */

body.no-scroll, body.nav-open{ overflow: hidden; }

/* Skip link (accessibility) ------------------------------ */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:2000; letter-spacing:.1em; font-size:16px;
}
.skip-link:focus{ left:12px; top:12px; }

/* =========================================================
   Header / navigation — LEFT SIDEBAR on desktop
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar); z-index:50;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:36px 12px 36px var(--margin);   /* text sits on grid column 1 */
  background: var(--paper);
}
/* Sidebar is always opaque — scrolled state is a no-op */
.site-header.scrolled{ background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
body.nav-open .site-header{ background:var(--paper); }

.wordmark{
  display:inline-block; line-height:0; text-decoration:none;
  transition: opacity var(--t) ease;
}
.wordmark:hover{ opacity:.55; }
.wordmark-sig{ display:block; width:130px; height:auto; }

.site-header .nav{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0; margin-top:40px; flex:1; width:100%;
}

.nav-menu{
  list-style:none; display:flex; flex-direction:column;
  gap:0; margin:0; padding:0; width:100%;
}
.nav-menu > li{ width:100%; }
.nav-menu > li > a{
  font-size:16px; letter-spacing:.01em; font-weight:500; text-transform:none;
  text-decoration:none; padding:7px 0; display:block;
  opacity:.38; transition: opacity var(--t) ease;
}
.nav-menu > li > a:hover,
.nav-menu > li > a.is-active{ opacity:1; }

/* Sub-items — hidden by default, revealed when parent li is hovered */
.nav-sub{
  list-style:none; margin:0; padding:0 0 0 12px;
  max-height:0; overflow:hidden;
  transition: max-height 220ms ease, opacity 220ms ease;
  opacity:0;
}
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub{
  max-height:120px; opacity:1;
}
.nav-sub li a{
  font-size:16px; font-weight:400;
  text-decoration:none; padding:3px 0; display:block;
  opacity:.38; transition: opacity var(--t) ease;
}
.nav-sub li a:hover,
.nav-sub li a.is-active{ opacity:1; }

.btn.nav-pill{
  margin-top:auto; align-self:flex-start;
  padding:10px 22px; font-size:16px; font-weight:500;
  letter-spacing:.01em; text-transform:none;
  border-radius:999px; border:0;
  line-height:1;
  transition:border-color var(--t) ease, background var(--t) ease, color var(--t) ease, opacity var(--t) ease;
}
.btn.nav-pill:hover{ opacity:1; border-color:var(--ink); background:var(--ink); color:var(--paper); }

/* Shift all flow content right so it begins at grid column 4 (sidebar = cols 1–3) */
body{ padding-left:var(--sidebar); }
/* Content sits between the sidebar and the right edge with a matching --margin
   gap on both sides (left gap from the sidebar == right gap from the site edge). */
main, .site-footer{ --pad-inline: var(--margin) var(--margin); }

.wordmark:focus-visible,
.nav-menu a:focus-visible,
.nav-toggle:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px;
}

.nav-toggle{ display:none; }

/* =========================================================
   Buttons — Artsy-style: sentence case, no tracking, rounded rect.
   On the dark gallery, primary = light fill, secondary = outline.
   ========================================================= */
.btn{
  font-family: var(--font);
  font-weight:500;
  font-size:16px; letter-spacing:.01em; text-transform:none;
  line-height:1.2;
  padding:13px 24px;
  border:0;
  background: transparent;
  color: var(--ink);
  border-radius:3px;
  cursor:pointer;
  display:inline-block;
  text-decoration:none;
  -webkit-appearance:none; appearance:none;
  transition: opacity var(--t) ease, background var(--t) ease, color var(--t) ease;
}
.btn:hover{ opacity:.75; }
.btn:active{ opacity:.55; }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.btn--primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--primary:hover{ opacity:.82; }
.btn--secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--tertiary{
  background:transparent; border-color:transparent;
  padding-left:6px; padding-right:6px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}

/* =========================================================
   Work grid (masonry via CSS columns)
   ========================================================= */
.grid{
  column-count:3;
  column-gap:var(--gutter);
  padding:0;
}
@media (max-width:1024px){ .grid{ column-count:2; } }
@media (max-width:640px){ .grid{ column-count:1; column-gap:0; padding:0; } }

.work{
  break-inside:avoid;
  margin:0 0 var(--gutter);
  position:relative;
  display:block;
}

.work-open{
  display:block; width:100%; padding:0; margin:0; border:0;
  background:none; cursor:default; position:relative; overflow:hidden;
  line-height:0;
}
.work-open img{
  width:100%; height:auto; display:block;
  opacity:0; transition: opacity var(--t) ease;
}
.work-open img.loaded{ opacity:1; }

/* Hover magnifier lens */
.lens{
  position:absolute;
  width:172px; height:172px; border-radius:50%;
  border:1px solid rgba(20,20,20,.45);
  transform: translate(-50%, -50%);
  background-repeat:no-repeat;
  pointer-events:none;
  opacity:0;
  transition: opacity var(--t) ease, width 600ms ease, height 600ms ease;
  z-index:2;
}
.lens.dwelt{ width:280px; height:280px; }
.lb-lens{ width:280px; height:280px; }

/* Caption sits BELOW the image; revealed only on hover (space reserved so
   the artwork never shifts). */
.work-info{ padding-top:14px; }
.work-meta{
  margin:0; font-size:16px; letter-spacing:.01em; color:var(--muted);
  opacity:0; transition: opacity var(--t) ease;
}
.work-collection{
  margin:2px 0 0; font-size:16px; letter-spacing:.02em; color:var(--muted);
  opacity:0; transition: opacity var(--t) ease;
}
.work:hover .work-meta,
.work:focus-within .work-meta,
.work:hover .work-collection,
.work:focus-within .work-collection{ opacity:1; }
.work-title{ color:var(--ink); font-style:italic; }
.work-year{ color:var(--muted); }

/* Progressive-disclosure action buttons — revealed on hover, below the work */
.work-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;
  min-height:32px;                 /* reserve space so nothing shifts on hover */
  opacity:0;
  transition: opacity var(--t) ease;
}
.work:hover .work-actions,
.work:focus-within .work-actions{ opacity:1; }

/* No hover hardware → no lens, and keep the actions permanently visible */
@media (hover:none){
  .lens{ display:none; }
  .work-actions{ opacity:1; }
}

/* =========================================================
   Collection carousels — 3-up prev/next per section
   ========================================================= */
.section--gallery{
  height:90vh; min-height:400px;
  padding-block:0; padding-top:40px;
  /* padding-inline intentionally left to the shared .section rule so the
     image row and the header row below use the exact same right inset —
     otherwise they drift out of alignment with each other. */
  display:flex; flex-direction:column;
}

/* Title + nav row — now BELOW the image reel instead of above it. */
.coll-header{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px;
}
/* Collection name stays in normal flow (same box, same space) at all
   times, so the nav never shifts — only its opacity toggles. Hovering
   (or focusing) any painting below reveals it (see gallery.js). Matches
   .section-title so it reads like the rest of the site's headings. */
.coll-name{
  font-size:26px; font-weight:500; letter-spacing:.01em; line-height:1.2;
  color:var(--ink);
  opacity:0; transition:opacity var(--t) ease;
}
.coll-name.is-visible{ opacity:1; }

.coll-nav{ display:flex; align-items:center; gap:10px; }

.coll-arrow{
  width:42px; height:42px; border-radius:50%;
  border:0; background:transparent;
  color:var(--ink); line-height:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t) ease, opacity var(--t) ease;
}
.coll-arrow .coll-chevron{ width:18px; height:18px; display:block; }
.coll-arrow:hover:not(:disabled){ background:rgba(255,255,255,.15); }
.coll-arrow:disabled{ opacity:.28; cursor:default; }
.coll-arrow:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.coll-view{
  font-family:var(--font); font-size:16px; font-weight:500;
  letter-spacing:.01em; text-transform:none;
  text-decoration:none; color:var(--ink);
  padding:11px 22px; border:0; border-radius:999px;
  transition:background var(--t) ease;
}
.coll-view:hover{ background:rgba(255,255,255,.15); }

/* Viewport clips the reel */
.coll-viewport{ flex:1 1 0; min-height:0; overflow:hidden; }

.coll-reel{
  display:flex; gap:4px; height:100%;
  transition:transform 480ms cubic-bezier(0.4,0,0.2,1);
}

/* Each painting card */
.coll-item{
  flex:0 0 calc((100% - 2*4px) / 3);
  min-width:0; height:100%; margin:0; position:relative;
}
.coll-item .work-open{
  display:block; width:100%; height:100%;
  padding:0; margin:0; border:0; background:none;
  cursor:zoom-in; overflow:hidden; position:relative;
}
.coll-item .work-open img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  opacity:0; transition:opacity var(--t) ease;
}
.coll-item .work-open img.loaded{ opacity:1; }

/* Hover caption overlays the foot of each painting — just the title, revealed
   on hover/focus, organic and unobtrusive against the artwork itself. */
.coll-item .work-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:56px 18px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.38) 55%, transparent);
  opacity:0; transform:translateY(4px);
  transition:opacity var(--t) ease, transform var(--t) ease;
  pointer-events:none;
}
.coll-item:hover .work-info,
.coll-item:focus-within .work-info{ opacity:1; transform:none; }
.coll-item .work-meta{ margin:0; opacity:1; color:rgba(255,255,255,.85); }
.coll-item .work-title{ color:#fff; }

@media (max-width:1024px){
  .coll-item{ flex-basis:calc((100% - 4px) / 2); }
}
@media (max-width:640px){
  .section--gallery{ height:80vh; padding-top:24px; padding-inline:0; }
  .coll-item{ flex-basis:100%; }
  .coll-view{ display:none; }
}

/* =========================================================
   Collection page — every work in one collection
   ========================================================= */
/* Match the home page's top rhythm (#work starts at 40px) so the title
   doesn't jump when navigating between Selected Work and a collection. */
#collection{ padding-top:40px; }
.collection-page-head{ margin:0 0 44px; }
.collection-back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  margin-left:-22px;   /* offset the pill's own padding so the text still lines up on the grid */
  font-size:12px; font-weight:500; letter-spacing:.01em; text-transform:none;
  color:var(--muted); text-decoration:none;
  padding:11px 22px; border-radius:999px;
  transition:color var(--t) ease, background var(--t) ease;
}
.collection-back:hover{ color:var(--ink); background:rgba(255,255,255,.15); }
.collection-back-chevron{ width:14px; height:14px; flex:0 0 auto; }

.collection-page-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gutter);
  align-items:start;
}
.cp-item{ margin:0; }
.cp-open{
  display:block; width:100%; position:relative;
  padding:0; margin:0; border:0; background:none;
  cursor:zoom-in; overflow:hidden; line-height:0;
}
.cp-open img{
  width:100%; height:auto; display:block;
  opacity:0; transition:opacity var(--t) ease;
}
.cp-open img.loaded{ opacity:1; }

.cp-caption{
  margin-top:14px; line-height:1.5;
  font-size:16px; color:var(--ink); text-align:left;
}
.cp-title{ font-style:italic; }
.cp-year{ color:var(--muted); }
.cp-dims{ display:block; margin-top:2px; font-size:14px; color:var(--muted); }

@media (max-width:1024px){
  .collection-page-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .collection-page-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   All Work — filter bar
   ========================================================= */
.aw-filters{
  display:flex; flex-wrap:wrap; align-items:end; gap:24px;
  margin:0 0 40px;
}
.aw-filter{ display:flex; flex-direction:column; gap:8px; }
.aw-filter label{
  font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted);
}
.aw-filter input,
.aw-filter select{
  min-width:200px; padding:11px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);
  color:var(--ink); font-size:14px; font-family:inherit;
  transition:border-color var(--t) ease, background var(--t) ease;
}
.aw-filter input::placeholder{ color:var(--muted); }
.aw-filter input:focus,
.aw-filter select:focus{ outline:none; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); }
.aw-filter select{ cursor:pointer; }
.aw-clear{
  padding:11px 22px; border-radius:999px; border:1px solid transparent;
  background:none; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer;
  transition:color var(--t) ease, background var(--t) ease;
}
.aw-clear:hover{ color:var(--ink); background:rgba(255,255,255,.15); }
.aw-empty{ color:var(--muted); font-size:15px; padding:24px 0; }

@media (max-width:640px){
  .aw-filters{ flex-direction:column; align-items:stretch; gap:16px; }
  .aw-filter input,
  .aw-filter select{ min-width:0; width:100%; }
}

/* =========================================================
   Artwork detail view  (Artsy-inspired, dark)
   Image + filmstrip on the left, info panel + side CTAs on the right,
   prev/next nav, and an "Other works from <collection>" rail below.
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:#0b0b0b;
  opacity:0; visibility:hidden;
  transition: opacity var(--t) ease, visibility 0s linear var(--t);
}
.lightbox.is-open{ opacity:1; visibility:visible; transition: opacity var(--t) ease; }
.lb-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; }

.lb-close{
  position:fixed; top:18px; right:22px; z-index:6;
  width:42px; height:42px; border-radius:50%;
  background:rgba(28,28,30,.7); border:1px solid var(--line); color:#fff;
  font-size:16px; line-height:1; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition: background var(--t) ease;
}
.lb-close:hover{ background:rgba(64,64,68,.92); }

/* Stage: image left, info panel right */
.lb-stage{
  position:relative;
  display:flex; align-items:flex-start; justify-content:center; gap:56px;
  max-width:1280px; margin:0 auto; padding:76px var(--margin) 44px;
  min-height:100vh;
}
.lb-figure{ margin:0; display:flex; flex-direction:row; align-items:stretch; gap:56px; width:100%; justify-content:center; }
/* The [hidden] attribute is overridden by the display:flex rules below
   (author styles beat the UA default), so make it explicit here — this is
   how lightbox.js toggles between the artwork and "View in Room" modes. */
.lb-viewer[hidden], .lb-panel[hidden],
.lb-room-viewer[hidden], .lb-room-panel[hidden]{ display:none !important; }
.lb-viewer{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.lb-imgwrap{ position:relative; overflow:hidden; line-height:0; max-width:100%; }
.lb-img{
  max-width:min(48vw, 760px); max-height:80vh;
  width:auto; height:auto; object-fit:contain;
  opacity:0; transition: opacity var(--t) ease;
}
.lb-img.loaded{ opacity:1; }

/* Video media (process clips) — swaps in for the image; no lens */
.lb-video{
  display:none; max-width:min(48vw,760px); max-height:80vh;
  width:auto; height:auto; background:#000;
  opacity:0; transition: opacity var(--t) ease;
}
.lb-video.loaded{ opacity:1; }
.lightbox.media-video .lb-img{ display:none; }
.lightbox.media-video .lb-video{ display:block; }
.lightbox.media-video .lb-lens{ display:none; }

.lens.lb-lens{ width:260px; height:260px; }

/* Filmstrip under the image */
/* Filmstrip lives in the info panel now (under the title) */
.lb-filmstrip{ display:flex; gap:10px; margin:-8px 0 4px; flex-wrap:wrap; }
.lb-thumb{
  position:relative; width:60px; height:60px; padding:0; border:0; cursor:pointer;
  border-radius:6px; overflow:hidden; background:#1c1c1e; line-height:0;
  outline:2px solid transparent; outline-offset:2px;
  opacity:.55; transition: opacity var(--t) ease, outline-color var(--t) ease;
}
.lb-thumb:hover{ opacity:1; }
.lb-thumb.is-active{ opacity:1; outline-color:#fff; }
.lb-thumb img, .lb-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.lb-thumb-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(0,0,0,.28); pointer-events:none;
}
.lb-thumb:focus-visible{ outline-color:#fff; }

/* Info panel — Artsy type hierarchy */
.lb-panel{ flex:0 0 360px; max-width:360px; color:var(--ink); text-align:left; display:flex; flex-direction:column; }
.lb-artist{ margin:0 0 6px; font-size:18px; font-weight:600; letter-spacing:.01em; }
.lb-heading{ margin:0 0 22px; font-size:18px; font-weight:400; line-height:1.45; }
.lb-title{ font-style:italic; }
.lb-year{ color:var(--muted); }
.lb-details .lb-line{ margin:3px 0; font-size:16px; color:var(--muted); line-height:1.55; }
.lb-details .lb-coll{ margin-top:10px; color:var(--ink); }
.lb-description{ margin-top:auto; padding-top:22px; }
.lb-description .lb-desc-line{
  margin:0 0 6px; font-size:16px; line-height:1.6; font-style:italic; color:var(--ink);
}
.lb-description .lb-desc-line:last-child{ margin-bottom:0; font-style:normal; color:var(--muted); }
.lb-rule{ border:0; border-top:1px solid var(--line); margin:26px 0; }
.lb-cta{ display:flex; flex-direction:column; gap:12px; }
.lb-btn{ width:100%; text-align:center; }
.lb-room{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; color:var(--ink); cursor:pointer; padding:6px 0;
  font:500 16px var(--font);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  transition:opacity var(--t) ease;
}
.lb-room:hover{ opacity:.6; }
.lb-room:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* Prev / next — fixed circles at the screen edges */
.lb-nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%;
  background:rgba(28,28,30,.6); border:1px solid var(--line); color:#fff;
  font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition: background var(--t) ease;
}
.lb-prev{ left:18px; }
.lb-next{ right:18px; }
.lb-nav:hover{ background:rgba(64,64,68,.92); }
.lb-nav:focus-visible, .lb-close:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }

/* "Other works from <collection>" rail */
.lb-more{ max-width:1280px; margin:0 auto; padding:46px var(--margin) 88px; border-top:1px solid var(--line); }
.lb-more-title{ margin:0 0 26px; font-size:22px; font-weight:500; letter-spacing:.01em; color:var(--ink); }
.lb-more-rail{ display:flex; gap:28px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity; }
.lb-more-item{
  flex:0 0 auto; width:230px; background:none; border:0; padding:0; cursor:pointer;
  text-align:left; color:var(--ink); scroll-snap-align:start;
}
.lb-more-thumb{ display:block; height:230px; margin-bottom:14px; line-height:0; }
.lb-more-thumb img{ width:100%; height:100%; object-fit:contain; object-position:left bottom; transition:opacity var(--t) ease; }
.lb-more-item:hover .lb-more-thumb img{ opacity:.82; }
.lb-more-meta{ display:flex; flex-direction:column; gap:3px; }
.lb-more-artist{ font-size:16px; font-weight:600; }
.lb-more-name{ font-size:16px; color:var(--ink); }
.lb-more-name em{ font-style:italic; }
.lb-more-coll{ font-size:16px; color:var(--muted); }

/* Responsive — stack image over panel */
@media (max-width:1024px){
  .lb-stage{ flex-direction:column; align-items:center; padding-top:66px; }
  .lb-figure{ flex-direction:column; align-items:center; gap:30px; }
  .lb-viewer{ align-items:center; }
  .lb-img, .lb-video, .lb-filmstrip{ max-width:92vw; max-height:70vh; }
  .lb-filmstrip{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; }
  .lb-panel{ flex:none; width:100%; max-width:560px; text-align:left; }
  /* Absolute (scrolls with the stage) instead of fixed (pinned to the
     viewport) so the arrows don't cover content below as you scroll.
     Anchor them over the image (~top third of the tall stacked stage)
     rather than its 50% centre, which lands on the info text. */
  .lb-nav{ position:absolute; top:33vh; bottom:auto; }
}
@media (max-width:640px){
  .lb-img, .lb-video{ max-height:60vh; }
  .lb-more-item{ width:170px; }
  .lb-more-thumb{ height:170px; }
}

/* =========================================================
   Room view — a section BELOW the artwork in the same lightbox
   scroll. Nothing here is visible until the visitor scrolls down
   to it — no size picker or buy CTA sits above the fold. Only
   print sizes are chip-selectable/purchasable (no "Original" CTA).
   ========================================================= */
.lb-size-groups{ display:flex; flex-direction:column; gap:20px; }
.lb-size-group{ display:flex; flex-direction:column; gap:12px; }
.lb-size-label{ font-size:16px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); }
.lb-size-chips{ display:flex; flex-wrap:wrap; gap:12px; }

.room-size{
  font-family:var(--font); font-size:16px; font-weight:400; letter-spacing:0;
  color:var(--ink); background:rgba(255,255,255,.045);
  padding:16px 24px; border:0; border-radius:24px;
  cursor:pointer; white-space:nowrap;
  transition:background var(--t) ease, box-shadow var(--t) ease;
}
.room-size:hover{ background:rgba(255,255,255,.09); }
.room-size.is-selected{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.85); }
.room-size:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.room-buy{ align-self:stretch; text-align:center; }

/* Room preview row: canvas viewer + a narrow chips/buy panel beside it */
.lb-room-row{
  display:flex; gap:56px; align-items:flex-start;
  max-width:1280px; margin:0 auto; padding:8px max(var(--margin), 84px) 0;
}
.lb-room-viewer{
  position:relative;
  flex:1 1 0; min-width:0; height:min(56vh, 560px);
  background:#0b0b0b; border-radius:4px; overflow:hidden;
}
.room-canvas{ width:100%; height:100%; display:block; }
/* The artwork itself — positioned by room.js over the shader's frame rect */
.room-art{
  position:absolute; object-fit:cover; pointer-events:none; user-select:none;
  visibility:hidden;   /* room.js reveals it once positioned */
}

.lb-room-panel{
  flex:0 0 260px; max-width:260px; color:var(--ink); text-align:left;
  display:flex; flex-direction:column; gap:22px; padding-top:4px;
}

/* Sliders — a SEPARATE full-width row below viewer + panel, two columns:
   couch controls | person control + note (matches the reference mock). */
.lb-room-sliders{
  display:grid; grid-template-columns:1fr 1fr; gap:40px 56px;
  max-width:1280px; margin:0 auto; padding:36px max(var(--margin), 84px) 44px;
}
.room-sliders-col{ display:flex; flex-direction:column; gap:22px; }
.room-ctl{
  display:flex; flex-direction:column; gap:8px;
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.room-ctl output{ float:right; color:var(--ink); font-size:14px; letter-spacing:0; }
.room-ctl input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:rgba(255,255,255,.22); border-radius:2px; outline:none;
}
.room-ctl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%; background:var(--ink); cursor:pointer;
}
.room-ctl input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border:0; border-radius:50%; background:var(--ink); cursor:pointer;
}
.room-note{ margin:0; font-size:13px; color:var(--muted); }

/* Room responsive — MUST come after the base .lb-room-* rules above
   (equal specificity: whichever is later in the file wins). */
@media (max-width:1024px){
  /* Stack: canvas on top, chips/CTA below, both full-width. flex:none —
     the base flex-basis:0 would otherwise control the HEIGHT in this
     column layout and collapse the viewer to 0px. */
  .lb-room-row{ flex-direction:column; align-items:stretch; gap:22px; padding:0 var(--margin); }
  .lb-room-viewer{ flex:none; width:100%; height:44vh; max-height:440px; }
  .lb-room-panel{ flex:none; width:100%; max-width:560px; }
  .lb-room-sliders{ grid-template-columns:1fr; gap:28px; max-width:560px; padding:36px var(--margin) 44px; }
}
@media (max-width:640px){
  /* Smaller, proportionate room preview on phones (was oversized) */
  .lb-room-viewer{ height:38vh; max-height:340px; }
  .lb-size-groups{ gap:18px 24px; }
}

/* =========================================================
   Intro cascade — js/intro.js tags elements with [data-intro]
   and a --i index, then flips .is-in a frame later so the
   whole sidebar + first fold staggers in as one orchestrated
   move on load (and later sections do the same on scroll).
   ========================================================= */
[data-intro]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 55ms);
}
[data-intro].is-in{ opacity:1; transform:none; }

/* Lightbox open cascade — same choreography as the landing intro, applied
   to the artwork + each info-panel element (js/lightbox.js:staggerIn). */
.lb-in{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--si, 0) * 70ms);
}
.lb-in.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  [data-intro]{ transition:none !important; opacity:1 !important; transform:none !important; }
  .lb-in{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* =========================================================
   Modal (View on wall / View in your space / Prints)
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,18,18,.55);
  padding:24px;
  opacity:0; visibility:hidden;
  transition: opacity var(--t) ease, visibility 0s linear var(--t);
}
.modal.is-open{ opacity:1; visibility:visible; transition: opacity var(--t) ease; }
.modal-panel{
  position:relative; background:var(--paper);
  max-width:min(94vw, 880px); max-height:88vh; overflow:auto;
  padding:42px 46px 46px;
}
.modal-close{
  position:absolute; top:12px; right:16px;
  background:none; border:0; font-size:26px; line-height:1; cursor:pointer; padding:6px;
  transition: opacity var(--t) ease;
}
.modal-close:hover{ opacity:.5; }
.modal-close:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.modal-title{
  font-weight:400; font-size:16px; letter-spacing:.22em; text-transform:uppercase;
  margin:0 0 20px; color:var(--muted);
}
.modal-body p{ margin:0 0 12px; font-size:17px; }
.modal-note{ font-size:16px; color:var(--muted); }
.modal-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.wall-scene{ width:100%; height:auto; display:block; }
.wall-meta{ margin-top:16px; font-size:16px; color:var(--muted); letter-spacing:.04em; }
code{
  font-family: var(--font);
  font-size:16px; background:#f3f3f3; padding:1px 5px; border-radius:2px;
}

/* =========================================================
   About page
   ========================================================= */
.page{ padding:58px 40px 100px; max-width:1180px; margin:0 auto; }

.about{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; }
.about-media img{ width:100%; height:auto; display:block; }
.about-media figcaption{ font-size:16px; color:var(--muted); margin-top:10px; letter-spacing:.05em; }

.eyebrow{
  font-weight:400; font-size:16px; letter-spacing:.22em; text-transform:uppercase;
  margin:0 0 22px; color:var(--muted);
}
.statement p{ font-size:16.5px; line-height:1.75; margin:0 0 20px; font-weight:400; }
.statement .placeholder{ color:var(--muted); }

.cv{ margin-top:56px; }
.cv h2{
  font-weight:400; font-size:16px; letter-spacing:.22em; text-transform:uppercase;
  margin:34px 0 12px; color:var(--ink);
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.cv-list{
  display:grid; grid-template-columns:84px 1fr; gap:8px 20px;
  margin:0; font-size:16px; line-height:1.4;
}
.cv-year{ color:var(--muted); }

@media (max-width:860px){
  .about{ grid-template-columns:1fr; gap:34px; }
  .page{ padding:40px 22px 80px; }
}

/* =========================================================
   Contact page
   ========================================================= */
.contact{
  min-height:62vh;
  display:flex; flex-direction:column; justify-content:center;
  max-width:640px; margin:0 auto; padding:80px 24px;
}
.contact h1{ font-weight:400; font-size:24px; margin:0 0 22px; letter-spacing:.02em; }
.contact p{ font-size:17px; line-height:1.65; margin:0 0 28px; font-weight:400; }
.contact-links{ display:flex; flex-direction:column; gap:14px; font-size:16px; letter-spacing:.05em; }
.contact-links a{
  text-decoration:none; border-bottom:1px solid var(--ink);
  padding-bottom:2px; align-self:flex-start;
  transition: opacity var(--t) ease;
}
.contact-links a:hover{ opacity:.5; }
.contact-links a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* =========================================================
   Mobile — collapse sidebar to top bar
   ========================================================= */
@media (max-width:860px){
  body{ padding-left:0; }
  main, .site-footer{ --pad-inline: max(var(--margin), calc(50% - var(--maxw)/2 + var(--margin))); }

  .site-header{
    position:fixed; top:0; left:0; right:0; bottom:auto; width:auto;
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:16px var(--margin); gap:24px;
    background:rgba(0,0,0,0.86);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  .site-header.scrolled{ background:rgba(0,0,0,0.86); }
  .site-header .nav{
    flex-direction:row; align-items:center;
    gap:0; margin-top:0; flex:none; width:auto;
  }

  /* Logo shrinks here — the sidebar size is too tall for a slim top bar */
  .wordmark-sig{ width:96px; }

  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
    width:26px; height:18px; padding:0; border:0; background:none; cursor:pointer;
    order:3;
  }
  .nav-toggle span{ display:block; width:100%; height:1px; background:var(--ink); }
  .site-header .nav-pill{ display:none; }

  /* Anchored to the header itself (top:100%) instead of a hardcoded pixel
     offset, so the dropdown always sits flush against the header's actual
     height — it can't drift out of sync if the header's content changes. */
  .nav-menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:center; gap:20px;
    margin:0; padding:36px 0 44px;
    background:rgba(0,0,0,0.97); border-top:1px solid var(--line);
    opacity:0; visibility:hidden;
    transition: opacity var(--t) ease, visibility 0s linear var(--t);
  }
  .nav-menu.is-open{ opacity:1; visibility:visible; transition: opacity var(--t) ease; }
  .nav-menu > li > a{ font-size:16px; padding:4px 0; }
  .nav-menu > li > a:hover,
  .nav-menu > li > a.is-active{ opacity:1; }
  .nav-sub{ display:none; }
  .nav-pill{ margin-top:0; }
  html{ scroll-padding-top:72px; }

  /* Header is fixed/out-of-flow here, so #work needs its own top clearance
     to sit below it. Specificity bumped (body #work) so this reliably beats
     the unconditional #work rule later in the file, which would otherwise
     win the cascade tie and leave content peeking out from under the header. */
  body #work{ margin-top:0; padding-top:76px; }
  body.videos-off #work{ padding-top:96px; }
}
@media (max-width:640px){
  .site-header{ padding-inline:18px; }
}

/* =========================================================
   Pill buttons (Get updates / hero CTAs)
   ========================================================= */
/* "Pill" usages now follow the Artsy rounded-rectangle button. */
.btn--pill{
  border-radius:999px; text-transform:none; letter-spacing:.01em;
  font-weight:500; font-size:16px; padding:13px 24px;
}

/* Nav "Get updates": outline by default, fills white with black text on hover */
.nav-pill{
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  transition: background-color var(--t) ease, color var(--t) ease;
}
.nav-pill:hover, .nav-pill:focus-visible{ background:#fff; color:#000; opacity:1; }

/* =========================================================
   Long-page sections + gradient/video bands
   ========================================================= */
.section{ padding-block:88px; padding-inline:var(--pad-inline); }
.section-head{ margin:0 0 34px; }
.section-title{
  font-size:26px; font-weight:500; letter-spacing:.01em; line-height:1.2; margin:0;
}
.section-sub{ color:var(--muted); font-size:16px; margin:8px 0 0; max-width:56ch; }

/* A full-bleed band that can carry a looping video behind a gradient wash */
.band{ position:relative; overflow:hidden; isolation:isolate; background:#000; }
.band-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; opacity:.9;
}
/* Colorful washes over the video — lighter, with a soft left-dark layer for legibility */
.band-wash{ position:absolute; inset:0; z-index:-1; }
.band-wash--a, .band-wash--b, .band-wash--c{ background:
  linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,0) 72%),
  linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.30)); }
/* Keep dark page legible where bands meet content */
.band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, transparent 60%, var(--paper)); pointer-events:none; }

/* Legacy hero (video band) — kept for the closing quote-band */
.hero{ display:flex; align-items:flex-start; padding-block:132px var(--hero-foot); padding-inline:var(--pad-inline); }
.hero-inner{
  width:100%;
  display:grid; grid-template-columns:repeat(var(--content-cols),1fr); column-gap:var(--gutter);
  align-content:start;
}

.hero-title{
  grid-column:1 / 8;                 /* 7 of the 11 content columns */
  font-size:clamp(22px, 3.2vw, 44px); line-height:1.12; font-weight:500;
  margin:0 0 18px; letter-spacing:-0.01em;
}
.hero-sub{ grid-column:1 / 7; font-size:clamp(16px,1.5vw,19px); color:#e9e7e1; margin:0; opacity:.92; }

/* Global Collaborations */
.collab-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:var(--gutter); row-gap:48px;
}
.collab{ display:flex; flex-direction:column; gap:14px; }
.collab-logo{
  height:96px; display:flex; align-items:center; justify-content:flex-start;
  font-size:20px; font-weight:600; letter-spacing:.01em; color:var(--ink);
}
.collab-logo img{ max-height:96px; width:auto; }
.collab-portrait img{ width:120px; height:120px; object-fit:cover; border-radius:50%; }
.collab-text{ color:var(--muted); font-size:16px; line-height:1.5; margin:0; max-width:34ch; }

/* Quote band */
.quote-band{ padding-block:96px; padding-inline:var(--pad-inline); }
.quote-inner{
  width:100%;
  display:grid; grid-template-columns:repeat(var(--content-cols),1fr); column-gap:var(--gutter);
}
.quote{
  grid-column:1 / 9;                /* 8 of the 11 content columns */
  font-size:clamp(22px,3.2vw,40px); line-height:1.22; font-weight:500;
  margin:0; letter-spacing:-0.01em;
}
.quote cite{ display:block; margin-top:18px; font-size:16px; color:#e9e7e1; font-weight:400; }
.band-label{
  grid-column:1 / 9;
  font-size:clamp(28px,4vw,56px); line-height:1.1; font-weight:500;
  margin:0; letter-spacing:-0.01em; color:var(--ink);
}
.quote-foot{ grid-column:1 / 7; margin-top:26px; color:#dcdad3; font-size:16px; line-height:1.55; }

/* About the artist — copy + portrait placed on the grid (asymmetric, held in tension) */
.about-artist{ display:grid; grid-template-columns:repeat(var(--content-cols),1fr); column-gap:var(--gutter); align-items:start; }
.about-artist .about-copy{ grid-column:1 / 7; }
.about-artist .about-portrait{ grid-column:7 / 12; }
.about-artist .about-copy p{ font-size:17px; line-height:1.7; margin:0 0 18px; max-width:52ch; }
.about-artist .about-portrait img{ width:100%; height:auto; display:block; }

/* Largest breakpoint: About locks to the carousel's 3-column structure.
   2fr/1fr with the carousel's 2×4px gap puts the portrait's left edge on
   the exact line where the third painting tile begins; the body text runs
   up to that same line. One rhythm for the whole page. */
@media (min-width:1025px){
  .about-artist{ grid-template-columns:2fr 1fr; column-gap:8px; }
  .about-artist .about-copy{ grid-column:auto; padding-right:40px; }
  .about-artist .about-portrait{ grid-column:auto; }
  .about-artist .about-copy p{ max-width:none; }
}

/* Press */
.press-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 360px));
  gap:var(--gutter);
  align-items:start;
}

/* Instagram Reel cards — official blockquote embed; embed.js sizes each card.
   min-height keeps the card from collapsing before embed.js measures it. */
.press-reel{ margin:0; }
.press-reel .instagram-media{
  min-width:0 !important;
  width:100% !important;
  min-height:720px;
  margin:0 !important;
}

/* Metrics — sit below the video, revealed on hover */
.press-reel-metrics{
  display:flex; flex-direction:column; gap:4px;
  max-height:0; opacity:0; overflow:hidden;
  margin-top:0;
  transition:max-height 300ms ease, opacity 300ms ease, margin-top 300ms ease;
}
.press-reel:hover .press-reel-metrics,
.press-reel:focus-within .press-reel-metrics{
  max-height:120px; opacity:1; margin-top:14px;
}
.press-metric{ font-size:15px; color:var(--muted); }
.press-metric-num{ color:var(--ink); font-weight:500; }
.press-metric-num:empty::before{ content:"—"; color:var(--muted); font-weight:400; }

/* Exhibitions + Education side by side, placed on the grid */
.dual{ display:grid; grid-template-columns:repeat(var(--content-cols),1fr); column-gap:var(--gutter); align-items:start; }
.dual > .dual-col:first-child{ grid-column:1 / 7; }
.dual > .dual-col:last-child{ grid-column:7 / 12; }

/* Listings (Exhibitions / Education) */
.listing{ display:grid; gap:14px; max-width:760px; }
.listing p{ margin:0; font-size:16px; line-height:1.55; }
.listing .listing-muted{ color:var(--muted); }
.listing a{ color:inherit; text-underline-offset:3px; }
.listing .listing-group{ margin-top:10px; padding-top:20px; border-top:1px solid var(--line); }

/* Footer / Get updates */
.site-footer{ border-top:1px solid var(--line); margin-top:40px; padding-block:64px 80px; padding-inline:var(--pad-inline); }
.footer-inner{ width:100%; display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter); row-gap:40px; align-items:end; }
.updates h2{ font-size:24px; font-weight:500; margin:0 0 10px; }
.updates p{ color:var(--muted); margin:0 0 18px; font-size:16px; }
.updates-form{ display:flex; gap:10px; max-width:420px; }
.updates-form input{
  flex:1; background:transparent; border:1px solid var(--line); color:var(--ink);
  padding:11px 14px; border-radius:999px; font-family:var(--font); font-size:16px;
}
.updates-form input::placeholder{ color:var(--muted); }
.updates-form input:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.footer-meta{ text-align:left; }
.footer-meta .footer-links{ display:flex; gap:18px; flex-wrap:wrap; font-size:16px; }
.footer-meta a{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; transition:opacity var(--t) ease; }
.footer-meta a:hover{ opacity:.6; }
.footer-colophon{ color:var(--muted); font-size:16px; margin-top:24px; }

/* Section anchor offset already handled by scroll-padding-top */

@media (max-width:980px){
  .collab-grid{ grid-template-columns:repeat(2,1fr); }
  .about-artist{ grid-template-columns:1fr; gap:30px; }
  .about-artist .about-copy, .about-artist .about-portrait{ grid-column:auto; }
  .press-grid{ grid-template-columns:1fr 1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:30px; align-items:start; }
}
@media (max-width:640px){
  :root{ --margin:18px; }                 /* tighter inset on phones, still shared everywhere */
  .section{ padding-block:60px; }
  .hero{ padding-block:100px var(--hero-foot); }
  .quote-band{ padding-block:64px; }
  .collab-grid{ grid-template-columns:1fr; }
  .press-grid{ grid-template-columns:1fr 1fr; }
  .site-footer{ padding-block:48px 64px; }
  /* collapse grid-placed blocks to a single column on phones */
  .hero-inner, .quote-inner{ grid-template-columns:1fr; }
  .hero-title, .hero-sub, .quote, .quote-foot, .band-label{ grid-column:auto; }
  .dual{ grid-template-columns:1fr; gap:40px; }
  .dual > .dual-col{ grid-column:auto; }
}

/* =========================================================
   Müller-Brockmann grid overlay (toggle with the button or the G key).
   Overlay lives in the SAME centered content box and reads the SAME tokens
   as the content, so its columns ARE the content columns at every width.
   ========================================================= */
#grid-overlay{
  position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:0; transition:opacity var(--t) ease;
}
body.grid-on #grid-overlay{ opacity:1; }

/* baseline rhythm: faint line every baseline, stronger every leading */
#grid-overlay .go-baseline{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,70,70,.20) 0 1px, transparent 1px var(--lh)),
    repeating-linear-gradient(to bottom, rgba(255,70,70,.07) 0 1px, transparent 1px var(--bl));
}
/* Full-viewport 12-col track: the page IS this grid. Sidebar = cols 1–3,
   content = cols 4–12. Full-bleed (no max-width cap) so the red columns line up
   with both the sidebar text and the paintings. */
#grid-overlay .go-inner{
  position:relative; height:100%; margin:0;
  padding:0 var(--margin);
  display:grid; grid-template-columns:repeat(var(--cols),1fr); column-gap:var(--gutter);
}
@media (max-width:860px){
  #grid-overlay .go-inner{ max-width:var(--maxw); margin:0 auto; }
}
#grid-overlay .go-col{ position:relative; background:rgba(255,70,70,.09); }
#grid-overlay .go-col b{
  position:absolute; top:8px; left:4px; font:600 10px/1 var(--font);
  color:rgba(255,120,120,.95);
}
#grid-overlay .go-inner::before,
#grid-overlay .go-inner::after{
  content:""; position:absolute; top:0; bottom:0; width:1px; background:rgba(255,70,70,.55);
}
#grid-overlay .go-inner::before{ left:var(--margin); }
#grid-overlay .go-inner::after{ right:var(--margin); }

.toolbar{
  position:fixed; right:16px; bottom:16px; z-index:2001;
  display:flex; gap:8px;
}
.grid-toggle{
  background:rgba(20,20,22,.8); color:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font:500 16px var(--font); letter-spacing:.08em; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:opacity var(--t) ease, background var(--t) ease;
}
.grid-toggle:hover{ opacity:.7; }
.grid-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
body.grid-on #grid-toggle{ background:rgba(230,60,60,.92); border-color:transparent; }
/* Video toggle: filled when ON, hollow/dimmed when OFF */
#video-toggle[aria-pressed="true"]{ background:rgba(255,255,255,.92); color:#000; border-color:transparent; }

/* When videos are off, hide the band footage so the bands read as pure black. */
body.videos-off .band-video{ display:none; }
/* .hero class only used by the closing quote-band now; video-off hides band footage */
body.videos-off .hero{ display:none; }

/* Separator between hero gallery and the collection carousels */
#work{
  padding-bottom:0;
  border-top:1px solid var(--line);
  padding-top:40px;
}
#work-2{ padding-top:0; margin-top:80px; }

/* Toolbar hidden — grid toggles via G key only */
.toolbar{ display:none; }

/* Collection section labels — "Organic Utopia / Bouncy Waters" dividers */
.collection-label{
  display:flex; align-items:center; gap:16px;
  font-size:16px; letter-spacing:.08em;
  color:var(--muted); margin-bottom:20px;
}
.collection-label::after{ content:""; flex:1; height:1px; background:var(--line); }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; }
}