/* Tokens - "Daylight Gallery" palette, matching the tone already approved for
   wilhelminastocker.com's other build: warm white walls, near-black ink, one
   eucalyptus accent, brass for prices. */
:root {
  --wall: #faf5ec;
  --mount: #ffffff;
  --bay: #f6efe1;
  --tint: #f2e8d6;
  --warm-overlay: 251, 245, 232;
  --ink: #1f1e1b;
  --ink-soft: #43403b;
  --muted: #5d5751;
  --rule: #e6e0d5;
  --accent: #3e5c52;
  --accent-deep: #2e4740;
  --accent-wash: #eef2ef;
  --brass: #8b5e22;
  --danger: #9c3f2c;
  --display: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --radius: 2px;
  --radius-lg: 4px;
  --shadow: 0 1px 2px rgba(31, 30, 27, 0.06), 0 8px 24px rgba(31, 30, 27, 0.08);
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; color: var(--ink); }
p { margin: 0 0 1em; }
.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.section { padding: 4rem 0; }
.section--alt { background: var(--bay); }
.eyebrow {
  font-family: var(--body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0 0 0.6rem;
}

/* Buttons */
.btn {
  display: inline-block; padding: 0.7em 1.5em; border-radius: var(--radius);
  border: 1px solid var(--accent); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--accent-deep); }
.btn--outline { background: transparent; color: var(--accent-deep); }
.btn--outline:hover { background: var(--accent-wash); }
.btn--sm { padding: 0.5em 1.1em; font-size: 0.85rem; }
.btn--disabled { background: transparent; border-color: var(--rule); color: var(--muted); cursor: default; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Header */
.site-header {
  background: var(--wall); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20;
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand__logo { height: 80px; width: auto; }
@media (max-width: 560px) { .brand__logo { height: 64px; } }

/* Homepage: the banner already carries the logo, so the header starts with
   just the menu and the logo fades in once the banner has scrolled away.
   Gated on .js so the logo never stays hidden if the script doesn't run.
   visibility (not just opacity) keeps the hidden link out of the tab order. */
.js .site-header--home .brand {
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.js .site-header--home.is-scrolled .brand {
  opacity: 1; visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .js .site-header--home .brand { transition: none; }
}
.main-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.main-nav a { text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.main-nav a.is-active { color: var(--accent-deep); }
.nav-toggle {
  display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  position: relative;
}
.nav-toggle::before, .nav-toggle::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 2px; background: var(--ink);
}
.nav-toggle::before { top: 15px; }
.nav-toggle::after { bottom: 15px; }
@media (max-width: 720px) {
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--wall); border-bottom: 1px solid var(--rule); }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; }
  .main-nav li { border-top: 1px solid var(--rule); }
  .main-nav a { display: block; padding: 0.9rem 1.5rem; }
  .nav-toggle { display: block; }
}

/* Hero */
.hero {
  padding: 6rem 0 5rem;
  text-align: center;
  background-image:
    linear-gradient(180deg, rgba(var(--warm-overlay), 0.6) 0%, rgba(var(--warm-overlay), 0.5) 45%, rgba(var(--warm-overlay), 0.65) 100%),
    url("/assets/images/gallery-banner-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.9rem; }
.hero p { max-width: 42rem; margin-left: auto; margin-right: auto; }

/* Homepage banner - the artwork already carries the name and logo, so it is
   shown whole rather than as a background. Always full-bleed: the outer
   circles are cropped by the image edge by design, and only read as running
   off the page when that edge is the viewport's. */
.banner { border-bottom: 1px solid var(--rule); }
.banner img { width: 100%; height: auto; }
.intro { padding: 2.5rem 0 3rem; text-align: center; }
.intro p { max-width: 42rem; margin-left: auto; margin-right: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Welcome / prose block */
.prose-block { max-width: 42rem; margin: 0 auto; text-align: center; }
.prose-block p { color: var(--muted); }
.prose-block .signature { font-family: var(--display); font-size: 1.1rem; color: var(--ink); margin-top: 1.5rem; }

/* Image beside text (Commissions) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 2rem; } }
.flyer { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.price-callout { font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.price-callout strong { color: var(--brass); }

/* Classes */
.split--top { align-items: start; }
@media (min-width: 801px) { .split--flip .split__media { order: 2; } }
.photo { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.class-title { font-size: 1.7rem; margin-bottom: 1rem; }
.class-subtitle { font-size: 1.15rem; margin: 1.5rem 0 0.6rem; }
.price { color: var(--brass); white-space: nowrap; }
.price .muted { font-weight: 400; font-size: 0.85em; }
.price-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.price-table th { text-align: left; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0 0.75rem 0.4rem 0; }
.price-table td { border-top: 1px solid var(--rule); padding: 0.45rem 0.75rem 0.45rem 0; }
.jump-list, .fact-list { padding-left: 1.2rem; margin: 0 0 1.5rem; }
.jump-list li, .fact-list li { margin-bottom: 0.3rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; margin-top: 2rem; }
.photo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; margin-top: 2rem; }
@media (max-width: 800px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } }
.photo-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.photo-wall { columns: 4 14rem; column-gap: 1rem; }
.photo-wall img { width: 100%; height: auto; margin-bottom: 1rem; break-inside: avoid; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* Subject tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; background: var(--tint); box-shadow: var(--shadow);
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile__veil {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,30,27,0.62) 0%, rgba(31,30,27,0) 55%);
}
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; color: #fff; }
.tile__title { font-family: var(--display); font-size: 1.15rem; display: block; }
.tile__count { font-size: 0.8rem; opacity: 0.85; }

/* Gallery grid + filters */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2.5rem; }
.filter-btn {
  padding: 0.5em 1.1em; border-radius: 999px; border: 1px solid var(--rule); background: var(--mount);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--ink-soft);
}
.filter-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 900px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wall { grid-template-columns: 1fr; } }
.piece { background: var(--mount); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.piece__bay {
  background: var(--bay); display: flex; align-items: center; justify-content: center;
  height: 17rem; padding: 1rem;
}
.piece__bay img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.piece__body { padding: 1.1rem 1.25rem 1.4rem; }
.piece__title { font-size: 1.05rem; margin-bottom: 0.2rem; }
.piece__meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.6rem; }
.piece__price { color: var(--brass); font-weight: 700; }
.piece__sold { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger); margin-bottom: 0.4rem; }
.piece__desc { font-size: 0.9rem; color: var(--muted); margin: 0.6rem 0; }

/* Prints */
.print-card .piece__body { display: flex; flex-direction: column; gap: 0.5rem; }
.print-variants { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0; }
.print-variant { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; border-top: 1px solid var(--rule); padding-top: 0.4rem; }
.print-variant:first-child { border-top: none; padding-top: 0; }

/* Forms */
.form { display: grid; gap: 1rem; max-width: 36rem; margin: 0 auto; }
.form label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 0.35rem; }
.form input, .form textarea, .form select {
  width: 100%; padding: 0.7em 0.85em; border-radius: var(--radius); border: 1px solid var(--rule);
  font-family: inherit; font-size: 1rem; background: #fff;
}
.form textarea { min-height: 120px; resize: vertical; }
.form fieldset { border: none; margin: 0; padding: 0; }
.form legend { font-weight: 600; font-size: 0.9rem; padding: 0; margin-bottom: 0.35rem; }
.choice-group label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 1rem; margin-bottom: 0.3rem; }
.choice-group input { width: auto; }
.field-hint { font-size: 0.82rem; color: var(--muted); margin: 0.35rem 0 0; }
.notice { background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.9rem 1.1rem; font-size: 0.9rem; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.78); padding: 3rem 0 2rem; margin-top: 2rem; }
.site-footer a { text-decoration: none; color: inherit; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.5rem; font-size: 0.9rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.25rem; font-size: 0.85rem; text-align: center; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }
.footer-policies { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem; margin-bottom: 0.9rem; }

/* Store policy pages */
.policy { max-width: 46rem; }
.policy h2 { font-size: 1.35rem; margin: 2.25rem 0 0.75rem; }
.policy ul { padding-left: 1.3rem; margin: 0 0 1em; }
.policy li { margin-bottom: 0.4rem; }
.policy table { width: 100%; border-collapse: collapse; font-size: 0.93rem; margin: 0.5rem 0 1.25rem; }
.policy th { text-align: left; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0 0.75rem 0.45rem 0; }
.policy td { border-top: 1px solid var(--rule); padding: 0.55rem 0.75rem 0.55rem 0; vertical-align: top; }
.policy a { color: var(--accent-deep); }
.policy-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.92rem; }

.text-center { text-align: center; }