/* Top 100 Beers theme */
:root {
	--bg: #fff8ec;
	--card: #ffffff;
	--ink: #2a1a10;
	--muted: #6f5a4a;
	--line: #ecdcc4;
	--amber: #e0921e;
	--amber-d: #b86f0a;
	--foam: #fff0d4;
	--brown: #2b170a;
	--brown-2: #4a2812;
	--tint: #fbeed6;
	--head: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
	--body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wrap: 1200px;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #1a110b; --card: #24180f; --ink: #f7ead6; --muted: #c2ab92; --line: #3e2c1d; --foam: #33230f; --tint: #20160d; --amber-d: #f2b44c;
	}
}
:root[data-theme="dark"] { --bg: #1a110b; --card: #24180f; --ink: #f7ead6; --muted: #c2ab92; --line: #3e2c1d; --foam: #33230f; --tint: #20160d; --amber-d: #f2b44c; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--amber-d); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 .6em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 780px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--amber); color: #2a1606; padding: .5rem 1rem; border-radius: 8px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-d); text-decoration: none; margin-bottom: .4rem; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow--light { color: #ffc766; }

/* Top bar & header */
.topbar { background: var(--brown); color: #f8e3c3; font-size: .85rem; }
.topbar__inner { display: flex; justify-content: space-between; gap: 1rem; padding-top: .45rem; padding-bottom: .45rem; }
.topbar a { color: #ffc766; text-decoration: none; margin-left: 1rem; font-weight: 600; }
@media (max-width: 720px) { .topbar__inner > span:first-child { display: none; } .topbar__links a:first-child { margin-left: 0; } }
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 20px rgba(60, 30, 5, .06); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); flex: none; }
.logo__mark { width: 46px; height: 46px; transition: transform .4s; }
.logo:hover .logo__mark { transform: rotate(40deg); }
.logo__text { font-family: var(--head); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.logo__text strong { color: var(--amber); font-weight: 800; }
.logo--light { color: #fff5e6; }
.logo__img { max-height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.nav__list, .nav__pages ul { list-style: none; display: flex; gap: .1rem; margin: 0; padding: 0; }
.nav__list a, .nav__pages a { display: block; padding: .5rem .6rem; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .94rem; white-space: nowrap; }
.nav__list a:hover, .nav__list .current-menu-item > a, .nav__list .current_page_item > a { background: var(--foam); color: var(--amber-d); }
.nav__search input { width: 150px; padding: .5rem .8rem; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .9rem; transition: width .2s; }
.nav__search input:focus { width: 200px; outline: none; border-color: var(--amber); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: var(--foam); border-radius: 12px; cursor: pointer; position: relative; }
.nav-toggle span:first-child, .nav-toggle span:first-child::before, .nav-toggle span:first-child::after { content: ''; position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s; }
.nav-toggle span:first-child { top: 21px; }
.nav-toggle span:first-child::before { left: 0; right: 0; top: -7px; }
.nav-toggle span:first-child::after { left: 0; right: 0; top: 7px; }
@media (max-width: 1100px) {
	.nav-toggle { display: block; }
	.nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 1rem 20px 1.5rem; box-shadow: 0 20px 40px rgba(0, 0, 0, .1); }
	.nav.is-open { display: flex; }
	.nav__list { flex-direction: column; }
	.nav__list a { padding: .75rem .6rem; font-size: 1.05rem; }
	.nav__search input, .nav__search input:focus { width: 100%; }
}

/* Hero */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 80% 0%, #7a4414 0%, transparent 60%), linear-gradient(160deg, var(--brown) 0%, #3e210c 60%, #5b3010 100%); color: #fff2dc; padding: 4.5rem 0 0; }
.hero__inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; padding-bottom: 3rem; }
.hero h1 { color: #fff; }
.hero h1 span { color: #ffc766; }
.hero__lede { font-size: 1.15rem; max-width: 36rem; color: #f3dcbd; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0; }
.t100-btn--light { background: rgba(255, 255, 255, .12); color: #fff5e6; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.t100-btn--light:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.hero__search { display: flex; gap: .5rem; max-width: 30rem; }
.hero__search input { flex: 1; font: inherit; padding: .8rem 1.1rem; border-radius: 999px; border: 0; background: #fff8ec; color: #2a1a10; }
.hero__champ { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; background: rgba(255, 248, 236, .08); border: 1px solid rgba(255, 210, 122, .35); border-radius: 28px; padding: 2rem 1.5rem 1.6rem; color: #fff5e6; text-decoration: none; transition: transform .25s, background .25s; }
.hero__champ:hover { transform: translateY(-4px) rotate(-.5deg); background: rgba(255, 248, 236, .13); }
.hero__crown { position: absolute; top: -14px; background: var(--amber); color: #2a1606; font-weight: 800; padding: .3rem .9rem; border-radius: 999px; font-size: .85rem; }
.hero__glass { width: 150px; height: 210px; color: #fff; animation: float 5s ease-in-out infinite; }
.hero__glass img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.hero__champ strong { font-family: var(--head); font-size: 1.8rem; }
.hero__champ span:not(.hero__crown):not(.hero__glass):not(.t100-score) { color: #f3dcbd; font-size: .95rem; }
.hero__champ .t100-score { font-size: 1.2rem; height: 2.6rem; min-width: 4rem; margin-top: .4rem; }
.hero__shelf { display: flex; justify-content: center; gap: clamp(.3rem, 2vw, 1.4rem); padding: 0 20px; opacity: .9; }
.hero__shelf-glass { width: 52px; height: 74px; color: #fff; flex: none; transform: translateY(14px); transition: transform .3s; }
.hero__shelf-glass:nth-child(odd) { transform: translateY(20px); }
.hero:hover .hero__shelf-glass { transform: translateY(6px); }
@keyframes float { 50% { transform: translateY(-10px) rotate(2deg); } }
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero { padding-top: 3rem; } .hero__shelf-glass:nth-child(n+8) { display: none; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: -1px; padding-top: 2rem; padding-bottom: 1rem; text-align: center; }
.stats strong { display: block; font-family: var(--head); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--amber-d); line-height: 1; }
.stats span { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } .stats div:nth-child(n+4) { display: none; } }

/* Sections */
.section { padding: 3.5rem 20px; }
.wrap.section { padding-left: 20px; padding-right: 20px; }
.section--tint { background: var(--tint); }
.section--dark { background: var(--brown); color: #f8e3c3; }
.section--dark h2 { color: #fff; }
.section--dark .eyebrow { color: #ffc766; }
.section--dark .section__more { color: #ffc766; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section__head h2 { margin: 0; }
.section__more { font-weight: 700; text-decoration: none; white-space: nowrap; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.split__stack .t100-tool { margin-bottom: 1rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.4rem; }

/* Game tiles */
.game-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.game-tile { display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 210, 122, .2); color: #f8e3c3; text-decoration: none; transition: transform .2s, background .2s; }
.game-tile:hover { transform: translateY(-4px) rotate(-1deg); background: rgba(255, 255, 255, .11); }
.game-tile__icon { font-size: 2.4rem; }
.game-tile strong { font-family: var(--head); font-size: 1.25rem; color: #fff; }
.game-tile span:last-child { font-size: .9rem; color: #d9bf9c; }

/* Pairing tiles */
.pair-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 1rem; }
.pair-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.3rem 1rem; }
.pair-tile__food { position: absolute; top: .8rem; left: .9rem; font-size: 2rem; }
.pair-tile__glass { width: 56px; height: 80px; }
.pair-tile span:last-child { font-size: .88rem; color: var(--muted); }

/* Promo */
.promo__big { font-family: var(--head); font-size: 2.2rem; margin: 0; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(90, 50, 10, .1); }
.card__media { display: block; aspect-ratio: 16/10; background: var(--foam); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__art { height: 100%; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at 50% 120%, #ffd27a55, transparent 60%), var(--foam); font-size: 4rem; }
.card__art .t100-glass { height: 100%; width: auto; }
.card__body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.card__title { font-size: 1.2rem; margin: 0; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--amber-d); }
.card__excerpt { color: var(--muted); margin: .3rem 0; font-size: .95rem; }
.card__meta { margin-top: auto; font-size: .82rem; color: var(--muted); }

/* Page heads */
.page-head { background: linear-gradient(160deg, var(--brown) 0%, #4a2812 100%); color: #f3dcbd; padding: 3.2rem 0 2.6rem; }
.page-head h1 { color: #fff; margin-bottom: .4rem; }
.page-head p { max-width: 44rem; font-size: 1.1rem; margin: 0; }
.page-head__meta { font-size: .95rem !important; color: #d9bf9c; margin-top: .6rem !important; }
.page-head--article h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.chip-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; }
.chip-nav a { background: rgba(255, 255, 255, .1); color: #fff5e6; padding: .35rem .9rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; }
.chip-nav a:hover { background: var(--amber); color: #2a1606; }

/* Entry content */
.entry-content { font-size: 1.07rem; }
.entry-content > * { max-width: 760px; }
.entry-content--wide > * { max-width: none; }
.entry-content--wide > p, .entry-content--wide > ul, .entry-content--wide > ol { max-width: 760px; }
.entry-content h2 { margin-top: 2rem; }
.entry-content li { margin: .3rem 0; }
.entry-content blockquote { border-left: 5px solid var(--amber); margin: 1.5rem 0; padding: .5rem 1.2rem; background: var(--foam); border-radius: 0 12px 12px 0; }
.single__img { border-radius: 18px; margin-bottom: 1.5rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 0 0 1.5rem; }
.facts div { background: var(--foam); border-radius: 12px; padding: .7rem 1rem; }
.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0; font-weight: 700; }
.post-nav a { text-decoration: none; }

/* Beer page */
.beer-hero { position: relative; background: radial-gradient(700px 400px at 20% 50%, color-mix(in srgb, var(--beer) 55%, transparent), transparent 70%), linear-gradient(160deg, var(--brown), #3e210c); color: #f3dcbd; padding: 3rem 0; overflow: hidden; }
.beer-hero__inner { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: center; }
.beer-hero__img { height: 380px; display: grid; place-items: center; color: #fff; }
.beer-hero__img .t100-glass { height: 100%; width: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); animation: float 6s ease-in-out infinite; }
.beer-hero__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.beer-hero__rank { display: inline-flex; align-items: baseline; gap: .3rem; background: var(--amber); color: #2a1606; font-family: var(--head); font-weight: 800; font-size: 1.6rem; padding: .1rem .9rem; border-radius: 12px; }
.beer-hero__rank small { font-size: .85rem; font-weight: 700; }
.beer-hero h1 { color: #fff; margin: .6rem 0 .2rem; }
.beer-hero__brewery { font-size: 1.1rem; margin: 0; }
.beer-hero__brewery a { color: #ffc766; }
.beer-hero__tagline { font-size: 1.2rem; font-style: italic; color: #fff5e6; margin: .8rem 0 0; }
.beer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1.5rem 0; }
.beer-stats div { background: rgba(255, 248, 236, .08); border: 1px solid rgba(255, 210, 122, .22); border-radius: 14px; padding: .6rem .9rem; }
.beer-stats dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: #d9bf9c; }
.beer-stats dd { margin: .15rem 0 0; font-weight: 700; color: #fff; }
.beer-stats dd a { color: #ffc766; }
.beer-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.beer-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 2rem; }
.beer-block { margin: 2rem 0; }
.meters { display: grid; gap: .6rem; }
.meter { display: grid; grid-template-columns: 7.5rem 1fr 3.4rem; align-items: center; gap: .8rem; font-weight: 600; }
.meter div { height: 12px; background: var(--foam); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #f6c14f, var(--amber)); border-radius: 999px; }
.meter b { text-align: right; font-variant-numeric: tabular-nums; }
.beer-side { display: flex; flex-direction: column; gap: 1rem; }
.side-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem; }
.side-box h3 { font-size: 1.1rem; }
.side-box--game { background: var(--brown); color: #f3dcbd; border: 0; }
.side-box--game h3 { color: #fff; }
.side-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.side-list a { display: grid; grid-template-columns: 2.4rem 1fr; gap: .7rem; align-items: center; text-decoration: none; color: var(--ink); }
.side-list__img { width: 2.4rem; height: 3.3rem; display: block; }
.side-list__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.side-list small { display: block; color: var(--muted); }
.beer-nav { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 3rem; font-weight: 700; }
.beer-nav a { text-decoration: none; }
@media (max-width: 900px) {
	.beer-hero__inner { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
	.beer-hero__img { height: 240px; }
	.beer-hero__actions { justify-content: center; }
	.beer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
	.beer-body { grid-template-columns: 1fr; }
	.beer-nav { flex-direction: column; text-align: center; }
}

/* Comments */
.comments { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.comments h2 small { font-size: 1rem; color: var(--muted); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: .8rem; }
.comment-list .children { list-style: none; padding-left: 1.5rem; margin-top: .8rem; }
.comment-author img { border-radius: 50%; vertical-align: middle; margin-right: .5rem; }
.comment-metadata { font-size: .8rem; }
.comment-form label { display: block; font-weight: 600; font-size: .9rem; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea, .search-form input[type=search] { width: 100%; font: inherit; padding: .7rem .9rem; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.search-form { display: flex; gap: .5rem; max-width: 520px; margin-bottom: 1.5rem; }
.search-form label { flex: 1; }
.search-form input[type=submit] { font: inherit; font-weight: 700; background: var(--amber); border: 0; border-radius: 999px; padding: 0 1.2rem; cursor: pointer; }

/* Pagination */
.pagination .nav-links { display: flex; gap: .4rem; margin-top: 2rem; flex-wrap: wrap; }
.pagination .page-numbers { padding: .5rem .9rem; border-radius: 10px; background: var(--card); border: 1px solid var(--line); text-decoration: none; font-weight: 700; }
.pagination .current { background: var(--amber); color: #2a1606; border-color: var(--amber); }

/* Widgets */
.widget { margin-bottom: 1.5rem; }

/* Footer */
.site-footer { background: #1c0f06; color: #d9bf9c; padding: 3rem 0 2rem; margin-top: 0; }
.site-footer__cta { margin-bottom: 3rem; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; }
.site-footer .nav__list { flex-direction: column; }
.site-footer .nav__list a { color: #d9bf9c; padding: .2rem 0; font-weight: 500; }
.site-footer .nav__list a:hover { background: none; color: #ffc766; }
.social a { color: #ffc766; margin-right: 1rem; font-weight: 700; text-decoration: none; }
.site-footer__legal { border-top: 1px solid #3a2414; margin-top: 2rem; padding-top: 1.5rem; font-size: .85rem; }
.site-footer__legal p { margin: .4rem 0; }
@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }

/* Dark-mode touch-ups for plugin components */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .t100-choice.is-right { background: #1e3b26; }
	:root:not([data-theme="light"]) .t100-choice.is-wrong { background: #4a1e19; }
	:root:not([data-theme="light"]) .t100-score--great { background: #6b4412; color: #fff; }
	:root:not([data-theme="light"]) .t100-chip--micro { background: #1e3b26; }
	:root:not([data-theme="light"]) .t100-chip--trappist { background: #3a2a55; }
}