:root {
  --sand: #d8c8a8;
  --charcoal: #25221e;
  --oxide: #a65332;
  --night: #18243a;
  --chalk: #ece7dc;
  --day: 0;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--sand);
}
body {
  margin: 0;
  color: var(--charcoal);
  background: var(--sand);
  font-family: "Source Sans 3", sans-serif;
}
a {
  color: inherit;
}
.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 20;
  padding: 0.8rem 1rem;
  background: var(--chalk);
}
.skip-link:focus {
  top: 1rem;
}
.motion-toggle {
  position: fixed;
  z-index: 15;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(236, 231, 220, 0.55);
  border-radius: 999px;
  background: var(--night);
  color: var(--chalk);
  font: 600 0.62rem "Source Sans 3", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.motion-toggle span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--oxide);
  box-shadow: 0 0 0 0.2rem rgba(166, 83, 50, 0.2);
}
.motion-toggle b {
  font: inherit;
}
.motion-toggle[aria-pressed="false"] span {
  background: var(--sand);
  box-shadow: none;
}

/* Local system stacks keep the review route free of third-party font requests. */
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.wordmark, .approach h1, .section-copy h2, .planner h2, .material-register h3, .schedule li strong { font-family: Georgia, "Times New Roman", serif !important; }
.motion-toggle { min-height: 44px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid rgba(37, 34, 30, 0.28);
  color: var(--chalk);
  mix-blend-mode: difference;
}
.site-header a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  font-weight: 600;
}
.wordmark {
  font-family: "Source Serif 4", serif !important;
  font-size: 1rem !important;
  letter-spacing: 0.08em !important;
}
.wordmark span {
  color: var(--oxide);
}
.site-header p {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.62rem;
}
.site-header > a:last-child {
  justify-self: end;
  border-bottom: 1px solid;
}
.chapter {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  border-bottom: 1px solid rgba(37, 34, 30, 0.32);
}
.chapter-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--night);
}
.matte {
  position: absolute;
  inset: 0;
  background: rgba(37, 34, 30, 0.18);
}
.hero-copy {
  position: absolute;
  z-index: 2;
  left: 7vw;
  bottom: 15vh;
  color: var(--chalk);
  max-width: 70rem;
}
.folio {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.66rem;
  font-weight: 600;
}
.approach h1 {
  font:
    300 clamp(4rem, 9vw, 9rem) / 0.92 "Source Serif 4",
    serif;
  letter-spacing: -0.045em;
  margin: 0.45em 0 0.25em;
}
.approach h1 em {
  font-weight: 300;
}
.hero-copy > p:last-child {
  font-size: 1.15rem;
  max-width: 30rem;
  line-height: 1.5;
}
.concept-tag {
  position: absolute;
  z-index: 2;
  top: 8rem;
  right: 3rem;
  margin: 0;
  color: var(--chalk);
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.6rem;
}
.scroll-cue {
  position: absolute;
  z-index: 2;
  right: 3rem;
  bottom: 3rem;
  color: var(--chalk);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  font-size: 0.65rem;
  border-bottom: 1px solid;
  padding-bottom: 0.4rem;
}
.solar-axis {
  padding: 15vh 8vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.drawing-grid {
  position: absolute;
  inset: 0;
  background-size: 5vw 5vw;
  background-image:
    linear-gradient(rgba(37, 34, 30, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 34, 30, 0.09) 1px, transparent 1px);
}
.index {
  position: absolute;
  right: 5vw;
  top: 11vh;
  font:
    300 20vw/1 "Source Serif 4",
    serif;
  color: rgba(37, 34, 30, 0.08);
}
.section-copy {
  position: relative;
  z-index: 2;
  max-width: 52rem;
}
.section-copy h2,
.planner h2 {
  font:
    300 clamp(3.5rem, 7vw, 7rem) / 0.94 "Source Serif 4",
    serif;
  letter-spacing: -0.045em;
  margin: 0.25em 0;
}
.section-copy > p:last-child,
.planner-intro > p:last-child {
  font:
    400 1.05rem/1.65 "Source Sans 3",
    sans-serif;
  max-width: 34rem;
}
.sun-diagram {
  position: relative;
  z-index: 2;
  width: min(38vw, 35rem);
  aspect-ratio: 1;
  margin-left: auto;
  border: 1px solid var(--charcoal);
  border-radius: 50%;
}
.sun-diagram:before,
.sun-diagram:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(37, 34, 30, 0.4);
}
.sun-diagram:after {
  left: 0;
  right: 0;
  top: 50%;
  bottom: auto;
  border-left: 0;
  border-top: 1px solid rgba(37, 34, 30, 0.4);
}
.sun-diagram i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  border-top: 2px solid var(--oxide);
  transform: rotate(calc(-35deg + var(--day) * 30deg));
  transform-origin: left;
}
.sun-diagram b {
  position: absolute;
  left: 79%;
  top: 20%;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--oxide);
  border-radius: 50%;
}
.sun-diagram > span {
  position: absolute;
  left: 82%;
  top: 14%;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.sun-diagram figcaption {
  position: absolute;
  bottom: -2rem;
  left: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.62rem;
}
.aperture,
.alignment {
  min-height: 115svh;
  color: var(--chalk);
}
.film-note {
  position: absolute;
  z-index: 2;
  top: 8rem;
  left: 3rem;
  right: 3rem;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.62rem;
}
.on-film {
  position: absolute;
  z-index: 2;
  left: 7vw;
  bottom: 9vh;
  padding: 2rem 2.2rem;
  background: rgba(24, 36, 58, 0.82);
  border-top: 2px solid var(--oxide);
}
.material {
  padding: 15vh 7vw;
  background: var(--chalk);
}
.material-register {
  position: relative;
  z-index: 2;
  margin-top: 9vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--charcoal);
  border: 1px solid var(--charcoal);
}
.material-register article {
  background: var(--chalk);
  padding: 1.2rem;
}
.material-register article > span {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.material-register article > div {
  height: 35vh;
  margin: 1.2rem 0 1.5rem;
}
.limestone > div {
  background: #cbb992;
  border: 1rem solid #d9c9aa;
  box-shadow: inset 1.5rem 0 rgba(80, 66, 46, 0.08);
}
.steel > div {
  background: #6f4a3e;
  border-left: 3rem solid #493c36;
  box-shadow: inset -2rem 0 #8b5b47;
}
.brass > div {
  background: #88734c;
  border-top: 5rem solid #aa9061;
  box-shadow: inset 0 -2rem #5d513b;
}
.material-register h3 {
  font:
    400 1.8rem "Source Serif 4",
    serif;
  margin: 0;
}
.material-register p {
  line-height: 1.5;
  color: #645d54;
}
.night-matte {
  position: absolute;
  inset: 0;
  background: rgba(24, 36, 58, 0.22);
}
.fallback-caption {
  display: none;
}
.video-error .chapter-film {
  display: none;
}
.video-error .fallback-caption {
  display: block;
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  z-index: 3;
}
.alignment.video-error {
  background: var(--night) url("media/so-03.webp") center/cover no-repeat;
}
.planner {
  padding: 14vh 7vw 3rem;
  background: var(--charcoal);
  color: var(--chalk);
  display: grid;
  grid-template-columns: 0.8fr 1fr 0.8fr;
  gap: 5vw;
  align-items: start;
}
.planner form {
  margin-top: 4rem;
}
.planner form > label {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.64rem;
}
.planner input,
.planner select {
  border: 0;
  border-bottom: 1px solid rgba(236, 231, 220, 0.5);
  background: transparent;
  color: var(--chalk);
  padding: 0.55rem 0;
  font: 400 1.2rem "Source Sans 3";
}
.planner input[type="range"] {
  accent-color: var(--oxide);
}
.planner output {
  font-weight: 600;
  color: var(--sand);
}
.form-actions {
  display: flex;
  gap: 0.75rem;
}
.form-actions button {
  min-height: 44px;
  border: 1px solid var(--sand);
  background: var(--sand);
  color: var(--charcoal);
  padding: 0.9rem 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font: 600 0.65rem "Source Sans 3";
}
.planner input,
.planner select { min-height: 44px; }
html[data-motion="off"] .chapter-film { display: none; }
html[data-motion="off"] .approach { background: var(--charcoal) url("media/so-01.webp") center/cover no-repeat; }
html[data-motion="off"] .aperture { background: var(--night) url("media/so-02.webp") center/cover no-repeat; }
html[data-motion="off"] .alignment { background: var(--night) url("media/so-03.webp") center/cover no-repeat; }
.form-actions button + button {
  background: transparent;
  color: var(--chalk);
  border-color: rgba(236, 231, 220, 0.45);
}
.schedule {
  margin-top: 4rem;
  border-top: 2px solid var(--oxide);
}
.schedule > p {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--sand);
  font-size: 0.62rem;
  padding-top: 1rem;
}
.schedule ol {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}
.schedule li {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(236, 231, 220, 0.25);
  align-items: center;
}
.schedule li span,
.schedule time {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--sand);
}
.schedule li strong {
  font:
    400 1.15rem "Source Serif 4",
    serif;
}
.planner footer {
  grid-column: 1/-1;
  margin-top: 11vh;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(236, 231, 220, 0.4);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}
.planner footer a {
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.1em;
}
:focus-visible {
  outline: 2px solid var(--oxide);
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .site-header {
    padding: 1rem;
    grid-template-columns: 1fr auto;
  }
  .site-header p {
    display: none;
  }
  .hero-copy {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 18vh;
  }
  .approach h1 {
    font-size: 14vw;
  }
  .concept-tag {
    top: 6rem;
    right: 1rem;
  }
  .scroll-cue {
    left: 1.25rem;
    right: auto;
    bottom: 2rem;
  }
  .solar-axis {
    padding: 7rem 1.25rem 6rem;
    display: block;
  }
  .sun-diagram {
    width: 78vw;
    margin: 5rem auto 2rem;
  }
  .section-copy h2,
  .planner h2 {
    font-size: 14vw;
  }
  .film-note {
    top: 6rem;
    left: 1.25rem;
    right: 1.25rem;
  }
  .on-film {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 2rem;
    padding: 1.2rem;
  }
  .material {
    padding: 7rem 1.25rem;
  }
  .material-register {
    display: block;
  }
  .material-register article {
    border-bottom: 1px solid var(--charcoal);
  }
  .material-register article > div {
    height: 25vh;
  }
  .planner {
    padding: 7rem 1.25rem 2rem;
    display: block;
  }
  .planner form,
  .schedule {
    margin-top: 4rem;
  }
  .planner footer {
    display: block;
    line-height: 1.5;
    margin-top: 5rem;
  }
  .chapter-film {
    object-position: center;
  }
  .approach .chapter-film {
    object-position: 60% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .sun-diagram i {
    transform: rotate(-20deg);
  }
  .chapter-film {
    display: none;
  }
  .approach {
    background: var(--charcoal) url("media/so-01.webp") center/cover no-repeat;
  }
  .aperture {
    background: var(--night) url("media/so-02.webp") center/cover no-repeat;
  }
  .alignment {
    background: var(--night) url("media/so-03.webp") center/cover no-repeat;
  }
  html[data-motion="on"] .chapter-film {
    display: block;
  }
}