/* ==========================================================================
   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 */

.artist {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--on-brand);
  max-width: 260px;
}
.artist-photo {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #6E6E6E, #3C3C3C);   /* stands out on the grey bar */
  box-shadow: 0 0 0 1.5px rgba(26,26,26,.28);
}
.artist-photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.artist-initials {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--serif); font-size: .95rem; letter-spacing: .05em;
}
.artist-msg { font-size: .82rem; line-height: 1.35; color: rgba(26,26,26,.84); }
.artist-msg strong { color: var(--on-brand); font-weight: 600; }

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

.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; }
.artist { transition: opacity .2s 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; }
.site-header.scrolled .artist { opacity: 0; visibility: hidden; pointer-events: none; }

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

/* ==========================================================================
   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: 30px; 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; }

/* Indicator dashes (desktop) */
.hero-dots {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 4px; max-width: 92%;
}
.hero-dot {
  width: 12px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  /* the mat behind these is light, so dark dashes with a faint halo read on
     both the mat and a dark painting */
  background: rgba(20,16,10,.32); box-shadow: 0 0 0 1px rgba(255,255,255,.4);
  cursor: pointer; transition: background .2s ease;
}
.hero-dot:hover { background: rgba(20,16,10,.6); }
.hero-dot.active { background: var(--ink); }

/* Compact counter (mobile) */
.hero-counter {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3;
  display: none; color: #fff; font-size: .72rem; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 999px; background: rgba(20,16,10,.42);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* "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-dots { display: none; }        /* too many dashes on a phone */
  .hero-counter { display: block; }
  .hero-caption { bottom: 40px; }      /* sit above the counter */
  .hero-nav { width: 40px; height: 40px; }
}

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

.categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); }
.cat {
  position: relative; display: block; overflow: hidden;
  text-decoration: none; color: #fff; border-radius: 2px;
  aspect-ratio: 3 / 4;
}
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cat:hover img { transform: scale(1.05); }
.cat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,16,10,.6) 0%, rgba(20,16,10,.05) 55%);
}
.cat span {
  position: absolute; left: 0; right: 0; bottom: 1.2rem; z-index: 2;
  text-align: center; font-family: var(--serif);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: .04em;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

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

.teaser {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.teaser img { aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; box-shadow: 0 14px 34px rgba(30,25,18,.12); }
.teaser h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0 0 .8rem; }

.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; }
.exhibition p { color: #cdc7bd; max-width: 52ch; margin: 0 auto 1.6rem; }
.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; }
.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; }

/* 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)
   ========================================================================== */
.work { padding-top: clamp(1.4rem, 3vw, 2.2rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.work-back { margin: 0 0 1.2rem; font-size: .9rem; }
.work-back--end { margin: 2.6rem 0 0; }
.work-figure {
  margin: 0; background: #ece9e3; border-radius: var(--radius);
  padding: clamp(.8rem, 2vw, 1.6rem); text-align: center;
  box-shadow: 0 14px 34px rgba(30,25,18,.12);
}
.work-figure img {
  max-width: 100%; max-height: 68vh; width: auto; height: auto;
  object-fit: contain;                    /* never crop the art */
  border-radius: 2px;
}
.work-head { text-align: center; margin: clamp(1.4rem, 3vw, 2rem) 0 0; }
.work-head h1 { font-family: var(--serif); font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin: 0 0 .3rem; }
.work-media { color: var(--muted); font-size: .9rem; margin: 0; }
.work-original { text-align: center; margin: clamp(1.6rem, 4vw, 2.4rem) auto 0; max-width: 46ch; }
.work-original h2,
.work-prints h2 { font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin: 0 0 .6rem; }
.work-original-line { font-size: 1.05rem; margin: 0 0 1.1rem; }
/* 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: .8rem 1rem; margin: 0 0 1.1rem;
  font-size: .92rem; line-height: 1.5; text-align: left; color: #2a2721;
}
.work-prints { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.work-prints h2 { text-align: center; }
.work-prints-sub { text-align: center; color: var(--muted); max-width: 52ch; margin: 0 auto clamp(1.4rem, 3vw, 2rem); font-size: .95rem; }

/* 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%; }
/* Pending Stripe links. Styled muted rather than faded: opacity .55 over the
   brand grey left the label at 2.6:1, which was genuinely hard to read. */
.stripe-pending {
  display: inline-block; cursor: not-allowed;
  background: #D8D8D8; border-color: #D8D8D8; color: #5A5A5A;   /* 4.8:1 */
}
.stripe-pending:hover { background: #D8D8D8; border-color: #D8D8D8; color: #5A5A5A; }

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

@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.
   ========================================================================== */
.gc-steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: 960px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem);
}
.gc-steps li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; text-align: center;
}
.gc-step-num {
  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 h3 { font-size: 1.2rem; margin: .7rem 0 .3rem; }
.gc-steps p { margin: 0; color: var(--muted); font-size: .95rem; }
.gc-steps strong { color: var(--ink); }
.gc-physical { text-align: center; color: var(--muted); font-size: .92rem; margin: 1.4rem 0 0; }

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

.gc-slots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: clamp(.9rem, 2.2vw, 1.4rem);
}
.gc-slot { position: relative; display: flex; flex-direction: column; }
.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: 4 / 5; background: #ece9e3;
}
/* absolutely placed so a tall painting can't stretch the aspect-ratio box */
.gc-slot-art img { position: absolute; inset: .7rem; width: calc(100% - 1.4rem); height: calc(100% - 1.4rem); 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: 58px; height: 58px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--accent-dk);
  font-size: 2rem; 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); }
.gc-slot-title {
  display: block; padding: .6rem .8rem .7rem;
  font-family: var(--serif); font-size: .98rem; line-height: 1.25;
}
.gc-slot-title--empty { font-family: var(--sans); font-size: .82rem; color: var(--accent-dk); text-align: center; }
.gc-slot-clear {
  position: absolute; top: .45rem; right: .45rem; 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.35rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.gc-slot-clear:hover { background: var(--ink); color: #fff; }
.gc-slot-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; padding: .45rem .2rem 0; min-height: 2rem;
}
.gc-slot-num { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.gc-slot-remove {
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  font: inherit; font-size: .8rem; 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-row { text-align: center; margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.gc-add {
  font: inherit; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em;
  padding: .9rem 1.6rem; 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 + order button. 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.6rem, 4vw, 2.4rem) calc(-1 * clamp(1rem, 4vw, 2.5rem)) 0;
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.1rem;
  background: rgba(241,241,241,.96); border-top: 1px solid #DADADA;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1.4rem;
}
.gc-total { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; }
.gc-order { grid-row: span 2; }
.gc-hint { margin: 0; font-size: .85rem; color: var(--muted); }
.gc-order.is-ready { cursor: default; }

/* 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: 720px) {
  .gc-steps { grid-template-columns: 1fr; }
  .gc-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; text-align: left; padding: 1.1rem 1.2rem; }
  .gc-step-num { grid-row: span 2; }
  .gc-steps h3 { margin: 0 0 .2rem; }
}

@media (max-width: 640px) {
  .gc-slots { grid-template-columns: repeat(2, 1fr); }
  .gc-summary { grid-template-columns: 1fr; text-align: center; }
  .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); }

/* ==========================================================================
   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) {
  .teaser { grid-template-columns: 1fr; }
  .teaser .teaser-copy { order: 2; text-align: center; }
  .categories { grid-template-columns: 1fr; }
  .cat { aspect-ratio: 16/10; }
}

/* 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); }
  .artist { display: none; }
  .nav-toggle { display: block; position: absolute; left: .6rem; top: 1rem; }
  .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; }
  .modal, .modal-card, .cat img { transition: none !important; }
  .gc-slot-pick, .gc-plus, .gc-add, .gc-option { transition: none !important; }
  .site-header, .header-inner, .logo img, .artist { transition: none !important; }
}