:root{
  --paper:#0F1B2D;
  --paper-2:#1C2839;
  --paper-rgb:15 27 45;
  --paper-2-rgb:28 40 57;
  --ink:#EAE4D6;
  --ink-2:#C2BDB0;
  --ink-soft:#9C9A93;
  --ink-faint:#8D9091;
  --rule:#313B4A;
  --rule-soft:#202B3C;
  --accent:#CEB785;
  --accent-soft:rgba(206,183,133,.26);
  --on-accent:#0F1B2D;
  --line-rgb:206,183,133;
  --line-boost:1.15;
  --photo-filter:saturate(.70) contrast(1.07) brightness(.72);
  --photo-veil:.28;
  --credit-opacity:.62;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:1200px;margin:0 auto;padding:0 80px}
@media (max-width:900px){.wrap{padding:0 40px}}
@media (max-width:640px){.wrap{padding:0 24px}}

.sc{
  font-family:"EB Garamond",Georgia,serif;
  font-size:12px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.4;
}

.display{
  font-family:"Newsreader",Georgia,serif;
  font-weight:200;letter-spacing:-.018em;line-height:1.06;
  text-wrap:balance;color:var(--ink);margin:0;
}

section{padding:clamp(88px,13vh,168px) 0}

.btn{
  display:inline-block;
  font-family:"EB Garamond",Georgia,serif;
  font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 30px;
  border:1px solid var(--accent);
  background:var(--accent);color:var(--on-accent);
  text-decoration:none;cursor:pointer;
  transition:background .35s,color .35s,border-color .35s;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--accent)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--accent);color:var(--on-accent)}

.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,.84,.44,1)}
.js .reveal.in{opacity:1;transform:none}

.rail{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(24px,5vw,72px)}
@media (max-width:820px){.rail{grid-template-columns:1fr;gap:28px}}

.nav{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding:20px 48px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
@media (max-width:820px){.nav{padding:15px 24px 13px}}
.brand{display:flex;flex-direction:column;gap:5px;line-height:1;text-decoration:none}
.brand .word{
  font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:16px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding-right:.28em;
}
.brand .sub{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.navlinks{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.navlinks a{
  font-size:15.5px;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s,color .3s;
}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
.navlinks a.enter{font-style:italic;color:var(--accent);border-bottom-color:var(--accent-soft)}

.hero{position:relative;overflow:hidden;padding-top:clamp(64px,9vh,120px);
      padding-bottom:calc(clamp(64px,9vh,120px) + 15px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  gap:clamp(20px,2.2vw,32px);align-items:center;
}

.hero h1{font-size:clamp(36px,7.4vw,64px)}

.hero h1 em{font-style:normal;color:var(--accent)}
.hero .subhead{
  margin:18px 0 0;max-width:31ch;
  font-family:"Newsreader",Georgia,serif;
  font-weight:200;font-style:italic;color:var(--ink);
  font-size:clamp(23px,3.4vw,34px);line-height:1.22;
  letter-spacing:-.01em;text-wrap:balance;
}
.hero .eyebrow{margin:0 0 34px}
.hero .lede{margin:34px 0 0;font-size:20px;line-height:1.62;color:var(--ink-2);max-width:58ch}

@media (max-width:640px){.hero .lede br{display:none}}
.hero .lede b{font-weight:500;color:var(--ink)}

.hero .cta{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,1.8vw,24px);margin-top:clamp(32px,4vw,42px);
}

@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{display:contents}
  .hero .eyebrow,.hero h1,.hero .subhead{order:1}
  .hero .plate{order:2;margin:clamp(36px,8vw,56px) auto clamp(62px,12vw,80px)}
  .hero .lede{order:3;margin-top:0}
  .hero .cta{order:4}
}

@media (max-width:640px){
  .hero{padding-top:40px;padding-bottom:56px}
  .hero h1{font-size:42px}

  .hero .eyebrow{font-size:10px;margin-bottom:16px}
  .hero .cta{justify-content:center}
  .hero .subhead{margin-top:12px}
  .hero .plate{margin:22px auto 50px}
  .hero .cta{margin-top:24px}
}

.plate{position:relative;width:100%;aspect-ratio:1;max-width:620px;margin-inline:auto;
       cursor:crosshair}
.plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.plate .cap{
  position:absolute;left:0;right:0;bottom:-30px;text-align:center;
  font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:500;
}

.pattern{padding-top:calc(clamp(64px,9vh,110px) - 15px)}

.strip{
  margin:0 0 clamp(52px,7vw,88px);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2px;
}
.strip-dots,
.shot.is-clone{display:none}

@media (max-width:820px){
  .strip{
    position:relative;margin-bottom:0;
    display:flex;gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding-inline:18vw;scroll-padding-inline:18vw;
    scrollbar-width:none;
  }
  .strip::-webkit-scrollbar{display:none}
  .shot{flex:0 0 64vw;scroll-snap-align:center;scroll-snap-stop:always;gap:16px}
  .shot.is-clone{display:flex}
  .shot figcaption{justify-content:center;padding:0}

  .strip-dots{
    display:flex;justify-content:center;gap:10px;
    margin:24px 0 clamp(48px,12vw,64px);
  }
  .strip-dots button{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:var(--ink);opacity:.18;cursor:pointer;
    transition:opacity .3s;
  }
  .strip-dots button[aria-current="true"]{opacity:.8}
  .strip-dots button:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
}

.shot{margin:0;display:flex;flex-direction:column;gap:12px}
.shot .frame{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
}
.shot img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;

  filter:saturate(.86) contrast(1.02);
}

.shot figcaption{
  display:flex;align-items:center;gap:10px;padding:0 clamp(10px,1.2vw,18px);
  font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
}
.shot figcaption i{flex:none;width:16px;height:1px;background:var(--accent);opacity:.75}

.pattern .statement{max-width:70ch;margin-inline:auto;text-align:center}
.pattern h2{font-size:clamp(26px,3.4vw,42px);margin-bottom:28px}
.pattern .prose{max-width:64ch;margin-inline:auto}
.pattern .prose p{text-wrap:pretty}

@media (max-width:820px){
  .pattern h2::after{
    content:"";display:block;width:36px;height:1px;
    margin:26px auto 0;background:var(--ink-faint);opacity:.6;
  }
}

.band{
  position:relative;width:100%;margin:0;
  aspect-ratio:2.4;
  overflow:hidden;
  background:var(--paper);
}
@media (max-width:820px){.band{aspect-ratio:1.6}}

.band img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  filter:var(--photo-filter);
}

.band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgb(var(--paper-rgb) / 1) 0%,
      rgb(var(--paper-rgb) / 0) 20%,
      rgb(var(--paper-rgb) / 0) 82%,
      rgb(var(--paper-rgb) / 1) 100%),
    radial-gradient(ellipse 62% 58% at 50% 50%,
      rgb(var(--paper-rgb) / .46) 0%,
      rgb(var(--paper-rgb) / 0) 72%),
    rgb(var(--paper-rgb) / var(--photo-veil));
}

.band-quote{
  position:absolute;z-index:1;margin:0;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(88%,30ch);text-align:center;
  font-family:"Newsreader",Georgia,serif;
  font-weight:200;font-size:clamp(21px,3vw,38px);line-height:1.24;
  letter-spacing:-.014em;color:var(--ink);text-wrap:balance;
  text-shadow:0 1px 26px rgb(var(--paper-rgb) / .55);
}

.band-credit{
  position:absolute;z-index:1;
  right:80px;bottom:18px;
  max-width:70%;text-align:right;
  font-size:10px;letter-spacing:.07em;line-height:1.5;
  color:var(--ink-2);opacity:var(--credit-opacity);
}
.band-credit a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.band-credit a:hover,.band-credit a:focus-visible{color:var(--accent)}
.band-credit:hover{opacity:.95}
@media (max-width:820px){
  .band-credit{right:40px;bottom:12px;font-size:9px;max-width:82%}
}

.band--moth img{object-position:center 44%}
.band--river img{object-position:center 56%}

.nav,
.premise,
.pattern,
.entry,
.gate-card,
.letter{
  --paper:#F2EDE0;
  --paper-2:#EDE8DA;
  --paper-rgb:242 237 224;
  --paper-2-rgb:237 232 218;
  --ink:#14202F;
  --ink-2:#3B444E;
  --ink-soft:#555C62;
  --ink-faint:#62686D;
  --rule:#CAC8BF;
  --rule-soft:#DCD8CC;
  --accent:#73664A;
  --accent-soft:rgba(115,102,74,.26);
  --on-accent:#F2EDE0;
  --line-rgb:20,32,47;
  --line-boost:1;
  background:var(--paper-2);
  color:var(--ink);
}

.premise-grid{
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:clamp(32px,4.5vw,64px);align-items:start;
}
@media (max-width:900px){.premise-grid{grid-template-columns:1fr;gap:44px}}

.bridge{margin:0}

.premise-col{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,32px)}

.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mosaic figure{margin:0;overflow:hidden}
.mosaic img{
  width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.90) contrast(1.02);
}
.mosaic .span2{grid-column:1 / -1}
.mosaic .r-bridge{aspect-ratio:502/299}
.mosaic .r-band{aspect-ratio:502/119}
.mosaic .r-square{aspect-ratio:249/220}
.bridge .plate-box{position:relative;width:100%;aspect-ratio:1040/520}
.bridge canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bridge figcaption{
  font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);
}

.prose{max-width:60ch}
.prose p{margin:0 0 22px;font-size:20px;line-height:1.7;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose p.lead{
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(24px,3vw,34px);line-height:1.34;color:var(--ink);
  letter-spacing:-.012em;margin-bottom:30px;
}
.prose em{font-style:italic;color:var(--ink)}
.prose b{font-weight:500;color:var(--ink)}

.prose p.turn{
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(21px,2.4vw,27px);line-height:1.34;color:var(--ink);
  letter-spacing:-.01em;margin:30px 0 30px;
}

@media (max-width:900px){
  .premise-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px;row-gap:0}
  .premise-col,
  .premise-grid > .reveal,
  .premise .mosaic,
  .premise .prose{display:contents}
  .premise .bridge,
  .premise .mosaic figure,
  .premise .prose p{grid-column:1 / -1}
  .premise .mosaic .r-square{grid-column:auto}

  .premise .bridge{order:1;margin-bottom:34px}
  .premise .prose p:nth-child(-n+2){order:2}
  .premise .mosaic .r-bridge,
  .premise .mosaic .r-band{order:3}
  .premise .prose p:nth-child(n+3):nth-child(-n+5){order:4}
  .premise .mosaic .r-square{order:5}
  .premise .prose p:nth-child(n+6){order:6}

  .premise .prose p:nth-child(2),
  .premise .prose p:nth-child(5),
  .premise .mosaic .r-band,
  .premise .mosaic .r-square{margin-bottom:34px}
  .premise .mosaic .r-bridge{margin-bottom:6px}
}

.balance h2{font-size:clamp(30px,4.6vw,48px);margin-bottom:0;text-align:center}
.balance-body{text-align:center}

.balance-body{
  max-width:62ch;margin:clamp(30px,3.5vw,44px) auto 0;
  display:flex;flex-direction:column;gap:22px;
}
.balance-body p{margin:0;font-size:19.5px;line-height:1.7;color:var(--ink-2)}
.balance-body p b{font-weight:500;color:var(--ink)}

.balance h2 em{font-style:italic;color:var(--accent)}
.curvewrap{
  margin:0 0 clamp(34px,4.2vw,52px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px 0;
}
.curvewrap canvas{width:100%;height:230px;display:block}
@media (max-width:640px){.curvewrap canvas{height:170px}}
.balance .kicker{
  margin:clamp(40px,6vw,64px) auto 0;max-width:52ch;text-align:center;
  font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:italic;
  font-size:24px;line-height:1.4;color:var(--ink);letter-spacing:-.012em;
}

.entry{border-top:1px solid var(--rule)}
.entry-grid{
  display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}
@media (max-width:900px){.entry-grid{grid-template-columns:1fr;gap:40px}}
.entry h2{font-size:26px;font-weight:300;margin-bottom:22px}
.entry .prose{max-width:46ch}
.entry .cta{margin-top:34px}
@media (max-width:640px){.entry .cta{text-align:center}}

.terms{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.terms div{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--rule-soft);
}
.terms div span:first-child{
  font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);
}
.terms div span:last-child{
  font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:20px;
  color:var(--ink);text-align:right;
}

.mesh{position:fixed;inset:0;z-index:0;pointer-events:none}
.mesh canvas{width:100%;height:100%;display:block}
.nav,.gate,.foot{position:relative;z-index:1}

.gate{
  display:grid;place-items:center;
  padding:clamp(48px,9vh,110px) 24px clamp(64px,11vh,130px);
}
.gate-card{
  width:100%;max-width:430px;
  padding:clamp(34px,4.5vw,52px) clamp(28px,4vw,46px) clamp(30px,4vw,44px);
  border:1px solid var(--rule);
}
.gate-card h1{
  font-size:clamp(30px,4vw,40px);margin:0 0 14px;
  letter-spacing:-.02em;
}
.gate-lede{
  margin:0 0 30px;font-size:17px;line-height:1.6;color:var(--ink-soft);
}

.gate-mark{
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:17px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);padding-right:.28em;
  margin-bottom:28px;padding-bottom:22px;
  border-bottom:1px solid var(--rule-soft);
}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.field label{
  font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);
}
.field input,
.field textarea{
  font-family:"EB Garamond",Georgia,serif;font-size:17px;
  color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);
  padding:7px 0 9px;border-radius:0;
  transition:border-color .3s;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}

.gate-card .btn{width:100%;text-align:center;margin-top:6px}

.gate-msg{
  margin:18px 0 0;font-size:15.5px;line-height:1.55;
  color:var(--accent);font-style:italic;
}
.gate-foot{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--rule-soft);
}
.gate-foot p{
  margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft);
}

.lost{
  display:grid;place-items:center;
  padding:clamp(56px,12vh,130px) 24px clamp(72px,14vh,150px);
  text-align:center;
}
.lost-inner{max-width:44ch}
.lost-figure{width:clamp(120px,18vw,168px);aspect-ratio:1;margin:0 auto clamp(26px,3vw,38px)}
.lost-figure canvas{width:100%;height:100%;display:block}
.lost-code{
  margin:0 0 16px;font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);
}
.lost h1{font-size:clamp(27px,3.6vw,40px);margin-bottom:20px}
.lost-body{
  margin:0 auto;max-width:38ch;
  font-size:18px;line-height:1.62;color:var(--ink-soft);
}
.lost .cta{margin-top:clamp(30px,3.6vw,40px)}

.foot{
  border-top:1px solid var(--rule);padding:52px 48px 64px;
  display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end;
}
@media (max-width:820px){.foot{padding:40px 24px 52px}}
.foot .l{display:flex;flex-direction:column;gap:12px}
.foot .word{
  font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:16px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);padding-right:.28em;
}
.foot p{margin:0;font-size:15.5px;color:var(--ink-faint);max-width:42ch;font-style:italic}
.foot .r{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}

.js .band img{
  opacity:0;transform:scale(1.045);
  transition:opacity 1.5s ease, transform 2.4s cubic-bezier(.16,.84,.44,1);
}
.js .band.in img{opacity:1;transform:scale(1)}

.js .band .band-quote{
  opacity:0;transform:translate(-50%,calc(-50% + 9px));
  transition:opacity 1.1s ease .5s, transform 1.1s cubic-bezier(.16,.84,.44,1) .5s;
}
.js .band.in .band-quote{opacity:1;transform:translate(-50%,-50%)}

.js .band .band-credit{opacity:0;transition:opacity 1s ease .9s}
.js .band.in .band-credit{opacity:var(--credit-opacity)}

.js .bridge canvas{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.9s cubic-bezier(.22,.68,.28,1) .15s;
}
.js .bridge.in canvas{clip-path:inset(0 0 0 0)}

.js .strip .shot{
  opacity:0;transform:translateY(14px);
  transition:opacity .95s ease, transform .95s cubic-bezier(.16,.84,.44,1);
}
.js .strip.in .shot{opacity:1;transform:none}
.js .strip.in .shot:nth-child(3){transition-delay:.07s}
.js .strip.in .shot:nth-child(4){transition-delay:.14s}
.js .strip.in .shot:nth-child(5){transition-delay:.21s}
.js .strip.in .shot:nth-child(6){transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,
  .js .band img,
  .js .strip .shot{opacity:1;transform:none;transition:none}
  .js .band .band-quote{opacity:1;transform:translate(-50%,-50%);transition:none}
  .js .band .band-credit{opacity:var(--credit-opacity);transition:none}
  .js .bridge canvas{clip-path:none;transition:none}
}

.letter{
  width:min(92vw,520px);max-height:calc(100dvh - 32px);
  margin:auto;padding:clamp(28px,5vw,44px);
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  overflow:auto;
}
.letter::backdrop{background:rgb(9 16 27 / .72)}
.letter[open]{animation:letter-in .35s ease}
@keyframes letter-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.letter-form{position:relative}
.letter h2{font-size:26px;font-weight:300;margin:0 0 26px;padding-right:40px}
.letter .field input,
.letter .field textarea{font-size:17px}
.letter .field textarea{resize:vertical;min-height:120px;font-family:inherit;line-height:1.5}
.letter .btn{margin-top:4px}
.letter-close{
  position:absolute;top:-10px;right:-10px;
  width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;
  font-size:28px;line-height:1;color:var(--ink-faint);
}
.letter-close:hover,.letter-close:focus-visible{color:var(--ink)}
.letter-trap{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}
.letter-status{margin:18px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
html:has(.letter[open]){overflow:hidden}
@media (prefers-reduced-motion:reduce){.letter[open]{animation:none}}