.auth-pending .notebook{visibility:hidden}
.auth-gated> :not(.auth-layer){display:none!important}
.auth-layer{position:relative;z-index:var(--z-page);min-height:580px;background:var(--paper);display:grid;place-items:center;padding:clamp(18px,5vw,55px);box-shadow:0 3px 9px #0008}
.library-card{position:relative;width:min(100%,500px);min-height:330px;padding:48px clamp(28px,7vw,65px);background:#f6f0e3;border:4px double #a68b58;box-shadow:0 4px 15px #4b352526;outline:1px solid #c1aa78;outline-offset:-10px}
.library-card:before,.library-card:after{content:'';position:absolute;left:22px;right:22px;height:7px;background:var(--gold);mask:var(--o-braid) center/auto 7px repeat-x;opacity:.8}.library-card:before{top:15px}.library-card:after{bottom:15px}
.auth-corner{position:absolute;width:35px;height:35px;background:var(--gold);mask:var(--o-corner) center/contain no-repeat}.auth-corner.tl{top:7px;left:7px}.auth-corner.tr{top:7px;right:7px;transform:scaleX(-1)}.auth-corner.bl{bottom:7px;left:7px;transform:scaleY(-1)}.auth-corner.br{bottom:7px;right:7px;transform:scale(-1)}
.auth-heading{font:500 14px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#6b4a1e;margin:5px 55px 45px 0}.auth-link-message{font:italic 27px/1.25 'EB Garamond',Georgia,serif;margin:70px 0;text-align:center}.auth-form label{margin-bottom:0}.auth-form input{margin-top:10px}.auth-hint{font:italic 18px 'EB Garamond',Georgia,serif;color:#68594a;margin:10px 0}.auth-error{font:12px/1.4 'IBM Plex Mono',monospace;color:#873d2d}.auth-error:empty{display:none}
.auth-avatar{display:grid;place-items:center;width:44px;height:44px;padding:3px;border-radius:50%;background:var(--gold,linear-gradient(135deg,#8b682b,#eed994,#a67d36));box-shadow:0 2px 8px #0006;color:#382713;font:600 19px 'EB Garamond',serif;overflow:hidden;flex:none}.auth-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.card-avatar{position:absolute;right:36px;top:35px}
.profile-wrap{position:absolute;z-index:var(--z-menu);top:16px;right:22px}.profile-button{display:block;padding:0;margin:0;border:0;background:transparent;border-radius:50%;min-height:0!important}.profile-popover{position:absolute;right:0;top:54px;width:min(240px,calc(100vw - 44px));padding:18px;background:#f6f0e3;border:1px solid #b69b69;box-shadow:0 5px 16px #0005;color:#1b1815;overflow-wrap:anywhere}.profile-popover[hidden]{display:none}.profile-name{font-size:20px}.profile-popover p{font-size:16px;margin:4px 0}.profile-change{margin:8px 0 0;padding:0;border:0;background:none;color:#6b4a1e;text-decoration:underline;font-size:11px;min-height:44px}.profile-form input{margin-top:6px}.profile-form button{margin-top:10px}
.auth-stamp{position:absolute;right:40px;bottom:38px;width:100px;height:100px;border:3px double #8e4938;border-radius:50%;display:grid;align-content:center;text-align:center;color:#8e4938;font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.08em;transform:rotate(-15deg);animation:auth-stamp .35s ease-out both;pointer-events:none}.auth-stamp span{display:block;margin-top:5px;font-size:9px}@keyframes auth-stamp{from{opacity:0;transform:rotate(-15deg) scale(1.5)}to{opacity:1;transform:rotate(-15deg) scale(1)}}
@media(max-width:600px){.auth-layer{min-height:calc(100dvh - 20px);padding:16px}.library-card{min-height:320px;padding:45px 28px}.profile-wrap{top:16px;right:22px}.auth-avatar{width:36px;height:36px}.profile-popover{top:44px}.card-avatar{top:30px;right:28px}.auth-heading{font-size:12px}.auth-stamp{right:25px;bottom:28px}.notebook:has(.profile-wrap) .ribbon{right:76px}}
@media(prefers-reduced-motion:reduce){.auth-stamp{animation:none}}@media print{.profile-wrap,.auth-layer{display:none!important}}

/* Library entry: the same paper, tooling and ink as the notebook pages. */
.auth-layer {
  --auth-paper: #f6f0e3;
  --auth-ink: #1b1815;
  --auth-frame-inset: clamp(10px, 2.5vw, 28px);
  isolation: isolate;
  min-height: max(580px, 70dvh);
  padding: clamp(42px, 7vw, 80px) clamp(24px, 6vw, 70px);
  background: var(--tex-paper), radial-gradient(ellipse at 50% 38%, #faf6eb 0%, #f3eee2 55%, #d9cbb2 100%);
  background-blend-mode: soft-light, normal;
}
.auth-layer::before, .auth-layer::after { content: ''; position: absolute; pointer-events: none; }
.auth-layer::before {
  z-index: -1;
  inset: var(--auth-frame-inset);
  border: 3px double #a5854b;
  background: url('img/ornaments/auth-frame.svg') center / 100% 100% no-repeat;
}
.auth-layer::after {
  z-index: -1;
  inset: 0;
  background:
    url('img/ornaments/library-silhouette.svg') center bottom clamp(12px, 3vw, 30px) / min(94%, 960px) auto no-repeat,
    radial-gradient(circle at 12% 31%, #ac8b4b 0 1px, transparent 1.5px),
    radial-gradient(circle at 86% 24%, #ac8b4b 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 66%, #ac8b4b 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 62%, #ac8b4b 0 1.5px, transparent 2px);
  opacity: .32;
}
.library-card {
  width: min(100%, 500px);
  min-width: 0;
  min-height: 0;
  padding: 48px clamp(30px, 6vw, 62px) 50px;
  color: var(--auth-ink);
  background:
    linear-gradient(90deg, transparent 28px, #9b4b3d30 28px, #9b4b3d30 29px, transparent 29px),
    repeating-linear-gradient(to bottom, transparent 0 31px, #68818a12 31px 32px),
    var(--tex-paper), var(--auth-paper);
  background-blend-mode: normal, normal, soft-light, normal;
  border-color: #9b7b3e;
}
.library-card::before, .library-card::after { opacity: 1; }
.auth-corner { z-index: 1; }
.auth-heading {
  margin: 0;
  color: var(--auth-ink);
  font: 400 clamp(32px, 4vw, 43px)/1.02 'EB Garamond', Georgia, serif;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}
.auth-heading-intro { display: flex; align-items: center; gap: 6px; justify-content: center; margin-bottom: 6px; color: #604319; font: 600 13px/1.2 'EB Garamond', Georgia, serif; font-variant: small-caps; letter-spacing: .13em; }
.auth-heading-intro::before, .auth-heading-intro::after { content: ''; flex: 1 1 25px; max-width: 60px; height: 10px; background: var(--gold-paper); -webkit-mask: var(--o-divider) center / 100% 100% no-repeat; mask: var(--o-divider) center / 100% 100% no-repeat; }
.auth-heading-title { display: block; color: #6b4a12; letter-spacing: -.025em; text-shadow: 0 1px 0 #5a3d0e30; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .auth-heading-title { background: linear-gradient(calc(98deg + var(--mx, .3)*64deg + var(--my, .3)*26deg), #5a3d0e, #8a6320, #6b4a12); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.auth-heading::after {
  content: '';
  display: block;
  width: min(120px, 55%);
  height: 22px;
  margin: 8px auto 6px;
  background: var(--gold-paper, linear-gradient(120deg, #6b4a14, #b98a2e, #6b4a14));
  -webkit-mask: var(--o-divider) center / contain no-repeat;
  mask: var(--o-divider) center / contain no-repeat;
}
.auth-subtitle { margin: 0 0 16px; color: var(--auth-ink); text-align: center; font: italic clamp(18px, 2.4vw, 21px)/1.15 'EB Garamond', Georgia, serif; }
.library-card > .copy { color: var(--auth-ink); margin: 0 0 22px; }
.auth-form { position: relative; }
.auth-form .field-label { color: #614019; }
.auth-form #username {
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 4px;
  color: var(--auth-ink);
  border-bottom: 1px solid #524331;
  transform: none;
  scroll-margin: 24px;
}
.auth-hint { color: #59493b; line-height: 1.3; }
#login-error { color: #792d27; margin: 8px 0; font: 12px/1.5 'IBM Plex Mono', monospace; }
#login-error:empty { display: none; }
.auth-form button {
  min-height: 44px;
  margin-top: 18px;
  background: #1b1815;
  color: #f3eee2;
  border: 1px solid #29231d;
}
.auth-form button:hover { background: #49351c; }
.auth-form #username:focus-visible, .auth-form button:focus-visible { outline: 3px solid #6b4a1e; outline-offset: 3px; }
.auth-form::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 8px;
  width: 63px;
  height: 21px;
  background: url('img/ornaments/catalog-stamp.svg') center / contain no-repeat;
  transform: rotate(-8deg);
  pointer-events: none;
}
@keyframes auth-frame-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes auth-scene-in { from { opacity: 0; transform: scale(.94); } to { opacity: .32; transform: scale(1); } }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-field-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-divider-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.static) .auth-layer::before { animation: auth-frame-in .55s ease-out both; }
  html:not(.static) .auth-layer::after { animation: auth-scene-in .55s ease-out both; }
  html:not(.static) .library-card { animation: auth-card-in .45s .24s ease-out both; }
  html:not(.static) .auth-heading-intro { animation: auth-field-in .3s .75s ease-out both; }
  html:not(.static) .auth-heading-title { animation: auth-field-in .3s .81s ease-out both; }
  html:not(.static) .auth-heading::after { animation: auth-divider-in .35s .87s ease-out both; transform-origin: center; }
  html:not(.static) .auth-subtitle { animation: auth-field-in .3s .93s ease-out both; }
  html:not(.static) .auth-form > * { animation: auth-field-in .3s ease-out both; }
  html:not(.static) .auth-form > :nth-child(1) { animation-delay: .42s; }
  html:not(.static) .auth-form > :nth-child(2) { animation-delay: .48s; }
  html:not(.static) .auth-form > :nth-child(3) { animation-delay: .54s; }
  html:not(.static) .auth-form > :nth-child(4) { animation-delay: .60s; }
  html:not(.static) .auth-form > :nth-child(5) { animation-delay: .66s; }
}
@media (max-width: 600px) {
  .auth-layer { min-height: calc(100dvh - 20px); padding: 48px 20px; }
  .library-card { min-height: 0; padding: 43px clamp(23px, 7vw, 35px) 46px; }
  .auth-heading { font-size: clamp(30px, 8vw, 38px); }
}
@media (max-width: 360px) { .auth-form::after { display: none; } }

/* A little die-cut visitor on the entry button. */
.auth-form .login-begin { position: relative; max-width: 100%; padding-right: 64px; }
.sage-peel { position: absolute; width: 56px; height: 56px; right: 1px; top: -25px; pointer-events: none; }
.sage-sticker { display: block; width: 100%; height: 100%; transform: rotate(8deg); filter: drop-shadow(0 2px 2px #241b1566); }
@keyframes sage-peel-in { from { opacity: 0; transform: translateY(-5px) scale(.88); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.static) .sage-peel { animation: sage-peel-in 240ms 1.36s ease-out both; }
  html:not(.static) .sage-sticker { transition: transform 160ms ease-out; }
  html:not(.static) .login-begin:is(:hover, :focus) .sage-sticker { transform: translateY(-2px) rotate(10deg); }
}
@media (max-width: 600px) {
  .auth-form .login-begin { padding-right: 52px; }
  .sage-peel { width: 44px; height: 44px; top: -19px; }
}

@media (max-width: 600px) {
  .notebook:has(.auth-layer) { min-height: 0; height: auto; }
  .auth-layer { min-height: 0; padding: clamp(16px, 4dvh, 32px) 20px; }
  .library-card { padding-top: clamp(24px, 5dvh, 40px); padding-bottom: clamp(24px, 5dvh, 42px); }
  .auth-heading::after { height: clamp(10px, 2.5dvh, 18px); margin: clamp(4px, 1dvh, 8px) auto; }
  .auth-subtitle { margin-bottom: clamp(8px, 1.8dvh, 16px); }
  .auth-form button { margin-top: clamp(10px, 2dvh, 18px); min-height: 44px; }
}

/* Symmetric card padding keeps its content centered inside the card. */
.library-card { padding-block: 48px; }
@media (max-width: 600px) {
  .notebook:has(.auth-layer) { min-height: calc(100dvh - var(--nav-h, 0px)); }
  .library-card { padding-block: clamp(24px, 5dvh, 40px); }
}