@font-face{
  font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/archivo-black-400.woff2") format("woff2");
}
@font-face{
  font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/inter-tight-var.woff2") format("woff2");
}
:root{
  --cream:#f8f2ea;
  --ink:#000;
  --violet:#5124c1;
  --ink-soft:#2f2a24;
  --ink-mute:#4a443c;
  --display:"Archivo Black","Inter Tight",Helvetica,Arial,sans-serif;
  --ui:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --gutter:clamp(24px,4.4vw,64px);
  --s3:.75rem; --s4:1rem; --s5:1.5rem; --s7:3rem;
}
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* same rule as the composition: no scrollbar is drawn, on any page */
  scrollbar-width:none;-ms-overflow-style:none;
}
html::-webkit-scrollbar{display:none}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink-soft);
  font-family:var(--ui);
  font-size:1.125rem;
  line-height:1.65;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{color:var(--violet);text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px}
::selection{background:var(--violet);color:var(--cream)}

.skip-link{
  position:fixed;left:var(--s3);top:var(--s3);z-index:200;
  display:flex;align-items:center;min-height:44px;
  padding:var(--s3) var(--s4);background:var(--ink);color:var(--cream);
  font-size:.875rem;text-decoration:none;transform:translateY(-200%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

.band{position:relative;height:6px;isolation:isolate}
.band::after{content:"";position:absolute;inset:0;background-image:var(--grain);mix-blend-mode:overlay;opacity:.32}
.band--top{
  background:
    radial-gradient(90% 220% at 12% 120%, #ff2f4e 0%, rgba(255,47,78,0) 62%),
    radial-gradient(70% 200% at 55% -40%, #ff5a3c 0%, rgba(255,90,60,0) 70%),
    linear-gradient(94deg,#ff2b5b,#ff6a3d 38%,#ff3d63 66%,#c62bd8);
}

.wrap{max-width:880px;margin:0 auto;padding:0 var(--gutter)}

.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;
  padding:var(--s5) 0 var(--s4);
  border-bottom:1px solid rgba(47,42,36,.14);
}
.site-head__mark{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);text-decoration:none;
}
.site-head__mark .logo__img{display:block;height:56px;width:auto}
.site-head__back{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;font-weight:600;white-space:nowrap}

main{padding:clamp(40px,7vw,72px) 0 clamp(48px,8vw,88px)}

h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.25rem,7vw,3.75rem);line-height:1.02;
  letter-spacing:-.015em;color:var(--ink);
  margin:0 0 var(--s4);text-wrap:balance;
}
.lead{
  font-size:1.3125rem;line-height:1.5;color:var(--ink);
  margin:0 0 var(--s3);max-width:60ch;text-wrap:pretty;
}
.updated{
  font-size:.8125rem;letter-spacing:.02em;color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
  margin:0 0 clamp(32px,5vw,48px);
}
h2{
  font-family:var(--display);font-weight:400;
  font-size:1.25rem;line-height:1.2;letter-spacing:-.005em;color:var(--ink);
  margin:clamp(32px,4.5vw,48px) 0 var(--s3);text-wrap:balance;
}
h2:first-of-type{margin-top:0}
p{margin:0 0 var(--s4);text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:700}

.contact{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4) var(--s5);
  margin:var(--s5) 0 0;padding:0;
}
.contact div{border-top:1px solid rgba(47,42,36,.16);padding-top:var(--s3);min-width:0}
.contact dt{
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 .35rem;
}
.contact dd{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.4;color:var(--ink);
  overflow-wrap:break-word;font-variant-numeric:tabular-nums;
}
.contact dd a{font-family:var(--ui);font-weight:600;font-size:1rem}

.site-foot{
  border-top:1px solid rgba(47,42,36,.14);
  padding:var(--s5) 0 var(--s7);
  font-size:.875rem;color:var(--ink-mute);
}
.site-foot nav{display:flex;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s3)}
.site-foot a{display:inline-block;min-height:44px;padding-block:12px;margin-block:-12px;font-weight:600}
.site-foot p{margin:0}

@media (max-width:1120px){
  .contact dd a{display:inline-flex;align-items:center;min-height:44px;padding-block:13px;margin-block:-13px}
  /* inline prose links: padding grows the hit area without moving the line box */
  .wrap p a{padding-block:13px}
}
@media (max-width:560px){
  .contact{grid-template-columns:1fr}
  .site-head{gap:var(--s3)}
  .site-head__mark .logo__img{height:40px}
  .site-head__back{font-size:.875rem}
}