/* ==========================================================================
   Tropic By Hazel — shared stylesheet
   Palette and type taken from the live tropic.com theme (radiant.css):
   green #225728, ink #191919, sage tints #d3ddd4 / #e9eee9 / #f6f8f6,
   Cormorant Garamond headings. Tropic's body face is Gotham (licensed), so
   Montserrat stands in — uppercase and widely tracked to match.
   Hazel's own pink + gold are the accents that make this hers, not Tropic's.
   ========================================================================== */

:root {
  --green:        #225728;
  --green-dark:   #16391b;
  --green-mid:    #3c7343;
  --ink:          #191919;
  --ink-soft:     #4a4a4a;
  --ink-faint:    #7b7b7b;

  --sage-1:       #f6f8f6;
  --sage-2:       #e9eee9;
  --sage-3:       #d3ddd4;
  --sage-4:       #abb7ac;
  --packshot:     #cbccbe;   /* the backdrop in Tropic's official product shots */

  --grey-1:       #fafafa;
  --grey-2:       #f4f4f4;
  --grey-3:       #e7e7e7;

  --pink:         #e0197b;
  --pink-soft:    #fce7f1;
  --gold:         #b8912f;
  --cream:        #fdfbf7;
  --white:        #ffffff;
  --danger:       #cf1e00;

  --serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap:      1280px;
  --wrap-slim: 860px;
  --radius:    4px;
  --shadow:    0 2px 14px rgba(25, 25, 25, .07);
  --shadow-lg: 0 8px 34px rgba(25, 25, 25, .12);
  --header-h:  92px;
}

/* ---------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

/* Our own flex/grid rules would otherwise beat the UA's [hidden] display:none. */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.15rem; }

h1 em, h2 em, h3 em { font-style: italic; }

p { margin: 0 0 1rem; }

.wrap      { width: 100%; max-width: var(--wrap);      margin: 0 auto; padding: 0 24px; }
.wrap-slim { width: 100%; max-width: var(--wrap-slim); margin: 0 auto; padding: 0 24px; }

.section     { padding: 72px 0; }
.section-sm  { padding: 44px 0; }
.section-sage{ background: var(--sage-1); }
.section-cream { background: var(--cream); }

.centred { text-align: center; }
.stack-sm > * + * { margin-top: .5rem; }

.eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green); margin: 0 0 .75rem;
}
.lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 60ch; }
.centred .lede { margin-inline: auto; }
.muted { color: var(--ink-faint); font-size: .875rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 14px 30px; border: 1px solid var(--green); border-radius: var(--radius);
  background: var(--green); color: #fff; cursor: pointer;
  font-size: .72rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--green); color: #fff; }

.btn-quiet {
  background: var(--grey-2); border-color: var(--grey-2); color: var(--ink);
}
.btn-quiet:hover { background: var(--sage-3); border-color: var(--sage-3); color: var(--ink); }

.btn-pink { background: var(--pink); border-color: var(--pink); }
.btn-pink:hover { background: #b8145f; border-color: #b8145f; }

.btn-sm { padding: 9px 18px; font-size: .66rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}

.link-underline {
  font-size: .72rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.link-underline:hover { color: var(--green); }

/* ---------------------------------------------------------------- header -- */

.announce {
  background: var(--green); color: #fff; text-align: center;
  padding: 11px 24px; font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.announce a { color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff; border-bottom: 1px solid var(--grey-3);
}
.header-inner {
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}

.nav { display: flex; gap: 28px; align-items: center; }
.nav a {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); padding: 4px 0;
  border-bottom: 1.5px solid transparent;
}
.nav a:hover { color: var(--green); }
.nav a[aria-current="page"] { border-bottom-color: var(--green); color: var(--green); }

.brandmark {
  justify-self: center; text-align: center; text-decoration: none; line-height: 1;
}
/* Hazel's logo artwork is black type on white, so it only goes on white or very
   light surfaces. The footer keeps the typographic lockup below, which reads on
   the green. */
.brandmark img { height: 70px; width: auto; }
.brandmark .bm-tropic {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 500;
  letter-spacing: .3em; text-indent: .3em; display: block; color: var(--ink);
}
.brandmark .bm-hazel {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--pink); display: block; margin-top: -2px;
}

.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }

.list-button {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border: 1px solid var(--green); border-radius: 999px;
  background: #fff; color: var(--green); text-decoration: none; cursor: pointer;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.list-button:hover { background: var(--sage-2); }
.list-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--pink); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center;
}

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
}

/* the "this isn't the real Tropic site" strip — deliberately unmissable */
.disclaimer-bar {
  background: var(--sage-2); border-bottom: 1px solid var(--sage-3);
  color: var(--green-dark); text-align: center;
  padding: 9px 24px; font-size: .74rem; line-height: 1.45;
}
.disclaimer-bar strong { font-weight: 700; }
.disclaimer-bar a { color: var(--green); font-weight: 600; }

/* ------------------------------------------------------------------ hero -- */

/* One photograph across the whole hero. hero.jpg is the official lineup packshot
   with its own studio backdrop extended leftwards, so there is no gradient to
   match and no seam to hide. The flat colour behind it is the backdrop's own
   sage, for the moment before the image decodes. */
.hero {
  position: relative; min-height: min(74vh, 620px);
  display: flex; align-items: center;
  background: var(--packshot) url("/assets/img/hero.jpg") right bottom / cover no-repeat;
  overflow: hidden;
}
/* Scrim: lifts the left third so the headline stays readable over the photo. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(252,251,247,.86) 0%, rgba(252,251,247,.58) 30%, rgba(252,251,247,0) 60%);
  pointer-events: none;
}
/* .hero-inner is also a .wrap, so it keeps the container's max-width and side
   padding — the copy is constrained separately, otherwise the headline would
   float to the middle of the page instead of lining up with everything else.
   padding-block, not the padding shorthand, for the same reason. */
.hero-inner { position: relative; z-index: 2; padding-block: 64px; }
.hero-inner > * { max-width: 620px; }
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.1rem; color: #3b3a34; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }


/* -------------------------------------------------------------- products -- */

.grid {
  display: grid; gap: 28px 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card { display: flex; flex-direction: column; }

.card-media {
  position: relative; display: block; background: var(--packshot);
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1;
}
.card-media img, .card-media svg { width: 100%; height: 100%; object-fit: cover; }

.card-flags {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.flag {
  background: #fff; border-radius: 999px; padding: 5px 12px;
  font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  box-shadow: var(--shadow);
}
.flag-pink { background: var(--pink); color: #fff; }
.flag-green { background: var(--green); color: #fff; }

.card-body { padding: 16px 2px 0; flex: 1; display: flex; flex-direction: column; }
.card-title {
  font-family: var(--serif); font-size: 1.28rem; line-height: 1.2; margin: 0 0 2px;
}
.card-title a { text-decoration: none; }
.card-title a:hover { color: var(--green); }
.card-strapline {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  color: var(--ink-soft); margin: 0 0 10px;
}

.benefits { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.benefits li {
  background: var(--sage-1); border: 1px solid var(--sage-2); border-radius: 999px;
  padding: 4px 11px; font-size: .68rem; color: var(--green-dark);
}
.benefits li::before { content: "✓ "; color: var(--green); }

.card-price { margin-top: auto; padding-top: 4px; font-size: .9rem; }
.card-price strong { font-weight: 700; }
.card-price .size { color: var(--ink-faint); margin-left: 6px; font-size: .82rem; }
.card-actions { margin-top: 12px; }

/* search */
.search {
  position: relative; max-width: 460px; margin: 0 auto 26px;
}
.search input {
  width: 100%; padding: 14px 44px 14px 46px; font: inherit; font-size: .95rem;
  color: var(--ink); background: #fff;
  border: 1px solid var(--sage-4); border-radius: 999px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.search input:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(34, 87, 40, .12);
}
.search .search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--ink-faint);
}
.search .search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--grey-2); color: var(--ink-soft); font-size: 1rem; line-height: 1;
  display: none; align-items: center; justify-content: center;
}
.search.has-value .search-clear { display: flex; }
.search .search-clear:hover { background: var(--sage-3); }

/* filter pills, as on tropic.com's "Shop Our Top Picks" */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.filter {
  padding: 11px 26px; border: 1px solid var(--green); border-radius: var(--radius);
  background: #fff; color: var(--green); cursor: pointer;
  font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.filter:hover { background: var(--sage-2); }
.filter[aria-pressed="true"] { background: var(--green); color: #fff; }

.group-heading {
  font-family: var(--serif); font-size: 1.6rem; margin: 44px 0 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--grey-3);
}
.group-heading:first-of-type { margin-top: 0; }

/* -------------------------------------------------------- how it works ---- */

.steps { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { text-align: center; }
.step-num {
  width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 999px;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.3rem;
}
.step h3 { font-size: 1.25rem; margin-bottom: .35em; }
.step p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* --------------------------------------------------------------- tables --- */

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--grey-3); vertical-align: top; }
.table th {
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom-color: var(--sage-3);
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------- forms --- */

.field { margin-bottom: 18px; }
/* :not(.check) — a checkbox's own label is sentence case, not a field caption. */
.field > label:not(.check),
.field-label {
  display: block; margin-bottom: 7px;
  font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
}
.input, .select, .textarea {
  width: 100%; padding: 14px 16px; font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--sage-4); border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(34, 87, 40, .12);
}
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23225728' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }

.field-row { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
.field-error { color: var(--danger); font-size: .78rem; margin-top: 6px; display: none; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.field.has-error .field-error { display: block; }

.check { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; line-height: 1.5; }
.check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--green); flex: none; }

.note {
  background: var(--sage-1); border-left: 3px solid var(--green);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .9rem;
}
.note-pink { background: var(--pink-soft); border-left-color: var(--pink); }
.note p:last-child { margin-bottom: 0; }

.alert {
  padding: 14px 18px; border-radius: var(--radius); font-size: .9rem; margin-bottom: 20px;
}
.alert-error { background: #fdecea; border: 1px solid #f3c0b8; color: #8c1c07; }
.alert-ok    { background: var(--sage-2); border: 1px solid var(--sage-3); color: var(--green-dark); }

/* ------------------------------------------------------------ the list ---- */

.panel {
  background: #fff; border: 1px solid var(--grey-3);
  border-radius: var(--radius); padding: 28px;
}
.panel-sage { background: var(--sage-1); border-color: var(--sage-2); }
.panel + .panel { margin-top: 22px; }
.panel h3 { margin-top: 0; }

.layout-2col { display: grid; gap: 34px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.sticky-side { position: sticky; top: calc(var(--header-h) + 20px); }

.line-item { display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--grey-3); }
.line-item:last-child { border-bottom: 0; }
.line-item .thumb { width: 74px; height: 74px; border-radius: var(--radius); overflow: hidden; background: var(--packshot); }
.line-item h4 { margin: 0 0 2px; font-size: 1.05rem; }
.line-item .line-sub { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: .92rem; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--sage-4); border-radius: var(--radius); overflow: hidden; }
.qty button { width: 34px; height: 34px; background: #fff; border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--green); }
.qty button:hover { background: var(--sage-2); }
.qty button[disabled] { color: var(--sage-4); cursor: not-allowed; background: var(--grey-1); }
.qty span { min-width: 34px; text-align: center; font-size: .95rem; font-weight: 600; }

.remove {
  background: none; border: 0; cursor: pointer; color: var(--ink-faint);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 0; margin-top: 4px;
}
.remove:hover { color: var(--danger); }

.totals { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.totals li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--grey-3); }
.totals li:last-child { border-bottom: 0; }
.totals .total-row { font-size: 1.15rem; font-weight: 700; padding-top: 14px; }
.totals .free { color: var(--green); font-weight: 700; }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .step-num { background: var(--sage-3); color: var(--green-dark); }

/* --------------------------------------------------------------- footer --- */

.site-footer { background: var(--green); color: #fff; padding: 60px 0 0; margin-top: 0; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1.5fr 1fr 1fr; }
.site-footer h4 {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; margin: 0 0 14px; color: #fff;
}
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; font-size: .9rem; }
.site-footer p { color: rgba(255,255,255,.82); font-size: .9rem; }
.footer-brand .bm-tropic { color: #fff; }
.footer-brand .bm-hazel { color: #ffb4d6; }
.footer-legal {
  margin-top: 44px; border-top: 1px solid rgba(255,255,255,.2); padding: 22px 0 30px;
  font-size: .78rem; color: rgba(255,255,255,.72); line-height: 1.6;
}

/* ---------------------------------------------------------------- toast --- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 120%);
  z-index: 200; background: var(--green); color: #fff;
  padding: 14px 26px; border-radius: 999px; box-shadow: var(--shadow-lg);
  font-size: .8rem; letter-spacing: .06em; max-width: calc(100vw - 40px); text-align: center;
  transition: transform .32s cubic-bezier(.2,.9,.3,1);
}
.toast.show { transform: translate(-50%, 0); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .layout-2col { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --header-h: 74px; }
  .section { padding: 48px 0; }
  .wrap, .wrap-slim { padding: 0 18px; }

  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px);
    background: #fff; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 88px 26px 26px; box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .28s ease; z-index: 70;
  }
  .nav.open { transform: translateX(0); }
  .nav a { width: 100%; padding: 15px 0; border-bottom: 1px solid var(--grey-3); }
  .nav a[aria-current="page"] { border-bottom-color: var(--grey-3); }
  .brandmark { justify-self: center; }
  .brandmark img { height: 54px; }
  .brandmark .bm-tropic { font-size: 1.35rem; letter-spacing: .24em; text-indent: .24em; }
  .brandmark .bm-hazel { font-size: .8rem; }
  .list-button { padding: 9px 13px; }
  .list-button .list-label { display: none; }

  .hero { min-height: auto; }
  .hero-inner { padding-block: 44px 300px; }
  .hero-inner > * { max-width: none; }
  /* Portrait screens only get a short band under the copy, and the wide hero
     keeps its products off in the right third — so swap in the centred crop. */
  .hero {
    background-image: url("/assets/img/hero-mobile.jpg");
    background-position: center bottom;
    background-size: 100% auto;
  }
  /* The crop's top edge is #c9cabc, so the wall above it continues in that exact
     tone and the join reads as one continuous backdrop. */
  .hero { background-color: #c9cabc; }

  .grid { gap: 24px 16px; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .card-title { font-size: 1.08rem; }
  .card-strapline { font-size: .9rem; }

  .field-row { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
  .line-item { grid-template-columns: 58px 1fr; gap: 12px; }
  .line-item .thumb { width: 58px; height: 58px; }
  .line-item .line-controls { grid-column: 2; }

  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .site-header, .site-footer, .announce, .nav-toggle, .btn, .toast { display: none !important; }
}

/* ------------------------------------------------------------ admin only -- */

.status-pill {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.status-new       { background: var(--pink-soft); color: #a01158; }
.status-paid      { background: var(--sage-2);   color: var(--green-dark); }
.status-posted    { background: var(--green);    color: #fff; }
.status-cancelled { background: var(--grey-2);   color: var(--ink-faint); }

.admin-login { max-width: 400px; margin: 80px auto; }
.admin-stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 32px; }
.stat { background: var(--sage-1); border: 1px solid var(--sage-2); border-radius: var(--radius); padding: 18px 20px; }
.stat .stat-n { font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--green); }
.stat .stat-l { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }