/* Amanda King Art Studio — light gallery theme with purple accents */

@font-face {
  font-family: "Geraldine";
  src: url("../fonts/geraldine-personaluse-italic.woff2") format("woff2"),
       url("../fonts/geraldine-personaluse-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #f6f1e6;
  --surface: #fffdf8;
  --lavender: #f2ebfa;
  --ink: #2b1b3d;
  --muted: #6f5f83;
  --purple: #7c3aed;
  --purple-deep: #5b21b6;
  --purple-soft: #ece1ff;
  --line: #e6dac4;
  --shadow: 0 18px 50px rgba(91, 33, 182, 0.14);
  --radius: 20px;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

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

a { color: var(--purple-deep); }

/* Homepage: lavender watercolor backdrop (paper texture overlay stays on top) */
body.home {
  background-color: #ddd0ec;
  background-image: url("../images/home-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 700px) {
  /* Mobile backdrops: fixed full-viewport layer (reliable on phones),
     anchored to the bottom so the flowers show instead of the sky. */
  body.home, body.gallery-page, body.contact-page { background-image: none; }
  body.home::before, body.gallery-page::before, body.contact-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    pointer-events: none;
    /* override the global ambient-glow blur/animation on this layer,
       and dim the backdrop ~20% */
    filter: brightness(0.8);
    animation: none;
  }
  body.home::before { z-index: -2; background-image: url("../images/home-bg.jpg"); }
  body.gallery-page::before { z-index: -2; background-image: url("../images/gallery-bg.jpg"); }
  body.contact-page::before {
    z-index: -1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../images/contact-bg.jpg");
  }
}

/* Gallery page: wildflower watercolor backdrop (paper texture overlay stays on top) */
body.gallery-page {
  background-color: #d8cfc0;
  background-image: url("../images/gallery-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* (mobile backdrop sizing handled in the combined 700px block above) */

/* Contact page: wildflower watercolor backdrop (paper texture overlay stays on top) */
body.contact-page {
  background-color: #d8cfc0;
  background-image: url("../images/contact-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* (mobile backdrop sizing handled in the combined 700px block above) */

/* Contact page: text white with drop shadow, except inside the cards */
body.contact-page .page-hero .eyebrow,
body.contact-page .page-hero h1,
body.contact-page .page-hero .lede {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
}
/* dim the floral backdrop ~20% for readability, under the texture overlay */
body.contact-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
  pointer-events: none;
}
/* card text stays solid black, no shadow; buttons untouched */
body.contact-page .contact-card h3,
body.contact-page .contact-card p {
  color: #111;
  text-shadow: none;
}

/* Real paper/canvas texture — sits behind everything, on the bare page only */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(122, 90, 48, 0.10) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(122, 90, 48, 0.10) 0 1px, transparent 1px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='paper' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='3' seed='7' stitchTiles='stitch' result='mottle'/%3E%3CfeColorMatrix in='mottle' type='saturate' values='0' result='mottleGray'/%3E%3CfeComponentTransfer in='mottleGray' result='mottleSoft'%3E%3CfeFuncR type='linear' slope='0.55' intercept='0.24'/%3E%3CfeFuncG type='linear' slope='0.55' intercept='0.24'/%3E%3CfeFuncB type='linear' slope='0.55' intercept='0.24'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch' result='fine'/%3E%3CfeColorMatrix in='fine' type='saturate' values='0' result='fineGray'/%3E%3CfeComponentTransfer in='fineGray' result='fineHigh'%3E%3CfeFuncR type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.7' intercept='-0.35'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='fineHigh' in2='mottleSoft' operator='arithmetic' k1='0' k2='0.62' k3='0.38' k4='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23paper)'/%3E%3C/svg%3E");
}

/* Slow-drifting ambient blurs behind everything — very subtle */
body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 24% 42%, rgba(124, 58, 237, 0.11), transparent 70%),
    radial-gradient(46% 42% at 85% 88%, rgba(167, 139, 250, 0.15), transparent 70%);
  filter: blur(60px);
  animation: ambient-drift 26s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

.wrap {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 241, 230, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow:
    0 14px 26px -14px rgba(30, 20, 12, 0.25),
    0 5px 12px -8px rgba(30, 20, 12, 0.15);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.wordmark {
  font-family: "Geraldine", "Pinyon Script", cursive;
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  padding-top: 4px;
}

.wordmark span { color: var(--purple); }

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--purple-deep); }

.nav-links a[aria-current="page"] { color: var(--purple-deep); }

.nav-cta {
  background: var(--purple);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600 !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.nav-cta:hover {
  background: var(--purple-deep);
  transform: translateY(-1px);
}

.menu-button {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Header: white bar, solid black text, no shadow ---------- */
.wordmark { color: var(--ink); text-shadow: none; }
.wordmark span { color: var(--ink); }
.nav-links a { color: var(--ink); text-shadow: none; }
.nav-links a:hover { color: var(--purple-deep); }
.nav-links a[aria-current="page"] { color: var(--purple-deep); }
.menu-button { color: var(--ink); text-shadow: none; }

@media (max-width: 640px) {
  .nav-links { background: var(--surface); }
  .nav-links a { color: var(--muted); }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] { color: var(--purple-deep); }
  .nav-links .nav-cta { background: var(--purple); color: #fff !important; }
}

/* ---------- Hero slideshow ---------- */

.hero { padding: 36px 0 8px; }

.slideshow {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 26px 44px -16px rgba(30, 20, 12, 0.40),
    0 10px 20px -8px rgba(30, 20, 12, 0.28);
  aspect-ratio: 21 / 9;
  background: var(--lavender);
}

.slideshow-track {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: 65% 50%;
  transition: transform 4.9s linear;
}
/* Slow cinematic zoom on the active slide: 7% over the full time the photo
   is up (3.5s hold + 1.4s dissolve). A transition (not an animation) so the
   zoom eases back smoothly instead of snapping when the slide changes.
   Biased toward the art side so the text zone stays calm. The bottom fade
   lives on .slideshow (the container), so it is untouched. */
.slide.active img {
  transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
  .slide img { transition: none; }
}

.slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 36px 28px;
  background: linear-gradient(to top, rgba(43, 27, 61, 0.72), rgba(43, 27, 61, 0));
  color: #fff;
}

.slide-caption h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
}

.slide-caption p {
  margin: 0;
  font-size: 15px;
  opacity: 0.92;
}

/* Slideshow arrows and dots removed at Joshua's direction (both slideshows, all screens).
   Swipe and keyboard navigation still work. */
.slide-nav, .slide-dots { display: none !important; }

.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--purple-deep);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.slide-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }

.slide-prev { left: 18px; }
.slide-next { right: 18px; }

.slide-dots {
  position: absolute;
  bottom: 18px;
  right: 28px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.slide-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.slide-dots button[aria-current="true"] {
  background: #fff;
  transform: scale(1.25);
}

/* About page: Amanda photo slideshow — same Ken Burns + crossfade preset as the hero.
   Doubled class for specificity so mobile slideshow rules can't override the 4/5 shape. */
.slideshow.about-slideshow {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 22px 40px -14px rgba(30, 20, 12, 0.38),
    0 8px 16px -8px rgba(30, 20, 12, 0.28);
}
.slideshow.about-slideshow .slideshow-track { position: absolute; inset: 0; }
.slideshow.about-slideshow .slide img { object-position: center; }
/* red dress portrait: keep her face in frame */
.slideshow.about-slideshow .slide img[src*="amanda-red"] { object-position: center 18%; }
/* blue dress portrait: keep her face in frame */
.slideshow.about-slideshow .slide img[src*="amanda-blue"] { object-position: center 12%; }

/* Inquiry forms (contact page) */
.card-rule { border: none; border-top: 2px solid #111; margin: 10px 0 2px; }
.inquiry-form { display: grid; gap: 14px; margin-top: 18px; text-align: left; }
.inquiry-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: #111; }
.inquiry-form .optional { font-weight: 400; color: var(--muted); }
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  padding: 10px 12px;
  border: 1.5px solid #d8cfc2;
  border-radius: 10px;
  background: #fff;
  color: #111;
  width: 100%;
}
.inquiry-form textarea { resize: vertical; min-height: 96px; }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
  border-color: var(--purple);
}
.inquiry-form .button { justify-self: start; }
.piece-preview { display: flex; align-items: center; gap: 12px; }
.piece-preview[hidden] { display: none; }
.piece-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.piece-preview p { font-weight: 600; color: #111; margin: 0; font-size: 15px; }

/* ---------- Sections ---------- */

.section { padding: 72px 0; }

.section-head {
  max-width: 640px;
  margin: 0 0 40px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 0 0 12px;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }

.section-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin: 0 0 12px;
  font-weight: 600;
}

.section-head p { color: var(--muted); margin: 0; font-size: 17px; }

.lede {
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--muted);
  max-width: 620px;
}

/* ---------- Featured strip ---------- */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.art-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 22px 40px -14px rgba(30, 20, 12, 0.38),
    0 8px 16px -8px rgba(30, 20, 12, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.art-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 28px 48px -14px rgba(30, 20, 12, 0.44),
    0 10px 20px -8px rgba(30, 20, 12, 0.32);
}

.art-card .art-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lavender);
}

.art-card .art-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.art-card:hover .art-image img { transform: scale(1.04); }

.art-card .art-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.art-card h3 { margin: 0; font-size: 20px; font-weight: 600; }

.art-meta { color: var(--muted); font-size: 14px; margin: 0; }

.art-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--purple-deep);
  margin: 6px 0 12px;
}

.art-card .button { margin-top: auto; align-self: flex-start; }

/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  animation: button-breathe 7s ease-in-out infinite alternate;
}

@keyframes button-breathe {
  from { box-shadow: 0 6px 20px rgba(124, 58, 237, 0.22); }
  to { box-shadow: 0 6px 34px rgba(124, 58, 237, 0.42); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .button { animation: none; }
}

.button:hover { background: var(--purple-deep); transform: translateY(-1px); }

.button-outline {
  background: transparent;
  color: var(--purple-deep);
  border: 1.5px solid var(--purple);
}

.button-outline:hover { background: var(--purple-soft); }

.center { text-align: center; margin-top: 40px; }

/* ---------- Split / about teaser ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--lavender);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(32px, 5vw, 64px);
  box-shadow:
    0 26px 44px -16px rgba(30, 20, 12, 0.36),
    0 10px 20px -8px rgba(30, 20, 12, 0.24);
}

.split img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* artist portrait: show the whole photo, no cropping */
.split img.artist-photo {
  aspect-ratio: auto;
  object-fit: contain;
}

.split h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 14px; }
.split p { color: var(--muted); margin: 0 0 18px; }

/* ---------- Gallery page ---------- */

.page-hero { padding: 56px 0 8px; }

.page-hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  margin: 0 0 12px;
  font-weight: 600;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 40px 0 80px;
}

.note-bar {
  background: var(--lavender);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 24px;
  color: var(--muted);
  font-size: 15px;
  margin-top: 8px;
}

.note-bar strong { color: var(--purple-deep); }

/* ---------- About / contact ---------- */

.prose { max-width: 700px; }
.prose p { color: #111; font-size: 19px; }
.prose p:first-of-type { color: #111; font-size: 19px; }
/* letter-style signature under the bio */
.signature { display: flex; justify-content: flex-end; margin-top: 16px; }
.signature img { width: 320px; max-width: 78%; height: auto; aspect-ratio: auto; object-fit: contain; }

.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}

.contact-card h3 { margin: 0 0 10px; font-size: 22px; }
.contact-card p { color: var(--muted); margin: 0 0 18px; font-size: 15px; }

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.follow-links { display: grid; gap: 12px; }
.follow-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.follow-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(43, 27, 61, 0.16); }
.follow-btn img { width: 32px; height: 32px; flex-shrink: 0; }
.follow-btn span { display: flex; flex-direction: column; line-height: 1.25; font-size: 14px; color: var(--muted); }
.follow-btn strong { font-size: 16px; color: var(--ink); }

.follow-mobile-wrap { display: none; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .follow-desktop { display: none; }
  .follow-mobile-wrap { display: block; margin-top: 24px; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  margin-top: 40px;
  background: rgba(0, 0, 0, 0.75);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-inner p { color: #fff; font-size: 14px; margin: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); }

.footer-links { display: flex; gap: 20px; }
.footer-links a { color: #fff; text-decoration: none; font-size: 14px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); }
.footer-links a:hover { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .featured-grid, .gallery-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 4vw 20px;
    border-bottom: 1px solid var(--line);
    gap: 4px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 4px; }
  .menu-button { display: block; }
  .site-header { position: sticky; }
  .nav { position: relative; }
  .featured-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .art-card .art-body { padding: 10px 8px 12px; gap: 3px; }
  .art-card h3 { font-size: 13px; }
  .art-meta { font-size: 10px; }
  .art-price { font-size: 14px; margin: 2px 0 6px; }
  .art-card .button { font-size: 10px; padding: 7px 6px; align-self: stretch; text-align: center; }
  /* gallery cards get a bit more room at 2 across */
  .gallery-grid .art-card .art-body { padding: 12px 12px 14px; gap: 4px; }
  .gallery-grid .art-card h3 { font-size: 15px; }
  .gallery-grid .art-meta { font-size: 11px; }
  .gallery-grid .art-card .art-price { font-size: 16px; margin: 4px 0 8px; }
  .gallery-grid .art-card .button { font-size: 12px; padding: 9px 8px; }
  .slideshow { aspect-ratio: 16 / 10; }
  .slide-caption { padding: 40px 20px 20px; }
  .slide-dots { right: 16px; bottom: 14px; }
}


/* Gallery filters */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 6px; }

/* Gallery search */
.search-bar { margin: 26px 0 0; max-width: 520px; }
.search-bar input {
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(43, 27, 61, 0.14);
}
.search-bar input::placeholder { color: var(--muted); }
.search-bar input:focus { outline: 2px solid var(--purple); outline-offset: 2px; }
@media (max-width: 640px) {
  .search-bar input { font-size: 12.5px; padding: 12px 12px; }
}
.no-results {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
  font-size: 17px;
  margin: 18px 0 0;
}

/* Gallery pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 36px 0 8px;
}
.page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(43, 27, 61, 0.12);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.page-btn:hover:not(:disabled):not(.active) { border-color: var(--purple); color: var(--purple-deep); }
.page-btn.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-ellipsis {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
  padding: 0 4px;
  font-weight: 700;
}
.filter-btn {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.filter-btn:hover { border-color: var(--purple); color: var(--purple-deep); }
.filter-btn.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.filter-count { color: var(--muted); font-size: 14px; margin: 0 0 18px; }

/* ---------- Full-screen hero slideshow (homepage) ---------- */
.hero-full {
  position: relative;
  height: calc(100svh - 70px);
  min-height: 560px;
  overflow: hidden;
}
/* wrapper keeps the welcome text positioned over the hero on desktop
   while letting it sit below the hero section on mobile */
.hero-wrap { position: relative; }
.hero-full .slideshow {
  position: absolute;
  inset: 0;
  border-radius: 0;
  aspect-ratio: auto;
  box-shadow: none;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 110px), transparent 100%);
}
.hero-full .slide-caption { display: none; }
.hero-text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44%;
  padding: 0 32px;
  box-sizing: border-box;
  z-index: 2;
}
.hero-welcome { text-align: center; }
.welcome-title {
  font-family: "Geraldine", "Pinyon Script", cursive;
  font-weight: 400;
  font-size: clamp(56px, 6.4vw, 100px);
  line-height: 1.12;
  color: #fff;
  text-shadow: none;
  margin: 0 0 20px;
}
.welcome-sub {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.45;
  color: #fff;
  text-shadow: none;
  margin: 0;
}
.hero-full .slide-dots { top: 24px; bottom: auto; right: 28px; }

@media (max-width: 640px) {
  /* Full-bleed square hero: artwork fills the frame (black cropped off via
     right-anchored cover), welcome text in a dark card right below it.
     Slideshow zoom + crossfade unchanged. */
  .hero-full { height: auto; min-height: 0; }
  .hero-full .slideshow {
    position: relative;
    inset: auto;
    aspect-ratio: 1 / 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 72px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 72px), transparent 100%);
  }
  .hero-full .slide img { object-position: right center; }
  /* Grey: kill the dark left edge — enlarge a touch (via `scale`, so the
     Ken Burns transform is untouched) and shift the frame right */
  .hero-full .slide img[src*="grey-wolf"] {
    object-position: 85% center;
    scale: 1.15;
  }
  /* no arrows or dots on mobile */
  .hero-full .slide-nav, .hero-full .slide-dots { display: none; }
  /* no petals over the hero on mobile */
  .hero-full canvas.hero-petals { display: none; }
  /* Dark layer behind the mobile hero: solid black from the top of the
     hero, showing through the slideshow's faded bottom and behind the
     welcome text, feathering out below it. Stays in place as you scroll. */
  .hero-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -120px;
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8) 0,
      rgba(0, 0, 0, 0) 100%);
    z-index: -1;
    pointer-events: none;
  }
  .hero-text {
    position: relative;
    transform: none;
    width: auto;
    padding: 0;
    margin: 16px 20px 0;
  }
  .hero-welcome {
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .welcome-title { font-size: 9vw; line-height: 1.2; margin: 0 0 8px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9); }
  .welcome-sub { font-size: 5.5vw; line-height: 1.45; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.85); }
  /* pull Featured up: no empty gap under the welcome text */
  .hero-wrap + .section { padding-top: 40px; }
  .hero-full .slide-dots { top: 10px; right: 10px; }
  /* prev arrow would sit on the image edge: park it top-left instead */
  .hero-full .slide-prev { top: 10px; left: 10px; transform: none; }
  .hero-full .slide-next { right: 10px; }
  .wordmark { font-size: 24px; }
}

/* Page transitions: the browser crossfades directly from one page into the
   next — it snapshots the old page and fades the new one in over it, so
   there is no white flash, no black flash, and background and content fade
   as one. (The old JS fade-out/fade-in approach is stashed in
   js/page-transition.stashed.js; this replaces it.) */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: ease;
}
::view-transition-old(root) { animation-name: page-fade-out; }
::view-transition-new(root) { animation-name: page-fade-in; }
@keyframes page-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Hero bottom frame removed 2026-10-17 (was a black strip, then a white vine).
   Markup stashed at hero-frame.stashed.html; keeping this note in case he wants it back. */

/* ---------- Hero shade: dark behind the slideshow, fades out on scroll ---------- */
.hero-shade {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0.82;
  z-index: -1;
  pointer-events: none;
}

/* Falling petals: behind the paper texture, in front of the page background */
canvas.petals {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Purple petal field confined to the hero's black zone: above the photos,
   below the welcome text and controls. */
canvas.hero-petals {
  position: absolute;
  left: 0;
  top: 0;
  width: 44%;
  height: 100%;
  z-index: 1;
}
.hero-full .slide-nav { z-index: 2; }
@media (max-width: 640px) {
  canvas.hero-petals { width: 64%; }
}

/* About page: ink-bleed video background. When the video ends it swaps
   to the last frame as a still image, identical size and position. */
body.about-page { background: #f2efe8; }
.about-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}
.about-bg-still { display: none; }
.about-bg-still.show { display: block; }
#about-bg-video.hide { display: none; }

/* Keep the about-page CTA readable over the video's dark ink band */
body.about-page .about-cta .eyebrow,
body.about-page .about-cta h2,
body.about-page .about-cta .lede {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* Homepage CTA inside a white bubble for readability over the background */
.cta-bubble .bubble {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  padding: 52px 44px;
  box-shadow: 0 18px 55px rgba(43, 27, 61, 0.22);
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .cta-bubble .bubble { padding: 40px 28px; border-radius: 22px; }
}

/* Homepage: text sitting directly on the background photo goes white
   with a black drop shadow for readability */
body.home .on-photo .eyebrow,
body.home .on-photo .lede {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}
body.home .on-photo h2 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

/* Hero headline: solid black, no shadow, over the fading image */
body.home .hero-full .eyebrow,
body.home .hero-full .lede,
body.home .hero-full h2 {
  color: var(--ink);
  text-shadow: none;
}
.hero-full .slide-dots button { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* ---------- Gallery page: readability on the wildflower backdrop ---------- */
body.gallery-page { --gold: #e6ca3e; --gold-deep: #8a6d1f; }

/* gallery eyebrow: bold white with black drop shadow over the backdrop */
body.gallery-page .eyebrow { color: #fff; font-weight: 700; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); }
body.gallery-page .art-price,
body.gallery-page .note-bar strong { color: #111; text-shadow: none; }
/* dark shadow behind filter text sitting on light surfaces */
body.gallery-page .filter-btn:hover {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* greyish text sitting on the backdrop -> white with black drop shadow */
body.gallery-page .page-hero .lede,
body.gallery-page .section-head p,
body.gallery-page .filter-count {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* gallery headlines: bright white with drop shadow over the artwork backdrop */
body.gallery-page .page-hero h1,
body.gallery-page .lede {
  color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.95);
}

/* commissions CTA: all text white with black drop shadow over the backdrop */
.commissions-cta .eyebrow,
.commissions-cta h2,
.commissions-cta .lede {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* strong black drop shadow behind every artwork card */
body.gallery-page .art-card {
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, 0.75),
    0 12px 28px -8px rgba(0, 0, 0, 0.5);
}
body.gallery-page .art-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 38px 70px -12px rgba(0, 0, 0, 0.66),
    0 14px 32px -8px rgba(0, 0, 0, 0.55);
}
body.gallery-page .filter-btn { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(20, 12, 28, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox figure { margin: 0; max-width: min(92vw, 1100px); text-align: center; }
.lightbox img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75);
  margin: 0 auto;
}
.lightbox figcaption { color: #fff; margin-top: 14px; font-size: 16px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); }
.lightbox figcaption strong { font-family: var(--font-display); font-size: 22px; font-weight: 600; display: block; margin-bottom: 4px; }
.lightbox-close {
  position: absolute; top: 14px; right: 20px;
  background: none; border: none; color: #fff; font-size: 44px; cursor: pointer;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95); line-height: 1; padding: 8px;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff; font-size: 26px; width: 54px; height: 54px; border-radius: 50%;
  cursor: pointer; transition: background 0.2s ease; line-height: 1;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.gallery-grid .art-image { cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }

@media (max-width: 700px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 20px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
  body.gallery-page .button { animation: none; }
}