/* Sign-in page. Public (served before auth), so it carries its own tokens. */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/hanken-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #141312;
  --paper: #F6F2EA;
  --card: #FFFDF9;
  --line: rgba(20, 19, 18, .22);
  --muted: #5E564B;
  --orange: #BF360C;
  --orange-deep: #A93009;
  --orange-on-dark: #FF7043;
  --orange-wash: #F7E3D6;
  --red: #A12A1A;
  --red-wash: #F6DFDA;
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font: 400 15px/1.5 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink); background: var(--paper);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

.intro {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px; background: var(--ink); color: var(--paper);
}
.mark { display: flex; align-items: center; gap: 12px; }
.mark span { font: 800 26px/1 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -.02em; }
.mark em { font-style: normal; color: var(--orange-on-dark); }
.mark.small { display: none; }
.tagline { max-width: 15ch; margin: 0; font: 700 clamp(34px, 4.2vw, 56px)/1.05 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -.03em; }

.panel { align-self: center; justify-self: center; width: min(400px, 100%); padding: 48px 24px; }
h1 { margin: 0; font: 700 30px/1.1 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -.02em; }
.lede { margin: 8px 0 24px; color: var(--muted); }
.error { margin: 0 0 18px; padding: 10px 12px; border-radius: 8px; background: var(--red-wash); color: var(--red); font-weight: 600; }

form { display: flex; flex-direction: column; }
label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
input[type="password"] {
  min-height: 46px; padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; color: var(--ink);
}
input[type="password"]:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-wash); }
.check { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-weight: 500; color: var(--ink); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--orange); }
button {
  min-height: 46px; border: 0; border-radius: 8px;
  background: var(--orange); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
button:hover { background: var(--orange-deep); }
:focus-visible { outline: 3px solid var(--orange-on-dark); outline-offset: 2px; }

@media (max-width: 800px) {
  .login { grid-template-columns: 1fr; }
  .intro { display: none; }
  .mark.small { display: flex; margin-bottom: 28px; }
  .mark.small span { font-size: 22px; }
  .mark.small em { color: var(--orange); }
  .panel { align-self: start; padding: 56px 20px 40px; }
}