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

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-elevated: #111111;
  --surface: #161616;
  --surface-hover: #1c1c1c;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f2efe8;
  --text-soft: rgba(242, 239, 232, 0.72);
  --muted: rgba(242, 239, 232, 0.42);
  --accent: #c9b896;
  --accent-soft: rgba(201, 184, 150, 0.18);
  --accent-hover: #ddd0b4;
  --radius: 2px;
  --max-width: 1440px;
  --header-height: 5.5rem;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.32s;
  --duration-medium: 0.56s;
  --duration-slow: 0.88s;
}

/* Light theme ------------------------------------------------------------ */

[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f6f2;
  --bg-elevated: #ffffff;
  --surface: #eeebe5;
  --surface-hover: #e5e2db;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --text: #1c1a17;
  --text-soft: rgba(28, 26, 23, 0.68);
  --muted: rgba(28, 26, 23, 0.45);
  --accent: #8a7554;
  --accent-soft: rgba(138, 117, 84, 0.1);
  --accent-hover: #6d5c3f;
}

[data-theme="light"] body::before {
  opacity: 0.5;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(138, 117, 84, 0.05), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(138, 117, 84, 0.03), transparent);
}

[data-theme="light"] .site-header {
  background: rgba(248, 246, 242, 0.82);
}

[data-theme="light"] .category-btn.active {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-accent {
  color: #fff;
}

[data-theme="light"] .btn-accent:hover {
  box-shadow: 0 10px 24px rgba(138, 117, 84, 0.2);
}

[data-theme="light"] .gallery-item:hover {
  box-shadow:
    inset 0 0 0 1px var(--border-strong),
    0 24px 48px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(138, 117, 84, 0.1);
}

[data-theme="light"] .site-footer {
  background: rgba(238, 235, 229, 0.7);
}

[data-theme="light"] .status-pill--open {
  color: #3a7d35;
  border-color: rgba(58, 125, 53, 0.3);
  background: rgba(58, 125, 53, 0.08);
}

[data-theme="light"] .status-pill--limited {
  color: #9e7a1e;
  border-color: rgba(158, 122, 30, 0.3);
  background: rgba(158, 122, 30, 0.08);
}

[data-theme="light"] .status-pill--closed {
  color: #b84040;
  border-color: rgba(184, 64, 64, 0.28);
  background: rgba(184, 64, 64, 0.07);
}

[data-theme="light"] .process-step::before {
  background: linear-gradient(
    180deg,
    rgba(138, 117, 84, 0.5),
    rgba(138, 117, 84, 0.2)
  );
}

[data-theme="light"] .draw-card--yes .draw-mark {
  color: #3a7d35;
  background: rgba(58, 125, 53, 0.08);
  border-color: rgba(58, 125, 53, 0.25);
}

[data-theme="light"] .draw-card--no .draw-mark {
  color: #b84040;
  background: rgba(184, 64, 64, 0.07);
  border-color: rgba(184, 64, 64, 0.22);
}

[data-theme="light"] .draw-card--yes .draw-list li::before {
  background: rgba(58, 125, 53, 0.45);
}

[data-theme="light"] .draw-card--no .draw-list li::before {
  background: rgba(184, 64, 64, 0.45);
}

/* Theme toggle ----------------------------------------------------------- */

.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-organic),
    border-color var(--duration-fast) var(--ease-organic),
    background var(--duration-fast) var(--ease-organic);
}

.theme-toggle:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.theme-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 1rem;
  height: 1rem;
}

.theme-toggle .icon-moon {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(201, 184, 150, 0.07), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201, 184, 150, 0.04), transparent);
}

.page-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(10, 10, 10, 0.82);
  border-bottom: 1px solid var(--border);
  animation: header-enter var(--duration-slow) var(--ease-out-expo) both;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.35rem 2.5rem;
}

.site-header--minimal .header-inner {
  grid-template-columns: auto 1fr;
  justify-content: space-between;
}

.brand-block {
  justify-self: start;
}

.brand-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-title {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.header-context {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

.header-meta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Commission status ------------------------------------------------------- */

.status-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.55rem;
}

.header-meta .status-block {
  margin-top: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Each state gets its own hue rather than only its own words, and all four
   are checked for contrast against the dark page background. */
.status-pill--open {
  color: #a8d3a3;
  border-color: rgba(168, 211, 163, 0.4);
  background: rgba(168, 211, 163, 0.12);
}

.status-pill--limited {
  color: #e3c37e;
  border-color: rgba(227, 195, 126, 0.4);
  background: rgba(227, 195, 126, 0.12);
}

.status-pill--closed {
  color: #d99a9a;
  border-color: rgba(217, 154, 154, 0.38);
  background: rgba(217, 154, 154, 0.1);
}

.status-pill--custom {
  color: var(--accent-hover);
  border-color: rgba(201, 184, 150, 0.4);
  background: var(--accent-soft);
}

.status-note {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.category-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.category-btn {
  position: relative;
  appearance: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  padding: 0.65rem 1.1rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-organic),
    background var(--duration-fast) var(--ease-organic);
}

.category-btn span {
  position: relative;
  z-index: 1;
}

.category-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--accent-soft);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity var(--duration-medium) var(--ease-organic),
    transform var(--duration-medium) var(--ease-out-expo);
}

.category-btn:hover {
  color: var(--text-soft);
}

.category-btn:hover::before {
  opacity: 1;
  transform: scale(1);
}

.category-btn.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.category-btn.active::before {
  opacity: 0;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.back-link {
  position: relative;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-soft);
  transition: color var(--duration-fast) var(--ease-organic);
}

.back-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--duration-medium) var(--ease-out-expo);
}

.back-link:hover {
  color: var(--accent-hover);
}

.back-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-organic),
    border-color var(--duration-fast) var(--ease-organic),
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-organic);
}

.btn-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(201, 184, 150, 0.22);
}

.btn-accent:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Gallery */

.gallery-main {
  flex: 1;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2.5rem 5rem;
}

/* Bio — body copy, capped at a comfortable measure. The build omits the
   whole section when site.config.json has no bio, so nothing collapses. */
.site-bio {
  max-width: 42rem;
  margin: 0 0 2.75rem;
  animation: fade-rise var(--duration-slow) var(--ease-out-expo) 0.08s both;
}

.site-bio p {
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-soft);
}

.site-bio p:last-child {
  margin-bottom: 0;
}

.gallery-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  animation: fade-rise var(--duration-slow) var(--ease-out-expo) 0.12s both;
}

.gallery-lede {
  max-width: 32rem;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-soft);
}

.gallery-count {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Fixed-width columns, natural image heights.
   Rows are 1px tall and each card spans as many as its own aspect ratio
   needs (js/main.js does the arithmetic), so images keep their proportions
   and short cards don't leave a hole under a tall neighbour. */
.gallery {
  --gallery-gutter: 1.25rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1px;
  column-gap: var(--gallery-gutter);
  row-gap: 0;
  align-items: start;
  transition: opacity var(--duration-fast) var(--ease-organic);
}

.gallery.is-transitioning {
  opacity: 0;
}

.gallery-item {
  --gallery-mat: 0.4rem;
  position: relative;
  appearance: none;
  border: 0;
  border-radius: var(--radius);
  /* A uniform mat around every piece so the card reads as a frame: light
     artwork doesn't glare straight into the page background and dark
     artwork doesn't dissolve into it. */
  padding: var(--gallery-mat);
  background: var(--surface);
  /* An inset ring rather than a border, so the card's height stays exactly
     image height + mat and the masonry span maths stays exact. */
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition:
    opacity var(--duration-medium) var(--ease-organic),
    transform var(--duration-slow) var(--ease-out-expo),
    box-shadow var(--duration-slow) var(--ease-organic);
}

.gallery-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* aspect-ratio comes from the image's real dimensions, set inline at render
   time, so the space is reserved before the file arrives. */
/* overflow lives here, not on the card, so the hover zoom is clipped to the
   artwork and the mat around it stays clean. */
.gallery-media {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius) / 2);
}

.gallery-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-organic);
  pointer-events: none;
}

.gallery-item:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow:
    inset 0 0 0 1px var(--border-strong),
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(201, 184, 150, 0.08);
}

.gallery-item:hover::after {
  opacity: 1;
}

.gallery-item:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-item-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--duration-medium) var(--ease-organic),
    transform var(--duration-medium) var(--ease-out-expo);
}

.gallery-item:hover .gallery-item-meta {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item-category {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.85);
}

.gallery-item-index {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: rgba(242, 239, 232, 0.55);
}

.gallery.is-transitioning .gallery-item {
  pointer-events: none;
}

/* Broken images ----------------------------------------------------------- */

/* Replaces the browser's broken-image glyph with a card that belongs to the
   design. The reason an image failed is a developer concern and stays in the
   console; visitors only see the plain sentence. */
.image-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  min-height: 9rem;
  padding: 1.5rem 1rem;
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.image-fallback-mark {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}

.image-fallback-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 1px;
  background: var(--muted);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.image-fallback-text {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.example-stage .image-fallback,
.lightbox-swiper .swiper-slide .image-fallback {
  width: min(24rem, 80vw);
  height: auto;
  min-height: 12rem;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 6rem 1rem;
  font-size: 0.875rem;
}

.empty-state code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.15rem 0.4rem;
  font-size: 0.85em;
}

/* Footer */

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: rgba(17, 17, 17, 0.6);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 2.5rem;
}

.footer-name {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
}

.footer-tagline {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-email {
  justify-self: center;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-organic);
}

.footer-email:hover {
  color: var(--accent-hover);
}

.footer-copy {
  justify-self: end;
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Lightbox */

/* Mobile browser chrome makes 100vh taller than the visible area, which
   pushed the artwork under the address bar; dvh tracks the real viewport. */
.lightbox {
  border: none;
  padding: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: transparent;
  overflow: hidden;
}

/* <dialog> dims the page but doesn't stop it scrolling behind the viewer. */
html.has-modal,
html.has-modal body {
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgba(5, 5, 5, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: backdrop-in var(--duration-medium) var(--ease-organic) both;
}

.lightbox[open] .lightbox-chrome,
.lightbox[open] .lightbox-swiper {
  animation: fade-rise var(--duration-slow) var(--ease-out-expo) 0.08s both;
}

.lightbox-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  pointer-events: none;
}

.lightbox-chrome > * {
  pointer-events: auto;
}

.lightbox-close {
  appearance: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(22, 22, 22, 0.85);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-organic),
    background var(--duration-fast) var(--ease-organic),
    transform var(--duration-fast) var(--ease-out-expo);
}

.lightbox-close span {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.lightbox-close span::before,
.lightbox-close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: var(--text-soft);
  transition: background var(--duration-fast) var(--ease-organic);
}

.lightbox-close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox-close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lightbox-close:hover {
  border-color: var(--accent);
  background: var(--surface);
  transform: scale(1.04);
}

.lightbox-close:hover span::before,
.lightbox-close:hover span::after {
  background: var(--accent-hover);
}

.lightbox-caption {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.lightbox-swiper {
  position: relative;
  width: 100%;
  height: 100%;
}

.lightbox-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* Room for the close button and caption above, the nav arrows either
     side, so the artwork is never tucked underneath them. */
  padding: 5.5rem 1rem 3.5rem;
}

/* `contents` so the <img> itself is the flex item and its max-height
   resolves against the slide rather than an auto-height wrapper. */
.lightbox-swiper .swiper-slide picture,
.example-stage picture {
  display: contents;
}

.lightbox-swiper .swiper-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1200px);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  transition:
    transform var(--duration-slow) var(--ease-out-expo),
    opacity var(--duration-medium) var(--ease-organic),
    filter var(--duration-medium) var(--ease-organic);
}

.lightbox-swiper .swiper-slide:not(.swiper-slide-active) img {
  opacity: 0.35;
  transform: scale(0.9);
  filter: blur(1px);
  cursor: pointer;
}

.lightbox-swiper .swiper-slide-active img {
  opacity: 1;
  transform: scale(1);
  filter: none;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 3rem;
  height: 3rem;
  margin-top: -1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(22, 22, 22, 0.75);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--duration-medium) var(--ease-organic),
    border-color var(--duration-fast) var(--ease-organic),
    transform var(--duration-fast) var(--ease-out-expo),
    background var(--duration-fast) var(--ease-organic);
}

.lightbox-swiper:hover .lightbox-nav {
  opacity: 1;
}

.lightbox-nav span {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.lightbox-nav span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--text-soft);
  border-right: 1px solid var(--text-soft);
  transition: border-color var(--duration-fast) var(--ease-organic);
}

.lightbox-prev {
  left: 1.5rem;
}

.lightbox-prev span::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.lightbox-next {
  right: 1.5rem;
}

.lightbox-next span::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.lightbox-nav:hover {
  border-color: var(--accent);
  background: var(--surface);
  transform: scale(1.06);
}

.lightbox-nav:hover span::before {
  border-color: var(--accent-hover);
}

.lightbox-swiper.swiper-single .lightbox-nav {
  display: none;
}

/* Terms page */

.terms-content {
  flex: 1;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2.5rem 5rem;
}

.terms-hero {
  margin-bottom: 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  animation: fade-rise var(--duration-slow) var(--ease-out-expo) both;
}

.terms-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.terms-hero h1 {
  margin: 0 0 1.25rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

.terms-intro {
  margin: 0;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.7;
}

.terms-body {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  /* Lets the column shrink below the price table's natural width so the
     table scrolls inside .table-scroll rather than widening the page. */
  min-width: 0;
}

.terms-section {
  animation: fade-rise var(--duration-slow) var(--ease-out-expo) 0.15s both;
}

.section-heading {
  margin: 0 0 1.75rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.terms-card {
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--duration-medium) var(--ease-organic),
    transform var(--duration-medium) var(--ease-out-expo);
}

.terms-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.terms-card h3 {
  margin: 0 0 0.85rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.faq-item h3 {
  color: var(--text);
}

.terms-card p {
  margin: 0 0 0.85rem;
  color: var(--text-soft);
}

.terms-card p:last-child {
  margin-bottom: 0;
}

.terms-card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-soft);
}

.terms-card ul:not(:last-child) {
  margin-bottom: 0.85rem;
}

.terms-card li + li {
  margin-top: 0.5rem;
}

/* Commission page — pricing, subjects, compact layout */

.terms-content--wide {
  max-width: 1240px;
}

.table-scroll {
  overflow-x: auto;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pricing-table th,
.pricing-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.pricing-table thead th {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
}

.pricing-table thead th .th-note {
  display: block;
  margin-top: 0.25rem;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.6875rem;
  color: var(--muted);
  opacity: 0.75;
}

.pricing-table tbody th {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
}

.pricing-table tbody th .row-note {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.71875rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.pricing-table td {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--accent);
  white-space: nowrap;
}

.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.pricing-table tbody tr {
  transition: background var(--duration-fast) var(--ease-organic);
}

.pricing-table tbody tr:hover {
  background: var(--surface-hover);
}

.pricing-extras {
  margin-top: 1.25rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pricing-extras h3 {
  margin: 0 0 1rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.extras-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.5rem 2.5rem;
}

.extras-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text-soft);
  font-size: 0.875rem;
}

.extra-price {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-align: right;
}

/* Two-column layout with sticky contact panel */

.terms-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  align-items: start;
}

.contact-panel {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
}

.contact-card {
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.contact-lede {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
  color: var(--text-soft);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.contact-row + .contact-row {
  border-top: 1px dashed var(--border);
}

a.contact-row {
  transition: color var(--duration-fast) var(--ease-organic);
}

a.contact-row:hover {
  color: var(--accent-hover);
}

.contact-row span {
  word-break: break-all;
}

.contact-icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--accent);
}

.copy-handle {
  appearance: none;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-organic),
    border-color var(--duration-fast) var(--ease-organic);
}

.copy-handle:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
}

.copy-handle.is-copied {
  color: var(--accent);
  border-color: var(--accent);
}

/* Process timeline */

.process-lede {
  margin: -0.75rem 0 1.75rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted);
}

.process-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-step {
  position: relative;
  padding: 0 0 0.4rem 3.1rem;
}

.process-step::before {
  content: "";
  position: absolute;
  left: 0.9375rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(201, 184, 150, 0.55),
    rgba(201, 184, 150, 0.25)
  );
}

.process-step:first-child::before {
  top: 1rem;
}

.process-step:last-child::before {
  bottom: auto;
  height: 1rem;
}

.step-marker {
  position: absolute;
  left: -3.1rem;
  top: 0.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--accent);
  font-family: "Cormorant Garamond", serif;
  font-size: 0.95rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  transition: background var(--duration-fast) var(--ease-organic);
}

.process-step details.is-open .step-marker,
.process-step summary:hover .step-marker {
  /* Layer the translucent accent tint over the opaque base so the
     timeline line stays hidden behind the marker. */
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)),
    var(--bg-elevated);
}

.process-step summary {
  list-style: none;
  position: relative;
  padding: 0.55rem 2.5rem 0.55rem 0;
  cursor: pointer;
}

.process-step summary::-webkit-details-marker {
  display: none;
}

.process-step summary::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 1.35rem;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.process-step details.is-open summary::after {
  transform: rotate(225deg);
  top: 1.55rem;
}

.step-body {
  /* Permanent, not just during animation: keeps child-margin collapsing
     behavior identical at rest and mid-animation, so the measured height
     used to drive the animation always matches the rendered box (no snap
     at the end). */
  overflow: hidden;
  will-change: height, opacity;
}

.step-title {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  transition: color var(--duration-fast) var(--ease-organic);
}

.process-step summary:hover .step-title {
  color: var(--accent-hover);
}

.step-sub {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.71875rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.step-body p {
  margin: 0.3rem 0 1rem;
  max-width: 42rem;
  font-size: 0.875rem;
  color: var(--text-soft);
}

/* Pricing example thumbnails */

.finish-cell {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.example-thumb {
  appearance: none;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
  cursor: zoom-in;
  transition:
    border-color var(--duration-fast) var(--ease-organic),
    transform var(--duration-fast) var(--ease-out-expo);
}

.example-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-medium) var(--ease-out-expo);
}

.example-thumb:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}

.example-thumb:hover img {
  transform: scale(1.08);
}

.example-thumb:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.example-dialog .example-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 5.5rem 1rem 3.5rem;
}

.example-dialog .example-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1100px);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  animation: fade-rise var(--duration-medium) var(--ease-out-expo) both;
}

/* Will draw / won't draw */

.draw-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.draw-card {
  margin-bottom: 0;
}

.draw-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.draw-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.draw-mark svg {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
}

.draw-card--yes .draw-mark {
  color: #9ec89a;
  background: rgba(158, 200, 154, 0.12);
  border: 1px solid rgba(158, 200, 154, 0.3);
}

.draw-card--no .draw-mark {
  color: #cf8d8d;
  background: rgba(207, 141, 141, 0.1);
  border: 1px solid rgba(207, 141, 141, 0.28);
}

.draw-list {
  list-style: none;
  padding-left: 0 !important;
}

.draw-list li {
  position: relative;
  padding-left: 1.15rem;
}

.draw-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.3rem;
  height: 1px;
  background: var(--muted);
}

.draw-card--yes .draw-list li::before {
  background: rgba(158, 200, 154, 0.55);
}

.draw-card--no .draw-list li::before {
  background: rgba(207, 141, 141, 0.55);
}

.subjects-note {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
}

/* Compact terms grid */

.terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.terms-grid .terms-card {
  margin-bottom: 0;
  height: 100%;
}

/* FAQ accordion */

.faq-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.faq-entry {
  border-bottom: 1px solid var(--border);
}

.faq-entry:last-child {
  border-bottom: none;
}

.faq-entry summary {
  list-style: none;
  position: relative;
  padding: 1.1rem 3rem 1.1rem 1.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-soft);
  transition:
    color var(--duration-fast) var(--ease-organic),
    background var(--duration-fast) var(--ease-organic);
}

.faq-entry summary::-webkit-details-marker {
  display: none;
}

.faq-entry summary::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.faq-entry summary:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.faq-entry.is-open summary {
  color: var(--text);
}

.faq-entry.is-open summary::after {
  transform: rotate(225deg);
  margin-top: -2px;
}

.faq-body {
  /* See .step-body: permanent overflow keeps measured/rendered height
     consistent so the animation doesn't snap at the end. */
  overflow: hidden;
  will-change: height, opacity;
}

.faq-entry p {
  margin: 0;
  padding: 0.65rem 1.5rem 1.1rem;
  color: var(--text-soft);
  max-width: 60rem;
}

.faq-entry p + p {
  padding-top: 0;
}

@media (max-width: 960px) {
  /* minmax(0, …) not 1fr: a plain 1fr track refuses to shrink below its
     content's minimum, so the price table stretched the column past the
     viewport and scrolled the whole page sideways instead of scrolling
     inside .table-scroll. */
  .terms-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .contact-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .draw-columns,
  .terms-grid {
    grid-template-columns: 1fr;
  }

  .process-step {
    padding-left: 2.6rem;
  }

  .step-marker {
    left: -2.6rem;
  }

  .pricing-table th,
  .pricing-table td {
    padding: 0.8rem 0.9rem;
  }

  .pricing-table thead th .th-note {
    display: none;
  }

  .extras-list {
    grid-template-columns: 1fr;
  }
}

/* Animations */

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes header-enter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gallery-item {
    opacity: 1;
    transform: none;
  }
}

/* Responsive */

/* Column counts: 4 → 3 → 2 → 1. js/main.js reads the resolved track width
   and column-gap straight off the grid, so these are the only place the
   breakpoints are defined. */
@media (max-width: 1199px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .gallery {
    --gallery-gutter: 0.85rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .header-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
  }

  .site-header--minimal .header-inner {
    grid-template-columns: auto auto;
  }

  .header-meta {
    justify-self: end;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
  }

  .category-nav {
    justify-self: start;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }

  .category-nav::-webkit-scrollbar {
    display: none;
  }

  .header-actions {
    justify-self: start;
  }

  .gallery-main,
  .terms-content {
    padding: 2rem 1.5rem 4rem;
  }

  .gallery-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem 1.5rem;
  }

  .footer-email,
  .footer-copy {
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .category-btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.6875rem;
  }

  /* No hover on touch, so the arrows are always visible — and they sit
     below the artwork rather than on top of it, where a tap meant for the
     arrow used to land on the image. */
  .lightbox-nav {
    opacity: 1;
    top: auto;
    bottom: 0.9rem;
    margin-top: 0;
    width: 2.75rem;
    height: 2.75rem;
  }

  .lightbox-prev {
    left: 25%;
    transform: translateX(-50%);
  }

  .lightbox-next {
    right: 25%;
    transform: translateX(50%);
  }

  .lightbox-nav:hover {
    transform: none;
  }

  .lightbox-prev:hover {
    transform: translateX(-50%);
  }

  .lightbox-next:hover {
    transform: translateX(50%);
  }

  .lightbox-chrome {
    padding: 1rem 1rem;
  }

  .lightbox-swiper .swiper-slide,
  .example-dialog .example-stage {
    padding: 4.5rem 0.75rem 4.5rem;
  }

  .lightbox-swiper .swiper-slide img,
  .example-dialog .example-stage img {
    max-width: 100%;
  }
}