/* Cisevo coming soon: one brick field, one drawn line. */
@font-face{font-family:"Sora";src:url("/assets/fonts/sora-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Geist";src:url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --brick:#E4572E;   /* the field */
  --ink:#16130F;     /* all text, 5.9:1 on brick */
  --paper:#F5F0E8;   /* the drawn mark */
  --pad:clamp(22px,5.5vw,88px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--brick);overflow-x:clip}
body{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--brick);color:var(--ink);font:400 clamp(17px,1.25vw,20px)/1.55 "Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;position:relative}

/* The one memorable thing: the One Line mark at architectural scale, cropped by the viewport */
.mark{position:fixed;z-index:0;height:min(112vh,78vw);width:auto;right:calc(var(--pad) - min(112vh,78vw)*.148);bottom:calc(min(112vh,78vw)*-.24);pointer-events:none;overflow:visible}
.mark-line{fill:none;stroke:var(--paper);stroke-width:32;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s cubic-bezier(.7,0,.25,1) .3s forwards}
.mark-dot{fill:var(--paper);transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:land .7s cubic-bezier(.3,1.5,.5,1) 2.55s forwards}

.site-head,.intro,.site-foot{position:relative;z-index:1;padding-inline:var(--pad)}
.site-head{padding-top:clamp(22px,4vh,40px)}
.logo{display:inline-block;border-radius:10px}
.logo img{display:block;height:clamp(34px,3vw,42px);width:auto}

.intro{align-self:center;max-width:min(900px,50vw);padding-block:6vh}
h1{font:600 clamp(38px,5.4vw,112px)/.94 "Sora",system-ui,sans-serif;letter-spacing:-.05em;white-space:nowrap}
.intro p{max-width:34em;margin-top:clamp(22px,3.4vh,36px)}
.intro p a{color:inherit}
.email{display:inline-block;margin-top:clamp(26px,4vh,44px);font:600 clamp(24px,2.6vw,40px)/1.1 "Sora",system-ui,sans-serif;letter-spacing:-.03em;color:var(--ink);text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.18em;transition:text-underline-offset .2s}
.email:hover{text-underline-offset:.28em}

.site-foot{display:flex;justify-content:flex-start;gap:6px 48px;flex-wrap:wrap;padding-bottom:clamp(20px,3.5vh,34px);font-size:15px}

a:focus-visible{outline:3px solid var(--ink);outline-offset:6px}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes land{0%{opacity:0;transform:translateY(-60%) scale(.7)}60%{opacity:1;transform:translateY(4%) scale(1.06,.92)}100%{opacity:1;transform:none}}

@media (max-width:760px){
  body{display:block;overflow-x:hidden;padding-bottom:62vw}
  .intro{max-width:none;padding-block:12vh 8vh}
  .mark{position:absolute;left:auto;right:-30vw;bottom:-38vw;height:auto;width:118vw}
  .site-foot{flex-direction:column;padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .mark-line{animation:none;stroke-dashoffset:0}
  .mark-dot{animation:none;opacity:1}
}