* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #333; color: #fff; }
.opening { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px 24px; }
.cover-card { display: block; width: min(440px, calc((100svh - 180px) * .75), 100%); color: inherit; text-decoration: none; transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.cover-card picture { display: block; background: #eeede9; }
.cover-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.cover-copy { padding-top: 20px; }
h1 { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; word-break: keep-all; }
.cover-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 7px 0 0; font-size: 10px; line-height: 1.5; letter-spacing: .04em; }
.cover-enter { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 8px; font-size: 11px; }
.cover-enter > span { font-size: 16px; }
.cover-card:focus-visible { outline: 2px solid #333; outline-offset: 8px; }
.cover-card:active { transform: scale(.992); }
@media (hover: hover) and (pointer: fine) { .cover-card:hover .cover-enter { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-height: 500px) { .opening { padding: 24px; } .cover-card { width: min(320px, 100%); } }
@media (prefers-reduced-motion: reduce) { .cover-card { transition: none; } .cover-card:active { transform: none; } }