/* ─────────────────────────────────────────────────────────────
   TRISHA SELGRATH — STILL LIFE & FINE ART
   Shared stylesheet. Two-layer palette:
     · light editorial pages  (home, about, community, painting)
     · dark gallery page      (the still-lifes index)
   ───────────────────────────────────────────────────────────── */

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

:root {
  /* ── Locked palette ── */
  --linen:        #DCC9A8;   /* light page background */
  --linen-soft:   #E4D2B0;   /* slightly lighter — cards/panels on light pages */
  --linen-deep:   #C9B894;   /* deeper warm — dividers, hover backgrounds */
  --charcoal:     #2A2520;   /* dark gallery background */
  --charcoal-mid: #36302A;   /* dark cards/panels */
  --gold:         #BC8E40;   /* primary accent */
  --gold-light:   #D4AA5A;   /* gold on dark hover */
  --red:          #660000;   /* deep red CTAs, buttons, links */
  --red-hover:    #800000;
  --red-soft:     rgba(102,0,0,0.18);

  /* ── Ink (text) ── */
  --ink:          #2A1F12;   /* primary text on linen */
  --ink-mid:      #4A3D2A;   /* body copy on linen */
  --ink-dim:      #6A5638;   /* eyebrow / muted on linen */
  --parchment:    #E8E2D5;   /* primary text on charcoal */
  --parchment-dim:#9A8B73;   /* muted text on charcoal */

  /* ── Type scale tokens ── */
  --eyebrow-size: 0.6rem;
  --eyebrow-spacing: 0.32em;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.7;
  background: var(--linen);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body.dark {
  background: var(--charcoal);
  color: var(--parchment);
}

/* ─── HEADER ─── */
.site-header {
  background: var(--linen);
  padding: 2rem 2rem 0;
  display: flex; flex-direction: column; align-items: center;
  border-bottom: 1px solid rgba(102,0,0,0.12);
}

body.dark .site-header {
  background: var(--charcoal);
  border-bottom: 1px solid rgba(188,142,64,0.22);
}

.logo-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem; margin-bottom: 1.3rem;
}

.logo-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 400; letter-spacing: 0.14em;
  color: var(--ink); text-transform: uppercase;
  text-decoration: none;
}

body.dark .logo-name { color: var(--parchment); }

.logo-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--red);
}

body.dark .logo-sub { color: var(--gold); }

/* Make the bullet separators visible — they're nearly invisible at the
   subtitle's tiny base size and tight letter-spacing. Using • (bullet)
   instead of · (middle dot) for a solid, prominent shape.
   Red bullets (light pages) stay modest. Gold bullets (dark gallery)
   get bumped larger since #BC8E40 on charcoal needs more presence. */
.logo-sub-dot {
  font-size: 1.8em;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: -0.1em;
  margin: 0 0.05em;
}
body.dark .logo-sub-dot {
  font-size: 2.2em;
  vertical-align: -0.18em;
  margin: 0 0.1em;
}

/* ─── NAV ─── */
nav.primary {
  width: 100%;
  border-top: 1px solid rgba(102,0,0,0.12);
}

body.dark nav.primary {
  border-top: 1px solid rgba(188,142,64,0.22);
  border-bottom: 1px solid rgba(188,142,64,0.22);
}

nav.primary ul {
  list-style: none; display: flex; justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem); padding: 0.9rem 1rem;
}

nav.primary a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem; font-weight: 300;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-mid); text-decoration: none;
  position: relative; padding-bottom: 3px; transition: color 0.2s;
}

body.dark nav.primary a { color: var(--parchment); }

nav.primary a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 100%;
  height: 1px; background: var(--gold); transition: right 0.3s ease;
}

nav.primary a:hover { color: var(--red); }
body.dark nav.primary a:hover { color: var(--gold-light); }
nav.primary a:hover::after,
nav.primary a.active::after { right: 0; }
nav.primary a.active { color: var(--red); }
body.dark nav.primary a.active { color: var(--gold-light); }

/* ─── HORIZONTAL RULE ─── */
.rule {
  border: none;
  border-top: 1px solid var(--red-soft);
  margin: 0 clamp(1.5rem, 6vw, 6rem);
}

body.dark .rule { border-top-color: rgba(188,142,64,0.18); }

/* ─── SECTION WRAPPER ─── */
.section {
  padding: 4rem clamp(1.5rem, 6vw, 6rem);
  max-width: 1300px;
  margin: 0 auto;
}

.section-eyebrow {
  font-family: 'Josefin Sans', sans-serif;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-spacing);
  text-transform: lowercase;
  color: var(--ink-dim);
  display: block; margin-bottom: 0.6rem;
}

body.dark .section-eyebrow { color: var(--parchment-dim); }

.section-head {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 400; line-height: 1.2;
  color: var(--ink); margin-bottom: 0.5rem;
}

body.dark .section-head { color: var(--parchment); }

.section-head em { font-style: italic; }

.section-intro {
  font-size: 1rem; font-style: italic;
  color: var(--ink-mid); margin-bottom: 0.3rem;
}

body.dark .section-intro { color: var(--parchment-dim); }

/* ─── LINKS ─── */
.see-all, .ed-link {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red); text-decoration: none;
  display: inline-block;
  margin-top: 0.4rem;
  transition: color 0.2s, letter-spacing 0.3s;
}
.see-all:hover, .ed-link:hover { color: var(--red-hover); letter-spacing: 0.28em; }
.see-all::after, .ed-link::after { content: ' →'; }

body.dark .see-all, body.dark .ed-link { color: var(--gold-light); }
body.dark .see-all:hover, body.dark .ed-link:hover { color: var(--gold); }

/* ─── BUTTONS ─── */
.btn-red {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.65rem; letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--linen); background: var(--red);
  padding: 0.85rem 2rem; text-decoration: none;
  border: 1px solid var(--red);
  transition: background 0.25s, color 0.25s;
  cursor: pointer;
}
.btn-red:hover { background: var(--red-hover); }

.btn-ghost {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.65rem; letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red); background: transparent;
  border: 1px solid var(--red);
  padding: 0.85rem 2rem; text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.btn-ghost:hover { background: var(--red); color: var(--linen); }

/* ─── FOOTER ─── */
footer.site-footer {
  background: var(--charcoal);
  color: var(--parchment-dim);
  padding: 3.5rem clamp(1.5rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
}

@media (max-width: 900px) {
  footer.site-footer { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (max-width: 700px) {
  footer.site-footer { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-brand .logo-name-f {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--parchment);
  text-decoration: none; display: block;
  margin-bottom: 0.4rem;
}

.footer-brand p {
  font-size: 0.9rem; font-style: italic;
  color: var(--parchment-dim); margin-bottom: 1.2rem;
}

.footer-col h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 1rem;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul li a {
  font-size: 0.9rem; color: var(--parchment-dim);
  text-decoration: none; transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--gold-light); }

.footer-bottom {
  background: var(--charcoal);
  border-top: 1px solid rgba(188,142,64,0.08);
  text-align: center;
  padding: 1.2rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #5A4E40;
}

.footer-bottom a { color: var(--gold); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-light); }

/* "one painting, one place, one home" — handwritten tag used on individual
   painting pages that have no reproductions available. Drop in case-by-case. */
.dest-painting__tag {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: var(--red);
  text-align: center;
  margin: 0 auto 1.2rem;
  line-height: 1.3;
  max-width: 360px;
}

/* When painting-page story has multiple paragraphs, give them breathing room.
   The painting page inline styles set margin: 0 on p, so we add a specificity
   bump (body) and use the adjacent sibling combinator to only space when needed. */
body .dest-painting__story p + p { margin-top: 1.2em; }

/* ─── SHADOW HOST ───
   Wraps an image so its shadow stays static while the image transforms.
   Used in hover-animated contexts. The host shrink-wraps the img via
   inline-block + line-height:0; its box-shadow does NOT transition or move,
   so re-rasterization artifacts during transforms are eliminated.

   The background fills the host's interior with the same shadow tone, so
   when the image transforms and moves off its original position, the area
   it just vacated still shows shadow — not the page background. The outer
   box-shadow (per context) provides the soft falloff around the rectangle. */
.shadow-host {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  background: rgba(0, 0, 0, 0.18);
}
.shadow-host > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* The shadow lives on .shadow-host. The img must not carry its own shadow
   (otherwise the inner shadow would transform with the img on hover — the bug
   we're avoiding). Body prefix bumps specificity above the painting page's
   inline `.art-frame img { box-shadow: ... }` so this override wins. */
body .shadow-host > img {
  box-shadow: none;
}

/* Contexts where the host should fill its parent's width (img used to be
   width:100% inside its frame, so we mirror that on the host). */
.ed-card .painting-frame .shadow-host,
.art-video-link .art-frame .shadow-host,
.video-card__thumb .shadow-host {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
}
.ed-card .painting-frame .shadow-host > img,
.art-video-link .art-frame .shadow-host > img,
.video-card__thumb .shadow-host > img {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}

/* ─── PAINTING DETAIL — LEAD CAPTION ───
   Sits under the main lead image; carries medium + dimensions in the same
   typographic register as section eyebrows. The body prefix wins specificity
   over the per-page `.art-frame figcaption` Caveat-cursive rule used for
   supporting captions. */
body .art-frame--lead figcaption {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  padding-top: 1rem;
  margin: 0;
  line-height: 1.55;
}

/* ─── STATUS PILL ───
   For currently-available works. Sold paintings keep the Caveat "found a home"
   line for the emotional moment of the sale — only available uses the pill. */
.dest-painting__status.pill {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(102, 0, 0, 0.4);
  background: rgba(102, 0, 0, 0.04);
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  margin: 0 0 1rem;
}

/* ─── PURCHASE BLOCK ───
   Lives between the status pill and the inquire CTA on each available
   painting's footer. Modeled after the Eons block on arttravel.gallery. */
.purchase-block {
  margin: 0.8rem auto 1.4rem;
  max-width: 480px;
  text-align: center;
  padding: 1.6rem 1.6rem 1.3rem;
  background: rgba(102, 0, 0, 0.025);
  border: 1px solid rgba(102, 0, 0, 0.18);
}
.purchase-block__price {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.1rem;
  color: var(--ink);
  margin: 0 0 0.3rem;
  line-height: 1.1;
}
.purchase-block__tax {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-mid);
  margin: 0 0 1.2rem;
}
.purchase-block__btn {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  background: var(--red);
  color: #FFFFFF;
  text-decoration: none;
  border: 1px solid var(--red);
  transition: background 0.25s, transform 0.25s;
}
.purchase-block__btn:hover {
  background: var(--red-hover, #800000);
  transform: translateY(-1px);
}

/* Dual-option layout (e.g. Unframed / Framed). Each option gets its own
   label, price, and Buy button, separated by a hair-line divider. */
.purchase-block__options {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin: 0 0 1.2rem;
}
.purchase-block__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(102, 0, 0, 0.12);
}
.purchase-block__option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.purchase-block__option-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}
.purchase-block__option-price {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--ink);
  margin: 0 0 0.3rem;
  line-height: 1.1;
}
.purchase-block__trust {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
  text-transform: uppercase;
  margin: 1.2rem 0 0;
}
.purchase-block__fine {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}
.purchase-block__fine a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(102, 0, 0, 0.3);
  transition: border-color 0.2s;
}
.purchase-block__fine a:hover { border-bottom-color: var(--red); }

/* ─── INQUIRE CTA — subtle italic link below the purchase block ─── */
.dest-painting__cta {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-mid);
  text-decoration: none;
  border-bottom: 1px solid rgba(102, 0, 0, 0.3);
  padding: 0.2rem 0 0.3rem;
  margin-top: 0.4rem;
  transition: color 0.2s, border-color 0.2s;
}
.dest-painting__cta:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ─── LIGHTBOX ─── */
.art-frame img,
.art-frame--lead img {
  cursor: zoom-in;
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, 0.94);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 2rem;
  animation: lightbox-fade 0.25s ease;
}
@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox-close {
  position: absolute;
  top: 1.2rem; right: 1.8rem;
  color: var(--linen);
  font-size: 2.4rem;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  transition: color 0.2s;
}
.lightbox-close:hover { color: var(--gold); }

/* ─── COMMISSION CTA — for sold paintings ─── */
.dest-painting__commission {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.7;
  margin: 0 auto 1.6rem;
  max-width: 580px;
}

/* ─── IMAGE PROTECTION ─── */
.painting-frame img,
.art-frame img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}