@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper:#f5f2ec;
  --ink:#171717;
  --muted:#77736d;
  --red:#d71920;
  --line:#cbc6bd;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;
}
.nav{
  height:100px;padding:0 clamp(24px,6vw,90px);display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--line)
}
.mark{font-size:31px;font-weight:700;letter-spacing:-2px;color:var(--ink);text-decoration:none}
.cross{color:var(--red);font-size:18px;vertical-align:top;margin-left:3px}
.origin,.eyebrow,.section-number,.coming{
  font-size:10px;font-weight:600;letter-spacing:.22em
}
main{padding:0 clamp(24px,6vw,90px)}
.hero{min-height:670px;padding:110px 0 80px;max-width:1100px}
.eyebrow{color:var(--red);margin-bottom:34px}
h1{
  margin:0;font-size:clamp(58px,9vw,126px);line-height:.87;
  letter-spacing:-.075em;font-weight:600;max-width:1000px
}
.intro{
  margin:50px 0 65px;max-width:610px;font-size:18px;line-height:1.6;color:#494641
}
.rule{height:1px;background:var(--ink);width:100%;max-width:920px}
.launch{
  max-width:920px;padding-top:17px;display:grid;grid-template-columns:60px 1fr auto;
  align-items:center;font-size:13px
}
.launch span{color:var(--red);font-weight:600}
.launch strong{letter-spacing:.08em}
.launch em{font-style:normal;font-size:10px;letter-spacing:.18em;color:var(--muted)}
.statement{
  border-top:1px solid var(--line);padding:100px 0 120px;
  display:grid;grid-template-columns:1fr 2fr;gap:50px
}
.section-number{color:var(--muted)}
.statement h2{font-size:clamp(38px,5vw,68px);letter-spacing:-.055em;margin:0 0 28px;font-weight:500}
.statement p{font-size:20px;line-height:1.55;max-width:670px;margin:0;color:#494641}
.principles{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(3,1fr)
}
.principles article{padding:35px 35px 70px 0;min-height:240px}
.principles article+article{border-left:1px solid var(--line);padding-left:35px}
.principles span{font-size:11px;color:var(--red)}
.principles h3{font-size:17px;letter-spacing:.12em;margin:55px 0 15px}
.principles p{font-size:13px;line-height:1.55;color:var(--muted);max-width:230px}
footer{
  margin-top:100px;background:var(--red);color:white;min-height:270px;
  padding:55px clamp(24px,6vw,90px);display:grid;grid-template-columns:1fr 1fr auto;align-items:end
}
.footer-mark{font-size:58px;font-weight:700;letter-spacing:-4px}
.footer-mark span{font-size:25px;vertical-align:top;margin-left:5px}
.footer-copy p{font-size:10px;letter-spacing:.17em;margin:0 0 12px}
.footer-copy a{color:white;text-decoration:none;font-size:14px}
.coming{align-self:start}
@media(max-width:700px){
  .nav{height:78px}.hero{padding:75px 0 65px;min-height:590px}
  h1{font-size:62px}.intro{font-size:16px;margin:40px 0 55px}
  .launch{grid-template-columns:40px 1fr}.launch em{grid-column:2;margin-top:8px}
  .statement{grid-template-columns:1fr;padding:70px 0 80px}
  .principles{grid-template-columns:1fr}
  .principles article{min-height:auto;padding:28px 0 45px}
  .principles article+article{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .principles h3{margin-top:35px}
  footer{grid-template-columns:1fr 1fr;gap:45px 20px;margin-top:70px}
  .coming{grid-column:2;grid-row:1}.footer-copy{grid-column:1/-1}
}