/* The door, and the placeholder behind it.
 *
 * Its own stylesheet rather than an addition to site.css: this page shares no
 * furniture with the rest of the site — no masthead, no footer, no grid — and
 * loading the whole site's CSS to style two columns would drag in rules for
 * pages a stranger cannot reach.
 *
 * Palette matches site.css so the door and the portal are recognisably the
 * same company; if that file's palette moves, these five values move with it.
 */
:root{
  --paper:#f7f5f1; --paper2:#efece6; --line:#ddd8ce;
  --ink:#16181c; --tx:#2a2d33; --mut:#6c7076; --acc:#c47a42;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--paper);color:var(--tx);
  font:400 16px/1.6 Newsreader,Georgia,serif;-webkit-font-smoothing:antialiased}

/* SPLIT SCREEN. Half and half on a desktop; the video stacks ABOVE the panel
   on a phone at a fixed height, because a full-height video on a 700px screen
   pushes the sign-in form entirely below the fold and the form is the point. */
.door{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100dvh}
.door-media{position:relative;overflow:hidden;background:var(--ink)}
/* COVER, CENTRED. One landscape clip serves every orientation, so on a phone
   the frame is much wider than the band it sits in and the sides get cropped.
   object-position is stated rather than left to the 50% 50% default, because
   it is the knob that decides what survives that crop -- if the subject is off
   centre this is the line to change, not the markup. */
.door-video,.door-still{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;display:block}
/* The still sits under the video and shows through whenever the video is not
   painting: buffering, autoplay blocked, file missing, reduced motion. */
.door-still{z-index:0}
.door-video{z-index:1}
.door-placeholder{position:absolute;inset:0;display:grid;place-items:center;
  color:#4a4f57;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.3em;text-transform:uppercase}

/* ALIGNED TO THE TOP, not vertically centred. Centred, the whole block
   floated in the middle of a tall screen and the logo sat halfway down the
   panel; top-aligned it reads as a masthead. align-items:start also stops the
   column being clipped at both ends when the viewport is shorter than the
   content, which centring does. */
.door-panel{display:grid;align-items:start;justify-items:center;
  padding:64px 40px 48px;background:var(--paper)}
.door-inner{width:100%;max-width:400px}

/* ------------------------------------------------------------- the panel
   ONE WEIGHTED THING, AND EVERYTHING BELOW IT DESCENDS. The video is the loud
   element; this column sits under it. Reading down -- title, paragraph, tools,
   address -- each is lighter, smaller or greyer than the last, and nothing
   below the title carries weight.

   The "Conrad Schmidt." wordmark that used to open this panel is gone. At 800
   it was heavier than the title beneath it, which inverts the hierarchy, and
   two headings stacked read as two headings rather than as a logo and a title.
   .door-logo survives below because the signed-in placeholder still uses it. */

/* The mark. Top of the sign-in column, centred; the text below it stays
   left-aligned, so only this is centred. Sized by WIDTH -- the lockup is
   stacked and taller than wide, so height follows. */
.door-mark{display:block;width:110px;height:auto;margin:0 auto 30px}

/* The title. 600 rather than 700 or 800: it anchors the column instead of
   shouting across it. This is the one place a weight is spent. */
.door-title{margin:0 0 20px;color:var(--ink);
  font:600 27px/1.2 'Bricolage Grotesque',system-ui,sans-serif;
  letter-spacing:-.012em}

/* Body text, and Newsreader 300 on purpose: the serif at light weight is
   quieter than the same size in the sans, and the open line-height keeps a
   four-line paragraph from massing into a block. */
.door-body{margin:0 0 18px;color:var(--tx);
  font:300 16.5px/1.62 Newsreader,Georgia,serif;letter-spacing:.004em}

/* A caption, not a list. Smaller and greyer again, tracking opened so the
   middots read as separators rather than punctuation inside a sentence. */
.door-tools{margin:0 0 30px;color:var(--mut);
  font:400 11.5px/1.7 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.055em}

.door-logo{font:800 30px/1.1 'Bricolage Grotesque',system-ui,sans-serif;
  color:var(--ink);margin:0 0 22px;letter-spacing:-.015em}
.door-logo .dot{color:var(--acc)}

  font:300 19px/1.5 Newsreader,Georgia,serif;letter-spacing:.02em}

.door-email{margin:0 0 32px;
  font:400 12.5px/1.5 'JetBrains Mono',ui-monospace,monospace}
.door-email a{color:var(--mut);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px}
.door-email a:hover{color:var(--acc);border-color:var(--acc)}

/* Kept for the portal placeholder behind the door, which still uses them. */
.door-lede{margin:0 0 14px;color:var(--tx);font-size:16.5px}
.door-todo{color:var(--mut);font-style:italic}

.door-form{display:flex;flex-direction:column;gap:9px}
.door-form label{font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.door-form input{font:400 15px/1 Newsreader,Georgia,serif;padding:13px 14px;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:2px}
.door-form input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.door-form button{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.2em;text-transform:uppercase;padding:14px;cursor:pointer;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:2px}
.door-form button:hover{background:var(--acc);border-color:var(--acc)}

.door-note{margin:14px 0 0;font-size:13px;color:var(--mut);line-height:1.5}
.door-sent{margin:0 0 12px;font-size:15px}
.door-err{margin:0 0 14px;padding:11px 13px;font-size:14px;
  background:#f6e4dd;border:1px solid #d8b3a5;color:#5c241a}
.door-again{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc);text-decoration:none}

/* ------------------------------------------------------------- the portal */
.portal-body{display:grid;place-items:center;padding:40px}
.portal{width:100%;max-width:560px}
.portal-links{list-style:none;padding:0;margin:26px 0;
  display:flex;flex-wrap:wrap;gap:10px 18px;
  font:400 14px/1 'JetBrains Mono',ui-monospace,monospace}
.portal-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.portal-links a:hover{color:var(--acc);border-color:var(--acc)}

/* One breakpoint. The video becomes a band above the panel rather than a
   column beside it — full height on a phone would put the form off-screen. */
@media (max-width:820px){
  .door{grid-template-columns:1fr;min-height:0}
  .door-media{height:38vh;min-height:220px}
  .door-panel{padding:34px 24px 46px}
}
/* A door video is decoration. Someone who asked for less motion gets the
   poster frame instead, which is why the poster is required rather than nice
   to have. */
@media (prefers-reduced-motion:reduce){
  /* Hide the moving layer; the still underneath is already in the document,
     so this degrades to a photograph rather than to a black rectangle. */
  .door-video{display:none}
}