:root {
  --flour: #f3eee4;
  --paper: #fbf8f1;
  --butter: #e7b84b;
  --crust: #a94724;
  --brown: #26170f;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --edge: clamp(1.25rem, 4vw, 4.75rem);
  --section-space: clamp(5.25rem, 12vw, 10rem);
  --line: rgba(38, 23, 15, .25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--brown);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { display: block; width: 100%; max-width: 100%; height: auto; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--butter); outline-offset: 4px; }
.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .75rem 1rem;
  color: var(--paper);
  background: var(--brown);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.site-header {
  min-height: 4.75rem;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .65rem;
  border-bottom: 1px solid rgba(243, 238, 228, .2);
  color: var(--paper);
  background: var(--brown);
  position: relative;
  z-index: 20;
}
.wordmark {
  font: 600 clamp(1.55rem, 7vw, 2rem)/1 var(--serif);
  letter-spacing: -.045em;
  text-decoration: none;
}
.desktop-nav { display: none; }
.header-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 .85rem;
  border: 1px solid rgba(243, 238, 228, .7);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .65rem;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
}
.menu-toggle {
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0 10px;
  display: grid;
  align-content: center;
  gap: 7px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform .25s ease;
}
.site-header.template-layout-1 .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.site-header.template-layout-1 .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu {
  position: absolute;
  inset: 100% 0 auto;
  padding: 1rem var(--edge) 1.4rem;
  background: var(--brown);
  border-top: 1px solid rgba(243, 238, 228, .2);
}
.mobile-menu:not([hidden]) { display: grid; }
.mobile-menu a {
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(243, 238, 228, .18);
  text-decoration: none;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.concept-note {
  min-height: 2.3rem;
  padding: .55rem var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
  background: var(--butter);
  font-size: .58rem;
  line-height: 1.3;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.hero {
  color: var(--paper);
  background: var(--brown);
  position: relative;
}
.hero-copy { padding: clamp(2.7rem, 11vw, 5rem) var(--edge) 2rem; }
.hero-rhythm {
  margin: 0 0 1.6rem;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: .35rem;
  font-size: .61rem;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-rhythm span { display: flex; align-items: center; gap: .35rem; }
.hero-rhythm span:not(:last-child)::after { content: "—"; color: var(--butter); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 {
  max-width: 7em;
  margin: 0;
  font: 400 clamp(3.45rem, 16vw, 8.8rem)/.86 var(--serif);
  letter-spacing: -.065em;
}
.hero-intro {
  max-width: 24rem;
  margin: 1.7rem 0;
  color: rgba(251, 248, 241, .75);
  font-size: clamp(1rem, 2vw, 1.2rem);
}
.button {
  min-height: 48px;
  width: fit-content;
  max-width: 100%;
  padding: 0 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
  font-size: .7rem;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.button-light { color: var(--brown); background: var(--butter); }
.button-outline { border: 1px solid rgba(251, 248, 241, .6); }
.hero-media { margin: 0; background: var(--brown); }
.hero-media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 61% 50%; }
.hero-media figcaption,
.template-layout-2 {
  min-height: 3.5rem;
  padding: .8rem var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: rgba(251, 248, 241, .72);
  background: var(--brown);
  border-top: 1px solid rgba(243, 238, 228, .2);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-folio { display: none; }

.selection { padding: var(--section-space) var(--edge); background: var(--flour); }
.section-heading { margin-bottom: 3rem; display: grid; gap: 1.8rem; }
.chapter,
.template-layout-3 {
  width: 3rem;
  margin: 0;
  padding-top: .3rem;
  border-top: 1px solid currentColor;
  font-size: .7rem;
  line-height: 1;
  letter-spacing: .12em;
}
.chapter-pale { color: var(--butter); }
h2 {
  margin: 0;
  font: 400 clamp(2.85rem, 12vw, 6.9rem)/.92 var(--serif);
  letter-spacing: -.055em;
}
.section-heading > div > p,
.story-header > p:last-child,
.question-intro > p:last-child {
  max-width: 28rem;
  margin: 1.2rem 0 0;
  color: rgba(38, 23, 15, .68);
}
.selection-list,
.template-layout-4 { border-top: 1px solid var(--line); }
.selection-row {
  padding: 1.25rem 0 1.45rem;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: .35rem .7rem;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.selection-no { margin: 0; font-size: .62rem; color: var(--crust); }
.selection-row h3 { margin: 0; font: 400 2rem/1 var(--serif); letter-spacing: -.035em; }
.selection-row > p:nth-of-type(2) { grid-column: 2 / -1; max-width: 29rem; margin: .45rem 0 0; color: rgba(38, 23, 15, .65); }
.selection-row > span { font-size: 1.2rem; }

.craft {
  padding: var(--section-space) var(--edge) 0;
  color: var(--paper);
  background: var(--crust);
  display: grid;
  gap: 3rem;
}
.craft-title-wrap { display: grid; gap: 1.6rem; }
.craft-statement > p { max-width: 32rem; margin: 0 0 2.5rem; font: 400 clamp(1.35rem, 5vw, 2.15rem)/1.25 var(--serif); }
.process-words { border-top: 1px solid rgba(251, 248, 241, .35); }
.process-words span {
  min-height: 3.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(251, 248, 241, .35);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .7rem;
}
.process-words b { font-weight: 400; color: var(--butter); }
.craft-crop { margin: 0 calc(var(--edge) * -1); }
.craft-crop img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 70% 48%; }
.craft-crop figcaption,
.template-layout-5 {
  padding: .8rem var(--edge) 1rem;
  color: rgba(251, 248, 241, .72);
  background: var(--crust);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.story { padding: var(--section-space) var(--edge); background: var(--paper); }
.story-header { display: grid; gap: 1.5rem; }
.story-header h2 { font-size: clamp(3.2rem, 13vw, 7.6rem); }
.contact-sheet { margin-top: 3rem; display: grid; gap: 1.1rem; }
.frame { margin: 0; background: var(--brown); }
.frame img { object-fit: cover; }
.frame-wide img { aspect-ratio: 4 / 3; object-position: 55% 50%; }
.frame-tall { width: 78%; margin-left: auto; }
.frame-tall img { aspect-ratio: 3 / 4; object-position: 89% 50%; }
.frame figcaption { color: var(--brown); background: transparent; padding-left: 0; padding-right: 0; }
blockquote {
  margin: 2rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--line);
}
blockquote p { margin: 0; font: 400 clamp(2rem, 8vw, 4.2rem)/1.05 var(--serif); letter-spacing: -.045em; }

.questions {
  padding: var(--section-space) var(--edge);
  display: grid;
  gap: 3.5rem;
  background: var(--butter);
}
.question-intro { display: grid; gap: 1.5rem; }
.question-list { border-top: 1px solid rgba(38, 23, 15, .4); }
details { border-bottom: 1px solid rgba(38, 23, 15, .4); }
summary {
  min-height: 5rem;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font: 400 1.25rem/1.2 var(--serif);
}
summary::-webkit-details-marker { display: none; }
summary i { width: 44px; height: 44px; position: relative; }
summary i::before,
summary i::after { content: ""; position: absolute; left: 12px; top: 21px; width: 20px; height: 1px; background: currentColor; }
summary i::after { transform: rotate(90deg); transition: transform .2s ease; }
details[open] summary i::after { transform: rotate(0); }
details > p { max-width: 35rem; margin: 0; padding: 0 3.7rem 1.4rem 0; }

.contact {
  min-height: 39rem;
  padding: var(--section-space) var(--edge) 2rem;
  color: var(--paper);
  background: var(--brown);
  display: flex;
  flex-direction: column;
}
.contact-main { margin-top: 3rem; }
.contact-main h2 { font-size: clamp(3.8rem, 16vw, 9.5rem); }
.contact-main > p { max-width: 30rem; margin: 1.6rem 0 2rem; color: rgba(251, 248, 241, .68); }
.contact-wordmark {
  margin: auto 0 0;
  padding-top: 5rem;
  font: 400 clamp(3.4rem, 18vw, 12rem)/.75 var(--serif);
  letter-spacing: -.065em;
  color: var(--butter);
}
.site-footer {
  padding: 1.1rem var(--edge);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--paper);
  background: var(--brown);
  border-top: 1px solid rgba(251, 248, 241, .2);
  font-size: .68rem;
}
.draft-note { max-width: 46rem; margin: 0; color: rgba(251, 248, 241, .65); }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; gap: 1rem; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }

@media (min-width: 48rem) {
  .site-header { min-height: 5.5rem; grid-template-columns: 1fr auto auto; gap: 2rem; }
  .desktop-nav { display: flex; gap: 1.75rem; }
  .desktop-nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
  .menu-toggle, .mobile-menu { display: none !important; }
  .hero-copy { min-height: 34rem; padding-bottom: 3.5rem; display: flex; flex-direction: column; justify-content: center; }
  .hero-rhythm { max-width: 20rem; }
  .hero-media img { aspect-ratio: 16 / 8; }
  .section-heading { grid-template-columns: 5rem 1fr; }
  .selection-row { grid-template-columns: 3.5rem minmax(11rem, .7fr) 1fr auto; gap: 1.5rem; padding: 1.7rem 0; }
  .selection-row > p:nth-of-type(2) { grid-column: auto; margin: 0; }
  .craft { grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr); }
  .craft-statement { padding-top: 3.3rem; }
  .craft-crop { grid-column: 1 / -1; margin-top: 1rem; }
  .craft-crop img { aspect-ratio: 16 / 7; }
  .story-header { grid-template-columns: 4rem minmax(0, 1.3fr) minmax(14rem, .7fr); align-items: end; }
  .contact-sheet { grid-template-columns: 1.35fr .65fr; align-items: start; }
  .frame-tall { width: 100%; margin: 5.5rem 0 0; }
  blockquote { grid-column: 1 / 2; width: 84%; }
  .questions { grid-template-columns: .8fr 1.2fr; gap: 6rem; }
  .site-footer { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 70rem) {
  .hero { min-height: 51rem; display: grid; grid-template-columns: minmax(31rem, .84fr) minmax(35rem, 1.16fr); }
  .hero-copy { min-height: 51rem; padding-top: 7rem; padding-right: 3rem; position: relative; z-index: 2; }
  .hero-rhythm { position: absolute; top: 8.3rem; left: var(--edge); }
  .hero-media { position: relative; min-height: 51rem; }
  .hero-media img { height: 51rem; aspect-ratio: auto; object-position: 58% 50%; }
  .hero-media figcaption { position: absolute; inset: auto 0 0; background: rgba(38, 23, 15, .82); backdrop-filter: none; }
  .hero-folio { display: block; position: absolute; left: var(--edge); bottom: 1.2rem; margin: 0; color: rgba(251, 248, 241, .45); font-size: .6rem; letter-spacing: .15em; }
  .selection { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8vw; }
  .selection .section-heading { grid-template-columns: 3.5rem 1fr; margin: 0; align-content: start; }
  .selection-row h3 { font-size: 2.6rem; }
  .craft { grid-template-columns: .76fr .7fr 1fr; padding-bottom: var(--section-space); align-items: center; gap: clamp(3rem, 6vw, 7rem); }
  .craft-title-wrap, .craft-statement { align-self: center; }
  .craft-crop { grid-column: 3; grid-row: 1; margin: 0 calc(var(--edge) * -1) 0 0; }
  .craft-crop img { height: 44rem; aspect-ratio: auto; object-position: 69% 50%; }
  .craft-crop figcaption { padding-left: 0; }
  .story-header { grid-template-columns: 4rem .9fr .55fr; gap: 4rem; }
  .contact-sheet { grid-template-columns: 1.42fr .58fr; gap: 2.2rem; }
  .frame-wide img { aspect-ratio: 16 / 9; }
  .frame-tall { width: 82%; margin-left: auto; }
  blockquote { width: 66%; margin-left: 13%; }
  .questions { grid-template-columns: .7fr 1.3fr; gap: 10vw; }
  .contact { min-height: 50rem; display: grid; grid-template-columns: 5rem 1fr; grid-template-rows: 1fr auto; }
  .contact-main { margin: 0; }
  .contact-main > p { margin-left: 42%; }
  .contact-main .button { margin-left: 42%; }
  .contact-wordmark { grid-column: 1 / -1; }
}

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