/* The studio home page (/ while the Midnight Line is unlisted): the front door of a small studio making calm pixel worlds.
   The same world as /train: the Line's self-hosted pixel fonts at whole-pixel sizes (Midnight Fine 15/22 and 30/44,
   Midnight 5x7 10/15 and 20/28), the C2 "Night glass" card, and a night-to-dawn sky with a pixel horizon. */
@font-face { font-family: "Midnight Fine"; src: url("/assets/train-waitlist/fonts/MidnightFine-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Midnight Fine"; src: url("/assets/train-waitlist/fonts/MidnightFine-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Midnight 5x7"; src: url("/assets/train-waitlist/fonts/Midnight5x7-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Midnight 5x7"; src: url("/assets/train-waitlist/fonts/Midnight5x7-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fine: "Midnight Fine", ui-monospace, "SF Mono", Menlo, monospace;
  --p57: "Midnight 5x7", ui-monospace, "SF Mono", Menlo, monospace;
  --night: #070914; --night2: #0d1026; --indigo: #1d1f4a; --plum: #3a2c58; --mauve: #7d5f86;
  --ink: #e6ebf3; --ink2: #c4cbdb; --dim: #a3aec4; --dim2: #8b97b0;
  --amber: #ffa030; --key: #ffd7a0; --warm: #ffeccd; --focus: #7fd8ff;
  --glass: rgba(8, 10, 20, .84); --edge: rgba(255, 214, 160, .28); --hair: rgba(200, 220, 255, .1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 15px/22px var(--fine);
  -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-kerning: none; font-variant-ligatures: none; text-rendering: optimizeSpeed;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180' shape-rendering='crispEdges'%3E%3Cg fill='%23dfe8ff'%3E%3Crect x='14' y='22' width='1' height='1' fill-opacity='.5'/%3E%3Crect x='92' y='9' width='2' height='2' fill-opacity='.35'/%3E%3Crect x='170' y='40' width='1' height='1' fill-opacity='.6'/%3E%3Crect x='214' y='96' width='1' height='1' fill-opacity='.35'/%3E%3Crect x='52' y='118' width='1' height='1' fill-opacity='.45'/%3E%3Crect x='136' y='150' width='1' height='1' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 180px repeat-x,
    linear-gradient(180deg, var(--night) 0, var(--night2) 30%, var(--indigo) 58%, var(--plum) 78%, var(--mauve) 90%, #b98276 100%) fixed;
  background-color: var(--night);
}
a { color: inherit; text-decoration: underline 1px; text-decoration-color: rgba(255, 160, 48, .6); text-underline-offset: 4px; }
a:hover { color: var(--key); text-decoration-color: var(--amber); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, p, ul { margin: 0; }

.hp-shell { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 920px; min-height: 100vh; margin: 0 auto;
  /* the foot clears the pixel horizon, which stays a landscape under the page */
  padding: max(28px, env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); }

/* the wordmark, as drawn (never re-typeset or stretched) */
.hp-brand { line-height: 0; }
.hp-brand img { display: block; width: auto; height: 18px; }
.hp-line { margin-top: 14px; max-width: 26em; color: var(--ink2); }
.hp-line-sub { margin-top: 4px; opacity: .72; }

.hp-kicker { margin: 0 0 12px; color: var(--key); font: 400 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
/* a list, so later projects simply join it; one project today, no empty slots */
.hp-projects { display: grid; gap: 20px; padding: 0; list-style: none; }

/* ---------------------------------------------------------------- the project card (C2 Night glass) */
.hp-card {
  display: grid; overflow: hidden; color: var(--ink);
  background: url("/assets/train-waitlist/beads.svg") 0 0 / 120px 160px, var(--glass);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px rgba(255, 160, 48, .45), 0 0 0 1px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 150, 40, .14), 0 16px 40px rgba(0, 0, 0, .5);
}
/* phones: a square window, so the title and "Join the waitlist" stay on the first screen */
.hp-window { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--night2) url("/assets/train-waitlist/dawn-poster-720.jpg") center 40% / cover no-repeat;
  box-shadow: inset 0 -1px 0 rgba(255, 160, 48, .35); }
.hp-clip { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hp-card-body { display: grid; align-content: start; gap: 10px; padding: 18px 16px 20px; }
.hp-tag { color: var(--dim); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.hp-title { color: var(--warm); font: 700 30px/44px var(--fine); }
.hp-title a { text-decoration: none; }
.hp-title a:hover { color: var(--key); }
.hp-pitch { color: var(--ink); }
.hp-about { color: var(--ink2); }
.hp-status { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--dim); font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.hp-dot { flex: none; width: 6px; height: 6px; background: var(--amber); box-shadow: 0 0 6px rgba(255, 160, 48, .7); }

/* the same lamp as "Save my seat" on /train, as a link */
.hp-cta {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px; height: 52px; margin-top: 8px; padding: 0 22px;
  background: var(--amber); color: #1a0f03; text-decoration: none;
  font: 700 20px/28px var(--p57); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
  box-shadow: inset 0 -4px 0 rgba(120, 50, 0, .35), inset 0 2px 0 rgba(255, 236, 205, .55);
}
.hp-cta:hover { color: #1a0f03; background: #ffb24a; }
.hp-cta:active { background: var(--key); }
.hp-cta:focus-visible { outline: none; background: var(--key); box-shadow: inset 0 0 0 3px var(--focus); }
/* a pixel arrow, 7 x 7 at 2 CSS px per pixel */
.hp-arrow { width: 14px; height: 14px; flex: none; background: center / 14px 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges' fill='%231a0f03'%3E%3Cpath d='M0 3h5v1H0zM3 1h1v1H3zM4 2h1v1H4zM5 3h1v1H5zM4 4h1v1H4zM3 5h1v1H3z'/%3E%3C/svg%3E"); }

.hp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: auto; padding-top: 12px; color: var(--dim2);
  font: 10px/15px var(--p57); letter-spacing: 1px; text-transform: uppercase; }
.hp-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.hp-links a { display: inline-block; padding: 8px 0; color: var(--dim); }
.hp-foot p { padding: 8px 0; }

.hp-horizon { position: fixed; z-index: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; pointer-events: none; }

/* ---------------------------------------------------------------- wider screens: the window beside the words */
@media (min-width: 720px) {
  .hp-shell { gap: 44px; max-width: 840px; padding: 48px 40px 144px; }
  .hp-brand img { height: 21px; }
  .hp-card { grid-template-columns: 270px minmax(0, 1fr); }
  .hp-window { aspect-ratio: auto; width: 270px; height: 480px; box-shadow: inset -1px 0 0 rgba(255, 160, 48, .35); }
  .hp-clip { object-position: center; }
  .hp-card-body { align-content: center; gap: 12px; padding: 32px 36px; }
  .hp-horizon { height: 128px; }
}
@media (min-width: 1100px) { .hp-shell { padding-top: 72px; } }