/* =========================================================
   MADI MCCULLOUGH STUDIO — shared design system
   Helvetica-first, tight tracking, high-whitespace, minimal.
   ========================================================= */

:root{
  --ink:        #111111;
  --paper:      #FBFAF8;
  --paper-2:    #FFFFFF;
  --grey:       #8C8A85;
  --grey-light: #B9B7B1;
  --hairline:   #E4E2DC;
  --placeholder:#E9E7E1;
  --placeholder-text:#A8A6A0;

  --track-tight: -0.01em;   /* -1 tracking, applied via em so it scales */
  --track-wide:  0.08em;

  --gutter: 64px;
  --gutter-m: 32px;
  --gutter-s: 20px;

  --dur: 220ms;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: var(--track-tight);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button, input, textarea, select{ font-family: inherit; letter-spacing: inherit; }

::selection{ background: var(--ink); color: var(--paper); }

/* ---------- type scale ---------- */
.eyebrow{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--grey);
}
.h-display{
  font-size: clamp(48px, 8vw, 108px);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}
.h-1{
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
}
.h-2{
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0;
}
.body-l{
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.body{
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.small{
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey);
}

/* ---------- layout shell ---------- */
.wrap{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
@media (max-width: 900px){
  .wrap{ padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
}
@media (max-width: 560px){
  .wrap{ padding-left: var(--gutter-s); padding-right: var(--gutter-s); }
  :root{ --gutter:20px; }
}

/* ---------- top nav (interior pages) ---------- */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px var(--gutter);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.site-nav.is-scrolled{ border-bottom-color: var(--hairline); }

.brand{
  font-size: 15px;
  letter-spacing: var(--track-tight);
  white-space: nowrap;
}
.brand span{ color: var(--grey); }

.nav-links{
  display:flex;
  gap: 34px;
}
.nav-links a{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:1px;
  background: var(--ink);
  transition: right var(--dur) var(--ease);
}
.nav-links a:hover::after,
.nav-links a.is-active::after{ right:0; }
.nav-links a.is-active{ color: var(--ink); }

.nav-toggle{
  display:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:none;
  border:none;
  border-radius: 0;
  cursor:pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ink);
}

@media (max-width: 760px){
  .nav-links{
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter-m);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav-links.is-open{
    opacity:1; pointer-events:auto; transform: translateY(0);
  }
  .nav-links a{
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 13px;
  }
  .nav-toggle{ display:block; }
}

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--hairline);
  padding: 40px var(--gutter) 28px;
  display:flex;
  flex-wrap:wrap;
  gap: 20px 24px;
  align-items:flex-start;
  justify-content:space-between;
  margin-top: 120px;
}
.footer-links{ display:flex; gap: 28px; flex-wrap:wrap; padding-top: 2px; }

.footer-cols{ display:flex; gap: 48px; }
.footer-col{ display:flex; flex-direction:column; gap: 10px; }
.footer-col a{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--grey);
}
.footer-col a:hover{ color: var(--ink); }
.footer-col .footer-meta{ margin-top: 4px; }
.footer-links a{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--grey);
}
.footer-links a:hover{ color: var(--ink); }
.footer-meta{
  font-size: 11px;
  color: var(--grey-light);
  letter-spacing: var(--track-tight);
}

.footer-subscribe{
  display:flex;
  align-items:center;
  gap: 10px;
}
.footer-subscribe input{
  border:none;
  border-bottom: 1px solid var(--hairline);
  background:transparent;
  font-size: 12px;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  padding: 6px 2px;
  width: 180px;
}
.footer-subscribe input::placeholder{ color: var(--grey-light); }
.footer-subscribe input:focus{ outline:none; border-bottom-color: var(--ink); }
.footer-subscribe button{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:none;
  border:none;
  border-radius: 0;
  cursor:pointer;
  color: var(--ink);
  padding: 6px 0;
  line-height:1;
  transition: transform var(--dur) var(--ease);
}
.footer-subscribe button:hover{ transform: translateX(3px); }
.footer-subscribe-thanks{
  font-size: 12px;
  color: var(--grey);
  letter-spacing: var(--track-tight);
}

/* Desktop: subscribe form with the copyright line beneath it on the left,
   then two link columns on the right — Shipping & Returns / Commission
   Policy / Privacy Policy, then a narrower Instagram / TikTok column.
   The .footer-cols-mobile variant and standalone mobile copyright below
   are hidden here and only appear under 560px. */
.footer-left{ display:flex; flex-direction:column; gap: 14px; }
.footer-meta-desktop{ margin-top: 2px; }
.footer-cols-mobile{ display:none; }
.footer-meta-mobile{ display:none; }

/* Mobile footer: subscribe form centered at its original (non-stretched)
   size with no divider under it, then two link columns — Shipping &
   Returns / Commission Policy / Privacy Policy on the left, Instagram /
   TikTok on the right — and the copyright line at the very bottom. */
@media (max-width: 560px){
  .site-footer{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 40px var(--gutter-m) 36px;
  }
  .footer-subscribe{ justify-content: center; }
  .footer-subscribe input{ width: 140px; }
  .footer-meta-desktop{ display:none; }

  .footer-cols-desktop{ display:none; }
  .footer-cols-mobile{
    display:flex;
    justify-content:center;
    gap: 56px;
    margin-top: 32px;
  }
  .footer-cols-mobile .footer-col a{ font-size: 10px; }

  .footer-meta-mobile{
    display:block;
    text-align:center;
    margin-top: 24px;
    font-size: 10px;
  }
}

/* ---------- placeholder media block ---------- */
.ph{
  background: var(--placeholder);
  color: var(--placeholder-text);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  width:100%;
  overflow:hidden;
  position:relative;
}
.ph::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 48%, var(--hairline) 49%, var(--hairline) 51%, transparent 52%);
}
.ph.has-image::before{ content:none; }
.ph span{ position:relative; z-index:1; background:var(--placeholder); padding: 4px 10px; }

/* ---------- buttons / links ---------- */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.link-arrow svg{ transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg{ transform: translateX(4px); }

.btn{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display:inline-block;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  padding: 15px 30px;
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor:pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{ background: transparent; color: var(--ink); }
.btn-outline{
  background: transparent;
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: var(--paper); }

/* ---------- forms ---------- */
.field{ margin-bottom: 28px; }
.field label{
  display:block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--grey);
  margin-bottom: 10px;
}
.field input,
.field textarea,
.field select{
  width:100%;
  border:none;
  border-bottom: 1px solid var(--hairline);
  background:transparent;
  padding: 10px 0;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: var(--track-tight);
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-bottom-color: var(--ink);
}
.field textarea{ resize: vertical; min-height: 110px; }
.inquire-artwork-note{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 10px 14px;
  margin: 0 0 28px;
}
.inquire-honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.inquire-error{
  font-size: 14px;
  color: #B3261E;
  margin: 0 0 20px;
}
.inquire-error a{ text-decoration: underline; }
.field select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238C8A85' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px 6px;
}

/* ---------- grids ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px var(--gutter); }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 32px; }

@media (max-width: 900px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* ---------- utility ---------- */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.section{ padding: 100px 0; }
@media (max-width: 760px){ .section{ padding: 64px 0; } }
.fade-in{ animation: fadeIn 700ms var(--ease) both; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

/* =========================================================
   Landing page — full-bleed photo hero, copy + nav list
   overlaid directly on the image (replaces the earlier
   left-column/right-photo split — Madi asked for the photo to
   run edge to edge instead of sitting inside a boxed column).
   ========================================================= */
.landing-hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: url("../images/hero-desktop.jpg");
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

/* The sitewide nav is sticky + opaque everywhere else; on the homepage it
   floats transparently over the photo instead, so the image runs all the
   way to the very top edge of the page. */
.landing-hero-nav{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  background: transparent;
}

/* Two independent scrims: a light one behind the top nav so the brand mark
   stays legible over the photo, and a heavier one behind the bottom copy
   block, which carries the real reading weight (headline + body + the four
   nav-list links). Both are masked down to roughly the text column's width
   on desktop, so the rest of the photo stays completely uncovered. */
.landing-hero-scrim-top{
  position:absolute; top:0; left:0; right:0; height: 160px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
  -webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 62%);
  mask-image: linear-gradient(to right, black 0%, black 40%, transparent 62%);
  pointer-events:none;
}
.landing-hero-scrim-bottom{
  position:absolute; bottom:0; left:0; right:0; height: 58%;
  background: linear-gradient(to top, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 55%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 42%, transparent 62%);
  mask-image: linear-gradient(to right, black 0%, black 42%, transparent 62%);
  pointer-events:none;
}

.landing-hero-content{
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 56px;
  display:flex;
  flex-direction:column;
  gap: 40px;
}
.landing-hero-content .landing-left-top{ max-width: clamp(300px, 34vw, 460px); padding-top:0; }
.landing-hero-content .landing-left-top .h-display{
  font-size: clamp(44px, 6.5vw, 92px);
  margin-top: 0;
  margin-bottom: 22px;
}
.landing-hero-content .landing-left-top .body-l{ max-width: 40ch; color: rgba(17,17,17,0.72); }

/* Homepage-only nav list — replaces the top-right .nav-links on index.html so
   only one nav is visible at a time. Sizing/pattern reused from the retired
   .landing-index (numbered index) so the "bigger, numbered" look Madi liked
   carries over. Border color is a translucent ink rather than the sitewide
   hairline grey, since a near-white hairline disappears against the photo. */
.landing-nav-list{ border-top: 1px solid rgba(17,17,17,0.22); max-width: clamp(300px, 34vw, 460px); }
.landing-nav-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom: 1px solid rgba(17,17,17,0.22);
  padding: 18px 0;
  transition: padding-left var(--dur) var(--ease);
}
.landing-nav-list li:hover{ padding-left: 10px; }
.landing-nav-list a{
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink);
  display:flex;
  align-items:center;
}
.landing-nav-list a svg{
  opacity:0;
  flex-shrink:0;
  margin-left: 12px;
  transition: opacity var(--dur) var(--ease);
}
.landing-nav-list li:hover a svg{ opacity:1; }
.landing-nav-list li span{
  font-size: 11px;
  color: rgba(17,17,17,0.45);
  letter-spacing: var(--track-wide);
  flex-shrink:0;
  margin-left: 24px;
}

@media (max-width: 900px){
  .landing-hero-content .landing-left-top{ max-width: 100%; }
  .landing-nav-list{ max-width: 100%; }

  /* Below 900px the copy sits in the lower third of the first screen, with
     Art/Installations/Inquire/Bio following below — off-screen until the
     visitor scrolls, rather than everything crammed onto one screen. The
     old absolutely-positioned scrim divs were sized as a percentage of the
     hero's own height, which only worked when the hero was exactly one
     screen tall; now that its height is content-driven (photo keeps going
     as long as the copy needs it to), the scrim lives on the copy block
     itself instead, so it always wraps exactly the text regardless of how
     tall the section ends up. */
  .landing-hero{
    display: block;
    background-image: url("../images/hero-mobile.jpg");
    background-position: center center;
  }
  .landing-hero-scrim-top{
    -webkit-mask-image: none;
    mask-image: none;
  }
  .landing-hero-scrim-bottom{ display:none; }

  .landing-hero-content{
    display: block;
    margin-top: 50vh;
    padding: 150px var(--gutter-m) 56px;
    /* Long, multi-stop fade so it reads as an atmospheric haze rather than
       a hard edge — fully transparent at the top, easing up gradually, and
       reaching solid well before the eyebrow line so no text ever sits in
       the middle of the transition. */
    background: linear-gradient(to bottom,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0.28) 60px,
      rgba(255,255,255,0.6) 110px,
      rgba(255,255,255,0.87) 150px,
      rgba(255,255,255,0.87) 100%);
  }
  .landing-hero-content .eyebrow{ color: rgba(17,17,17,0.68); }
  .landing-hero-content .landing-left-top{ padding-bottom: 32px; }
}
@media (max-width: 560px){
  /* iOS Safari's address bar / bottom toolbar can shrink or grow the
     visible area, so a plain 100vh box is often taller than what's
     actually on screen — which pushes the photo's crop down further than
     intended. 100svh locks the box to the toolbar-visible height instead.
     Browsers without svh support just keep the 100vh fallback above. */
  .landing-hero{ min-height: 100svh; }
}

/* =========================================================
   Interior page header (Living / Art / Installations / About)
   ========================================================= */
.page-header{
  padding: 64px var(--gutter) 48px;
  border-bottom: 1px solid var(--hairline);
}
.page-header .eyebrow{ margin-bottom: 18px; }
.page-header .h-display{ margin-bottom: 24px; }
.page-header .body-l{ max-width: 56ch; color: var(--grey); }

.page-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 40px;
  flex-wrap:wrap;
}

/* ---------- filter tabs ---------- */
.filters{
  display:flex;
  gap: 28px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--hairline);
  flex-wrap:wrap;
}
.filters button{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:none; border:none; border-radius: 0; cursor:pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--grey);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.filters button.is-active,
.filters button:hover{ color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- product grid ---------- */
.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
  padding: 56px var(--gutter) 20px;
}
.product-card .ph{ aspect-ratio: 4 / 5; margin-bottom: 16px; }
.product-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 12px;
}
.product-card-meta h3{
  font-size: 15px;
  font-weight:400;
  margin:0;
  letter-spacing: var(--track-tight);
}
.product-card-meta .price{ font-size: 13px; color: var(--grey); white-space:nowrap; }
.product-card-tag{ font-size: 11px; color: var(--grey-light); margin-top: 4px; text-transform:uppercase; letter-spacing: var(--track-wide); }

@media (max-width: 900px){
  .product-grid{ grid-template-columns: repeat(2,1fr); gap: 40px 24px; }
}
@media (max-width: 560px){
  .product-grid{ grid-template-columns: 1fr; }
}

/* ---------- reusable "hidden section" toggle ---------- */
/* Wrap a section's real markup in .hideable-live and a fallback message in
   .hideable-soon, both inside a parent with [data-live]. Flip data-live to
   "true" when the section is ready to go public — no other changes needed. */
.hideable[data-live="false"] .hideable-live{ display:none; }
.hideable[data-live="true"] .hideable-soon{ display:none; }
.hideable-soon{
  padding: 96px var(--gutter) 160px;
  text-align:center;
}
.hideable-soon .body-l{
  color: var(--grey);
  max-width: 48ch;
  margin: 0 auto;
}
.hideable-soon a{ text-decoration: underline; text-underline-offset: 3px; }
.hideable-soon a:hover{ color: var(--ink); }

/* =========================================================
   Art — collection tiles + artwork grid
   ========================================================= */
.collection-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--hairline);
  margin: 0 var(--gutter);
}
.collection-tile{
  background: var(--paper);
  position:relative;
  display:block;
}
.collection-tile .ph{ aspect-ratio: 4 / 5; }
.collection-tile-label{
  padding: 26px 4px 40px;
}
.collection-tile-label .eyebrow{ margin-bottom: 10px; }
.collection-tile-label h2{
  font-size: clamp(26px, 3vw, 40px);
  font-weight:400;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  display:flex;
  align-items:center;
  gap: 14px;
}
.collection-tile-label h2 svg{ transition: transform var(--dur) var(--ease); }
.collection-tile:hover h2 svg{ transform: translateX(6px); }
.collection-tile-label p{ color: var(--grey); max-width: 42ch; }

@media (max-width: 760px){
  .collection-grid{ grid-template-columns: 1fr; margin: 0 var(--gutter-m); }
}

/* ---------- artwork grid (collection detail pages) ---------- */
.artwork-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 40px;
  padding: 56px var(--gutter) 20px;
}
.artwork-card .ph{ aspect-ratio: 3 / 2; margin-bottom: 16px; }
.artwork-card h3{ font-size: 15px; font-weight:400; margin: 0 0 4px; }
.artwork-card .small{ display:block; }

@media (max-width: 900px){
  .artwork-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .artwork-grid{ grid-template-columns: 1fr; }
}

.collection-crumb{
  padding: 28px var(--gutter) 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--grey);
}
.collection-crumb a:hover{ color: var(--ink); }

/* =========================================================
   Artwork detail page — one page per piece, replaces the
   lightbox as of 2026-08-25 (Madi picked the dedicated-page
   direction after comparing both).
   ========================================================= */
.artwork-detail-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gutter);
  padding: 40px var(--gutter) 20px;
  align-items:start;
}
.artwork-detail-media .ph{ aspect-ratio: 3 / 2; margin-bottom: 16px; }
.artwork-thumbs{ display:flex; gap: 10px; flex-wrap:wrap; }
.artwork-thumb{
  width: 80px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid transparent;
  display:block;
}
.artwork-thumb span{ font-size: 10px; }
.artwork-thumb.is-active{ border-color: var(--ink); }

.artwork-photo-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  color: var(--ink);
  border:none;
  cursor:pointer;
  opacity:0.55;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border-radius:0;
  transition: opacity var(--dur) var(--ease);
}
.artwork-photo-nav:hover{ opacity:1; }
.artwork-photo-nav[hidden]{ display:none; }
.artwork-photo-nav.prev{ left:8px; }
.artwork-photo-nav.next{ right:8px; }

.artwork-detail-copy .eyebrow{ margin-bottom: 14px; }
.artwork-detail-copy .h-1{ margin-bottom: 28px; }

.artwork-meta{
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 4px 0 32px;
}
.artwork-meta-row{
  display:flex;
  justify-content:space-between;
  padding: 10px 0;
  font-size: 13px;
  letter-spacing: var(--track-tight);
}
.artwork-meta-row .label{ color: var(--grey); }
.artwork-meta-row.is-price{ border-top: 1px solid var(--hairline); margin-top: 4px; }

.artwork-pagination{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
  padding: 32px var(--gutter);
  border-top: 1px solid var(--hairline);
  margin-top: 80px;
}
.artwork-pagination-link{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  color: var(--grey);
}
.artwork-pagination-link:hover{ color: var(--ink); }
.artwork-pagination-link.next{ flex-direction: row-reverse; text-align:right; }
.artwork-pagination-link svg{ flex-shrink:0; }

@media (max-width: 760px){
  .artwork-detail-grid{ grid-template-columns: 1fr; padding: 24px var(--gutter-m) 20px; }
  .artwork-thumb{ width: 60px; }
}

/* =========================================================
   Installations & Signage — alternating project rows
   ========================================================= */
.project-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items:center;
  padding: 80px var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.project-row:nth-child(even) .project-media{ order: 2; }
.project-row .ph{ aspect-ratio: 3 / 2; }
.project-media{}
.project-copy .eyebrow{ margin-bottom: 14px; }
.project-copy h2{
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight:400;
  letter-spacing:-0.015em;
  margin: 0 0 14px;
}
.project-copy p{ color: var(--grey); max-width: 46ch; margin-bottom: 20px; }
.project-meta{
  display:flex;
  gap: 24px;
  margin-bottom: 22px;
  flex-wrap:wrap;
}
.project-meta div span{ display:block; }
.project-meta .label{ font-size: 10px; text-transform:uppercase; letter-spacing: var(--track-wide); color: var(--grey-light); margin-bottom: 4px; }
.project-meta .value{ font-size: 13px; }

@media (max-width: 800px){
  .project-row{ grid-template-columns: 1fr; padding: 48px var(--gutter-m); gap: 28px; }
  .project-row:nth-child(even) .project-media{ order: 0; }
}

/* =========================================================
   Inquire — form page
   ========================================================= */
.inquire-grid{
  display:grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  gap: var(--gutter);
  padding: 64px var(--gutter) 120px;
}
.process-list{ margin-top: 40px; border-top: 1px solid var(--hairline); }
.process-list li{
  display:flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.process-list .num{ font-size:11px; color: var(--grey-light); letter-spacing: var(--track-wide); padding-top: 3px; }
.process-list h3{ font-size: 14px; font-weight:400; margin: 0 0 6px; }
.process-list p{ font-size: 12px; color: var(--grey); margin:0; max-width: 40ch; }

.inquire-side .eyebrow{ margin-bottom: 18px; }
.inquire-side .h-1{ margin-bottom: 20px; }
.inquire-side .body-l{ color: var(--grey); max-width: 38ch; }

.inquire-form{ max-width: 620px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.inquire-success{ display:none; max-width: 480px; padding-top: 32px; }
.inquire-success.is-visible{ display:block; }
@media (max-width: 900px){
  .inquire-grid{ grid-template-columns: 1fr; padding: 48px var(--gutter-m) 80px; }
  .field-row{ grid-template-columns: 1fr; }
}

/* =========================================================
   About / Bio
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns: minmax(320px, 40%) 1fr;
  gap: var(--gutter);
  padding: 64px var(--gutter) 40px;
  align-items:start;
}
.about-grid .ph{ aspect-ratio: 1 / 1; }
.about-copy p{ margin-bottom: 22px; }
.about-quote{
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 40px 0;
  border-left: 1px solid var(--ink);
  padding-left: 24px;
}
.about-facts{
  display:flex;
  flex-wrap:wrap;
  gap: 20px 56px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}
.about-facts .label{ font-size:10px; text-transform:uppercase; letter-spacing:var(--track-wide); color:var(--grey-light); margin-bottom:6px; display:block; }
.about-facts .value{ font-size:13px; }

@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Legal / info pages
   ========================================================= */
.legal-content{
  max-width: 720px;
  padding: 0 var(--gutter) 100px;
}
.legal-content h2{
  font-size: 16px;
  font-weight: 400;
  margin: 44px 0 14px;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--grey);
  margin: 28px 0 10px;
}
.legal-content p{ color: var(--grey); margin-bottom: 16px; }
.legal-content ul{ margin: 0 0 16px; padding-left: 18px; list-style: disc; }
.legal-content li{ color: var(--grey); margin-bottom: 8px; }
.legal-updated{ margin-bottom: 40px; }

/* ---------- artwork lightbox ---------- */
.artwork-card{ cursor: pointer; }
.lightbox-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17,17,17,0.97);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--gutter-m);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.lightbox-overlay.is-open{ opacity:1; pointer-events:auto; }
.lightbox-stage{
  position: relative;
  width: min(88vw, 980px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 20px;
}
.lightbox-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 2;
  max-height: 64vh;
  background: #1c1c1c;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.lightbox-image-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.lightbox-image-wrap span{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--grey-light);
}
.lightbox-caption{ text-align:center; }
.lightbox-caption h3{
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--paper);
  margin: 0 0 6px;
}
.lightbox-caption .small{
  font-size: 12px;
  color: var(--grey-light);
  display:block;
}
.lightbox-counter{
  font-size: 11px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--grey-light);
}
.lightbox-close{
  position:absolute;
  top: -44px;
  right: 0;
  display:flex;
  align-items:center;
  gap: 8px;
  background:none;
  border:none;
  cursor:pointer;
  color: var(--paper);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color: var(--paper);
  padding: 12px;
}
.lightbox-nav.prev{ left: -52px; }
.lightbox-nav.next{ right: -52px; }
.lightbox-nav.prev svg{ transform: scaleX(-1); }
@media (max-width: 900px){
  .lightbox-nav.prev{ left: -8px; }
  .lightbox-nav.next{ right: -8px; }
}
@media (max-width: 560px){
  .lightbox-stage{ width: 100%; }
  .lightbox-close{ top: -40px; }
  .lightbox-nav{ padding: 8px; }
  .lightbox-nav.prev{ left: -4px; }
  .lightbox-nav.next{ right: -4px; }
}