/* Former Studio Editions — shared styles
   Placeholder visual direction — revisit after reviewing reference sites
   (Cindy Hsu Zelle, Hauser & Wirth) before real launch. */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --bg: #F2F1EC;
  --surface: #FFFFFF;
  --ink: #17181A;
  --ink-soft: #5B5E62;
  --line: #DEDCD5;
  --accent: #3F6E64;
  --accent-soft: #E3ECE9;
  --display: 'Work Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --body: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --page-margin: 64px;

  /* Type scale — every template pulls sizes from here, nothing ad hoc per page.
     Modeled on Hauser & Wirth's artist pages: one sans family everywhere except
     the hero wordmark, and minimal size contrast between tiers (their own H1/H2
     sit within a few px of each other, well under 1.5x their body copy). */
  --fs-display: clamp(2.4rem, 6vw, 5rem);   /* hero name only (home) — the one exception */
  --fs-h1: 1.4rem;                          /* page/series headline — 1.4x body */
  --fs-h2: 1.3rem;                          /* piece title, detail page — 1.3x body */
  --fs-body: 1rem;                           /* statement paragraphs, base copy */
  --fs-meta: 0.875rem;                       /* spec rows, thumbnail year */
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

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

/* Nav */
nav.site-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(242,241,236,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--page-margin);
  height: 68px; display: flex; align-items: center;
}
/* Every page but home: same size/weight as the nav links, just in the
   upper-left corner. margin-left:auto on .nav-links pushes the links to the
   right whether or not this wordmark is present, so home (which omits it,
   since its own name is already on the hero) still lays out correctly. */
.nav-name {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.2s;
}
.nav-name:hover { color: var(--ink); }
.nav-links { display: flex; gap: 2rem; margin-left: auto; }
.nav-links a {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--accent); }

/* Headings / eyebrow — a category label, when one is needed at all, is just
   plain uppercase text at body size. No small-caps treatment, no accent color. */
.eyebrow {
  font-size: var(--fs-body); font-weight: 400; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 16px;
}
/* One sans family everywhere — the display face is reserved for the hero
   wordmark only (see .home-hero-name). Headlines get weight, not size, to
   read as headlines: never more than ~1.4x body size. */
h1, h2, h3 { font-family: var(--body); font-weight: 600; letter-spacing: -0.005em; }
h1 { font-size: var(--fs-h1); line-height: 1.3; }
h2 { font-size: var(--fs-h2); line-height: 1.35; }

/* Sections */
.section { padding: 132px 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: none; }
.lede { color: var(--ink-soft); font-size: var(--fs-body); max-width: 60ch; line-height: 1.75; }

/* Page header (used by every page except home, which has its own hero image below) */
.hero { padding: 140px 0 120px; }
.hero p.lede { margin-top: 28px; }
.hero-cta { margin-top: 36px; display: inline-flex; }

/* Home hero — full-bleed, sits above .wrap's max-width. Cycles through a
   few painting details via crossfade (hero-carousel.js): every slide is
   stacked on this one box via position:absolute, so the box itself (not
   any single image) is what carries the height. */
.home-hero { display: block; }
.home-hero-link { position: relative; display: block; height: 80vh; max-height: 820px; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide.pos-top { object-position: center top; }
.home-hero-name {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #fff; font-family: var(--display); font-weight: 700;
  font-size: var(--fs-display); letter-spacing: 0.14em;
  text-transform: uppercase; text-align: center; white-space: nowrap;
  text-shadow: 0 2px 28px rgba(0,0,0,0.4);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  transition: all 0.2s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: var(--bg); }

/* Painting detail image + intro text (About page) */
.artist-intro { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; }
.intro-image { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* Home intro block — same image-left/text-right system as .artist-intro above,
   except the square isn't a fixed size: a small script (see index.html) measures
   the text column's rendered height — however many lines it wraps to — and sets
   the image to that same width/height, so it's always a true square matching
   the copy's actual height, not a fixed px value. */
.intro-match { display: flex; gap: 48px; align-items: flex-start; }
/* Starts at 0 width so the text column lays out at its natural full width for
   an accurate first measurement — the sizing script (index.html) then sets
   this to match the text block's rendered height before paint. */
.intro-match-image { flex: 0 0 auto; width: 0; display: block; overflow: hidden; }
.intro-match-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-match-text { flex: 1 1 0%; min-width: 0; }
.intro-match-text .lede { font-size: calc(var(--fs-body) + 3px); }

.painting-card .placeholder-img,
.painting-hero .placeholder-img {
  aspect-ratio: 4/3; width: 100%; background: var(--surface);
  border: 1px dashed var(--line); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; text-align: center; padding: 24px;
}

/* Series page statement */
.statement { max-width: 68ch; }
.statement p + p { margin-top: 1.1em; }

/* Painting grid */
.painting-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 40px; margin-top: 72px;
}
.painting-card { display: block; }
.painting-card img, .painting-card .placeholder-img { margin-bottom: 16px; }
/* Scale cue: a fixed cap, not a % of the grid cell, so relative size stays
   consistent whether or not a piece has a same-row neighbor to compare against.
   380px = the largest canvas in the series (currently 30x40); smaller canvases
   get a smaller cap. Not literal ratios, just a visual "this one's smaller." */
.painting-card-media img { max-width: min(380px, 100%); }
.painting-card-media img.scale-15x20 { max-width: min(270px, 100%); }
.painting-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.painting-meta { font-size: var(--fs-meta); color: var(--ink-soft); }
.painting-price { font-weight: 600; color: var(--ink); margin-top: 2px; }

/* Sold badge — solid tag, same tracked-uppercase treatment as the "Details"
   label. On a card it overlays the thumbnail's top-left corner; on a
   detail page it sits beside the h1. */
.sold-badge {
  display: inline-block; background: var(--ink); color: var(--bg);
  font-family: var(--display); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px;
}
.painting-card-media { position: relative; }
.painting-card-media .sold-badge { position: absolute; top: 12px; left: 12px; }
.painting-title-row { display: flex; align-items: baseline; gap: 10px; }
.painting-title-row .sold-badge { position: relative; top: -2px; }

/* Painting detail page — named grid areas so mobile can reorder to
   hero → info → details without touching the HTML source order. Pages
   with no .painting-details-section simply leave that area empty. */
.painting-detail {
  display: grid; grid-template-columns: 1.2fr 1fr;
  grid-template-areas: "hero info" "details info";
  gap: 64px; align-items: start;
  padding: 64px 0 96px;
}
.painting-hero { grid-area: hero; position: relative; cursor: zoom-in; }
.painting-details-section { grid-area: details; margin-top: 56px; }
.painting-info { grid-area: info; }

/* "Details" — same light/tracked treatment as the Previous/Next pager,
   sitting just above a 1px divider instead of sharing the pager's baseline. */
.details-label {
  font-size: calc(0.78rem - 2px); font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: 10px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
/* Full column width, square, stacked — static, no zoom affordance */
.detail-shots { display: flex; flex-direction: column; gap: 24px; }
.detail-shots img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* Lightbox — click the main image to enlarge it. Shared across every piece
   page via piece-zoom.js; only .painting-hero's image is ever clickable. */
.lightbox {
  position: fixed; inset: 0; background: rgba(23,24,26,0.92);
  display: none; align-items: center; justify-content: center;
  padding: 40px; z-index: 50; cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Piece toolbar — back-link and Previous/Next sit in the same row, in the
   quiet space between the "Paintings: First Steps" back-link and the image.
   Same treatment as a kicker (light weight, uppercase, tracked) but no color
   accent, so it reads as wayfinding, not a headline. Order follows the series
   grid; no wraparound, so the first/last piece simply omits one side. */
.piece-toolbar { display: flex; justify-content: space-between; align-items: baseline; padding-top: 40px; }
.piece-pager { display: flex; gap: 24px; }
.piece-pager-link {
  font-size: calc(0.78rem - 2px); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); transition: color 0.2s;
}
.piece-pager-link:hover { color: var(--ink); }
.painting-hero img, .painting-hero .placeholder-img { width: 100%; }
/* Semantically the page's <h1>, but visually the "piece title" tier (--h2) —
   the series/page headline (--h1) is a size up from an individual artwork's name. */
.painting-info h1 { font-size: var(--fs-h2); }
.painting-description { margin-top: 16px; }
.spec-list { margin-top: 28px; border-top: 1px solid var(--line); }
.spec-row {
  display: flex; justify-content: space-between; padding: 14px 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-meta);
}
.spec-row dt { color: var(--ink-soft); }
.spec-row dd { font-weight: 500; }
.painting-info .btn { margin-top: 32px; }
.back-link {
  display: inline-block; margin-bottom: 32px; font-size: 0.78rem;
  color: var(--ink-soft); font-weight: 600; letter-spacing: 0.04em;
}
.back-link:hover { color: var(--ink); }

/* Contact */
.contact-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.pay-methods { display: flex; gap: 12px; margin-top: 20px; }
.pay-pill {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft);
}
form.inquiry { display: flex; flex-direction: column; gap: 16px; }
form.inquiry label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 6px; display: block;
}
form.inquiry input, form.inquiry textarea {
  width: 100%; font-family: var(--body); font-size: 0.95rem; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
form.inquiry textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 32px 0; }
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--page-margin);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--ink-soft);
}

@media (max-width: 860px) {
  :root { --page-margin: 24px; }
  .nav-links { gap: 1.2rem; }
  .artist-intro { grid-template-columns: 1fr; }
  .intro-image { max-width: 260px; }
  .intro-match { flex-direction: column; }
  .intro-match-image { width: 100% !important; height: auto !important; max-width: 260px; }
  .intro-match-image img { height: auto; width: 100%; }
  .painting-detail { grid-template-columns: 1fr; grid-template-areas: "hero" "info" "details"; gap: 32px; }
  .painting-details-section { margin-top: 40px; }
  .contact-block { grid-template-columns: 1fr; gap: 40px; }
  .home-hero-link { height: 50vh; }
  .piece-toolbar { flex-wrap: wrap; row-gap: 12px; }
}