/* ============================================================
   DESIGN PLAN
   Color   — bone plaster ground + warm bronze ink; verdigris
             (patina) as the primary accent, oxidised rust as a
             secondary tone — both are literally the two colours
             that appear when metal ages, tying the palette to
             "The Patina of Childhood" rather than picking a
             decorative accent.
   Type    — Fraunces (soft, slightly wonky serif) for titles,
             used with restraint; IBM Plex Sans for reading text;
             IBM Plex Mono, tracked and capitalised, for wall-
             label data — dimensions, years, prices, editions —
             the way a gallery didactic or a catalogue raisonné
             sets that information.
   Layout  — one continuous gallery page. No hero banner: the
             first checkerboard row of Art doubles as the opening
             statement. Alternating image/text rows throughout,
             separated by hairlines, generous vertical rhythm.
   Images  — every swatch is a soft generated placeholder by
             default. Drop a real photo into /images (see
             README.md for exact filenames) and it is picked up
             automatically, covering the placeholder. Nothing in
             this file needs to change for that.
   ============================================================ */

:root{
  /* ground */
  --surface:        #FFFFFF;
  --surface-raised:  #FDFDFC;
  --surface-sunken:  #F5F4EE;

  /* ink */
  --ink:      #201D18;
  --ink-soft: #6E6A5D;
  --ink-faint:#9B968A;

  /* accents — verdigris (primary) / rust (secondary), the two
     colours patina actually turns */
  --patina:      #6C8B79;
  --patina-deep: #3E5A4C;
  --rust:        #A6572F;
  --gold:        #B08F45;
  --slate:       #56677A;

  --line: rgba(32,29,24,.16);
  --line-strong: rgba(32,29,24,.32);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --sp-1: .5rem;  --sp-2: 1rem;  --sp-3: 1.6rem;
  --sp-4: 2.6rem; --sp-5: 4.2rem; --sp-6: 6.5rem; --sp-7: 9rem;

  color-scheme: light;
}

/* This is a deliberate single-theme brand (always white / gallery
   light, per the client's explicit direction), so colour is
   painted explicitly here rather than branching by OS theme. */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--patina-deep);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--sp-4); }
@media (max-width:640px){ .wrap{ padding:0 var(--sp-2); } }

#app{ transition:opacity .28s ease; }
#app.is-leaving{ opacity:0; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:4.5rem; gap:var(--sp-2);
}
.wordmark{
  font-family:var(--font-mono); white-space:nowrap;
  font-weight:500; font-size:1.08rem; letter-spacing:.2em; text-transform:uppercase;
}
.nav{ display:flex; align-items:center; gap:var(--sp-4); }
.nav-links{ display:flex; gap:var(--sp-3); }
.nav-links a{
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.nav-links a:hover{ border-color:var(--patina-deep); color:var(--patina-deep); }
.nav-meta{ display:flex; align-items:center; gap:var(--sp-2); }
.icon-link{ opacity:.75; transition:opacity .2s ease, transform .2s ease; }
.icon-link:hover{ opacity:1; transform:translateY(-1px); }
.mail-link{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-soft); }
.mail-link:hover{ color:var(--patina-deep); }
@media (max-width:760px){
  .mail-link{ display:none; }
  .nav-links{ gap:1.1rem; }
  .wordmark{ font-size:.88rem; letter-spacing:.1em; }
}
@media (max-width:400px){
  .nav-links{ gap:.8rem; }
  .nav-links a{ font-size:.7rem; }
  .wordmark{ font-size:.74rem; letter-spacing:.06em; }
}

/* ---------- section shell ---------- */
.section{ padding:var(--sp-6) 0; }
.section + .section{ border-top:1px solid var(--line); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-3); margin-bottom:var(--sp-5);
}
.section-head h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem,4vw,3rem); text-wrap:balance;
  letter-spacing:-.01em;
}
.section-note{ max-width:34ch; text-align:right; color:var(--ink-soft); font-size:.92rem; }
@media (max-width:640px){
  .section{ padding:var(--sp-5) 0; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:var(--sp-1); }
  .section-note{ text-align:left; }
}

/* ---------- checkerboard rows ---------- */
.checker{ display:flex; flex-direction:column; }
.checker-row{
  display:flex; align-items:center; gap:var(--sp-6);
  padding:var(--sp-5) 0;
}
.checker-row + .checker-row{ border-top:1px solid var(--line); }
.checker-row:nth-child(even){ flex-direction:row-reverse; }
.row-media, .row-content{ flex:1 1 50%; min-width:0; }
.row-media a{ display:block; }
.row-content{ display:flex; flex-direction:column; gap:var(--sp-2); }
.row-content h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem,3vw,2.6rem); text-wrap:balance; letter-spacing:-.01em;
}
.row-teaser{ color:var(--ink-soft); max-width:44ch; }
.explore{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  margin-top:var(--sp-1); width:fit-content;
  padding-bottom:3px; border-bottom:1px solid var(--line-strong);
  transition:border-color .25s ease, color .25s ease, gap .25s ease;
}
.explore svg{ width:13px; height:13px; transition:transform .25s ease; }
.checker-row:hover .explore, .card-link:hover .explore{ border-color:var(--patina-deep); color:var(--patina-deep); }
.checker-row:hover .explore svg, .card-link:hover .explore svg{ transform:translateX(3px); }

@media (max-width:820px){
  .checker-row, .checker-row:nth-child(even){ flex-direction:column; align-items:stretch; gap:var(--sp-2); }
}

/* ---------- swatches (placeholder artwork surfaces + real photos) ---------- */
.swatch{
  position:relative; overflow:hidden; border-radius:2px;
  background:var(--surface-raised);
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
a:hover > .swatch, .card-link:hover .swatch{ transform:scale(1.025); }
.swatch::before{
  content:''; position:absolute; inset:-10%;
  background:radial-gradient(closest-side, var(--c1) 0%, transparent 72%),
             linear-gradient(158deg, var(--c2) 0%, var(--surface-raised) 78%);
  filter:saturate(.9);
}
.swatch::after{
  content:''; position:absolute; inset:0;
  filter:url(#grain); mix-blend-mode:multiply; opacity:.16; pointer-events:none;
}
.swatch .blob{
  position:absolute; inset:0; opacity:.55; mix-blend-mode:multiply;
}
/* Real photo, once you add one — sits above the placeholder and
   fully covers it. If the file is missing, onerror hides the
   broken-image icon and the generated placeholder shows through. */
.swatch-photo{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s ease;
}
.swatch-photo.is-loaded{ opacity:1; }
.swatch-caption{
  position:absolute; left:.9rem; bottom:.8rem; z-index:3;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(32,29,24,.45);
}

.ratio-tall{ aspect-ratio:4/5; }
.ratio-square{ aspect-ratio:1/1; }
.ratio-wide{ aspect-ratio:5/4; }
.ratio-hero{ aspect-ratio:auto; height:min(86vh, 920px); } /* big detail view — large scale */
.ratio-hero .swatch-photo{ object-fit:contain; } /* full painting visible, never cropped, on the big detail view */
/* Once a real photo has loaded on the big detail view, drop the
   generated placeholder background entirely — the photo is shown
   on its own, without any coloured box behind it. Until a photo is
   added, the placeholder still shows (nothing to display otherwise). */
.ratio-hero.has-photo::before,
.ratio-hero.has-photo::after,
.ratio-hero.has-photo .blob{
  display:none;
}
.ratio-hero.has-photo{ background:var(--surface); }

.swatch.pal-a{ --c1:#8CA898; --c2:#3E5A4C; }
.swatch.pal-b{ --c1:#C77D53; --c2:#7C3A1D; }
.swatch.pal-c{ --c1:#CBAF6E; --c2:#7C6329; }
.swatch.pal-d{ --c1:#7C93A8; --c2:#3B4A5A; }
.swatch.pal-e{ --c1:#93AC9D; --c2:#7C3A1D; }
.swatch.pal-f{ --c1:#A78F63; --c2:#3E5A4C; }

/* ---------- about ---------- */
.about-grid{ display:flex; gap:var(--sp-6); align-items:flex-start; }
.about-media{ flex:0 0 34%; }
.about-media .swatch{ aspect-ratio:3/4; }
.about-body{ flex:1 1 auto; max-width:62ch; }
.about-body p + p{ margin-top:1.1em; }
.tags{ display:flex; gap:.6rem; margin-top:var(--sp-3); flex-wrap:wrap; }
.tag{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line-strong); padding:.35rem .7rem; color:var(--ink-soft); border-radius:2px;
}
@media (max-width:820px){
  .about-grid{ flex-direction:column; }
  .about-media{ flex-basis:auto; width:60%; max-width:280px; }
}

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:var(--sp-4) 0 var(--sp-3); }
.footer-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
}
.footer-mark{ font-family:var(--font-mono); font-weight:500; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; }
.provenance{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink-soft); margin-top:.35rem; }
.footer-links{ display:flex; align-items:center; gap:var(--sp-3); }
.footer-fine{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); margin-top:var(--sp-3); }

/* ---------- detail pages ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:var(--sp-4);
  transition:color .2s ease;
}
.back-link:hover{ color:var(--patina-deep); }
.detail-head{ max-width:60ch; margin-bottom:var(--sp-5); }
.detail-head h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,5.5vw,4rem); text-wrap:balance; letter-spacing:-.01em; margin-bottom:var(--sp-2);
}
.detail-body p + p{ margin-top:1.1em; }
.detail-body{ color:var(--ink); max-width:62ch; }

/* ---------- piece / product full page ---------- */
.stage{ margin-bottom:var(--sp-5); }
.piece-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  flex-wrap:wrap; max-width:62ch;
  padding-bottom:var(--sp-3); margin-bottom:var(--sp-3); border-bottom:1px solid var(--line);
}
.piece-meta .dims{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.piece-meta .price{ font-family:var(--font-mono); font-size:1rem; font-variant-numeric:tabular-nums; }
.piece-meta .price.sold{ color:var(--ink-faint); }
.piece-note{ color:var(--ink-soft); font-style:italic; }

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:var(--sp-4) var(--sp-3); margin-top:var(--sp-5);
}
.card-link{ display:block; }
.card-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2); margin-top:.85rem; }
.card-title{ font-family:var(--font-display); font-weight:500; font-size:1.15rem; }
.card-price{ font-family:var(--font-mono); font-size:.82rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.card-price.sold{ color:var(--ink-faint); }
.card-dims{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.3rem;
}
.card-edition{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); margin-top:.15rem; }

/* entrance */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.enter{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both; }
.enter-2{ animation-delay:.08s; }