/* ==========================================================================
   RAINA-ART — shared styles (used by every page)
   Vanilla CSS, no frameworks. Gallery aesthetic: white space, art first.
   ========================================================================== */

:root {
  /* The page is light in every theme. Without this, a browser/OS set to dark
     paints the root scrollbar with its dark scheme while the page stays light,
     leaving a dark gutter down the right edge. */
  color-scheme: light;

  --bg:         #faf9f7;   /* off-white page */
  --panel:      #ffffff;
  --ink:        #1b1a17;   /* near-black text */
  --muted:      #6f6b63;
  --line:       #e7e2da;
  /* Brand grey. NOTE: --brand is a SURFACE colour, not a text colour — white
     text on it is only 2.2:1, and the grey itself on white is 2.2:1, so it can
     never be used for type. Text that sits ON a brand surface uses --on-brand;
     brand-flavoured text on a LIGHT surface uses --accent-dk. */
  --brand:      #B0B0B0;   /* brand grey — header, footer, buttons */
  --brand-dark: #8A8A8A;   /* darker grey — hover/active surfaces */
  --brand-tint: #F1F1F1;   /* very light grey section wash */
  --on-brand:   #1A1A1A;   /* text & icons on a brand surface — 8.0:1 */
  --accent:     #6A6A6A;   /* decorative grey on light backgrounds */
  --accent-dk:  #5A5A5A;   /* readable grey type on light backgrounds — 6.6:1 */
  --radius:     12px;      /* echoes the logo's rounded square */
  --max:       1180px;
  --gap:       clamp(1.5rem, 4vw, 3.5rem);
  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: .01em; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--accent-dk);
  margin: 0 0 .8rem;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  text-decoration: none;
  padding: .95rem 1.9rem;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--brand); color: var(--on-brand); }

/* Content links pick up the brand */
main p a:not(.btn), .intro a:not(.btn) {
  color: var(--ink); text-underline-offset: 2px;
  text-decoration-color: var(--brand-dark);   /* the brand shows as the underline */
}
main p a:not(.btn):hover { color: #000; text-decoration-color: var(--ink); }

/* ==========================================================================
   SHARED HEADER  (keep in sync across pages — copy this block verbatim)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand);
  box-shadow: 0 6px 18px rgba(27,26,23,.13);   /* intentional edge onto the light page */
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: .9rem clamp(1rem, 4vw, 2.5rem) .6rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.logo {
  grid-column: 2;
  justify-self: center;
  display: block;
  line-height: 0;
}
.logo img { height: 96px; width: auto; display: block; }  /* Raina-Art wordmark */

.nav-toggle {
  grid-column: 1; justify-self: start;
  display: none;
  background: none; border: 0; padding: .3rem .4rem;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--on-brand);
}

/* Cart link. Absolutely positioned, so it takes NO space in the header: the
   header is exactly as tall as it was before the cart existed (sticky
   .site-header is its containing block on desktop; .header-inner on phones).
   Vertically centred with top:50% + translate, so it stays centred while the
   header shrinks on scroll. Fixed 36px box / 19px icon (the SVGs also carry
   width/height attributes, so even without this CSS they can't blow up).
   The count badge is absolute too — it overlays the corner and never changes
   the link's size, whatever the number. Hidden at 0 by js/cart.js. */
.cart-link {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: calc(max(0px, (100% - var(--max)) / 2) + clamp(1rem, 4vw, 2.5rem));
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; box-sizing: border-box; border-radius: 50%;
  color: var(--on-brand); text-decoration: none;
  transition: background .2s ease;
}
.cart-link svg { width: 19px; height: 19px; flex: none; display: block; }
.cart-link:hover { background: rgba(26,26,26,.08); }
.cart-link:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; }
.cart-count {
  position: absolute; top: 1px; right: -4px; white-space: nowrap; pointer-events: none;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--on-brand); color: #fff;
  font-size: .6rem; font-weight: 700; line-height: 15px; text-align: center;
}
.cart-count[hidden] { display: none; }

.primary-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(1rem, 3.2vw, 2.6rem);
  padding: .3rem 1rem .7rem;
  border-top: 1px solid transparent;
}
.primary-nav a {
  text-decoration: none;
  white-space: nowrap;   /* "Greeting Cards" wraps as one unit, never mid-label */
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  color: rgba(26,26,26,.82);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.primary-nav a:hover { color: var(--on-brand); }
.primary-nav a.active { color: var(--on-brand); border-bottom-color: var(--on-brand); }

/* Scrolled state: collapse the logo row into one clean, compact bar */
.site-header { transition: box-shadow .25s ease; }
.header-inner { transition: padding .25s ease; }
.logo img { transition: height .25s ease; }
.site-header.scrolled { box-shadow: 0 3px 14px rgba(27,26,23,.09); }
.site-header.scrolled .header-inner { padding-top: .4rem; padding-bottom: .3rem; }
.site-header.scrolled .logo img { height: 44px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 4rem); text-align: center; }
/* Home page: the headline follows the slideshow rather than the header, so the
   full top padding would push "Beauty Is All Around Us" below the fold.
   (General sibling, not adjacent — the hero JSON <script> sits between them.) */
.hero-slideshow ~ .hero { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.hero h1 {
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.02;
  margin: 0 0 1rem;
}
.hero p.lede {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--muted);
  max-width: 34ch;
  margin: 0 auto 2rem;
}
/* About page only: a compact hero so Uta's photo and the bio start on the
   first screen (1366×768 and 1920×1080). Half the usual padding, a ~23%
   smaller name, tighter eyebrow/heading/subtitle spacing, the subtitle on one
   line on desktop, and a smaller gap down to the photo + bio row. */
.about-hero { padding: clamp(1.5rem, 4vw, 3rem) 0 .5rem; }
.about-hero .eyebrow { margin-bottom: .35rem; }
.about-hero h1 { font-size: clamp(1.9rem, 5.4vw, 3.55rem); margin: 0 0 .35rem; }
.about-hero p.lede { max-width: none; margin: 0 auto; }
.section.about-body { padding-top: clamp(1.25rem, 3vw, 2.25rem); }
/* .section's "padding: X 0" was stripping .container's side gutter here, so on
   phones the bio ran to the screen edge (CLAUDE.md "Gutter gotcha") */
@media (max-width: 640px) { .section.about-body { padding-left: clamp(1rem, 4vw, 2.5rem); padding-right: clamp(1rem, 4vw, 2.5rem); } }

/* ==========================================================================
   HERO SLIDESHOW — full-bleed, crossfading, paintings shown whole
   ========================================================================== */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: clamp(300px, 56.25vw, 62vh);   /* ~16:9, capped so the h1 below peeks above the fold */
  background: #ece9e3;                     /* neutral showcase mat */
  overflow: hidden;
}
.hero-slideshow .slides { position: absolute; inset: 0; }
/* Slide-and-scale handoff: the outgoing painting travels to one edge shrinking
   to half size while the incoming one comes in from the other edge, small, and
   grows into place. Both move at once. Transform + opacity only — no layout
   work — and the .hero-slideshow's overflow:hidden clips the travel, so nothing
   can widen the page. Unclassed layers park off-right, out of sight. */
.hero-slideshow img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;                     /* never crop the art */
  transform: translateX(100%) scale(.5);
  opacity: 0;
  /* the outgoing layer's fade is held back so it happens near the edge, not
     across the whole journey */
  transition: transform 1.2s ease-in-out, opacity .45s ease-in .62s;
  will-change: transform, opacity;
}
.hero-slideshow img.at-center   { transform: translateX(0) scale(1);      opacity: 1; }
.hero-slideshow img.enter-right { transform: translateX(100%) scale(.5);  opacity: 1; }
.hero-slideshow img.enter-left  { transform: translateX(-100%) scale(.5); opacity: 1; }
.hero-slideshow img.exit-left   { transform: translateX(-100%) scale(.5); opacity: 0; }
.hero-slideshow img.exit-right  { transform: translateX(100%) scale(.5);  opacity: 0; }
/* used to snap a layer to its starting mark without animating the jump */
.hero-slideshow img.no-anim     { transition: none !important; }
.hero-slideshow:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* Prev / next arrows — subtle, revealed on hover (desktop), always shown on touch */
.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255,255,255,.72); color: #1b1a17;
  box-shadow: 0 2px 12px rgba(0,0,0,.22);
  opacity: 0; transition: opacity .25s ease, background .2s ease;
}
.hero-nav svg { width: 22px; height: 22px; }
.hero-prev { left: 14px; }
.hero-next { right: 14px; }
.hero-nav:hover { background: #fff; }
.hero-slideshow:hover .hero-nav,
.hero-nav:focus-visible { opacity: 1; }
@media (hover: none) { .hero-nav { opacity: .9; } }   /* touch devices: always visible */

/* Caption — painting title, links to the paintings page */
.hero-caption {
  position: absolute; left: 16px; bottom: 12px; z-index: 3;
  color: #fff; text-decoration: none; font-family: var(--serif);
  font-size: clamp(.95rem, 1.8vw, 1.3rem); line-height: 1.1;
  padding: .35rem .7rem; border-radius: 4px;
  background: rgba(20,16,10,.36); text-shadow: 0 1px 8px rgba(0,0,0,.5);
  /* left/bottom are set from JS to hug the rendered painting's corner */
  transition: background .2s ease, left .25s ease, bottom .25s ease;
}
.hero-caption:hover { background: rgba(20,16,10,.58); text-decoration: underline; }

/* "View Products" overlay — fades in while the cursor is over the painting */
.hero-products {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  background: #fff; color: var(--on-brand);
  font-family: var(--sans); font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.8rem; border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, background .2s ease, color .2s ease;
}
.hero-slideshow.show-products .hero-products { opacity: 1; pointer-events: auto; }
.hero-products:hover { background: var(--brand); color: var(--on-brand); }

@media (max-width: 640px) {
  .hero-slideshow { height: clamp(240px, 62vw, 48vh); }  /* shorter on mobile */
  .hero-nav { width: 40px; height: 40px; }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tight { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.section--tint { background: var(--brand-tint); }  /* occasional light grey wash */
.section-head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }

/* ==========================================================================
   INTRO / TEASER / EXHIBITION
   ========================================================================== */
.intro { max-width: 60ch; margin: 0 auto; text-align: center; }
.intro p { color: #322f29; font-size: clamp(1.02rem, 2vw, 1.15rem); }

/* Home: Originals / Prints / Greeting cards — one treatment, alternating sides */
.features { display: grid; gap: clamp(3.5rem, 8vw, 6rem); }
/* Hero → Originals seam: the hero already has bottom padding, so trim the
   section top to make the seam match the gap between cards (not a hole). */
.home-features { padding-top: clamp(1rem, 3vw, 2rem); }
.feature {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.feature--flip .feature-art { order: 2; }
.feature h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0 0 .8rem; text-wrap: balance; }
.feature-copy p:not(.eyebrow) { margin: 0 0 1.4rem; max-width: 40ch; }
.feature-art { transition: transform .35s ease; }
.feature:hover .feature-art { transform: translateY(-4px); }
.feature:hover .btn--ghost { background: var(--brand); color: var(--on-brand); }

/* Whole-card links: the card's own button stretches over the entire card, so
   there's one real link (good for screen readers) but everything is clickable. */
.is-card { position: relative; }
.is-card .btn::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.exhibition.is-card:hover .btn { background: transparent; color: #fff; }

/* Originals: three available paintings, the middle one raised */
.art-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.6vw, 1rem); align-items: center; }
.art-trio img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px;
  box-shadow: 0 12px 28px rgba(30,25,18,.14);
}
.art-trio img:nth-child(2) { transform: translateY(-10%); }

/* Originals page: commissions callout — two commissioned paintings side by
   side, each captioned "Commissioned piece" (paintings.html#commissions) */
.art-commissions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); align-items: start; }
.art-commissions figure { margin: 0; }
.art-commissions img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px;
  box-shadow: 0 12px 28px rgba(30,25,18,.14);
}
.art-commissions figcaption {
  margin-top: .55rem; text-align: center; font-family: var(--sans);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-dk);
}
.commissions .feature:hover .feature-art { transform: none; }   /* not a whole-card link here */
@media (max-width: 860px) { .art-commissions { max-width: 460px; margin: 0 auto; width: 100%; } }

/* Prints: a real photo of a matted print (the mat is in the photo) */
.art-print { width: min(100%, 520px); justify-self: center; }
.art-print img, .print-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover;
  border-radius: 2px; box-shadow: 0 12px 28px rgba(30,25,18,.14);
}

/* Prints page: "What you'll receive" — the two print photos side by side */
.section-head .section-sub { margin: .5rem 0 0; color: var(--muted); }
.print-photos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 2rem);
  max-width: 880px; margin: 0 auto;
}
.print-photo { margin: 0; }
.print-photo figcaption { margin-top: .7rem; text-align: center; font-family: var(--serif); font-size: 1.05rem; }
.print-photo figcaption a { text-decoration: underline; text-decoration-color: var(--brand-dark); text-underline-offset: 3px; }
.print-photo figcaption a:hover { text-decoration-color: var(--ink); }
@media (max-width: 640px) { .print-photos { grid-template-columns: 1fr; } }

/* About: Uta's gallery portrait, kept to a modest size */
.art-portrait { width: min(100%, 360px); justify-self: center; }
.art-portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 2px; box-shadow: 0 14px 34px rgba(30,25,18,.14);
}

/* Greeting cards: three cards fanned out */
.art-fan { position: relative; aspect-ratio: 4/3; }
.art-fan img {
  position: absolute; top: 12%; width: 40%; aspect-ratio: 5/7; object-fit: cover;
  background: #fff; padding: 5px; border-radius: 2px;
  box-shadow: 0 12px 26px rgba(30,25,18,.18);
}
.art-fan img:nth-child(1) { left: 8%;  transform: rotate(-8deg); }
.art-fan img:nth-child(2) { left: 30%; top: 4%; z-index: 1; }
.art-fan img:nth-child(3) { left: 52%; transform: rotate(8deg); }

/* The exhibition follows the features section directly: one gap, not two */
.section--flush-top { padding-top: 0; }

.exhibition {
  background: var(--ink); color: #f4f1ec; text-align: center;
  border-radius: 2px; padding: clamp(2.4rem, 6vw, 4rem) clamp(1.2rem, 4vw, 3rem);
}
.exhibition .eyebrow { color: #cbb48f; }
.exhibition h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 .6rem; line-height: 1.2; text-wrap: balance; }
.exhibition p { color: #cdc7bd; max-width: 52ch; margin: 0 auto 1.6rem; }
.exhibition .exhibition-when { color: #fff; letter-spacing: .04em; line-height: 1.5; }
/* A single event inside the show (e.g. the artist talk), set off by a thin rule */
.exhibition-event { max-width: 22rem; margin: 0 auto 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.18); }
.exhibition-event .eyebrow { margin-bottom: .4rem; }
.exhibition-event .exhibition-when { margin-bottom: 0; }

/* Exhibition history — one row per show, year in a fixed left column. */
.show-list { list-style: none; margin: 0 auto 2rem; padding: 0; max-width: 46rem; }
.show-list li {
  display: grid; grid-template-columns: 4rem 1fr; column-gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid #e4e0da;
}
.show-list li:first-child { border-top: 1px solid #e4e0da; }
.show-year { grid-row: span 2; color: var(--accent-dk); font-variant-numeric: tabular-nums; }
.show-name { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.show-place { grid-column: 2; color: var(--accent-dk); font-size: .95rem; }
.exhibition .btn { border-color: #fff; background: #fff; color: var(--ink); }
.exhibition .btn:hover { background: transparent; color: #fff; }
/* This panel is dark, so the near-black body-link colour would vanish in it. */
.exhibition p a:not(.btn) { color: #fff; text-decoration-color: rgba(255,255,255,.55); }
.exhibition p a:not(.btn):hover { color: #fff; text-decoration-color: #fff; }

/* ==========================================================================
   MAILING LIST (inline section)
   ========================================================================== */
.signup { text-align: center; }
.signup h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0 0 .5rem; }
.signup p { color: var(--muted); margin: 0 auto 1.6rem; max-width: 46ch; }
.mail-form { display: flex; gap: .6rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.mail-form input[type=email] {
  flex: 1 1 220px; min-width: 0;
  padding: .95rem 1.1rem; font-size: 1rem; font-family: var(--sans);
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px;
}
.mail-form input[type=email] { border-radius: var(--radius); }
.mail-form input[type=email]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Stacked form (contact page) — fields at natural single-line height */
.form-stacked { display: flex; flex-direction: column; gap: .6rem; max-width: 520px; margin: 0; }
.form-stacked input, .form-stacked textarea {
  width: 100%; padding: .95rem 1.1rem; font-size: 1rem; font-family: var(--sans);
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: var(--radius);
}
.form-stacked textarea { resize: vertical; min-height: 130px; }
.form-stacked input:focus, .form-stacked textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.mail-note { font-size: .8rem; color: var(--muted); margin-top: .9rem; }

/* Originals page: live "N originals available now" pill under the lede */
.hero p.lede + .originals-count { margin-top: -1rem; }
.originals-count { margin: 0 0 .4rem; line-height: 1.4; }
.originals-count a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); text-decoration: none;
  font-size: .88rem; font-weight: 600; letter-spacing: .02em;
  transition: background .2s ease, border-color .2s ease;
}
.originals-count a:hover, .originals-count a:focus-visible { background: var(--brand-tint); border-color: var(--brand); }
.originals-count a span[aria-hidden] { color: var(--accent-dk); font-weight: 400; }
.form-ok { color: var(--accent-dk); font-weight: 600; }

/* ==========================================================================
   GALLERY GRID (paintings / prints pages)
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(.9rem, 2.2vw, 1.6rem); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; box-shadow: 0 8px 22px rgba(30,25,18,.10); }
.gallery figcaption { font-family: var(--serif); font-size: .98rem; margin-top: .5rem; }
.gallery .meta { display: block; color: var(--muted); font-size: .8rem; font-family: var(--sans); }
.gallery .status { display: block; margin-top: .2rem; font-family: var(--sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.cat-heading { font-family: var(--serif); font-size: clamp(1.4rem,3vw,2rem); margin: 2.4rem 0 1.2rem; scroll-margin-top: 130px; }
/* Originals page: two top-level sections, category sub-headings inside */
.originals-section { scroll-margin-top: 130px; }
/* desktop sticky header is ~170px tall: clear it so the count pill's
   #available jump lands with the heading in view */
@media (min-width: 641px) { .originals-section { scroll-margin-top: 200px; } }
.originals-section + .originals-section { margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line); }
.originals-heading { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0; text-align: center; }
.originals-note { text-align: center; color: var(--muted); font-size: .95rem; margin: .5rem 0 0; }
/* category sub-headings — shared by the Originals and Prints pages */
.originals-section .cat-heading,
#prints-gallery .cat-heading { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 2rem 0 1rem; }
#prints-gallery .cat-heading:first-child { margin-top: 0; }

/* Tile: the whole image is one link to the painting's detail page. On desktop
   hovering fades in the overlay; on touch there's no hover, so the tap just
   follows the link (the overlay never gets in the way). */
.gallery .tile { position: relative; display: block; border-radius: 2px; overflow: hidden; }
.gallery .tile img { display: block; }
.tile-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; padding: 1rem; text-align: center;
  background: rgba(20,16,10,.46);
  opacity: 0; transition: opacity .25s ease;
}
.tile-title {
  color: #fff; font-family: var(--serif);
  font-size: clamp(.95rem, 1.6vw, 1.15rem); line-height: 1.15;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.tile-cta {
  background: #fff; color: var(--on-brand);
  font-family: var(--sans); font-weight: 600; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .6rem 1.1rem; border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0,0,0,.26);
}
.gallery .tile:hover .tile-overlay,
.gallery .tile:focus-visible .tile-overlay { opacity: 1; }
.gallery .tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tile-caption-link { color: inherit; text-decoration: none; }
.tile-caption-link:hover { text-decoration: underline; }

/* ==========================================================================
   PAINTING DETAIL PAGE (painting.html)
   Desktop: the painting on the left, capped by the viewport height, and
   everything you can buy stacked on the right — title, the original, and the
   three print sizes as tight rows — so it all shows without scrolling at
   1366×768 and up. The columns are top-aligned and the image's size never
   depends on the right column, so the layout holds whatever the status says.
   ========================================================================== */
.work { padding-top: clamp(.8rem, 2vw, 1.2rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.work-back { margin: 0 0 .8rem; font-size: .88rem; }
.work-back--end { margin: 2.2rem 0 0; }
.work-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start;
}
.work-figure {
  margin: 0; background: #ece9e3; border-radius: var(--radius);
  padding: clamp(.7rem, 1.5vw, 1.2rem);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px rgba(30,25,18,.12);
}
/* the painting is a button that opens the lightbox */
.work-zoom {
  position: relative; display: block; padding: 0; border: 0; background: none;
  cursor: zoom-in; line-height: 0; max-width: 100%;
}
.work-zoom:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.work-zoom img {
  display: block; max-width: 100%; width: auto; height: auto;
  /* site header + back link + page padding sit above it */
  max-height: max(300px, calc(100vh - 280px));
  object-fit: contain;                    /* never crop the art */
  border-radius: 2px;
}
/* small expand icon in the corner, shown on hover (always on touch) */
.work-zoom-icon {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,16,10,.55); color: #fff;
  opacity: 0; transition: opacity .2s ease;
}
.work-zoom-icon svg { width: 17px; height: 17px; }
.work-zoom:hover .work-zoom-icon,
.work-zoom:focus-visible .work-zoom-icon { opacity: 1; }
@media (hover: none) { .work-zoom-icon { opacity: .85; } }

.work-head h1 { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2rem); line-height: 1.1; margin: 0 0 .2rem; }
.work-media { color: var(--muted); font-size: .88rem; margin: 0; }
.work-original { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.work-original h2,
.work-prints h2 { font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; margin: 0 0 .3rem; }
.work-original-line { font-size: 1rem; margin: 0 0 .6rem; }
.work-original .btn { padding-top: .7rem; padding-bottom: .7rem; }
.work-original .mail-note { margin-top: .5rem; }
/* shown only for catalog rows flagged onExhibit */
.work-exhibit {
  background: var(--brand-tint); border-left: 3px solid var(--brand-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .5rem .8rem; margin: 0 0 .6rem;
  font-size: .8rem; line-height: 1.4; color: #2a2721;
}
.work-prints { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.work-prints-sub { color: var(--muted); margin: 0 0 .6rem; font-size: .8rem; line-height: 1.4; }

/* one row per print size: size + mat | price | buy */
.work-print-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.work-print {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .35rem .45rem .35rem .9rem;
}
.work-print h3 { margin: 0; font-size: 1.02rem; line-height: 1.15; }
.work-print .matted { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.25; }
.work-print .amt { margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.work-print .btn { padding: .5rem .85rem; font-size: .7rem; white-space: nowrap; }

@media (max-width: 860px) {
  /* stacked: painting first, then buying */
  .work-layout { grid-template-columns: 1fr; gap: 1.2rem; }
  .work-zoom img { max-height: 42vh; }
}
@media (max-width: 640px) {
  /* on phones the prints come straight after the title and the original
     follows, so the first print size peeks above the fold — the site header,
     the painting and the whole original section would otherwise push it
     a screen down */
  .work-buy { display: flex; flex-direction: column; }
  .work-prints { order: 1; }
  .work-original { order: 2; margin-top: 1.4rem; }
  .work-prints { margin-top: .8rem; }
  .work-zoom img { max-height: 38vh; }
}
@media (max-width: 420px) {
  .work-print { grid-template-columns: 1fr auto; row-gap: .45rem; }
  .work-print .btn { grid-column: 1 / -1; width: 100%; }
}

/* Lightbox — the painting as large as the viewport allows on a dark scrim */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: clamp(.8rem, 3vw, 2.2rem); border: 0;
  background: rgba(12,10,8,.93); cursor: zoom-out;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(12,10,8,.6); }
.lightbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; cursor: default; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close {
  position: fixed; top: 14px; right: 14px; z-index: 1;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover, .lightbox-close:focus-visible { background: rgba(255,255,255,.3); }
html.lightbox-open { overflow: hidden; }   /* no page scroll behind the lightbox */

/* Pricing cards (prints page) */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); max-width: 880px; margin: 0 auto; }
.price-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.4rem; text-align: center; background: #fff; }
.price-card h3 { margin: 0 0 .3rem; font-size: 1.35rem; }
.price-card .matted { color: var(--muted); font-size: .82rem; }
.price-card .amt { font-family: var(--serif); font-size: 2.4rem; color: var(--ink); margin: .6rem 0 1rem; }
.price-card .btn { width: 100%; }
/* "Added: … · View cart" — shown in place, the page doesn't move */
.cart-added { margin: .6rem 0 0; font-size: .88rem; line-height: 1.4; color: var(--ink); }
.cart-added--center { text-align: center; margin-top: 1rem; }
.cart-added a { color: var(--ink); text-underline-offset: 2px; text-decoration-color: var(--brand-dark); font-weight: 600; }

/* Disabled buttons: muted rather than faded — opacity .55 over the brand grey
   left the label at 2.6:1, which was genuinely hard to read. */
.btn:disabled, .btn:disabled:hover {
  cursor: not-allowed;
  background: #D8D8D8; border-color: #D8D8D8; color: #5A5A5A;   /* 4.8:1 */
}

/* Simple two-column info (about / contact) */
.split { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.split .portrait { position: relative; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 14px 34px rgba(30,25,18,.14); }
.split .portrait img { width: 100%; height: 100%; object-fit: cover; }

/* About: "From the Artist" — Uta's first-person words, set apart in serif */
.artist-words { margin: 2.4rem 0; padding-top: 2rem; border-top: 1px solid var(--line); max-width: 62ch; }
.artist-words .eyebrow { font-weight: 400; margin-bottom: 1.1rem; }
.artist-words p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.7; margin: 0 0 1.1rem; }
.artist-words .artist-words-close { font-size: 1.35rem; line-height: 1.4; margin: 1.6rem 0 0; }

@media (max-width: 720px) {
  .price-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  /* stacked: keep the tall portrait from dominating the page */
  .split .portrait { max-width: 320px; margin-inline: auto; }
}

/* ==========================================================================
   GREETING CARDS (greeting-cards.html) — bundle builder + painting picker.
   Card art uses object-fit: contain on the neutral mat, like the detail
   page: the buyer is choosing a painting, so show all of it.
   ========================================================================== */
/* Base sizes are the comfortable, tap-friendly ones: phones and tablets
   scroll, so nothing here is squeezed. On desktop (≥1200px) the block at the
   end of this section scales type, spacing and slot size with the viewport
   HEIGHT so the whole page — title, both rows of slots, price bar and "How it
   works" — just fills the screen without scrolling at 10 cards. */
.gc-hero { padding: clamp(1.8rem, 6vw, 2.8rem) 0 clamp(.9rem, 3vw, 1.3rem); }
.gc-hero h1 { font-size: clamp(2.2rem, 6vw, 3rem); margin: 0 0 .5rem; }
.gc-hero p.lede { font-size: 1.05rem; max-width: 40ch; margin: 0 auto; }
.gc-pricing { display: block; margin-top: .45rem; font-size: .95rem; letter-spacing: .02em; color: var(--ink); }

/* Ready-made bundles — a compact strip above the builder, so "Or build your
   own" and the first row of slots stay on screen at first load on laptops.
   Each tile: the four paintings as a tight 2×2 block (same neutral mat as
   the slots) beside the name, a small price line and a compact button.
   4 in one row on desktop, 2×2 on tablets, a swipeable row on phones. */
.gc-bundles { padding: 0 0 clamp(.8rem, 2.5vw, 1.1rem); text-align: center; }
.gc-bundles h2, .gc-builder-title { font-size: clamp(1.2rem, 3.5vw, 1.4rem); line-height: 1.2; margin: 0 0 .55rem; text-align: center; }
.gc-bundle-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1100px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
}
.gc-bundle {
  display: flex; align-items: center; gap: .75rem; text-align: left; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem; box-shadow: 0 4px 12px rgba(30,25,18,.06);
}
.gc-bundle-art {
  list-style: none; margin: 0; padding: 0; flex: 0 0 90px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
}
.gc-bundle-thumb { position: relative; aspect-ratio: 1 / 1; background: #ece9e3; border-radius: 4px; overflow: hidden; }
.gc-bundle-thumb img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.gc-bundle-info { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
.gc-bundle-name { margin: 0; font-size: 1.1rem; line-height: 1.2; white-space: nowrap; }
.gc-bundle-price { margin: 0 0 .4rem; font-size: .84rem; line-height: 1.3; color: var(--muted); }
.gc-bundle-use { padding: .6rem .9rem; font-size: .74rem; letter-spacing: .06em; white-space: nowrap; }
.gc-builder-title { margin-bottom: .7rem; }
/* 1100–1199px: four tiles share one row but are narrower, so they keep the
   earlier, smaller sizes (the larger button doesn't fit beside the paintings).
   Below 1100px even those overflow, so the tiles go 2×2 there. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .gc-bundle { padding: .5rem; }
  .gc-bundle-art { flex-basis: 80px; }
  .gc-bundle-name { font-size: 1rem; }
  .gc-bundle-price { font-size: .78rem; margin-bottom: .35rem; }
  .gc-bundle-use { padding: .5rem .8rem; font-size: .66rem; letter-spacing: .1em; }
}
@media (max-width: 1099px) and (min-width: 641px) {
  .gc-bundle-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}

/* How it works — three steps plus the card spec */
.gc-how { padding: clamp(2rem, 6vw, 3rem) 0 0; text-align: center; }
.gc-how .container { display: grid; gap: 1rem 1.6rem; }
.gc-how h2 { font-size: clamp(1.6rem, 5vw, 2rem); margin: 0; }
.gc-steps {
  list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 440px;
  display: grid; grid-template-columns: 1fr; gap: .8rem;
}
.gc-steps li {
  display: flex; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.gc-step-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand);
  font-family: var(--serif); font-size: 1.05rem;
}
.gc-steps p { margin: 0; color: var(--muted); font-size: 1rem; text-align: left; }
.gc-steps strong { color: var(--ink); font-weight: 600; }
.gc-physical { grid-column: 1 / -1; color: var(--muted); font-size: .92rem; margin: 0; }

.gc-builder-section { padding: clamp(1.1rem, 3vw, 1.6rem) 0 0; }

/* Slots: at most 5 per row, rows centred, so 6 cards = 5 + 1 in the middle,
   7 = 5 + 2 … 10 = 5 + 5 — flex wrap + justify-content: center re-centres
   them every time a slot is added or removed. */
.gc-slots {
  --slot: 170px;
  --slot-gap: 1rem;
  list-style: none; margin: 0 auto; padding: 0;
  max-width: calc(5 * var(--slot) + 4 * var(--slot-gap));
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--slot-gap);
}
.gc-slot { position: relative; display: flex; flex-direction: column; flex: 0 0 var(--slot); width: var(--slot); min-width: 0; }
.gc-slot-pick {
  display: flex; flex-direction: column; width: 100%; padding: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit;
  box-shadow: 0 6px 18px rgba(30,25,18,.07);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gc-slot-pick:hover { border-color: var(--brand-dark); box-shadow: 0 10px 26px rgba(30,25,18,.13); }
.gc-slot-pick:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.gc-slot-art {
  display: flex; align-items: center; justify-content: center;
  position: relative; aspect-ratio: 1 / 1; background: #ece9e3;
}
/* absolutely placed so a tall painting can't stretch the aspect-ratio box */
.gc-slot-art img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
/* empty slot: a dashed card with a big + */
.gc-slot:not(.is-filled) .gc-slot-pick { border: 2px dashed #BDBDBD; box-shadow: none; background: transparent; }
.gc-slot:not(.is-filled) .gc-slot-pick:hover { border-color: var(--accent-dk); }
.gc-slot:not(.is-filled) .gc-slot-art { background: transparent; }
.gc-plus {
  display: flex; align-items: center; justify-content: center;
  width: 32%; aspect-ratio: 1; max-width: 60px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--accent-dk);
  font-size: 1.9rem; line-height: 1; font-weight: 300;
  transition: background .2s ease, color .2s ease;
}
.gc-slot-pick:hover .gc-plus { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
/* one line, so every slot in a row is the same height */
.gc-slot-title {
  display: block; padding: .5rem .7rem .55rem;
  font-family: var(--serif); font-size: .98rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-slot-title--empty { font-family: var(--sans); font-size: .82rem; color: var(--accent-dk); text-align: center; }
.gc-slot-clear {
  position: absolute; top: .4rem; right: .4rem; z-index: 1;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.gc-slot-clear:hover { background: var(--ink); color: #fff; }
/* card number, a small badge on the art's top-left corner */
.gc-slot-num {
  position: absolute; top: .4rem; left: .4rem; z-index: 1; pointer-events: none;
  min-width: 24px; height: 24px; padding: 0 .35rem; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); color: var(--accent-dk);
  font-size: .74rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.gc-slot-foot { display: flex; justify-content: center; padding: .1rem 0 0; min-height: 2.3rem; }
.gc-slot-remove {
  background: none; border: 0; padding: .5rem .6rem; cursor: pointer;
  font: inherit; font-size: .82rem; line-height: 1.3; color: var(--accent-dk);
  text-decoration: underline; text-decoration-color: var(--brand-dark); text-underline-offset: 2px;
}
.gc-slot-remove:hover { color: var(--ink); text-decoration-color: var(--ink); }

.gc-add {
  font: inherit; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
  padding: .9rem 1.4rem; border-radius: var(--radius); cursor: pointer;
  background: #fff; color: var(--ink); border: 2px dashed #9E9E9E;
  transition: background .2s ease, border-color .2s ease;
}
.gc-add:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--accent-dk); }
.gc-add:disabled { cursor: default; border-style: solid; border-color: var(--line); background: transparent; color: var(--accent-dk); }

/* Total + add + order in one bar. Sticky to the bottom of the viewport while
   the builder is on screen, so the price is always in view as cards change. */
.gc-summary {
  position: sticky; bottom: 0; z-index: 5;
  margin: clamp(1.4rem, 4vw, 2rem) calc(-1 * clamp(1rem, 4vw, 2.5rem)) 0;
  padding: .9rem clamp(1rem, 4vw, 2.5rem) 1rem;
  background: rgba(241,241,241,.96); border-top: 1px solid #DADADA;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .15rem 1.1rem;
}
.gc-total { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; }
.gc-add, .gc-order { grid-row: span 2; }
.gc-hint { margin: 0; font-size: .85rem; line-height: 1.35; color: var(--muted); }

/* Desktop: fill the viewport, no scrolling. Everything vertical scales with
   the viewport height (vh), and the slot size takes whatever height is left
   for the two rows. The slot formula is calibrated against the site header
   (~169px) and the vh-scaled pieces below: if you add height to this page,
   re-check at 1366×768 and 1920×1080 and adjust the two numbers in --slot. */
@media (min-width: 1200px) {
  .gc-hero { padding: 2.4vh 0 1.5vh; }
  .gc-hero h1 { font-size: clamp(1.9rem, 4.3vh, 3.1rem); margin: 0 0 .6vh; }
  .gc-hero p.lede { font-size: clamp(.98rem, 2.05vh, 1.2rem); max-width: none; }
  /* the pricing rides on the lede's line, set apart by a dot */
  .gc-pricing { display: inline; margin: 0; white-space: nowrap; font-size: .92em; }
  .gc-pricing::before { content: "·"; margin: 0 .55em 0 .25em; color: var(--muted); }

  .gc-builder-section { padding-top: 2.2vh; }
  .gc-slots {
    --slot: clamp(96px, max(calc(100vh * .1667 - 32px), calc(100vh * .2944 - 147px)), 200px);
    --slot-gap: clamp(.8rem, 1.7vh, 1.3rem);
  }
  .gc-slot-title { font-size: clamp(.84rem, 1.65vh, 1.02rem); padding: .6vh .6rem .7vh; }
  .gc-slot-title--empty { font-size: clamp(.74rem, 1.45vh, .88rem); }
  .gc-slot-foot { min-height: 0; height: clamp(1.25rem, 2.7vh, 1.9rem); padding: .15vh 0 0; }
  .gc-slot-remove { font-size: clamp(.72rem, 1.45vh, .85rem); padding: 0 .4rem; }

  .gc-summary { margin-top: 2vh; padding-top: 1.2vh; padding-bottom: 1.3vh; }
  .gc-total { font-size: clamp(1.35rem, 3.3vh, 2.2rem); line-height: 1.1; }
  .gc-hint { font-size: clamp(.8rem, 1.55vh, .95rem); }
  .gc-add, .gc-order { padding-top: clamp(.7rem, 1.5vh, 1rem); padding-bottom: clamp(.7rem, 1.5vh, 1rem); }

  /* How it works: the heading beside three one-liners, spec underneath */
  .gc-how { padding-top: 2.4vh; }
  .gc-how .container { grid-template-columns: auto 1fr; align-items: center; gap: 1vh 1.4rem; max-width: 1120px; }
  .gc-how h2 { font-size: clamp(1.3rem, 2.9vh, 2rem); white-space: nowrap; }
  .gc-steps { max-width: none; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
  .gc-steps li { justify-content: center; padding: clamp(.4rem, 1.1vh, .85rem) .8rem; gap: .65rem; }
  .gc-step-num { width: clamp(26px, 3.6vh, 36px); height: clamp(26px, 3.6vh, 36px); font-size: clamp(.9rem, 1.9vh, 1.1rem); }
  .gc-steps p { font-size: clamp(.86rem, 1.75vh, 1.05rem); }
  .gc-physical { font-size: clamp(.84rem, 1.6vh, .98rem); }
}

/* Picker: a large centred panel on desktop, full screen on phones */
.gc-picker {
  width: min(1000px, calc(100vw - 2rem)); max-height: min(86vh, 900px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  box-shadow: 0 30px 80px rgba(20,16,10,.35);
  overflow: hidden;
}
.gc-picker[open] { display: flex; flex-direction: column; }
.gc-picker::backdrop { background: rgba(20,16,10,.55); }
html.gc-picker-open { overflow: hidden; }   /* no page scroll behind the picker */
.gc-picker-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); background: var(--brand-tint);
}
.gc-picker-head h2 { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.5rem); }
.gc-picker-close {
  flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.gc-picker-close:hover { background: var(--brand); }
.gc-picker-grid {
  list-style: none; margin: 0; padding: 1.4rem; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.2rem;
}
.gc-option {
  display: flex; flex-direction: column; width: 100%; padding: 0; cursor: pointer;
  background: #fff; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden;
  font: inherit; color: inherit; text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gc-option:hover { border-color: var(--brand-dark); box-shadow: 0 8px 22px rgba(30,25,18,.12); }
.gc-option:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.gc-option[aria-pressed="true"] { border-color: var(--ink); }
.gc-option-art {
  display: flex; align-items: center; justify-content: center;
  position: relative; aspect-ratio: 1 / 1; background: #ece9e3;
}
.gc-option-art img { position: absolute; inset: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); object-fit: contain; }
.gc-option-title { display: block; padding: .5rem .6rem .6rem; font-family: var(--serif); font-size: .95rem; line-height: 1.25; }
.gc-option[aria-pressed="true"] .gc-option-title::after {
  content: " ✓"; font-family: var(--sans); font-size: .85rem;
}


@media (max-width: 640px) {
  /* bundles: one swipeable row, bleeding to the screen edges; the list
     scrolls inside itself, so the page never scrolls sideways */
  .gc-bundle-grid {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    --gutter: clamp(1rem, 4vw, 2.5rem);   /* = .container side padding */
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin: 0 calc(-1 * var(--gutter)); padding: .1rem var(--gutter) .6rem; gap: .7rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .gc-bundle-grid::-webkit-scrollbar { display: none; }
  .gc-bundle { flex: 0 0 78%; scroll-snap-align: start; }
  /* two per row, an odd last card centred on its own */
  .gc-slots { --slot: calc((100% - var(--slot-gap)) / 2); max-width: 440px; }
  .gc-summary { grid-template-columns: 1fr; text-align: center; }
  .gc-add, .gc-order { grid-row: auto; width: 100%; }
  /* the picker takes over the whole screen */
  .gc-picker {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0;
  }
  .gc-picker-head { padding: .7rem .8rem .7rem 1rem; }
  .gc-picker-grid { padding: 1rem; gap: .9rem; grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   FOOTER  (shared)
   ========================================================================== */
.site-footer { background: var(--brand); color: var(--on-brand); margin-top: clamp(3rem,7vw,5rem); padding: clamp(2.6rem,5vw,3.8rem) 0; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.footer-logo { font-family: var(--serif); letter-spacing: .28em; font-size: 1.15rem; color: var(--on-brand); }
.share { display: flex; gap: .6rem; }
.share a, .share button {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(26,26,26,.45); background: transparent; color: var(--on-brand);
  cursor: pointer; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s;
}
.share a:hover, .share button:hover { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); }
.share svg { width: 18px; height: 18px; fill: currentColor; }
.copy-flash { font-size: .78rem; color: rgba(26,26,26,.8); min-height: 1em; }
.footer-meta { font-size: .78rem; color: rgba(26,26,26,.84); }
.footer-meta a { color: var(--on-brand); }

/* Footer "From Collectors" — "In Their Homes", a compact customer-photo slideshow above the
   share row. Built by main.js from js/reviews.js; hidden while that's empty.
   Arrows reuse .hero-nav (smaller, always shown); photos crossfade. */
.reviews { width: 100%; max-width: 380px; }
.reviews[hidden] { display: none; }
.reviews .eyebrow { color: rgba(26,26,26,.84); margin: 0 0 .25rem; }   /* --accent-dk is too faint on the grey */
.reviews h2 { margin: 0 0 .8rem; font-size: 1.35rem; line-height: 1.2; color: var(--on-brand); }
.reviews-show { position: relative; border-radius: var(--radius); }
.reviews-show:focus-visible { outline: 3px solid var(--on-brand); outline-offset: 3px; }
.reviews-frame {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); background: rgba(255,255,255,.3);
  box-shadow: 0 8px 22px rgba(27,26,23,.18);
}
.reviews-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s;
}
.reviews-frame img.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.reviews .hero-nav { width: 36px; height: 36px; opacity: .9; }
.reviews .hero-nav:hover, .reviews .hero-nav:focus-visible { opacity: 1; }
.reviews .hero-nav svg { width: 18px; height: 18px; }
.reviews .hero-prev { left: 8px; }
.reviews .hero-next { right: 8px; }
/* every caption sits in the same grid cell, so the box is as tall as the
   longest one and the footer never jumps as they change */
.reviews-captions { display: grid; }
.reviews-caption {
  grid-area: 1 / 1; margin: .6rem 0 0;
  font-family: var(--serif); font-style: italic; font-size: .95rem; line-height: 1.4;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s;
}
.reviews-caption:empty { margin: 0; }
.reviews-caption.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
/* indicator dashes — each a 28×24 tap target around a short bar */
.reviews-dashes { display: flex; flex-wrap: wrap; justify-content: center; margin-top: .35rem; }
.reviews-dash { position: relative; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.reviews-dash::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: 2px; background: rgba(26,26,26,.3); transition: background .2s ease;
}
.reviews-dash:hover::before { background: rgba(26,26,26,.6); }
.reviews-dash[aria-current]::before { background: var(--on-brand); }
.reviews-dash:focus-visible { outline: 2px solid var(--on-brand); outline-offset: -2px; border-radius: 4px; }
.reviews h2 a { color: inherit; text-decoration: none; }
.reviews h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* "More from collectors" — the site's .btn (same size and shape as "View the
   originals"), but white: a grey button would vanish on the grey footer */
.reviews-more { margin-top: .9rem; background: #fff; border-color: #fff; color: var(--on-brand); }
.reviews-more:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); }

/* About page: From Collectors section (about.html#from-collectors) — written reviews as
   quote cards, then the customer photos in a grid (both from js/reviews.js) */
.about-reviews { scroll-margin-top: 130px; }   /* clear the sticky header */
.about-reviews[hidden], .review-quotes[hidden], .review-photos-block[hidden] { display: none; }
.review-quotes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; align-items: start;
  max-width: 980px; margin: 0 auto clamp(2rem, 5vw, 3rem);
}
.review-quote {
  margin: 0; padding: 1.4rem 1.5rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.review-quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; }
.review-quote figcaption { margin-top: .7rem; font-size: .88rem; color: var(--muted); }
.review-photos-title { text-align: center; font-size: 1.3rem; margin: 0 0 1rem; }
.review-photos {
  list-style: none; margin: 0 auto; padding: 0; max-width: 980px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.review-photos img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: 0 8px 22px rgba(27,26,23,.12);
}
.review-photo-caption { margin: .5rem 0 0; font-family: var(--serif); font-style: italic; font-size: .95rem; text-align: center; }
@media (max-width: 640px) { .review-photos { grid-template-columns: 1fr; max-width: 420px; } }

/* ==========================================================================
   MAILING-LIST POPUP (modal)
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(20,16,10,.55);
  opacity: 0; transition: opacity .3s ease;
}
.modal.open { display: flex; opacity: 1; }
.modal-card {
  background: var(--panel); max-width: 440px; width: 100%;
  padding: clamp(1.8rem, 5vw, 2.8rem); border-radius: var(--radius);
  border-top: 5px solid var(--brand);   /* brand popup header accent */
  position: relative; text-align: center; overflow: hidden;
  box-shadow: 0 30px 80px rgba(20,16,10,.35);
  transform: translateY(12px); transition: transform .3s ease;
}
.modal.open .modal-card { transform: translateY(0); }
.modal-card h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .6rem; color: var(--ink); }
.modal-card p { color: var(--muted); margin: 0 auto 1.4rem; max-width: 34ch; }
.modal-close {
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.modal-close:hover { color: var(--ink); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature-art { order: 0; }
  .feature-copy { text-align: center; }
  .feature-copy p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
}

/* Narrow tablets, just above the hamburger: seven tabs (since Greeting Cards)
   wrapped to two rows here, so tighten spacing to keep them on one line. */
@media (min-width: 641px) and (max-width: 780px) {
  .primary-nav { gap: .95rem; padding-inline: .5rem; }
  .primary-nav a { letter-spacing: .12em; font-size: .7rem; }
}

@media (max-width: 640px) {
  /* Mobile header: wordmark truly centered on the viewport, hamburger over
     the left, photo/message hidden, nav collapses. Flex (not grid) so the
     wide wordmark centers on the page rather than an off-center grid cell. */
  .header-inner { display: block; text-align: center; position: relative; padding-bottom: .9rem; }
  .logo { grid-column: auto; display: inline-block; }
  .logo img { height: auto; width: min(56vw, 250px); }
  .nav-toggle { display: block; position: absolute; left: .6rem; top: 1rem; }
  .cart-link { right: .6rem; }   /* still top:50% — centred in the bar */
  .primary-nav {
    max-height: 0; overflow: hidden; padding: 0 1rem;
    flex-direction: column; align-items: center; gap: 0;
    border-top: 1px solid rgba(26,26,26,.18);
    transition: max-height .3s ease, padding .3s ease;
  }
  .primary-nav.open { max-height: 440px; padding: .5rem 1rem 1rem; }   /* 7 links */
  .primary-nav a { padding: .7rem 0; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-caption { transition: none !important; }
  /* No travel, no scaling — just a quick fade between paintings.
     Scoped to :root:not([data-motion="full"]) so the full motion can be seen
     while developing: main.js sets that marker on localhost, and on any page
     loaded with ?motion=full. In production a visitor who asked for reduced
     motion still lands here and gets the fade — ?motion=reduced previews it. */
  :root:not([data-motion="full"]) .hero-slideshow img {
    transform: none !important;
    transition: opacity .25s linear !important;
  }
  :root:not([data-motion="full"]) .hero-slideshow img.enter-right,
  :root:not([data-motion="full"]) .hero-slideshow img.enter-left,
  :root:not([data-motion="full"]) .hero-slideshow img.exit-left,
  :root:not([data-motion="full"]) .hero-slideshow img.exit-right { opacity: 0 !important; }
  :root:not([data-motion="full"]) .hero-slideshow img.at-center { opacity: 1 !important; }
  /* footer reviews: no crossfade (and main.js skips the auto-advance) */
  :root:not([data-motion="full"]) .reviews-frame img,
  :root:not([data-motion="full"]) .reviews-caption { transition: none !important; }
  .modal, .modal-card, .feature-art { transition: none !important; }
  .feature:hover .feature-art { transform: none; }
  .gc-slot-pick, .gc-plus, .gc-add, .gc-option { transition: none !important; }
  .site-header, .header-inner, .logo img { transition: none !important; }
}

/* ==========================================================================
   CART (cart.html) + ORDER COMPLETE (order-complete.html)
   ========================================================================== */
.cart-page { max-width: 820px; margin: 0 auto; padding-bottom: clamp(3rem, 7vw, 5rem); }
.cart-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cart-line {
  display: grid; grid-template-columns: 96px 1fr auto; gap: .4rem 1.2rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.cart-thumb { width: 96px; height: 96px; border-radius: 4px; overflow: hidden; background: var(--brand-tint); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* a card bundle shows its first four paintings as a 2×2 block */
.cart-thumb--cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #fff; }
.cart-line-info { min-width: 0; }
.cart-line-title { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; }
.cart-line-title a { text-decoration: none; }
.cart-line-title a:hover { text-decoration: underline; }
.cart-line-meta { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.4; }
.cart-line-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .5rem; }
.cart-line-price { margin: 0; font-family: var(--serif); font-size: 1.2rem; white-space: nowrap; text-align: right; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.qty button {
  width: 36px; height: 36px; border: 0; background: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--ink); border-radius: var(--radius);
}
.qty button:hover:not(:disabled) { background: var(--brand-tint); }
.qty button:disabled { color: #b9b4ab; cursor: not-allowed; }
.qty button:focus-visible, .cart-remove:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.qty output { min-width: 2ch; text-align: center; font-size: .95rem; }
.cart-remove {
  border: 0; background: none; padding: .3rem 0; cursor: pointer;
  font-family: var(--sans); font-size: .82rem; color: var(--accent-dk);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--brand-dark);
}
.cart-remove:hover { color: var(--ink); }
.cart-summary { margin-top: 1.6rem; display: grid; justify-items: end; gap: .3rem; text-align: right; }
.cart-subtotal { margin: 0; font-family: var(--serif); font-size: 1.5rem; }
.cart-summary .mail-note { margin: 0 0 .8rem; }
.cart-checkout { min-width: 240px; }
.cart-checkout[aria-busy="true"] { cursor: progress; }
.cart-error { margin: .6rem 0 0; color: #9b2c2c; font-size: .9rem; max-width: 46ch; }
.cart-notice { margin: 0 0 1rem; padding: .6rem .9rem; background: var(--brand-tint); border-radius: var(--radius); font-size: .88rem; }
.cart-empty { text-align: center; padding: 1rem 0 2rem; }
.cart-empty p { margin: 0; font-family: var(--serif); font-size: 1.3rem; }
.cart-empty-links { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.cart-keep { margin-top: 1.4rem; text-align: center; font-size: .9rem; }

@media (max-width: 640px) {
  .cart-line { grid-template-columns: 72px 1fr; }
  .cart-thumb { width: 72px; height: 72px; }
  .cart-line-price { grid-column: 2; text-align: left; }
  .cart-summary { justify-items: stretch; text-align: center; }
  .cart-checkout { width: 100%; min-width: 0; }
  .cart-error { max-width: none; }
}

/* Mailing-list signup: honeypot (off-screen, not display:none — some bots
   skip hidden fields) and the error line under the form */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mail-form .form-error { flex-basis: 100%; margin: .2rem 0 0; font-size: .85rem; color: #9b2c2c; text-align: center; }
.mail-form .form-error[hidden] { display: none; }
.mail-form button[aria-busy="true"] { cursor: progress; }

/* ==========================================================================
   CHOOSE A PAINTING FOR A PRINT (choose-print.html)
   ========================================================================== */
.cp-hero { padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.cp-hero .eyebrow a { color: inherit; text-decoration: none; }
.cp-hero .eyebrow a:hover { text-decoration: underline; }
.cp-hero h1 { margin: 0 0 .4rem; }
.cp-size-line { margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.3rem); }
.cp-sizes { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.cp-size {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .04em;
  padding: .45rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.cp-size:hover { border-color: var(--brand-dark); }
.cp-size[aria-pressed="true"] { background: var(--on-brand); border-color: var(--on-brand); color: #fff; }
.cp-size:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cp-grid-section { padding: .5rem 0 clamp(3rem, 7vw, 5rem); }

/* button tiles (RAINA.tile with opts.pick) look like the link tiles */
.gallery button.tile { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
/* two across on phones (the link grids drop to one) */
@media (max-width: 640px) {
  .gallery--pick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .gallery--pick figcaption { font-size: .9rem; line-height: 1.3; }
}

.cp-dialog {
  width: min(960px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  padding: clamp(1rem, 3vw, 1.8rem); border: 0; border-radius: var(--radius);
  background: var(--panel); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.cp-dialog::backdrop { background: rgba(12,10,8,.6); }
.cp-dialog-close {
  position: absolute; top: .5rem; right: .5rem; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink);
}
.cp-dialog-close:hover, .cp-dialog-close:focus-visible { background: var(--brand-tint); }
.cp-dialog-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.cp-dialog-img { width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; border-radius: 2px; }
.cp-dialog-info h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; margin: 0 2rem .3rem 0; }
.cp-dialog-size { margin: 0 0 1rem; color: var(--muted); }
.cp-add { width: 100%; }
.cp-add[hidden], .cp-added[hidden] { display: none; }   /* .btn sets display, which beats [hidden] */
.cp-added-text { margin: 0 0 .8rem; font-weight: 600; }
.cp-added-actions { display: grid; gap: .5rem; }
.cp-added-actions .btn { text-align: center; }
.cp-dialog .mail-note { margin-top: 1rem; }
html.cp-dialog-open { overflow: hidden; }
@media (max-width: 640px) {
  .cp-dialog-body { grid-template-columns: 1fr; }
  .cp-dialog-img { max-height: 45dvh; }
}