@font-face {
  font-family: "Bodoni BioSer";
  src: url("assets/fonts/bodoni-book.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Bodoni BioSer";
  src: url("assets/fonts/bodoni-book-italic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-family: "Bodoni BioSer";
  src: url("assets/fonts/bodoni-bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "DIN BioSer";
  src: url("assets/fonts/din-condensed-bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  --ink: #111f1f;
  --forest: #162d2d;
  --forest-light: #21403e;
  --paper: #e8eee4;
  --paper-deep: #dbe5d8;
  --paper-text: #172421;
  --cream: #f2f3ec;
  --leaf: #89c568;
  --leaf-deep: #3d6c34;
  --mist: #b9c7bf;
  --rule-dark: rgba(17, 31, 31, .22);
  --rule-light: rgba(242, 243, 236, .25);
  --page: clamp(1.25rem, 6vw, 7.8rem);
  --serif: "Bodoni BioSer", "Iowan Old Style", Baskerville, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --condensed: "DIN BioSer", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html {
  background: var(--ink);
  scroll-behavior: smooth;
  scrollbar-color: var(--leaf) var(--ink);
}
body {
  background: var(--paper);
  color: var(--paper-text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  overflow-x: hidden;
}
::selection { background: var(--leaf); color: var(--ink); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--leaf); border: 3px solid var(--ink); }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, blockquote, figure { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
a:focus-visible, summary:focus-visible, video:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 4px;
}
.skip-link {
  background: var(--cream);
  color: var(--ink);
  left: 1rem;
  padding: .7rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 50;
}
.skip-link:focus { top: 1rem; }

.site-header {
  align-items: center;
  background: rgba(17, 31, 31, .98);
  border-bottom: 1px solid var(--rule-light);
  color: var(--cream);
  display: flex;
  height: 78px;
  justify-content: space-between;
  padding: 0 var(--page);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  align-items: center;
  display: inline-flex;
  gap: .75rem;
  text-decoration: none;
}
.brand img { height: 2.45rem; object-fit: contain; width: 2.45rem; }
.brand span { display: grid; gap: .08rem; }
.brand strong, .brand small {
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}
.brand strong { font-size: .83rem; }
.brand small { color: var(--mist); font-size: .7rem; }
nav { align-items: center; display: flex; gap: clamp(.9rem, 2.2vw, 2.6rem); }
nav a {
  font-family: var(--condensed);
  font-size: .72rem;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}
nav a:hover { color: var(--leaf); }
.nav-contact { border: 1px solid var(--leaf); padding: .7rem 1rem; }

.hero {
  background: var(--ink);
  color: var(--cream);
  min-height: calc(100svh - 78px);
  overflow: hidden;
  position: relative;
}
.hero-image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  transform: scale(1.045);
  transition: transform 1.8s cubic-bezier(.16, 1, .3, 1);
  width: 100%;
}
.is-ready .hero-image { transform: scale(1); }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(7, 18, 18, .95) 0%, rgba(8, 20, 20, .79) 34%, rgba(8, 20, 20, .18) 66%, rgba(8, 20, 20, .18) 100%),
    linear-gradient(0deg, rgba(7, 17, 17, .72), transparent 47%);
  inset: 0;
  position: absolute;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 78px);
  opacity: 0;
  padding: clamp(4.5rem, 10vh, 8rem) var(--page);
  position: relative;
  transform: translateY(24px);
  transition: opacity .8s .12s ease, transform 1s .12s cubic-bezier(.16, 1, .3, 1);
  width: min(62rem, 68vw);
  z-index: 1;
}
.is-ready .hero-copy { opacity: 1; transform: none; }
.hero-foot {
  font-family: var(--condensed);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1 {
  font-size: clamp(5rem, 9.3vw, 9rem);
  letter-spacing: -.035em;
  line-height: .76;
  margin-bottom: 2.3rem;
}
h1 em { color: var(--leaf); font-size: .62em; font-weight: 400; }
.hero-deck {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  line-height: 1.4;
  margin-bottom: 2.2rem;
  max-width: 34rem;
}
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.8rem; }
.button {
  align-items: center;
  border: 1px solid transparent;
  display: inline-flex;
  font-family: var(--condensed);
  font-size: .8rem;
  gap: 1.8rem;
  justify-content: center;
  letter-spacing: .1em;
  min-height: 3.35rem;
  padding: .85rem 1.3rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.button:hover { transform: translateY(-2px); }
.button-accent { background: var(--leaf); color: var(--ink); }
.button-dark { background: var(--ink); color: var(--cream); }
.text-action {
  color: var(--cream);
  font-family: var(--condensed);
  font-size: .78rem;
  letter-spacing: .1em;
  text-decoration-color: var(--leaf);
  text-underline-offset: .4rem;
  text-transform: uppercase;
}
.text-action:hover { color: var(--leaf); }
.text-action.dark { color: var(--ink); }
.hero-foot {
  bottom: 1.8rem;
  color: rgba(242, 243, 236, .7);
  margin: 0;
  position: absolute;
  right: var(--page);
  z-index: 1;
}

.opening {
  background: var(--paper-deep);
  padding: clamp(5.5rem, 10vw, 9.5rem) var(--page);
}
.opening-heading {
  border-bottom: 1px solid var(--rule-dark);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
h2 {
  font-size: clamp(3.4rem, 6.3vw, 6rem);
  letter-spacing: -.035em;
  line-height: .89;
  margin-bottom: 0;
}
h2 em { color: var(--leaf-deep); font-weight: 400; }
.folio {
  align-self: end;
  color: var(--leaf-deep);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}
.opening-body {
  display: grid;
  gap: clamp(2rem, 7vw, 8rem);
  grid-template-columns: 1fr 1fr;
  margin-left: clamp(0rem, 10vw, 12rem);
  padding-top: clamp(3rem, 6vw, 5.5rem);
}
.opening-body p { max-width: 40rem; }
.opening-lead {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.3vw, 2.15rem);
  line-height: 1.35;
}

.method {
  background: var(--ink);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.method-visual {
  align-self: start;
  height: calc(100svh - 78px);
  margin: 0;
  position: sticky;
  top: 78px;
}
.method-visual img {
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  width: 100%;
}
figcaption {
  bottom: 1.6rem;
  color: var(--cream);
  font-family: var(--condensed);
  font-size: .72rem;
  left: clamp(1.2rem, 3vw, 3rem);
  letter-spacing: .12em;
  position: absolute;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
  text-transform: uppercase;
}
.method-reading { padding: clamp(4.5rem, 8vw, 8rem) clamp(2rem, 6vw, 7rem); }
.method-intro {
  border-bottom: 1px solid var(--rule-light);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}
.method-intro h2 { margin-bottom: 2rem; }
.method-intro h2 em { color: var(--leaf); }
.method-intro > p {
  color: var(--mist);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.45;
  max-width: 40rem;
}
.plane {
  border-bottom: 1px solid var(--rule-light);
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(8rem, .42fr) 1fr;
  padding: clamp(3rem, 5vw, 5.5rem) 0;
}
.plane-mark { display: flex; flex-direction: column; gap: 1.3rem; }
.plane-mark img, .contact-list img { filter: brightness(0) invert(1); }
.plane-mark span, .contact-list span {
  color: var(--leaf);
  font-family: var(--condensed);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.plane h3 {
  color: var(--cream);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  letter-spacing: -.025em;
  line-height: 1;
  margin-bottom: 1.2rem;
}
.plane p { color: var(--mist); margin: 0; max-width: 36rem; }

.process {
  background: var(--leaf);
  display: grid;
  gap: clamp(3rem, 8vw, 9rem);
  grid-template-columns: .9fr 1.1fr;
  padding: clamp(5.5rem, 10vw, 9.5rem) var(--page);
}
.process-heading h2 { color: var(--ink); margin-bottom: 2rem; }
.process-heading h2 em { color: var(--ink); }
.process-heading p { max-width: 29rem; }
.process ol { border-top: 1px solid rgba(17, 31, 31, .35); list-style: none; margin: 0; padding: 0; }
.process li {
  border-bottom: 1px solid rgba(17, 31, 31, .35);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: 1.8rem 0;
}
.process li > span { font-family: var(--serif); font-style: italic; }
.process strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: .5rem;
}
.process li p { margin: 0; max-width: 38rem; }

.statement {
  align-items: center;
  background: var(--forest);
  color: var(--cream);
  display: flex;
  justify-content: center;
  min-height: 82svh;
  padding: 5rem var(--page);
  text-align: center;
}
.statement p {
  font-family: var(--serif);
  font-size: clamp(4rem, 8vw, 8rem);
  letter-spacing: -.035em;
  line-height: .8;
  margin: 0;
}
.statement em { color: var(--leaf); font-weight: 400; }

.reel {
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.video-page {
  align-items: center;
  background: var(--forest-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(4rem, 8vw, 8rem);
}
.video-page video {
  background: #071111;
  box-shadow: 18px 24px 60px rgba(5, 15, 15, .4);
  max-height: 72svh;
  width: auto;
}
.video-page p {
  color: var(--mist);
  font-family: var(--condensed);
  font-size: .72rem;
  letter-spacing: .12em;
  margin: 2rem 0 0;
  text-transform: uppercase;
}
.reel-copy {
  align-self: center;
  padding: clamp(5rem, 9vw, 10rem) clamp(2rem, 7vw, 8rem);
}
.reel-copy h2 { margin-bottom: 2rem; }
.reel-copy > p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.45;
  margin-bottom: 2rem;
  max-width: 38rem;
}

.questions {
  background: var(--paper-deep);
  display: grid;
  gap: clamp(3rem, 8vw, 10rem);
  grid-template-columns: .8fr 1.2fr;
  padding: clamp(5.5rem, 10vw, 9.5rem) var(--page);
}
.questions-heading h2 { margin-bottom: 2rem; }
.questions-heading p { max-width: 30rem; }
.question-list { border-top: 1px solid var(--rule-dark); }
.question { border-bottom: 1px solid var(--rule-dark); padding: 1.6rem 0; }
.question summary {
  align-items: start;
  cursor: pointer;
  display: grid;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.3vw, 2.25rem);
  gap: 1rem;
  grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem;
  line-height: 1.3;
  list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { color: var(--leaf-deep); content: "+"; font-family: var(--sans); }
.question[open] summary::after { content: "−"; }
.question summary span { color: var(--leaf-deep); font-size: .95rem; font-style: italic; }
.question p { margin: 1.2rem 2.5rem .3rem; max-width: 40rem; }

.conversation {
  background: var(--ink);
  color: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.conversation figure, .profile figure { margin: 0; min-height: 100svh; position: relative; }
.conversation figure img, .profile figure img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.conversation > div {
  align-self: center;
  padding: clamp(5rem, 9vw, 10rem) clamp(2rem, 7vw, 8rem);
}
.conversation h2 { margin-bottom: 2rem; }
.conversation h2 em { color: var(--leaf); }
.conversation > div p {
  color: var(--mist);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.45;
  max-width: 39rem;
}

.profile {
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.profile figure { order: 2; }
.profile figure img { object-position: center top; }
.profile-copy {
  align-self: center;
  order: 1;
  padding: clamp(5rem, 9vw, 10rem) clamp(2rem, 7vw, 8rem);
}
.profile-copy h2 { margin-bottom: 2rem; }
.profile-role {
  color: var(--leaf-deep);
  font-family: var(--condensed);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.profile-copy > p:not(.profile-role) { max-width: 42rem; }
.profile-copy blockquote {
  border-top: 1px solid var(--rule-dark);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-style: italic;
  margin: 2.2rem 0;
  max-width: 42rem;
  padding-top: 1.5rem;
}
.profile figcaption { right: clamp(1.2rem, 3vw, 3rem); left: auto; }

.contact {
  background: var(--ink);
  color: var(--cream);
  display: grid;
  gap: clamp(3rem, 8vw, 10rem);
  grid-template-columns: .75fr 1.25fr;
  padding: clamp(5.5rem, 10vw, 9.5rem) var(--page);
}
.contact-heading h2 { margin-bottom: 2rem; }
.contact-heading h2 em { color: var(--leaf); }
.contact-heading p { color: var(--mist); max-width: 28rem; }
.contact-list { border-top: 1px solid var(--rule-light); }
.contact-list a {
  align-items: center;
  border-bottom: 1px solid var(--rule-light);
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: 2.5rem 7rem minmax(0, 1fr) auto;
  min-height: 7.5rem;
  padding: 1.2rem .8rem;
  text-decoration: none;
  transition: background-color .22s ease, color .22s ease, padding .22s ease;
}
.contact-list a:hover, .contact-list a:focus-visible {
  background: var(--leaf);
  color: var(--ink);
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
.contact-list a:hover img, .contact-list a:focus-visible img { filter: brightness(0); }
.contact-list a:hover span, .contact-list a:focus-visible span { color: var(--ink); }
.contact-list strong {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.05;
}
.contact-list small { color: var(--mist); }
.contact-list a:hover small, .contact-list a:focus-visible small { color: var(--ink); }

.site-footer {
  align-items: end;
  background: #091616;
  border-top: 1px solid var(--rule-light);
  color: var(--mist);
  display: grid;
  font-size: .7rem;
  gap: 1rem 2rem;
  grid-template-columns: 1fr 1fr 1fr;
  letter-spacing: .05em;
  padding: 2.5rem var(--page);
}
.site-footer p { margin: 0; }
.footer-brand {
  align-items: center;
  color: var(--cream);
  display: inline-flex;
  gap: .8rem;
  text-decoration: none;
}
.footer-brand img { height: 2.3rem; width: 2.3rem; }
.site-footer p:last-child { text-align: right; }

@media (max-width: 980px) {
  nav a:not(.nav-contact) { display: none; }
  .hero-copy { width: min(44rem, 82vw); }
  .opening-body { margin-left: 0; }
  .method { grid-template-columns: .82fr 1.18fr; }
  .method-visual { top: 78px; }
  .plane { grid-template-columns: 1fr; }
  .process, .questions, .contact { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer p:last-child { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 720px) {
  .site-header { height: 68px; }
  .brand strong { font-size: .72rem; }
  .nav-contact { padding: .55rem .7rem; }
  .hero { min-height: calc(100svh - 68px); }
  .hero-image { object-position: 62% center; }
  .hero-shade {
    background:
      linear-gradient(90deg, rgba(7, 18, 18, .87), rgba(7, 18, 18, .18)),
      linear-gradient(0deg, rgba(7, 17, 17, .9) 0%, rgba(7, 17, 17, .22) 72%);
  }
  .hero-copy {
    justify-content: flex-end;
    min-height: calc(100svh - 68px);
    padding-bottom: 6rem;
    width: 100%;
  }
  h1 { font-size: clamp(4.4rem, 21vw, 6.7rem); }
  .hero-deck { font-size: 1.08rem; max-width: 23rem; }
  .hero-foot { display: none; }
  h2 { font-size: clamp(3.2rem, 15vw, 5.2rem); }
  .opening-heading { grid-template-columns: 1fr; }
  .folio { justify-self: end; }
  .opening-body { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; }
  .method-visual {
    height: 72svh;
    position: relative;
    top: auto;
  }
  .method-reading { padding-left: var(--page); padding-right: var(--page); }
  .plane { padding: 3.2rem 0; }
  .process { gap: 3.5rem; }
  .statement { min-height: 65svh; }
  .statement p { font-size: clamp(3.6rem, 17vw, 6rem); }
  .reel, .conversation, .profile { grid-template-columns: 1fr; }
  .video-page { min-height: auto; padding: 5rem var(--page); }
  .video-page video { max-height: 70svh; max-width: min(100%, 22rem); }
  .conversation figure, .profile figure { min-height: 72svh; }
  .profile figure { order: 1; }
  .profile-copy { order: 2; }
  .contact-list a {
    gap: .7rem 1rem;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    min-height: 8rem;
  }
  .contact-list span { grid-column: 2; grid-row: 1; }
  .contact-list img { grid-column: 1; grid-row: 1 / span 2; }
  .contact-list strong { grid-column: 2 / -1; }
  .contact-list small { display: none; }
  .site-footer { align-items: start; grid-template-columns: 1fr; }
  .site-footer p:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-copy { opacity: 1; transform: none; }
  .hero-image { transform: none; }
}