/* The doors wear the landing page's skin (frontend/src/pages/LandingPage.tsx, STYLE.md BRAND): its font stacks,
   its pale-water ground with a magenta and a blue glow and a fine grain, drifting slowly, and its composition (L1, owner
   2026-09-23): the joke where the landing's headline sits, the email in a card where its forecast card sits.
   Light only. Every class the template adds starts with d (dbar, dhero, djoke, dcard...), because the jokes bring
   their own .bar, .card, .top and .frame. */
:root{--ground:#DDEBF2;--ground2:#CFE1EA;--ink:#0B2233;--muted:#45606F;--line:#B5CCD8;--accent:#A3166B;--accent2:#D07AAE;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.sans{font-family:var(--sans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,input,select{font:inherit;color:inherit}

/* the ground: the landing's three glows and its grain tile, on a layer that drifts like the landing's canvas */
.dbg{position:fixed;inset:-8%;z-index:0;pointer-events:none;background:
  url(/j/grain.png),
  radial-gradient(circle at 82% 12%, rgba(163,22,107,.10), rgba(163,22,107,0) 62%),
  radial-gradient(circle at 10% 90%, rgba(48,110,140,.15), rgba(48,110,140,0) 60%),
  radial-gradient(circle at 46% 50%, rgba(255,255,255,.40), rgba(255,255,255,0) 45%),
  #DDEBF2;
  will-change:transform;animation:dbgdrift 48s ease-in-out infinite alternate}
@keyframes dbgdrift{from{transform:translate3d(0,0,0) scale(1.03)}to{transform:translate3d(-3%,2.4%,0) scale(1.12)}}
.dbar,.dhero,.dfoot{position:relative;z-index:1}

.dbar{flex:none;display:flex;align-items:center;padding:clamp(.7rem,2.2vh,1.05rem) clamp(1rem,4vw,2.4rem)}
.dbar .wm{font-family:var(--mono);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;text-decoration:none}

/* One screen, never a scrollbar (owner rule: short pages never scroll): the body is a column exactly the
   viewport tall, and the hero takes whatever the bar and the footer leave. */
.dhero{flex:1 0 auto;width:100%;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,5vw,4.5rem);padding:clamp(.5rem,3vh,3rem) clamp(1.4rem,6vw,5rem)}
@media (max-width:860px){.dhero{grid-template-columns:1fr;min-height:0;padding-top:.5rem}}
.djoke{min-width:0}

.dcard{justify-self:end;width:min(440px,100%);background:var(--ground2);border:1px solid var(--line);border-radius:10px;box-shadow:0 34px 66px -38px rgba(11,34,51,.5);padding:1.2rem 1.3rem .3rem}
@media (max-width:860px){.dcard{justify-self:stretch}}
.dcard .dhead{display:flex;align-items:center;gap:.55ch;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.dcard .dhead i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}
.dcard .lead{font-family:var(--sans);font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.55;margin:0;color:var(--ink);text-wrap:pretty}
.dcard .lead b{font-weight:600}

.door{margin:1.1rem 0 0;display:flex;flex-direction:column;gap:8px}
.door label{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.door input{font-family:var(--mono);font-size:16px;padding:.72rem .8rem;border:1px solid var(--line);border-radius:2px;background:var(--ground);color:var(--ink);width:100%}
.door button{font-family:var(--mono);font-weight:600;font-size:.92rem;padding:.78rem 1.2rem;border-radius:0;cursor:pointer;background:var(--ink);color:var(--ground);border:1px solid var(--ink);align-self:flex-start;transition:background-color .12s ease}
/* hover darkens instead of lifting: a button never moves (owner rule) */
.door button:hover{background:#123047}
.door .dmsg{display:grid;margin:2px 0 0;font-family:var(--mono);font-size:.72rem;line-height:1.5;min-height:3em}
.door .dmsg>p{grid-area:1/1;margin:0;align-self:start}
.door .dwhen{color:var(--ink)}
.door .dnote{color:var(--muted)}
.door.dsaying .dwhen{visibility:hidden}

/* After a signup the card turns into a ticket: door.js fills .dtk, and the card goes. Nothing sits inside the
   card (owner, 2026-09-23). The ticket prints in where the card stood, tilted like the ticket door's. */
.dslot{justify-self:end;width:min(440px,100%);display:grid}
@media (max-width:860px){.dslot{justify-self:stretch}}
.dslot>.dcard,.dslot>.dtk{grid-area:1/1}
.dslot>.dcard{width:100%;justify-self:stretch}
.dtk:empty,.dslot.ddone>.dcard{display:none}
.dtk{align-self:center;transform:rotate(-1.2deg);filter:drop-shadow(0 22px 20px rgba(11,34,51,.26));animation:dprint .5s cubic-bezier(.2,.8,.25,1) both}
@keyframes dprint{from{opacity:0;transform:translateY(-14px) rotate(-1.2deg)}to{opacity:1;transform:rotate(-1.2deg)}}
.dticket{--notch:11px;display:grid;grid-template-columns:minmax(0,1fr) auto;background:#EDF4F7;color:var(--ink);border:1px solid var(--line);border-radius:6px;
  -webkit-mask:radial-gradient(circle var(--notch) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle var(--notch) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.dtmain{padding:1.35rem 1rem 1.4rem 1.9rem;display:flex;flex-direction:column;gap:.35rem;font-family:var(--mono)}
.dtmain p{margin:0}
.dtadmit{font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:800;letter-spacing:.16em;line-height:1;white-space:nowrap}
.dtwhat{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:.35rem}
.dtwhen{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.dttear{border-left:2px dashed var(--line);margin-left:14px;padding:.8rem 1rem .8rem .85rem;display:flex;align-items:center;justify-content:center}
.dttear span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:700}

/* one footer row under the hero, as wide as the hero's content */
.dfoot{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1rem;width:calc(100% - 2 * clamp(1.4rem,6vw,5rem));max-width:calc(1320px - 2 * clamp(1.4rem,6vw,5rem));margin:0 auto;border-top:1px solid var(--line);padding:.7rem 0 clamp(.7rem,2.2vh,1.3rem);font-family:var(--mono);font-size:.78rem;line-height:1.5}
.dfoot .glyph{color:var(--accent)}
.dfoot .about{margin:0;color:var(--muted)}
.dfoot nav{display:flex;gap:14px;margin-left:auto}
.dfoot a{color:var(--muted);text-decoration:none}
.dfoot a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* A short laptop window: the frame gives up its padding before the page is scaled (door.js fit()). */
@media (min-width:861px) and (max-height:640px){.dbar{padding-top:.45rem;padding-bottom:.45rem}.dhero{padding-top:.25rem;padding-bottom:.25rem}.dfoot{padding-top:.45rem;padding-bottom:.5rem}}

.door .cf-turnstile{min-height:0}
.door button[disabled]{opacity:.6;cursor:default;transform:none}