:root {
  color-scheme:dark;
  --ink:#101213;
  --paper:#ebe9e1;
  --muted:#a2a4a2;
  --accent:#c2a788;
  --gutter:clamp(1.5rem,5vw,6rem);
  font-family:Arial,Helvetica,sans-serif;
  background:var(--ink);
  color:var(--paper);
  scroll-padding-top:6rem
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
button,a {
  -webkit-tap-highlight-color:transparent
}
[hidden] {
  display:none!important
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:7px
}
::selection {
  color:var(--ink);
  background:var(--accent)
}
em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400
}
.site {
  overflow:clip;
  --pointer-x:0px;
  --pointer-y:0px
}
.skip-link {
  position:fixed;
  z-index:30;
  top:1rem;
  left:1rem;
  padding:1rem;
  background:var(--paper);
  color:var(--ink);
  transform:translateY(-200%)
}
.skip-link:focus {
  transform:translateY(0)
}
.masthead {
  position:fixed;
  z-index:10;
  top:0;
  inset-inline:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:2.35rem var(--gutter) 1.4rem;
  background:linear-gradient(var(--ink),transparent)
}
.wordmark {
  display:grid;
  font-size:.875rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.025em
}
.edition {
  font-size:.75rem;
  letter-spacing:.2em;
  color:#c3c5c2
}
.motion-toggle {
  display:flex;
  align-items:center;
  gap:.65rem;
  min-height:2.75rem;
  padding:.25rem 0 .25rem .25rem;
  border:0;
  color:#c3c5c2;
  background:transparent;
  font-size:.75rem
}
.motion-toggle:hover {
  color:var(--paper)
}
.motion-bars {
  display:flex;
  align-items:center;
  gap:3px;
  width:18px;
  height:18px
}
.motion-bars i {
  display:block;
  width:2px;
  height:12px;
  background:var(--accent);
  transform:scaleY(.4)
}
.motion-bars i:nth-child(2) {
  height:18px
}
.motion-bars i:nth-child(3) {
  height:14px
}
.motion-bars i:nth-child(4) {
  height:8px
}
.chapter-nav {
  position:fixed;
  z-index:9;
  right:1.4rem;
  top:50%;
  display:grid;
  gap:.8rem;
  transform:translateY(-50%)
}
.chapter-nav a {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  position:relative;
  min-height:2.75rem;
  min-width:2.75rem;
  font-size:.75rem
}
.chapter-number {
  display:grid;
  place-items:center;
  width:1.8rem;
  height:1.8rem;
  border:1px solid transparent;
  border-radius:50%;
  color:#848885;
  transition:color .3s,border-color .3s
}
.chapter-nav a[aria-current] .chapter-number {
  border-color:#777d75;
  color:var(--paper)
}
.chapter-name {
  position:absolute;
  right:2.6rem;
  padding:.5rem .7rem;
  background:#151718;
  color:var(--paper);
  white-space:nowrap;
  opacity:0;
  pointer-events:none
}
.chapter-nav a:hover .chapter-name,.chapter-nav a:focus-visible .chapter-name {
  opacity:1
}
.chapter {
  position:relative;
  isolation:isolate;
  scroll-margin-top:0
}
.eyebrow {
  font-size:.75rem;
  letter-spacing:.18em;
  font-weight:400;
  line-height:1.6;
  color:var(--accent)
}
.hero {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:max(52rem,100svh);
  padding:9rem var(--gutter) 7.5rem
}
.portrait {
  position:absolute;
  z-index:-2;
  inset:0 0 0 32%
}
.portrait img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:53% 32%;
  filter:saturate(.48) contrast(1.035)
}
.portrait::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--ink),rgba(16,18,19,.86) 9%,rgba(16,18,19,.22) 34%,transparent 58%),linear-gradient(0deg,var(--ink),transparent 27%),linear-gradient(180deg,rgba(16,18,19,.3),transparent 25%)
}
.hero-content {
  width:min(100%,45rem)
}
.hero .eyebrow {
  margin:0 0 2.2rem
}
h1 {
  margin:0;
  font-size:clamp(5rem,10.2vw,10rem);
  font-weight:900;
  line-height:.91;
  letter-spacing:-.065em
}
.title-line {
  display:block;
  padding-block:.09em;
  margin-block:-.09em;
  overflow:clip
}
.title-line>span {
  display:inline-block
}
.title-not {
  width:fit-content;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-style:italic;
  font-size:1.04em;
  letter-spacing:-.08em;
  color:var(--accent);
  padding-right:.16em;
  margin-top:.035em;
  margin-bottom:.075em
}
.intro {
  margin:2.3rem 0 0;
  font-size:clamp(1.2rem,1.55vw,1.55rem);
  line-height:1.6;
  letter-spacing:-.015em
}
.intro>span,.intro>em {
  display:block
}
.intro>span {
  color:#c8c9c4
}
.intro>em {
  font-size:1.28em;
  color:var(--paper)
}
.hero-footer {
  position:absolute;
  inset-inline:var(--gutter);
  bottom:2.1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem
}
.hero-note {
  font-size:.875rem;
  color:var(--muted)
}
.continue-link {
  display:inline-flex;
  align-items:center;
  gap:1rem;
  min-height:3rem;
  font-size:.875rem
}
.down-arrow {
  display:grid;
  place-items:center;
  width:2.9rem;
  height:2.9rem;
  border:1px solid #646863;
  border-radius:50%;
  font-size:1.2rem;
  transition:border-color .2s,background .2s
}
.continue-link:hover .down-arrow {
  border-color:var(--paper);
  background:#ffffff09
}
.interlude {
  padding:5rem var(--gutter) 6rem;
  background:var(--ink)
}
.section-top {
  display:flex;
  align-items:center;
  gap:2rem
}
.section-top .eyebrow {
  margin:0;
  white-space:nowrap
}
.section-rule {
  width:100%;
  height:1px;
  background:#343736
}
.reflection {
  position:relative;
  padding:6.5rem 8% 4rem
}
.years-figure {
  position:absolute;
  z-index:-1;
  right:-1%;
  top:.025em;
  font-size:clamp(20rem,48vw,52rem);
  line-height:1;
  font-weight:700;
  letter-spacing:-.09em;
  color:#ffffff03;
  -webkit-text-stroke:1px #ffffff07;
  pointer-events:none
}
.reflection h2 {
  margin:0;
  max-width:66rem;
  font-size:clamp(2.6rem,5.6vw,6rem);
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.05em
}
.reflection h2>span {
  display:block
}
.reflection h2>span+span {
  margin-top:.6em
}
.reflection .muted {
  color:#8e9390
}
.reflection em {
  color:var(--accent);
  font-size:1.12em;
  letter-spacing:-.06em
}
.philosophy {
  margin:3rem 8% 0;
  position:relative;
  --resolve:1
}
.philosophy-type {
  position:relative;
  padding-top:2rem
}
.earned-word,.given-echo {
  font-size:clamp(4rem,11.3vw,12rem);
  font-weight:900;
  letter-spacing:-.065em;
  line-height:1
}
.earned-word {
  display:block
}
.given-echo {
  position:absolute;
  top:-.33em;
  left:8%;
  color:transparent;
  -webkit-text-stroke:1px #727772;
  opacity:.2;
  z-index:-1
}
.philosophy-caption {
  font-size:1rem;
  line-height:1.6;
  color:var(--muted);
  margin:1.5rem 0 0
}
.ending {
  min-height:max(48rem,100svh);
  display:flex;
  flex-direction:column;
  padding:3rem var(--gutter) 0;
  background:#080a0b
}
.ending-content {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:7rem 0 5rem
}
.ending-prelude {
  color:var(--muted);
  font-size:.875rem;
  letter-spacing:.2em;
  margin:0 0 2rem
}
.ending h2 {
  font-size:clamp(4.5rem,9vw,9.5rem);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.065em;
  margin:0
}
.ending h2 em {
  font-size:1.2em;
  color:var(--accent)
}
.ending-line {
  width:3rem;
  height:1px;
  background:var(--accent);
  margin:2.8rem 0 1.8rem
}
.ending-signature {
  margin:0;
  font-size:.875rem;
  letter-spacing:.12em
}
.ending-year {
  font-size:.875rem;
  letter-spacing:.12em;
  color:var(--muted);
  margin:.8rem 0 0
}
.ending-year span {
  display:inline-block;
  margin-left:.6rem;
  color:var(--accent)
}
.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.7rem 0;
  border-top:1px solid #2a2d2d;
  font-size:.8125rem;
  color:var(--muted)
}
.text-button {
  border:0;
  background:none;
  color:inherit;
  font-size:inherit;
  padding:.75rem 0
}
.footer a {
  padding:.75rem 0
}
.text-button:hover,.footer a:hover {
  color:var(--paper)
}
.text-button:disabled {
  opacity:.4;
  cursor:default
}
.text-button span,.back-to-top span {
  display:inline-block;
  margin-left:.5rem;
  color:var(--accent)
}
.opening {
  position:fixed;
  z-index:100;
  inset:0;
  background:#080a0b;
  color:var(--paper)
}
.opening-credit {
  position:absolute;
  top:3rem;
  left:var(--gutter);
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--muted)
}
.opening-words {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:var(--gutter);
  pointer-events:none
}
.opening-beat {
  grid-area:1/1;
  font-size:clamp(2.2rem,6vw,6.5rem);
  line-height:1.15;
  letter-spacing:-.055em;
  text-align:center;
  opacity:0
}
.opening-beat em {
  color:var(--accent)
}
.skip-opening {
  position:absolute;
  bottom:2.4rem;
  right:var(--gutter);
  min-height:2.75rem;
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:.875rem
}
.skip-opening span {
  margin-left:.65rem;
  color:var(--accent)
}
.opening-progress {
  position:absolute;
  height:1px;
  background:var(--accent);
  bottom:0;
  left:0;
  width:100%;
  transform:scaleX(0);
  transform-origin:left
}
@media(prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior:smooth
  }
  .motion-enabled.hero-ready:not(.hero-settled) .title-line>span {
    animation:word-enter 1.15s cubic-bezier(.16,1,.3,1) both
  }
  .motion-enabled.hero-ready:not(.hero-settled) .title-line:nth-child(2)>span {
    animation-delay:.15s
  }
  .motion-enabled.hero-ready:not(.hero-settled) .title-line:nth-child(3)>span {
    animation-delay:.3s
  }
  .motion-enabled.hero-ready:not(.hero-settled) .hero-enter {
    animation:rise-in 1.2s .4s both
  }
  .motion-enabled.hero-ready:not(.hero-settled) .hero .intro {
    animation-delay:.65s
  }
  .motion-enabled.hero-ready:not(.hero-settled) .portrait {
    animation:portrait-enter 1.6s both
  }
  .motion-enabled .portrait img {
    animation:portrait-drift 20s ease-in-out infinite alternate;
    will-change:transform
  }
  .motion-enabled .hero-content {
    transform:translate3d(calc(var(--pointer-x) * -.25),calc(var(--pointer-y) * -.25),0)
  }
  .motion-enabled .motion-bars i {
    animation:frequency 1s ease-in-out infinite alternate
  }
  .motion-enabled .motion-bars i:nth-child(2) {
    animation-delay:-.65s
  }
  .motion-enabled .motion-bars i:nth-child(3) {
    animation-delay:-.3s
  }
  .motion-enabled .motion-bars i:nth-child(4) {
    animation-delay:-.8s
  }
  .motion-enabled .reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .85s ease,transform 1s cubic-bezier(.16,1,.3,1)
  }
  .motion-enabled .reveal.is-visible {
    opacity:1;
    transform:translateY(0)
  }
  .motion-enabled .earned-word {
    filter:blur(calc((1 - var(--resolve)) * 9px));
    opacity:calc(.45 + var(--resolve) * .55);
    transform:translateY(calc((1 - var(--resolve)) * 15px))
  }
  .motion-enabled .given-echo {
    opacity:calc((1 - var(--resolve)) * .45 + .025);
    transform:translateX(calc(var(--resolve) * 25px));
    filter:blur(calc(var(--resolve) * 3px))
  }
  .motion-paused *,.motion-paused *::before,.motion-paused *::after {
    animation-play-state:paused!important;
    transition:none!important
  }
  .motion-paused .reveal {
    opacity:1;
    transform:none
  }
  .motion-paused .earned-word {
    filter:none;
    opacity:1;
    transform:none
  }
  .motion-paused .given-echo {
    opacity:.12;
    transform:none;
    filter:none
  }
  .opening.is-playing {
    animation:opening-exit .4s 2.65s both
  }
  .opening.is-playing .opening-beat {
    animation:opening-beat .95s both
  }
  .opening.is-playing .opening-beat:nth-child(2) {
    animation-delay:.82s
  }
  .opening.is-playing .opening-beat:nth-child(3) {
    animation-delay:1.64s
  }
  .opening.is-playing .opening-progress {
    animation:opening-progress 2.8s linear both
  }
  @keyframes word-enter {
    from {
      transform:translateY(115%) rotate(4deg);
      opacity:0
    }
    to {
      transform:none;
      opacity:1
    }
  }
  @keyframes rise-in {
    from {
      opacity:0;
      transform:translateY(12px)
    }
    to {
      opacity:1;
      transform:none
    }
  }
  @keyframes portrait-enter {
    from {
      opacity:0
    }
    to {
      opacity:1
    }
  }
  @keyframes portrait-drift {
    from {
      transform:translate3d(var(--pointer-x),var(--pointer-y),0) scale(1.02)
    }
    to {
      transform:translate3d(var(--pointer-x),var(--pointer-y),0) scale(1.075)
    }
  }
  @keyframes frequency {
    from {
      transform:scaleY(.35)
    }
    to {
      transform:scaleY(1)
    }
  }
  @keyframes opening-beat {
    0% {
      opacity:0;
      transform:translateY(12px)
    }
    23%,76% {
      opacity:1;
      transform:none
    }
    100% {
      opacity:0;
      transform:translateY(-8px)
    }
  }
  @keyframes opening-exit {
    to {
      opacity:0;
      visibility:hidden
    }
  }
  @keyframes opening-progress {
    to {
      transform:scaleX(1)
    }
  }
}
@media(min-width:1800px) {
  .portrait {
    left:37%
  }
}
@media(max-width:1050px) {
  .chapter-nav {
    right:.3rem
  }
  .reflection {
    padding-inline:3%
  }
  .philosophy {
    margin-inline:3%
  }
}
@media(max-width:760px) {
  :root {
    scroll-padding-top:5rem
  }
  .masthead {
    padding-top:1.4rem;
    gap:1rem
  }
  .edition {
    font-size:.75rem;
    letter-spacing:.1em;
    margin-left:auto
  }
  .motion-label {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap
  }
  .motion-toggle {
    justify-content:center;
    width:2.75rem
  }
  .wordmark {
    font-size:.8125rem
  }
  .chapter-nav {
    display:none
  }
  .hero {
    min-height:max(55rem,100svh);
    justify-content:flex-end;
    padding-top:27rem;
    padding-bottom:8rem
  }
  .portrait {
    inset:0 0 auto;
    height:40rem
  }
  .portrait img {
    object-position:47% top
  }
  .portrait::after {
    background:linear-gradient(0deg,var(--ink),rgba(16,18,19,.88) 15%,rgba(16,18,19,.14) 47%,transparent 72%),linear-gradient(180deg,rgba(16,18,19,.45),transparent 28%)
  }
  .hero .eyebrow {
    margin-bottom:1.4rem
  }
  h1 {
    font-size:clamp(3.45rem,16vw,6.8rem);
    line-height:.98
  }
  .title-not {
    display:inline;
    margin:0 .1em 0 0;
    padding-right:0;
    font-size:.98em
  }
  .title-line:last-child {
    display:inline
  }
  .intro {
    font-size:1.15rem;
    margin-top:1.6rem
  }
  .intro>em {
    font-size:1.28em
  }
  .hero-footer {
    bottom:1.5rem
  }
  .hero-note {
    max-width:10rem;
    font-size:.8125rem;
    line-height:1.6
  }
  .continue-link {
    gap:.7rem;
    font-size:.8125rem
  }
  .interlude {
    padding-top:4rem;
    padding-bottom:5rem
  }
  .section-top {
    gap:1.1rem
  }
  .section-top .eyebrow {
    font-size:.75rem;
    letter-spacing:.12em
  }
  .reflection {
    padding:4rem 0 3rem
  }
  .reflection h2 {
    font-size:clamp(2rem,7.8vw,3.7rem);
    line-height:1.15;
    letter-spacing:-.045em
  }
  .years-figure {
    font-size:82vw;
    top:.25em;
    right:-.02em
  }
  .philosophy {
    margin:2rem 0 0
  }
  .earned-word,.given-echo {
    font-size:clamp(3.6rem,15.2vw,7rem)
  }
  .philosophy-caption {
    font-size:.9375rem;
    margin-top:1.25rem
  }
  .ending {
    min-height:max(47rem,100svh);
    padding-top:2.5rem
  }
  .ending-content {
    padding-top:5rem;
    padding-bottom:4rem
  }
  .ending-prelude {
    font-size:.75rem
  }
  .ending h2 {
    font-size:clamp(4rem,17vw,7rem)
  }
  .footer {
    flex-wrap:wrap;
    gap:.4rem 1rem;
    font-size:.75rem
  }
  .domain {
    flex-basis:100%;
    padding-bottom:.5rem
  }
  .opening-credit {
    top:2rem;
    letter-spacing:.1em
  }
  .opening-beat {
    font-size:clamp(2.1rem,8vw,4rem)
  }
}
@media(max-width:360px) {
  .edition {
    max-width:7rem;
    font-size:.75rem;
    line-height:1.5
  }
  h1 {
    font-size:3.32rem
  }
  .hero {
    padding-top:25rem
  }
  .intro {
    font-size:1.0625rem
  }
}
/* Keep the crop masked while the photograph drifts, and never hide content on pause. */
.portrait {
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  html.motion-paused {
    scroll-behavior: auto;
  }
  .motion-paused .hero-enter,
  .motion-paused .title-line > span,
  .motion-paused .portrait {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 761px) and (max-width: 1050px) {
  h1 {
    font-size: 9.7vw;
  }
}
.is-scrolled .masthead {
  background: rgba(16,18,19,.97);
}
@media (max-width: 760px) {
  .hero {
    min-height: max(52rem,100svh);
  }
}
@media (max-width: 760px) {
  .title-not {
    margin-right: .18em;
  }
}