/* IBM Plex (SIL OFL 1.1, fonts/OFL-IBMPlex.txt), self-hosted */
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
/* BreakRoom — the landing. A dimmed photo of a sad office coffee cart, and a plain corporate form over it.
   Palette pulled from the photo: the beige wall, the teal carpet, fluorescent paper-white. */
:root {
  --wall: #b9b39e;
  --ink: #1d2427;
  --ink-2: #4a5458;
  --paper: #f2f0e8;
  --paper-2: #e6e3d8;
  --teal: #2c5a5a;
  --teal-2: #234848;
  --rule: #cfcabb;
  --night: #20262a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--night);
  color: var(--ink);
  font: 16px/1.5 "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

/* ---- the room ---- */
.room { position: fixed; inset: 0; overflow: hidden; }
.room-photo, .room .tube, .room .clock { position: absolute; }
/* the photo is 1672×941; every overlay is placed in its own pixel space through these variables, so the clock stays on
   the clock face at any viewport size (the photo always covers) */
:root {
  --pw: 1672; --ph: 941;
  --scale: max(calc(100vw / 1672), calc(100vh / 941));
  --w: calc(1672 * var(--scale)); --h: calc(941 * var(--scale));
  --x0: 0px; --y0: calc((100vh - var(--h)) / 2);   /* anchored LEFT: the card sits over the empty doorway, left of the poster */
}
.room-photo {
  left: var(--x0); top: var(--y0); width: var(--w); height: var(--h);
  filter: saturate(.82) brightness(.78) contrast(1.02);
}
/* the dim right-hand tube (photo x 848–1228, y 14–40): every so often it catches, stutters and gives up */
.tube {
  left: calc(var(--x0) + 848 * var(--scale)); top: calc(var(--y0) + 14 * var(--scale));
  width: calc(380 * var(--scale)); height: calc(26 * var(--scale));
  background: radial-gradient(ellipse at 50% 50%, rgba(240, 255, 244, .95), rgba(220, 245, 230, .35) 60%, transparent 75%);
  opacity: 0; mix-blend-mode: screen;
  animation: tube 11s steps(1, end) infinite;
}
@keyframes tube {
  0%, 61% { opacity: 0; }
  62% { opacity: .9; } 63% { opacity: .1; } 64% { opacity: .8; } 65.5% { opacity: 0; }
  66% { opacity: .6; } 67% { opacity: 0; }
  100% { opacity: 0; }
}
/* the clock face (photo center 1025,192; face radius ~70) */
.clock {
  left: calc(var(--x0) + (1025 - 74) * var(--scale)); top: calc(var(--y0) + (192 - 74) * var(--scale));
  width: calc(148 * var(--scale)); height: calc(148 * var(--scale));
  filter: brightness(.82) saturate(.8);
}
.clock .ticks line { stroke: #2a2a2a; stroke-width: 2.4; }
.clock .ticks line.major { stroke-width: 5; }
.clock .hand { stroke: #1c1c1c; stroke-linecap: round; }
.clock .hour { stroke-width: 7; }
.clock .minute { stroke-width: 4.5; }
.clock .second { stroke: #9b2a22; stroke-width: 2; }
.clock .pin { fill: #9b2a22; }

/* ---- the form ---- */
.panel {
  position: relative; z-index: 2;
  /* a floating card over the doorway: the poster starts at photo x 530, i.e. ≥ 507 px from the left on any desktop */
  position: absolute; left: clamp(20px, 2.4vw, 40px); top: 50%; transform: translateY(-50%);
  width: min(420px, calc(530 * var(--scale, 1px) - 64px));
  padding: 32px 30px 26px;
  display: flex; flex-direction: column; gap: 16px;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .5) inset;
}
.dept {
  margin: 0; font: 500 11px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
h1 { margin: 0; font-weight: 500; font-size: clamp(40px, 6vw, 56px); line-height: 1; letter-spacing: -.02em; }
.lede { margin: 0; max-width: 34ch; color: var(--ink-2); font-size: 17px; }

.clockin { display: grid; gap: 10px; margin-top: 8px; }
.field { display: grid; gap: 6px; }
.field span { font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--rule); border-radius: 2px;
  background: #fff; color: var(--ink); font: inherit;
}
.field input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
button {
  padding: 14px 16px; border-radius: 2px; font: 500 15px/1 "IBM Plex Sans", sans-serif; letter-spacing: .02em; cursor: pointer;
}
.primary { background: var(--teal); color: var(--paper); border: 1px solid var(--teal-2); }
.primary:hover { background: var(--teal-2); }
.secondary { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.secondary:hover { border-color: var(--ink-2); }
button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.memo { margin: 6px 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.memo div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.memo dt { font: 500 11px/1.6 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.memo dd { margin: 0; font-size: 14px; text-align: right; }
.fine { margin: 0; font: 400 11.5px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink-2); }

/* phones: the room fills the top, the form is a sheet underneath */
@media (max-width: 720px) {
  body { overflow: auto; }
  /* phones frame the joke itself: photo x 470–1150 (poster → clock → cart), y 70–720, full width */
  :root { --scale: calc(100vw / 680); --x0: calc(-470 * var(--scale)); --y0: calc(-70 * var(--scale)); }
  .room { position: absolute; height: calc(650 * var(--scale)); }
  .panel { position: relative; left: 0; top: 0; transform: none; margin-top: calc(610 * var(--scale)); width: 100%; border: 0; border-top: 1px solid var(--rule); box-shadow: 0 -18px 50px rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion: reduce) { .tube { animation: none; } }