:root { color-scheme: dark; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; }
.gate-page { background: #080808; color: #fafafa; }
.gate { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: clamp(5.5rem, 16vh, 9rem) 1.5rem 3rem; }
.gate h1 { margin: 0; font-size: clamp(3rem, 7.8vw, 5.5rem); font-weight: 400; line-height: 1.35; letter-spacing: .08em; text-align: center; white-space: nowrap; }
.gate h1 span { letter-spacing: 0; }
.entry-form { margin-top: clamp(5rem, 17vh, 10rem); display: flex; width: min(100%, 20rem); height: 4rem; background: #fff; }
.entry-form:focus-within { outline: 2px solid #fff; outline-offset: 5px; }
.entry-form input { min-width: 0; width: 100%; border: 0; border-radius: 0; padding: 0 1rem; background: #fff; color: #111; font: 1.25rem sans-serif; outline: 0; }
.message { min-height: 1.5em; margin: 1rem 0 0; font: .9rem sans-serif; color: #e4b9b9; text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.reader-page { background: #f7f6f2; color: #242321; font-size: 1.125rem; line-height: 2.1; }
.reader { width: min(100% - 2.5rem, 43rem); margin: 0 auto; padding: clamp(3rem, 9vw, 6rem) 0 8rem; }
.reader-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid #c7c5be; padding-bottom: 1rem; margin-bottom: 4rem; }
.reader-header a, .reader-header button { color: inherit; font: .9rem sans-serif; }
.reader-header button { background: none; border: 0; text-decoration: underline; cursor: pointer; }
.reader h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.5; font-weight: 500; margin: 0 0 3.5rem; }
.reader article p { margin: 0 0 1.8em; text-indent: 1em; }
@media (max-width: 600px) { .gate { padding-top: 20vh; } .gate h1 { font-size: clamp(2.2rem, 9vw, 3rem); } .entry-form { margin-top: 14vh; } .reader-page { font-size: 1rem; } .reader-header { margin-bottom: 3rem; } }