@font-face{font-family:SourceSans;src:url('assets/fonts/source-sans-3.ttf') format('truetype');font-weight:200 900;font-style:normal;font-display:swap}
:root{color-scheme:light;--paper:#fff;--ink:#111;--muted:#707070;--line:#dedede}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:SourceSans,Arial,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:#111;color:#fff}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #111;outline-offset:6px}
.page{min-height:100svh;padding:32px 4.5% 24px;display:flex;flex-direction:column}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:25px;border-bottom:1px solid var(--line)}
.wordmark{font-family:SourceSans,Arial,sans-serif;font-size:38px;font-weight:800;letter-spacing:-2.8px;line-height:1;text-align:center}
.wordmark span{display:block;font-family:SourceSans,Arial,sans-serif;font-size:8px;font-weight:500;letter-spacing:2px;line-height:1;margin-top:8px;padding-left:3px}
.status{display:flex;align-items:center;gap:10px;font-size:9px;font-weight:500;letter-spacing:1.3px}
.status-dot{width:6px;height:6px;border-radius:50%;background:#111}
main{width:100%;margin:auto;text-align:center;padding:66px 0 62px;animation:arrive .8s ease both}
.eyebrow{font-size:9px;font-weight:500;letter-spacing:2.5px;margin:0 0 30px}
h1{font-family:SourceSans,Arial,sans-serif;font-weight:800;font-size:clamp(76px,13.8vw,208px);letter-spacing:-.055em;line-height:.82;margin:0 auto 36px}
h1 span{color:#fff;-webkit-text-stroke:1.5px #111}
.intro{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 28px}
.contact{display:inline-flex;justify-content:center;align-items:center;gap:26px;background:#111;color:#fff;padding:17px 22px;font-size:9px;letter-spacing:1px;font-weight:500;transition:background .2s}
.contact span{font-size:18px;line-height:1;transition:transform .2s}
.contact:hover{background:#363636}
.contact:hover span{transform:translate(2px,-2px)}
.contact-note{font-size:10px;color:var(--muted);margin:13px 0 0}
footer{border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:8px;font-weight:500;letter-spacing:1.1px;color:var(--muted)}
footer a{color:#111}
footer a span{margin-left:8px;font-size:13px}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.page{padding:24px 22px 22px}.header{padding-bottom:22px}.wordmark{font-size:32px}.wordmark span{font-size:7px;letter-spacing:1.5px}.status{font-size:7px;letter-spacing:.7px;max-width:135px;line-height:1.7}.status-dot{flex-shrink:0}main{padding:72px 0 64px}.eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:30px}h1{font-size:clamp(60px,15.5vw,93px);line-height:.88;margin-bottom:30px}h1 span{-webkit-text-stroke:1px #111}.intro{font-size:12px}.contact{font-size:8px;letter-spacing:.6px;gap:14px;padding:16px}footer{font-size:7px;letter-spacing:.6px;gap:12px}.footer-note{display:none}}
@media(prefers-reduced-motion:reduce){main{animation:none}*{transition:none!important}}


/* Reserve space for the header and footer; size the hero to the remaining viewport. */
.page{height:100vh;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.header{padding-bottom:clamp(10px,2.5dvh,25px)}
main{height:100%;min-height:0;margin:0;padding:0;display:grid;place-items:center;container-type:size;animation:none}
.hero-content{width:100%;padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,2.5cqh,20px)}
.eyebrow{font-size:clamp(7px,2cqh,9px);margin:0}
h1{font-size:min(13.8vw,26cqh,208px);margin:0;line-height:.86}
.intro{font-size:clamp(10px,2.5cqh,13px);line-height:1.6;margin:0}
.contact{padding:clamp(8px,2.5cqh,17px) 20px;font-size:clamp(7px,1.8cqh,9px)}
.contact-note{font-size:clamp(8px,2cqh,10px);margin:0}
footer{padding-top:clamp(10px,2dvh,20px)}
@media(max-width:600px){
  .page{padding-left:20px;padding-right:20px}
  h1{font-size:min(15.5vw,26cqh,93px);line-height:.88}
  .eyebrow{letter-spacing:1px}
  .contact{padding-left:14px;padding-right:14px}
  footer{display:grid;grid-template-columns:1fr auto;gap:8px 12px}
  .footer-note{display:block;grid-row:2;grid-column:1 / -1;text-align:center}
  footer>a{grid-column:2;grid-row:1}
}
@media(max-height:450px){
  .page{padding-top:10px;padding-bottom:10px}
  .header{padding-bottom:8px}
  .wordmark{font-size:26px}
  .wordmark span{font-size:6px;margin-top:4px}
  .hero-content{padding:5px 0;gap:1.8cqh}
  .eyebrow{letter-spacing:1px}
  footer{padding-top:8px}
}
