/* ---------------------------------------------------------------
   Shae Warnick — site styles
   Palette: warm cream / forest green / rust accent / charcoal ink
--------------------------------------------------------------- */
:root {
  --cream: #fdfcf9;
  --cream-deep: #f3ecdb;
  --ink: #2b2a24;
  --forest: #35442f;
  --forest-deep: #263120;
  --rust: #af5a34;
  --rust-deep: #8f4527;
  --line: #ddd3bd;
  --serif: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --logo-font: 'Jost', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --prose: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 17px;
  line-height: 1.6;
}

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

a { color: var(--rust-deep); text-decoration: none; }
a:hover { color: var(--rust); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--forest-deep);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2.section-subhead {
  font-size: 1.4rem;
  margin-top: 2.2em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.4em;
}
h3.section-subhead.small { font-size: 1.05rem; margin-top: 1.6em; font-style: italic; }

p {
  margin: 0 0 1em;
  font-family: var(--prose);
  font-size: 1.18rem;
  line-height: 1.65;
  font-weight: 400;
}
figcaption { font-family: var(--prose); }

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header.no-logo .header-inner { justify-content: flex-end; }
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.brand-name {
  font-family: var(--logo-font);
  font-weight: 200;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  color: var(--forest-deep);
}
.brand-name.small { font-size: 1.2rem; }
.brand-tagline {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  margin-top: 0.15em;
  text-align: center;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--forest-deep);
  border-radius: 2px;
}

.site-nav > ul {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}
.site-nav li { position: relative; }
.site-nav .nav-link {
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.4rem 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
/* Top-level items with no page of their own (e.g. "Installation &
   Objects") render as a <span class="nav-link no-link"> instead of an
   <a> -- same look, but no pointer cursor since there's nothing to click
   through to (the dropdown still opens on hover/tap regardless). */
.site-nav .nav-link.no-link { cursor: default; }
.site-nav a.nav-link:hover,
.site-nav a.nav-link.active {
  color: var(--forest-deep);
  border-bottom-color: var(--rust);
}

.has-sub { display: flex; align-items: center; }
.sub-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.3rem;
  margin-left: 0.15rem;
  line-height: 0;
}
.sub-toggle span {
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--forest-deep);
  border-bottom: 1.5px solid var(--forest-deep);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.has-sub.sub-open .sub-toggle span { transform: rotate(225deg); }

/* Submenus stay closed by default everywhere; opened via the caret
   tap-toggle (touch / keyboard) via the .sub-open class the JS applies,
   never on load. Real hover-capable devices (mouse) additionally get
   hover-to-open as a convenience -- gated behind (hover: hover) so a tap
   on a touchscreen can't leave the submenu "stuck" open in a simulated
   hover state that the JS toggle can't then close (a well-known mobile
   Safari/Chrome quirk with :hover-triggered dropdowns). */
.sub-nav {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  min-width: 240px;
  display: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.has-sub.sub-open .sub-nav { display: block; }
@media (hover: hover) {
  .has-sub:hover .nav-link.no-link {
    color: var(--forest-deep);
    border-bottom-color: var(--rust);
  }
  .has-sub:hover .sub-toggle span { transform: rotate(225deg); }
  .has-sub:hover .sub-nav,
  .has-sub:focus-within .sub-nav { display: block; }
}
.sub-nav li { padding: 0; }
.sub-nav a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--ink);
  text-transform: none;
  white-space: nowrap;
}
.sub-nav a:hover, .sub-nav a.active { background: var(--cream-deep); color: var(--rust-deep); }

/* ---------- Layout helpers ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem; }

.page-header { padding: 2.5rem 0 1rem; }
.page-header h1 { font-family: var(--sans); font-weight: 200; letter-spacing: 0.09em; }
.page-header h1.page-title-small {
  text-align: center;
  font-size: 1.3rem;
  margin-top: 1.5rem;
}
.page-header h1.page-title-italic {
  text-align: center;
  font-family: var(--prose);
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
}
/* Used on Recent Work / Older Work only (not Portfolios): slightly
   tighter letter-spacing than the default .page-header h1 tracking. */
.page-header h1.tracking-tight {
  letter-spacing: 0.04em;
  font-weight: 400;
}
/* Used on Recent Work only, to try matching the Dawn Sonata heading's
   sans-serif typeface instead of the italic serif used elsewhere. */
.page-header h1.sans-header {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 200;
  font-size: 1.6rem;
}
.page-header h1.page-title-small::after {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  background: var(--line);
  margin: 1.5rem auto 0;
}
.page-header h1.tracking-tight::after {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  background: var(--line);
  margin: 0.9rem auto 0;
}
/* Suppresses the ::after divider above so it can instead be placed as a
   real element lower in the markup (see .header-divider) -- needed when
   something (like an intro paragraph) has to sit between the heading and
   the line rather than the line attaching directly to the heading. */
.page-header h1.no-auto-divider::after { content: none; }
.header-divider {
  width: 140px;
  height: 1px;
  background: var(--line);
  margin: 1.1rem auto 0;
}
.gallery-intro {
  max-width: 640px;
  margin: 1rem auto 0;
  text-align: center;
  font-family: var(--prose);
  font-size: 1.05rem;
  line-height: 1.6;
  color: #5a5748;
}
.page-subhead { color: #5a5748; font-size: 1.02rem; }
.aviary-subhead { text-align: center; margin: 0 0 1.2rem; }
.page-body { padding: 1rem 0; }

.btn {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  border-radius: 2px;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn.small { padding: 0.55rem 1.1rem; font-size: 0.78rem; }
.btn-primary { background: var(--forest); color: var(--cream); }
.btn-primary:hover { background: var(--forest-deep); color: var(--cream); }
.btn-outline { background: transparent; border-color: var(--forest); color: var(--forest-deep); }
.btn-outline:hover { background: var(--forest); color: var(--cream); }

/* ---------- Home ---------- */
.home-hero-heading {
  position: relative;
  text-align: center;
  padding: 2.8rem 1rem 2rem;
}
.home-hero-name {
  position: relative;
  z-index: 2;
  font-family: var(--logo-font);
  font-size: clamp(1.9rem, 4.8vw, 3.4rem);
  font-weight: 200;
  text-transform: uppercase;
  color: var(--forest-deep);
  margin: 0;
  letter-spacing: 0.1em;
}

/* ---------- Flying bird decoration (home page) ---------- */
.bird-field {
  position: absolute;
  inset: -18px -6% auto -6%;
  height: 150px;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}
.bird {
  position: absolute;
  top: 0;
  left: -10%;
  width: 26px;
  animation-name: fly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bird-svg {
  width: 100%;
  height: auto;
  display: block;
  fill: none;
  stroke: #221f18;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.wing-left, .wing-right {
  transform-box: view-box;
  transform-origin: 20px 10px;
  animation-name: flap-left;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.wing-right { animation-name: flap-right; }

.bird-1 { top: 6%;  width: 24px; animation-duration: 12s; animation-delay: 0s; }
.bird-2 { top: 42%; width: 17px; animation-duration: 9.5s; animation-delay: 2.4s; }
.bird-3 { top: 62%; width: 21px; animation-duration: 14s; animation-delay: 4.8s; }
.bird-4 { top: 22%; width: 15px; animation-duration: 10.5s; animation-delay: 7.2s; }
.bird-5 { top: 74%; width: 19px; animation-duration: 11.5s; animation-delay: 1.2s; }

@keyframes fly {
  0%   { left: -10%; transform: translateY(0) rotate(-6deg); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(-20px) rotate(4deg); }
  90%  { opacity: 0.85; }
  100% { left: 108%; transform: translateY(10px) rotate(-6deg); opacity: 0; }
}
@keyframes flap-left {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(24deg); }
}
@keyframes flap-right {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-24deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bird-field { display: none; }
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.hero-tile { overflow: hidden; aspect-ratio: 4 / 5; }
.hero-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hero-tile:hover img { transform: scale(1.04); }

.intro-section {
  max-width: 700px;
  margin: 3.5rem auto 1rem;
  text-align: center;
}
.intro-section h2 {
  font-family: var(--prose);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  letter-spacing: 0.02em;
}
.intro-section h2 a { color: var(--forest-deep); }
.intro-section h2 a:hover { color: var(--rust); }
.intro-actions {
  margin-top: 1.6rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Split link cards (Painting / Installation overview) ---------- */
.split-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.split-links.three { grid-template-columns: repeat(3, 1fr); }

/* Paintings page: short decorative lines flanking the Recent Work / Older
   Work cards, echoing the divider line used on the Dawn Sonata page, to
   help fill the wide margins on either side of the (narrower) card row. */
.split-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.6rem;
}
.split-links-row .split-links { flex: 0 1 620px; margin-top: 0; }
.split-links-row .side-line {
  flex: 1 1 80px;
  max-width: 220px;
  height: 1px;
  background: var(--line);
}
@media (max-width: 780px) {
  .split-links-row .side-line { display: none; }
}

/* Paintings page overview cards (Recent Work / Older Work): shrunk down
   and left at their natural aspect ratio instead of a cropped square,
   scoped away from the Installation & Objects three-up cards below. */
.split-links:not(.three) {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  gap: 3rem;
}
.split-links:not(.three) .split-card {
  aspect-ratio: auto;
}
.split-links:not(.three) .split-card img {
  height: auto;
  object-fit: initial;
}
/* Recent Work's thumbnail on the Paintings page: forced to match the
   Older Work thumbnail's natural aspect ratio (1917x2447 = 0.7834) so
   both cards render at the exact same width and height, since the two
   source photos aren't quite the same shape on their own. */
.split-links:not(.three) .split-card img.match-older-work-ratio {
  aspect-ratio: 1917 / 2447;
  object-fit: cover;
}
/* Caption treatment to match the Recent Work gallery: hidden until hover,
   then a centered overlay across the whole image rather than a bottom
   gradient strip. */
.split-links:not(.three) .split-label {
  inset: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem;
  background: rgba(22, 21, 16, 0.58);
  font-family: var(--prose);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.split-links:not(.three) .split-card:hover .split-label {
  opacity: 1;
}

.split-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.split-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.split-card:hover img { transform: scale(1.05); }
.split-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(to top, rgba(38,49,32,0.82), transparent);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* ---------- Galleries ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 0.9rem;
  margin-top: 1rem;
}
.gallery-item {
  margin: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid var(--line);
}
/* Masonry variant: preserves each image's natural aspect ratio instead of
   cropping to a fixed ratio, arranged in a Pinterest-style column flow. */
.gallery-grid.masonry {
  display: block;
  column-count: 4;
  column-gap: 0.8rem;
}
.gallery-grid.masonry .gallery-item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 0.9rem;
}
.gallery-grid.masonry .gallery-item img {
  aspect-ratio: auto;
  object-fit: initial;
  height: auto;
}

/* Fixed-row variant: explicit rows with their own column count (set via
   the inline --cols custom property), rather than a continuous masonry
   column flow. Used where rows of different widths (e.g. 4-across taller
   images, 3-across wider images) need to land in a specific order. */
.gallery-grid.fixed-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 0.9rem;
  margin-top: 1rem;
}
.gallery-grid.fixed-row .gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: initial;
  border: 1px solid var(--line);
}
/* A fixed-row can also opt into a shared aspect ratio across its images
   (see script.js, which measures each image and sets --uniform-ratio to
   the median so cropping stays minimal) while keeping its own column
   count/gap from .fixed-row above. */
.gallery-grid.fixed-row.uniform-ratio {
  --uniform-ratio: 0.8;
  /* Re-assert the row's own column count/gap: the shared .uniform-ratio
     rule below (used by Recent Work) hardcodes 4 columns, which would
     otherwise win this tie by source order and force every fixed-row to
     4 columns regardless of its actual image count. */
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 0.9rem;
}
.gallery-grid.fixed-row.uniform-ratio .gallery-item img {
  aspect-ratio: var(--uniform-ratio);
  object-fit: cover;
}

/* Square-row variant: a plain, even grid for images that are already
   square, kept separate from the masonry flow above so they land
   together in their own clean row(s) rather than scattered across
   columns. */
.gallery-grid.square-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.9rem;
  margin-top: 1.9rem;
}
.gallery-grid.square-row .gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* Uniform-ratio variant: a plain even grid where every image shares one
   consistent aspect ratio (cropped only as much as needed) instead of
   each keeping its own natural proportions. The ratio itself is set at
   runtime by script.js from the images' real, measured proportions —
   0.8 (4:5) below is just a sensible fallback before that runs. */
.gallery-grid.uniform-ratio {
  --uniform-ratio: 0.8;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 1.9rem;
}
.gallery-grid.uniform-ratio .gallery-item img {
  width: 100%;
  aspect-ratio: var(--uniform-ratio);
  object-fit: cover;
  border: 1px solid var(--line);
}

.gallery-item figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin: 0;
  padding: 1.2rem;
  text-align: center;
  background: rgba(22, 21, 16, 0.58);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.gallery-item:hover figcaption,
.gallery-item:focus-within figcaption {
  opacity: 1;
}
.cap-title {
  display: block;
  font-family: var(--prose);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #fff;
}
.cap-meta {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f1ece0;
}

/* ---------- Project / media pages ---------- */
.project-text {
  max-width: 800px;
  margin: 2rem auto 0;
  font-family: var(--prose);
  font-size: 1.2rem;
  line-height: 1.65;
  color: #3a3930;
}
.project-text a { text-decoration: underline; }
.project-text.project-text-spaced { margin-top: 3.5rem; }
.citation-list { font-size: 0.95rem; line-height: 1.8; color: #5a5748; }
.media-embed { margin: 2rem 0; text-align: center; }
.media-embed video, .media-embed audio { width: 100%; max-width: 700px; margin: 0 auto; display: block; }
/* Used on the Dawn Sonata page: extra breathing room above the video
   (below the image gallery) and a slightly smaller player. */
.media-embed.media-embed-compact {
  margin-top: 3.6rem;
  margin-bottom: 3.5rem;
}
.media-embed.media-embed-compact::before {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  background: var(--line);
  margin: 0 auto 3.6rem;
}
.media-embed.media-embed-compact video { max-width: 520px; }
/* Used on Nocturne: same shrunk video + divider line as
   .media-embed-compact above, but the video comes before the gallery
   there (opposite order from Dawn Sonata), so the line goes after the
   video instead of before it. */
.media-embed.media-embed-compact-below {
  margin-top: 1.5rem;
  margin-bottom: 5rem;
}
.media-embed.media-embed-compact-below video { max-width: 520px; }
.audio-embed p { max-width: 700px; margin: 0 auto 0.8em; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 2.5rem;
  margin-top: 1.5rem;
  align-items: start;
}
.about-photo img { border: 1px solid var(--line); }
.about-social { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.about-divider { width: 60px; height: 1px; background: var(--line); margin: 1.6rem 0; }
.cv-section p { color: #3a3930; }
.fine-print { display: block; margin-top: 0.8em; font-size: 0.82rem; font-style: italic; color: #736f5e; }

/* ---------- Contact ---------- */
.contact-section { max-width: 900px; margin: 2rem auto 0; }
.contact-layout { display: flex; gap: 3rem; align-items: flex-start; }
.contact-photo { flex: 0 0 380px; }
.contact-photo img {
  width: 100%;
  aspect-ratio: 380 / 473;
  object-fit: cover;
  object-position: center 70%;
  display: block;
  border: 1px solid var(--line);
}
.contact-main { flex: 1 1 340px; min-width: 280px; }
@media (max-width: 780px) {
  .contact-layout { flex-direction: column; align-items: center; }
  .contact-photo { flex: none; width: 320px; margin: 0 auto; }
  .contact-main { width: 100%; max-width: 420px; }
}
.newsletter-section {
  max-width: 620px;
  margin: 1.5rem auto 2.5rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.newsletter-section .section-subhead { margin-top: 0; border-bottom: none; padding-bottom: 0; }
.newsletter-section p { margin-bottom: 1.3rem; }
.contact-form { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 1.5rem; }
.contact-form label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.8rem; color: var(--forest-deep); }
.contact-form input, .contact-form textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
}
.contact-form button { margin-top: 1.4rem; align-self: flex-start; }

/* ---------- Available Works (formerly "Shop") ----------
   Styled to read like a gallery checklist rather than a storefront: no
   card backgrounds/borders/price tags or bold "Buy Now" buttons -- just
   the image, title, medium, and a plain text link to inquire. */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2.8rem 2rem;
  margin-top: 1.5rem;
}
.shop-item { margin: 0; }
.shop-img { display: block; aspect-ratio: 4/5; overflow: hidden; margin-bottom: 1rem; border: 1px solid var(--line); }
.lightbox-trigger { cursor: pointer; }
.shop-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.shop-item:hover .shop-img img { transform: scale(1.03); }
.shop-item h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--forest-deep);
  margin: 0 0 0.2rem;
}
.shop-meta { font-family: var(--prose); font-size: 1rem; color: #5a5748; margin: 0 0 0.5rem; }
.shop-note-row { margin-bottom: 0.5rem; }
.shop-note-link, .shop-note { font-size: 0.78rem; color: #736f5e; font-style: italic; }
.shop-note-banner {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.shop-note-banner p { margin-bottom: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--forest-deep);
  color: var(--cream-deep);
  margin-top: 3rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.footer-col p { font-family: var(--sans); font-size: 0.9rem; margin: 0; }
.footer-col a { color: var(--cream-deep); }
.footer-col a:hover { color: #fff; }
.footer-inner .brand-name { color: var(--cream); }

/* ---------- Lightbox ---------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 16, 0.92);
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
/* Caption text carried over from the gallery's figcaption (see
   script.js). Hidden on desktop, where the hover-overlay caption already
   does this job before the lightbox even opens; shown on mobile instead,
   since taps can't hover -- see the mobile media query below. */
.lightbox-caption { display: none; text-align: center; max-width: 90vw; }

.gallery-cta { text-align: center; margin-top: 2.5rem; }
.lightbox-caption .cap-title { color: #fff; }
.lightbox-caption .cap-meta { color: #f1ece0; }
.lightbox-close {
  position: absolute;
  top: 1.2rem; right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
}
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-nav.hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; }
  .footer-inner { grid-template-columns: 1fr; }
  .gallery-grid.masonry { column-count: 3; }
  .gallery-grid.square-row { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid.uniform-ratio { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid.fixed-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; gap: 0; padding: 0.5rem 0 1rem; }
  .site-nav a.nav-link { display: block; padding: 0.7rem 0; }
  .has-sub { justify-content: space-between; flex-wrap: wrap; }
  .sub-nav { position: static; width: 100%; flex-basis: 100%; border: none; box-shadow: none; padding-left: 1.4rem; min-width: 0; }

  .hero-grid { grid-template-columns: 1fr; }
  .split-links, .split-links.three { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.masonry { column-count: 2; }
  .gallery-grid.square-row { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.uniform-ratio { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.fixed-row { grid-template-columns: repeat(2, 1fr); }

  /* The hover-overlay caption doesn't translate well to tap (it just
     flashes briefly before the lightbox opens), so hide it here and show
     the caption in the lightbox itself instead, below the enlarged
     image (populated by script.js). */
  .gallery-item figcaption { display: none; }
  .lightbox-caption { display: block; }
}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid.masonry { column-count: 1; }
  .gallery-grid.square-row { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.uniform-ratio { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.fixed-row { grid-template-columns: 1fr; }
  .lightbox-nav { width: 38px; height: 38px; font-size: 1.7rem; }
  .lightbox-prev { left: 0.4rem; }
  .lightbox-next { right: 0.4rem; }
}