@font-face {
  font-family:Big Shoulders Stencil;
  src:url('/assets/BigShouldersStencil-Variable.ttf') format('truetype');
  font-weight:100 900;
  font-display:swap;
}

:root {
  color-scheme:dark;
  --ink:#121b1b;
  --pale:#eee5c7;
  --muted:#b6c0af;
  --steel:#334f4d;
  --lamp:#ffc95e;
}

* {
  box-sizing:border-box;
}

html {
  background:var(--ink);
  scrollbar-color:var(--steel) var(--ink);
}

body {
  margin:0;
  color:var(--pale);
  font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
}

::selection {
  background:var(--lamp);
  color:var(--ink);
}

a {
  color:inherit;
}

a:focus-visible {
  outline:2px solid var(--lamp);
  outline-offset:6px;
}

.skip {
  position:absolute;
  z-index:10;
  left:16px;
  top:-100px;
  background:var(--lamp);
  color:var(--ink);
  padding:12px;
}

.skip:focus {
  top:16px;
}

.descent {
  position:relative;
  isolation:isolate;
  height:min(1000px,100svh);
  min-height:780px;
  overflow:hidden;
  background:#253b3e;
}

.scene {
  position:absolute;
  width:100%;
  min-width:1100px;
  top:-14vw;
  left:50%;
  transform:translateX(-50%);
  z-index:-3;
}

.section {
  position:relative;
  width:100%;
  background:#18171c;
}

.section img {
  position:absolute;
  width:100%;
  height:auto;
  display:block;
  left:0;
}

.shade {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(180deg,rgba(11,24,24,.24),transparent 40%,transparent 78%,#121b1b),linear-gradient(90deg,rgba(12,24,24,.65),transparent 63%);
}

.hero-copy {
  position:relative;
  padding:45px 6vw 0;
  max-width:1500px;
  margin:auto;
}

h1 {
  font-family:"Big Shoulders Stencil",sans-serif;
  text-transform:uppercase;
  font-size:clamp(7rem,17vw,15rem);
  font-weight:750;
  line-height:.95;
  letter-spacing:-.025em;
  margin:0;
  color:var(--pale);
  text-shadow:0 4px 24px #111d1c80;
}

.premise {
  font-family:"Big Shoulders Stencil",sans-serif;
  font-size:clamp(2.6rem,4.2vw,4rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:32px 0 18px;
}

.description {
  max-width:29ch;
  font-size:18px;
  margin:0;
  color:#e0e5d7;
}

.announcement {
  position:absolute;
  left:6vw;
  bottom:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:238px;
  min-height:76px;
  padding:16px 28px;
  border:18px solid transparent;
  border-image:url('/assets/kit-header-panel.png') 42 48 60 48 fill stretch;
}

.announcement p {
  font-family:"Big Shoulders Stencil",sans-serif;
  font-size:28px;
  font-weight:650;
  line-height:1;
  margin:0;
  text-transform:uppercase;
  white-space:nowrap;
}

.light {
  background:var(--lamp);
  width:7px;
  height:7px;
  border-radius:50%;
  flex:none;
}

.scene-credit {
  position:absolute;
  right:28px;
  bottom:25px;
  font-size:11px;
  color:var(--muted);
}

.descent-edge {
  position:absolute;
  bottom:0;
  width:100%;
  height:12px;
  background:#344a49;
  border-top:2px solid #855131;
  border-bottom:3px solid #081111;
  box-shadow:inset 0 3px #ba754c,inset 0 -3px #1a2c2d;
}

.workshop {
  max-width:1440px;
  margin:auto;
  padding:72px 6vw 56px;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:60px;
  align-items:center;
}

.workshop h2 {
  font-family:"Big Shoulders Stencil",sans-serif;
  font-size:48px;
  font-weight:650;
  line-height:1.08;
  margin:0 0 20px;
  text-wrap:balance;
}

.workshop p {
  color:var(--muted);
  margin:0;
  font-size:16px;
}

.production {
  margin:0;
  min-width:0;
}

.chain {
  display:flex;
  align-items:center;
  width:100%;
  position:relative;
  padding:30px 0;
}

.machine {
  position:relative;
  width:28%;
  z-index:2;
  filter:drop-shadow(0 12px 12px #050c0c90);
}

.belt {
  border-left:0;
  border-right:0;
  height:24px;
  flex:1;
  margin:0 -2%;
  border-top:4px solid #b26d42;
  border-bottom:4px solid #825034;
  background:#213638;
  position:relative;
}

.belt img {
  position:absolute;
  width:34px;
  top:-12px;
  left:calc(50% - 17px);
  z-index:3;
}

.production figcaption {
  font-size:13px;
  color:var(--muted);
  text-align:center;
  margin-top:8px;
}

footer {
  width:min(1268px,calc(100% - 12vw));
  margin:0 auto;
  padding:26px 0 36px;
  border-top:1px solid var(--steel);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:var(--muted);
  font-size:12px;
}

.footer-brand {
  font-family:"Big Shoulders Stencil",sans-serif;
  font-weight:650;
  font-size:23px;
  color:var(--pale);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.footer-links {
  display:flex;
  gap:24px;
  margin-left:auto;
  font-size:14px;
}

.footer-links a {
  color:var(--pale);
  text-decoration-color:var(--steel);
  text-underline-offset:4px;
  padding:8px 0;
}

.footer-links a:hover {
  text-decoration-color:var(--lamp);
}

.page-header {
  width:min(1268px,calc(100% - 12vw));
  margin:0 auto;
  padding:28px 0 22px;
}

.page-brand {
  font-family:"Big Shoulders Stencil",sans-serif;
  font-weight:750;
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  letter-spacing:.01em;
}

.page-edge {
  height:12px;
  background:#344a49;
  border-top:2px solid #855131;
  border-bottom:3px solid #081111;
  box-shadow:inset 0 3px #ba754c,inset 0 -3px #1a2c2d;
}

.document {
  max-width:68ch;
  margin:0 auto;
  padding:56px 0 72px;
}

.document h1 {
  font-size:clamp(3.5rem,9vw,6rem);
  margin-bottom:8px;
}

.document h2 {
  font-family:"Big Shoulders Stencil",sans-serif;
  font-size:30px;
  font-weight:650;
  line-height:1.1;
  margin:44px 0 12px;
}

.document p,
.document li {
  color:#e0e5d7;
}

.document p {
  margin:0 0 14px;
}

.document ul {
  margin:0 0 14px;
  padding-left:22px;
}

.document li {
  margin-bottom:10px;
}

.document li::marker {
  color:var(--lamp);
}

.document strong {
  color:var(--pale);
}

.document a {
  color:var(--lamp);
  text-underline-offset:3px;
}

.document-date {
  font-size:14px;
  color:var(--muted);
}

.document-lead {
  font-size:19px;
  line-height:1.55;
  margin-top:28px;
  padding-left:18px;
  border-left:3px solid var(--lamp);
}

@media(min-width:1700px) {
  .scene {
    top:-22vw;
  }
}

@media(max-width:1100px) {
  .descent {
    min-height:800px;
  }
  .scene {
    top:-120px;
  }
  .hero-copy {
    padding-top:48px;
  }
  h1 {
    font-size:17vw;
  }
  .premise {
    font-size:48px;
  }
  .workshop {
    gap:30px;
  }
  footer {
    margin:0 6vw;
  }
  .document {
    margin:0 6vw;
  }
}

@media(max-width:600px) {
  .descent {
    background:var(--ink);
  }
  .scene .section {
    mask-image:linear-gradient(to bottom,#000 85%,transparent 100%);
  }
  .descent {
    height:844px;
    min-height:750px;
    max-height:1000px;
  }
  .scene {
    width:100%;
    min-width:0;
    top:210px;
    left:0;
    transform:none;
  }
  .hero-copy {
    padding:28px 24px 0;
  }
  h1 {
    font-size:clamp(5rem,20vw,7.5rem);
    letter-spacing:-.03em;
  }
  .premise {
    display:none;
  }
  .premise br {
    display:none;
  }
  .description {
    font-size:15px;
    max-width:30ch;
    line-height:1.45;
    margin-top:18px;
  }
  .shade {
    background:linear-gradient(180deg,#121b1b 0%,#121b1b 21%,transparent 36%,transparent 86%,#121b1b);
  }
  .announcement {
    top:192px;
    bottom:auto;
    left:24px;
    min-width:184px;
    min-height:54px;
    padding:10px 16px;
    border-width:12px;
  }
  .announcement p {
    font-size:23px;
  }
  .scene-credit {
    right:24px;
    bottom:24px;
    font-size:11px;
  }
  .workshop {
    display:block;
    padding:42px 24px;
  }
  .workshop h2 {
    font-size:38px;
  }
  .workshop h2 br {
    display:none;
  }
  .workshop-copy p {
    font-size:15px;
  }
  .production {
    margin-top:12px;
  }
  .chain {
    padding-top:24px;
  }
  .belt {
    height:17px;
    border-width:3px;
  }
  .belt img {
    width:25px;
    top:-9px;
    left:calc(50% - 12px);
  }
  footer {
    width:auto;
    margin:0 24px;
    padding:20px 0 24px;
    gap:12px;
    flex-wrap:wrap;
  }
  .footer-brand {
    font-size:20px;
  }
  .footer-links {
    gap:20px;
  }
  .footer-note {
    flex-basis:100%;
  }
  .page-header {
    width:auto;
    margin:0 24px;
    padding:22px 0 18px;
  }
  .page-brand {
    font-size:28px;
  }
  .document {
    margin:0 24px;
    padding:36px 0 52px;
  }
  .document h2 {
    font-size:26px;
    margin-top:36px;
  }
  .document-lead {
    font-size:17px;
  }
}

@media(max-height:600px) and (min-width:601px) {
  .descent {
    height:600px;
    min-height:600px;
  }
  .scene {
    top:-430px;
  }
  .hero-copy {
    padding-top:26px;
  }
  h1 {
    font-size:13vw;
  }
  .premise {
    display:none;
  }
  .description {
    margin-top:24px;
    max-width:21ch;
    font-size:16px;
  }
  .announcement {
    left:auto;
    right:24px;
    top:26px;
    bottom:auto;
    min-width:180px;
    min-height:54px;
    padding:10px 16px;
    border-width:12px;
  }
  .announcement p {
    font-size:22px;
  }
}