/* Ember & Oak — warm, editorial coffee roaster look. */
:root {
  --heading-weight: 500;
  --heading-tracking: -0.02em;
  --radius: 14px;
}
.header__logo-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-contrast); font-family: var(--font-body); font-size: .7rem; letter-spacing: .04em; }
.hero__heading { font-style: italic; }
.section__title em, .hero__heading em { color: var(--color-accent); }
.card__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 500; }
.testimonial blockquote { font-family: var(--font-heading); font-size: 1.15rem; font-style: italic; }

/* Roast meter */
.roast__meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; max-width: 16rem; }
.roast__pip { height: .55rem; border-radius: 999px; background: var(--color-surface); }
.roast__pip.is-filled { background: linear-gradient(90deg, #c98b4f, var(--color-accent)); }
.roast__pip.is-filled:nth-child(4), .roast__pip.is-filled:nth-child(5) { background: #5a3522; }
.roast__labels { display: flex; justify-content: space-between; max-width: 16rem; font-size: .72rem; color: var(--muted); margin-top: .3rem; }

/* Subscribe & save */
.purchase { display: grid; gap: .6rem; }
.purchase__option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .25rem .75rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background .2s; }
.purchase__option:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg)); }
.purchase__option input { accent-color: var(--color-accent); width: 1.1rem; height: 1.1rem; margin: 0; }
.purchase__label { font-weight: 600; }
.purchase__price { font-weight: 600; }
.purchase__option--sub .purchase__price { color: var(--color-accent); }
.purchase__details { grid-column: 2 / -1; display: none; gap: .4rem; }
.is-subscribing .purchase__details { display: grid; }
.purchase__details small { color: var(--muted); }

/* Brew guide */
.brew__grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .brew__grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.brew .rte { opacity: .8; }
.calc { display: block; margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius); background: color-mix(in srgb, var(--color-bg) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-bg) 15%, transparent); }
.calc__title { font-family: var(--font-body); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.calc__row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.calc__row input { accent-color: var(--color-accent); }
.calc__row output { font-weight: 700; min-width: 3ch; }
.calc__result { margin: 1rem 0 0; font-size: 1.1rem; }
.calc__result strong { color: #f2c58a; }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.tab { padding: .6rem 1.2rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-bg) 30%, transparent); background: none; color: inherit; cursor: pointer; font-weight: 600; }
.tab[aria-selected="true"] { background: var(--color-bg); color: var(--color-dark); }
.tab-panel { padding: 2rem; border-radius: var(--radius); background: color-mix(in srgb, var(--color-bg) 6%, transparent); }
.brew__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 1.5rem; }
.brew__stats div { padding: 1rem; border-radius: calc(var(--radius) / 1.5); background: color-mix(in srgb, var(--color-bg) 8%, transparent); }
.brew__stats dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.brew__stats dd { margin: 0; font-family: var(--font-heading); font-size: 1.4rem; }
.brew__steps ol { counter-reset: step; list-style: none; padding: 0; }
.brew__steps li { counter-increment: step; position: relative; padding-left: 2.5rem; }
.brew__steps li + li { margin-top: .9rem; }
.brew__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-accent); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }