@import url("tokens.css");

*{box-sizing:border-box}
html,body{min-height:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:#000;
  color:var(--fg);
}

a{color:var(--fg);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{min-height:100vh}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:#000;
}

.site-header{
  padding:22px 44px 0;
  text-align:right;
}

.site-header .brand{
  margin:0 0 6px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:600;
  opacity:.92;
}

.site-header .menu{
  font-size:var(--fs-kicker);
  line-height:var(--lh-kicker);
  color:var(--muted);
}

.site-header .menu a{
  color:var(--muted);
  margin:0 10px;
}

.site-header .menu a:first-child{margin-left:0}
.site-header .menu a:last-child{margin-right:0}
.site-header .menu a:hover{color:var(--fg);text-decoration:none}

.main{
  flex:1;
  display:flex;
  align-items:flex-start;
}

.content{
  width:100%;
  max-width:980px;
  padding:42px 44px 60px;
}

.hero{
  max-width:760px;
  margin-bottom:26px;
}

.h1{
  margin:0 0 10px;
  font-size:var(--fs-accent);
  line-height:var(--lh-accent);
  font-weight:600;
  letter-spacing:.10em;
  color:var(--muted);
  opacity:.72;
}

.hero-question{
  margin:0 0 18px;
  font-size:clamp(24px,4vw,32px);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--fg);
}

.hero-copy,
.origin-teaser p,
.origin-full p{
  margin:0 0 8px;
  max-width:76ch;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--muted);
}

.body-copy{
  margin:0;
  max-width:76ch;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--muted);
}

.pause-lines{
  margin:10px 0;
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  color:var(--fg);
}

.pause-lines span{display:block}

.emphasis{
  margin:12px 0;
  max-width:72ch;
  font-size:var(--fs-emphasis);
  line-height:var(--lh-emphasis);
  color:var(--fg);
}

.chapter-nav{
  max-width:860px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:0 0 40px;
  padding:14px 0;
  border-top:1px solid rgba(242,242,244,.13);
  border-bottom:1px solid rgba(242,242,244,.13);
}

.chapter-nav a{
  font-size:var(--fs-kicker);
  line-height:var(--lh-kicker);
  color:var(--muted);
  white-space:nowrap;
}

.chapter-nav a span{
  margin-right:5px;
  color:rgba(242,242,244,.45);
  font-variant-numeric:tabular-nums;
}

.chapter-nav a:hover{
  color:var(--fg);
  text-decoration:none;
}

.chapter{
  max-width:860px;
  margin:0 0 44px;
  scroll-margin-top:22px;
}

.chapter + .chapter{
  padding-top:34px;
  border-top:1px solid rgba(242,242,244,.16);
}

.chapter-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 24px;
}

.chapter-number{
  flex:0 0 auto;
  font-size:var(--fs-kicker);
  line-height:var(--lh-kicker);
  letter-spacing:.08em;
  color:rgba(242,242,244,.42);
  font-variant-numeric:tabular-nums;
}

.chapter-title{
  margin:0;
  font-size:clamp(30px,4.2vw,36px);
  line-height:1.16;
  font-weight:650;
  letter-spacing:-.012em;
  color:var(--fg);
}

.section{
  max-width:820px;
  margin:0 0 26px;
}

.section + .section{
  margin-top:28px;
}

.section:last-child{
  margin-bottom:0;
}

.section > h2{
  margin:0 0 10px;
  font-size:var(--fs-h2);
  line-height:var(--lh-body);
  font-weight:600;
}

.section > h3{
  margin:16px 0 8px;
  font-size:var(--fs-emphasis);
  line-height:var(--lh-emphasis);
  font-weight:600;
}

.origin{
  border:1px solid rgba(242,242,244,.12);
  border-radius:16px;
  padding:20px 18px;
  background:#000;
}

.origin details{
  margin-top:12px;
  border-top:1px solid rgba(242,242,244,.12);
  padding-top:12px;
}

.origin summary{
  cursor:pointer;
  list-style:none;
  width:max-content;
  max-width:100%;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:600;
  color:var(--fg);
}

.origin summary::-webkit-details-marker{display:none}
.origin summary::marker{content:""}
.origin summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.origin-full{
  margin-top:16px;
}

.origin-full h3{
  margin:0 0 10px;
  font-size:var(--fs-emphasis);
  line-height:var(--lh-emphasis);
  font-weight:600;
}

.rhythm-list,
.question-stack{
  margin:8px 0 10px;
  padding:0;
  list-style:none;
  max-width:76ch;
}

.rhythm-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:24px;
}

.rhythm-list li,
.question-stack li{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--muted);
}

.rhythm-list li::before{
  content:"— ";
  color:rgba(242,242,244,.44);
}

.question-stack li{color:var(--fg)}

.compact-sequence{
  margin:6px 0 9px;
}

.compact-sequence .body-copy{
  line-height:1.36;
}

.principle{
  margin:12px 0;
  max-width:74ch;
  font-size:var(--fs-emphasis);
  line-height:var(--lh-emphasis);
  color:var(--fg);
}

.island{
  margin:16px 0;
  padding:9px 0 9px 14px;
  border-left:2px solid rgba(242,242,244,.26);
  max-width:72ch;
}

.section > h3.island{
  margin:16px 0 12px;
  padding-left:14px;
}

.final-line{
  margin:14px 0 0;
  max-width:72ch;
  font-size:var(--fs-accent);
  line-height:var(--lh-accent);
  color:var(--fg);
}

.voiceprint-contact{
  max-width:760px;
  margin:12px 0 0;
  padding:26px 0 4px;
  border-top:1px solid rgba(242,242,244,.18);
}

.voiceprint-contact-kicker{
  margin:0 0 7px;
  font-size:var(--fs-kicker);
  line-height:var(--lh-kicker);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(242,242,244,.46);
}

.voiceprint-contact h2{
  margin:0 0 8px;
  font-size:var(--fs-h2);
  line-height:var(--lh-body);
  font-weight:600;
}

.voiceprint-contact-copy{
  margin:0;
  max-width:66ch;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--muted);
}

.voiceprint-contact-email{
  margin:11px 0 0;
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
}

.voiceprint-contact-email a{
  color:var(--fg);
  text-decoration:underline;
  text-decoration-color:rgba(242,242,244,.34);
  text-underline-offset:4px;
}

.voiceprint-contact-email a:hover{
  text-decoration-color:currentColor;
}

.seal{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:34px;
  color:var(--muted);
  font-size:var(--fs-kicker);
  line-height:var(--lh-kicker);
}

.seal::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  flex:0 0 22px;
  background:url("symbol.png") center/contain no-repeat;
  opacity:.75;
}

@media (max-width:900px){
  .site-header{padding:16px 22px 0}
  .content{padding:30px 22px 44px}
  .hero{margin-bottom:20px}
  .h1{margin-bottom:8px}
  .hero-question{margin-bottom:14px}
  .hero-copy,
  .origin-teaser p,
  .origin-full p{margin-bottom:7px}
  .body-copy{margin:0}
  .pause-lines{margin:8px 0}
  .emphasis{margin:10px 0}
  .chapter-nav{
    gap:7px 14px;
    margin-bottom:32px;
    padding:12px 0;
  }
  .chapter{margin-bottom:34px;scroll-margin-top:14px}
  .chapter + .chapter{padding-top:28px}
  .chapter-head{gap:9px;margin-bottom:19px}
  .chapter-title{font-size:clamp(25px,7vw,29px);line-height:1.18}
  .section{margin-bottom:22px}
  .section + .section{margin-top:24px}
  .origin{padding:16px 14px}
  .origin details{margin-top:10px;padding-top:10px}
  .origin-full{margin-top:14px}
  .rhythm-list,
  .question-stack{margin:7px 0 9px}
  .rhythm-list{grid-template-columns:1fr}
  .rhythm-list li,
  .question-stack li{margin:0}
  .compact-sequence{margin:5px 0 8px}
  .compact-sequence .body-copy{line-height:1.34}
  .principle{margin:10px 0}
  .island{margin:14px 0;padding:8px 0 8px 12px}
  .final-line{margin-top:12px}
  .voiceprint-contact{margin-top:8px;padding-top:22px}
  .voiceprint-contact-email{margin-top:9px}
  .seal{margin-top:28px}
}