/*
 * The Nova Cafe - homepage slots: front (lead + The Grind), Origin Notes (latte band, portraits),
 * Market Desk (ruled text), The Coffee Bar (tools), Roast Room (espresso band), Gear Bench (spec
 * cards), Around the Cup (three columns), Editors' Picks, Latest + sidebar.
 */

.home-front,
.home-desk,
.home-gear,
.home-around,
.home-picks,
.home-latest { padding-block: 40px; }

/* Front ---------------------------------------------------------------------- */
.home-front { padding-top: 28px; }
.home-front__grid { display: grid; gap: 28px; }
@media (min-width: 1024px) {
	.home-front__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; }
	.home-front__grind { border-left: 1px solid var(--line-strong); padding-left: 32px; }
}
.card--lead .card__media { border-radius: var(--radius-lg); }
.card--lead .card__body { padding-top: 18px; }
.card--lead .card__badge { background: var(--yellow); color: var(--espresso); padding: 3px 10px; border-radius: 3px; }
.card--lead .card__title { font-size: clamp(1.9rem, 4.4vw, 3.25rem); line-height: 1.05; font-weight: 700; letter-spacing: -.015em; max-width: 22ch; }
.card--lead .card__excerpt { font-size: 1.125rem; max-width: 62ch; color: var(--ink); }

.grind__title {
	display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 3px solid var(--espresso);
	font-family: var(--font-head); font-weight: 750; font-size: 1.5rem; color: var(--espresso);
}
.grind__title .icon { color: var(--coffee); }
.grind__list { margin: 0; padding: 0; list-style: none; }
.grind__list > li { padding: 14px 0; border-bottom: 1px dotted var(--line-strong); }
.grind__list .card--ledger { border-top: 0; padding-top: 0; }
.card--grind-first { grid-template-columns: 112px 1fr; }
.card--grind-first .card__title { font-size: 1.125rem; }
@media (min-width: 1024px) { .card--grind-first { grid-template-columns: 120px 1fr; } }
.grind__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 650; text-decoration: none; }
.grind__more:hover { text-decoration: underline; }

/* Bands -------------------------------------------------------------------------- */
.home-band { padding-block: 44px; background: var(--latte); border-block: 1px solid var(--line); }
.origins__row {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: 18px;
	overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; overscroll-behavior-x: contain;
}
.origins__row > * { scroll-snap-align: start; }
@media (min-width: 600px) { .origins__row { grid-auto-columns: minmax(240px, 45%); } }
@media (min-width: 1024px) { .origins__row { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }

/* Market desk -------------------------------------------------------------------- */
.desk__grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .desk__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; } }
.card--desk-lead { grid-template-columns: 1fr !important; gap: 14px !important; background: var(--white); padding: 18px; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.card--desk-lead .card__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important; }
.card--desk-lead .card__excerpt { font-size: 1rem; }
.desk__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0 32px; }
@media (min-width: 768px) { .desk__list { grid-template-columns: 1fr 1fr; } }
.desk__list > li { padding-bottom: 16px; }
.desk__list .card--ledger { border-top: 2px solid var(--espresso); }

/* Coffee bar ------------------------------------------------------------------------ */
.home-bar { padding-block: 44px; background: var(--foam); border-block: 1px solid var(--line); }
.bar__grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .bar__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .bar__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bar__grid--no-poll { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bar__tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; border-top: 6px solid var(--espresso); min-width: 0; }
.bar__tile--brew { border-top-color: var(--yellow); }
.bar__tile-title { font-size: 1.1875rem; margin: 0 0 14px; }

/* Roast room --------------------------------------------------------------------------- */
.home-roast { padding-block: 48px; background: var(--espresso); color: var(--cream); --social-bg: var(--espresso); }
.home-roast .sec-head { border-bottom-color: rgba(255, 248, 236, .5); }
.home-roast .sec-head__kicker { color: var(--yellow); }
.home-roast .sec-head__more,
.home-roast .card__excerpt,
.home-roast .meta { color: rgba(255, 248, 236, .86); }
.home-roast .card__media { background: #2a1912; }
.home-roast .card--ledger { border-top-color: rgba(255, 248, 236, .25); }
.home-roast .card__num { color: var(--yellow); }
.home-roast .card__link:hover { text-decoration-color: var(--yellow); }
.roast__grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .roast__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 44px; align-items: start; } }
.card--roast-lead .card__title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.roast__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.roast__list .card__title { font-size: 1.25rem; }
.roast__list .card__body { padding-left: 46px; }
.roast__list .card__num { position: absolute; left: 0; top: 0; float: none; margin: 0; font-size: 2.25rem; }

/* Gear bench ----------------------------------------------------------------------------- */
.gear__grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .gear__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; } }
.gear__intro .sec-head { grid-template-columns: 1fr; }
.gear__lede { color: var(--ink-soft); font-size: 1rem; }
.gear__cards { display: grid; gap: 18px; }
@media (min-width: 600px) { .gear__cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.card--spec { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow); }
.card--spec .card__media { border-radius: 10px; }
.card--spec .card__body { padding: 14px 4px 4px; }

/* Around the cup ---------------------------------------------------------------------------- */
.around__cols { display: grid; gap: 28px; }
@media (min-width: 900px) {
	.around__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.around__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.around__col + .around__col { border-left: 1px solid var(--line-strong); padding-left: 28px; }
}
.around__title { margin: 0 0 14px; font-size: 1.375rem; display: flex; align-items: center; gap: 10px; }
.around__title::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--espresso); }
.around__title a { text-decoration: none; }
.around__title a:hover { text-decoration: underline; }
.around__col .card--stack .card__title { font-size: 1.25rem; }
.around__col .card--ledger { margin-top: 14px; }

/* Editors' picks ------------------------------------------------------------------------------ */
.home-picks .container { border-top: 6px solid var(--yellow); padding-top: 28px; }
.picks__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
@media (min-width: 700px) { .picks__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .picks__list { grid-template-columns: repeat(4, 1fr); } }
.picks__list .card--ledger { border-top: 0; padding-top: 0; }
.picks__list .card__num { float: none; display: inline-block; margin: 0 0 8px; font-size: 2.75rem; color: var(--coffee); box-shadow: inset 0 -.18em 0 var(--yellow); }

/* Latest --------------------------------------------------------------------------------------- */
.latest__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .latest__grid.has-side { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; } }
.latest__side { min-width: 0; }