/* ============================================================
   BP PRODUCTIONS — STYLESHEET
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  --ink:        #15100B;
  --ink-soft:   #221A12;
  --ivory:      #F4EFE4;
  --ivory-dim:  rgba(244, 239, 228, 0.66);
  --ivory-faint:rgba(244, 239, 228, 0.34);
  --brass:      #C9A063;
  --brass-lit:  #E0BE86;
  --ember:      #9E5A34;


  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --shell:   1160px;
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --gap:     clamp(2.5rem, 7vw, 6rem);

  --radius:  8px;
  --shadow:  0 24px 60px rgba(0, 0, 0, 0.42);
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset & base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ivory);
  background-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brass-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  padding: 0.85rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  border-radius: 3px;
  transition: top 0.3s var(--ease);
}

.skip-link:focus { top: 1rem; }

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

/* ---------- 3. Fixed background ---------- */

.backdrop,
.backdrop-veil {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.backdrop {
  z-index: -2;
  overflow: hidden;
  background: var(--ink);
}

/* Two stacked layers crossfade into each other. Both opacity and
   transform are GPU-composited, which is what keeps the drift
   perfectly smooth — no pixel snapping, unlike a baked video. */
.backdrop-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
  transform: scale(1.04);
  transition: opacity 2.4s linear;
  backface-visibility: hidden;
  /* lifts the photographs so the page reads bright and open
     rather than sombre */
  filter: brightness(0.96) saturate(1.04);
}

.backdrop-frame.is-active {
  opacity: 1;
  animation: drift 13s linear forwards;
}

/* Keeps the outgoing photo drifting while it fades out. Without
   this the transform resets the instant the class is dropped and
   you see a jump underneath the incoming photo. */
.backdrop-frame.is-active.is-leaving { opacity: 0; }

@keyframes drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(0, -1.2%, 0); }
}

.backdrop-frame.is-active.drift-alt {
  animation-name: drift-alt;
}

@keyframes drift-alt {
  from { transform: scale(1.11) translate3d(0, -1%, 0); }
  to   { transform: scale(1.02) translate3d(0, 0.6%, 0); }
}

.backdrop-veil {
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      rgba(28, 22, 16, 0.66) 0%,
      rgba(28, 22, 16, 0.44) 26%,
      rgba(28, 22, 16, 0.38) 52%,
      rgba(28, 22, 16, 0.54) 78%,
      rgba(28, 22, 16, 0.70) 100%
    );
}

/* ---------- 4. Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.75rem, 8vw, 5.75rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.7;
  color: var(--ivory-dim);
}

/* Eyebrow — the small tracked label used above section headings */
.eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.1rem;
}

.script {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
}

/* ---------- 5. Layout ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-wide { max-width: 1500px; }

.stack > * + * { margin-top: var(--gap); }

main { padding-bottom: var(--gap); }

/* ---------- 6. Header & navigation ---------- */

/* No bar, no background, no border — the brand and nav simply float
   over the photography. A soft text shadow does the legibility work
   that a solid strip would otherwise do. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(14, 10, 7, 0.72), 0 2px 22px rgba(14, 10, 7, 0.85);
}

.site-header a,
.site-header button { pointer-events: auto; }

.site-header .shell {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1560px;
}

.brand {
  display: block;
  line-height: 1;
}

.brand-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.9vw, 2.8rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ivory);
}

.brand-sub {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, 0.72);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  position: relative;
  display: inline-block;
  padding: 0.3rem 0;
  font-size: clamp(0.85rem, 0.95vw, 1.02rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: color 0.3s var(--ease);
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--ivory);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--ivory); }

.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 1px;
  background: var(--ivory);
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}

.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7. Panels (floating fading glass) ---------- */

/* A centred card rather than a full-width band. The glass lives on a
   masked pseudo-element so the edges dissolve without fading the text
   sitting on top of it. */
.panel {
  position: relative;
  width: 100%;
  max-width: 1020px;
  margin-inline: auto;
  padding: clamp(2.25rem, 5.5vw, 4.25rem);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 20px;
  background: rgba(26, 20, 14, 0.34);
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  -webkit-mask-image:
    radial-gradient(115% 135% at 50% 50%, #000 46%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
  mask-image:
    radial-gradient(115% 135% at 50% 50%, #000 46%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
}

/* At a low blur the photograph stays sharp behind the glass, so the
   type carries its own shadow. This is what keeps text readable when a
   bright frame drifts past, without having to dull the picture. */
.panel h2,
.panel h3,
.panel p,
.panel .eyebrow,
.panel blockquote,
.panel .stat-figure,
.panel .stat-label {
  text-shadow: 0 1px 16px rgba(18, 13, 9, 0.75);
}

/* A narrower measure for reading-heavy panels. */
.panel-narrow {
  max-width: 760px;
}

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

/* For panels holding only a heading — keeps the bubble in proportion. */
.panel-slim { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.panel-slim h2 { margin-bottom: 0; }

/* Occasionally a panel should have no glass at all — just content
   floating directly on the photography. */
.panel-bare::before { display: none; }

/* ---------- 8. Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 120px 0 clamp(1.5rem, 4vh, 3rem);
  text-align: center;
}

.hero-mark {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.75rem;
}

.hero h1 { margin-bottom: 0.35em; }
.hero h1 em { font-style: italic; color: var(--brass-lit); }

.hero-rule {
  width: 0;
  height: 2px;
  margin: 1.6rem auto;
  background: linear-gradient(to right, transparent, var(--brass-lit), transparent);
  animation: draw 1.6s 0.5s var(--ease) forwards;
}

@keyframes draw { to { width: min(560px, 82%); } }

/* Same rule, already drawn — for use inside sections rather than the hero. */
.hero-rule-static {
  width: min(120px, 30%);
  margin: 1.75rem auto 2rem;
  animation: none;
}

.hero-tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.9vw, 2.1rem);
  line-height: 1.3;
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(14, 10, 7, 0.65), 0 2px 24px rgba(14, 10, 7, 0.8);
  max-width: min(92vw, 44ch);
  margin-inline: auto;
  margin-bottom: 2.25rem;
  text-wrap: balance;
}

/* ---------- Scroll cue ---------- */

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: auto;
  padding-top: clamp(1.25rem, 3vh, 2.25rem);
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(14, 10, 7, 0.7), 0 2px 20px rgba(14, 10, 7, 0.8);
  transition: color 0.3s var(--ease);
}

.hero-scroll:hover { color: var(--brass-lit); }

.hero-scroll-word {
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* The track is a faint line; the dot travels down it and fades out,
   which reads as "keep going" without needing an arrow. */
.scroll-track {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(
    to bottom,
    rgba(244, 239, 228, 0.42),
    rgba(244, 239, 228, 0.06)
  );
  overflow: visible;
}

.scroll-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--brass-lit);
  box-shadow: 0 0 8px rgba(224, 190, 134, 0.85);
  animation: scroll-fall 3s linear infinite;
}

@keyframes scroll-fall {
  0%   { transform: translateY(-10px); opacity: 0; }
  15%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}

/* Matching rails either side of the hero. Purely decorative, so they
   are hidden from screen readers and dropped on small screens where
   there isn't room beside the text. */
/* One variable drives both the rail height and how far the dot falls,
   so they can never drift out of sync. */
.scroll-rail {
  --rail-h: clamp(180px, 30vh, 320px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}

.scroll-rail-left {
  left: calc(50% - 50vw + clamp(2rem, 7vw, 7rem));
}

.scroll-rail-right {
  right: calc(50% - 50vw + clamp(2rem, 7vw, 7rem));
}

.scroll-rail .scroll-track {
  width: 2px;
  height: var(--rail-h);
  background: linear-gradient(
    to bottom,
    rgba(244, 239, 228, 0.10),
    rgba(244, 239, 228, 0.55) 30%,
    rgba(244, 239, 228, 0.55) 70%,
    rgba(244, 239, 228, 0.10)
  );
  border-radius: 2px;
}

.scroll-rail .scroll-dot {
  width: 10px;
  height: 10px;
  margin-left: -5px;
  box-shadow: 0 0 16px rgba(224, 190, 134, 0.95),
              0 0 34px rgba(224, 190, 134, 0.55);
}

/* Same duration and no delay on any of them, so the three dots
   fall in step rather than at staggered times. */

@keyframes scroll-fall-tall {
  0%   { transform: translateY(-14px); opacity: 0; }
  15%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(var(--rail-h, 260px)); opacity: 0; }
}

.scroll-rail .scroll-dot { animation: scroll-fall-tall 3s linear infinite; }

@media (max-width: 900px) {
  .scroll-rail { display: none; }
}

/* ---------- 9. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--brass);
  border-radius: 2px;
  color: var(--ivory);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}

.btn:hover { background: var(--brass); color: var(--ink); }

.btn-solid { background: var(--brass); color: var(--ink); }
.btn-solid:hover { background: var(--brass-lit); border-color: var(--brass-lit); }

.btn-quiet { border-color: rgba(244, 239, 228, 0.28); }
.btn-quiet:hover { background: rgba(244, 239, 228, 0.1); color: var(--ivory); border-color: var(--ivory); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.btn-row-left { justify-content: flex-start; }

/* ---------- 10. Contact-sheet grid ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.75rem;
}

.filter {
  position: relative;
  padding: 0.7rem 1.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(26, 20, 14, 0.55);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(244, 239, 228, 0.16);
  border-radius: 999px;
  text-shadow: 0 1px 3px rgba(14, 10, 7, 0.7);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), transform 0.3s var(--ease);
}

.filter:hover {
  background: rgba(26, 20, 14, 0.72);
  border-color: var(--brass);
  transform: translateY(-1px);
}

.filter[aria-pressed="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Shared fallback grid. */
.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 26vw, 340px), 1fr));
  gap: 1.25rem;
}

/* Columns are built in JS and cards dealt across them, so the first
   prints land along the top row rather than down the left side. Each
   card keeps its natural height, so nothing is cropped. */
#print-wall {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.4vw, 1.5rem);
}

.wall-column {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.4vw, 1.5rem);
  flex: 1 1 0;
  min-width: 0;
}

#print-wall .print-card { width: 100%; }

/* The gallery is a masonry collage. Each photograph keeps its own
   proportions — landscape stays landscape, portrait stays portrait —
   and the columns absorb the uneven heights. */
#sheet {
  display: block;
  column-count: 3;
  column-gap: clamp(0.65rem, 1.1vw, 1rem);
}

@media (min-width: 1600px) { #sheet { column-count: 4; } }
@media (max-width: 1080px) { #sheet { column-count: 2; } }
@media (max-width: 600px)  { #sheet { column-count: 1; } }

#sheet .frame {
  width: 100%;
  margin-bottom: clamp(0.65rem, 1.1vw, 1rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* [hidden] must win over the display below, or filtering silently
   does nothing. This has to come first. */
.frame[hidden] { display: none !important; }

.frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ink-soft);
  cursor: zoom-in;
  box-shadow: 0 14px 34px rgba(14, 10, 7, 0.30);
  transition: box-shadow 0.6s var(--ease), transform 0.6s var(--ease);
}

.frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(14, 10, 7, 0.42);
}

/* No fixed aspect ratio and no cropping — the photograph's own
   shape decides the height. */
.frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--ease);
}

.frame:hover img { transform: scale(1.03); }

/* the contact-sheet label that sits over each frame */
.frame-label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(21, 16, 11, 0.86), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.frame:hover .frame-label,
.frame:focus-visible .frame-label { opacity: 1; transform: none; }

.frame-no {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--brass);
  white-space: nowrap;
}

.frame-cap {
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ivory);
  text-align: right;
}

/* ---------- 11. Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(9, 7, 5, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox.is-open { display: grid; }

.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 3px;
  box-shadow: var(--shadow);
}

.lightbox-mount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(244, 239, 228, 0.16);
}

.lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 1100px; }

.lightbox-no {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}

.lightbox-cap {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  font-size: 1.5rem;
  color: var(--ivory-dim);
  border: 1px solid rgba(244, 239, 228, 0.2);
  border-radius: 50%;
  transition: all 0.3s var(--ease);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { color: var(--ink); background: var(--brass); border-color: var(--brass); }

.lightbox-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox-prev  { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ---------- 12. Feature rows (home page) ---------- */

.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.trio img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(14, 10, 7, 0.34);
  transition: transform 0.7s var(--ease);
}

.trio img:hover { transform: translateY(-6px); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
  text-align: center;
}

.stat-figure {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--brass);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

.quote {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.35;
  color: var(--ivory);
}

.quote cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}

.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 4.5vw, 3.5rem);
  text-align: center;
  max-width: 980px;
  margin-inline: auto;
}

.voice { margin: 0; }

.voice p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.55;
  color: var(--ivory);
}

.voice footer {
  margin-top: 1.1rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- 13. Split (about page) ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.75rem, 4.5vw, 3.5rem);
  align-items: center;
}

/* Text column reads better slightly narrower than the photo column. */
@media (min-width: 900px) {
  .split { grid-template-columns: 0.9fr 1.1fr; }
}

.split-portrait {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.split-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- 14. Prints page ---------- */

.print-card {
  overflow: hidden;
  border-radius: 6px;
  background: rgba(26, 20, 14, 0.30);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid rgba(244, 239, 228, 0.10);
  display: flex;
  flex-direction: column;
}

/* No forced aspect ratio: these are mostly wide seascapes and a portrait
   crop would cut the composition in half. */
.print-card > img { display: block; width: 100%; height: auto; }

.print-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
  flex: 1;
}

.print-title {
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0;
}

.print-meta {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

.print-body .btn { margin-top: auto; align-self: flex-start; }


/* ---------- 14b. Print product view ---------- */

.print-card {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.print-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(14, 10, 7, 0.42);
}

.print-shot { position: relative; overflow: hidden; }

.print-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s var(--ease);
}

.print-card:hover .print-shot img { transform: scale(1.03); }

.print-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass-lit);
  border-radius: 999px;
}

.print-price {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  color: var(--ivory);
}

/* --- the overlay: a gallery room ---
   Deliberately light, unlike the rest of the site. A white wall is
   what galleries use so the work is the only colour present. The
   brass accent carries the brand through. */

.product-view {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(18, 13, 9, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
}

.product-view.is-open { display: grid; }

.pv-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  width: 100%;
  max-width: 1180px;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  color: #241C15;
  background: #FBF8F3;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 40px 90px rgba(10, 7, 5, 0.5);
}

.pv-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  font-size: 1.35rem;
  color: #6B5C4C;
  background: rgba(36, 28, 21, 0.05);
  border: 1px solid rgba(36, 28, 21, 0.12);
  border-radius: 50%;
  transition: all 0.3s var(--ease);
}

.pv-close:hover { color: #FBF8F3; background: #241C15; border-color: #241C15; }

.pv-media { min-width: 0; }

.pv-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: #F2EDE5;
  border-radius: 6px;
  overflow: hidden;
}

.pv-stage img {
  width: auto;
  max-width: 100%;
  max-height: 66vh;
  object-fit: contain;
  border-radius: 2px;
}

.pv-prev, .pv-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  font-size: 1.3rem;
  color: #241C15;
  background: rgba(251, 248, 243, 0.9);
  border: 1px solid rgba(36, 28, 21, 0.1);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(10, 7, 5, 0.12);
  transition: all 0.3s var(--ease);
}

.pv-prev { left: 0.85rem; }
.pv-next { right: 0.85rem; }

.pv-prev:hover, .pv-next:hover { color: #FBF8F3; background: #241C15; border-color: #241C15; }

.pv-count {
  position: absolute;
  bottom: 0.85rem;
  right: 0.95rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: #6B5C4C;
  background: rgba(251, 248, 243, 0.9);
  border-radius: 999px;
}

.pv-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.pv-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  background: #F2EDE5;
  border: 1px solid rgba(36, 28, 21, 0.12);
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}

.pv-thumb { position: relative; }

.pv-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* size label on thumbnails that show a specific size on a wall */
.pv-thumb[data-size-tag]::after {
  content: attr(data-size-tag);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1px 0 2px;
  font-family: var(--body);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-align: center;
  color: #FBF8F3;
  background: rgba(27, 20, 14, 0.78);
}
.pv-thumb:hover { opacity: 0.9; }

.pv-thumb[aria-current="true"] {
  opacity: 1;
  border-color: var(--ember);
  box-shadow: 0 0 0 1px var(--ember);
}

/* --- info column --- */

.pv-info { display: flex; flex-direction: column; }

.pv-place {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.7rem;
}

.pv-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: #1B140E;
  margin-bottom: 1.2rem;
}

.pv-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.85rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(36, 28, 21, 0.12);
}

.pv-price {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1;
  color: #1B140E;
}

.pv-price-note { font-size: 0.78rem; color: #8A7A68; }

.pv-label {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8A7A68;
  margin-bottom: 0.85rem;
}

.pv-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0.55rem;
  margin-bottom: 1.85rem;
}

.pv-size {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  text-align: left;
  color: #241C15;
  background: transparent;
  border: 1px solid rgba(36, 28, 21, 0.18);
  border-radius: 3px;
  transition: all 0.22s var(--ease);
}

.pv-size:hover { border-color: #241C15; }

.pv-size[aria-pressed="true"] {
  background: #241C15;
  border-color: #241C15;
  color: #FBF8F3;
}

.pv-size-label { font-size: 0.95rem; letter-spacing: 0.05em; }
.pv-size-detail { font-size: 0.7rem; opacity: 0.7; }

.pv-finish {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.95rem;
}

.pv-finish button {
  padding: 0.7rem 1.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: #241C15;
  background: transparent;
  border: 1px solid rgba(36, 28, 21, 0.18);
  border-radius: 3px;
  transition: all 0.22s var(--ease);
}

.pv-finish button:hover:not(:disabled) { border-color: #241C15; }

.pv-finish button[aria-pressed="true"] {
  background: #241C15;
  border-color: #241C15;
  color: #FBF8F3;
}

.pv-finish button:disabled { opacity: 0.3; cursor: not-allowed; }

/* The one strong colour in the room, so the eye lands on it. */
.pv-cta {
  width: 100%;
  color: #FBF8F3;
  background: var(--ember);
  border-color: var(--ember);
}

.pv-cta:hover {
  color: #FBF8F3;
  background: #8A4E2C;
  border-color: #8A4E2C;
}

.pv-notes {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.65;
  color: #8A7A68;
}

.pv-notes li { padding-left: 1rem; position: relative; margin-bottom: 0.35rem; }
.pv-notes li::before { content: "·"; position: absolute; left: 0.25rem; color: var(--ember); }

@media (max-width: 880px) {
  .pv-panel { grid-template-columns: 1fr; }
  .pv-stage img { max-height: 44vh; }
}

/* ---------- 15. Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

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

.detail-list li + li { margin-top: 1.6rem; }

.detail-list dt,
.detail-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.35rem;
}

.detail-value {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--ivory);
  transition: color 0.3s var(--ease);
}

a.detail-value:hover { color: var(--brass-lit); }

/* the secondary "Compose in Gmail" line under the email address */
.detail-alt {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--ivory-faint);
}

.detail-alt a {
  color: var(--brass);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.detail-alt a:hover { border-bottom-color: var(--brass); }

.field { margin-bottom: 1.4rem; }

.field label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 0.55rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ivory);
  background: rgba(244, 239, 228, 0.06);
  border: 1px solid rgba(244, 239, 228, 0.18);
  border-radius: 3px;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.field textarea { min-height: 150px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: rgba(244, 239, 228, 0.09);
}

.field select option { background: var(--ink); color: var(--ivory); }

.form-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--ivory-faint);
}

.form-status {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  border-radius: 3px;
  border: 1px solid var(--brass);
  background: rgba(201, 160, 99, 0.12);
  display: none;
}

.form-status.is-shown { display: block; }

/* ---------- 16. Footer ---------- */

.site-footer {
  margin-top: var(--gap);
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 5vw, 4rem);
  background: linear-gradient(to bottom, transparent, rgba(18, 13, 9, 0.68));
  text-align: center;
  text-shadow: 0 1px 3px rgba(14, 10, 7, 0.6), 0 2px 20px rgba(14, 10, 7, 0.75);
}

.site-footer .brand { display: inline-block; }

.site-footer .brand-name {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  color: var(--ivory);
}

.site-footer .brand-sub {
  margin-top: 0.9rem;
  font-size: clamp(0.8rem, 1.3vw, 1.05rem);
  letter-spacing: 0.4em;
  color: var(--ivory);
}

.footer-tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  color: var(--ivory-dim);
  margin: 1.4rem 0 2.4rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-bottom: 2.4rem;
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
}

.footer-links a {
  position: relative;
  padding-bottom: 0.3rem;
  transition: color 0.3s var(--ease);
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brass-lit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.footer-links a:hover { color: var(--brass-lit); }
.footer-links a:hover::after { transform: scaleX(1); }

.footer-fine {
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  letter-spacing: 0.1em;
  color: var(--ivory-dim);
}

/* ---------- 17. Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 18. Responsive ---------- */

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: 92px 0 auto 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(20, 15, 10, 0.88);
    backdrop-filter: blur(28px) saturate(125%);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
    border-bottom: 1px solid rgba(244, 239, 228, 0.1);
    transition: max-height 0.45s var(--ease);
  }

  .site-nav.is-open { max-height: 420px; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1.5rem;
  }

  .nav-list a {
    padding: 0.95rem var(--gutter);
    font-size: 0.85rem;
  }

  .nav-list a::after { display: none; }

  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; }

  .frame-label { opacity: 1; transform: none; }
}

/* ---------- 19. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .hero-rule { width: min(560px, 82%); }
  .scroll-dot { display: none; }
}

/* ---------- 20. Print ---------- */

@media print {
  .site-header, .site-footer, .backdrop, .backdrop-veil, .lightbox { display: none !important; }
  body { color: #000; background: #fff; }
  .panel { border: 1px solid #ccc; background: none; box-shadow: none; }
}