/* =========================================================
   FONT
   download departure mono from departuremono.com, unzip, and drop
   DepartureMono-Regular.woff2 into the /fonts folder. the fallback
   keeps the page working until you do, but it will not look right yet.
   ========================================================= */
@font-face {
  font-family: "Departure Mono";
  src: url("./fonts/DepartureMono-Regular.woff2") format("woff2");
  font-display: swap;
}

/* =========================================================
   PALETTE
   ink on aged paper. the paper yellow is pulled from the lobby
   wallpaper. one warm red accent. retune everything here.
   ========================================================= */
:root {
  --paper: #f2ede1;
  --ink: #1b1a17;
  --faint: #b7b0a0;
  --accent: #a8352b;   /* the faint red watermark ghost */
  --stub: #e6dbbb;     /* ticket paper, sampled + softened from the lobby yellow */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* theatre lobby (nga) under a soft paper wash so the window stays readable */
  background-color: #221f1b;
  background-image:
    linear-gradient(rgba(242, 237, 225, 0.62), rgba(242, 237, 225, 0.62)),
    url("assets/theatre-lobby.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Departure Mono", "Courier New", monospace;
  /* the site voice is lowercase. the stub is caps. keep that split. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 80px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(80px, calc(24px + env(safe-area-inset-bottom)));
  line-height: 1.5;
}

/* phones: lighter bg file, scroll attachment (fixed janks on ios), tighter chrome */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-image:
      linear-gradient(rgba(242, 237, 225, 0.62), rgba(242, 237, 225, 0.62)),
      url("assets/theatre-lobby-sm.jpg");
    padding-top: 20px;
    padding-bottom: max(40px, calc(16px + env(safe-area-inset-bottom)));
  }
  .window-body { padding: 20px 16px 24px; }
  #stub { width: min(400px, 100%); }
}

header { text-align: center; margin-bottom: 24px; max-width: 460px; }
header p { font-size: 13px; color: var(--ink); opacity: 0.75; margin: 0; }

/* the stub sits like paper on a table. a soft warm shadow, not a material card. */
.stub-wrap {
  filter: drop-shadow(2px 5px 6px rgba(0,0,0,0.18));
  margin-bottom: 28px;
}
#stub { display: block; width: 400px; max-width: 100%; height: auto; }

/* controls: minimal, lowercase, monospace. no gradient buttons. */
.controls { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
label { font-size: 12px; letter-spacing: 1px; opacity: 0.8; display: block; margin-bottom: 5px; }

input[type="text"], select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;               /* 16px+ avoids ios zoom-on-focus */
  padding: 10px 12px;
  min-height: 44px;
  background: #fbf8ef;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0;              /* sharp corners. rounded reads generic. */
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

button {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 12px;
  min-height: 44px;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-transform: lowercase;
  -webkit-tap-highlight-color: transparent;
}
button.ghost { background: #fbf8ef; color: var(--ink); }
button:active { transform: translateY(1px); }

footer { margin-top: 36px; font-size: 12px; opacity: 0.65; text-align: center; }
footer a { color: var(--ink); }
footer .credit {
  margin: 14px 0 0;
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1.45;
  opacity: 0.85;
  max-width: 34em;
}

/* =========================================================
   EARLY-OSX AQUA WINDOW FRAME
   purely cosmetic nostalgia that wraps the whole app.
   just the frame, none of the desktop.
   ========================================================= */
.window {
  width: 100%;
  max-width: 460px;
  background: var(--stub);
  border: 1px solid #6f6f6f;
  border-radius: 9px 9px 7px 7px;
  box-shadow: 0 20px 55px rgba(0,0,0,0.5);
  overflow: hidden;
}
.titlebar {
  position: relative;
  height: 30px;
  display: flex; align-items: center; justify-content: center;
  /* aqua pinstripe: faint horizontal lines over a vertical gray gradient */
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.045) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, #f7f7f7, #d6d6d6);
  border-bottom: 1px solid #9a9a9a;
}
.titlebar .wtitle {
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px; font-weight: 600; color: #4a4a4a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  pointer-events: none;
}
.lights { position: absolute; left: 8px; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,0.28); }
.lights .r { background: radial-gradient(circle at 35% 30%, #ff9d95, #e24b3f); }
.lights .y { background: radial-gradient(circle at 35% 30%, #ffe08a, #e6a827); }
.lights .g { background: radial-gradient(circle at 35% 30%, #9be88a, #34b52a); }
.window-body { padding: 26px 22px 30px; display: flex; flex-direction: column; align-items: center; }