:root{
  --bg:#050505;
  --paper:#f3eee7;
  --muted:#bdb6af;
  --red:#c40718;
  --red-bright:#ed071d;
  --line:rgba(255,255,255,.10);
  --line-red:rgba(196,7,24,.72);
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  color:var(--paper);
  background:
    radial-gradient(circle at 50% 5%,rgba(132,0,14,.17),transparent 34rem),
    linear-gradient(180deg,#040404 0%,#080606 56%,#040404 100%);
  font-family:"Inter",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  background:
    radial-gradient(circle at 84% 78%,rgba(148,0,16,.11),transparent 27rem),
    linear-gradient(115deg,transparent 25%,rgba(110,0,10,.05) 50%,transparent 72%);
}
.ambient{
  position:fixed;
  z-index:-3;
  width:36rem;
  height:36rem;
  border-radius:50%;
  filter:blur(100px);
  opacity:.18;
  pointer-events:none;
  animation:breathe 11s ease-in-out infinite alternate;
}
.ambient--top{top:-18rem;left:30%;background:#a60013}
.ambient--bottom{right:-18rem;bottom:-12rem;background:#7f000e;animation-delay:-4s}
.grain{
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:.08;
  pointer-events:none;
  background-image:repeating-radial-gradient(circle at 20% 40%,rgba(255,255,255,.18) 0 1px,transparent 1px 4px);
  background-size:9px 9px;
  mix-blend-mode:soft-light;
}
main{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:28px 0 58px;
}
.hero{
  min-height:88svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px 0 52px;
}
.logo{
  display:block;
  width:min(650px,62vw);
  height:auto;
  filter:drop-shadow(0 22px 58px rgba(128,0,14,.18));
}
.disciplines{
  margin:5px auto 0;
  max-width:1040px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.17em;
  line-height:1.95;
  font-size:clamp(.68rem,.95vw,.9rem);
  font-weight:600;
}
.disciplines span{color:var(--red-bright)}
.manifesto{
  max-width:980px;
  margin:0 auto;
  padding:96px 22px 110px;
  text-align:center;
}
.manifesto p{
  margin:0;
  font-family:"Space Grotesk",Arial,sans-serif;
  font-size:clamp(2rem,4.1vw,4.15rem);
  line-height:1.12;
  letter-spacing:-.035em;
}
.manifesto__emphasis{
  margin-top:26px!important;
  color:var(--muted);
  font-size:clamp(1.35rem,2.5vw,2.35rem)!important;
  line-height:1.25!important;
  letter-spacing:-.02em!important;
}
.areas{
  margin:0 0 132px;
  border-top:1px solid var(--line);
}
.area{
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(210px,1.05fr) minmax(320px,1.8fr) 105px;
  gap:28px;
  align-items:start;
  padding:44px 8px;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:background-color .3s ease,padding-left .3s ease,padding-right .3s ease;
}
.area::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:0;
  height:1px;
  background:var(--red-bright);
  transition:width .35s ease;
}
.area:hover,.area:focus-visible{
  background:rgba(255,255,255,.025);
  padding-left:18px;
  padding-right:18px;
}
.area:hover::before,.area:focus-visible::before{width:100%}
.area__number{
  color:var(--red-bright);
  font-family:"Space Grotesk",Arial,sans-serif;
  font-size:.8rem;
  letter-spacing:.15em;
}
.area h2{
  margin:0;
  font-family:"Space Grotesk",Arial,sans-serif;
  font-size:clamp(1.55rem,2.6vw,2.55rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.area p{
  margin:0;
  color:#d4cec7;
  font-size:clamp(.98rem,1.22vw,1.1rem);
  line-height:1.72;
}
.area__status{
  justify-self:end;
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.quote{
  max-width:1000px;
  margin:0 auto;
  padding:18px 0 142px;
  border:0;
  text-align:center;
  font-family:"Space Grotesk",Arial,sans-serif;
}
.quote span,.quote strong{display:block}
.quote span{
  color:#f0ece5;
  font-size:clamp(2.1rem,5vw,5rem);
  line-height:1.06;
  font-weight:400;
  letter-spacing:-.045em;
}
.quote strong{
  margin-top:10px;
  color:var(--red);
  font-size:clamp(3rem,7vw,7rem);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.06em;
}
footer{
  padding:0 20px 34px;
  text-align:center;
  scroll-margin-top:40px;
}
.coming{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.75rem;
}
.next{
  margin:22px 0 0;
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:clamp(.7rem,1.15vw,.94rem);
  line-height:1.8;
}
.next span{color:var(--red-bright)}
.soon{
  margin:12px 0 25px;
  color:var(--muted);
  font-size:1rem;
  letter-spacing:.06em;
}
.instagram{
  display:inline-block;
  padding:12px 0 4px;
  color:var(--red-bright);
  text-decoration:none;
  font-size:.92rem;
  letter-spacing:.08em;
  transition:color .25s ease,transform .25s ease;
}
.instagram:hover,.instagram:focus-visible{color:#fff;transform:translateY(-2px)}
.reveal{opacity:1;transform:translateY(18px)}
body.is-ready .reveal{animation:reveal .85s cubic-bezier(.2,.65,.25,1) forwards}
body.is-ready .delay-1{animation-delay:.15s}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
@keyframes breathe{from{transform:scale(.92) translate3d(-2%,-2%,0)}to{transform:scale(1.08) translate3d(2%,2%,0)}}

@media(max-width:900px){
  main{width:min(100% - 32px,760px);padding-top:18px}
  .hero{min-height:78svh;padding-bottom:42px}
  .logo{width:min(560px,74vw)}
  .manifesto{padding:74px 8px 88px}
  .area{grid-template-columns:48px 1fr;gap:16px 22px;padding:34px 4px}
  .area h2{padding-right:90px}
  .area p{grid-column:2;max-width:620px}
  .area__status{position:absolute;right:4px;top:39px}
  .areas{margin-bottom:98px}
  .quote{padding-bottom:104px}
}

@media(max-width:520px){
  main{width:calc(100% - 28px);padding-top:10px}
  .hero{min-height:72svh;padding:20px 0 40px}
  .logo{width:min(390px,86vw)}
  .disciplines{max-width:330px;margin-top:0;letter-spacing:.115em;font-size:.64rem;line-height:1.9}
  .manifesto{padding:58px 2px 70px}
  .manifesto p{font-size:1.85rem;line-height:1.13}
  .manifesto__emphasis{font-size:1.2rem!important;margin-top:20px!important}
  .area{display:block;padding:30px 2px 32px}
  .area:hover,.area:focus-visible{padding-left:8px;padding-right:8px}
  .area__number{display:block;margin-bottom:18px}
  .area h2{padding-right:0;font-size:1.75rem}
  .area p{margin-top:17px;font-size:.96rem;line-height:1.65}
  .area__status{position:static;display:block;margin-top:20px;font-size:.64rem}
  .areas{margin-bottom:78px}
  .quote{padding-bottom:86px}
  .quote span{font-size:2rem}
  .quote strong{font-size:3.15rem}
  .next{letter-spacing:.16em}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}