:root {
  --white: #fdfcf9;        /* warm white */
  --paper: #ece8df;        /* softer, less yellow editorial */
  --paper-2: #ddd5c8;      /* deeper, muted cream */
  --black: #0e0c0a;        /* rich, slightly warm black */
  --ink: #1a1814;
  --ink-soft: #4a463f;
  --ink-on-dark: #e9e1d4;
  --ink-soft-on-dark: rgba(233, 225, 212, 0.55);
  --rule: #d9cfc1;
  --rule-on-dark: rgba(233, 225, 212, 0.18);
  --rosegold: #b88a6e;     /* echoes the logo, used VERY sparingly */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --display-serif: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- typography ---------- */
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -0.01em; }
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.italic { font-style: italic; }
.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.caption {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.body-serif {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
}

/* ---------- chrome ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 40px;
  background: rgba(253, 252, 249, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav__logo {
  display: flex; align-items: center; gap: 10px;
  justify-self: start;
}
.nav__logo img {
  height: 40px; width: auto; display: block;
}
.nav__links {
  display: flex; gap: 36px; align-items: center;
  justify-self: center;
}
.nav__links a {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
  transition: color 200ms cubic-bezier(0.4,0,0.2,1);
}
.nav__links a::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px; background: var(--ink);
  transition: width 240ms cubic-bezier(0.4,0,0.2,1), left 240ms cubic-bezier(0.4,0,0.2,1);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { width: 18px; left: calc(50% - 9px); }
.nav__lang {
  justify-self: end;
  display: flex; align-items: center; gap: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.nav__lang button {
  background: none; border: none; padding: 6px 4px; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--ink-soft);
  transition: color 180ms;
}
.nav__lang button.is-active { color: var(--ink); }
.nav__lang span { color: var(--rule); }

/* ---------- shell ---------- */
main { padding-top: 81px; }
.page { display: none; }
.page.is-active { display: block; }

/* section bands — magazine surface rhythm */
.band { width: 100%; }
.band--white { background: var(--white); }
.band--cream { background: var(--paper); }
.band--black {
  background: var(--black);
  color: var(--ink-on-dark);
}
.band--black .eyebrow,
.band--black .caption,
.band--black .hero__date,
.band--black .ig__head .eyebrow,
.band--black .film__caption .meta {
  color: var(--ink-soft-on-dark);
}
.band--black hr.rule,
.band--black .film__head,
.band--black .film__caption,
.band--black .ig__head {
  border-color: var(--rule-on-dark);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.container--narrow { max-width: 920px; }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---------- HOME hero ---------- */
.hero {
  padding: 80px 40px 48px;
  max-width: 1280px; margin: 0 auto;
}
.hero__top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.hero__issue {
  display: flex; gap: 24px; align-items: baseline;
}
.hero__issue .caption { letter-spacing: 0.28em; }
.hero__date {
  text-align: right;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hero__wordmark {
  margin: 24px auto 0;
  max-width: 880px;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
}
.hero__crest {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.hero__crest .rule {
  width: 56px; height: 1px;
  background: var(--ink-soft); opacity: 0.55;
}
.hero__crest svg { width: 14px; height: 14px; opacity: 0.7; }
.hero__wordmark-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  width: 100%;
}
.hero__wordmark-rule {
  height: 1px; background: var(--ink-soft); opacity: 0.45;
  position: relative;
}
.hero__wordmark-rule::before,
.hero__wordmark-rule::after {
  content: ''; position: absolute; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-soft); opacity: 0.7;
  transform: translateY(-50%);
}
.hero__wordmark-rule--l::before { left: 0; }
.hero__wordmark-rule--l::after { right: 0; opacity: 0; }
.hero__wordmark-rule--r::before { left: 0; opacity: 0; }
.hero__wordmark-rule--r::after { right: 0; }
.hero__brand {
  margin: 0;
  font-family: var(--display-serif);
  font-weight: 400;
  font-size: clamp(56px, 8.8vw, 132px);
  line-height: 0.94;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__brand em {
  font-family: var(--display-serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero__tagline {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}
.hero__sub {
  margin: 36px auto 0;
  max-width: 920px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  position: relative;
  padding: 28px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hero__sub::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 18px;
  background: var(--ink-soft);
  opacity: 0.55;
}
.hero__sub em {
  font-style: italic;
  color: var(--ink-soft);
  display: block;
  margin-top: 2px;
}
.hero__sub-mark {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__sub-mark .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--rosegold);
}
.hero__sub-mark .line {
  width: 32px; height: 1px; background: var(--ink-soft); opacity: 0.5;
}

/* ---------- editorial intro band (asymmetric, video left + text right) ---------- */
.intro {
  padding: 96px 40px;
  max-width: 1280px; margin: 0 auto;
}
.intro__head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
}
.intro__head .left {
  font-family: var(--sans); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ink-soft);
}
.intro__head .center {
  font-family: var(--display-serif); font-size: 36px;
  line-height: 1; color: var(--ink); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.intro__head .right {
  text-align: right;
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-soft);
}
.intro__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.intro__loop {
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  background: #14110d;
}
.intro__loop video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.intro__loop .grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
  background-size: 160px 160px;
  animation: grainShift 1.6s steps(6) infinite;
  z-index: 2;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(5%, -3%); }
  60%  { transform: translate(-3%, -5%); }
  80%  { transform: translate(4%, 3%); }
  100% { transform: translate(0, 0); }
}
.intro__loop .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(246, 241, 234, 0.55);
  font-family: var(--serif); font-style: italic; font-size: 16px;
  background: linear-gradient(135deg, #2a221c 0%, #1a1410 60%, #0e0c0a 100%);
}
.intro__loop .placeholder::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 35% 40%, rgba(184,138,110,0.16), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(184,138,110,0.08), transparent 50%);
}
.intro__loop .badge {
  position: absolute; top: 16px; left: 16px;
  color: rgba(246,241,234,0.85);
  font-family: var(--sans); font-size: 9.5px;
  letter-spacing: 0.3em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.intro__loop .badge .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(246,241,234,0.85);
  animation: pulse 2s ease-in-out infinite;
}
.intro__loop .corner {
  position: absolute; bottom: 16px; right: 16px;
  color: rgba(246,241,234,0.55);
  font-family: var(--serif); font-style: italic; font-size: 13px;
}
.intro__body { padding-top: 4px; }
.intro__eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  font-family: var(--sans); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ink-soft);
}
.intro__eyebrow .num {
  font-family: var(--display-serif); font-size: 26px;
  letter-spacing: 0; color: var(--ink);
}
.intro__lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0 0 24px;
}
.intro__lede em { font-style: italic; }
.intro__lede::first-letter {
  font-family: var(--display-serif);
  font-size: 64px;
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--ink);
}
.intro__body p.intro__sig {
  margin: 28px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---------- featured film (lives on BLACK band, asymmetric layout) ---------- */
.film {
  padding: 112px 40px;
  max-width: 1280px; margin: 0 auto;
}
.film__masthead {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-on-dark);
  margin-bottom: 64px;
}
.film__masthead .left {
  font-family: var(--sans); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ink-soft-on-dark);
}
.film__masthead .center {
  font-family: var(--display-serif); font-size: 36px;
  line-height: 1; color: var(--ink-on-dark);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.film__masthead .right {
  text-align: right;
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-soft-on-dark);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 300;
}
.film__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: center;
}
.film__text {
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.film__text .eyebrow {
  color: var(--ink-soft-on-dark);
  margin-bottom: 0;
  display: flex; align-items: center; gap: 14px;
}
.film__text .eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--rosegold);
  opacity: 0.7;
}
.film__text h2 {
  margin: 18px 0 0;
  font-family: var(--display-serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  color: var(--ink-on-dark);
  text-transform: uppercase;
}
.film__text h2 .it {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  text-transform: none; letter-spacing: -0.01em;
  color: var(--rosegold);
  opacity: 0.92;
}
.film__lockup { flex: 0 0 auto; }
.film__body { flex: 1 1 auto; padding-top: 4px; }
.film__text p {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--ink-on-dark);
  max-width: 540px;
  text-wrap: pretty;
  border-left: 1px solid var(--rule-on-dark);
  padding-left: 28px;
}
.film__text p::first-letter {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  float: none;
  padding: 0;
  color: inherit;
}
.film__text .meta {
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule-on-dark);
  display: flex; align-items: center; gap: 16px;
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-soft-on-dark);
}
.film__text .meta .sep {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(246,241,234,0.45);
  flex-shrink: 0;
}
.film__video {
  position: relative;
  aspect-ratio: 16/10;
  background: #14110d;
  overflow: hidden;
  border: 1px solid var(--rule-on-dark);
  width: 100%;
}
.film__video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.film__video .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(246, 241, 234, 0.55);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  background: linear-gradient(135deg, #1a1814 0%, #2a2520 100%);
}
.film__video .placeholder::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(184,138,110,0.16), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(184,138,110,0.10), transparent 50%);
}
.film__video .play-mark {
  position: absolute; bottom: 18px; left: 18px;
  display: flex; align-items: center; gap: 10px;
  color: var(--paper);
  font-family: var(--sans); font-size: 9.5px;
  letter-spacing: 0.3em; text-transform: uppercase;
}
.film__video .play-mark .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--paper);
  animation: pulse 2s ease-in-out infinite;
}
.film__video .figno {
  position: absolute; top: 18px; right: 18px;
  color: rgba(246,241,234,0.55);
  font-family: var(--serif); font-style: italic; font-size: 13px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- recent work — minimal anchor block ---------- */
.ig {
  padding: 120px 40px;
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.ig::before,
.ig::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 36px;
  background: var(--ink-soft);
  opacity: 0.4;
}
.ig::before { top: 0; }
.ig::after { bottom: 0; }
.ig__inner {
  max-width: 880px; margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
}
.ig__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 7.4vw, 104px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--ink);
}
.ig__head h2 em { font-style: italic; }
.ig__follow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 18px 32px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  transition: background 240ms ease, color 240ms ease;
}
.ig__follow:hover { background: transparent; color: var(--ink); }
.ig__follow svg { width: 18px; height: 18px; }
.ig__handle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}
.ig__handle a { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }


/* ---------- philosophy / quote band ---------- */
.quote {
  padding: 120px 40px;
  text-align: center;
  background: var(--paper);
}
.quote__inner { max-width: 880px; margin: 0 auto; }
.quote__text {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.quote__mark {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 0.5;
  color: var(--rosegold);
  margin-bottom: 24px;
  display: block;
}
.quote__attr {
  margin-top: 32px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.quote__attr .line {
  width: 40px; height: 1px; background: var(--ink);
}

/* ---------- ABOUT page ---------- */
.about {
  padding: 80px 40px 120px;
  max-width: 1280px;
  margin: 0 auto;
}
.about__head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.about__head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.about__head h1 em { font-style: italic; }
.about__head .meta {
  text-align: right;
  font-family: var(--sans);
  font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft);
  line-height: 1.8;
}
.about__grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}
.about__photo {
  aspect-ratio: 4/5;
  background: #2a2520;
  position: relative;
  overflow: hidden;
}
.about__photo .ph {
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, #3a2e26 0%, #1a1410 60%, #0a0806 100%);
}
.about__photo img.ph {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.about__photo .ph::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(184,138,110,0.18), transparent 55%);
}
.about__photo .ph-label {
  position: absolute; left: 20px; bottom: 20px;
  color: rgba(246, 241, 234, 0.6);
  font-family: var(--serif); font-style: italic; font-size: 14px;
}
.about__photo .pageno {
  position: absolute; top: 20px; right: 20px;
  color: rgba(246, 241, 234, 0.5);
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase;
}
.about__body { padding-top: 12px; }
.about__eyebrow { margin-bottom: 18px; display: block; }
.about__lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.012em;
  margin: 0 0 32px;
  color: var(--ink);
  text-wrap: pretty;
}
.about__lede em { font-style: italic; }
.about__bio {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.about__bio p { margin: 0 0 18px; }
.about__bio p:first-of-type::first-letter {
  font-size: 56px; line-height: 0.85;
  float: left; padding: 6px 10px 0 0;
  font-style: italic;
  color: var(--ink);
}
.about__sig {
  margin-top: 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.about__details {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.about__detail .lbl {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 10px;
}
.about__detail .val {
  font-family: var(--serif); font-size: 18px;
  font-style: italic; font-weight: 300;
  color: var(--ink);
}

/* ---------- CONTACT page ---------- */
.contact {
  padding: 80px 40px 120px;
  max-width: 1280px;
  margin: 0 auto;
}
.contact__head {
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.contact__head .eyebrow { margin-bottom: 24px; display: block; }
.contact__head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.contact__head h1 em { font-style: italic; }
.contact__head .sub {
  margin: 24px auto 0; max-width: 540px;
  font-family: var(--serif); font-style: italic;
  font-size: 18px; line-height: 1.55;
  color: var(--ink-soft);
}
.contact__layout {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 80px;
  align-items: start;
}
.contact__aside {
  position: sticky; top: 120px;
}
.contact__aside .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  color: var(--rosegold);
  display: block;
  margin-bottom: 16px;
}
.contact__aside h3 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.contact__aside p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 280px;
}
.contact__aside .info {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.contact__aside .info-row .lbl {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 4px;
}
.contact__aside .info-row .val {
  font-family: var(--serif); font-size: 16px;
}

form.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 8px 0 12px;
  outline: none;
  border-radius: 0;
  transition: border-color 200ms;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(74,70,63,0.4);
  font-style: italic;
}
.field textarea {
  resize: vertical; min-height: 120px;
  font-size: 16px; line-height: 1.5;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--rosegold);
}
.field--invalid input,
.field--invalid textarea {
  border-color: #b8553a;
}
.field .err {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b8553a;
  margin-top: 6px;
  height: 0;
  overflow: hidden;
  transition: height 180ms;
}
.field--invalid .err { height: 14px; }

.contact__actions {
  grid-column: 1 / -1;
  margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.contact__hint {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--ink-soft);
}
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  background: none; border: 0; cursor: pointer;
  padding: 16px 0;
  position: relative;
}
.btn::after {
  content: ''; position: absolute; left: 0; bottom: 8px;
  width: 100%; height: 1px; background: var(--ink);
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1);
  transform-origin: right;
}
.btn:hover::after { transform: scaleX(0); transform-origin: left; }
.btn:hover .arr { transform: translateX(6px); }
.btn .arr { transition: transform 240ms cubic-bezier(0.4,0,0.2,1); }

.contact__success {
  grid-column: 1 / -1;
  padding: 32px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  text-align: center;
  display: none;
}
.contact__success.is-shown { display: block; }
.contact__success h4 {
  margin: 0 0 12px;
  font-family: var(--serif); font-style: italic;
  font-size: 28px; font-weight: 300;
}
.contact__success p {
  margin: 0; font-family: var(--serif); font-size: 16px;
  color: var(--ink-soft);
}

/* split-band variants drop top/bottom padding so bands stack cleanly */
.about--body-only { padding-top: 80px; padding-bottom: 80px; }
.about--details-only { padding-top: 64px; padding-bottom: 64px; }
.about--body-only .about__grid { margin-top: 0; }
.about--details-only .about__details { margin-top: 0; padding-top: 0; border-top: 0; }
.band--black .about__details .lbl { color: var(--ink-soft-on-dark); }
.band--black .about__details .val { color: var(--ink-on-dark); }

.contact--head-only { padding-top: 96px; padding-bottom: 80px; }
.contact--head-only .contact__head { border-bottom: 0; padding-bottom: 0; }
.contact--form-only { padding-top: 80px; padding-bottom: 120px; }
.contact--form-only .contact__layout { margin-top: 0; }
.contact__aside { top: 100px; }

/* ---------- footer (now black) ---------- */
footer {
  padding: 64px 40px 40px;
  border-top: 1px solid var(--rule-on-dark);
  background: var(--black);
  color: var(--ink-on-dark);
}
footer .foot__center,
footer .foot__right,
footer .foot__rule { color: var(--ink-soft-on-dark); }
footer .foot__center a { border-bottom-color: var(--ink-soft-on-dark); color: var(--ink-on-dark); }
footer .foot__rule { border-top-color: var(--rule-on-dark); }
footer .foot__title { color: var(--ink-on-dark); }
.foot__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2fr 1fr;
  gap: 32px;
  align-items: end;
}
.foot__title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.foot__center {
  text-align: center;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foot__center a {
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 2px;
}
.foot__right {
  text-align: right;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foot__rule {
  max-width: 1280px; margin: 32px auto 0;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  display: flex; justify-content: space-between;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav {
    padding: 14px 18px;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .nav__logo img { height: 32px; }
  .nav__links {
    display: flex;
    gap: 18px;
    justify-self: end;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
  }
  .nav__links a { font-size: 10px; letter-spacing: 0.22em; padding: 4px 0; }
  .nav__lang { font-size: 10px; }
  main { padding-top: 96px; }

  /* hero */
  .hero { padding: 36px 20px 32px; }
  .hero__top { grid-template-columns: 1fr; gap: 10px; padding-bottom: 18px; }
  .hero__date { text-align: left; font-size: 10px; }
  .hero__issue .caption { font-size: 9.5px; letter-spacing: 0.22em; }
  .hero__wordmark { margin-top: 24px; gap: 14px; }
  .hero__wordmark-row { gap: 14px; }
  .hero__wordmark-rule { display: none; }
  .hero__wordmark-row { grid-template-columns: 1fr; }
  .hero__brand {
    font-size: clamp(46px, 14vw, 80px) !important;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .hero__tagline {
    font-size: 16px !important;
    letter-spacing: 0.01em;
    padding: 0 8px;
    line-height: 1.4;
  }
  .hero__sub {
    margin-top: 28px;
    font-size: clamp(22px, 6.4vw, 30px) !important;
    padding-top: 22px;
    line-height: 1.25;
  }
  .hero__sub::before { height: 14px; }

  /* intro / foundation */
  .intro {
    padding: 56px 20px;
  }
  .intro__head {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: left;
    padding-bottom: 18px;
    margin-bottom: 32px;
  }
  .intro__head .left,
  .intro__head .right { text-align: left; font-size: 10px; }
  .intro__head .center { font-size: 22px; }
  .intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .intro__loop { aspect-ratio: 4/5; }
  .intro__lede {
    font-size: 20px !important;
    line-height: 1.4;
  }
  .intro__lede::first-letter {
    font-size: 44px;
    padding: 4px 8px 0 0;
  }
  .intro__eyebrow { font-size: 10px; letter-spacing: 0.24em; gap: 10px; margin-bottom: 16px; }
  .intro__eyebrow .num { font-size: 22px; }

  /* film / art of noticing */
  .film {
    padding: 64px 20px;
  }
  .film__masthead {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: left;
    padding-bottom: 18px;
    margin-bottom: 32px;
  }
  .film__masthead .left,
  .film__masthead .right { text-align: left; font-size: 10px; }
  .film__masthead .center { font-size: 22px; }
  .film__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .film__text { padding-right: 0; gap: 24px; }
  .film__text h2 { font-size: clamp(40px, 11vw, 64px) !important; line-height: 0.95; }
  .film__text p {
    font-size: 17px !important;
    padding-left: 18px;
    line-height: 1.5;
    max-width: none;
  }
  .film__text .meta { font-size: 9.5px; letter-spacing: 0.2em; gap: 12px; padding-top: 18px; }
  .film__video { aspect-ratio: 4/3; }

  /* recent work */
  .ig { padding: 72px 20px; }
  .ig__inner { gap: 28px; }
  .ig__head h2 { font-size: clamp(48px, 13.5vw, 80px) !important; }
  .ig__follow { padding: 14px 22px; font-size: 11px; letter-spacing: 0.22em; }
  .ig::before, .ig::after { height: 24px; }

  /* quote */
  .quote { padding: 72px 20px; }
  .quote__text { font-size: clamp(22px, 5.6vw, 32px) !important; line-height: 1.35; }
  .quote__mark { font-size: 48px; }

  /* about */
  .about { padding: 56px 20px 64px; }
  .about__head { grid-template-columns: 1fr; gap: 12px; padding-bottom: 18px; }
  .about__head h1 { font-size: clamp(48px, 14vw, 80px); }
  .about__head .meta { text-align: left; font-size: 10px; }
  .about__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 36px;
  }
  .about__photo { aspect-ratio: 4/5; max-width: 380px; margin: 0 auto; width: 100%; }
  .about__lede { font-size: 22px !important; }
  .about__bio { font-size: 16px; line-height: 1.65; }
  .about__bio p:first-of-type::first-letter { font-size: 44px; padding: 4px 8px 0 0; }
  .about__sig { font-size: 18px; }
  .about--body-only { padding: 48px 20px; }
  .about--details-only { padding: 40px 20px; }
  .about__details {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }
  .about__detail .val { font-size: 15px; }

  /* contact */
  .contact { padding: 56px 20px 80px; }
  .contact__head h1 { font-size: clamp(48px, 12.5vw, 72px); }
  .contact__head .sub { font-size: 16px; padding: 0 8px; }
  .contact--head-only { padding: 56px 20px 48px; }
  .contact--form-only { padding: 40px 20px 80px; }
  .contact__layout { grid-template-columns: 1fr; gap: 36px; }
  .contact__aside { position: static; }
  .contact__aside h3 { font-size: 22px; }
  .contact__aside .num { font-size: 48px; }
  form.contact__form { grid-template-columns: 1fr; gap: 22px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .contact__actions { flex-direction: column; align-items: flex-start; gap: 14px; }
  .btn { font-size: 11px; }

  /* footer */
  footer { padding: 40px 20px 28px; }
  .foot__inner { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .foot__title { font-size: 22px; text-align: center; }
  .foot__center, .foot__right { text-align: center; font-size: 10px; }
  .foot__rule {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
    font-size: 9.5px;
  }
}

@media (max-width: 480px) {
  .nav__links { gap: 14px; }
  .nav__links a { font-size: 9.5px; letter-spacing: 0.18em; }
  main { padding-top: 92px; }
  .hero__brand { font-size: clamp(38px, 13vw, 60px) !important; }
  .hero__sub { font-size: 22px !important; }
  .film__text h2 { font-size: 44px !important; }
  .ig__head h2 { font-size: 56px !important; }
  .about__head h1 { font-size: 56px !important; }
  .contact__head h1 { font-size: 52px !important; }
  .about__details { grid-template-columns: 1fr; }
}

/* ---------- home H1 (keyword line, styled as the small caption) ---------- */
.hero__issue h1 { margin: 0; }

/* ---------- destination / FAQ band ---------- */
.faq {
  padding: 112px 40px;
  max-width: 1280px; margin: 0 auto;
}
.faq__head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
}
.faq__head .left {
  font-family: var(--sans); font-size: 10.5px;
  font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ink-soft);
}
.faq__head .center {
  margin: 0;
  font-family: var(--display-serif); font-size: 36px; font-weight: 400;
  line-height: 1; color: var(--ink); letter-spacing: 0.04em;
  text-transform: uppercase; text-align: center;
}
.faq__head .right {
  text-align: right;
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: var(--ink-soft);
}
.faq__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.faq__intro {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
.faq__intro em { font-style: italic; }
.faq__list { margin: 0; }
.faq__item {
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.faq__item:first-child { border-top: 0; padding-top: 0; }
.faq__item dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}
.faq__item dd {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.faq__cta {
  display: inline-block;
  margin-top: 28px;
}
.faq__cta .btn { padding: 12px 0; }

@media (max-width: 900px) {
  .faq { padding: 56px 20px; }
  .faq__head {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 18px;
    margin-bottom: 32px;
  }
  .faq__head .left,
  .faq__head .right { text-align: left; font-size: 10px; }
  .faq__head .center { font-size: 22px; text-align: left; }
  .faq__grid { grid-template-columns: 1fr; gap: 28px; }
  .faq__item dt { font-size: 19px; }
  .faq__item dd { font-size: 16px; }
}