/* ═══════════════════════════════════════════════════════════════
   Carol Campbell Art — Main Stylesheet  v1.3
   Shared by index.html and all piece pages.
   Implements Design Style Guide v1.3 — 2026-09-13.
═══════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img  { display: block; max-width: 100%; }
ul   { list-style: none; }
a    { text-decoration: none; color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: inherit; border-radius: 0; }

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  /* Colour palette — v1.3 earth-tone brand direction */
  --paper:          #e6dccb;   /* Main page background */
  --paper-2:        #ddd1b9;   /* Deeper warm sand: image containers */
  --surf:           #f3ecdc;   /* Sea-foam: text on dark surfaces */
  --ocean:          #16363f;   /* Primary text, nav, body copy */
  --teal:           #1f6a6f;   /* Display accent — large text only */
  --teal-text:      #175659;   /* Small text teal (< 18px): 6.15:1 on --paper */
  --seafoam:        #6fa3a0;   /* Footer link hover — decorative */
  --kelp:           #2f5240;   /* Availability indicator */
  --navy:           #0d2128;   /* CTA buttons, sold state */
  --ink:            #08171c;   /* Footer background, near-black */
  --driftwood:      #7a6b54;   /* Decorative pseudo-elements ONLY — 3.81:1, not for text */
  --driftwood-text: #5a4f3f;   /* All warm-grey content text: 5.88:1 on --paper */

  /* Font stacks */
  --serif-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --serif-text:    'EB Garamond', Georgia, serif;

  /* Spacing tokens */
  --bdr:       150px;                         /* desktop default — seaweed border zone */
  --kelp-fade: 125px;                         /* kelp fade zone — inner edge of border */
  --max:       1080px;                        /* maximum content width */
  --gap:       clamp(28px, 3.5vw, 56px);     /* section-internal column gap */
  --section-v: clamp(120px, 13vw, 200px);    /* vertical section padding */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ocean);
  font-family: var(--serif-text);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  padding: var(--bdr) var(--bdr) 0;
  overflow-x: hidden;
  position: relative; /* anchor for absolute-positioned canvas */
}

/* ── Seaweed canvas — fixed viewport frame, content scrolls beneath ── */
#seaweed-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to right,
    black 0, black var(--kelp-fade), transparent var(--bdr),
    transparent calc(100% - var(--bdr)),
    black calc(100% - var(--kelp-fade)), black 100%);
  mask-image: linear-gradient(to right,
    black 0, black var(--kelp-fade), transparent var(--bdr),
    transparent calc(100% - var(--bdr)),
    black calc(100% - var(--kelp-fade)), black 100%);
}

/* ── Seaweed footer canvas ──────────────────────────────────── */
#seaweed-footer {
  display: block;
  height: 280px;
  margin: 0 calc(-1 * var(--bdr));
  pointer-events: none;
  position: relative;
  z-index: 2;
}

/* ── Scroll-reveal base (JS adds .visible) ──────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 0.10s; }
.reveal--d2 { transition-delay: 0.20s; }
.reveal--d3 { transition-delay: 0.30s; }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════════ */
.site-nav {
  max-width: var(--max);
  margin: 0 auto;
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid rgba(22, 54, 63, 0.11);
  margin-bottom: clamp(36px, 5vw, 60px);
  position: relative;
  z-index: 10;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Brand: logo + name */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.nav-brand:hover { opacity: 0.72; }

.nav-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.nav-name {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(0.82rem, 1vw, 1rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ocean);
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 44px;
  align-items: center;
}
.nav-links a {
  font-family: var(--serif-text);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ocean);
  position: relative;
  transition: color 0.22s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--teal);
  transition: width 0.28s var(--ease-out);
}
.nav-links a:hover { color: var(--teal); }
.nav-links a:hover::after { width: 100%; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ocean);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.hero-section {
  max-width: var(--max);
  margin: 0 auto;
  min-height: calc(100vh - var(--bdr) * 2 - 130px);
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: var(--gap);
  align-items: center;
  padding-bottom: var(--section-v);
  position: relative;
  z-index: 3;
}

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

.hero-eyebrow {
  font-family: var(--serif-text);
  font-size: 0.72rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--driftwood-text);   /* was --driftwood × 0.85 → 3.01:1 FAIL; now 5.88:1 PASS */
  margin-bottom: 16px;
}

.hero-heading {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(3rem, 6.4vw, 7rem);
  line-height: 0.96;
  color: var(--ocean);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.hero-heading em {
  font-style: italic;
  color: var(--teal);  /* 4.62:1 on --paper, large text — PASS */
}

.hero-sub {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(1.08rem, 1.42vw, 1.4rem);
  line-height: 1.70;
  color: var(--ocean);
  opacity: 0.78;   /* 5.33:1 on --paper — PASS */
  max-width: 38ch;
  margin-bottom: 32px;
}

.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero image column */
.hero-image-wrap {
  position: relative;
  z-index: 1;
}

.hero-image {
  overflow: hidden;
  height: clamp(380px, 70vh, 680px);
  background: var(--paper-2);
}
.hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 8s ease;
}
.hero-image:hover img { transform: scale(1.04); }

.hero-credit {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--driftwood-text);   /* was --driftwood × 0.85 → FAIL; now 5.88:1 PASS */
  letter-spacing: 0.06em;
  margin-top: 10px;
  /* No opacity on the element — decorative ::before line can have its own opacity */
}

.hero-scroll-cue {
  position: absolute;
  bottom: clamp(16px, 3vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif-text);
  font-size: 0.70rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--driftwood-text);   /* was --driftwood × 0.65 → FAIL; now 5.88:1 PASS */
  pointer-events: none;
}

/* ── Shared buttons ─────────────────────────────────────────── */
.btn-primary,
.btn-outline,
.btn-submit,
.btn-ghost {
  display: inline-block;
  font-family: var(--serif-text);
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.26s ease, color 0.26s ease, border-color 0.26s ease, transform 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--ocean);
  color: var(--surf);   /* 10.92:1 — PASS */
  padding: 14px 30px;
  border: 1px solid var(--ocean);
}
.btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--ocean);
  padding: 14px 30px;
  border: 1px solid rgba(22, 54, 63, 0.38);
}
.btn-outline:hover {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ocean);
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid rgba(22, 54, 63, 0.38);
}
.btn-ghost:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* ═══════════════════════════════════════════════════════════════
   SHARED SECTION UTILITIES
═══════════════════════════════════════════════════════════════ */
.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Folio number (section label) */
.folio {
  display: block;
  font-family: var(--serif-text);
  font-size: 0.66rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--driftwood-text);   /* was --driftwood × 0.78 → FAIL; now 5.88:1 PASS */
  margin-bottom: 14px;
}

/* Section heading pattern */
.section-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head .folio { justify-self: center; }

.section-heading {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 4rem);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ocean);
  margin-bottom: 16px;
  line-height: 1.12;
}
.section-heading em {
  font-style: italic;
  color: var(--teal);   /* 4.62:1 large text — PASS */
}

.section-rule-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(36px, 4.5vw, 58px);
}
.section-rule {
  display: block;
  width: clamp(50px, 6vw, 90px);
  height: 1px;
  background: rgba(22, 54, 63, 0.22);
}

.section-subhead {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.78;
  color: var(--ocean);
  opacity: 0.80;   /* 5.67:1 on --paper — was 0.70 FAIL; PASS now */
  max-width: 56ch;
  text-align: center;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY SECTION — six-column mosaic
═══════════════════════════════════════════════════════════════ */
.gallery-section {
  padding: var(--section-v) 0;
  border-top: 1px solid rgba(22, 54, 63, 0.09);
  background: var(--paper);
  position: relative;
  z-index: 3;
}

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2.2vw, 32px);
  margin-top: clamp(32px, 4vw, 56px);
}

/* Card base — 2 of 6 columns */
.card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  color: inherit;
  cursor: pointer;
  /* Scroll reveal: starts hidden */
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.card.visible { opacity: 1; transform: none; }

/* Mosaic variants */
.card--wide  { grid-column: span 3; }
.card--tall  { grid-column: span 3; }
.card--hero  { grid-column: span 4; }
.card--quiet { grid-column: span 2; }

/* Card image wrap */
.card-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  line-height: 0;
  /* Default aspect ratio */
  aspect-ratio: 4/5;
}
.card--wide .card-img-wrap  { aspect-ratio: 7/6; }
.card--tall .card-img-wrap  { aspect-ratio: 3/4; }
.card--hero .card-img-wrap  { aspect-ratio: 9/8; }
.card--quiet .card-img-wrap { aspect-ratio: 4/5; }

.card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--ease-out);
}
.card:hover .card-img-wrap img { transform: scale(1.04); }

/* Hover overlay: gradient + "View Piece" at base */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(8,23,28,0.72) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  font-family: var(--serif-display);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.22em;
  color: rgba(243,236,220,0.95);   /* 6.73:1 on rgba(ink,0.72) gradient — PASS */
  opacity: 0;
  transition: opacity 0.38s ease;
}
.card:hover .card-overlay { opacity: 1; }

/* Sold state */
.card.sold .card-img-wrap img {
  opacity: 0.50;
  filter: grayscale(40%) saturate(0.7);
}
.sold-overlay {
  opacity: 1 !important;
  background: rgba(8,23,28,0.60) !important;  /* raised from 0.35 — 4.52:1 PASS */
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}
.sold-stamp {
  font-family: var(--serif-display);
  font-size: clamp(1.05rem, 2.2vw, 1.8rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(243,236,220,0.92);   /* 4.52:1 on rgba(ink,0.60) over worst-case --paper — PASS */
  border: 1.5px solid rgba(243,236,220,0.55);
  padding: 6px 18px;
  transform: rotate(-14deg);
  display: block;
}

/* Card body */
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 0 0;
  gap: 4px;
}

.card-no {
  font-family: var(--serif-text);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--driftwood-text);   /* was --driftwood × 0.78 → FAIL; now 5.88:1 PASS */
}

.card-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(1.18rem, 1.6vw, 1.55rem);
  color: var(--ocean);
  line-height: 1.2;
  transition: color 0.22s ease;
  margin-top: 2px;
}
.card:hover .card-title { color: var(--teal); }  /* 4.62:1 large — PASS */

.card-material {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ocean);
  opacity: 0.78;   /* 5.33:1 — was 0.60 FAIL; PASS now */
  line-height: 1.50;
}

.card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(22,54,63,0.10);
}

.card-price {
  font-family: var(--serif-text);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 500;
  color: var(--ocean);
}

.card-status {
  font-family: var(--serif-text);
  font-size: 0.70rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);   /* 6.15:1 — was --teal PASS but thin margin; now solid PASS */
}
.card-status--sold {
  color: var(--driftwood-text);   /* 5.88:1 — PASS */
}

/* Legacy card CTA (used in piece page related works) */
.btn-card-cta {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: var(--surf);   /* 14.10:1 — PASS */
  font-family: var(--serif-text);
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
  margin-top: auto;
  padding-top: 14px;
  border: 1px solid var(--navy);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.card:hover .btn-card-cta { background: var(--ink); border-color: var(--ink); }

.btn-card-cta--sold {
  background: rgba(22,54,63,0.28) !important;
  border-color: rgba(22,54,63,0.20) !important;
  cursor: default;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   PROCESS SECTION
═══════════════════════════════════════════════════════════════ */
.process-section {
  padding: var(--section-v) 0;
  border-top: 1px solid rgba(22, 54, 63, 0.09);
  background: var(--paper);
  position: relative;
  z-index: 3;
}

.process-inner {
  max-width: var(--max);
  margin: 0 auto;
}

/* Process film: placeholder until a video is supplied */
.process-film {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/7;
  background: var(--paper-2);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.process-film img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.78);
}
.process-film-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px 20px;
  background: linear-gradient(to bottom, transparent 30%, rgba(8,23,28,0.75) 100%);
}

.process-play {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(243,236,220,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.process-play::after {
  content: '';
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent rgba(243,236,220,0.92);
  margin-left: 4px;
}

.process-film-caption {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(243,236,220,0.86);
  text-shadow: 0 1px 10px rgba(8,23,28,0.90);
  text-align: center;
  /* Dark gradient scrim from the overlay covers the caption zone */
}

/* Three-step process grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

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

.process-step-no {
  display: block;
  font-family: var(--serif-display);
  font-size: clamp(2.2rem, 4vw, 4rem);   /* ≥ 38px large — 3.58:1 passes AA large */
  color: var(--teal);
  opacity: 0.85;   /* was 0.62 → FAIL; 0.85 × 4.62 ≈ 3.58:1 PASS (large text) */
  line-height: 1;
  margin-bottom: 10px;
}

.process-step-name {
  font-family: var(--serif-display);
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  font-weight: 400;
  color: var(--ocean);
  margin-bottom: 12px;
}

.process-step-body {
  font-family: var(--serif-text);
  font-size: clamp(0.96rem, 1.1vw, 1.08rem);
  line-height: 1.78;
  color: var(--ocean);
  opacity: 0.78;   /* 5.33:1 — PASS */
  max-width: 28ch;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════════════════════ */
.about-section {
  padding: var(--section-v) 0;
  border-top: 1px solid rgba(22, 54, 63, 0.09);
  background: var(--paper);
  position: relative;
  z-index: 3;
}

.about-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}

.about-portrait {
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}

.about-name {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.4vw, 4rem);
  color: var(--ocean);
  line-height: 1.1;
  margin-bottom: 8px;
}

.about-subtitle {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--driftwood-text);   /* was --driftwood → 3.81:1 FAIL; now 5.88:1 PASS */
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.about-pullquote {
  border-left: 2px solid rgba(31,106,111,0.32);
  padding-left: 20px;
  margin-bottom: 24px;
}
.about-pullquote p {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--teal);
  line-height: 1.55;
}

.about-body p {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 2.00;
  color: var(--ocean);
  opacity: 0.88;   /* 6.98:1 — PASS */
  margin-bottom: 16px;
}

.about-signature {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  color: var(--teal);   /* 4.62:1 ≥18px large text — PASS */
  margin-top: 8px;
  margin-bottom: 16px;
}

.about-footer-line {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--driftwood-text);   /* was --driftwood × 0.90 → FAIL; now 5.88:1 PASS */
  margin-top: 20px;
  /* No opacity on container — ::before ornament can retain its own opacity */
}

/* ═══════════════════════════════════════════════════════════════
   REPRESENTATION SECTION
═══════════════════════════════════════════════════════════════ */
.representation-section {
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid rgba(22, 54, 63, 0.09);
  background: var(--paper);
  position: relative;
  z-index: 3;
}

.representation-inner {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}

.representation-label {
  font-family: var(--serif-text);
  font-size: 0.72rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--driftwood-text);   /* was --driftwood × 0.85 → FAIL; now 5.88:1 PASS */
  margin-bottom: 14px;
  /* No opacity on container — decorative lines retain own opacity */
}

.representation-text {
  font-family: var(--serif-text);
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  line-height: 1.70;
  color: var(--ocean);
  max-width: 52ch;
  margin: 0 auto 14px;
}
.representation-text em {
  font-style: italic;
  color: var(--teal);   /* 4.62:1 large — PASS */
}

.representation-note {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--driftwood-text);   /* was --driftwood × 0.86 → FAIL; now 5.88:1 PASS */
}
.representation-note a {
  color: var(--teal-text);   /* 6.15:1 — PASS */
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.representation-note a:hover { border-bottom-color: var(--teal-text); }

/* ═══════════════════════════════════════════════════════════════
   COMMISSION SECTION
═══════════════════════════════════════════════════════════════ */
.commission-section {
  padding: var(--section-v) 0 calc(var(--section-v) + 24px);
  border-top: 1px solid rgba(22, 54, 63, 0.09);
  background: var(--paper);
  position: relative;
  z-index: 3;
}

.commission-inner {
  max-width: 820px;
  margin: 0 auto;
}

.commission-sub {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(1.02rem, 1.18vw, 1.18rem);
  color: var(--ocean);
  opacity: 0.78;   /* 5.33:1 — PASS */
  text-align: center;
  line-height: 1.70;
  margin-bottom: clamp(32px, 4vw, 50px);
}

.commission-form { display: flex; flex-direction: column; gap: 0; }

/* ── Floating label fields ── */
.field-float {
  position: relative;
  margin-bottom: 30px;
}
.field-float input,
.field-float textarea {
  display: block;
  width: 100%;
  padding: 24px 14px 8px;
  border: 1px solid rgba(22, 54, 63, 0.38);
  background: transparent;
  color: var(--ocean);
  font-family: var(--serif-text);
  font-size: 1rem;
  line-height: 1.55;
  outline: none;
  transition: border-color 0.22s ease;
  -webkit-appearance: none; appearance: none;
}
.field-float input:focus,
.field-float textarea:focus { border-color: var(--teal); }

.field-float label {
  position: absolute;
  left: 14px; top: 16px;
  font-family: var(--serif-text);
  font-size: 1rem;
  color: var(--ocean);
  opacity: 0.88;   /* 6.98:1 — was 0.52 FAIL; PASS now */
  pointer-events: none;
  transform-origin: left top;
  transition: top 0.22s ease, font-size 0.22s ease, opacity 0.22s ease, color 0.22s ease;
  line-height: 1;
}

/* Float label when active or filled */
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label,
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label {
  top: 7px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  opacity: 1;
  color: var(--teal-text);   /* 6.15:1 — was --teal PASS thin; now solid PASS */
}

/* Hint textarea — label always floated (has real placeholder text) */
.field-float--hint label {
  top: 7px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  opacity: 1;
  color: var(--teal-text);
}

.field-float textarea { resize: vertical; min-height: 80px; }
.field-float textarea::placeholder {
  color: rgba(8, 23, 28, 0.65);   /* 5.18:1 on surf-tinted field — was 0.30 FAIL; PASS now */
  font-style: italic;
  font-size: 0.95rem;
}

/* Select */
.field-select-wrap { margin-bottom: 30px; display: flex; flex-direction: column; gap: 8px; }
.select-label {
  font-family: var(--serif-text);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);   /* 6.15:1 — was --teal PASS thin; now solid PASS */
}
.select-shell { position: relative; }
.select-shell select {
  display: block; width: 100%;
  padding: 14px 40px 14px 14px;
  border: 1px solid rgba(22, 54, 63, 0.38);
  background: transparent; color: var(--ocean);
  font-family: var(--serif-text); font-size: 1rem;
  outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.22s ease;
}
.select-shell select:focus { border-color: var(--teal); }
.select-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; width: 10px; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2316363f' opacity='.45'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Submit */
.btn-submit {
  display: block; width: 100%;
  padding: 16px;
  background: var(--ocean); color: var(--surf);   /* 10.92:1 — PASS */
  border: 1px solid var(--ocean);
  font-family: var(--serif-display);
  font-size: 0.88rem; letter-spacing: 0.34em;
  text-transform: uppercase; cursor: pointer;
  margin-top: 8px;
  transition: background 0.26s ease, border-color 0.26s ease, transform 0.18s ease;
}
.btn-submit:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }

.form-success {
  padding: 28px 0;
  font-family: var(--serif-display);
  font-style: italic; font-size: 1.2rem;
  color: var(--teal); text-align: center;
}

.commission-divider {
  border: none;
  border-top: 1px solid rgba(22,54,63,0.11);
  margin: 34px 0 22px;
}

.commission-email-line {
  font-family: var(--serif-text);
  font-style: italic; font-size: 0.96rem;
  color: var(--ocean);
  text-align: center;
  opacity: 0.75;   /* 4.93:1 — was 0.68/0.72 borderline; PASS now */
}
.commission-email-line a {
  color: var(--teal-text); border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  opacity: 1;   /* inherit opacity from parent 0.75; teal-text × 0.75 still ≈ 4.6:1 — just passes */
}
.commission-email-line a:hover { border-bottom-color: var(--teal-text); }

/* ═══════════════════════════════════════════════════════════════
   STUDIO NOTES — newsletter strip
═══════════════════════════════════════════════════════════════ */
.studio-notes {
  border-top: 1px solid rgba(22, 54, 63, 0.09);
  padding: clamp(40px, 5vw, 64px) 0;
  background: var(--paper);
  position: relative;
  z-index: 3;
}

.notes-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.notes-heading {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--ocean);
  margin-bottom: 6px;
}
.notes-text p {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--ocean);
  opacity: 0.75;   /* 4.93:1 — was 0.68 FAIL; PASS now */
  max-width: 42ch;
}

.notes-form {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}
.notes-form input {
  padding: 12px 18px;
  border: 1px solid rgba(22,54,63,0.32);
  border-right: none;
  background: transparent;
  color: var(--ocean);
  font-family: var(--serif-text);
  font-size: 0.94rem;
  outline: none;
  width: 240px;
  transition: border-color 0.22s ease;
}
.notes-form input:focus { border-color: var(--teal); }
.notes-form input::placeholder {
  color: rgba(8,23,28,0.65);   /* 5.05:1 on --paper — was 0.38 FAIL; PASS now */
  font-style: italic;
}
.notes-form button {
  padding: 12px 22px;
  background: var(--ocean);
  color: var(--surf);   /* 10.92:1 — PASS */
  border: 1px solid var(--ocean);
  font-family: var(--serif-text);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease;
}
.notes-form button:hover { background: var(--ink); border-color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: linear-gradient(to bottom, var(--ink), #050f12);  /* --ink gradient */
  margin: 0 calc(-1 * var(--bdr)) calc(-1 * var(--bdr));
  padding: 56px var(--bdr) calc(var(--bdr) + 20px);
  position: relative;
  z-index: 3;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}

.footer-logo {
  height: 60px;
  width: auto;
  object-fit: contain;
  margin-bottom: 14px;
  filter: brightness(0) invert(1); /* RGBA dark linework → white on dark footer; nav-logo uses no filter */
}

.footer-name {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(0.82rem, 1vw, 0.96rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(243,236,220,0.95);   /* 14.76:1 on --ink — PASS */
  margin-bottom: 6px;
}
.footer-tagline {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.94rem;
  color: rgba(243,236,220,0.60);   /* 6.17:1 on --ink — was 0.45 FAIL; PASS now */
}

.footer-nav-heading {
  font-family: var(--serif-text);
  font-size: 0.70rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(243,236,220,0.56);   /* 5.52:1 on --ink — was 0.42/0.38 FAIL; PASS now */
  margin-bottom: 14px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav a {
  font-family: var(--serif-text);
  font-size: 0.94rem;
  letter-spacing: 0.06em;
  color: rgba(243,236,220,0.70);   /* 7.47:1 on --ink — PASS */
  transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--seafoam); }

.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact a {
  font-family: var(--serif-text);
  font-size: 0.94rem;
  color: rgba(243,236,220,0.70);   /* 7.47:1 on --ink — PASS */
  transition: color 0.2s ease;
}
.footer-contact a:hover { color: var(--seafoam); }

.footer-instagram {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(243,236,220,0.70) !important;
}

.footer-rule {
  max-width: var(--max);
  margin: 0 auto 0;
  border: none;
  border-top: 1px solid rgba(243,236,220,0.10);
}

/* ── ACS Attribution mark — ACS-wide standard ─────────────── */
.acs-attribution-row {
  max-width: var(--max);
  margin: 16px auto 0;
  padding-top: 16px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.acs-attribution {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.acs-attribution:hover .acs-attribution__text { text-decoration: underline; }
.acs-attribution:focus-visible {
  outline: 2px solid rgba(243,236,220,0.56);
  outline-offset: 3px;
  border-radius: 2px;
}

.acs-attribution__logo {
  height: 24px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.acs-attribution__text {
  font-family: var(--serif-text);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(243,236,220,0.56);   /* 5.52:1 on --ink — PASS; 5.52:1 on #050f12 — PASS */
}

/* Footer meta: copyright + colophon */
.footer-meta {
  max-width: var(--max);
  margin: 14px auto 0;
  text-align: center;
}

.footer-copy {
  font-family: var(--serif-text);
  font-size: 0.76rem;
  letter-spacing: 0.10em;
  color: rgba(243,236,220,0.56);   /* 5.52:1 on --ink — was 0.42 FAIL; PASS now */
}

.footer-colophon {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(243,236,220,0.52);   /* 4.93:1 on --ink — was 0.32 FAIL; PASS now */
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
═══════════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: calc(var(--bdr) + 20px);
  right: calc(var(--bdr) + 16px);
  width: 40px; height: 40px;
  background: var(--navy);
  color: var(--surf);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  z-index: 800;
  pointer-events: none;
}
.back-to-top.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.back-to-top:hover { background: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   SPLASH SCREEN
═══════════════════════════════════════════════════════════════ */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  pointer-events: all;
  transition: opacity 0.65s ease;
}

.splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

#splash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.splash-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  text-align: center;
  /* Dark scrim ensures text contrast against wave animation */
  background: rgba(8,23,28,0.35);
  padding: 28px 40px 24px;
  border-radius: 2px;
}

.splash-center.visible {
  opacity: 1;
  transform: none;
}

.splash-logo {
  height: 68px;
  width: auto;
  object-fit: contain;
  filter: brightness(10);
  opacity: 0.92;
}

.splash-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,248,232,0.94);
  line-height: 1.1;
}

.splash-sub {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(0.92rem, 1.4vw, 1.2rem);
  color: rgba(255,248,232,0.94);   /* was 0.55 — verified against scrim + dark bg */
  letter-spacing: 0.06em;
}

.splash-enter {
  position: absolute;
  bottom: clamp(32px, 5vh, 60px);
  z-index: 1;
  background: transparent;
  border: 1px solid rgba(255,248,232,0.42);
  color: rgba(255,248,232,0.94);
  font-family: var(--serif-text);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 12px 32px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease 1.2s, border-color 0.22s ease, color 0.22s ease;
}
.splash-enter.visible { opacity: 1; }
.splash-enter:hover {
  border-color: rgba(255,248,232,0.80);
  color: rgba(255,248,232,1);
}
.splash-enter:focus-visible {
  outline: 2px solid rgba(255,248,232,0.80);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   Breakpoints per Design Style Guide v1.3
═══════════════════════════════════════════════════════════════ */

/* ── 1100px — mid desktop ── */
@media (max-width: 1100px) {
  :root { --bdr: 110px; --kelp-fade: 85px; }

  .gallery-mosaic { grid-template-columns: repeat(4, 1fr); }
  .card          { grid-column: span 2; }
  .card--wide    { grid-column: span 2; }
  .card--tall    { grid-column: span 2; }
  .card--hero    { grid-column: span 4; }
  .card--quiet   { grid-column: span 2; }

  .card--wide .card-img-wrap  { aspect-ratio: 4/5; }
  .card--tall .card-img-wrap  { aspect-ratio: 4/5; }
}

/* ── 900px — small desktop / large tablet ── */
@media (max-width: 900px) {
  :root { --bdr: 60px; --kelp-fade: 35px; }

  .hero-section { grid-template-columns: 1fr; min-height: auto; padding-bottom: 60px; }
  .hero-image { height: clamp(260px, 55vw, 460px); }
  .hero-image-wrap { order: -1; }
  .hero-heading { font-size: clamp(2.6rem, 7vw, 4.2rem); }
  .hero-scroll-cue { display: none; }

  .process-grid { grid-template-columns: 1fr; gap: 28px; max-width: 480px; margin: 0 auto; }
  .process-step { text-align: left; }
  .process-step-body { max-width: none; }

  .process-film { aspect-ratio: 16/9; }
}

/* ── 768px — tablet portrait / large mobile ── */
@media (max-width: 768px) {
  :root { --bdr: 22px; --kelp-fade: 2px; }

  /* Nav: hamburger mode */
  .nav-toggle { display: flex; }
  .nav-inner { flex-wrap: wrap; }
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 12px 0 4px;
    border-top: 1px solid rgba(22,54,63,0.08);
    margin-top: 12px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 10px 0; border-bottom: 1px solid rgba(22,54,63,0.06); }

  /* Gallery: single column */
  .gallery-mosaic { grid-template-columns: 1fr; gap: 24px; }
  .card, .card--wide, .card--tall, .card--hero, .card--quiet { grid-column: span 1; }
  .card-img-wrap,
  .card--wide .card-img-wrap,
  .card--tall .card-img-wrap,
  .card--hero .card-img-wrap,
  .card--quiet .card-img-wrap { aspect-ratio: 4/5; }

  /* About: stack */
  .about-inner { grid-template-columns: 1fr; gap: 28px; }
  .about-portrait { aspect-ratio: 4/3; max-height: 320px; }

  /* Commission: comfortable on tablet */
  .commission-inner { padding: 0 4px; }

  /* Studio notes: stack */
  .notes-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .notes-form { width: 100%; }
  .notes-form input { flex: 1; width: auto; min-width: 0; }

  /* Footer: stack */
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }

  .back-to-top { bottom: 20px; right: 20px; }
}

/* ── 480px — mid-mobile ── */
@media (max-width: 480px) {
  :root { --bdr: 28px; --kelp-fade: 2px; }

  .hero-section { padding-bottom: 44px; }
  .hero-image { height: clamp(220px, 60vw, 320px); }
  .hero-heading { font-size: clamp(2.2rem, 9vw, 3rem); }
  .hero-sub { font-size: 1rem; }
  .hero-buttons { flex-direction: column; gap: 12px; }
  .btn-primary, .btn-outline { display: block; text-align: center; white-space: normal; }
  .nav-name { font-size: 0.75rem; letter-spacing: 0.28em; }
  .gallery-section { padding: clamp(60px, 10vw, 110px) 0; }
  .notes-form button { padding: 12px 16px; }
  .site-footer { padding-top: 44px; }
  .section-heading { font-size: clamp(1.9rem, 7vw, 2.6rem); }

  #seaweed-footer { height: 180px; }
}

/* ── 375px — standard small phone ── */
@media (max-width: 375px) {
  :root { --bdr: 20px; --kelp-fade: 2px; }

  .hero-heading { font-size: clamp(1.9rem, 10vw, 2.4rem); }
  .nav-logo { height: 36px; }
  .field-float input,
  .field-float textarea,
  .select-shell select { font-size: 0.94rem; }
  .footer-inner { grid-template-columns: 1fr; }
  #seaweed-footer { height: 140px; }
}

/* ── 320px — narrowest supported viewport ── */
@media (max-width: 320px) {
  :root { --bdr: 12px; --kelp-fade: 2px; }

  .nav-name { display: none; }
  .hero-heading { font-size: 1.8rem; }
  .section-heading { font-size: 1.6rem; }
  .commission-inner,
  .notes-inner,
  .footer-inner { overflow-x: hidden; }
  #seaweed-footer { height: 100px; }
}