@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;
  position:relative;
  isolation:isolate;
  background:#000;
}

.page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(0,0,0,.83),rgba(0,0,0,.93)),
    url("backgrounds/seven-human-vulnerabilities.webp") center/cover no-repeat;
}

.site-header,
.main{
  position:relative;
  z-index:1;
}

.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;
  justify-content:center;
}

.content{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:46px 54px 72px;
}

.hero{
  max-width:920px;
  margin:0 auto 34px;
}

.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(26px,4vw,36px);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--fg);
}

.seven-hero-image{
  margin:0 0 24px;
  overflow:hidden;
  border:1px solid rgba(242,242,244,.14);
  border-radius:20px;
  background:#050505;
  box-shadow:0 18px 48px rgba(0,0,0,.42);
}

.seven-hero-image img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  filter:brightness(.82) contrast(1.04);
}

.hero-copy,
.principle,
.note,
.final-line{
  max-width:88ch;
}

.hero-copy{
  margin:0 0 10px;
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  color:var(--muted);
}

.chapter-nav{
  max-width:1040px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 18px;
  margin:0 auto 52px;
  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:1040px;
  margin:0 auto 56px;
  scroll-margin-top:22px;
}

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

.chapter-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  max-width:960px;
  margin:0 auto 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(32px,4vw,40px);
  line-height:1.16;
  font-weight:650;
  letter-spacing:-.012em;
  color:var(--fg);
}

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

.section + .section{margin-top:30px}
.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;
}

.lead{
  margin:0 0 12px;
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  color:var(--muted);
}

.body-copy{
  margin:0 0 9px;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--muted);
}

.list a,
.body-copy a,
.note a{
  color:var(--fg);
  text-decoration:underline;
  text-decoration-color:rgba(242,242,244,.34);
  text-underline-offset:4px;
}

.list a:hover,
.body-copy a:hover,
.note a:hover{
  text-decoration-color:currentColor;
}

.principle{
  margin:14px 0 18px;
  padding:9px 0 9px 14px;
  border-left:2px solid rgba(242,242,244,.28);
  font-size:var(--fs-emphasis);
  line-height:var(--lh-emphasis);
  color:var(--fg);
}

.seven-card{
  margin:22px auto;
  padding:24px 26px;
  border:1px solid rgba(242,242,244,.14);
  border-radius:20px;
  background:rgba(255,255,255,.025);
  box-shadow:0 18px 48px rgba(0,0,0,.32);
  backdrop-filter:blur(2px);
}

.seven-card > :last-child{margin-bottom:0}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  max-width:960px;
  margin:22px auto 30px;
}

.card{
  padding:20px 18px;
  border:1px solid rgba(242,242,244,.12);
  border-radius:16px;
  background:rgba(255,255,255,.018);
  backdrop-filter:blur(2px);
}

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

.card p{
  margin:0 0 8px;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--muted);
}

.card p:last-child{margin-bottom:0}

.list{
  margin:8px 0 12px;
  padding:0;
  list-style:none;
  color:var(--muted);
}

.list li{
  margin:0 0 7px;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}

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

.note{
  margin:14px 0 0;
  padding:9px 0 9px 14px;
  border-left:2px solid rgba(242,242,244,.20);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--muted);
}

.seven-finale{
  max-width:960px;
  margin:54px auto 0;
  padding-top:34px;
  border-top:1px solid rgba(242,242,244,.18);
}

.seven-finale .final-line{
  margin:0;
  font-size:clamp(24px,3vw,32px);
  line-height:1.25;
  color:var(--fg);
}

.seven-contact{
  max-width:960px;
  margin:38px auto 0;
  padding:26px 0 4px;
  border-top:1px solid rgba(242,242,244,.18);
}

.seven-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);
}

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

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

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

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

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

.seal{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:960px;
  margin:34px auto 0;
  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 48px}
  .hero{margin-bottom:24px}
  .h1{margin-bottom:8px}
  .hero-question{margin-bottom:14px}
  .seven-hero-image{margin-bottom:18px;border-radius:16px}
  .hero-copy{font-size:var(--fs-body);line-height:var(--lh-body)}
  .chapter-nav{
    justify-content:flex-start;
    gap:7px 14px;
    margin-bottom:36px;
    padding:12px 0;
  }
  .chapter{margin-bottom:38px;scroll-margin-top:14px}
  .chapter + .chapter{padding-top:30px}
  .chapter-head{gap:9px;margin-bottom:19px}
  .chapter-title{font-size:clamp(25px,7vw,30px);line-height:1.18}
  .section{margin-bottom:22px}
  .section + .section{margin-top:24px}
  .body-copy{margin-bottom:7px}
  .principle{margin-top:12px;margin-bottom:16px;padding:8px 0 8px 12px}
  .seven-card{padding:18px 16px}
  .grid{grid-template-columns:1fr;margin-top:18px;margin-bottom:24px}
  .card{padding:18px 16px}
  .seven-finale{margin-top:38px;padding-top:26px}
  .seven-contact{margin-top:28px;padding-top:22px}
  .seven-contact-email{margin-top:9px}
  .seal{margin-top:28px}
}