:root {
  --bg: #0b0b0c;
  --bg-raised: #111113;
  --text: #f2f0ed;
  --text-muted: #9a9896;
  --accent: #c9a227;
  --rule: rgba(242, 240, 237, 0.1);
  --header-h: 4rem;
  --fade: 700ms;
  --measure: 65ch;

  /* Mat thickness around each photo. The single knob for how big the photo is:
     lower it and the photo grows, raise it and the frame does. */
  --frame: clamp(8px, 5vmin, 60px);
  --frame-color: #ffffff;
  /* Breathing room between the frame and the edge of the screen. */
  --edge: clamp(10px, 2.5vmin, 28px);
  /* Reserved for the gallery controls, subtracted from the photo's height budget. */
  --controls-h: 44px;
  --controls-gap: clamp(0.6rem, 2vh, 1.4rem);
}

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

html {
  scroll-behavior: smooth;
  /* Sections reserve their own room for the fixed header, so anchors land flush at
     the top of the viewport. Adding scroll padding here would double the offset and
     push the bottom of the gallery frame off-screen. */
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  background: var(--bg-raised);
  color: var(--text);
  text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  padding-inline: clamp(1rem, 4vw, 3rem);
  background: rgba(11, 11, 12, 0.4);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  white-space: nowrap;
  text-decoration: none;
  font-size: clamp(0.7rem, 0.62rem + 0.4vw, 0.85rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}
.wordmark__second {
  font-weight: 300;
  color: var(--text-muted);
}

.site-header nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.15rem;
  font-size: clamp(0.68rem, 0.62rem + 0.3vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.site-header nav a:hover { color: var(--text); }

/* The second half of the wordmark is the first thing to go when space is scarce. */
@media (max-width: 420px) {
  .wordmark__second { display: none; }
}

/* ---------- opening statement ---------- */

.intro {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + clamp(3rem, 9vh, 5.5rem))
           clamp(1.25rem, 6vw, 4rem)
           clamp(4.5rem, 11vh, 7rem);
}

@supports not (height: 100svh) {
  .intro { min-height: 100vh; }
}

.intro__inner { max-width: var(--measure); }

.intro .lede {
  margin-bottom: 2rem;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.35rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

.intro p:not(.lede) { color: var(--text-muted); }

/* A quiet hint that the photographs are further down. */
.scroll-cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.scroll-cue span {
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, var(--text-muted));
  transition: height 250ms ease, background 250ms ease;
}
.scroll-cue:hover span {
  height: 38px;
  background: linear-gradient(to bottom, transparent, var(--text));
}

/* ---------- section divider ---------- */

.divider {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3.5vw, 2.5rem);
  max-width: 78rem;
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 6vw, 4rem) clamp(2.5rem, 7vh, 4.5rem);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.divider span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* balances the trailing letter-space */
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- hero slideshow ---------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

/* Row 1 holds both frames stacked in a single cell; row 2 holds the controls. The
   top padding keeps everything clear of the fixed header. */
.hero__stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  row-gap: var(--controls-gap);
  padding: calc(var(--header-h) + var(--edge)) var(--edge) var(--edge);
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero__stage.is-ready { opacity: 1; }

.hero__frame {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 100%;
  border: var(--frame) solid var(--frame-color);
  background: var(--frame-color);
  line-height: 0; /* no descender gap between the photo and the mat */
  opacity: 0;
  transition: opacity var(--fade) ease-in-out;
}
.hero__frame.is-active { opacity: 1; }

/* width/height auto keeps the true aspect ratio, so the frame shrink-wraps the
   photo and nothing is ever cropped. The max-* pair is what bounds it. */
.hero__frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - var(--header-h) - (2 * var(--edge)) - (2 * var(--frame))
                   - var(--controls-h) - var(--controls-gap));
}

@supports not (height: 100svh) {
  .hero__frame img {
    max-height: calc(100vh - var(--header-h) - (2 * var(--edge)) - (2 * var(--frame))
                     - var(--controls-h) - var(--controls-gap));
  }
}

/* ---------- gallery controls ---------- */

.hero__controls {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 1.25rem);
  height: var(--controls-h);
}

.control {
  appearance: none;
  background: none;
  border: 0;
  min-height: 44px;
  padding-inline: clamp(0.5rem, 1.5vw, 1rem);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 200ms ease;
}
.control:hover:not(:disabled) { color: var(--text); }
.control:disabled { opacity: 0.3; cursor: default; }

/* Fixed width so the row doesn't shift when the label flips to Play. */
.control--toggle { min-width: 7em; }

/* On a phone a landscape photo is limited by screen width, so every pixel the mat
   takes comes straight out of the picture. Keep the surrounding gutter tight. */
@media (max-width: 600px) {
  :root { --edge: 8px; }
}

/* ---------- content sections ---------- */

.panel {
  max-width: 78rem;
  margin-inline: auto;
  padding: calc(var(--header-h) + clamp(2rem, 7vh, 5rem))
           clamp(1.25rem, 6vw, 4rem)
           clamp(4rem, 11vh, 8.5rem);
  border-top: 1px solid var(--rule);
}

.section-label {
  margin: 0 0 1.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.panel p {
  max-width: var(--measure);
  margin: 0 0 1.25rem;
}
.panel p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.4;
  font-weight: 300;
}

.contact-email {
  margin-top: 2rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
}
.contact-email a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.5rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  transition: color 200ms ease;
}
.contact-email a:hover { color: var(--accent); }

.site-footer {
  padding: 2.5rem clamp(1.25rem, 6vw, 4rem) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.site-footer p { margin: 0; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__stage,
  .hero__frame,
  .scroll-cue span,
  .control,
  .skip-link { transition: none; }
}