:root { --paper: #fcfcfa; --ink: #131210; --muted: #645f57; --rule: #e7e2d7; --accent: #14635b; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Newsreader", Georgia, serif; }
.access { max-width: 39rem; margin: auto; padding: clamp(3rem, 10vh, 6rem) 1.5rem 3rem; animation: arrive .45s ease-out; }
.kicker { color: var(--accent); font: 700 .7rem system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1.3rem; }
h1, h2 { font-family: "Fraunces", Georgia, serif; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 6vw, 3.4rem); margin: 0 0 1.5rem; }
.intro { color: var(--muted); font-size: 1.2rem; line-height: 1.5; margin-bottom: 2rem; }
label { display: block; font: 600 .8rem system-ui, sans-serif; margin-bottom: .6rem; }
input { width: 100%; border: 1px solid var(--rule); border-radius: 4px; background: white; color: var(--ink); padding: .9rem; font: 1rem system-ui, sans-serif; }
button { cursor: pointer; font: 600 .85rem system-ui, sans-serif; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.primary { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 1.1rem; background: var(--accent); color: white; border: 0; border-radius: 4px; transition: background .18s; }
.primary:hover { background: #104e48; }
.primary span { font-size: 1.15rem; transition: transform .18s; }
.primary:hover span { transform: translateX(3px); }
.error { color: #8a2f2f; font: .85rem/1.5 system-ui, sans-serif; min-height: 1.3rem; margin: .65rem 0; }
.note-link { color: var(--muted); padding: .4rem 0; margin-top: 2rem; border: 0; border-bottom: 1px solid var(--rule); background: transparent; }
.note { width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 80px #13121030; }
.note[open] { animation: arrive .25s ease-out; }
.note::backdrop { background: #13121070; backdrop-filter: blur(5px); }
.note .kicker { padding-right: 2rem; }
.note h2 { font-size: clamp(1.85rem, 5vw, 2.5rem); margin: 0 0 1.5rem; }
.note p:not(.kicker) { font-size: 1.15rem; line-height: 1.55; }
.signature { font-style: italic; color: var(--muted); margin: 1.5rem 0 2rem; }
.close { position: absolute; right: .7rem; top: .7rem; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 1.8rem; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.author-copy { font-size: clamp(1.2rem, 2.5vw, 1.35rem); line-height: 1.6; }
.author-copy p { margin: 0 0 1.2rem; }
.author-screen .signature { font-size: 1.2rem; }
.note-link { display: flex; align-items: center; gap: 1.5rem; margin-top: 0; }
[hidden] { display: none !important; }
summary { cursor: pointer; color: var(--muted); font: 600 .85rem system-ui, sans-serif; }
#password-access { margin-top: 2rem; }