@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400;500&display=swap");

:root {
  --ink: #1c1b19;
  --paper: #f7f5f1;
  --cloud: #efece6;
  --line: #e4dfd7;
  --muted: #625c56;
  --gold: #8c6848;
  --header: 76px;
  --pad: clamp(20px, 3vw, 40px);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

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

button, input, select, textarea { font: inherit; color: inherit; }

.skip {
  position: absolute;
  left: 16px;
  top: -40px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  z-index: 40;
}

.skip:focus { top: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  padding: 26px clamp(28px, 4vw, 56px) 12px;
  background: var(--paper);
}

.home .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
}

.site-header:has(.nav.is-open) {
  background: #fff;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--ink);
}

.logo-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.logo-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--ink);
  background: transparent;
  padding: 8px 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav a {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
}

.nav a:hover,
.nav a[aria-current="page"] {
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

.nav a.book {
  border: 1px solid var(--ink);
  padding: 9px 14px;
}

.nav a.book:hover,
.nav a.book[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 9px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: stretch;
  background: var(--cloud);
}

.hero figure {
  margin: 0;
  height: calc(100svh - var(--header));
  overflow: hidden;
  background: var(--cloud);
}

.hero img,
.frame img,
.chapter img,
.contact-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero img { object-position: center 16%; }

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  min-height: calc(100svh - var(--header));
  padding: clamp(32px, 5vw, 72px);
  background: var(--paper);
}

.kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--gold);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: clamp(42px, 5vw, 76px); }

h2 { font-size: clamp(34px, 3.6vw, 56px); }

.lede {
  margin: 0;
  max-width: 36rem;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.text-link {
  display: inline-block;
  width: fit-content;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
}

.text-link:hover { border-bottom-color: var(--gold); color: var(--gold); }

.plate {
  margin: 0;
  background: var(--ink);
}

.plate img {
  display: block;
  width: 100%;
  height: min(92vh, 1180px);
  object-fit: cover;
  object-position: center 42%;
}

.plate figcaption,
.caption {
  margin: 0;
  padding: 14px var(--pad) 0;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 28px;
}

.work-index a {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  padding: 32px var(--pad);
  border-right: 1px solid var(--line);
}

.work-index a:last-child { border-right: 0; }

.work-index a:hover { background: var(--cloud); }

.work-index h2 { font-size: clamp(36px, 3vw, 52px); }

.work-index p {
  margin: 0;
  color: var(--muted);
  max-width: 18rem;
}

.home,
.home .site-footer {
  background: #fff;
}

.spread {
  background: #fff;
  padding: 0 0 8vh;
}

.spread figure { margin: 0; }

.spread img {
  display: block;
  width: 100%;
  height: auto;
}

.open,
.offset,
.note-row,
.three,
.close {
  display: grid;
  align-items: start;
}

.open {
  grid-template-columns: 0.72fr 1.35fr;
  column-gap: 8vw;
  width: min(1500px, 92vw);
  margin: 18vh auto 0;
}

.open figure:first-child { width: 78%; }

.open figure:last-child { margin-top: 22vh; }

.spread > .solo {
  width: min(640px, 46vw);
  margin: 22vh 12vw 0 auto;
}

.spread > .solo.solo-left {
  margin: 22vh auto 0 10vw;
}

.offset {
  grid-template-columns: 0.9fr 1.05fr;
  column-gap: 9vw;
  width: min(1280px, 86vw);
  margin: 20vh auto 0;
}

.offset figure:last-child { margin-top: 16vh; }

.offset.flip figure:first-child { margin-top: 14vh; }

.offset.flip figure:last-child { margin-top: 0; }

.note-row {
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: 6vw;
  align-items: center;
  width: min(1280px, 86vw);
  margin: 18vh auto 0;
}

.note-row p {
  margin: 0;
  max-width: 16em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: #4e4e4e;
}

.three {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4vw;
  width: min(1180px, 82vw);
  margin: 22vh auto 0;
}

.open-late { margin-top: 20vh; }

.close {
  grid-template-columns: 0.7fr 1.1fr;
  column-gap: 8vw;
  align-items: center;
  width: min(1100px, 84vw);
  margin: 22vh auto 0;
}

.close figure { width: 78%; }

.close p {
  margin: 14px 0 0;
  max-width: 28rem;
  color: var(--muted);
}

.inquire-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  width: min(1100px, 84vw);
  margin: 18vh auto 0;
  padding-top: 4vh;
}

.inquire-line p {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.05;
}

.founder {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) 1.1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(48px, 7vw, 96px) var(--pad);
  background: var(--cloud);
}

.founder figure { margin: 0; }

.founder img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: center 16%;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--paper);
}

.pair figure { margin: 0; }

.pair img { display: block; width: 100%; height: auto; }

.band {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: end;
  padding: clamp(56px, 8vw, 110px) var(--pad);
  background: var(--cloud);
}

.band p { margin: 0; max-width: 36rem; color: var(--muted); }

.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  justify-content: flex-end;
}

.page {
  padding: clamp(28px, 4vw, 56px) var(--pad) 0;
}

.about-lead,
.chapter,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  padding-bottom: clamp(48px, 7vw, 96px);
}

.about-lead { align-items: center; }

.frame {
  margin: 0;
  background: var(--cloud);
}

.frame img { height: auto; object-fit: contain; }

.about-lead .frame img,
.chapter .frame img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  object-position: center 18%;
}

.intro { max-width: 40rem; padding-bottom: clamp(28px, 5vw, 56px); }

.copy h2 { margin: 8px 0 18px; }

.copy p { margin: 0 0 16px; max-width: 38rem; color: var(--muted); }

.copy p strong { color: var(--ink); font-weight: 400; }

.chapter { align-items: center; }

.chapter.reverse .frame { order: 2; }

.stack {
  margin: 0 0 clamp(48px, 7vw, 96px);
}

.stack img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-grid { align-items: stretch; padding-top: 12px; }

.contact-photo {
  margin: 0;
  min-height: 70vh;
  background: var(--cloud);
  overflow: hidden;
}

.contact-photo img { object-position: 72% 30%; }

form {
  display: grid;
  gap: 18px;
  align-content: end;
  padding-bottom: 12px;
}

label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
}

input, select, textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 0 12px;
  border-radius: 0;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

textarea { min-height: 120px; resize: vertical; }

button[type="submit"] {
  justify-self: start;
  margin-top: 8px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 14px 22px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
}

button[type="submit"]:hover { background: var(--gold); }

.form-note { margin: 0; font-size: 14px; color: var(--muted); }

.site-footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  padding: 42px var(--pad) 48px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.site-footer p { margin: 0 0 8px; }

.site-footer a:hover { border-bottom: 1px solid var(--gold); }

.foot-brand {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fine {
  color: var(--muted);
  font-size: 14px;
}

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

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

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 8px var(--pad) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .nav.is-open { display: flex; }

  .hero,
  .work-index,
  .open,
  .offset,
  .note-row,
  .three,
  .close,
  .founder,
  .pair,
  .band,
  .about-lead,
  .chapter,
  .contact-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .open,
  .offset,
  .note-row,
  .three,
  .close,
  .inquire-line {
    width: min(100% - 12vw, 520px);
    margin-left: auto;
    margin-right: auto;
    row-gap: 8vh;
  }

  .open { margin-top: 12vh; }

  .open figure:first-child,
  .close figure { width: 100%; }

  .open figure:last-child,
  .offset figure:first-child,
  .offset figure:last-child,
  .offset.flip figure:first-child,
  .offset.flip figure:last-child {
    margin-top: 0;
  }

  .spread > .solo,
  .spread > .solo.solo-left {
    width: min(100% - 16vw, 460px);
    margin: 12vh auto 0;
  }

  .inquire-line { flex-direction: column; align-items: flex-start; }

  .hero figure,
  .hero-copy {
    height: auto;
    min-height: 0;
  }

  .hero figure { aspect-ratio: 3 / 4; }

  .work-index a {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .band-actions { justify-content: flex-start; }

  .chapter.reverse .frame { order: 0; }

  .contact-photo { min-height: 72vw; }

  .plate img { height: 78vh; }
}

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