:root { color-scheme: light; font-family: Arial, sans-serif; color: #2c1b14; background: #f4eddf; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-height: 100%; min-height: 100dvh; margin: 0; background: #f4eddf; overscroll-behavior: none; }
.auth-preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; gap: 10px; text-align: center; color: #2c1b14; background: #f4eddf; }
.auth-preloader[hidden] { display: none; }
.auth-preloader span { width: 62px; height: 62px; margin: auto; display: grid; place-items: center; border-radius: 50%; color: #fff8ed; background: #2c1b14; font-size: 30px; }
.auth-preloader strong { font: 700 28px/1.05 Georgia, "Times New Roman", serif; }
.auth-preloader small { color: #806d61; }
.auth-page { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; width: min(100%, 680px); min-height: 100svh; min-height: 100dvh; margin: auto; padding: 34px 28px 24px; overflow: hidden; border-radius: 28px; box-shadow: 0 24px 70px #37231726; }
.auth-art { position: absolute; z-index: -2; inset: 0; background: url('/assets/entry/login-journey-graphite-v2.png') center / cover no-repeat; }
.auth-page::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(#f4eddf1f, #f4eddfb8 45%, #f4eddf1a); pointer-events: none; }
header { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
header > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: #fff8ed; background: #2c1b14; box-shadow: 0 7px 18px #3420152e; }
header strong { display: grid; font: 700 38px/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
header strong span { display: block; }
.auth-card { align-self: center; width: min(100%, 390px); margin: clamp(32px, 8vh, 80px) auto 80px; padding: 32px; border: 1px solid #714b3457; border-radius: 26px; text-align: center; background: #f9f4ebed; box-shadow: 0 22px 48px #36221629; }
.auth-card h1 { max-width: 320px; margin: 8px auto 24px; font: 500 43px/.98 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.auth-card form { display: grid; gap: 15px; text-align: left; }
.auth-card label { display: grid; gap: 7px; color: #6f412d; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.auth-card input { height: 50px; padding: 0 15px; border: 1px solid #704a5159; border-radius: 14px; background: #fffaf1; font: 700 16px Arial, sans-serif; }
.auth-card button { display: flex; justify-content: flex-start; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; color: #fffaf1; background: #2c1b14; font-size: 14px; font-weight: 850; cursor: pointer; }
.auth-card button > span { margin-left: auto; font-size: 17px; line-height: 1; }
.auth-card .link { justify-content: center; min-height: auto; margin-top: 12px; padding: 6px; color: #6f412d; background: transparent; font-size: 11px; text-decoration: underline dotted; text-underline-offset: 4px; }
.message { padding: 10px; border-radius: 10px; color: #6f412d; background: #efe1c9; font-size: 12px; }
.auth-card form p { margin: 0 0 5px; color: #75655c; font-size: 13px; line-height: 1.5; }
footer { align-self: end; text-align: center; color: #3d2a21; font-size: 10px; font-weight: 900; line-height: 1.35; letter-spacing: .11em; text-shadow: 0 1px 0 #fffaf0, 0 0 9px #f4eddf; text-transform: uppercase; }
@media (max-width: 520px) {
  .auth-page { position: fixed; inset: 0; width: 100%; height: 100dvh; min-height: 0; margin: 0; padding-top: max(24px, env(safe-area-inset-top)); padding-right: max(22px, env(safe-area-inset-right)); padding-bottom: max(20px, env(safe-area-inset-bottom)); padding-left: max(22px, env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; border-radius: 0; box-shadow: none; }
  header { margin-top: 12px; }
  header strong { font-size: clamp(34px, 10vw, 42px); }
  .auth-card { margin-top: clamp(22px, 5dvh, 50px); margin-bottom: clamp(28px, 8dvh, 70px); padding: clamp(24px, 7vw, 32px); }
  .auth-card h1 { font-size: clamp(34px, 10vw, 43px); }
}
@media (max-width: 520px) and (max-height: 700px) {
  .auth-page { padding-top: max(14px, env(safe-area-inset-top)); }
  header { margin-top: 0; }
  header > span { width: 38px; height: 38px; }
  header strong { font-size: 32px; }
  .auth-card { margin-block: 18px; padding-block: 22px; }
  .auth-card h1 { margin-top: 0; font-size: 34px; }
}

/* 3.0 — the cover page of the paper journal (same faces as app/vintage.css). */
@font-face { font-family: "Cofino Fell"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/im-fell-english-sk-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cofino Fell SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/im-fell-english-sc-sk-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/courier-prime-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/courier-prime-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/courier-prime-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/courier-prime-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF; }
@font-face { font-family: "Cofino Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/homemade-apple-sk-400-normal.woff2") format("woff2"); }
:root { font-family: "Courier Prime", "Courier New", monospace; color: #2b1f17; background: #eee3ca; }
html, body, .auth-preloader { background: url("/assets/texture/paper-grain.svg"), radial-gradient(ellipse at 50% 0%, #f3ead5 0%, #eee3ca 46%, #e1cfa9 100%), #eee3ca; color: #2b1f17; }
.auth-preloader span,
header > span { color: transparent; font-size: 0; border: 1.5px solid #2b1f17; background: #f6eedc url("/assets/botanical/coffee-cherries-small.png") center / 22px no-repeat; box-shadow: inset 0 0 0 3px #f6eedc, inset 0 0 0 4px #2b1f17; }
.auth-preloader strong,
header strong { font: 400 40px/1.02 "Cofino Fell", Georgia, serif; letter-spacing: 0; }
.auth-preloader small { font-family: "Cofino Hand", cursive; color: #2b3a55; font-size: 15px; line-height: 1.7; }
.auth-page { border-radius: 0; }
.auth-page::after { background: linear-gradient(#eee3ca30, #eee3cad0 45%, #eee3ca30); }
.auth-art { filter: sepia(.35); }
.auth-card { position: relative; border: 1px solid #cdb38c; border-radius: 2px; background: #f6eedcf2; box-shadow: 0 1px 0 #2b1f171a, 0 22px 40px -24px #2b1f17aa; }
.auth-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid #e3d1ae; pointer-events: none; }
.auth-card h1 { font: 400 40px/1 "Cofino Fell", Georgia, serif; letter-spacing: 0; padding-bottom: 14px; border-bottom: 3px double #b89c74; }
.auth-card label { color: #4a382b; font: 700 12.5px "Courier Prime", "Courier New", monospace; letter-spacing: .2em; }
.auth-card input { height: 46px; padding: 0 2px; border: 0; border-bottom: 1px dotted #2b1f17; border-radius: 0; background: transparent; font: 700 17px "Courier Prime", "Courier New", monospace; border: 1.5px solid #2b1f1766; background: #fbf6ea; padding: 0 12px; color: #2b1f17; }
.auth-card input:focus { outline: 2px solid #8b2e22; outline-offset: 3px; }
.auth-card button { justify-content: center; border-radius: 3px; background: #2b1f17; color: #f6eedc; font: 400 19px "Cofino Fell SC", Georgia, serif; font-variant: normal; letter-spacing: .05em; box-shadow: inset 0 0 0 3px #2b1f17, inset 0 0 0 4px #cdb38c; }
.auth-card button > span { margin-left: 10px; }
.auth-card .link { box-shadow: none; color: #2b1f17; font: 500 17px "Courier Prime", "Courier New", monospace; font-variant: normal; letter-spacing: 0; text-decoration: underline double #8b2e22; }
.message { border: 1px dashed #b89c74; border-radius: 2px; background: #fbf6ea; color: #2b1f17; font: 400 13px "Courier Prime", "Courier New", monospace; letter-spacing: .03em; }
.auth-card form p { color: #6b5544; font-size: 17px; font-weight: 500; }
footer { color: #4a382b; font: 700 12px "Courier Prime", "Courier New", monospace; letter-spacing: .18em; text-shadow: none; }