/* STYLE 3 — "Editorial"
   A review publication. Warm paper, serif headlines, generous air, big imagery.
   The lead review runs full-width like a feature; the rest form a column grid. */

:root {
  --page:       #f7f4ed;
  --surface:    #fffdf8;
  --surface-2:  #efe9dc;
  --ink:        #1b1815;
  --ink-2:      #554d43;
  --ink-mute:   #8b8175;
  --line:       rgba(27,24,21,.14);
  --accent:     #1f5c34;
  --accent-ink: #fffdf8;
  --radius:     4px;
  --gap:        34px;
  --shadow:     none;
  --font-head:  Georgia, "Iowan Old Style", "Times New Roman", serif;
  --maxw:       1120px;
  --grid:       #e5ded0;
  --axis:       #c8bfae;
}

body { font-size: 1rem; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--ink); }

.tabs button { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.chip { border-radius: 2px; background: transparent; border: 1px solid var(--line); letter-spacing: .09em; }

/* Flat, ruled columns — no shadow, no fill; the type does the work, with the
   thumbnail sitting alongside at its native scale. */
.card { border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: transparent; gap: 16px; }
.card:hover { transform: none; }
.card-media { width: 120px; border-radius: 2px; margin-top: 16px; }
.card-body { padding: 14px 0 28px; gap: 10px; }
.card-brand { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; }
.card-product { font-style: italic; color: var(--ink-2); }
.summary { -webkit-line-clamp: 4; line-clamp: 4; font-size: .94rem; }
.cardgrid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); column-gap: var(--gap); }

/* The top-ranked review runs full width as the lead item — carried by a big
   headline and a longer standfirst rather than a blown-up thumbnail. */
.cardgrid .card:first-child { grid-column: 1 / -1; border-top-width: 4px; gap: 26px; }
.cardgrid .card:first-child .card-media { width: 140px; }  /* native thumb width — no upscale */
.cardgrid .card:first-child .card-brand { font-size: 2.15rem; line-height: 1.1; }
.cardgrid .card:first-child .card-product { font-size: 1.1rem; }
.cardgrid .card:first-child .summary {
  display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible;
  font-size: 1.05rem; max-width: 58ch;
}

/* The lead review fills the grid width by putting the extracted tasting notes
   in a right-hand rail — rather than stretching the standfirst to a 120-char
   measure or splitting four lines across two columns. */
.cardgrid .card:first-child .card-aside {
  display: block; width: 300px; flex: none; padding-top: 16px;
  border-left: 1px solid var(--line); padding-left: var(--gap);
  align-self: stretch;
}
.card-aside .d-note + .d-note { margin-top: 13px; }
.card-aside h4 {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-mute); font-family: var(--font);
}
.card-aside p { font-size: .88rem; color: var(--ink-2); margin-top: 2px; }

/* No notes extracted -> no rail, so let the standfirst run the full width. */
.cardgrid .card:first-child:not(:has(.card-aside)) .summary { max-width: none; }
.cardgrid .card:first-child .card-body { padding-top: 16px; }

/* A set numeral in the margin, the way a ranked feature list numbers itself */
.card-rank { top: 16px; font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.cardgrid .card:first-child .card-rank { font-size: 1.4rem; }

/* Filled panel, so it needs side padding — the flush-left treatment used by
   the review cards only works when the background is transparent. */
.bcard { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 15px 16px; }
.bcard:hover { transform: none; }
.bcard-name { font-family: var(--font-head); font-size: 1.15rem; }
.bcard-thumb { border-radius: 2px; }
.brandgrid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); column-gap: var(--gap); }

.chart-fig { border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 16px 0 0; background: transparent; }
.chart-fig figcaption h3 { font-size: 1.3rem; }

@media (max-width: 760px) {
  .cardgrid .card:first-child { gap: 14px; }
  .cardgrid .card:first-child .card-media { width: 120px; }
  .cardgrid .card:first-child .card-brand { font-size: 1.6rem; }

  /* The rail exists to fill the lead card's spare width; there is none on a
     phone, where it would just be clipped by the card. The notes remain in
     the detail drawer. */
  .cardgrid .card:first-child .card-aside { display: none; }
  .cardgrid .card:first-child .summary { max-width: none; }
}