@font-face {
  font-family: "Berkeley Mono";
  src: url("/assets/BerkeleyMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Berkeley Mono";
  src: url("/assets/BerkeleyMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  color-scheme: light;
  background: #FF9A2E;
  color: #141210;
  font-family: "Berkeley Mono", monospace;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.splash { width: min(100%, 680px); text-align: center; }
.avatar {
  display: block;
  width: clamp(156px, 24svh, 240px);
  height: auto;
  margin: 0 auto;
}
h1 { margin: 0; font-size: clamp(18px, 2.8vw, 24px); font-weight: 500; line-height: 1.3; }
.wordmark { display: block; width: min(100%, 380px); height: auto; margin: 0 auto; }
h1 span { display: block; }
p { margin: 0; }
.copy { max-width: 60ch; margin: clamp(20px, 3.8svh, 36px) auto 0; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.55; text-wrap: pretty; }
.availability { margin-top: clamp(24px, 5svh, 48px); font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; font-weight: 500; }
@media (max-height: 520px) and (orientation: portrait) {
  main { padding-top: 12px; padding-bottom: 12px; }
  .avatar { width: 156px; }
  .wordmark { width: 260px; }
  .copy { margin-top: 16px; }
  .availability { margin-top: 20px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .splash { width: min(100%, 860px); display: grid; grid-template-columns: minmax(140px, 0.7fr) minmax(280px, 1.5fr); align-items: center; gap: 20px; }
  .avatar { width: min(100%, 260px); }
  .wordmark { width: min(100%, 330px); }
  h1 { font-size: 18px; }
  .copy { font-size: 14px; margin-top: 16px; }
  .availability { margin-top: 20px; }
}