@charset "utf-8";
/* ==========================================================================
   Vernon Fowlkes - Watercolorist. Poet.   (2026 redesign)
   Main style sheet. Every page links to this one file.
   After changing it, change the ?v= date where main.dwt links it.
   ========================================================================== */

/* ---------- 1. Colors & fonts (change these to restyle the whole site) ---------- */
:root {
  --paper:        #f7f3ec;   /* page background, like watercolor paper */
  --paper-deep:   #eee7da;   /* alternate sections */
  --white:        #fffdf9;   /* cards and frames */
  --ink:          #1f2428;   /* main text */
  --ink-soft:     #575d62;   /* secondary text */
  --line:         #ddd4c4;   /* thin rules and borders */
  --teal:         #1f4e5a;   /* buttons and links (from the book cover) */
  --teal-dark:    #153941;
  --ochre:        #b9862c;   /* small accents (from the paintings) */
  --ochre-light:  #e2b866;   /* accents on dark backgrounds */
  --night:        #1c2226;   /* dark bands and footer */
  --font-body:    "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --max-width:    1180px;
  --radius:       3px;
  --shadow-art:   0 1px 2px rgba(0,0,0,.08), 0 10px 30px -8px rgba(40,30,15,.28);
}

/* ---------- 2. Basics ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1.1em; }

/* Small label above a heading, e.g. "AVAILABLE FROM THE STUDIO" */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 0.9rem;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 40em; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 2000; background: #fff; color: #000; padding: .5rem 1rem; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 780px; }
.section { padding: 5.5rem 0; }
.section-alt { background: var(--paper-deep); }
.section-tight { padding-top: 1rem; }
.section-head { max-width: 680px; margin-bottom: 2.8rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.center { text-align: center; }

/* ---------- 3. Buttons ---------- */
.button {
  display: inline-block;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.button:hover, .button:focus-visible { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; text-decoration: none; }
.button-ghost { background: transparent; color: var(--teal); }
.button-ghost:hover, .button-ghost:focus-visible { background: var(--teal); color: #fff; }
.button-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button-light:hover, .button-light:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
.button-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.button-outline-light:hover, .button-outline-light:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
.button-small { font-size: 0.88rem; padding: 0.45rem 1rem; }
.button[disabled] { opacity: .6; cursor: wait; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
/* "Available Paintings... from the Studio / from Sophiella Gallery" choice (home, About, Exhibition History) */
.available-cta { margin-top: 2rem; }
.available-cta-label { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--ink-soft); margin: 0 0 0.7rem; }
.available-cta .button-row { margin-top: 0; }
.available-cta.center .button-row { justify-content: center; }
.more-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 1.4rem 0 0; }
.text-link { font-weight: 600; text-decoration: none; }
.text-link::after { content: " \2192"; }
.text-link:hover { text-decoration: underline; }

/* ---------- 4. Header & menu ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 236, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { text-decoration: none; color: var(--ink); line-height: 1.1; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; }
.brand-tag { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.2rem 1.6rem; flex-wrap: wrap; }
.main-nav a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.98rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { border-bottom-color: var(--ochre); }
.main-nav .nav-cta { border: 1px solid var(--teal); border-radius: var(--radius); padding: 0.35rem 1rem; color: var(--teal); font-weight: 600; }
.main-nav .nav-cta:hover { background: var(--teal); color: #fff; }

/* Mark the current page. Each page sets a class on <body> through the
   template's pageClass parameter (Modify > Template Properties). */
.page-other   .nav-other,
.page-gallery .nav-gallery,
.page-poems   .nav-poems,
.page-book    .nav-book,
.page-about   .nav-about { border-bottom-color: var(--ochre); font-weight: 600; }
.page-contact .nav-contact { background: var(--teal); color: #fff; }

/* The Menu button appears only on phones (and only when JavaScript runs). */
.nav-toggle { display: none; }

/* "Cart (2)" at the right of the header, shown by js/cart.js once the cart has paintings */
.main-nav { margin-left: auto; }
.cart-link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); font-size: 0.98rem; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.cart-link:hover { color: var(--ink); border-bottom-color: var(--ochre); text-decoration: none; }
.cart-link[hidden] { display: none; }
.cart-count { display: inline-block; min-width: 1.55em; padding: 0 0.4em; border-radius: 1em; background: var(--teal); color: #fff; font-size: 0.78rem; line-height: 1.6; text-align: center; }
.page-cart .cart-link { border-bottom-color: var(--ochre); }

@media (max-width: 960px) {
  .header-inner { gap: 1.1rem; }
  .main-nav ul { gap: 0.2rem 1.1rem; }
  .main-nav a, .cart-link { font-size: 0.92rem; }
}
@media (max-width: 920px) {
  .main-nav ul { gap: 0.2rem 0.85rem; }   /* room for "Cart" next to the menu */
}

@media (max-width: 860px) {
  .brand-name { font-size: 1.45rem; }
  .main-nav { margin-left: 0; }
  .cart-link { order: 1; margin-left: auto; }   /* just left of the Menu button */
  .nav-toggle { order: 2; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.45rem 0.8rem; font: 600 0.9rem var(--font-body); color: var(--ink); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; }
  .nav-toggle-bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  .js .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px -12px rgba(0,0,0,.25);
  }
  .js .main-nav.is-open { display: block; }
  .js .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.5rem 1.2rem; }
  .js .main-nav li { border-bottom: 1px solid var(--line); }
  .js .main-nav li:last-child { border-bottom: 0; padding-top: 0.9rem; }
  .js .main-nav a { display: block; font-size: 1.1rem; padding: 0.8rem 0; border-bottom: 0; }
  .js .main-nav .nav-cta { text-align: center; padding: 0.7rem 1rem; }
  /* Without JavaScript the menu simply wraps under the name. */
  html:not(.js) .header-inner { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* ---------- 5. Home page ---------- */
.home-hero { padding: 4.5rem 0 5rem; overflow: hidden; }
.home-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 4rem;
  align-items: center;
}
.home-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.3rem); }
.home-hero h1 em { font-style: italic; font-weight: 500; color: var(--teal); }
.hero-art { margin: 0; }
/* The top painting changes every hour: any shape fits, tall ones are limited in height */
.hero-art a { display: block; }
.hero-art img { width: auto; max-width: 100%; max-height: 72vh; margin-left: auto; box-shadow: var(--shadow-art); border: 10px solid var(--white); }
.hero-art figcaption { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-soft); text-align: right; font-style: italic; }
.hero-art figcaption a { color: inherit; }

.credentials {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.3rem 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.credentials p { margin: 0; }
.credentials strong { color: var(--ink); font-weight: 600; }

/* Two ways to collect */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.path-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.path-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(40,30,15,.45); }
/* The whole painting, centered on a "wall", whatever its shape (the pictures change every hour) */
.path-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--paper-deep); padding: 1rem; }
.path-body { padding: 1.8rem 2rem 2rem; display: flex; flex-direction: column; flex: 1; }
.path-body h3 { font-size: 1.85rem; margin-bottom: 0.4rem; }
.path-body p { color: var(--ink-soft); }
.path-body .text-link { margin-top: auto; color: var(--teal); }

/* Painter & poet */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: center; }
.portrait img { width: 100%; max-width: 420px; filter: grayscale(1); box-shadow: var(--shadow-art); }
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.3;
  color: var(--teal);
  margin: 0 0 1.4rem;
  padding-left: 1.3rem;
  border-left: 3px solid var(--ochre);
}

/* Book feature (dark band) */
.book-band {
  position: relative;
  color: #eef1f0;
  background: radial-gradient(ellipse at 80% 40%, #2b5a66 0%, #183840 45%, var(--night) 100%);
}
.book-band .container { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 4rem; align-items: center; }
.book-band h2 { color: #fff; }
.book-band .eyebrow { color: var(--ochre-light); }
.book-band blockquote { margin: 0 0 1.8rem; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.35; font-style: italic; }
.book-band cite { display: block; margin-top: 0.8rem; font-family: var(--font-body); font-style: normal; font-size: 0.95rem; color: #b9c4c6; }
.book-band img { width: 100%; max-width: 320px; margin-left: auto; box-shadow: 0 20px 50px rgba(0,0,0,.55); }

/* ---------- 6. Painting grids ---------- */
/* "Selected work" on the home page: paintings at their own proportions */
.mosaic { columns: 3 280px; column-gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.mosaic li { break-inside: avoid; margin: 0 0 1.6rem; }
.mosaic figure { margin: 0; }
.mosaic figcaption { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; margin-top: 0.5rem; color: var(--ink-soft); }
.mosaic .art-buy[hidden] { display: none; }   /* button used only in the large view (js/lightbox.js) */
.mosaic figcaption .source { display: block; font-family: var(--font-body); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); margin-top: 0.1rem; }

/* Shared look for a clickable painting (opens the large view) */
.art-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: var(--white);
  cursor: zoom-in; box-shadow: var(--shadow-art); transition: transform .25s;
}
.art-zoom img { width: 100%; transition: opacity .2s; }
.art-zoom:hover { transform: translateY(-2px); }
.art-zoom:hover img { opacity: .92; }

/* The two live gallery pages (Square and Sophiella) */
.page-intro { padding: 4.5rem 0 2.5rem; }
.page-intro h1 { margin-bottom: 0.35em; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ochre);
  padding: 1.4rem 1.6rem;
  font-size: 0.98rem;
}
.info-card h2 { font-size: 1.45rem; margin-bottom: 0.4rem; }
.info-card p:last-child, .info-card ol:last-child { margin-bottom: 0; }
.info-card ol { padding-left: 1.2rem; margin: 0; }
.info-card li { margin-bottom: 0.35rem; }

.gallery-section { padding: 1rem 0 5rem; }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem 2.2rem;
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
}
.gallery figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
/* Each painting sits centered in a square "wall" of the same size, whatever its shape */
.gallery .art-zoom, .gallery figure > a { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--paper-deep); box-shadow: none; }
.gallery .art-zoom img, .gallery figure > a img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: calc(100% - 2.8rem); max-height: calc(100% - 2.8rem);
  box-shadow: var(--shadow-art);
}
.gallery figure > a:hover img { opacity: .92; }
.gallery figcaption { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; padding-top: 1rem; }
.art-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.art-desc { font-size: 0.92rem; color: var(--ink-soft); }
.art-buy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 0.8rem; }
.art-price { font-weight: 600; font-size: 1.05rem; }
.on-hold { font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); }
.sold-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8d3b2f; }
.sold-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #b5473a; }
.shop-heading { margin: 2rem 0 0.4rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.shop-note { color: var(--ink-soft); margin-bottom: 2rem; }
.gallery.sold-work { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 1.6rem; }
.gallery.sold-work .art-title { font-size: 1.2rem; }
.store-link { text-align: center; margin: 0 0 1rem; }

.sort-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 2rem; padding: 0.8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sort-bar[hidden] { display: none; }
.sort-count { color: var(--ink-soft); font-size: 0.95rem; }
.sort-bar label { font-size: 0.95rem; color: var(--ink-soft); }
.sort-bar select { font: inherit; font-size: 0.95rem; margin-left: 0.4rem; padding: 0.4rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.sort-bar { flex-wrap: wrap; }
.sort-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem 1.4rem; }
.sort-bar label[hidden] { display: none; }
/* Subject / Price filters (js/gallery-sort.js) */
.gallery li[hidden], .sold-section[hidden], .filter-empty[hidden] { display: none; }
.filter-empty { text-align: center; padding: 3rem 1rem; margin: 0 0 3rem; background: var(--paper-deep); color: var(--ink-soft); }
.link-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--teal); text-decoration: underline; cursor: pointer; }
.subject-list { color: var(--ink-soft); font-size: 0.98rem; }
.subject-list strong { color: var(--ink); font-weight: 600; }
/* Direct Checkout: cart.php (paintings, shipping or pickup) and thank-you.php */
.checkout-page { padding-bottom: 5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.button[data-in-cart] { background: transparent; color: var(--teal); }   /* "In cart" (js/cart.js) */
.button[data-in-cart]:hover { background: var(--teal); color: #fff; }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-top: 1.6rem; }
.cart-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cart-item { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 0.4rem 1.3rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.cart-thumb { width: 104px; height: 104px; object-fit: contain; background: var(--paper-deep); padding: 6px; }
.cart-title { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.cart-desc { display: block; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; margin-top: 0.2rem; }
.cart-side { text-align: right; }
.cart-side form { margin: 0; }
.cart-price { display: block; font-weight: 600; font-size: 1.05rem; }
.cart-remove { font-size: 0.9rem; font-weight: 400; color: var(--ink-soft); }
.cart-keep { margin: 1.6rem 0 0; }
.cart-summary { background: var(--white); border: 1px solid var(--line); padding: 1.6rem 1.6rem 1.4rem; position: sticky; top: 100px; }
.cart-summary h2 { font-size: 1.7rem; }
.cart-line { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
.cart-summary .button { width: 100%; }
/* Paying on the site: buyer's details and Square's card form (js/checkout.js) */
.cart-grid:has(.pay-form) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pay-form { position: static; }
.pay-fields[hidden], .pay-address[hidden], .pay-review[hidden], .pay-message[hidden], .pay-fallback[hidden], .receipt-link[hidden] { display: none; }
.pay-group { border: 0; padding: 0; margin: 1.4rem 0 0; min-width: 0; }
.pay-group legend { font-weight: 600; padding: 0; margin-bottom: 0.5rem; }
.pay-group label { display: block; font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0.7rem; }
.pay-group input, .pay-group select { display: block; width: 100%; margin-top: 0.25rem; font: inherit; font-size: 1rem; color: var(--ink); padding: 0.55rem 0.7rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.optional { font-size: 0.85rem; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; }
.card-container { min-height: 90px; }
.pay-review { margin: 1.2rem 0 0.4rem; }
.pay-review .cart-line { font-weight: 400; border-bottom: 0; padding-bottom: 0; margin-bottom: 0.3rem; }
.pay-review .pay-total { font-weight: 600; font-size: 1.15rem; border-top: 1px solid var(--line); padding-top: 0.5rem; margin-top: 0.5rem; }
.pay-message { background: #f6e3df; border-left: 3px solid #b5473a; padding: 0.7rem 0.9rem; margin: 0.8rem 0; font-size: 0.95rem; }
.pay-button { margin-top: 0.6rem; }
/* Apple Pay / Google Pay buttons (js/checkout.js shows the ones the device offers) */
.pay-wallets[hidden], .apple-pay-button[hidden], .google-pay-button[hidden] { display: none; }
.pay-or { text-align: center; color: var(--ink-soft); font-size: 0.88rem; margin: 0.9rem 0 0; }
.google-pay-button { height: 46px; margin-top: 0.5rem; }
/* The two steps: details, then Payment (js/checkout.js) */
.pay-step[hidden], .pay-continue[hidden] { display: none; }
.pay-methods { background: var(--paper); border-left: 3px solid var(--teal); padding: 0.6rem 0.8rem; margin: 1.4rem 0 0; font-size: 0.95rem; }
.pay-methods-list { font-weight: 600; }
.pay-continue { margin-top: 0.6rem; }
.pay-step { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.pay-step-heading { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.6rem; }
.pay-step .pay-review { margin-top: 0; }
.apple-pay-button { display: block; width: 100%; height: 46px; margin-top: 0.5rem; border: 0; padding: 0; cursor: pointer;
  -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; -apple-pay-button-style: black; }
.pay-test { background: #fbf3dc; padding: 0.6rem 0.8rem; }
.delivery-choice { border: 0; padding: 0; margin: 1.4rem 0 1.6rem; }
.delivery-choice legend { font-weight: 600; padding: 0; margin-bottom: 0.7rem; }
.delivery-option { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1rem; margin-bottom: 0.6rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.delivery-option:has(input:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.delivery-option input { margin: 0.35rem 0 0; accent-color: var(--teal); flex: none; }
.delivery-option strong { display: block; font-weight: 600; }
.delivery-option span span { display: block; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.45; }
.checkout-note { color: var(--ink-soft); font-size: 0.93rem; margin: 1.1rem 0 0; }
.checkout-problem { background: #f6e3df; border-left: 3px solid #b5473a; padding: 0.8rem 1rem; margin: 1rem 0 0; }

/* ---------- 7. Large view of a painting (js/lightbox.js) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 3.5rem 4.5rem 1.5rem;
  background: rgba(20, 22, 24, 0.96);
  overflow-y: auto;
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: auto; max-width: 1200px; text-align: center; color: #fff; }
.lightbox-figure img {
  display: block; margin: 0 auto; max-width: 100%; max-height: calc(100vh - 12rem);
  width: auto; height: auto; object-fit: contain; box-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.lightbox-caption { max-width: 680px; margin: 1.2rem auto 0; }
.lightbox-caption .art-title { display: block; font-size: 1.7rem; margin-bottom: 0.2rem; color: #fff; }
.lightbox-caption .art-desc { display: block; color: #c9cdd0; margin-bottom: 0.9rem; }
.lightbox-buy { display: inline-flex; align-items: center; gap: 1.2rem; }
.lightbox-buy .art-price { color: #fff; }
.lightbox-buy .sold-badge { color: #f0a49a; }
.lightbox-buy .button { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: fixed; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; line-height: 1;
  width: 2.8rem; height: 2.8rem; font-size: 1.6rem;
}
.lightbox-close { top: 0.9rem; right: 1rem; font-size: 1.9rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover,
.lightbox-close:focus-visible, .lightbox-prev:focus-visible, .lightbox-next:focus-visible { background: rgba(255,255,255,.25); }
.lightbox-count { position: fixed; top: 1.4rem; left: 1.2rem; color: #aab0b4; font-size: 0.9rem; }
html.lightbox-open { overflow: hidden; }

/* ---------- 8. About page ---------- */
.about-hero .container { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4.5rem; align-items: start; }
.about-hero .portrait { position: sticky; top: 110px; }
.about-text h2 { font-size: 2rem; margin-top: 2.6rem; }
.fact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--line); }
.fact-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
.fact-list span:first-child { font-size: 0.8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre); padding-top: 0.2rem; }
/* "Member of": each group's logo in the same size white tile, its name below */
.member-logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.fact-list .member-logos li { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0; border: 0; text-align: center; font-size: 0.85rem; line-height: 1.3; }
.member-logos img { width: 100%; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem; }

/* Exhibition History page (exhibitions.html) */
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.highlight { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--ochre); padding: 1.6rem 1.7rem; }
.highlight h2 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.5rem; }
.highlight p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.show-year { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; padding: 2.2rem 0 0.6rem; border-top: 1px solid var(--line); }
.show-year > h2 { font-size: 2.1rem; color: var(--ochre); }
.show { margin: 0 0 2rem; }
.show-date { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.2rem; }
.show h3 { font-size: 1.5rem; margin: 0 0 0.15rem; }
.show-venue { color: var(--ink-soft); margin: 0 0 0.5rem; }
.show-works { list-style: none; padding: 0; margin: 0; }
.show-works li { margin: 0 0 0.15rem; }
.show-works cite { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; color: var(--ink); }
.show-works span { color: var(--ink-soft); font-size: 0.92rem; }
.show-works span::before { content: "\00a0\2013\00a0"; }
.show-note { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.show-solo { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--ochre); padding: 1.1rem 1.3rem; }
.show-cta { padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* ---------- 9. Book page ---------- */
.book-hero .container { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4.5rem; align-items: start; }
.book-cover img { width: 100%; max-width: 420px; box-shadow: 0 24px 50px -16px rgba(0,0,0,.55); }
.book-meta { list-style: none; padding: 0; margin: 0 0 1.6rem; color: var(--ink-soft); font-size: 0.98rem; }
.buy-box {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 1.6rem 1.8rem;
  margin: 1.8rem 0;
}
.buy-box .price { font-family: var(--font-display); font-size: 2.3rem; font-weight: 600; line-height: 1; margin: 0 0 0.3rem; }
.buy-box .price-note { color: var(--ink-soft); font-size: 0.95rem; }
.buy-box form { display: inline-block; margin: 0.4rem 0.6rem 0 0; }
.praise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.praise blockquote {
  margin: 0; background: var(--white); border: 1px solid var(--line); padding: 2rem 2rem 1.7rem;
  position: relative;
}
.praise blockquote::before { content: "\201C"; position: absolute; top: 0.2rem; left: 1.1rem; font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--ochre); opacity: .55; }
.praise blockquote p { font-family: var(--font-display); font-size: 1.28rem; line-height: 1.45; margin-top: 1rem; }
.praise cite { display: block; font-style: normal; font-size: 0.92rem; color: var(--ink-soft); }
.praise cite strong { color: var(--ink); display: block; font-size: 1rem; }
.praise-cta { text-align: center; margin: 2.5rem 0 0; }

/* ---------- 10. Poems ---------- */
.journals { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; color: var(--ink-soft); line-height: 1.5; }
.poem-decade { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; padding: 2.2rem 0; border-top: 1px solid var(--line); }
.poem-decade h2 { font-size: 2.1rem; color: var(--ochre); }
.publications { list-style: none; padding: 0; margin: 0; }
.publications li { margin-bottom: 1.15rem; }
.publications .title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.publications a.title { color: var(--teal); text-decoration: none; }
.publications a.title:hover { text-decoration: underline; }
.publications .source { display: block; font-size: 0.95rem; color: var(--ink-soft); }
/* Small labels after linked titles, added automatically */
.publications a.title::after {
  display: inline-block; vertical-align: middle; margin-left: 0.6rem;
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 99px; padding: 0.05rem 0.55rem 0.1rem;
}
.publications a.title[href^="poem.php"]::after { content: "Read here"; }
.publications a.title[href^="http"]::after { content: "Read online \2197"; }
.publications a.title[href$=".html"]::after { content: "The book"; }

/* One poem (poem.php) */
.poem-back { margin: 0 0 1.4rem; }
.poem-back a { text-decoration: none; font-weight: 600; }
.poem-source { font-style: italic; color: var(--ink-soft); margin: -0.2rem 0 2.2rem; }
.pdf-pages { min-height: 200px; }
.pdf-page { background: #fff; box-shadow: var(--shadow-art); margin: 0 0 1.6rem; }
.pdf-page:last-child { margin-bottom: 0; }
.pdf-page canvas { display: block; width: 100%; height: auto; }
.pdf-message { padding: 2rem 0; color: var(--ink-soft); }
.poem-next { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* ---------- 11. Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 4rem; align-items: start; }
.contact-form {
  background: var(--white); border: 1px solid var(--line); padding: 2.2rem;
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.contact-form label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 1.2rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.8rem;
  font: 400 1rem var(--font-body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); background: #fff; }
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-form .checkbox { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; color: var(--ink-soft); }
.contact-form .checkbox input { margin-top: 0.35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--teal); flex: none; }
.contact-form .cf-turnstile { margin: 0 0 1.2rem; min-height: 65px; }
.form-status { margin: 1rem 0 0; font-weight: 600; }
.form-sent { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--teal); padding: 2.2rem; }
.contact-aside .info-card + .info-card { margin-top: 1.4rem; }

/* ---------- 12. Email list band & footer ---------- */
.signup-band { background: var(--teal); color: #e9f0f1; padding: 3.2rem 0; }
.signup-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.signup-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 0.3rem; }
.signup-band p { margin: 0; max-width: 40em; }
.signup-band .button { flex: none; }
.page-contact .signup-band { display: none; }

/* "Join the list" pop-up (js/signup.js) */
.signup-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 0; border: 0; background: transparent; color: var(--ink); }
.signup-dialog::backdrop { background: rgba(28,34,38,.65); }
.signup-dialog .contact-form, .signup-done { position: relative; }
.signup-dialog h2 { font-size: 2rem; margin: 0 0 0.4rem; padding-right: 2rem; }
.signup-intro { color: var(--ink-soft); margin: 0 0 1.4rem; }
.signup-done { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--teal); padding: 2.2rem; }
.signup-close {
  position: absolute; top: 0.5rem; right: 0.6rem; padding: 0.2rem 0.5rem;
  background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.signup-close:hover, .signup-close:focus-visible { color: var(--ink); }
.signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.site-footer { background: var(--night); color: #c3c9cc; padding: 4rem 0 2rem; font-size: 0.95rem; }
.site-footer a { color: #e9eef0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: #fff; margin-bottom: 0.4rem; }
.footer-heading { font-size: 0.78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre-light); margin-bottom: 0.8rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 0.35rem; }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.social-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.social-link svg { width: 22px; height: 22px; fill: currentColor; }
/* "Member of" logos in the footer: same size white tiles */
.footer-members { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin-bottom: 2rem; }
.footer-members .footer-heading { margin: 0; }
.footer-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.footer-logos img { display: block; width: 120px; height: 64px; object-fit: contain; background: #fff; border-radius: var(--radius); padding: 0.35rem 0.6rem; }
.copyright { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem 1.5rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 0.85rem; color: #8d969b; }

/* ---------- 13. Tablets & phones ---------- */
@media (max-width: 1000px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery.sold-work { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  body { font-size: 17px; }
  .section { padding: 4rem 0; }
  .home-hero { padding: 2.5rem 0 3.5rem; }
  .home-hero .container,
  .split, .book-band .container, .intro-grid,
  .about-hero .container, .book-hero .container, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .home-hero .hero-art { order: -1; }
  .hero-art img { max-height: 55vh; margin: 0 auto; }
  .hero-art figcaption { text-align: center; }
  .paths, .praise { grid-template-columns: 1fr; }
  .about-hero .portrait { position: static; }
  .portrait img { max-width: 300px; }
  .book-band img { margin: 0; max-width: 220px; }
  .book-cover img { max-width: 200px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .signup-inner { flex-direction: column; align-items: flex-start; }
  .poem-decade { grid-template-columns: 1fr; gap: 0.6rem; }
  .highlights { grid-template-columns: 1fr; gap: 1rem; }
  .show-year { grid-template-columns: 1fr; gap: 0.6rem; }
  .cart-grid, .cart-grid:has(.pay-form) { grid-template-columns: 1fr; gap: 2rem; }
  .cart-summary { position: static; }
  .lightbox { padding: 3.5rem 0.8rem 5rem; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 1rem; transform: none; }
  .lightbox-prev { left: calc(50% - 3.6rem); }
  .lightbox-next { right: calc(50% - 3.6rem); }
}

@media (max-width: 600px) {
  .container { padding: 0 1rem; }
  .header-inner { padding: 0.7rem 1rem; }
  .page-intro { padding: 2.8rem 0 1.5rem; }
  .gallery { grid-template-columns: 1fr; gap: 2.6rem; }
  .gallery .art-zoom, .gallery figure > a { aspect-ratio: 5 / 4; }
  .gallery.sold-work .art-zoom { aspect-ratio: 1 / 1; }
  .gallery.sold-work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
  .gallery.sold-work .art-zoom img { max-width: calc(100% - 1.4rem); max-height: calc(100% - 1.4rem); }
  .sort-bar { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .sort-controls { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .sort-controls label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .sort-controls select { flex: 0 0 64%; margin-left: 0; }
  .contact-form { padding: 1.4rem; }
  .contact-form .row { grid-template-columns: 1fr; gap: 0; }
  .fact-list li { grid-template-columns: 1fr; gap: 0.1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 0.6rem; }
  .footer-logos img { width: 100%; height: 56px; }
  .cart-item { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
  .cart-thumb { width: 76px; height: 76px; }
  .cart-side { grid-column: 2; display: flex; align-items: baseline; gap: 1.2rem; text-align: left; }
  .cart-summary { padding: 1.3rem 1.1rem; }
  .path-body { padding: 1.4rem 1.4rem 1.6rem; }
  .praise blockquote { padding: 1.6rem 1.4rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}