/* =========================================================
   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 — same faintness as the line above Contact (.site-footer) */
  --line-strong: rgba(255,255,255,0.12); /* nav border, "View all work" divider — matches --line exactly */
  --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);
  border-right:1px solid var(--line-strong);
}
/* 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; }
/* Condensed bio under the signature (landing page only) */
.wordmark-bio{
  margin:20px 0 0; font-size:13px; line-height:1.55; color:var(--muted);
}
/* Sidebar collapses to a slim top bar on mobile — no room for the bio there */
@media (max-width:860px){ .wordmark-bio{ display:none; } }

.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; }

/* "Selected Work" caret — sits after the label and rotates 180° when the
   submenu is open (parent hovered/focused), pointing up while expanded.
   Selector matches the base .nav-menu > li > a specificity (plus .nav-has-sub)
   so display:flex reliably wins over the base display:block. */
.nav-menu > li.nav-has-sub > a{ display:flex; align-items:center; gap:6px; }
.nav-caret{
  width:14px; height:14px; flex:0 0 auto;
  transition:transform var(--t) ease;
}
.nav-has-sub:hover .nav-caret,
.nav-has-sub:focus-within .nav-caret,
.nav-has-sub.is-expanded .nav-caret{ transform:rotate(180deg); }

/* Sub-items — hidden by default, revealed when parent li is hovered/focused,
   or held open by .is-expanded (JS keeps this ~10s after the pointer leaves
   so the categories don't vanish the instant you move away — see nav.js). */
.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,
.nav-has-sub.is-expanded .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.section--gallery (element+class) — deliberately more specific
   than the plain .section{padding-block:88px} rule below, which otherwise
   wins on source order and silently blows out this row's top padding,
   shrinking the image area. */
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;
}

/* Row BELOW the image reel. Desktop order (via flex `order`, DOM untouched):
   chevrons (left) · View collection · collection title (right). */
.coll-header{
  flex:0 0 auto;
  display:flex; align-items:center; gap:16px;
  padding-top:20px;
}
/* Title sits at the far right (margin-left:auto pushes it there, so View
   collection stays grouped by the chevrons on the left). It stays in normal
   flow at all times so nothing shifts — only its opacity toggles. Hovering
   (or focusing) any painting below reveals it (see gallery.js). Body-text
   size so it reads as a quiet label, not a big heading. */
.coll-name{
  order:3; flex:0 1 auto; min-width:0; margin-left:auto; text-align:right;
  font-size:16px; font-weight:400; letter-spacing:.01em; line-height:1.5;
  color:var(--ink);
  opacity:0; transition:opacity var(--t) ease;
}
.coll-name.is-visible{ opacity:1; }

.coll-nav{ order:1; flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.coll-view{ order:2; }

/* Mobile & tablet: chevrons move to the far right; title (left) · View
   collection · chevrons (right). View collection is hidden on phones (below),
   leaving title (left) · chevrons (right). */
@media (max-width:1024px){
  .coll-name{ order:1; margin-left:0; text-align:left; }
  .coll-view{ order:2; }
  .coll-nav{ order:3; margin-left:auto; }
}

.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.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).
   ========================================================= */
/* Purchase area — minimalist: no box, just a clear heading, the sizes, and a
   prominent button. Reads clean and compact so it doesn't crowd out the
   preview + controls. */
.room-buy-card{ display:flex; flex-direction:column; gap:14px; }
.room-buy-title{ margin:0; font-size:18px; font-weight:500; line-height:1.25; color:var(--ink); }

.lb-size-groups{ display:flex; flex-direction:column; gap:14px; }
.lb-size-group{ display:flex; flex-direction:column; gap:10px; }
.lb-size-label{ font-size:13px; font-weight:500; letter-spacing:.02em; text-transform:none; color:var(--muted); }
.lb-size-chips{ display:flex; flex-wrap:wrap; gap:10px; }

/* Selection = opacity, not a white ring: the chosen chip is full-strength,
   the rest fade back. No inset border to look odd or clip on mobile. */
.room-size{
  font-family:var(--font); font-size:15px; font-weight:400; letter-spacing:0;
  color:var(--ink); background:rgba(255,255,255,.10);
  padding:11px 18px; border:0; border-radius:999px;
  cursor:pointer; white-space:nowrap; opacity:.4;
  transition:background var(--t) ease, opacity var(--t) ease;
}
.room-size:hover{ opacity:.7; }
.room-size.is-selected{ opacity:1; background:rgba(255,255,255,.18); }
.room-size:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.room-buy{ align-self:stretch; text-align:center; }
/* Inert state before a size is chosen — visibly present (so the buy path is
   obvious) but clearly not yet actionable. */
.room-buy--pending{
  background:rgba(255,255,255,.10); color:var(--muted);
  cursor:default; pointer-events:none; box-shadow:none;
}

/* 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(46vh, 460px);
  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 */
}
/* The scale figure is drawn directly in the WebGL shader now (traced from
   images/Person.svg, painted with the couch's own material ramp) — see
   js/room.js — so there's no DOM overlay element for it. */

.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:repeat(3, 1fr); gap:18px 56px;
  max-width:1280px; margin:0 auto; padding:0 max(var(--margin), 84px) 32px;
}
/* Full-width header that separates the preview controls from the purchase
   card above — its own top border + label make clear these knobs only
   change the preview, not the print. */
.room-controls-head{
  grid-column:1 / -1;
  border-top:1px solid var(--line); margin-top:10px; padding-top:20px;
}
.room-controls-title{ margin:0 0 4px; font-size:16px; font-weight:500; color:var(--ink); }
.room-controls-sub{ margin:0; font-size:13px; line-height:1.5; color:var(--muted); max-width:60ch; }
.room-sliders-col{ display:flex; flex-direction:column; gap:18px; }

/* Lighting column — presets + warmth/brightness sliders */
.room-ctl-label{
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.room-presets{ display:flex; flex-wrap:wrap; gap:8px; }
.room-preset{
  font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:.01em;
  color:var(--ink); background:rgba(255,255,255,.10); border:0; border-radius:999px;
  padding:8px 15px; cursor:pointer; opacity:.4;
  transition:background var(--t) ease, opacity var(--t) ease;
}
.room-preset:hover{ opacity:.7; }
.room-preset.is-active{ opacity:1; background:rgba(255,255,255,.18); }
.room-preset:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.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); }

/* Inches / centimeters toggle — a small segmented control under the sliders */
.room-units{ display:inline-flex; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden; align-self:flex-start; }
.room-unit{
  font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:.01em;
  color:var(--ink); background:transparent; border:0; cursor:pointer; opacity:.4;
  padding:7px 16px; transition:background var(--t) ease, opacity var(--t) ease;
}
.room-unit:hover{ opacity:.7; }
.room-unit.is-active{ opacity:1; background:rgba(255,255,255,.14); }
.room-unit:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }

/* 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, purchase + controls below — all sharing the SAME
     left/right edge (same max-width + inset as the row) so the whole View
     in Room block lines up. flex:none — the base flex-basis:0 would
     otherwise drive the HEIGHT here and collapse the viewer to 0px. */
  .lb-room-row{ flex-direction:column; align-items:stretch; gap:20px; 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:none; }
  .lb-room-sliders{ grid-template-columns:1fr 1fr; gap:22px 40px; padding:0 var(--margin) 32px; }
}
@media (max-width:640px){
  /* Smaller, proportionate room preview on phones (was oversized) */
  .lb-room-viewer{ height:38vh; max-height:340px; }
  .lb-room-sliders{ grid-template-columns:1fr; gap:18px; }
  .lb-size-groups{ gap:14px; }
}

/* =========================================================
   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);
    border-right:0; border-bottom:1px solid var(--line-strong);
  }
  .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 20px 44px;   /* modest inset so text isn't flush against the screen edge */
    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; }
  /* At this breakpoint there's no hover to disclose the submenu, so the
     categories are always shown, slightly indented under "Selected Work" —
     no tap-to-expand, and no caret (nothing to toggle). */
  .nav-caret{ display:none; }
  .nav-sub{
    display:block; max-height:none; overflow:visible; opacity:1;
    padding-left:12px; margin-top:4px;
  }
  .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 */
/* Flex wrap so cards fit as many across as there's room for and wrap down
   otherwise — three on desktop, two on tablet, one on phones. Each card has
   flex-basis 326px (Instagram's hard min embed width) and a max-width cap so
   the embeds never stretch huge on wide screens; min-width:0 lets them shrink
   just below 326px on very narrow phones instead of overflowing the page. */
.press-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gutter);
  align-items:flex-start;
}
.press-grid > .press-reel{
  flex:1 1 326px;
  min-width:0;
  max-width:380px;
}

/* Instagram Reel cards — official blockquote embed; embed.js sizes each card.
   min-height keeps the card from collapsing before embed.js measures it.
   min-width:0 lets the card shrink inside its grid track. We deliberately do
   NOT set position/overflow here — Instagram's iframe is positioned relative
   to a higher ancestor, and making .press-reel the containing block makes the
   iframe and the blockquote fallback overlap. The responsive .press-grid keeps
   each column wide enough (>=326px) that the embed never overflows anyway. */
.press-reel{ margin:0; min-width: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; }

/* Press article card — an external link (e.g. news feature) that can't be
   iframe-embedded like Instagram, so it renders as a tappable card instead. */
.press-article-link{
  display:flex; flex-direction:column; gap:10px;
  padding:28px; height:100%; box-sizing:border-box;
  border:1px solid var(--line); border-radius:6px;
  text-decoration:none; color:var(--ink);
  transition:background var(--t) ease, border-color var(--t) ease;
}
.press-article-link:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.3); }
.press-article-outlet{ font-size:14px; letter-spacing:.02em; color:var(--muted); }
.press-article-headline{ font-size:20px; font-weight:500; line-height:1.3; }
.press-article-cta{ margin-top:auto; font-size:15px; color:var(--muted); }

/* 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; }
  .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; }
  .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; }
  /* Match the specificity of the desktop :first-child/:last-child placements
     (0,3,0) so this reset actually wins — a plain .dual > .dual-col (0,2,0)
     loses to them and leaves #education stuck in columns 7–12, overflowing. */
  .dual > .dual-col:first-child,
  .dual > .dual-col:last-child{ 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; }

/* Featured work grid — the landing hero. Full-bleed (no side inset) so the
   2×4 image grid runs from just past the sidebar to the right viewport edge,
   matching the rest of the site's full-width image rows. Flush to the top on
   desktop (no top padding); mobile keeps its header clearance via
   `body #work` in the 860px breakpoint. */
.section--work{
  padding:0;
}
.work-grid{
  /* 1px between images side-to-side; 16px row-gap so the caption under row 1
     has breathing room before row 2 (balances the two rows). */
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px 1px;
}
.wg-item{ margin:0; position:relative; }
/* 1px divider between rows of art (not between columns). 4 columns on
   desktop, so row 2 starts at the 5th item; 2 columns on tablet/mobile
   (below), so row 2 starts at the 3rd — each breakpoint's rule below
   overrides which items count as "row 2". */
.wg-item:nth-child(n+5){ border-top:1px solid var(--line); }
.wg-open{
  display:block; width:100%; position:relative;
  padding:0; margin:0; border:0; background:none;
  cursor:zoom-in; overflow:hidden; line-height:0;
}
.wg-open img{
  width:100%; aspect-ratio:3 / 4;
  object-fit:cover; object-position:center; display:block;
  opacity:0; transition:opacity var(--t) ease;
}
.wg-open img.loaded{ opacity:1; }
.wg-caption{
  padding:12px 4px 0; line-height:1.5;
  font-size:14px; color:var(--muted); text-align:left;
}
.wg-title{ font-style:italic; color:var(--ink); }
.wg-year{ color:var(--muted); }

/* "View all work" centered on a thin fill line (--line-strong, the same
   50%-opacity white as the nav border) that runs out to both edges and
   meets the button on each side. Normal .btn--pill size — a regular CTA,
   not sized to match a section heading. */
.work-grid-foot{ display:flex; align-items:center; gap:0; padding:44px 0 0; }
.work-grid-foot::before,
.work-grid-foot::after{
  content:""; flex:1 1 0; height:1px; background:var(--line-strong);
}

@media (max-width:1024px){
  .work-grid{ grid-template-columns:repeat(2, 1fr); }
  /* 2 columns here, so every row boundary shifts to the 3rd, 5th, 7th…
     item instead of the 5th. */
  .wg-item:nth-child(n+5){ border-top:0; }
  .wg-item:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* 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; }
}