/*
Theme Name: Espresso Grinder
Template: aff-base
Description: Cafe-bar look for espresso-grinder.com: dark-roast brown, crema amber, steamed-milk cream and brushed steel, with burr and grind-particle motifs.
Version: 1.0.0
*/

:root {
	--bg: #f7f1e8;
	--surface: #fffcf7;
	--surface-2: #f0e5d5;
	--ink: #24160e;
	--ink-2: #4d3a2c;
	--muted: #7f6b5a;
	--line: #e6d8c4;
	--accent: #7a4320;
	--accent-ink: #fffaf2;
	--accent-soft: #f4e4cd;
	--accent-2: #c7812f;
	--accent-2-ink: #24160e;
	--good: #3f7a3a;
	--bad: #b0412b;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 1px 2px rgba(42, 24, 15, .05), 0 10px 26px rgba(42, 24, 15, .08);
	--font-display: "Bodoni Moda", "Didot", Georgia, serif;
	--font-body: "Figtree", system-ui, -apple-system, sans-serif;
	--display-weight: 700;
	--display-tracking: -0.01em;
	--roast: #22140c;
	--crema: #d08f3f;
	--steel: linear-gradient(90deg, #8c9398, #eef1f2 22%, #a3aaae 50%, #e3e7e9 76%, #858c91);
}

/* ---------- Header: dark-roast bar with a brushed-steel rail ---------- */
.site-header { background: var(--roast); border-bottom: 0; backdrop-filter: none; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--steel); }
.brand { color: #fbf1e3; }
.brand__name { font-size: 22px; font-weight: 600; letter-spacing: 0; }
.nav__list a { color: #e7d7c3; font-weight: 500; }
.nav__list a:hover, .nav__list .current-menu-item a { background: rgba(208, 143, 63, .16); color: #fff6ea; }
.nav-toggle { background: #33201a; border-color: #4a3226; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { background: #fbf1e3; }
@media (max-width: 1120px) {
	.nav { background: var(--roast); border-bottom-color: #4a3226; }
	.nav__list a { color: #f1e4d2; }
}

/* ---------- Hero: steamed-milk cream with a scatter of grind particles ---------- */
.hero { border-bottom: 0; padding-top: 72px; background:
	radial-gradient(circle at 3px 3px, rgba(107, 63, 34, .16) 1.6px, transparent 2.2px) 0 0 / 46px 46px,
	radial-gradient(circle at 1px 1px, rgba(199, 129, 47, .22) .9px, transparent 1.4px) 11px 17px / 19px 19px,
	radial-gradient(760px 420px at 82% 30%, #f2dcbd, transparent 70%),
	linear-gradient(180deg, #fbf6ef, var(--bg)); }
.hero__title { font-size: clamp(38px, 5.4vw, 66px); font-weight: 700; line-height: 1.06; }
.hero .kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); }
.hero .kicker::before { content: ""; width: 28px; height: 2px; background: var(--crema); }
.btn--primary { background: var(--accent); box-shadow: 0 6px 16px rgba(122, 67, 32, .25); }
.btn--ghost { border-color: var(--accent); color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: var(--accent-ink); }
.section__head h2 { font-weight: 600; }

/* ---------- Silo tiles: portafilter-basket icon plates ---------- */
.silo { position: relative; overflow: hidden; padding: 24px 22px 26px; border-radius: var(--radius); }
.silo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #8a4c1c, var(--crema), #eab56c); transform: scaleX(.18); transform-origin: left; transition: transform .2s; }
.silo:hover::after { transform: scaleX(1); }
.silo__icon { width: 60px; height: 60px; padding: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #3c2316, var(--roast) 70%); color: #f6e3c8; box-shadow: 0 0 0 3px #d9dde0, 0 0 0 4.5px #9aa1a6; margin: 4px 0 10px 4px; }
.silo__name { font-weight: 600; }
.silo-head { background:
	radial-gradient(circle at 3px 3px, rgba(107, 63, 34, .14) 1.6px, transparent 2.2px) 0 0 / 46px 46px,
	radial-gradient(900px 300px at 90% -20%, var(--accent-soft), transparent 70%); }
.silo-head__icon { color: var(--accent); }

/* ---------- Cards ---------- */
.card__icon { color: var(--accent-2); }
.card--lg .card__link { background: linear-gradient(160deg, #f6e6cf, var(--surface) 62%); }
.card__title { font-weight: 600; }

/* ---------- Teaser: an espresso-dark panel ---------- */
.teaser__inner { background:
	radial-gradient(circle at 3px 3px, rgba(208, 143, 63, .14) 1.4px, transparent 2px) 0 0 / 34px 34px,
	radial-gradient(600px 300px at 10% 0%, #4a2c1c, transparent 70%),
	var(--roast); color: #e9dccb; }
.teaser__copy h2 { color: #fffaf2; }
.teaser .kicker { color: #e6ab62; }
.teaser .btn--primary { background: var(--crema); color: var(--roast); box-shadow: none; }

/* ---------- Promise ---------- */
.promise__item { border-top: 0; box-shadow: inset 0 3px 0 var(--crema); border-radius: var(--radius); }
.promise__item h3 { font-weight: 600; }

/* ---------- Quick picks: coffee-bean bullets ---------- */
.quick-picks { border-color: var(--line); }
.quick-picks li { position: relative; padding-left: 52px; }
.quick-picks li::before { content: ""; position: absolute; left: 18px; top: 16px; width: 18px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cellipse cx='9' cy='11' rx='7.5' ry='10' fill='%235a3420' transform='rotate(18 9 11)'/%3E%3Cpath d='M10.6 1.6c-3.4 3.4-1.2 6.4-1.6 9.4s-3 5.6-1 9.4' fill='none' stroke='%23e6ab62' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.quick-picks li:nth-child(even)::before { filter: hue-rotate(-8deg) brightness(1.18); }

/* ---------- Product box: a crema layer on top ---------- */
.aff-product { border: 0; box-shadow: 0 0 0 1.5px var(--line), var(--shadow); position: relative; overflow: hidden; padding-top: 24px; }
.aff-product::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #8a4c1c, var(--crema) 45%, #eab56c 70%, var(--crema)); }
.aff-product__icon { background: var(--roast); color: #f6e3c8; }
.aff-product__icon--art { background: var(--surface-2); color: var(--ink); }
.aff-product__badge { background: var(--roast); color: #f6e3c8; }
.aff-cta { border-left-color: var(--crema); }

/* ---------- Prose details ---------- */
.prose h2 { font-weight: 600; }
.prose blockquote { border-left-color: var(--crema); }
.prose th { background: #efe2cf; }

/* ---------- Footer: espresso with a steel rail ---------- */
.site-footer { background: #1a0f09; color: #cdbba6; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--steel); opacity: .85; }
.site-footer .brand { color: #fbf1e3; }
.site-footer a:hover { color: #fbf1e3; }

/* ---------- Tool: grind size chart ---------- */
.agt-gs__pick { max-width: 360px; margin-bottom: 14px; }
.agt-gs__result p { margin: 0 0 8px; }
.agt-gs__result p:last-child { margin: 0; }
.agt-gs__headline strong { display: inline; margin-right: 8px; }
.agt-gs__headline span { font-size: 15px; font-weight: 600; color: var(--accent); }
.agt-gs__particles svg { display: block; width: 100%; max-width: 330px; height: auto; margin: 4px 0 8px; font-family: var(--font-body); }
.agt-gs__tip { font-size: 15px; color: var(--ink-2); }
.agt-gs__more a { font-weight: 600; }
.agt-gs__chart { margin-top: 18px; }
.agt-gs__ends { display: flex; justify-content: space-between; margin: 0 112px 6px 192px; font: 700 11.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.agt-gs__ends span:first-child::before { content: "← "; }
.agt-gs__ends span:last-child::after { content: " →"; }
.agt-gs__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 92px; gap: 12px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 500 14.5px/1.3 var(--font-body); text-align: left; cursor: pointer; }
.agt-gs__row:hover { background: var(--surface-2); }
.agt-gs__row.is-active { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-2); font-weight: 700; }
.agt-gs__track { position: relative; height: 12px; border-radius: 6px; background: #efe2cf; }
.agt-gs__bar { position: absolute; top: 0; bottom: 0; min-width: 6px; border-radius: 6px; background: #6b3f22; }
.agt-gs__row.is-active .agt-gs__bar { background: linear-gradient(90deg, #a86424, var(--accent-2), #e6ab62); }
.agt-gs__range { font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.agt-gs__axis { display: grid; grid-template-columns: 170px minmax(0, 1fr) 92px; gap: 12px; padding: 4px 10px 0; }
.agt-gs__ticks { position: relative; height: 18px; border-top: 1px solid var(--line); }
.agt-gs__ticks span { position: absolute; top: 3px; transform: translateX(-50%); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.agt-gs__ticks span:first-child { transform: none; }
.agt-gs__ticks span:last-child { transform: translateX(-100%); }
.agt-gs__note, .agt-gs__source, .agt-dial__note, .agt-dial__source { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; }
.agt-gs__source, .agt-dial__source { font-style: italic; }

/* ---------- Tool: espresso dial-in ---------- */
.agt-dial__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.agt-dial__stats span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); }
.agt-dial__stats small { font: 700 11px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.agt-dial__list li { position: relative; padding: 3px 0 3px 18px; font-size: 15.5px; }
.agt-dial__list li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
.agt-dial__next { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(42, 24, 15, .12); }
.agt-dial__warn { margin: 8px 0 0; color: var(--bad); font-size: 14.5px; }
.agt-dial__gauge { margin-top: 14px; }
.agt-dial__gauge svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }

@media (max-width: 600px) {
	.agt-gs__ends { margin: 0 10px 6px; }
	.agt-gs__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
	.agt-gs__track { grid-column: 1 / -1; order: 3; }
	.agt-gs__axis { grid-template-columns: minmax(0, 1fr); }
	.agt-gs__axis-pad { display: none; }
	.agt-gs__ticks span:nth-child(even) { display: none; }
	.agt-dial__stats { grid-template-columns: 1fr 1fr; }
	.agt-dial__stats span:last-child { grid-column: 1 / -1; }
	.silo__icon { width: 54px; height: 54px; padding: 10px; }
}