@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:wght@400;450;500;550;600;650;700&family=Fraunces:ital,wght@1,600&display=swap');

:root {
  --ink:#2c241c; --muted:#786d5f; --paper:#f6f2e9; --white:#fffdf8; --line:#e2dacb;
  --amber:#edb64e; --amber-light:#faedcc; --rust:#9e4829; --gold:#ab711b;
  --green:#3d5b42; --green-dark:#2d4532; --green-soft:#edf1e7;
  --sans:'DM Sans','Segoe UI',sans-serif;
  --display:'Bricolage Grotesque','Arial Rounded MT Bold',sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; border:0; background:none; }
button:disabled { cursor:default; opacity:.38; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
svg { width:18px; height:18px; vertical-align:middle; flex-shrink:0; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--display); font-weight:700; line-height:1.13; }
em { font-family:var(--serif); font-weight:600; }
:focus-visible { outline:3px solid var(--rust); outline-offset:4px; }

/* Administration uses the same field-guide panels as the public catalog. */
.catalog-status { padding:10px 24px; background:var(--amber-light); color:var(--ink); font-size:12px; text-align:center; }
.admin-header-link { color:var(--amber); font-weight:700; font-size:12px; }
.page.admin-page { max-width:1160px; }
.admin-page .panel { padding:30px; }
.admin-page .subpage-title { font-size:clamp(32px,5vw,54px); margin-bottom:14px; }
.admin-intro { color:var(--muted); }
.admin-tabs { display:flex; flex-wrap:wrap; gap:12px 24px; border-bottom:1px solid var(--line); margin:28px 0; }
.admin-tabs a { padding:12px 0; font-weight:600; border-bottom:3px solid transparent; }
.admin-tabs a[aria-current=page] { color:var(--rust); border-bottom-color:var(--rust); }
.admin-page label { display:block; font-size:13px; font-weight:600; }
.admin-page input,.admin-page select,.admin-page textarea { display:block; width:100%; max-width:100%; min-width:0; margin-top:7px; padding:10px 12px; border:1px solid var(--line); border-radius:5px; background:var(--white); font-size:14px; }
.admin-page textarea { resize:vertical; }
.admin-page select[multiple] { padding:6px; }
.admin-page select[multiple] option { padding:4px; }
.admin-page .field-hint { display:block; font-size:12px; color:var(--muted); font-weight:400; margin:10px 0; }
.admin-rows { border-top:1px solid var(--line); margin-top:20px; }
.admin-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.admin-row>div:first-child { flex:1; min-width:0; overflow-wrap:anywhere; }
.admin-row strong { display:block; font-size:16px; }
.admin-row span { display:block; color:var(--muted); font-size:12px; }
.admin-pagination,.admin-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; margin-top:24px; }
.admin-pagination>span { font-size:12px; color:var(--muted); }
.admin-editor-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; margin-bottom:24px; }
.admin-editor-heading>div { flex:1; min-width:240px; }
.admin-editor-heading h2 { overflow-wrap:anywhere; }
.admin-editor-heading p,.admin-members>p { font-size:13px; color:var(--muted); }
.admin-editor fieldset { border:0; padding:24px 0; margin:0; border-top:1px solid var(--line); min-width:0; }
.admin-editor legend { padding:0 12px 0 0; font-family:var(--display); font-size:20px; font-weight:700; }
.admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.admin-editions { display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 20px; }
.admin-editions label { display:flex; align-items:center; gap:8px; }
.admin-editions input { width:auto; margin:0; }
.admin-source-row { margin:12px 0; }
.admin-image-preview { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:12px 0 20px; }
.admin-image-preview img { width:100px; height:120px; object-fit:contain; }
.admin-image-preview>div { flex:1; min-width:180px; }
#admin-import-preview { margin-top:24px; }
.admin-full { grid-column:1/-1; }
.admin-actions { justify-content:flex-start; }
.admin-search-row { display:flex; gap:12px; align-items:center; }
.admin-search-row input { flex:1; }
.admin-role-confirm { flex-basis:100%; padding:16px; background:var(--amber-light); border-radius:6px; }
.admin-role-confirm p { font-size:13px; margin-bottom:12px; }
.admin-role-confirm button { margin:4px 8px 0 0; }
@media(max-width:650px) {
  .admin-form-grid { grid-template-columns:1fr; }
  .admin-page .panel { padding:20px; }
  .admin-row>.btn { padding:9px 12px; }
  .admin-tabs { gap:20px; font-size:13px; }
  .admin-header-link { font-size:11px; }
}
.skip-link { position:fixed; left:16px; top:-100px; background:var(--amber); padding:10px 20px; z-index:100; border-radius:4px; }
.skip-link:focus { top:12px; }

/* Pub-sign header. */
.site-header { height:94px; background:var(--ink); color:var(--white); border-bottom:4px solid var(--amber); }
.header-inner { max-width:1304px; height:100%; padding:0 36px; margin:auto; display:flex; align-items:center; gap:56px; }
.brand { display:flex; align-items:center; gap:12px; font:800 29px/.95 var(--display); letter-spacing:-1.3px; white-space:nowrap; }
.brand-light { font-weight:500; }
.brand-dot { color:var(--amber); }
.brand small { display:block; margin-top:8px; font:600 7px/1 var(--sans); letter-spacing:1.65px; color:#d2c5ad; }
.brand-mark { display:grid; place-items:center; width:33px; color:var(--amber); }
.brand-mark svg { width:33px; height:41px; }
.main-nav { height:100%; display:flex; gap:32px; }
.main-nav a { display:flex; align-items:center; font-size:12px; font-weight:550; color:#c5bbaa; border-bottom:3px solid transparent; padding-top:3px; white-space:nowrap; }
.main-nav a.active { border-color:var(--amber); color:var(--white); }
.main-nav a:hover { color:var(--amber); }
.user-link { display:flex; align-items:center; gap:10px; margin-left:auto; font-size:11px; font-weight:550; }
.avatar { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--amber); border:1px solid #f9d895; color:var(--ink); font-weight:700; }
.user-arrow { color:#b8aa94; margin-left:5px; }
.header-account { display:flex; align-items:center; gap:15px; margin-left:auto; min-width:0; }
.header-account .user-link { margin:0; min-width:0; }
.account-name { max-width:125px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.login-link,.logout-link { color:#e8dcc7; font-size:11px; white-space:nowrap; }
.login-link:hover,.logout-link:hover { color:var(--amber); }
.header-account .btn { white-space:nowrap; }
.account-save-status { padding:10px 24px; text-align:center; background:var(--green-soft); color:var(--green); font-size:12px; }
.account-save-status[hidden] { display:none; }
.account-save-status.save-error { background:#fce3d7; color:#813b29; }
.account-save-status button { margin-left:12px; text-decoration:underline; }
.page { max-width:1304px; margin:0 auto; padding:24px 36px 64px; }
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:10px; margin-bottom:23px; }
.breadcrumb svg { width:11px; height:11px; color:#afa38e; }
.breadcrumb a:hover { color:var(--rust); }
.breadcrumb .current { color:var(--ink); }

/* Illustrated beer flight and edition tabs. */
.collection-hero { position:relative; display:grid; grid-template-columns:1.12fr 1fr; align-items:center; min-height:294px; margin-bottom:23px; padding:25px 38px 36px; background:#efd08a; border:1px solid #dfbd71; border-radius:10px; overflow:hidden; }
.hero-copy { position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 9px; text-transform:uppercase; font:700 9px/1.5 var(--sans); letter-spacing:1.8px; color:var(--rust); }
.eyebrow svg { width:13px; height:13px; }
.eyebrow-line { width:22px; height:2px; background:var(--rust); }
.hero-title { font:800 clamp(44px,4.2vw,58px)/.97 var(--display); letter-spacing:-2.5px; margin:10px 0 13px; }
.hero-title em { color:var(--rust); letter-spacing:-2.9px; }
.hero-description { font-size:11px; line-height:1.7; color:#5e4b31; margin-bottom:9px; }
.hero-browse { display:inline-flex; align-items:center; gap:7px; padding:3px 0; border-bottom:1px solid #8c632e; color:var(--ink); font-size:11px; font-weight:700; margin-bottom:14px; }
.hero-browse:hover { color:var(--rust); border-color:var(--rust); }
.hero-browse svg { width:14px; height:14px; }
.hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:13px; font-size:10px; color:#58492e; }
.hero-meta>span { display:flex; align-items:center; gap:5px; }
.hero-meta svg { width:13px; height:13px; }
.hero-meta strong { font-weight:700; }
.hero-meta .meta-divider { width:1px; height:12px; background:#b39866; }
.hero-art { position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; min-width:0; }
.hero-art>img { width:100%; max-width:430px; max-height:245px; transform:translate(12px,8px); }
.hero-stamp { position:absolute; top:-7px; right:-12px; width:91px; height:91px; padding-top:14px; text-align:center; display:block; border:1px solid #8e6e37; outline:1px solid #8e6e37; outline-offset:-6px; border-radius:50%; background:#f3d898; transform:rotate(11deg); font:600 6px/1.7 var(--sans); letter-spacing:.5px; color:#604826; }
.hero-stamp strong { display:block; margin-top:3px; font:700 14px/1.05 var(--display); letter-spacing:-.4px; }
.hero-footnote { position:absolute; bottom:13px; left:42px; font-size:7px; letter-spacing:2px; color:#80683d; }
.edition-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 14px; }
.edition-nav>a { display:flex; align-items:center; min-width:0; gap:13px; padding:13px 19px; border:1px solid var(--line); border-radius:7px; background:var(--white); transition:border-color .15s,background .15s; }
.edition-nav>a:hover { border-color:#b99c62; background:#fff8e7; }
.edition-nav>a[aria-current] { border-color:var(--ink); box-shadow:inset 0 -3px var(--ink); background:#fbebc9; }
.edition-nav strong { display:block; font:700 14px/1.2 var(--display); margin-bottom:4px; }
.edition-nav small { color:var(--muted); font-size:10px; }
.edition-nav>a>svg { width:15px; height:15px; margin-left:auto; color:#a58e60; }
.edition-nav>a[aria-current]>svg { color:var(--ink); }
.edition-nav .book.small { width:30px; height:40px; box-shadow:2px 2px 0 #d8ccaf; }
.all-beers-mark { display:grid; place-items:center; width:30px; height:40px; flex-shrink:0; background:var(--ink); color:var(--amber); border-radius:3px; }
.all-beers-mark svg { width:21px; height:25px; }
.edition-note { margin:0 0 23px; font-size:11px; color:var(--muted); }
.edition-note summary { cursor:pointer; width:fit-content; font-size:10px; text-underline-offset:3px; }
.edition-note summary:hover { text-decoration:underline; }
.edition-note p { max-width:780px; margin:12px 0; }
.edition-note[open] { padding:15px 18px; border:1px solid var(--line); border-radius:6px; background:var(--white); }

/* The supplied book covers. */
.book { position:relative; flex-shrink:0; width:116px; height:152px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#f8e9c9; background:#45543b; border-radius:1px 3px 3px 1px; box-shadow:4px 5px 0 #d9cfbb; border:1px solid #38432d; overflow:hidden; }
.book-top { font-size:6px; letter-spacing:1.1px; }
.book-number { font:700 48px/1 var(--display); letter-spacing:-3px; }
.book-word { font-size:20px; font-weight:700; letter-spacing:3px; }
.book-caption { font-size:5px; text-align:center; letter-spacing:1px; margin-top:8px; }
.book.editions { background:#8f4c36; border-color:#7c3e2c; }
.book.small { width:48px; height:64px; box-shadow:3px 3px 0 #dfd6c3; }
.book.small .book-top,.book.small .book-caption { display:none; }
.book.small .book-number { font-size:22px; letter-spacing:-1px; }
.book.small .book-word { font-size:8px; letter-spacing:1.8px; }
.book.actual-cover { border:0; display:block; background:transparent; height:auto; aspect-ratio:.76; }
.book.actual-cover img { display:block; width:100%; height:100%; object-fit:cover; }

/* Compact checklist and clear progress controls. */
.content-layout { display:grid; grid-template-columns:minmax(0,1fr) 282px; gap:26px; align-items:start; }
.list-column,.detail-main { min-width:0; }
.checklist-heading { display:flex; justify-content:space-between; gap:12px; align-items:end; margin:0 0 18px; }
.checklist-heading .eyebrow { margin-bottom:5px; font-size:8px; }
.checklist-heading h2 { font-size:26px; letter-spacing:-.8px; margin:0; }
.checklist-heading>span { color:var(--muted); font-size:10px; padding-bottom:2px; }
.panel { border:1px solid var(--line); background:var(--white); border-radius:8px; overflow:hidden; }
.list-tabs { display:flex; align-items:stretch; gap:25px; padding:0 22px; height:58px; background:#faf6ed; border-bottom:1px solid var(--line); }
.tab { display:flex; align-items:center; gap:7px; border-bottom:3px solid transparent; padding:2px 0 0; color:var(--muted); font-size:11px; font-weight:600; white-space:nowrap; }
.tab.active { border-color:var(--rust); color:var(--ink); }
.tab:hover { color:var(--rust); }
.tab-count { min-width:20px; padding:1px 5px; border-radius:3px; background:#eee8dc; color:#76694f; font-size:9px; text-align:center; font-weight:500; }
.tab.active .tab-count { background:var(--amber); color:var(--ink); }
.list-tools { display:flex; gap:9px; padding:18px 20px; border-bottom:1px solid var(--line); }
.search-box { flex:1; position:relative; min-width:120px; }
.search-box svg { position:absolute; left:12px; top:13px; width:15px; height:15px; color:#8d7e65; }
.search-box input { width:100%; height:42px; padding:0 30px 0 35px; background:#fffdf8; border:1px solid #dcd3c2; border-radius:5px; font-size:11px; }
.search-box input::placeholder { color:#8d8271; }
.select-wrap { position:relative; }
.select-wrap select { appearance:none; height:42px; width:137px; padding:0 26px 0 11px; border:1px solid #dcd3c2; border-radius:5px; background:var(--white); font-size:10px; cursor:pointer; }
.select-wrap::after { content:''; position:absolute; right:12px; top:17px; width:5px; height:5px; border-bottom:1.5px solid #887653; border-right:1.5px solid #887653; transform:rotate(45deg); pointer-events:none; }
.list-info { display:flex; justify-content:space-between; align-items:center; padding:11px 22px; background:#fcfaf5; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; }
.list-info strong { font-weight:600; color:#54452d; }
.check-hint { display:flex; align-items:center; gap:5px; }
.check-hint svg { width:13px; height:13px; color:var(--green); }
.beer-row { position:relative; display:grid; grid-template-columns:22px 54px minmax(0,1fr) auto; align-items:center; gap:15px; min-height:112px; padding:18px 21px; border-bottom:1px solid #eee7da; cursor:pointer; transition:background .15s; }
.beer-row:last-child { border-bottom:0; }
.beer-row:hover { background:#fcf5e5; }
.beer-row.is-checked { background:#f1f4e9; }
.beer-row.is-checked::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); }
.beer-rank { color:#a69882; font-size:10px; font-variant-numeric:tabular-nums; }
.beer-image { display:grid; place-items:center; overflow:hidden; height:60px; width:54px; background:#f3ead5; border:1px solid #eadfca; border-radius:6px; }
.beer-image img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.image-fallback { display:none; color:#ad8a43; }
.image-fallback svg { width:27px; height:31px; stroke-width:1.2; }
.image-missing .image-fallback { display:block; }
.image-missing img { display:none; }
.beer-info { min-width:0; }
.beer-name { display:inline-block; font:700 15px/1.25 var(--display); letter-spacing:-.2px; margin-bottom:4px; overflow-wrap:anywhere; }
.beer-name:hover { text-decoration:underline; text-underline-offset:3px; color:var(--rust); }
.brewery-name { color:var(--muted); font-size:10px; line-height:1.5; }
.beer-origin { display:flex; align-items:center; gap:6px; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.5; }
.country-flags { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; }
.country-flag { display:block; width:20px; height:15px; object-fit:contain; border-radius:2px; box-shadow:0 0 0 1px #2c241c18; }
.beer-origin.detail-origin { margin-top:10px; font-size:12px; gap:8px; }
.detail-origin .country-flag { width:24px; height:18px; }
.details-table .beer-origin { margin-top:0; color:inherit; font-size:inherit; }
.beer-tags { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:7px; color:var(--muted); font-size:9px; line-height:1.4; }
.style-tag { padding:2px 6px; background:#f3eee3; border:1px solid #e9e0cd; border-radius:3px; color:#766447; font-size:8px; }
.list-membership { display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border:1px solid #e0c38b; border-radius:3px; background:#fbefcf; color:#72501e; font-size:9px; font-weight:650; line-height:1.4; }
.list-membership svg { width:11px; height:11px; flex-shrink:0; }
a.list-membership:hover { background:#f2dda7; border-color:#b68a41; }
.list-membership.pending { background:#f3eee3; color:var(--muted); border-color:var(--line); font-weight:400; }
.detail-membership { margin-top:12px; }
.detail-membership .list-membership { padding:5px 8px; font-size:11px; }
#beer-lists { scroll-margin-top:20px; }
.tag-dot { height:2px; width:2px; border-radius:50%; background:#b6a78a; }
.row-actions { display:flex; align-items:center; gap:14px; }
.beer-rating { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gold); min-width:39px; font-weight:600; }
.beer-rating svg { width:12px; height:12px; }
.icon-button { width:32px; height:36px; padding:0; display:grid; place-items:center; color:#b1a389; border-radius:4px; }
.icon-button:hover { color:var(--rust); background:#f7eddb; }
.favorite.active { color:var(--rust); }
.favorite.active svg { fill:var(--rust); stroke:var(--rust); }
.check-button { display:grid; place-items:center; height:34px; width:34px; border:1.5px solid #d4c9b4; border-radius:8px; padding:0; color:#b4a78e; background:#fffdf8; transition:background .15s,border-color .15s; }
.check-button:hover { color:var(--green); border-color:var(--green); background:#edf1e7; }
.check-button.checked { color:#fff; border-color:var(--green); background:var(--green); }
.check-button svg { width:17px; height:17px; stroke-width:2.2; }
.list-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 21px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.page-buttons { display:flex; align-items:center; gap:3px; }
.page-button { height:32px; min-width:32px; display:grid; place-items:center; border-radius:4px; font-size:11px; }
.page-button.active { background:var(--ink); color:var(--white); }
.page-button:hover:not(:disabled):not(.active) { background:var(--amber-light); }
.page-button svg { width:13px; height:13px; }
.collection-bottom-note { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px; padding:14px 2px; color:var(--muted); font-size:10px; }
.collection-bottom-note a:hover { text-decoration:underline; }

/* Coaster-inspired progress and journal cards. */
.sidebar { display:flex; flex-direction:column; gap:18px; }
.sidebar .panel { padding:22px; }
.section-label { display:flex; align-items:center; justify-content:space-between; font:700 13px/1.3 var(--display); margin:0 0 18px; }
.section-label svg { width:15px; height:15px; color:#b09055; }
.progress-panel { background:var(--ink); color:#fbf4e6; border-color:var(--ink); }
.progress-panel .section-label { color:#f6e7c9; }
.progress-ring { width:158px; height:158px; margin:3px auto 17px; padding:7px; border-radius:50%; background:conic-gradient(var(--amber) calc(var(--progress)*1%),#534735 0); outline:1px dashed #7b6642; outline-offset:5px; }
.ring-inner { width:100%; height:100%; background:var(--ink); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-count { color:var(--amber); font:700 52px/1 var(--display); letter-spacing:-2px; }
.ring-total { font-size:10px; color:#c7b897; margin-top:5px; }
.progress-caption { text-align:center; color:#cfc1a6; font-size:10px; margin:22px 0 18px; line-height:1.7; }
.progress-caption strong { color:var(--amber); font-weight:600; }
.stats-split { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #514634; border-bottom:1px solid #514634; text-align:center; padding:15px 0; margin-bottom:18px; }
.stats-split>div+div { border-left:1px solid #514634; }
.stat-number { display:block; font:600 23px/1.3 var(--display); color:#f8edd5; }
.stat-label { color:#c7b897; font-size:9px; margin-top:3px; }
.text-link { display:inline-flex; align-items:center; gap:6px; color:var(--rust); font-size:11px; font-weight:600; }
.text-link svg { width:13px; height:13px; }
.text-link:hover { text-decoration:underline; text-underline-offset:3px; }
.center-link { display:flex; justify-content:center; }
.progress-panel .text-link { color:var(--amber); font-size:10px; }
.milestone-row { display:flex; gap:11px; align-items:center; }
.medal { display:grid; place-items:center; flex-shrink:0; width:43px; height:43px; color:#9b6c1f; background:#f7e9c7; border:1px solid #e5cca0; border-radius:50%; }
.medal svg { width:23px; height:23px; }
.milestone-title { font-size:11px; font-weight:600; }
.milestone-description { font-size:9px; margin:3px 0 0; color:var(--muted); }
.progress-track { height:6px; background:#ece4d3; border-radius:3px; overflow:hidden; }
.progress-track>span { display:block; height:100%; background:var(--green); border-radius:inherit; }
.milestone-track { margin:18px 0 7px; }
.milestone-track>span { background:var(--gold); }
.tiny { font-size:10px; color:var(--muted); }
.milestone-footer { display:flex; justify-content:space-between; font-size:9px; }
.discovery-card { display:flex; align-items:center; gap:17px; }
.discovery-title { font:700 17px/1.2 var(--display); margin-bottom:7px; }
.discovery-copy { font-size:10px; color:var(--muted); line-height:1.7; margin-bottom:8px; }
.sidebar-note { display:flex; align-items:center; justify-content:center; gap:6px; font-size:9px; color:var(--muted); margin:0; }
.sidebar-note svg { width:12px; height:12px; }
.empty-state { text-align:center; padding:56px 25px; color:var(--muted); }
.empty-state>svg { width:34px; height:34px; margin-bottom:15px; color:var(--gold); }
.empty-state h3 { font-size:26px; letter-spacing:-.6px; color:var(--ink); margin-bottom:10px; }
.empty-state p { font-size:12px; margin-bottom:22px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 17px; background:var(--amber); color:var(--ink); border:1px solid #d4a243; border-radius:5px; font-size:12px; font-weight:650; line-height:1.5; }
.btn:hover { background:#f5c369; }
.btn svg { width:15px; height:15px; }
.btn.checked { background:var(--green); border-color:var(--green); color:white; }
.btn-secondary { border-color:#d5c9b3; background:var(--white); }
.btn-secondary:hover { background:#f6ecd7; }
.btn-secondary.active { border-color:#c59170; background:#f9ebdf; }
.btn-small { font-size:11px; padding:7px 11px; }

/* Beer pages and the tasting notebook. */
.detail-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:38px; align-items:center; margin:12px 0 35px; }
.detail-cover { display:grid; place-items:center; background:#e8d8b5; background-image:repeating-linear-gradient(45deg,transparent,transparent 11px,#b89d6120 11px,#b89d6120 12px); border:1px solid #d8c49b; border-radius:9px; min-height:278px; padding:36px; }
.detail-cover .beer-image { width:164px; height:184px; background:var(--white); border:8px solid var(--white); border-radius:9px; box-shadow:0 8px 16px #5943211a; transform:rotate(-5deg); }
.detail-cover .image-fallback svg { width:75px; height:85px; }
.detail-heading h1 { font:800 48px/1.04 var(--display); letter-spacing:-1.7px; margin:10px 0 13px; overflow-wrap:anywhere; }
.detail-brewery { font-size:14px; color:var(--muted); margin-bottom:0; }
.detail-brewery a:hover { color:var(--rust); text-decoration:underline; }
.detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:22px 0 13px; }
.check-date-form { margin-top:15px; max-width:360px; }
.check-date-form label { display:block; font-size:12px; font-weight:600; margin-bottom:7px; }
.check-date-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.check-date-controls input { flex:1 1 150px; min-width:0; max-width:100%; min-height:42px; padding:8px 10px; border:1px solid #d9cdb8; background:#fffcf5; border-radius:5px; font-size:16px; }
.check-date-controls button { min-height:42px; }
.checked-date { color:var(--muted); font-size:10px; }
.detail-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:475px; border-top:1px solid #d9ceb9; padding-top:17px; margin-top:20px; }
.fact-label { font-size:8px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); }
.fact-value { font:600 28px/1.5 var(--display); color:var(--ink); }
.fact-value small { font:11px var(--sans); color:var(--muted); }
.ibu-unit { display:inline-flex; align-items:center; gap:4px; }
.ibu-unit svg { width:16px; height:18px; color:var(--green); }
.fact-value.rating { color:var(--gold); }
.detail-main .panel { padding:28px; margin-bottom:22px; }
.detail-main h2 { font-size:19px; letter-spacing:-.4px; margin-bottom:23px; }
.details-table { display:grid; grid-template-columns:130px minmax(0,1fr); gap:14px; margin:0; font-size:12px; }
.details-table dt { color:var(--muted); }
.details-table dd { margin:0; overflow-wrap:anywhere; }
.details-table a { color:var(--rust); text-decoration:underline; text-underline-offset:3px; }
.notes-label { display:block; font-size:12px; color:var(--muted); margin-bottom:11px; }
.notes-field { width:100%; min-height:155px; resize:vertical; border:1px solid #ded4c0; background:#fdfaf3; padding:10px 15px; line-height:1.6; font-size:13px; border-radius:4px; }
.notes-field::placeholder { color:#91846d; }
.notes-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:10px; margin-top:13px; }
.source-collection { display:flex; align-items:center; gap:15px; }
.source-collection+.source-collection { padding-top:19px; margin-top:19px; border-top:1px solid var(--line); }
.source-collection-title { font:700 13px/1.4 var(--display); margin-bottom:4px; }
.source-collection-count { font-size:10px; color:var(--muted); }
.source-note { padding:13px 16px; border-left:3px solid var(--gold); background:#f8edcf; color:#776039; font-size:11px; margin:20px 0; }
.book-details .tiny { margin:18px 0 0; }

/* Bookshelf and personal journal. */
.subpage-title { font-size:53px; letter-spacing:-2px; line-height:1.03; margin:15px 0 19px; }
.subpage-title em { color:var(--rust); }
.subpage-description { color:var(--muted); font-size:12px; margin-bottom:32px; }
.collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-bottom:24px; }
.collection-card { padding:0 24px 25px; }
.collection-card-heading { display:flex; flex-direction:column; align-items:stretch; gap:0; margin-bottom:20px; }
.collection-card-heading>.book { align-self:center; width:127px; margin:30px 0 33px; box-shadow:6px 7px 0 #cdbb9c; transform:rotate(-4deg); }
.collection-card:nth-child(2) .book { transform:rotate(3deg); }
.collection-card:nth-child(3) .book { transform:rotate(-2deg); }
.collection-card-heading>div:last-child { border-top:1px solid var(--line); padding-top:22px; }
.collection-card h2 { font-size:27px; letter-spacing:-.7px; margin-bottom:10px; }
.collection-card h2 a:hover { color:var(--rust); }
.collection-card p { font-size:11px; color:var(--muted); margin-bottom:0; }
.collection-card .eyebrow { color:var(--rust); font-size:8px; margin-bottom:9px; }
.collection-card-footer { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin:10px 0 20px; }
.collection-card>.btn { width:100%; }
.source-lists { padding-top:27px; border-top:1px solid var(--line); margin-top:28px; }
.source-lists h2 { font-size:23px; letter-spacing:-.5px; margin-bottom:12px; }
.source-lists p { color:var(--muted); font-size:12px; }
.source-lists .btn { margin:0 12px 10px 0; }
.profile-hero { display:flex; align-items:center; gap:24px; padding:30px; border-radius:9px; background:#ead9b2; border:1px solid #d9c49c; margin:0 0 28px; }
.profile-avatar { width:80px; height:80px; background:var(--ink); color:var(--amber); border:5px double #e0bd6d; font:700 36px var(--display); }
.avatar,.member-avatar { position:relative; overflow:hidden; }
.avatar-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.profile-hero h1 { font-size:43px; letter-spacing:-1.5px; margin:0 0 10px; overflow-wrap:anywhere; }
.profile-hero p { font-size:12px; color:#726040; margin:0; }
.profile-hero .eyebrow { margin-bottom:9px; color:var(--rust); font-size:9px; }
.profile-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-bottom:28px; }
.profile-stat { padding:21px 24px; }
.profile-stat>svg { color:var(--gold); }
.profile-stat strong { display:block; font:700 43px/1.2 var(--display); color:var(--ink); margin-top:9px; letter-spacing:-1px; }
.profile-stat span { color:var(--muted); font-size:10px; }
.profile-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:19px; margin:30px 0 17px; letter-spacing:-.4px; }
.profile-section-heading a { font:600 10px var(--sans); letter-spacing:0; color:var(--rust); }
.profile-section-heading>svg { color:var(--gold); }
.profile-collections { display:flex; flex-direction:column; gap:13px; }
.profile-collection { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:20px; align-items:center; padding:19px 21px; }
.profile-collection h3 { font-size:14px; margin:0 0 10px; }
.profile-collection p { color:var(--muted); font-size:10px; margin:9px 0 0; }
.profile-collection>svg { color:#9f8d6b; width:16px; height:16px; }
.profile-percent { color:var(--muted); }
.profile-activity-date { color:var(--muted); font-size:9px; }
.progress-views { display:flex; gap:5px; padding:5px; border:1px solid var(--line); border-radius:8px; background:#eee7d9; }
.progress-views button { flex:1; min-width:0; padding:11px 8px; border-radius:5px; font-size:12px; font-weight:650; color:var(--muted); }
.progress-views button[aria-pressed=true] { background:var(--ink); color:var(--white); box-shadow:0 2px 4px #2c241c18; }
.progress-views button:hover { color:var(--rust); }
.progress-views button[aria-pressed=true]:hover { color:var(--amber); }
.progress-explainer { color:var(--muted); font-size:12px; margin:15px 0 18px; }
.progress-tools { display:flex; gap:12px; }
.progress-tools .search-box { flex:1; min-width:0; background:var(--white); }
.progress-tools .select-wrap { flex:0 1 165px; }
.progress-tools .select-wrap select { width:100%; }
.progress-group-summary { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; font-size:11px; color:var(--muted); margin:18px 0 12px; }
.progress-group-summary strong { color:var(--ink); font-weight:600; }
.progress-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.progress-group { min-width:0; padding:18px; transition:border-color .15s; }
.progress-group:hover { border-color:var(--gold); }
.progress-group.is-complete { background:var(--green-soft); border-color:#b9c7b1; }
.progress-group-heading { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.progress-group-heading h3 { flex:1; min-width:0; margin:0; font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
.progress-group-heading>svg { color:var(--gold); }
.progress-group-heading>svg:last-child { width:14px; color:var(--muted); }
.progress-group-heading .country-flags { flex-shrink:0; }
.progress-group-count { display:flex; flex-wrap:wrap; justify-content:space-between; gap:3px 10px; color:var(--muted); font-size:11px; margin-bottom:10px; }
.progress-group-count strong { color:var(--green-dark); }
.progress-group-count>span>strong { font-size:17px; color:var(--ink); }
.progress-show-all { display:flex; margin:17px auto 0; }
.progress-footnote { color:var(--muted); font-size:11px; margin:18px 0 0; }
.progress-empty { padding:30px 16px; text-align:center; color:var(--muted); }
.progress-group-filter { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 24px; background:var(--amber-light); border-bottom:1px solid var(--line); }
.progress-group-filter span,.progress-group-filter small { display:block; color:var(--muted); font-size:10px; }
.progress-group-filter strong { display:block; font:700 19px/1.5 var(--display); }
.progress-group-filter .text-link { flex-shrink:0; }
@media(max-width:540px) {
  .progress-tools { flex-wrap:wrap; gap:8px; }
  .progress-tools .search-box { flex-basis:100%; }
  .progress-tools .select-wrap { flex-basis:100%; }
  .progress-groups { grid-template-columns:1fr; gap:10px; }
  .progress-group-filter { padding:18px; flex-wrap:wrap; }
}
.activity-list .beer-row { min-height:99px; }
.backup-card p { color:var(--muted); font-size:11px; }
.backup-buttons { display:flex; flex-direction:column; gap:9px; }
.site-footer { max-width:1232px; display:flex; align-items:center; gap:24px; border-top:1px solid #d7ccb7; margin:0 auto; padding:26px 0 32px; font-size:10px; color:var(--muted); }
.footer-brand { font:700 22px var(--display); letter-spacing:-.8px; color:var(--ink); }
.footer-links { display:flex; flex-wrap:wrap; gap:12px 24px; margin-left:auto; color:var(--rust); }
.footer-links a:hover { text-decoration:underline; text-underline-offset:3px; }
.toast { position:fixed; z-index:20; bottom:25px; left:50%; max-width:calc(100vw - 32px); transform:translate(-50%,15px); border-radius:6px; padding:12px 20px; color:#f9efd8; background:var(--ink); box-shadow:0 5px 20px #38281025; border:1px solid #8c7346; font-size:12px; text-align:center; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.loading,.noscript { padding:70px 25px; text-align:center; color:var(--muted); }
.not-found { text-align:center; padding:80px 24px; }
.not-found h1 { font-size:42px; letter-spacing:-1.2px; }

/* Responsive layouts keep the checklist usable on narrow screens. */
@media(min-width:1101px) {
  .list-column+.sidebar { margin-top:60px; }
  .profile-sidebar { margin-top:0!important; }
}
@media(max-width:1240px) {
  .header-inner { gap:50px; }
  .main-nav { gap:25px; }
  .content-layout { grid-template-columns:minmax(0,1fr) 257px; gap:22px; }
  .beer-row { gap:12px; padding:17px; }
  .row-actions { gap:8px; }
  .list-tools { flex-wrap:wrap; }
  .search-box { flex-basis:100%; }
  .select-wrap { flex:1; }
  .select-wrap select { width:100%; }
  .site-footer { margin:0 36px; }
  .hero-stamp { right:-19px; }
}
@media(max-width:1100px) {
  .header-inner { gap:35px; }
  .hero-title { font-size:54px; }
  .collection-hero { padding:30px 30px 40px; }
  .hero-footnote { left:30px; }
  .hero-description { font-size:11px; }
  .hero-stamp { display:none; }
  .hero-meta { font-size:9px; }
  .beer-rating { display:none; }
  .list-tabs { gap:17px; padding:0 17px; }
  .tab { font-size:10px; }
  .checklist-heading>span { display:none; }
  .sidebar .panel { padding:20px; }
  .collection-card { padding:0 20px 22px; }
  .collection-card h2 { font-size:24px; }
  .collection-card-footer { font-size:9px; }
  .collection-card>.btn { font-size:10px; }
}
@media(max-width:900px) {
  .header-inner { padding:0 25px; gap:40px; }
  .user-link>span:not(.avatar) { display:none; }
  .page { padding:22px 25px 45px; }
  .collection-hero { min-height:300px; grid-template-columns:1.3fr 1fr; padding:26px 27px 37px; }
  .hero-title { font-size:49px; }
  .hero-art>img { width:120%; max-width:none; transform:translate(10px,10px); }
  .hero-meta .meta-divider { display:none; }
  .hero-meta { gap:7px 13px; }
  .edition-nav>a { padding:13px; gap:10px; }
  .edition-nav>a>svg { display:none; }
  .edition-nav strong { font-size:12px; }
  .content-layout { grid-template-columns:minmax(0,1fr) 230px; gap:18px; }
  .beer-row { grid-template-columns:46px minmax(0,1fr) auto; gap:11px; }
  .beer-rank { display:none; }
  .beer-image { width:46px; height:54px; }
  .beer-name { font-size:14px; }
  .row-actions .favorite { display:none; }
  .list-tabs { justify-content:space-between; gap:7px; padding:0 13px; }
  .tab { gap:4px; font-size:10px; }
  .tab-count { font-size:8px; padding:1px 4px; }
  .check-hint { display:none; }
  .list-info { padding:11px 17px; }
  .sidebar .panel { padding:19px; }
  .progress-ring { width:144px; height:144px; }
  .ring-count { font-size:46px; }
  .discovery-card { gap:12px; }
  .discovery-title { font-size:15px; }
  .page-button { min-width:27px; height:30px; }
  .list-pagination { padding:15px; }
  .detail-layout { grid-template-columns:185px minmax(0,1fr); gap:27px; }
  .detail-cover { min-height:220px; padding:23px; }
  .detail-cover .beer-image { width:124px; height:149px; }
  .detail-heading h1 { font-size:40px; }
  .detail-main .panel { padding:23px; }
  .details-table { grid-template-columns:105px minmax(0,1fr); gap:13px 11px; font-size:11px; }
  .collection-grid { gap:15px; }
  .collection-card-heading>.book { width:102px; }
  .collection-card h2 { font-size:22px; }
  .collection-card p { font-size:10px; }
  .collection-card-footer { flex-wrap:wrap; gap:4px; }
  .profile-stat { padding:17px; }
  .profile-stat strong { font-size:37px; }
  .profile-stats { gap:12px; }
  .profile-activity-date { display:none; }
  .site-footer { margin:0 25px; gap:15px; }
}
@media(max-width:740px) {
  .site-header { height:120px; }
  .header-inner { position:relative; align-items:flex-start; padding-top:16px; }
  .brand { font-size:27px; }
  .brand-mark svg { height:36px; }
  .brand small { font-size:6px; letter-spacing:1.5px; margin-top:6px; }
  .user-link { padding-top:3px; }
  .main-nav { position:absolute; left:25px; right:25px; bottom:0; height:42px; justify-content:space-between; gap:22px; max-width:420px; }
  .main-nav a { font-size:11px; }
  .content-layout { display:flex; flex-direction:column; gap:24px; }
  .list-column,.detail-main,.sidebar { width:100%; }
  .sidebar { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .sidebar .progress-panel { grid-row:span 2; }
  .sidebar-note { grid-column:1/-1; }
  .detail-sidebar,.profile-sidebar { display:flex; }
  .detail-sidebar .panel,.profile-sidebar .panel { width:100%; }
  .row-actions .favorite { display:grid; }
  .checklist-heading { margin-bottom:17px; }
  .checklist-heading h2 { font-size:24px; }
  .list-tools { flex-wrap:nowrap; }
  .search-box { flex-basis:auto; }
  .select-wrap { flex:0 1 auto; }
  .select-wrap select { width:122px; }
  .list-tabs { gap:26px; justify-content:flex-start; padding:0 20px; }
  .tab { font-size:11px; gap:6px; }
  .tab-count { font-size:9px; }
  .beer-row { padding:17px 20px; grid-template-columns:48px minmax(0,1fr) auto; gap:15px; }
  .beer-image { width:48px; height:56px; }
  .beer-name { font-size:15px; }
  .list-info { padding:11px 20px; }
  .list-pagination { padding:17px 20px; }
  .collection-grid { grid-template-columns:1fr; gap:18px; }
  .collection-card { padding:24px; }
  .collection-card-heading { flex-direction:row; align-items:center; gap:27px; margin-bottom:25px; }
  .collection-card-heading>.book { width:98px; margin:0; }
  .collection-card-heading>div:last-child { border:0; padding-top:0; }
  .collection-card h2 { font-size:29px; }
  .collection-card p { font-size:11px; }
  .collection-card-footer { font-size:10px; }
  .collection-card>.btn { font-size:11px; width:auto; }
  .subpage-title { font-size:44px; }
  .site-footer { flex-wrap:wrap; gap:12px 20px; }
  .footer-links { width:100%; margin-left:0; }
  .profile-hero h1 { font-size:38px; }
}
@media(max-width:540px) {
  .page { padding:19px 17px 38px; }
  .header-inner { padding-left:20px; padding-right:20px; }
  .main-nav { left:20px; right:20px; }
  .breadcrumb { font-size:9px; gap:5px; margin-bottom:18px; }
  .collection-hero { display:block; min-height:337px; padding:23px 23px 63px; margin-bottom:16px; }
  .hero-copy { z-index:1; }
  .collection-hero .eyebrow { font-size:7px; letter-spacing:1.4px; }
  .hero-title { font-size:44px; letter-spacing:-2.1px; margin:11px 0 13px; }
  .hero-title em { letter-spacing:-2.1px; }
  .hero-description { font-size:10px; line-height:1.75; margin-bottom:7px; }
  .hero-browse { font-size:10px; margin-bottom:15px; }
  .hero-meta { max-width:150px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; font-size:8px; }
  .hero-art { position:absolute; width:177px; height:126px; right:-13px; bottom:10px; }
  .hero-art>img { width:100%; transform:none; }
  .hero-footnote { bottom:12px; left:23px; font-size:5px; letter-spacing:1px; }
  .edition-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:12px; }
  .edition-nav>a { padding:10px; gap:9px; border-radius:5px; }
  .edition-nav .book.small,.all-beers-mark { width:24px; height:32px; }
  .edition-nav strong { font-size:11px; margin-bottom:2px; }
  .edition-nav small { font-size:9px; }
  .edition-nav small span { display:none; }
  .edition-note { margin-bottom:23px; }
  .edition-note summary { font-size:9px; }
  .checklist-heading h2 { font-size:24px; }
  .checklist-heading .eyebrow { font-size:7px; }
  .list-tools { flex-wrap:wrap; padding:14px; gap:8px; }
  .search-box { flex-basis:100%; }
  .search-box input { font-size:12px; }
  .select-wrap { flex:1; }
  .select-wrap select { width:100%; font-size:10px; }
  .list-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 12px; height:65px; }
  .tab { flex-direction:column; justify-content:center; gap:4px; font-size:10px; padding:7px 0 5px; }
  .tab-count { font-size:8px; line-height:1.3; min-width:22px; }
  .beer-row { padding:17px 13px; gap:10px; grid-template-columns:43px minmax(0,1fr) auto; min-height:113px; }
  .beer-image { width:43px; height:52px; }
  .beer-name { font-size:14px; }
  .brewery-name { font-size:9px; }
  .beer-origin { font-size:9px; gap:5px; }
  .country-flag { width:16px; height:12px; }
  .beer-origin.detail-origin { font-size:10px; }
  .detail-origin .country-flag { width:20px; height:15px; }
  .beer-tags { font-size:8px; gap:5px; }
  .style-tag { font-size:7px; padding:2px 4px; }
  .row-actions { gap:3px; }
  .check-button { width:33px; height:36px; border-radius:7px; }
  .icon-button { width:28px; height:36px; }
  .icon-button svg { width:16px; height:16px; }
  .list-info { font-size:9px; padding:11px 14px; }
  .list-pagination { padding:15px 12px; font-size:9px; flex-wrap:wrap; }
  .page-button { height:30px; min-width:27px; font-size:10px; }
  .collection-bottom-note { font-size:9px; }
  .sidebar { gap:12px; }
  .sidebar .panel { padding:16px 13px; }
  .sidebar .section-label { font-size:11px; gap:5px; margin-bottom:16px; }
  .section-label svg { width:13px; height:13px; }
  .progress-ring { width:119px; height:119px; padding:5px; }
  .ring-count { font-size:40px; }
  .ring-total { font-size:8px; }
  .progress-caption { font-size:9px; margin-top:18px; }
  .stat-number { font-size:20px; }
  .stat-label { font-size:8px; }
  .stats-split { padding:12px 0; margin-bottom:13px; }
  .progress-panel .text-link { font-size:9px; }
  .discovery-card .book { display:none; }
  .discovery-title { font-size:17px; }
  .discovery-copy { font-size:9px; }
  .text-link { font-size:10px; }
  .milestone-row { gap:7px; }
  .medal { width:31px; height:31px; }
  .medal svg { width:19px; height:19px; }
  .milestone-title { font-size:10px; }
  .milestone-description,.milestone-footer { font-size:8px; }
  .detail-layout { grid-template-columns:86px minmax(0,1fr); align-items:start; gap:18px; margin-bottom:26px; }
  .detail-cover { min-height:120px; padding:12px; border-radius:5px; }
  .detail-cover .beer-image { width:62px; height:79px; border-width:4px; border-radius:5px; }
  .detail-cover .image-fallback svg { width:35px; height:42px; }
  .detail-heading .eyebrow { font-size:7px; letter-spacing:.8px; gap:5px; }
  .detail-heading h1 { font-size:31px; letter-spacing:-1px; margin:7px 0 10px; }
  .detail-brewery { font-size:11px; }
  .detail-actions { gap:7px; margin:15px 0 11px; }
  .detail-actions .btn { font-size:10px; padding:8px 10px; gap:5px; }
  .detail-actions .btn svg { width:13px; height:13px; }
  .checked-date { font-size:9px; }
  .detail-facts { gap:4px; margin-top:14px; padding-top:13px; }
  .fact-label { font-size:6px; letter-spacing:.2px; }
  .fact-value { font-size:23px; }
  .fact-value small { font-size:8px; }
  .detail-main .panel { padding:21px; }
  .detail-main h2 { font-size:18px; }
  .details-table { grid-template-columns:94px minmax(0,1fr); gap:13px 10px; font-size:11px; }
  .notes-field { font-size:12px; }
  .notes-footer { align-items:flex-start; font-size:9px; }
  .notes-footer .btn { flex-shrink:0; font-size:10px; }
  .detail-sidebar .panel,.profile-sidebar .panel { padding:23px; }
  .detail-sidebar .section-label,.profile-sidebar .section-label { font-size:13px; }
  .profile-sidebar .progress-ring { width:150px; height:150px; }
  .subpage-title { font-size:38px; letter-spacing:-1.5px; }
  .subpage-description { font-size:11px; }
  .collection-card { padding:23px; }
  .collection-card-heading { gap:24px; }
  .collection-card-heading>.book { width:85px; }
  .collection-card h2 { font-size:26px; }
  .collection-card .eyebrow { font-size:7px; }
  .source-lists .btn { font-size:10px; }
  .profile-hero { padding:24px 20px; gap:17px; }
  .profile-avatar { width:62px; height:62px; font-size:28px; }
  .profile-hero h1 { font-size:31px; margin-bottom:8px; }
  .profile-hero .eyebrow { font-size:7px; letter-spacing:1.2px; }
  .profile-hero p { font-size:10px; }
  .profile-stats { gap:9px; }
  .profile-stat { padding:16px 12px; }
  .profile-stat strong { font-size:34px; }
  .profile-stat span { font-size:9px; }
  .profile-stat>svg { width:16px; height:16px; }
  .profile-section-heading { font-size:17px; }
  .profile-collection { padding:18px; grid-template-columns:42px minmax(0,1fr) 12px; gap:15px; }
  .profile-collection .book { width:42px; }
  .profile-collection h3 { font-size:12px; }
  .profile-collection p { font-size:9px; }
  .profile-activity-date { display:none; }
  .site-footer { margin:0 17px; padding:22px 0; }
  .footer-brand { font-size:21px; }
  .site-footer>span { font-size:9px; }
}
@media(max-width:360px) {
  .hero-title { font-size:41px; }
  .hero-description { font-size:9px; }
  .hero-art { width:170px; bottom:12px; }
  .collection-hero { padding-left:19px; padding-right:19px; min-height:330px; }
  .hero-footnote { left:19px; font-size:4.5px; }
  .row-actions .favorite { display:none; }
  .sidebar { grid-template-columns:1fr; }
  .sidebar .progress-panel { grid-row:auto; }
  .progress-ring { width:150px; height:150px; }
  .tab { font-size:9px; }
  .details-table { grid-template-columns:85px minmax(0,1fr); }
  .detail-layout { grid-template-columns:70px minmax(0,1fr); gap:13px; }
  .detail-cover { min-height:106px; padding:10px; }
  .detail-cover .beer-image { width:50px; height:67px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* A seat at the bar: accounts and registration. */
.auth-page { padding-bottom:80px; }
.auth-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:70px; max-width:1080px; margin:40px auto 0; align-items:start; }
.auth-story { padding-top:28px; }
.auth-story h1 { font-size:57px; letter-spacing:-2px; line-height:1.08; margin:22px 0; }
.auth-story h1 em { color:var(--rust); }
.auth-story>p:not(.eyebrow) { max-width:370px; color:var(--muted); font-size:14px; line-height:1.9; }
.auth-story>img { display:block; width:360px; margin:25px 0 8px; }
.auth-promise { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.auth-promise svg { color:var(--green); }
.auth-card { padding:34px; border-top:4px solid var(--amber); }
.auth-card h2 { font-size:29px; letter-spacing:-.8px; margin:10px 0; }
.auth-intro { color:var(--muted); font-size:12px; margin-bottom:25px; }
.auth-card label,.account-settings label { display:block; font-size:12px; font-weight:600; margin:17px 0 7px; }
.auth-card input:not([type=checkbox]),.account-settings input { width:100%; min-width:0; padding:12px 13px; border:1px solid #d9cdb8; background:#fffcf5; border-radius:5px; font-size:14px; }
.auth-card input::placeholder { color:#948673; }
.field-hint { color:var(--muted); font-size:10px; margin:7px 0 0; }
.password-toggle { display:block; font-size:10px; margin-top:9px; padding:0; }
.auth-card .checkbox-label { display:flex; gap:9px; align-items:center; font-weight:400; margin:23px 0; }
.checkbox-label input { width:16px; height:16px; accent-color:var(--rust); }
.auth-submit { width:100%; margin-top:8px; padding:13px; }
.form-message { font-size:12px; padding:11px 13px; border-left:3px solid var(--rust); color:#803b27; background:#faeadd; line-height:1.6; margin:18px 0; }
.auth-switch { text-align:center; font-size:12px; color:var(--muted); padding-top:23px; margin:24px 0 16px; border-top:1px solid var(--line); }
.auth-switch a { color:var(--rust); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.auth-guest { display:flex; justify-content:center; font-size:11px; }
.account-banner { display:flex; gap:24px; align-items:center; justify-content:space-between; background:#f9eacb; border:1px solid #dfc793; border-radius:7px; padding:24px 28px; margin-bottom:28px; }
.account-banner h2 { font-size:21px; margin-bottom:9px; }
.account-banner p { font-size:12px; color:var(--muted); margin:0; max-width:700px; overflow-wrap:anywhere; }
.account-banner p+p { margin-top:9px; }
.account-banner-actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex-shrink:0; }
.account-settings { max-width:500px; padding:30px; margin:28px 0; }
.account-settings h2 { font-size:25px; }
.account-settings>p { color:var(--muted); font-size:12px; }
.account-settings [type=submit] { margin-top:24px; }
.account-page .account-banner-actions>a[href="#/account"] { display:none; }
.profile-username { display:flex; flex-wrap:wrap; gap:6px 12px; color:var(--muted); font-size:12px; }
.profile-username strong { color:var(--ink); overflow-wrap:anywhere; }
.profile-name-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#profile-name-format { width:100%; min-width:0; padding:12px; border:1px solid #d9cdb8; background:#fffcf5; border-radius:5px; font-size:14px; }
.public-name-preview { margin-top:18px; padding:14px; border:1px solid #dfc793; background:#f9eacb; border-radius:5px; }
.public-name-preview span { display:block; color:var(--muted); font-size:11px; margin-bottom:5px; }
.public-name-preview output { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
#profile-name-form button:disabled { opacity:.55; cursor:default; }
@media(max-width:540px) { .profile-name-fields { grid-template-columns:1fr; gap:0; } #profile-name-format { font-size:16px; } }
.photo-preview { margin:20px 0 8px; }
.photo-preview .profile-avatar { width:96px; height:96px; }
.photo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:20px; }
.account-settings .photo-actions [type=submit] { margin-top:0; }
.photo-actions button:disabled { opacity:.55; cursor:default; }
#avatar-file { font-size:12px; padding:10px; }
#avatar-file::file-selector-button { border:1px solid #d9cdb8; background:#f9eacb; padding:7px 9px; border-radius:4px; margin-right:8px; cursor:pointer; }
@media(max-width:1100px) {
  .header-inner { gap:35px; }
  .header-account { gap:12px; }
  .account-name { max-width:85px; }
}
@media(max-width:900px) {
  .header-account .account-name { display:none; }
  .auth-layout { gap:30px; margin-top:20px; }
  .auth-story h1 { font-size:45px; }
  .auth-card { padding:26px; }
  .account-banner { align-items:flex-start; }
  .account-banner-actions { max-width:190px; }
}
@media(max-width:740px) {
  .auth-layout { grid-template-columns:1fr; max-width:460px; gap:25px; }
  .auth-story { padding-top:0; }
  .auth-story h1 { font-size:42px; margin:16px 0; }
  .auth-story>img,.auth-promise { display:none; }
  .auth-story>p:not(.eyebrow) { max-width:none; font-size:12px; margin-bottom:0; }
  .account-banner { flex-direction:column; padding:22px; gap:18px; }
  .account-banner-actions { max-width:none; }
}
@media(max-width:540px) {
  .header-account { gap:10px; }
  .header-account .btn { font-size:9px; padding:7px 8px; }
  .login-link,.logout-link { font-size:10px; }
  .auth-card,.account-settings { padding:24px 20px; }
  .auth-story h1 { font-size:39px; }
  .auth-card input:not([type=checkbox]),.account-settings input { font-size:16px; }
  .account-save-status { padding:10px 17px; }
  .account-save-status button { margin:4px 8px; }
}
@media(max-width:360px) {
  .header-account { gap:8px; }
  .header-account .btn { max-width:76px; white-space:normal; line-height:1.3; text-align:center; }
}

/* The taproom: community discoveries and the all-time board. */
.home-page { padding-top:30px; }
.home-hero { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:25px; padding:28px 42px; border:1px solid #e2cfaa; border-radius:10px; background:#f3e7ce; overflow:hidden; }
.home-hero h1 { font-size:55px; line-height:1.02; letter-spacing:-2px; margin:14px 0; }
.home-hero h1 em { color:var(--rust); }
.home-hero p:not(.eyebrow) { color:#736047; font-size:12px; line-height:1.8; margin-bottom:21px; }
.home-hero .btn { font-size:11px; }
.home-hero-art { position:relative; text-align:center; min-width:0; }
.home-hero-art img { width:350px; max-height:230px; }
.home-hero-art>span { display:block; color:#846937; font-size:8px; letter-spacing:2px; margin-top:6px; }
.home-hero-art strong { font:600 italic 17px var(--serif); letter-spacing:0; margin-left:8px; color:#6c502b; }
.community-stats { display:flex; align-items:center; flex-wrap:wrap; gap:12px 26px; padding:22px 3px; margin-bottom:15px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.community-stats>span { display:flex; align-items:center; gap:7px; }
.community-stats svg { width:14px; height:14px; color:var(--gold); }
.community-stats strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.community-stats>a { margin-left:auto; color:var(--rust); font-size:10px; }
.home-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; }
.home-feed-section { min-width:0; }
.feed-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:9px; }
.feed-heading .eyebrow { font-size:8px; margin-bottom:6px; }
.feed-heading h2 { font-size:28px; letter-spacing:-.8px; margin:0; }
.community-refresh { font-size:10px; display:flex; align-items:center; gap:6px; min-height:36px; }
.community-refresh svg { width:13px; height:13px; }
.community-status { color:var(--muted); font-size:10px; min-height:16px; margin:11px 0 19px; }
.community-status.has-error { color:var(--rust); }
.community-feed { list-style:none; padding:0; margin:0; }
.feed-entry { padding:24px 26px 17px; border-bottom:1px solid var(--line); }
.feed-entry:last-child { border-bottom:0; }
.feed-person { display:flex; align-items:center; gap:10px; margin-bottom:17px; }
.member-avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; flex-shrink:0; font:700 11px var(--display); border:1px solid #e0d4bb; background:#f4e5bc; color:#75572d; }
.avatar-tone-1 { background:#e5ecd9; color:#46603a; border-color:#d3ddc5; }
.avatar-tone-2 { background:#f0ddcf; color:#8e492e; border-color:#e5c9b6; }
.avatar-tone-3 { background:#e4e7ea; color:#516471; border-color:#d2dbe1; }
.feed-person p { min-width:0; margin:0; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.feed-person p>span:not(.you-label) { display:block; color:var(--muted); font-size:10px; }
.feed-person p svg { color:var(--green); width:11px; height:11px; margin-left:3px; }
.feed-person time { margin-left:auto; align-self:flex-start; color:#8b7d68; font-size:9px; white-space:nowrap; padding-top:3px; }
.member-avatar-link { display:inline-flex; flex-shrink:0; border-radius:50%; }
.member-name-link:hover,.country-link:hover { color:var(--rust); text-decoration:underline; text-underline-offset:3px; }
.country-link { display:inline-flex; align-items:center; gap:6px; border-bottom:1px dotted #bba886; }
.detail-origin,.details-table .beer-origin { flex-wrap:wrap; }
.member-status { padding:32px; }
.member-status .text-link { display:block; margin-top:18px; }
.member-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:-10px 0 24px; }
.member-toolbar p { color:var(--muted); font-size:12px; margin:0; }
.member-page .ring-count small { font-size:20px; }
.member-search { display:block; }
.member-list-tabs { margin-bottom:16px; border:1px solid var(--line); border-radius:6px; gap:24px; }
.member-missing-label { color:var(--rust); }
.member-remaining-link { text-decoration:underline; text-underline-offset:3px; }
.member-check-count { color:var(--muted); font-size:12px; margin:14px 0; }
.member-beer-row { cursor:default; }
.member-check-date { color:var(--muted); font-size:10px; white-space:nowrap; }
.member-check-date svg { width:12px; height:12px; color:var(--green); margin-right:4px; }
.member-substitute-note { color:var(--green); font-size:10px; margin:8px 0 0; }
.member-substitute-note a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:740px) {
  .member-beer-row { grid-template-columns:43px minmax(0,1fr); }
  .member-check-date { grid-column:2; }
  .member-toolbar { align-items:flex-start; }
}
.you-label { display:inline-block; font-size:8px; font-weight:500; color:var(--green); background:var(--green-soft); padding:0 5px; border-radius:3px; margin-left:6px; vertical-align:middle; }
.feed-beer { display:flex; align-items:center; gap:15px; padding-left:46px; }
.feed-beer-cover { flex-shrink:0; }
.feed-beer .beer-image { width:53px; height:61px; }
.feed-beer-info { min-width:0; flex:1; }
.feed-beer-info>.beer-name { font-size:17px; line-height:1.25; display:block; overflow-wrap:anywhere; }
.feed-beer-info>p { color:var(--muted); font-size:10px; margin:5px 0; overflow-wrap:anywhere; }
.feed-beer-meta { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; color:#8d806c; font-size:9px; line-height:1.5; }
.feed-beer-meta>span { min-width:0; overflow-wrap:anywhere; }
.feed-beer-meta .beer-origin { font-size:9px; }
.feed-beer-meta .country-flag { width:15px; height:11px; }
.feed-beer>.check-button { flex-shrink:0; }
.feed-membership { padding:10px 0 0 114px; margin-top:0; }
.feed-end { padding:17px 20px; background:#faf6ed; font-size:10px; color:var(--muted); text-align:center; margin:0; border-top:1px solid var(--line); }
.feed-end svg { width:13px; height:13px; color:var(--green); margin-right:5px; }
.community-empty { padding:62px 20px 48px; }
.community-empty>svg { width:44px; height:44px; }
.community-empty h3 { font-size:30px; line-height:1.15; }
.community-empty .feed-empty-note { font-size:10px; margin:24px auto 0; max-width:270px; }
.community-loading { padding:30px; color:var(--muted); font-size:12px; }
.community-loading span { display:block; height:65px; margin-top:25px; border-radius:6px; background:linear-gradient(90deg,#eee7d8 15%,#f7f1e5 15%,#f7f1e5 78%,transparent 78%); }
.home-sidebar { display:flex; flex-direction:column; gap:23px; padding-top:9px; min-width:0; }
.leaderboard-heading { display:flex; align-items:center; gap:12px; padding:22px 21px; border-bottom:1px solid var(--line); background:#faf6ed; }
.leaderboard-emblem { display:grid; place-items:center; width:36px; height:40px; color:var(--gold); }
.leaderboard-emblem svg { width:30px; height:30px; stroke-width:1.4; }
.leaderboard-heading h2 { font-size:23px; letter-spacing:-.6px; margin:0; }
.leaderboard-heading .eyebrow { font-size:7px; letter-spacing:1.3px; margin-bottom:5px; }
.all-time-label { margin-left:auto; color:#8c7856; border:1px solid #ddd0b7; border-radius:4px; font-size:8px; padding:3px 6px; white-space:nowrap; }
.leaderboard { list-style:none; padding:4px 18px; margin:0; }
.leaderboard-user { display:flex; align-items:center; gap:10px; padding:17px 0; border-bottom:1px solid #eee7da; }
.leaderboard-user:last-child { border:0; }
.leaderboard-rank { flex-shrink:0; width:16px; text-align:center; color:#a09480; font:600 12px var(--display); }
.leaderboard-rank.podium { color:var(--gold); }
.leaderboard-rank svg { width:17px; height:21px; }
.leaderboard-user .member-avatar { width:30px; height:30px; font-size:10px; }
.leaderboard-person { flex:1; min-width:0; }
.leaderboard-person>strong { font-size:11px; font-weight:600; overflow-wrap:anywhere; display:block; line-height:1.5; }
.leaderboard-meter { display:block; height:3px; width:100%; margin-top:7px; border-radius:3px; background:#eee7d8; overflow:hidden; }
.leaderboard-meter>span { display:block; height:100%; min-width:2px; background:var(--amber); }
.leaderboard-user.is-you .leaderboard-meter>span { background:var(--green); }
.leaderboard-count { min-width:32px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }
.leaderboard-count strong { display:block; font:700 19px/1.1 var(--display); }
.leaderboard-count small { display:block; color:var(--muted); font-size:8px; margin-top:3px; }
.leaderboard-note { border-top:1px solid var(--line); color:var(--muted); font-size:9px; line-height:1.7; padding:15px 22px; margin:0; }
.leaderboard-empty { padding:28px 23px; margin:0; font-size:12px; color:var(--muted); line-height:1.8; }
.home-journey { padding:27px; background:var(--green-dark); color:#fff5df; border:1px solid #253e2a; border-radius:8px; }
.home-journey .eyebrow { color:#c3ccac; font-size:8px; }
.home-journey h2 { margin:14px 0; font-size:29px; letter-spacing:-.7px; line-height:1.13; }
.home-journey h2 em { color:#e9c782; }
.home-journey>p:not(.eyebrow) { color:#c6d1bf; font-size:11px; line-height:1.8; }
.home-journey>.btn { font-size:11px; padding:10px 15px; margin-top:5px; }
.home-book-stack { display:flex; gap:14px; align-items:end; margin:30px 0 16px; padding-left:6px; }
.home-book-stack .book { width:53px; box-shadow:3px 4px 0 #1b3421; transform:rotate(-7deg); }
.home-book-stack .book:nth-child(2) { width:57px; transform:rotate(2deg) translateY(-4px); }
.home-book-stack .book:nth-child(3) { transform:rotate(9deg); }
.home-journey>small { color:#b9c5b0; font-size:9px; }
.community-privacy { line-height:1.7; }
@media(min-width:741px) and (max-width:1000px) {
  .header-inner { gap:24px; }
  .main-nav { gap:18px; }
  .main-nav a { font-size:11px; }
  .home-layout { grid-template-columns:minmax(0,1fr) 290px; gap:20px; }
  .home-hero { padding:28px; }
  .home-hero h1 { font-size:46px; }
  .home-hero .desktop-break { display:none; }
  .feed-entry { padding:20px 17px 15px; }
  .feed-beer { padding-left:0; gap:12px; }
  .feed-membership { padding-left:65px; }
  .leaderboard-heading { gap:8px; padding:20px 14px; }
  .leaderboard-heading h2 { font-size:21px; }
  .leaderboard { padding:4px 12px; }
}
@media(max-width:740px) {
  .home-hero { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); padding:26px; gap:12px; }
  .home-hero h1 { font-size:43px; }
  .home-hero .desktop-break { display:none; }
  .home-hero-art>span { font-size:6px; letter-spacing:1px; }
  .home-hero-art strong { display:block; margin:4px 0 0; font-size:14px; }
  .home-layout { grid-template-columns:minmax(0,1fr); gap:25px; }
  .home-sidebar { padding-top:0; }
  .community-stats { font-size:10px; gap:12px 20px; }
  .community-stats>a { margin-left:0; }
  .community-stats .home-books-link { display:none; }
  .leaderboard-heading { padding:20px 15px; gap:8px; }
  .leaderboard { padding:4px 12px; }
  .home-journey { padding:24px 20px; }
}
@media(max-width:540px) {
  .main-nav { gap:14px; }
  .home-page { padding-top:20px; }
  .home-hero { display:block; padding:25px; }
  .home-hero h1 { font-size:42px; }
  .home-hero-art { display:none; }
  .home-hero p:not(.eyebrow) { font-size:11px; }
  .community-stats { display:grid; grid-template-columns:1fr 1fr; padding:18px 0; gap:11px; margin-bottom:16px; font-size:10px; }
  .community-stats>span:nth-child(3) { grid-column:1/-1; }
  .community-stats>a { display:none; }
  .feed-heading h2 { font-size:26px; }
  .community-status { font-size:9px; }
  .feed-entry { padding:20px 16px 16px; }
  .feed-beer { padding-left:0; gap:12px; }
  .feed-beer .beer-image { width:45px; height:54px; }
  .feed-beer-info>.beer-name { font-size:15px; }
  .feed-person { gap:9px; }
  .feed-person time { font-size:8px; }
  .feed-membership { padding-left:57px; }
  .feed-end { font-size:9px; }
  .home-sidebar { display:flex; }
  .leaderboard-heading { padding:22px; gap:12px; }
  .leaderboard { padding:4px 22px; }
  .home-journey { padding:28px; }
}

/* A dedicated community ranking, separate from the Home feed. */
.leaderboard-page { max-width:1060px; }
.rankings-intro { margin:35px 0 26px; }
.rankings-intro h1 { font-size:55px; letter-spacing:-2px; margin:12px 0 16px; }
.rankings-intro h1 em { color:var(--rust); }
.rankings-intro>p:last-child { color:var(--muted); font-size:13px; }
.rankings-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:15px; }
.rankings-toolbar .community-status { margin:0; }
.leaderboard-page .leaderboard-heading { padding:21px 28px; }
.leaderboard-page .leaderboard { padding:0 28px; }
.leaderboard-page .leaderboard-user { gap:20px; padding:22px 0; }
.leaderboard-page .leaderboard-rank { width:30px; font-size:17px; }
.leaderboard-page .leaderboard-rank svg { width:24px; height:28px; }
.leaderboard-page .member-avatar { width:42px; height:42px; font-size:13px; }
.leaderboard-page .leaderboard-person>strong { font-size:15px; }
.leaderboard-page .leaderboard-meter { max-width:400px; height:4px; margin-top:9px; }
.leaderboard-page .leaderboard-count { min-width:60px; }
.leaderboard-page .leaderboard-count strong { font-size:27px; }
.leaderboard-page .leaderboard-count small { font-size:10px; }
.leaderboard-page .leaderboard-note { padding:19px 28px; font-size:10px; }
.rankings-browse { display:inline-flex; margin-top:24px; gap:8px; align-items:center; }
@media(min-width:741px) and (max-width:1100px) {
  .site-header { height:120px; }
  .header-inner { position:relative; align-items:flex-start; padding-top:16px; }
  .main-nav { position:absolute; left:25px; right:25px; bottom:0; height:42px; max-width:620px; justify-content:space-between; gap:18px; }
}
@media(max-width:740px) {
  .main-nav { max-width:none; overflow-x:auto; scrollbar-width:thin; gap:18px; }
  .main-nav a { flex-shrink:0; }
}
@media(max-width:540px) {
  .main-nav { gap:16px; }
  .rankings-intro { margin:25px 0 20px; }
  .rankings-intro h1 { font-size:41px; }
  .rankings-intro>p:last-child { font-size:12px; }
  .leaderboard-page .leaderboard-heading { padding:19px 16px; gap:9px; }
  .leaderboard-page .leaderboard-heading h2 { font-size:20px; }
  .leaderboard-page .leaderboard { padding:0 16px; }
  .leaderboard-page .leaderboard-user { gap:11px; padding:19px 0; }
  .leaderboard-page .leaderboard-rank { width:20px; font-size:13px; }
  .leaderboard-page .leaderboard-rank svg { width:18px; }
  .leaderboard-page .member-avatar { width:33px; height:33px; font-size:10px; }
  .leaderboard-page .leaderboard-person>strong { font-size:12px; }
  .leaderboard-page .leaderboard-count { min-width:38px; }
  .leaderboard-page .leaderboard-count strong { font-size:22px; }
  .leaderboard-page .leaderboard-note { padding:17px; }
}

/* The books and people behind the project. */
.about-page { max-width:1200px; }
.about-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:38px; padding:46px 42px; background:#efd08a; border:1px solid #dfbd71; border-radius:10px; }
.about-hero h1 { font-size:clamp(40px,4.4vw,60px); line-height:1.03; letter-spacing:-2.3px; margin:17px 0 22px; }
.about-hero h1 em { display:block; font-size:.77em; line-height:1.12; color:var(--rust); margin-top:8px; }
.about-hero-copy>p:not(.eyebrow) { max-width:360px; color:#5e4b31; font-size:14px; line-height:1.85; margin-bottom:24px; }
.about-bookshelf { min-width:0; padding-top:25px; }
.about-books { display:flex; align-items:flex-end; justify-content:center; gap:22px; padding:0 8px 24px; border-bottom:2px solid #b99858; }
.about-books>a { display:flex; flex-direction:column; align-items:center; gap:18px; min-width:0; flex:1; max-width:130px; }
.about-books .book { width:100%; box-shadow:5px 7px 0 #af8f4e55; transition:transform .2s; }
.about-books>a:hover .book { transform:translateY(-5px); }
.about-books>a>span { font:700 13px var(--display); letter-spacing:1px; color:#604826; }
.about-bookshelf>p { margin:16px 0 0; font-size:10px; color:#6c542e; text-align:center; }
.about-story { padding:4px 32px 0; }
.about-chapter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:65px; padding:48px 0; }
.about-chapter+.about-chapter { border-top:1px solid var(--line); }
.about-chapter-heading h2 { font-size:30px; line-height:1.2; letter-spacing:-.8px; margin:15px 0 0; }
.about-prose { font-size:14px; line-height:1.9; color:#625646; }
.about-prose p { margin-bottom:17px; }
.about-prose cite { font-style:normal; color:var(--ink); font-weight:600; }
.about-prose p a { color:var(--rust); text-decoration:underline; text-underline-offset:3px; }
.about-prose p a:hover { color:var(--ink); }
.about-prose>.text-link { display:inline-flex; align-items:center; gap:8px; margin-top:2px; }
.about-next { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:65px; padding:40px 32px; background:var(--green-dark); color:var(--white); border-radius:10px; }
.about-next .eyebrow { color:#dfc68f; }
.about-next h2 { font-size:36px; letter-spacing:-1px; line-height:1.13; margin:15px 0 0; }
.about-next h2 em { color:var(--amber); }
.about-next p:not(.eyebrow) { color:#e0e5d9; font-size:14px; line-height:1.85; margin-bottom:17px; }
.about-next .btn { margin-top:6px; }
@media(max-width:900px) {
  .about-hero { padding:32px 27px; gap:26px; }
  .about-books { gap:15px; }
  .about-story { padding:0 12px; }
  .about-chapter,.about-next { gap:30px; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
  .about-chapter-heading h2 { font-size:26px; }
  .about-next { padding:32px 26px; }
}
@media(max-width:740px) {
  .about-hero { grid-template-columns:minmax(0,1fr); gap:8px; }
  .about-hero h1 { font-size:46px; }
  .about-hero-copy>p:not(.eyebrow) { max-width:460px; }
  .about-bookshelf { width:100%; max-width:390px; justify-self:center; padding-top:24px; }
  .about-books { gap:25px; }
  .about-books>a { max-width:104px; }
  .about-chapter,.about-next { grid-template-columns:minmax(0,1fr); gap:22px; }
  .about-chapter { padding:34px 0; }
  .about-chapter-heading h2 { font-size:28px; }
  .about-chapter-heading h2 br { display:none; }
  .about-next h2 { font-size:35px; }
}
@media(max-width:380px) {
  .about-hero { padding:27px 21px; }
  .about-hero h1 { font-size:39px; }
  .about-books { gap:16px; }
  .about-next { padding:28px 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .about-books .book { transition:none; }
}

/* Availability and curated alternatives stay distinct from the original beer. */
.beer-availability { display:flex; align-items:center; flex-wrap:wrap; gap:7px 12px; margin:7px 0; }
.production-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border:1px solid #ded7ca; border-radius:4px; color:#766c5e; background:#f3efe6; font:600 9px/1.5 var(--sans); white-space:nowrap; }
.production-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.production-retired { background:#f8e6dd; color:#8c3f29; border-color:#e8c9b9; }
.production-year-round { background:var(--green-soft); color:var(--green); border-color:#cedac8; }
.production-active { background:var(--green-soft); color:var(--green); border-color:#cedac8; }
.production-seasonal { background:var(--amber-light); color:#805512; border-color:#e6d29d; }
.substitute-link { display:inline-flex; align-items:center; gap:4px; color:var(--rust); font-size:10px; font-weight:600; }
.substitute-link svg { width:12px; height:12px; }
.substitute-link:hover { text-decoration:underline; text-underline-offset:3px; }
.completed-via,.substitute-badge { color:var(--green); }
.check-button.via-substitute { background:var(--green-soft); color:var(--green); border-style:dashed; }
.availability-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px 13px; padding:12px 20px; border-bottom:1px solid var(--line); background:#faf7ef; font-size:10px; }
.availability-tools label { font-weight:600; }
.availability-tools select { max-width:100%; border:1px solid #dcd3c2; border-radius:4px; background:var(--white); padding:7px 26px 7px 9px; font-size:11px; }
.availability-tools>span { color:var(--muted); font-size:9px; }
.detail-heading>.beer-availability { margin:14px 0; }
.detail-heading>.beer-availability .production-badge { font-size:11px; }
.checked-date a { text-decoration:underline; text-underline-offset:3px; }
.production-panel h2 { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.production-panel p,.substitution-panel p { color:var(--muted); font-size:12px; line-height:1.8; }
.production-panel p:last-child { margin-bottom:0; }
.curation-source { font-size:10px!important; line-height:1.9!important; }
.curation-source a { color:var(--rust); text-decoration:underline; text-underline-offset:3px; }
.curation-source svg { width:11px; height:11px; }
.detail-main .substitution-panel { background:#f3f4e9; border-color:#cbd5bc; }
.substitution-panel>.eyebrow { color:var(--green); font-size:9px; }
.substitution-panel>h2 { font-size:25px; }
.substitution-intro { margin-bottom:22px; }
.substitution-card { border-top:1px solid #d6ddca; padding-top:22px; margin-top:22px; }
.substitution-beer { display:flex; align-items:center; gap:17px; margin-bottom:17px; }
.substitution-beer>div { min-width:0; }
.substitution-card h3 { font-size:21px; line-height:1.3; margin:0 0 8px; }
.substitution-card h3 a:hover { color:var(--rust); text-decoration:underline; }
.substitution-beer p { margin-bottom:8px; font-size:11px; }
.substitution-scope { font-size:10px!important; }
.substitution-scope a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.substitution-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:20px; }
.substitution-actions>.text-link { font-size:11px; }
.substitution-panel .substitution-confirmation { margin:14px 0 0; color:var(--green); font-size:11px; font-weight:600; }
.feed-substitution { margin-left:10px; color:var(--green); font-size:10px; }
.feed-substitution a { text-decoration:underline; text-underline-offset:3px; }
body.choosing-beer { overflow:hidden; }
.beer-choice { width:min(620px,calc(100% - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:28px; border:1px solid #cbbd9f; border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:0 24px 90px #1b140d55; overscroll-behavior:contain; }
.beer-choice::backdrop { background:#211b15b8; backdrop-filter:blur(3px); }
.beer-choice-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.beer-choice-heading h2 { margin:0 0 12px; font-size:29px; letter-spacing:-.7px; }
#beer-choice-title:focus { outline:none; }
.beer-choice-close { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; margin:-8px -8px 0 0; border-radius:50%; font-size:27px; line-height:1; color:var(--muted); }
.beer-choice-close:hover { background:var(--amber-light); color:var(--ink); }
#beer-choice-description { font-size:13px; color:var(--muted); margin:0 0 20px; }
.beer-choice-options { display:grid; gap:12px; }
.beer-tick-choice { display:grid; grid-template-columns:54px minmax(0,1fr); gap:8px 16px; width:100%; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--white); text-align:left; }
.beer-tick-choice:not(:disabled):hover { background:#fff8e7; border-color:var(--gold); }
.beer-tick-choice.substitute-choice { border-color:#c3d0ba; }
.beer-tick-choice:disabled { opacity:1; background:var(--green-soft); }
.beer-tick-choice>.beer-image { grid-row:1 / 3; width:54px; height:68px; align-self:center; }
.beer-tick-info { display:block; min-width:0; }
.beer-tick-kind { display:block; margin-bottom:5px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--rust); }
.substitute-choice .beer-tick-kind { color:var(--green); }
.beer-tick-info>strong { display:block; font:700 19px/1.25 var(--display); overflow-wrap:anywhere; }
.beer-tick-brewery,.beer-tick-style,.beer-tick-scope { display:block; margin-top:4px; font-size:11px; color:var(--muted); }
.beer-tick-info .production-badge { margin-top:8px; }
.beer-tick-scope { font-size:10px; }
.beer-tick-action { grid-column:2; display:flex; align-items:center; gap:6px; margin-top:3px; color:var(--green); font-size:11px; font-weight:700; }
.beer-tick-action svg { width:15px; height:15px; }
.beer-choice-footer { display:flex; align-items:center; gap:20px; margin-top:20px; }
.beer-choice-footer p { margin:0; font-size:11px; color:var(--muted); }
@media(max-width:540px) {
  .beer-choice { padding:21px 16px; }
  .beer-choice-heading h2 { font-size:25px; }
  .beer-tick-choice { padding:14px 12px; grid-template-columns:42px minmax(0,1fr); gap:7px 12px; }
  .beer-tick-choice>.beer-image { width:42px; height:56px; }
  .beer-tick-info>strong { font-size:18px; }
  .availability-tools { gap:8px; padding:12px 15px; }
  .availability-tools>span { width:100%; }
  .beer-availability { gap:5px 9px; }
  .substitute-link { font-size:9px; }
  .substitution-beer { align-items:flex-start; gap:12px; }
  .substitution-card h3 { font-size:19px; }
  .substitution-actions { align-items:flex-start; flex-direction:column; }
  .feed-substitution { display:block; margin:6px 0 0; }
}