/* ─────────────────────────────────────────────────────────────
   Kirby — a portfolio

   Alignment system (apply consistently; no one-off exceptions):

   SPREADS are left-aligned. Anything with a text column: page heroes on
   Home / Gallery / Film, every gallery entry, the film stage. Captions and metadata under a spread's image align left too.

   PLATES are centered. Sections that stand alone on the page's center axis
   with no column beside them: the pull quote, the About title + portrait +
   credential, the 404. Captions inside a plate are centered.

   Metadata rows: inline with dots beside the image on desktop; spread across
   the rule (no dots) on single-column tablets; stacked on phones.
   ───────────────────────────────────────────────────────────── */

:root {
  --ink: #1c1a16;
  --ink-soft: #4a4640;
  --ink-faint: #6f6a62;      /* 4.7:1 on paper; still a whisper */
  --paper: #f5efe6;
  --paper-warm: #ede4d4;
  --rule: #d9cfbd;
  --accent: #c2873b;       /* warm honey, pulled from the grad shot */
  --accent-deep: #8a5a1f;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Apple Garamond", Garamond, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color .2s ease, color .2s ease;
}
a:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

/* ── Layout ─────────────────────────────────────────────────── */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }

/* ── Header ─────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  position: sticky;
  top: 0;
  background: rgba(245, 239, 230, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  z-index: 10;
}

.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.01em;
  border: 0;
  color: var(--ink);
}
.logo .dot { color: var(--accent-deep); }

nav.primary {
  display: flex;
  gap: 26px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
nav.primary a {
  border: 0;
  color: var(--ink-soft);
  /* Generous tap target without changing the visual: padding offset by negative margin */
  padding: 12px 2px;
  margin: -12px -2px;
  position: relative;
}
nav.primary a::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 6px;
  height: 1px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
nav.primary a:hover,
nav.primary a[aria-current="page"] { color: var(--ink); }
nav.primary a:hover::after,
nav.primary a[aria-current="page"]::after { transform: scaleX(1); }

/* ── Hero ───────────────────────────────────────────────────── */

.hero { padding: 80px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow::before {
  content: "";
  width: 36px; height: 1px;
  background: var(--ink-faint);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 7vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent-deep);
}

.hero p.lede {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 46ch;
}

.hero-meta {
  display: flex;
  gap: 28px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero-meta span strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 6px;
}

.hero-figure {
  position: relative;
  margin: 0;   /* no UA figure margin: images span their column like every other figure */
}
.hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 30px 60px -20px rgba(28, 26, 22, 0.35);
}
.hero-figure figcaption {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
  text-align: left;   /* spread: captions follow the text axis */
}

/* ── Section heading ────────────────────────────────────────── */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  margin: 80px 0 48px;
}
.section-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  margin: 0;
  letter-spacing: -0.005em;
}
.section-head .kicker {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Editorial gallery ──────────────────────────────────────── */

.shoots {
  display: grid;
  gap: 96px;
  padding-bottom: 96px;
}

.shoot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  scroll-margin-top: 96px;
}
.shoot:nth-child(even) .shoot-figure { order: 2; }


.shoot-figure {
  position: relative;
  margin: 0;   /* no UA figure margin: images span their column like every other figure */
}
.shoot-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 24px 50px -22px rgba(28, 26, 22, 0.4);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.shoot:hover .shoot-figure img { transform: translateY(-4px); }

/* Landscape documents (the ID card): show the whole thing, no portrait crop */
.shoot-figure--card { align-self: center; }
.shoot-figure--card img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 8px;
}

.shoot-number {
  position: absolute;
  top: -18px;
  left: -10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.shoot-body { padding: 8px 0; }

.shoot-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.shoot-eyebrow .swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--shoot-accent, var(--accent));
  display: inline-block;
}

.shoot h3,
.film-stage h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.shoot h3 em,
.film-stage h3 em { font-style: italic; }

.shoot p,
.film-stage p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 46ch;
}

.shoot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.shoot-meta span::before { content: "·"; margin-right: 14px; color: var(--rule); }
.shoot-meta span:first-child::before { content: none; }

.more {
  display: inline-block;
  margin-top: 22px;
  border: 0;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.more span { display: inline-block; transition: transform .25s ease; }
.more:hover span { transform: translateX(4px); }

/* Per-shoot accent (set via inline style or class) */
.shoot[data-accent] .shoot-eyebrow { color: var(--shoot-accent, var(--accent-deep)); }

/* ── Pull quote ─────────────────────────────────────────────── */

.pullquote {
  margin: 80px auto;
  padding: 56px 32px;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* When the pull quote closes the page, let the footer's rule be its bottom rule */
main > .pullquote:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
.pullquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 auto;
  max-width: 22ch;
}
.pullquote cite {
  display: block;
  margin-top: 22px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Strip / thumb grid (home teaser) ───────────────────────── */

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-bottom: 64px;   /* + the pull quote's 80px margin = the hero→section rhythm (144px) */
}
.strip a {
  border: 0;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  aspect-ratio: 4/5;
}
.strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease;
  filter: saturate(0.95);
}
.strip a:hover img { transform: scale(1.04); filter: saturate(1.1); }
.strip a::after {
  content: attr(data-label);
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.strip a:hover::after { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .strip a::after { opacity: 1; transform: none; }
}

/* ── Film ───────────────────────────────────────────────────── */

.film-poster {
  border: 0;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.film-poster::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 22px no-repeat,
    rgba(28, 26, 22, 0.28);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
  transition: transform .3s ease, background-color .3s ease;
  pointer-events: none;
}
.film-poster:hover::before { transform: scale(1.06); }
.film-poster::after {
  content: attr(data-runtime);
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  pointer-events: none;
}

.film-stage {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 64px;
  align-items: start;
  padding: 24px 0 64px;
}
.film-figure { margin: 0; }
.film-figure video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #1c1a16;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 30px 60px -20px rgba(28, 26, 22, 0.35);
}
.film-figure figcaption {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
  text-align: left;   /* spread: captions follow the text axis */
}
.film-stage .shoot-body { padding-top: 8px; }
.film-stage .shoot-meta { margin-top: 4px; }

.stills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-bottom: 96px;
}
.stills figure { margin: 0; }
.stills img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 18px 40px -22px rgba(28, 26, 22, 0.4);
}
.stills figcaption {
  margin-top: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
}

/* ── About page ─────────────────────────────────────────────── */

.about-hero {
  padding: 80px 0 40px;
  text-align: center;
}
.about-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 1;
  margin: 0 0 18px;
}
.about-hero h1 em { font-style: italic; color: var(--accent-deep); }
.about-hero .dateline {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.about-portrait {
  margin: 40px auto 56px;
  max-width: 604px;      /* 540px image + the page's 32px side padding */
  padding: 0 32px;
}
.about-portrait img {
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 30px 60px -22px rgba(28,26,22,0.4);
}
.about-portrait figcaption {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
}

.article {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink);
}
.article p { margin: 0 0 22px; }
.article p:first-child::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 76px;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--accent-deep);
  font-style: italic;
}

.credential {
  margin: 64px auto 0;
  max-width: 560px;
}
.credential img {
  border-radius: 6px;
  box-shadow: 0 20px 44px -20px rgba(28,26,22,0.4);
}
.credential figcaption {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.5;
}

.factsheet {
  margin: 48px auto 80px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.factsheet dt {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.factsheet dd {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  margin: 0;
  color: var(--ink);
}

/* ── Not in the archive (404) ───────────────────────────────── */

.missing {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 32px;
}
.missing .plate {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(96px, 18vw, 200px);
  line-height: 1;
  color: var(--ink);
  opacity: 0.08;
  margin: 0 0 -0.42em;
  user-select: none;
}
.missing h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  margin: 0 0 20px;
}
.missing h1 em { font-style: italic; color: var(--accent-deep); }
.missing p {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 32px;
}

/* ── Footer ─────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 48px 0 64px;
  margin-top: 40px;
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-footer a {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;   /* tap target, no visual change */
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
}
.site-footer .mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 880px) {
  .hero { padding: 56px 0 40px; }
  .hero .wrap,
  .shoot { grid-template-columns: 1fr; gap: 32px; }
  .shoot:nth-child(even) .shoot-figure { order: 0; }
  .shoot h3, .film-stage h3 { font-size: 38px; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .factsheet { grid-template-columns: repeat(2, 1fr); }
  .film-stage { grid-template-columns: 1fr; gap: 40px; }
  /* Single column: spread the metadata labels across the full rule, no dots */
  .shoot-meta { justify-content: space-between; gap: 8px 20px; }
  .shoot-meta span::before { content: none; margin: 0; }
  .film-figure { max-width: 420px; }
  .stills { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .section-head { flex-direction: column; gap: 8px; align-items: flex-start; }
  nav.primary { gap: 18px; }
  .missing br.wide { display: none; }
}

@media (max-width: 520px) {
  .wrap, .wrap-narrow, .about-portrait { padding: 0 22px; }
  .hero h1 { font-size: 52px; }
  .shoot-number { font-size: 64px; }
  .stills { grid-template-columns: 1fr; gap: 28px; }
  /* Metadata: one label per line on phones; no separator dots to orphan on wrap */
  .shoot-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
}