/* North Shore Table, Maui Nord Farm Co. prospecting mockup.
   One family in two cuts: Barlow Condensed (display, prices, buttons) and Barlow Semi Condensed (reading).
   Both are SIL Open Font License 1.1; the licence is in ../fonts/OFL.txt. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-semi-condensed-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2"); }

:root {
  /* Palette, sourced from the mark and measured (see the build ledger). */
  --ground: #F6F1E8;          /* 60%: warm off-white, extended from the mark's cream field */
  --ground-2: #EFE8DB;        /* the same ground, one step deeper, for empty slots and the footer */
  --paper: #FBF8F2;           /* the price tag on the hero photograph */
  --ink: #1C1A17;             /* 30%: near-black text, from the mark's black line work. 15.43:1 on ground */
  --ink-2: #5A554D;           /* secondary text. 6.57:1 on ground */
  --line: rgba(28, 26, 23, 0.22);
  --cobalt: #0060F0;          /* 10%: the buy action only. 4.75:1 on ground, white on it 5.34:1 */
  --cobalt-deep: #0050C8;     /* hover state of the buy action */
  --coral: #F07080;           /* decorative only, never text on a light ground (2.54:1) */
  --peri: #6B8DCF;            /* decorative only, measured off the mark's blue blossoms */
  --orange: #EF8342;          /* decorative only, measured off the mark's orange accents */

  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.band :focus-visible, .nav:not(.is-solid) :focus-visible { outline-color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  background: var(--ink); color: #fff; padding: 10px 14px; text-decoration: none;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .96;
  margin: 0;
}
h2 { font-size: clamp(34px, 4vw, 56px); }
h3 { font-size: 22px; letter-spacing: .04em; line-height: 1.1; }
p { margin: 0 0 16px; }
.lede { font-size: clamp(19px, 1.6vw, 22px); max-width: 60ch; }
.small { font-size: 15px; color: var(--ink-2); }
.label {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.quote {
  font-family: var(--text); font-weight: 400; font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.35; margin: 0; max-width: 34ch;
}
.quote cite { display: block; font-style: normal; margin-top: 12px; }
.ph {
  display: inline-block; font-family: var(--text); font-weight: 500; font-size: 13px;
  color: var(--ink-2); border: 1px dashed var(--ink-2); border-radius: 2px;
  padding: 2px 7px; line-height: 1.3; letter-spacing: .02em; vertical-align: middle;
}
.band .ph, .tag .ph { border-color: currentColor; color: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--cobalt); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s ease-out, transform .2s ease-out;
}
.btn:hover { background: var(--cobalt-deep); }
.btn:active { transform: translateY(1px); }
.btn.is-added { background: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.quiet {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; font-size: 16px;
}
.quiet:hover { color: var(--ink); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(16px, 3vw, 40px); color: #fff;
  transition: background-color .3s ease-out, color .3s ease-out, box-shadow .3s ease-out;
}
.nav.is-solid {
  background: rgba(246, 241, 232, .94); color: var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; min-width: 44px; }
.nav__brand img { width: 40px; height: 40px; border-radius: 50%; }
.nav__brand span {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.nav__links { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); margin: 0; padding: 0; list-style: none; }
.nav__links a {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s;
}
.nav__links a:hover { border-color: currentColor; }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__cart {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid transparent; transition: border-color .2s;
}
.nav__cart:hover { border-color: currentColor; }
.nav__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 11px; background: var(--cobalt); color: #fff; font-size: 13px; letter-spacing: 0;
}
.nav__menu {
  display: none; background: none; border: 0; padding: 0 6px; min-height: 44px; min-width: 44px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
}
.menu {
  position: fixed; inset: 0; z-index: 25; background: var(--ground); padding: 96px var(--gutter) 40px;
  display: none; flex-direction: column; gap: 8px;
}
.menu.is-open { display: flex; }
.menu a {
  font-family: var(--display); font-weight: 600; font-size: 44px; text-transform: uppercase;
  text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-block; }
  .nav__brand span { white-space: nowrap; font-size: 16px; letter-spacing: .05em; }
  .nav__brand { gap: 10px; }
}
@media (max-width: 400px) {
  .nav__brand span { display: none; }
}

/* ---------- Full-bleed bands ---------- */
.band {
  position: relative; min-height: 88vh; display: grid; align-items: end; overflow: hidden;
  color: #fff; isolation: isolate;
}
.band--tall { min-height: 100vh; min-height: 100svh; }
.band--short { min-height: 72vh; }
.band picture, .band > img { position: absolute; inset: 0; z-index: 0; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.band__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(22, 17, 10, .62) 0%, rgba(22, 17, 10, .28) 34%, rgba(22, 17, 10, 0) 62%),
    linear-gradient(to bottom, rgba(22, 17, 10, .34) 0%, rgba(22, 17, 10, 0) 140px);
}
.band__copy {
  position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) var(--gutter) clamp(40px, 6vw, 80px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.band__copy h2 { max-width: 14ch; font-size: clamp(40px, 5.2vw, 76px); }
.band__copy p { max-width: 52ch; font-size: clamp(18px, 1.5vw, 21px); margin-top: 16px; }
.band__copy .btn { text-shadow: none; margin-top: 24px; }
.band__copy .caption {
  font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .92; margin: 0 0 12px;
}

/* ---------- Hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
.hero__ripple {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity .6s ease-out;
}
.hero__ripple.is-live { opacity: 1; }
.hero .band__copy { padding-bottom: clamp(40px, 7vw, 96px); }
.hero h1 {
  font-size: clamp(46px, 7vw, 100px); max-width: 13ch; line-height: .92; letter-spacing: 0;
}
.hero .sub { max-width: 46ch; font-size: clamp(18px, 1.6vw, 22px); margin: 20px 0 0; }
.tag {
  display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 28px; padding: 14px 14px 14px 20px; border-radius: 4px;
  background: var(--paper); color: var(--ink); text-shadow: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
.tag__name { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.tag__meta { display: block; font-family: var(--text); font-weight: 400; font-size: 15px; color: var(--ink-2); text-transform: none; letter-spacing: 0; margin-top: 4px; }
.tag__price { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; }
@media (min-width: 1000px) {
  .hero .band__copy { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
  .tag { margin: 0 0 10px; }
}

/* ---------- Transition marks (the motif at band edges) ---------- */
.mark {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; background: var(--ground);
  display: grid; place-items: center; z-index: 3;
}
.mark svg { width: 38px; height: 38px; }
.mark--ink { background: var(--ink); }

/* ---------- Sections on the ground ---------- */
.section { position: relative; padding: clamp(64px, 8vw, 112px) 0; }
.section--tight { padding-top: clamp(40px, 5vw, 64px); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.section__head h2 { max-width: 20ch; }
.section__head p { max-width: 48ch; margin: 0; color: var(--ink-2); }
.head-mark { display: inline-flex; align-items: center; gap: 14px; }
.head-mark svg { width: 34px; height: 34px; flex: none; }

/* ---------- Product clusters (loose, not a grid) ---------- */
.cluster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 44px); }
.item { width: 232px; display: flex; flex-direction: column; gap: 10px; }
.item--lead { width: 312px; }
.item--wide { width: 312px; }
.item h3 { margin-top: 6px; }
.item h3 a { text-decoration: none; }
.item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.item p { font-size: 16px; color: var(--ink-2); margin: 0; }
.item .price { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .02em; }
.item .btn { align-self: flex-start; margin-top: 6px; }

.badge { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--ground-2); }
.badge img { width: 100%; height: 100%; object-fit: cover; }
.badge::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .25s ease-out;
}
.item:hover .badge::after, .item:focus-within .badge::after { box-shadow: inset 0 0 0 3px var(--cobalt); }
.badge--empty { display: grid; place-items: center; text-align: center; padding: 18%; }
.badge--empty svg { width: 40%; height: auto; opacity: .95; }
.ph--slot { display: block; width: max-content; max-width: 100%; margin: 4px auto 0; text-align: center; }
.fam-mark { width: 40px; height: 40px; display: block; }
a.badge { display: block; }

/* size / scent chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.chip {
  font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  background: none; border: 1.5px solid var(--line); border-radius: 3px; padding: 6px 9px; cursor: pointer; line-height: 1;
  transition: border-color .2s, background-color .2s;
}
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip:disabled { cursor: not-allowed; text-decoration: line-through; color: var(--ink-2); }
.chip:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--ink); }

/* sold-out, designed as a state rather than a failure */
.soldout { display: flex; flex-direction: column; gap: 6px; }
.soldout__flag {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--ink); padding: 7px 10px; border-radius: 3px;
}
.soldout p { font-size: 15px; }

/* ---------- Specimen band (honey) ----------
   The honey photograph is small (619px), so it is set deliberately as the largest circular plate on
   the page, in the same badge geometry as every product, on its own deeper-cream band. Downscaled,
   never stretched. An inset by design, not a full-bleed band that came up short. */
.specimen { background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.specimen__grid { display: grid; grid-template-columns: minmax(280px, 560px) 1fr; gap: clamp(32px, 6vw, 104px); align-items: center; }
.specimen__plate { margin: 0; }
.badge--specimen { width: 100%; max-width: 560px; margin: 0 auto; box-shadow: 0 24px 60px rgba(28, 26, 23, .12); }
.badge--specimen img { object-position: 50% 42%; }
.badge--specimen::after { box-shadow: inset 0 0 0 3px var(--line); }
.specimen__copy { display: flex; flex-direction: column; gap: 20px; }
.specimen__copy h2 { max-width: 14ch; }
.specimen__copy .quote { max-width: 30ch; }
@media (max-width: 860px) {
  .specimen__grid { grid-template-columns: 1fr; gap: 32px; }
  .badge--specimen { max-width: 340px; }
}

/* ---------- Plates (small badge gallery) ---------- */
.plates { display: flex; flex-wrap: wrap; gap: 28px 24px; align-items: flex-start; }
.plate { width: 168px; display: flex; flex-direction: column; gap: 8px; }
.plate .badge { width: 100%; }
.plate span { font-size: 15px; color: var(--ink-2); line-height: 1.3; }
.plate--s { width: 132px; }

/* ---------- Facts ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 40px; }
.fact .display { font-size: clamp(40px, 4.4vw, 64px); display: block; line-height: .95; }
.fact p { margin: 8px 0 0; color: var(--ink-2); font-size: 17px; }

/* ---------- Review ---------- */
.review { border-left: 3px solid var(--coral); padding-left: 20px; }
.review .quote { font-size: clamp(20px, 1.7vw, 24px); }
.review cite { color: var(--ink-2); font-size: 15px; }

/* ---------- Markets ---------- */
.markets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.market h3 { font-size: clamp(24px, 2.4vw, 30px); }
.market .when { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; margin: 8px 0 6px; }
.market p { margin: 0; color: var(--ink-2); }
.market address { font-style: normal; }

/* ---------- Footer ---------- */
.footer { background: var(--ground-2); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0 40px; font-size: 16px; }
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 40px; }
.footer h3 { font-size: 15px; letter-spacing: .14em; color: var(--ink-2); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__brand img { width: 56px; height: 56px; border-radius: 50%; }
.footer__brand strong { font-family: var(--display); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: .06em; display: block; line-height: 1; }
.footer__brand span { color: var(--ink-2); font-size: 15px; }
.footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.updates { display: flex; gap: 8px; flex-wrap: wrap; }
.updates input {
  flex: 1 1 200px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 4px;
  background: #fff; font: 400 17px var(--text); color: var(--ink);
}
.updates input:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.updates__ok { display: none; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 4px; }
.updates__ok.is-on { display: block; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Product page ---------- */
.product { padding-top: calc(var(--nav-h) + 40px); }
.product__grid { display: grid; grid-template-columns: minmax(280px, 520px) 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.product__photo .badge { width: 100%; }
.product h1 { font-size: clamp(38px, 5vw, 64px); max-width: 14ch; }
.product .lede { margin-top: 20px; }
.product .price { font-family: var(--display); font-weight: 600; font-size: 38px; line-height: 1; margin: 20px 0 8px; }
.product .chips { margin: 14px 0 22px; }
.product .chip { font-size: 16px; padding: 10px 14px; }
.product .btn { min-height: 56px; padding: 0 30px; font-size: 19px; }
.product .copy { margin-top: 32px; max-width: 58ch; }
.product .copy p { font-size: 19px; }
.product .meta { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 16px; display: grid; gap: 8px; }
.crumb { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.crumb a { text-decoration: none; color: var(--ink-2); }
.crumb a:hover { color: var(--ink); }
@media (max-width: 760px) { .product__grid { grid-template-columns: 1fr; } .product__photo { max-width: 420px; } }

/* ---------- Cart page ---------- */
.cart { padding-top: calc(var(--nav-h) + 40px); min-height: 70vh; }
.cart h1 { font-size: clamp(38px, 5vw, 64px); }
.cart__list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line); }
.cart__row { display: grid; grid-template-columns: 88px 1fr auto auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart__row .badge { width: 88px; }
.cart__row h3 { font-size: 20px; }
.cart__row .small { margin: 4px 0 0; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 4px; }
.qty button { width: 40px; height: 40px; background: none; border: 0; cursor: pointer; font-family: var(--display); font-size: 20px; }
.qty output { min-width: 32px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 18px; }
.cart__total { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: baseline; padding: 24px 0; }
.cart__total .price { font-family: var(--display); font-weight: 600; font-size: 34px; }
.cart__empty { padding: 40px 0; }
.notice { margin-top: 16px; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 4px; display: none; }
.notice.is-on { display: block; }
@media (max-width: 600px) { .cart__row { grid-template-columns: 72px 1fr; } .cart__row .qty, .cart__row .price { grid-column: 2; } }

/* ---------- Reveal (quiet, fade-up 10px) ---------- */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease-out, transform .6s ease-out; }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .badge::after, .nav, .chip { transition: none; }
}

/* ---------- Small screens ---------- */
@media (hover: none), (max-width: 760px) {
  .chip { min-height: 44px; padding: 10px 12px; }
  .footer ul { gap: 0; }
  .footer ul a, .footer ul span { display: inline-block; padding: 10px 0; }
  .quiet { display: inline-block; padding: 10px 0; }
  .item h3 a, .market h3, .plate span { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .band { min-height: 78vh; }
  .band__copy h2 { font-size: clamp(36px, 10vw, 56px); }
  .hero h1 { font-size: clamp(44px, 13vw, 72px); }
  .item, .item--lead, .item--wide { width: calc(50% - 12px); }
  .cluster { gap: 32px 24px; }
  .item h3 { font-size: 19px; }
  .plate { width: calc(33.333% - 16px); }
  .plate--s { width: calc(33.333% - 16px); }
  .tag { gap: 12px; padding: 12px 12px 12px 16px; }
  .tag__price { font-size: 26px; }
}
@media (max-width: 359px) {
  .item, .item--lead, .item--wide { width: 100%; max-width: 300px; }
}