/* The sign-in page (/signin): a sign-in card beside the site's watercolor of the ridges.
   The card is the page: GitHub, Google, or email (all through WorkOS), then the invitation note. The painting, with
   its pen line and faint surveyor's marks, is the side art on desktop and a short band across the top on phones; at
   night the site's warm wash and a pen-and-wash moon. The header's sun/moon button switches day and night here as on
   every page. The opening is the site's: the paper lays down, the card settles, the wash blooms, the pen draws. With
   reduced motion every state is final and instant. */
body.landing {
  --max: 1380px;
  --lh: clamp(640px, 100svh, 980px);        /* page height on desktop */
  --pw: min(50vw, calc(var(--lh) * .95));   /* painting column width on desktop */
  --wash: none; --moon: 0; --mark: #3d2b1d; --gh-day: inline-block; --gh-night: none;
  --field: #fffdf6; --card-line: #2b211826; --card-shadow: 0 1px 2px #2a160814, 0 12px 32px -8px #2a160833, 0 2px 8px -2px #2a160814;
}
html[data-theme="night"] body.landing {
  --wash: sepia(.62) saturate(1.25) hue-rotate(-12deg) brightness(.82) contrast(1.05);
  --moon: 1; --mark: #d8cbb3; --gh-day: none; --gh-night: inline-block;
  --field: #171310; --card-line: #efe8d624; --card-shadow: 0 1px 2px #0000004d, 0 16px 40px -10px #000000a6;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="day"]) body.landing {
    --wash: sepia(.62) saturate(1.25) hue-rotate(-12deg) brightness(.82) contrast(1.05);
    --moon: 1; --mark: #d8cbb3; --gh-day: none; --gh-night: inline-block;
    --field: #171310; --card-line: #efe8d624; --card-shadow: 0 1px 2px #0000004d, 0 16px 40px -10px #000000a6;
  }
}

.landing .top { border-bottom: 0; }

.land { position: relative; display: flex; flex-direction: column; }
.land-copy { display: flex; flex-direction: column; align-items: center; }

/* ---------- the card ---------- */
.signin { width: 100%; max-width: 420px; padding: 34px 34px 26px; background: var(--paper-hi); border: 1px solid var(--card-line); border-radius: 14px; box-shadow: var(--card-shadow); }
.signin h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.12; font-weight: 560; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 48; letter-spacing: -.018em; }
.signin .sub { margin: 0 0 24px; color: var(--ink-2); font-size: 16.5px; line-height: 1.45; }
.si-providers { display: grid; gap: 10px; }
.si-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--field); color: var(--ink); font: 650 15.5px/1 var(--lab); font-stretch: 94%; letter-spacing: .005em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--d-tap) var(--ease-out), border-color var(--d-tap) var(--ease-out), box-shadow var(--d-tap) var(--ease-out); }
.si-btn:hover { border-color: var(--ink-2); box-shadow: 0 1px 3px var(--shadow); }
.si-btn:active { transform: translateY(1px); }
.si-btn:focus-visible { outline: 2.5px solid var(--link); outline-offset: 2px; border-radius: 9px; }
.si-btn .mark { flex: none; width: 20px; height: 20px; }
.si-btn .mark.on-day { display: var(--gh-day); }
.si-btn .mark.on-night { display: var(--gh-night); }
.si-btn.pri { border-color: transparent; background: var(--spruce); color: var(--on-accent); }
.si-btn.pri:hover { filter: brightness(1.08); }
.si-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--ink-2); font: 600 12.5px/1 var(--lab); letter-spacing: .1em; text-transform: uppercase; }
.si-or::before, .si-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.si-email { display: grid; gap: 8px; margin: 0; }
.si-email label { font: 650 14px/1.2 var(--lab); letter-spacing: .01em; color: var(--ink); }
.signin #si-email { width: 100%; min-height: 46px; margin: 0 0 6px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--field); color: var(--ink); font-size: 16.5px; }
.signin #si-email::placeholder { color: var(--ink-2); opacity: .7; }
.signin #si-email:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent); }
.signin #si-email[aria-invalid="true"] { border-color: var(--dot); }
.si-alert { margin: 0 0 18px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--dot) 45%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--dot) 9%, transparent); color: var(--ink); font-size: 15px; line-height: 1.4; }
.si-dev { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-2); }
.si-fine { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.si-foot { margin: 18px 0 0; max-width: 420px; color: var(--ink-2); font-size: 13.5px; text-align: center; }

/* ---------- the painting ---------- */
.panel-col { position: relative; overflow: hidden; -webkit-mask: linear-gradient(#000 80%, #0000); mask: linear-gradient(#000 80%, #0000); }
.panel { position: absolute; top: 0; left: 0; aspect-ratio: 5 / 6; }
.panel img.flat { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: var(--wash); pointer-events: none; }
/* panel coordinates: x 600-1200, y 0-720; the line's box is 748,264 452x67 */
.mainline { position: absolute; left: 24.667%; top: 36.667%; width: 75.333%; height: 9.306%; overflow: visible; pointer-events: none; }
.mainline path { fill: var(--ink); }
/* surveyor's marks in faint walnut ink: grid ticks, a dotted route, a measured line, a small wireframe. Desktop only. */
.survey { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--mark); }
.survey .sv { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .5; }
.survey .dots { stroke-width: 2.4; stroke-dasharray: .1 7; }
.survey .fill { fill: currentColor; }
.survey text { font: italic 400 22px var(--body); fill: currentColor; opacity: .6; letter-spacing: .01em; }
/* at night a pen-and-wash moon covers the painted sun (sun at x 867-992, y 0-125 of 600x720) */
.moon-art { position: absolute; left: 44.6%; top: 0; width: 20.8%; height: 17.3%; overflow: visible; pointer-events: none; opacity: var(--moon); transition: opacity .6s var(--ease-out); }
.moon-hush { fill: url(#moonhush); }
.moon-glow { fill: #EFE8D61f; filter: blur(7px); }
.moon-face { fill: #E9E1CB; stroke: #EFE8D6; stroke-width: 1.2; filter: url(#t-ink); }

/* ---------- desktop: the card centered in the left column, the painting down the right ---------- */
@media (min-width: 900px) {
  .landing .top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 22px var(--gut) 0 max(var(--gut), (100% - var(--max)) / 2); }
  .landing .top .theme-btn { background: color-mix(in srgb, var(--paper) 70%, transparent); }
  .land { display: block; height: var(--lh); }
  .land-copy { justify-content: center; height: 100%; width: calc(100% - var(--pw)); padding: 96px clamp(28px, 4vw, 64px) 48px max(var(--gut), (100% - var(--max)) / 2); }
  .panel-col { position: absolute; top: 0; right: 0; bottom: 0; width: var(--pw); }
  .panel { width: max(100%, calc(var(--lh) * .8333)); }
}

/* ---------- phones and small tablets: a short band of the painting, then the card ---------- */
@media (max-width: 899px) {
  .landing .top { min-height: 56px; }
  .panel-col { order: -1; height: clamp(150px, 40vw, 300px); -webkit-mask: linear-gradient(#000 55%, #0000); mask: linear-gradient(#000 55%, #0000); }
  .panel { width: min(100%, 620px); left: 50%; translate: -50% 0; top: -12%; }
  .survey { display: none; }
  .land-copy { position: relative; z-index: 1; margin-top: -48px; padding: 0 var(--gut) 40px; }
}
@media (max-width: 480px) {
  .signin { padding: 26px 20px 20px; border-radius: 12px; }
  .signin h1 { font-size: 26px; }
}

/* ---------- the opening ----------
   The paper lays down and the card settles at once, so reading never waits on the network. The painting waits, hidden,
   until landing.js has seen its image decode (html.gl-wait), then the wash blooms, the pen draws the line and the
   surveyor's marks follow (html.gl-open). Without script the painting is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .landing .top, .landing main { animation: gl-lay var(--d-ui) var(--ease-out) backwards; transform-origin: 50% 0; }
  .land .signin { animation: gl-settle 380ms var(--ease-out) 120ms backwards; }
  .land .si-foot { animation: gl-settle 320ms var(--ease-out) 260ms backwards; }
  html.gl-wait .land .panel { visibility: hidden; }
  html.gl-open .land .panel { animation: gl-bloom 1000ms var(--ease-out) backwards; }
  html.gl-open .land .mainline { animation: gl-pen 760ms linear 420ms backwards; }
  html.gl-open .land .survey { animation: gl-penx 900ms var(--ease-pen) 1000ms backwards; }
}
@keyframes gl-lay { from { opacity: 0; transform: translateY(10px) rotate(.3deg); } to { opacity: 1; transform: none; } }
/* the masks live only in the keyframes, so once the opening ends nothing is masked */
@keyframes gl-bloom {
  from { -webkit-mask: url(art/bloom.png) 72% 35% / 0% no-repeat; mask: url(art/bloom.png) 72% 35% / 0% no-repeat; }
  to { -webkit-mask: url(art/bloom.png) 72% 35% / 330% no-repeat; mask: url(art/bloom.png) 72% 35% / 330% no-repeat; }
}
/* the pen: a mask slides off the line left to right, a hand starting slowly, committing, a short hesitation, then done */
@keyframes gl-pen {
  0% { -webkit-mask: linear-gradient(90deg, #000 50%, #0000 50%) 100% 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, #000 50%, #0000 50%) 100% 0 / 200% 100% no-repeat; }
  18% { -webkit-mask: linear-gradient(90deg, #000 50%, #0000 50%) 93% 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, #000 50%, #0000 50%) 93% 0 / 200% 100% no-repeat; }
  62% { -webkit-mask: linear-gradient(90deg, #000 50%, #0000 50%) 25% 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, #000 50%, #0000 50%) 25% 0 / 200% 100% no-repeat; }
  70% { -webkit-mask: linear-gradient(90deg, #000 50%, #0000 50%) 23% 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, #000 50%, #0000 50%) 23% 0 / 200% 100% no-repeat; }
  100% { -webkit-mask: linear-gradient(90deg, #000 50%, #0000 50%) 0 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, #000 50%, #0000 50%) 0 0 / 200% 100% no-repeat; }
}
@keyframes gl-penx {
  from { -webkit-mask: linear-gradient(90deg, #000 50%, #0000 50%) 100% 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, #000 50%, #0000 50%) 100% 0 / 200% 100% no-repeat; }
  to { -webkit-mask: linear-gradient(90deg, #000 50%, #0000 50%) 0 0 / 200% 100% no-repeat; mask: linear-gradient(90deg, #000 50%, #0000 50%) 0 0 / 200% 100% no-repeat; }
}
@keyframes gl-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .moon-art, .si-btn { transition: none; }
}