:root { color-scheme:light; --ink:#181816; --muted:#686863; --line:#20201d; --white:#fffdf5; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--white); }
* { box-sizing:border-box; } body { margin:0; } a { color:inherit; } button,input,textarea { font:inherit; } button,a,input,textarea { -webkit-tap-highlight-color:transparent; } :focus-visible { outline:3px solid #345da7; outline-offset:4px; } [hidden] { display:none!important; }
.paper { width:min(1280px,100%); margin:0 auto; padding:32px 44px 20px; }
.masthead { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:start; gap:20px; font-family:Georgia,'Times New Roman',serif; }
.est { padding-top:9px; font-size:1rem; } .brand { font-size:1.3rem; font-style:italic; line-height:1.25; text-align:center; text-decoration:none; } .brand br { display:none; } .brand strong { font-weight:400; } .masthead time { font-size:1.35rem; text-align:right; padding-top:4px; }
.title-block { text-align:center; border-bottom:5px solid var(--line); padding:12px 0 20px; margin-bottom:32px; }
h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.8rem,8.3vw,7.5rem); letter-spacing:-.015em; line-height:1.04; font-weight:500; margin:0; }
.list-head,.book-row { display:grid; grid-template-columns:90px 90px minmax(0,1fr) 90px; gap:22px; }
.list-head { border-top:4px solid var(--line); border-bottom:4px solid var(--line); padding:14px 0; align-items:center; font-size:.875rem; letter-spacing:.07em; }
.list-head span:first-child,.list-head span:nth-child(2) { text-align:center; } .list-head span:last-child { text-align:right; }
.book-row { padding:22px 0 24px; border-bottom:3px solid var(--line); align-items:start; }
.rank { font-size:4rem; font-weight:700; line-height:1; text-align:center; letter-spacing:-.07em; } .previous { text-align:center; font-size:1.3rem; padding-top:7px; } .rating { font-size:1.5rem; text-align:right; padding-top:3px; font-variant-numeric:tabular-nums; }
.book-content { min-width:0; overflow-wrap:anywhere; } .book-title { display:inline; margin:0; font-size:1.25rem; text-transform:uppercase; line-height:1.45; letter-spacing:.015em; } .author { display:inline; font-size:1.12rem; margin-left:6px; line-height:1.5; } .review { margin:6px 0 8px; line-height:1.5; font-size:1rem; } .read-date { color:var(--muted); font-size:.875rem; }
footer { display:flex; justify-content:space-between; gap:20px; padding:25px 0 10px; color:var(--muted); font-size:.8rem; line-height:1.5; } .loading { padding:30px 0; }
.admin-page { background:#f5f5f2; } .admin-shell { max-width:1200px; padding:32px; margin:auto; } .admin-nav { display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:3px solid var(--ink); padding-bottom:20px; } .admin-brand { font:italic 1.3rem Georgia,serif; text-decoration:none; }
.admin-title { font:500 clamp(2.5rem,5vw,4rem) Georgia,serif; margin:30px 0 12px; letter-spacing:-.035em; } .intro { color:var(--muted); line-height:1.5; max-width:70ch; }
.panel { background:white; border:1px solid #d5d5ce; padding:24px; } .login-panel { max-width:440px; margin:50px auto; } .panel h2 { font:500 1.6rem Georgia,serif; margin:0 0 20px; } label { display:block; margin:0 0 18px; font-size:.9rem; font-weight:600; line-height:1.5; }
input,textarea { width:100%; display:block; padding:11px 12px; border:1px solid #a5a59d; border-radius:0; background:white; margin-top:6px; font-size:1rem; font-weight:400; color:var(--ink); } textarea { resize:vertical; min-height:125px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.button { display:inline-block; background:var(--ink); color:white; padding:12px 18px; border:1px solid var(--ink); cursor:pointer; text-decoration:none; font-weight:600; font-size:.9rem; min-height:44px; } .button:hover { background:#41413a; } .button.secondary { background:white; color:var(--ink); } .button.secondary:hover { background:#ededE8; } .button:disabled { opacity:.45; cursor:default; } .text-button { border:0; background:none; padding:10px 0; text-decoration:underline; cursor:pointer; font-size:.9rem; }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .message { border-left:3px solid var(--ink); padding:12px 16px; background:#eeeee8; line-height:1.5; margin:18px 0; } .message.error { color:#9b2424; border-color:#9b2424; background:#fff2f2; } .admin-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; margin-top:24px; align-items:start; } .editor { position:sticky; top:20px; }
.publish-panel { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-top:24px; } .publish-panel label { margin:0; max-width:230px; } .publish-copy { flex:1; } .publish-copy h2 { margin:0 0 8px; } .publish-copy p { margin:0; font-size:.9rem; line-height:1.5; color:var(--muted); }
.draft-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; } .draft-top h2 { margin:0; } .draft-book { display:grid; grid-template-columns:30px 1fr auto; gap:12px; border-top:1px solid #d5d5ce; padding:15px 0; align-items:center; } .draft-book strong { display:block; font-size:1rem; } .draft-book small { display:block; margin-top:5px; color:var(--muted); font-size:.875rem; } .draft-book button { background:none; border:1px solid #aaa; padding:10px; cursor:pointer; min-height:44px; } .draft-rank { color:var(--muted); font-size:1rem; } .draft-book.active { border-left:3px solid var(--ink); padding-left:8px; }
.import-panel { margin-top:24px; } summary { cursor:pointer; font:500 1.4rem Georgia,serif; } #import-preview { margin:20px 0; } #import-preview p { line-height:1.5; } .import-change { border-top:1px solid #ccc; padding:10px 0; }
@media(max-width:800px) { .paper { padding:24px; } .masthead { grid-template-columns:1fr 1fr; gap:14px; } .brand { grid-column:1/-1; grid-row:1; font-size:1.15rem; } .masthead time,.est { font-size:.95rem; } .title-block { padding-top:20px; margin-bottom:24px; } .list-head,.book-row { grid-template-columns:55px 50px minmax(0,1fr) 64px; gap:14px; } .rank { font-size:3rem; } .rating { font-size:1.15rem; } .previous { font-size:1rem; } footer { flex-wrap:wrap; } .admin-layout { grid-template-columns:1fr; } .editor { position:static; } .publish-panel { flex-wrap:wrap; } .publish-copy { flex-basis:100%; } }
@media(max-width:480px) { .paper { padding:20px 16px; } .brand { font-size:1rem; } .masthead { gap:10px; } .est,.masthead time { font-size:.8rem; } .list-head,.book-row { grid-template-columns:40px 42px minmax(0,1fr) 47px; gap:10px; } .list-head { font-size:.75rem; letter-spacing:0; padding:12px 0; } .rank { font-size:2.3rem; padding-top:2px; } .previous { font-size:.875rem; } .rating { font-size:1rem; } .book-row { padding:18px 0; } .book-title { font-size:1rem; } .author { display:block; margin:4px 0 0; font-size:1rem; } .review { font-size:1rem; } .read-date { font-size:.8rem; } .admin-shell { padding:20px 16px; } .panel { padding:18px; } .form-grid { grid-template-columns:1fr; gap:0; } .publish-panel .actions { width:100%; } }
@media print { .paper { width:100%; padding:0; } footer { display:none; } .book-row { break-inside:avoid; } .rank { font-size:2rem; } .book-row { padding:8px 0; } }

.music{border:1px solid var(--line);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;margin:28px 0 32px}.music-copy{min-width:0;overflow-wrap:anywhere}.music-title{font:22px/1.4 Georgia,serif}.performers{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}.spotify{font-size:12px;white-space:nowrap;text-underline-offset:4px}@media(max-width:480px){.music{padding:16px;gap:12px;align-items:flex-start;flex-direction:column}.music-title{font-size:20px}}@media print{.music{display:none}}

.book-row[role="button"]{cursor:pointer}.book-row[role="button"]:hover .expand-hint{text-decoration:underline;text-underline-offset:3px}.expand-hint{display:block;margin-top:12px;font-size:.75rem;color:var(--muted)}.book-details{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);font-size:.9rem;line-height:1.5}.book-details dt{font-size:.75rem;color:var(--muted);margin-bottom:3px}.book-details dd{margin:0}.detail-item{min-width:0}@media(max-width:600px){.book-details{grid-template-columns:1fr;gap:14px}}@media print{.expand-hint{display:none}}

.previous.is-new { color:#267442; }

.latest-book,.latest-book .previous,.latest-book .read-date,.latest-book .book-details dt { color:#13813b; }
.members-page{max-width:720px;margin:0 auto;padding:48px 32px}.members-page h1{font-size:clamp(2.8rem,7vw,4.5rem);margin-bottom:32px}.members-page ol{padding-left:28px;font-size:1.2rem;line-height:2}

.members .title-block{margin-top:16px}.members ol{list-style:none;counter-reset:member;padding:0;margin:0;border-top:4px solid var(--line)}.members li{counter-increment:member;display:flex;align-items:center;gap:44px;border-bottom:3px solid var(--line);padding:22px 20px;font-size:1.3rem}.members li::before{content:counter(member);font-size:3rem;font-weight:700;line-height:1;width:70px;text-align:center}@media(max-width:480px){.members li{gap:20px;padding:18px 0}.members li::before{font-size:2.3rem;width:40px}}

.new-book-option { display:flex; align-items:center; gap:10px; } .new-book-option input { width:auto; margin:0; } .marker-help { font-size:.8rem; color:var(--muted); margin:-8px 0 20px; }