* { box-sizing: border-box; }
body {
  margin: 0; background: #000; color: #f2f0ea;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; line-height: 1.55;
  padding: calc(24px + env(safe-area-inset-top)) 0 calc(40px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}
.wrap {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 0 max(22px, env(safe-area-inset-left)) 0 max(22px, env(safe-area-inset-right));
}
.back {
  display: inline-flex; align-items: center; text-decoration: none;
  background: #141414; color: #f2f0ea;
  border-radius: 2px;
  padding: 8px 14px; font: 600 12px 'Space Grotesk'; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 28px;
}
h1 { margin: 0 0 12px; font: 500 32px/1.12 'Space Grotesk'; letter-spacing: -.03em; color: #fff; }
h2 { margin: 0 0 8px; font: 600 17px/1.25 'Space Grotesk'; color: #fff; }
.lede, p, li { color: rgba(242,240,234,.56); font-size: 15px; }
.lede { margin: 0 0 28px; max-width: 36ch; }
.meta { color: rgba(242,240,234,.38); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }

/* Eye-guide: numbered beats, one job each */
.guide { list-style: none; margin: 0; padding: 0; }
.guide > li {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.guide > li:first-child { border-top: 1px solid rgba(255,255,255,.1); }
.guide-n {
  font: 600 14px/36px 'Space Grotesk'; text-align: center;
  width: 36px; height: 36px; border-radius: 2px;
  background: #fff; color: #0a0a0a;
}
.guide p { margin: 0 0 12px; }
.guide p:last-child { margin-bottom: 0; }
.guide b { color: #fff; font-weight: 600; }
.guide-end {
  margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1);
}
.guide-end h2 { margin-bottom: 10px; }
.guide-end p { margin: 0 0 16px; }

.list { list-style: none; margin: 12px 0 0; padding: 0; }
.list a {
  display: block; text-decoration: none;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.list li:first-child a { border-top: 1px solid rgba(255,255,255,.1); }
.list b { display: block; color: #fff; font: 600 15px 'Space Grotesk'; }
.list span { display: block; margin-top: 4px; color: rgba(242,240,234,.5); font-size: 13px; }
.list .later {
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  opacity: .45;
}
.list .later b { display: block; color: rgba(255,255,255,.72); font: 600 15px 'Space Grotesk'; }
.list .later span { display: block; margin-top: 4px; color: rgba(242,240,234,.4); font-size: 13px; }
.list li:first-child.later { border-top: 1px solid rgba(255,255,255,.1); }

.cta {
  display: inline-flex; margin-top: 8px; text-decoration: none;
  background: #fff; color: #0a0a0a; border-radius: 2px;
  padding: 14px 20px; font: 600 13px 'Space Grotesk'; letter-spacing: .1em; text-transform: uppercase;
}
.cta-sub { margin: 14px 0 0; font-size: 13px; color: rgba(242,240,234,.45); }
.cta-sub a { color: #ff9f0a; text-decoration: none; }
.eee { margin: 0; padding: 0 0 0 18px; color: rgba(242,240,234,.56); font-size: 15px; }
.eee b { color: #fff; }
.eee li { margin-bottom: 8px; }
footer { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px; color: rgba(242,240,234,.4); }
footer a { color: #ff9f0a; text-decoration: none; }