:root{
  --c-paper:#F5F3EE;
  --c-ink:#211611;
  --c-ink-2:#6A5846;
  --c-mark:#A8321C;
  --c-rule:rgb(33 22 17 / .16);
  --ether-core:radial-gradient(circle,#0a0605 0 30%,rgb(33 22 17 / .55) 50%,rgb(33 22 17 / 0) 72%);
  --ether-glow:0 0 .6em .1em rgb(33 22 17 / .18);
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-text:"Public Sans",system-ui,-apple-system,sans-serif;
  --h:47svh;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--c-paper);color:var(--c-ink);font:400 clamp(16px,1.2vw,18px)/1.55 var(--f-text);letter-spacing:-.008em;-webkit-font-smoothing:antialiased}
main{position:relative;min-height:100svh;display:grid;grid-template-rows:var(--h) auto;overflow:hidden;isolation:isolate}
.ether{position:absolute;left:50%;top:calc(var(--h)*.8 - .5em);z-index:-1;font-size:clamp(50px,6.4vw,84px);width:1em;height:1em;margin-left:-.5em;border-radius:50%;background:var(--ether-core);box-shadow:var(--ether-glow); /* impeccable-disable: Ether's glow is the brand token from tokens.css, not a decorative accent */animation:arrive 2.6s .4s cubic-bezier(.2,.7,.2,1) both}
.mark{align-self:start;justify-self:center;width:min(50vw,320px);margin-top:13svh}
.mark svg{display:block;width:100%;height:auto}
.foot{display:grid;gap:1.4em;align-content:end;padding:40px 16px max(28px,env(safe-area-inset-bottom));max-width:1440px;width:100%;justify-self:center}
.say{font:700 clamp(24px,3vw,40px)/1.12 var(--f-display);font-variation-settings:'opsz' 96;letter-spacing:-.016em;max-width:22ch}
.body{max-width:40ch;color:var(--c-ink-2)}
.reach{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6em 2em;padding-top:1.2em;border-top:1px solid var(--c-rule);font:500 12px/1.3 var(--f-text);letter-spacing:.12em;text-transform:uppercase}
.reach a{color:var(--c-mark);text-decoration:none;letter-spacing:.04em;text-transform:none;font-size:clamp(15px,1.3vw,18px)}
.lang{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;font:500 12px/1.3 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-2);text-decoration:none;padding:8px}
.lang:hover,.lang:focus-visible{color:var(--c-ink);text-decoration:underline;text-underline-offset:.2em}
@media (min-width:768px){.lang{top:32px;right:40px}}
.reach a:hover,.reach a:focus-visible{text-decoration:underline;text-underline-offset:.2em}
a:focus-visible{outline:2px solid var(--c-mark);outline-offset:4px;border-radius:2px}
@media (min-width:768px){
  :root{--h:58svh}
  .foot{padding:56px 48px 40px}
}
@media (min-width:1024px){
  .body{max-width:46ch}
  .foot{grid-template-columns:1fr auto;align-items:end;padding:56px 48px 40px}
  .reach{grid-column:1/-1}
  .body{justify-self:end}
}
@keyframes arrive{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ether{animation:none}}
#ether-gl{position:absolute;left:50%;top:calc(var(--h)*.8);z-index:-1;font-size:clamp(50px,6.4vw,84px);width:5em;height:5em;margin:-2.5em 0 0 -2.5em;filter:invert(1) hue-rotate(180deg);animation:arrive 2.6s .4s cubic-bezier(.2,.7,.2,1) both}
.ether-on .ether{filter:opacity(0);transition:filter .8s}
@media (prefers-reduced-motion:reduce){#ether-gl{animation:none}}