:root {
  /* Light only, matching the meta tag in every page head: without it Chrome's Auto Dark Mode inverts the palette and photos. */
  color-scheme: only light;

  --ink: #101614;
  --body: #2b332f;
  --muted: #4d5651;
  --line: #e4ded3;
  --line-soft: #eee9e0;
  --paper: #f6f3ee;
  --green: #0b5a45;
  --green-tint: #e6f2ee;

  --dark: #0f1a16;
  --on-dark: #d5ddd9;

  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Section backgrounds run full width; past 1440px the gutter grows so content stays in a 1360px column. */
  --gutter: max(clamp(16px, 3cqi, 40px), (100cqi - 1360px) / 2);
}

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

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page { container-type: inline-size; }

a { color: var(--green); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

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

.mono-label {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Header ---------- */

.site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
  padding: 6px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  flex: none; padding: 12px 0;
  font: 600 15px/1.2 var(--sans); letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.primary-nav, .secondary-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.primary-nav a {
  padding: 15px 9px;
  font: 500 13.5px/1 var(--sans); color: var(--ink); text-decoration: none;
}
.secondary-nav { margin-left: auto; }
.secondary-nav a {
  padding: 16px 8px;
  font: 400 12.5px/1 var(--sans); color: var(--muted); text-decoration: none;
}
.primary-nav a:hover, .secondary-nav a:hover { text-decoration: underline; }
/* Search on every page: submits to /perfumes/, which filters its list by ?q= (explore.js). Below 900px only the
   button shows, and opens /perfumes/ with its search box focused. */
.header-search {
  margin-left: auto; display: flex; align-items: stretch; height: 36px;
  background: #fff; border: 1px solid var(--line);
}
.header-search:focus-within { border-color: var(--green); }
.header-search input {
  width: 190px; min-width: 0; padding: 0 4px 0 12px; border: 0; outline: 0; background: transparent;
  font: 400 14px/1.2 var(--sans); color: var(--ink);
}
.header-search input::placeholder { color: var(--muted); }
.header-search button {
  flex: none; width: 36px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.header-search button:hover { color: var(--green); }
.header-search + .secondary-nav { margin-left: 0; }
@container (max-width: 899px) {
  .header-search { height: auto; border: 0; background: transparent; }
  .header-search input { display: none; }
  .header-search button { width: 40px; min-height: 44px; }
}
/* Phones: wordmark and primary nav on one row. About and Our method are in the footer, so the header drops them
   (up to 539px, where all five links start to fit on one row). */
@container (max-width: 539px) {
  .site-header { flex-wrap: nowrap; gap: 0 10px; }
  .primary-nav { flex-wrap: nowrap; gap: 0; margin-left: auto; }
  .primary-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 7px; }
  .primary-nav a:last-child { padding-right: 0; }
  .header-search { margin-left: 0; }
  .header-search button { width: 36px; margin-right: -8px; }
  .secondary-nav { display: none; }
}
/* Narrow phones: the wordmark and search button share the top row, the three section links sit below. */
@container (max-width: 479px) {
  .site-header { flex-wrap: wrap; padding-bottom: 0; }
  .header-search { order: 2; margin-left: auto; }
  .primary-nav { order: 3; flex: 1 0 100%; margin: -6px 0 0 -7px; }
  .wordmark { padding: 10px 0; }
}

/* ---------- Hero: search + example comparison ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(26px, 4cqi, 52px);
  align-items: start;
  padding: clamp(26px, 5cqi, 60px) var(--gutter) clamp(30px, 5cqi, 60px);
  background: var(--paper);
}
.hero-intro { min-width: 0; padding-top: clamp(0px, 1.5cqi, 18px); }
.hero h1 {
  margin: 0; max-width: 16ch;
  font: 600 clamp(32px, 4.8cqi, 56px)/1.04 var(--sans); letter-spacing: -.025em;
  color: var(--ink); text-wrap: balance;
}
.hero-lede {
  margin: 18px 0 0; max-width: 46ch;
  font: 400 clamp(16px, 1.6cqi, 18.5px)/1.6 var(--sans); text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 3cqi, 32px); }
.search {
  flex: 1 1 280px; min-width: 0; min-height: 56px;
  display: flex; align-items: stretch;
  background: #fff; border: 1px solid #9aa39e;
}
.search:focus-within { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.search-icon {
  flex: none; display: flex; align-items: center; padding: 0 4px 0 16px;
  font: 400 16px/1 var(--sans); color: var(--muted);
}
.search input {
  flex: 1; min-width: 0; padding: 0 10px;
  border: 0; outline: 0; background: transparent;
  font: 400 16px/1.2 var(--sans); color: var(--ink); /* 16px or more, or iOS Safari zooms in on focus */
}
.search input::placeholder { color: var(--muted); }
.search button {
  flex: none; padding: 0 20px; border: 0; cursor: pointer;
  background: var(--green); color: #fff; font: 600 13.5px/1 var(--sans);
}
.search button:hover { background: #084535; }
.btn-outline {
  flex: none; min-height: 56px; padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--green); color: var(--green);
  font: 600 13.5px/1 var(--sans); text-decoration: none;
}
.btn-outline:hover { background: var(--green-tint); }

.quick-compare { margin-top: 18px; }
.hub-search { max-width: 560px; margin-top: 22px; }
.hero-gift { display: grid; gap: 2px; max-width: 520px; margin-top: 20px; padding: 14px 16px; background: var(--green-tint); border-left: 3px solid var(--green); color: var(--body); text-decoration: none; }
.hero-gift .mono-label { color: var(--green); }
.hero-gift strong { font: 600 16px/1.35 var(--sans); color: var(--ink); }
.hero-gift span:last-child { font-size: 14.5px; line-height: 1.5; }
.hero-gift:hover strong { text-decoration: underline; }
.quick-compare p { margin: 0 0 8px; font: 400 13px/1.4 var(--sans); color: var(--muted); }
@container (max-width: 480px) {
  .quick-compare .chips { gap: 6px; }
  .quick-compare .chips a { padding: 0 12px; font-size: 13.5px; }
}

/* Comparison card */

.compare-card {
  min-width: 0; background: #fff; border: 1px solid var(--line);
  padding: clamp(16px, 2.2cqi, 24px);
}
.compare-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.compare-meta .mono-label:last-child { font-weight: 400; letter-spacing: .08em; }
.compare-card h2 {
  margin: 10px 0 0;
  font: 600 clamp(17px, 1.8cqi, 20px)/1.3 var(--sans); color: var(--ink);
}
.compare-summary { margin: 6px 0 0; font: 400 14px/1.55 var(--sans); text-wrap: pretty; }

.compare-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.compare-plates figure { margin: 0; min-width: 0; }
/* Hero comparison: the bottle over a soft scent-family tint, with the family and listed notes beside it
   (under it on phones). */
.compare-bottle {
  display: grid; grid-template: "family photo" auto "notes photo" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
  aspect-ratio: 4 / 3; padding: 11px; overflow: hidden;
  background: linear-gradient(158deg, var(--from), color-mix(in srgb, var(--to) 55%, var(--from)));
  color: var(--ink-on); font: 500 11.5px/1.2 var(--mono); text-transform: uppercase;
}
.compare-bottle img { grid-area: photo; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
/* A square photo of a slim bottle with wide margins: crop the empty sides and enlarge a little so it matches its neighbour. */
.compare-bottle img.is-padded { object-fit: cover; scale: var(--zoom); }
.compare-bottle .bottle-family { grid-area: family; margin: 0; letter-spacing: .08em; }
.compare-bottle .bottle-notes { grid-area: notes; align-self: end; display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.compare-bottle .bottle-notes li { margin: 0; }
@container (max-width: 480px) {
  .compare-bottle { grid-template: "family" auto "photo" minmax(0, 1fr) "notes" auto / minmax(0, 1fr); aspect-ratio: 3 / 4; }
  .compare-bottle .bottle-notes { flex-flow: row wrap; gap: 2px 0; }
  .compare-bottle .bottle-notes li:not(:last-child)::after { content: ","; margin-right: .5em; }
}
.compare-plates figcaption { margin-top: 9px; font: 600 15px/1.3 var(--sans); color: var(--ink); }

.compare-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.compare-row { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.compare-row:last-child { border-bottom: 0; }
.compare-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.compare-row-head h3 { margin: 0; font: 600 12.5px/1 var(--sans); color: var(--ink); }
.compare-row-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: 7px; font: 400 13.5px/1.5 var(--sans);
}

.source-tag {
  padding: 4px 6px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.source-tag.brand { color: var(--muted); border: 1px solid #d3d9d7; }
.source-tag.editorial { color: #6b4e26; background: #f3ece1; }

.compare-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  border-top: 1px solid var(--line); padding-top: 4px;
}
.compare-foot a { padding: 15px 0; font: 600 14px/1 var(--sans); }
.compare-foot span { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }

/* Scent-family plates */

.plate {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  margin: 0; padding: 32px 12px 12px; list-style: none;
  aspect-ratio: 16 / 10;
  background: linear-gradient(158deg, var(--from), var(--to));
  color: var(--ink-on);
  font: 500 11.5px/1 var(--mono); text-transform: uppercase;
}
.plate-family { position: absolute; left: 11px; top: 11px; letter-spacing: .1em; }
.plate.lg { aspect-ratio: 4 / 3; padding: 34px 14px 14px; gap: 8px; }
.plate.lg .plate-family { left: 12px; top: 12px; letter-spacing: .08em; }

.fam-fresh    { --from: #eaeff2; --to: #c4d0d8; --ink-on: #25343f; }
.fam-amber    { --from: #eee9f0; --to: #c7bdd3; --ink-on: #332946; }
.fam-green    { --from: #eaf0ea; --to: #c6d6c9; --ink-on: #1f3328; }
.fam-gourmand { --from: #f7f1e4; --to: #ddccb2; --ink-on: #4a3518; }
.fam-smoke    { --from: #e9e3ec; --to: #c5b9d0; --ink-on: #2e2540; }
.fam-citrus   { --from: #f6f4e2; --to: #d8cf9e; --ink-on: #3a3712; }
.fam-woody    { --from: #efebe5; --to: #cdbfae; --ink-on: #3a2c1d; }
.fam-aquatic  { --from: #e6f1f1; --to: #b7d3d4; --ink-on: #173b3d; }
.fam-floral   { --from: #f6ecef; --to: #dfc2cb; --ink-on: #4a2432; }

/* ---------- How it works ---------- */

.how {
  padding: clamp(28px, 4.5cqi, 52px) var(--gutter);
  border-top: 1px solid var(--line);
}
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.section-head h2 {
  margin: 0; font: 600 clamp(22px, 2.6cqi, 28px)/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink);
}
.section-head a { padding: 16px 0; font: 600 14px/1 var(--sans); }
.steps {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(18px, 2.6cqi, 32px);
}
.steps li { border-top: 2px solid var(--ink); padding-top: 14px; }
.steps h3 { margin: 10px 0 0; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.steps p { margin: 6px 0 0; font: 400 14px/1.6 var(--sans); text-wrap: pretty; }

/* ---------- Explore perfumes ---------- */

.explore {
  padding: clamp(28px, 4.5cqi, 52px) var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.explore-intro { margin: 10px 0 0; max-width: 62ch; font: 400 15px/1.6 var(--sans); text-wrap: pretty; }
.explore-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 0 0; font: 400 13px/1.4 var(--sans); color: var(--muted);
}
.explore-legend .source-tag { margin-right: 10px; }
.family-filter { margin-top: 20px; }
.hub .family-filter { margin: 0 0 clamp(18px, 2.4cqi, 26px); }
.hub .filter-status { margin: 0 0 18px; }
.family-filter[hidden] { display: none; }
.family-filter .mono-label { margin: 0 0 8px; }
.family-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.family-chips button { flex: none; cursor: pointer; }
.family-chips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.family-chips button[aria-pressed="true"] span { color: #d3e8e0; }
/* One swipeable row on phones instead of four wrapped rows. */
@container (max-width: 599px) {
  .family-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter);
  }
}
.explore-status { margin: 18px 0 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink); }
.explore-status:empty { display: none; }
.explore-status button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 14.5px/1.5 var(--sans); color: var(--green);
  text-decoration: underline; text-underline-offset: 3px;
}
.explore-group { margin-top: clamp(22px, 3cqi, 34px); }
.explore-group[hidden], .hub-group[hidden], .perfume-card[hidden] { display: none; }
.explore-group h3 { margin: 0 0 12px; padding-top: 12px; border-top: 2px solid var(--ink); }

.perfume-grid {
  --gap: clamp(12px, 1.6cqi, 18px);
  list-style: none; margin: 0; padding: 0;
  /* At most four columns; auto-fill keeps card widths steady when search hides some. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(220px, (100% - 3 * var(--gap)) / 4)), 1fr));
  /* Rows of cards are spaced by the cards' margin, not row-gap: the cards' subgrid rows would inherit the gap
     wherever a row is empty (compact cards hide theirs). */
  column-gap: var(--gap);
}
/* Each card spans seven rows of the list's grid (subgrid), so brand lines, photos, titles, notes and
   perfumers line up across a row even when notes or summaries wrap. The title comes first in the source
   for screen readers; grid-row puts it under the photo. */
.perfume-card {
  display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; min-width: 0; margin-bottom: var(--gap);
  padding: 14px 14px 12px; background: #fff; border: 1px solid var(--line);
}
.card-meta { grid-row: 1; margin: 0; line-height: 1.4; }
.perfume-card > .photo-well, .perfume-card > .plate { grid-row: 2; margin-top: 10px; }
.card-title { grid-row: 3; margin: 12px 0 0; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.card-title span { display: block; margin-top: 2px; font: 400 13px/1.3 var(--sans); color: var(--muted); }
.note-chips { grid-row: 4; align-self: start; display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.note-chips li {
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
  font: 400 12.5px/1.35 var(--sans); color: var(--body);
}
.note-chips .family-chip { border-color: transparent; background: var(--from); color: var(--ink-on); font-weight: 500; }
.perfume-summary { grid-row: 5; margin: 10px 0 12px; font: 400 13.5px/1.55 var(--sans); text-wrap: pretty; }
.perfume-by {
  grid-row: 6; align-self: end; margin: 0; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font: 400 12px/1.45 var(--sans); color: var(--muted);
}
/* Sits above the stretched .card-link so it gets its own clicks and focus ring. */
.card-compare { grid-row: 7; position: relative; z-index: 2; margin: 2px 0 -8px; }
.card-compare a { display: inline-block; padding: 12px 0; font: 600 13.5px/20px var(--sans); }
.card-compare a:focus-visible { outline-offset: 0; }
@supports not (grid-template-rows: subgrid) {
  .perfume-card { display: flex; flex-direction: column; }
  .card-meta { order: 1; } .perfume-card > .photo-well, .perfume-card > .plate { order: 2; }
  .card-title { order: 3; } .note-chips { order: 4; min-height: 3.9em; } .perfume-summary { order: 5; }
  .perfume-by { order: 6; margin-top: auto; } .card-compare { order: 7; }
}

.perfume-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 1; margin-top: 10px;
  object-fit: contain; background: #fff;
}

/* Compact cards on phones: two columns with photo, name, concentration and family only.
   The summary, notes and perfumer are on the perfume page. */
@container (max-width: 599px) {
  .perfume-grid { --gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfume-card { padding: 10px 10px 12px; }
  .perfume-card > .photo-well, .perfume-card > .plate { margin-top: 8px; }
  .perfume-card > .plate { aspect-ratio: 1; padding: 30px 10px 10px; }
  .card-meta { font-size: 11.5px; letter-spacing: .04em; }
  .card-title { margin-top: 10px; font-size: 15px; }
  .note-chips { margin-top: 8px; }
  .note-chips li:not(.family-chip), .perfume-summary, .perfume-by { display: none; }
  .note-chips .family-chip { padding: 3px 7px; font-size: 12px; }
  /* "Compare →" only; the target stays in the link text for screen readers. */
  .card-compare-target { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Homepage sections on phones show six cards until "Show all" (explore.js). Without JS, or while
   searching or filtering, every card shows. */
.show-all { display: none; }
@container (max-width: 599px) {
  .explore:not([data-filtering]) .explore-group[data-collapsed] .perfume-card:nth-child(n + 7) { display: none; }
  .explore:not([data-filtering]) .show-all {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 10px;
    background: #fff; border: 1px solid var(--green); color: var(--green); cursor: pointer;
    font: 600 14px/1.2 var(--sans);
  }
  .show-all:hover { background: var(--green-tint); }
}

/* Photo well: the same square, padding and tint for every bottle. Photos need a transparent background
   (see docs/perfume-photos.md); no blend modes, which turn bottles black when a browser forces dark mode. */
.photo-well { overflow: hidden; aspect-ratio: 1; padding: 8%; background: var(--paper); }
.photo-well.is-tinted { background: linear-gradient(158deg, var(--from), color-mix(in srgb, var(--to) 55%, var(--from))); }
.photo-well .perfume-photo { width: 100%; height: 100%; margin: 0; background: none; }

/* ---------- Footer ---------- */

.site-footer {
  padding: clamp(28px, 4cqi, 48px) var(--gutter) 20px;
  background: var(--dark); color: var(--on-dark);
  font: 400 13.5px/1.6 var(--sans);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px; }
.footer-brand { flex: 1 1 260px; max-width: 38ch; }
.footer-wordmark { display: inline-block; padding: 4px 0; font: 600 16px/1.2 var(--sans); letter-spacing: -.01em; }
.footer-brand p { margin: 8px 0 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5cqi, 72px); }
.footer-heading {
  margin: 0 0 6px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9fb0a9;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav a { display: inline-block; padding: 6px 0; }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  margin-top: clamp(24px, 3cqi, 36px); padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.5px; color: #9fb0a9;
}

/* ---------- Content pages (method, privacy, terms, 404) ---------- */

.page-head {
  padding: clamp(26px, 5cqi, 56px) var(--gutter) clamp(24px, 4cqi, 40px);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.breadcrumb a { display: inline-block; padding: 4px 0; }
.page-head h1 {
  margin: 12px 0 0; max-width: 22ch;
  font: 600 clamp(30px, 4.4cqi, 48px)/1.08 var(--sans); letter-spacing: -.02em;
  color: var(--ink); text-wrap: balance;
}
.page-lede { margin: 14px 0 0; max-width: 60ch; font: 400 clamp(16px, 1.6cqi, 18px)/1.6 var(--sans); text-wrap: pretty; }
.page-updated { margin: 14px 0 0; font: 400 12.5px/1 var(--mono); color: var(--muted); }
.not-found-search { max-width: 520px; margin-top: 22px; }
.not-found-search input { padding-left: 16px; }

.prose {
  max-width: calc(68ch + 2 * var(--gutter));
  padding: clamp(8px, 2cqi, 20px) var(--gutter) clamp(36px, 5cqi, 64px);
  font: 400 16px/1.7 var(--sans);
}
.prose h2 {
  margin: clamp(26px, 3.4cqi, 38px) 0 0;
  font: 600 clamp(19px, 2cqi, 22px)/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink);
}
.prose p, .prose ul, .prose dl { margin: 10px 0 0; text-wrap: pretty; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--ink); font-weight: 600; }
.label-list dt { margin-top: 16px; }
.label-list dd { margin: 8px 0 0; }
.family-list { list-style: none; padding-left: 0 !important; }
.family-list li { padding-left: 24px; text-indent: -24px; }
.swatch {
  display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
  background: linear-gradient(158deg, var(--from), var(--to)); border: 1px solid rgba(0, 0, 0, .08);
}
.prose-next { margin-top: 28px !important; font-weight: 600; }
.prose-next a, .page-head .prose-next a { display: inline-block; padding: 8px 0; }

/* ---------- Clickable perfume cards ---------- */

.perfume-card { position: relative; }
.card-link { color: inherit; text-decoration: none; }
/* z-index lifts the overlay above the photo well, which is its own stacking context and comes later in the source. */
.card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { outline: none; }
.perfume-card:has(.card-link:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.perfume-card:hover { border-color: #b9c4bf; }
.perfume-card:hover .card-link { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Perfume pages ---------- */

.perfume-head {
  padding: clamp(20px, 3.5cqi, 40px) var(--gutter) clamp(24px, 4cqi, 44px);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.perfume-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 4cqi, 52px); align-items: center; margin-top: 16px;
}
.perfume-hero-visual { max-width: 460px; width: 100%; justify-self: center; }
.perfume-hero-visual .plate { aspect-ratio: 1; }
.perfume-hero-visual .note-chips { margin-top: 12px; }
.perfume-hero h1 {
  margin: 10px 0 0;
  font: 600 clamp(30px, 4.4cqi, 48px)/1.08 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.perfume-hero h1 span { display: block; margin-top: 6px; font: 400 clamp(17px, 1.8cqi, 21px)/1.3 var(--sans); letter-spacing: 0; color: var(--muted); }
.perfume-lede { margin: 16px 0 0; max-width: 52ch; font: 400 clamp(16px, 1.6cqi, 18px)/1.6 var(--sans); text-wrap: pretty; }
.perfume-lede .source-tag { display: inline-block; vertical-align: 2px; }

/* Visitor votes (public/votes.js). Bars are scaled to the most-voted choice in each group, as on other perfume sites. */
.ratings { padding: clamp(22px, 3.4cqi, 36px) var(--gutter) 0; }
.ratings h2 { margin: 0; font: 600 clamp(20px, 2.2cqi, 24px)/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.ratings-note { margin: 6px 0 0; max-width: 68ch; font: 400 14px/1.55 var(--sans); color: var(--muted); }
.ratings-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(12px, 2cqi, 20px); margin-top: 16px;
}
.vote-group { padding: 14px clamp(10px, 1.6cqi, 18px) 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.vote-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.vote-group[data-group="rating"] .vote-title svg { color: #c2413b; }
.vote-group[data-group="wear"] .vote-title svg { color: #b86e12; }
.vote-total { margin-left: auto; letter-spacing: .04em; text-transform: none; color: var(--muted); }
.vote-choices { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; }
.vote {
  display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 8px 2px 6px;
  font: inherit; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
@media (hover: hover) { .vote:hover { background: var(--paper); color: var(--ink); } }
.vote[aria-pressed="true"] { background: var(--green-tint); border-color: #b5d6ca; color: var(--ink); }
.vote svg { width: clamp(24px, 3cqi, 30px); height: auto; }
.vote-label { font: 400 13px/1.2 var(--sans); }
.vote[aria-pressed="true"] .vote-label { font-weight: 600; }
.vote-bar { position: relative; width: 100%; max-width: 70px; height: 6px; border-radius: 3px; background: #ebe7e0; overflow: hidden; }
.vote-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--share, 0) * 100%); border-radius: 3px; background: var(--c); transition: width .25s; }
.vote-count { font: 500 12px/1 var(--mono); color: var(--ink); }
.vote-group[data-empty] .vote-bar, .vote-group[data-empty] .vote-count { visibility: hidden; }
.vote-love { --c: #e0625c; }
.vote-like { --c: #de8fb3; }
.vote-ok { --c: #eba77e; }
.vote-dislike { --c: #8391cc; }
.vote-hate { --c: #8c929b; }
.vote-winter { --c: #72b9d8; }
.vote-spring { --c: #8cc56b; }
.vote-summer { --c: #ea7a5f; }
.vote-fall { --c: #e2a24a; }
.vote-day { --c: #f0a33a; }
.vote-night { --c: #6484c4; }
.ratings-status { margin: 8px 0 0; min-height: 1.5em; font: 400 13px/1.5 var(--sans); color: var(--muted); }
@container (max-width: 480px) {
  .vote-choices { gap: 1px; }
  .vote-label { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .vote-bar i { transition: none; } }

.facts { margin: 22px 0 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 13px/1.5 var(--sans); color: var(--muted); }
.facts dt .source-tag { display: inline-block; margin-top: 4px; }
.facts dd { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink); }

.prose h2 .source-tag, .prose h3 .source-tag { display: inline-block; margin-left: 6px; vertical-align: 3px; }
.prose h3 { margin: 20px 0 0; font: 600 16px/1.4 var(--sans); color: var(--ink); }
.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 12px; }
.verdict > div { padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); }
.verdict h3 { margin: 0; font-size: 14.5px; }
.verdict p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; }
.gift-note { margin: 20px 0 0; padding: 14px 16px; background: var(--green-tint); border-left: 3px solid var(--green); }
.gift-note p { margin: 0; font-size: 15px; line-height: 1.6; }
.prose-note { margin-top: 28px !important; font-size: 14px; color: var(--muted); }

.related { padding: clamp(28px, 4cqi, 48px) var(--gutter); background: var(--paper); border-top: 1px solid var(--line); }
.related h2 { margin: 0 0 14px; font: 600 clamp(20px, 2.2cqi, 24px)/1.3 var(--sans); color: var(--ink); }

/* ---------- Comparison pages ---------- */

.prose-wide { max-width: calc(80ch + 2 * var(--gutter)); }
.compare-plates-lg { margin-top: 18px; }
.compare-plates-lg figcaption a { color: var(--ink); }
/* Three-way comparison: three tall panels in a row; on phones, one wide panel per row. */
.compare-plates-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compare-plates-3 .compare-bottle { grid-template: "family" auto "photo" minmax(0, 1fr) "notes" auto / minmax(0, 1fr); aspect-ratio: 3 / 4; }
.compare-plates-3 .compare-bottle .bottle-notes { flex-flow: row wrap; gap: 2px 0; }
.compare-plates-3 .compare-bottle .bottle-notes li:not(:last-child)::after { content: ","; margin-right: .5em; }
.compare-plates-3 .plate.lg { aspect-ratio: 3 / 4; }
.prose .compare-plates-3 .plate { margin: 0; padding-left: 14px; }
.prose .compare-plates-3 .plate li + li { margin-top: 0; }
@container (max-width: 560px) {
  .compare-plates-3 { grid-template-columns: minmax(0, 1fr); }
  .compare-plates-3 .compare-bottle { grid-template: "family photo" auto "notes photo" minmax(0, 1fr) / minmax(0, 1fr) minmax(0, 1fr); aspect-ratio: 16 / 9; }
  .compare-plates-3 .compare-bottle .bottle-notes { flex-flow: column; gap: 7px; }
  .compare-plates-3 .compare-bottle .bottle-notes li:not(:last-child)::after { content: none; }
  .compare-plates-3 .plate.lg { aspect-ratio: 16 / 9; }
}
.table-scroll { margin-top: 12px; overflow-x: auto; }
.compare-table { width: 100%; min-width: 480px; border-collapse: collapse; font: 400 14.5px/1.5 var(--sans); }
.compare-table th, .compare-table td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare-table thead th { font: 600 13px/1.3 var(--sans); color: var(--ink); border-bottom: 2px solid var(--ink); }
.compare-table tbody th { width: 30%; font: 500 13.5px/1.5 var(--sans); color: var(--muted); }
.compare-table tbody th .source-tag { display: inline-block; margin-top: 4px; }
.compare-table td { color: var(--ink); }

/* ---------- Guides ---------- */

.toc { margin-top: 18px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); }
.toc .footer-heading { color: var(--muted); } /* the footer grey is too light on beige */
.toc ol { margin: 8px 0 0; padding-left: 20px; }
.toc li + li { margin-top: 2px; }
.toc a { display: inline-block; padding: 3px 0; }
.prose h2[id] { scroll-margin-top: 16px; }

/* ---------- Comparison index and photo comparisons ---------- */

.compare-index { padding: clamp(20px, 3cqi, 36px) var(--gutter) clamp(36px, 5cqi, 64px); }
.compare-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.6cqi, 18px); }
.compare-link {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 18px; background: #fff; border: 1px solid var(--line);
  color: var(--body); text-decoration: none;
}
.compare-link strong { font: 600 17px/1.35 var(--sans); color: var(--ink); }
.compare-link span:last-child { font: 400 14.5px/1.55 var(--sans); }
.compare-link:hover { border-color: #b9c4bf; }
.compare-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.compare-index-note { margin: 22px 0 0; font: 400 15px/1.6 var(--sans); }

/* ---------- Hub pages: perfumes, brands, notes, guides ---------- */

.hub { padding: clamp(24px, 3.5cqi, 40px) var(--gutter) 0; }
.hub:last-child { padding-bottom: clamp(36px, 5cqi, 64px); }
.hub-alt { margin-top: clamp(28px, 4cqi, 48px); padding-bottom: clamp(36px, 5cqi, 64px); background: var(--paper); border-top: 1px solid var(--line); }
.hub h2 { margin: 0 0 14px; font: 600 clamp(20px, 2.2cqi, 24px)/1.3 var(--sans); color: var(--ink); }
.hub .section-head { margin-bottom: 4px; }
.hub .section-head h2 { margin: 0; }
.hub-group + .hub-group { margin-top: clamp(22px, 3cqi, 34px); }
.hub-group h2.mono-label { margin: 0 0 12px; padding-top: 12px; border-top: 2px solid var(--ink); font: 500 11.5px/1 var(--mono); color: var(--muted); }
.hub-table { min-width: 640px; }
.hub-table td:first-child a { font-weight: 600; }
.hub-note { margin: 14px 0 0; font: 400 14px/1.6 var(--sans); color: var(--muted); }
.hub-note + .perfume-grid { margin-top: 16px; }
.hub-subhead { margin: 26px 0 12px; font: 600 16px/1.4 var(--sans); color: var(--ink); }
.hub-subhead:first-of-type { margin-top: 4px; }

/* Ranked shortlist on note pages (notes.json "picks"). */
.pick-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.pick { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; padding: 16px; background: #fff; border: 1px solid var(--line); }
.pick-photo { display: block; }
.pick-text { min-width: 0; }
.pick-text .mono-label { margin: 0; color: var(--green); }
.pick-rank { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; background: var(--green); color: #fff; }
.pick h3 { margin: 8px 0 0; font: 600 19px/1.3 var(--sans); }
.pick h3 a { color: var(--ink); text-decoration: none; }
.pick h3 a:hover { text-decoration: underline; }
.pick h3 span { font-weight: 400; color: var(--muted); }
.pick-text > p:not(.mono-label) { margin: 8px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.6; }
.pick-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 0 18px; margin: 12px 0 0; border-top: 1px solid var(--line); }
.pick-facts div { padding: 8px 0 0; }
.pick-facts dt { font: 500 12px/1.5 var(--sans); color: var(--muted); }
.pick-facts dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
@container (max-width: 539px) {
  .pick { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
  .pick-facts { grid-template-columns: 1fr; }
}
.page-lede .source-tag { display: inline-block; vertical-align: 2px; }

.browse { display: grid; gap: 14px; margin-top: 22px; }
.browse .mono-label { margin: 0 0 8px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* One chip style for link chips (.chips) and filter buttons (.family-chips): pill, 44px tall, optional count. */
.chips a, .family-chips button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none;
  font: 500 14px/1 var(--sans);
}
.chips a span, .family-chips button span { font: 500 11.5px/1 var(--mono); color: var(--muted); }
.chips a:hover, .family-chips button:hover { border-color: var(--green); }
.chips a:hover { text-decoration: underline; }

/* ---------- Expanded perfume pages ---------- */

.source-line { margin-top: 8px !important; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.source-line .source-tag { display: inline-block; margin-right: 4px; vertical-align: 1px; }
.source-line a { color: var(--muted); }
.pyramid, .wear { margin-top: 14px; }
.versions-table tbody th a { font-weight: 500; }
.versions-table tbody th span { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--sans); }
.versions-table tbody th { color: var(--ink); }
.versions-table tr.is-current th, .versions-table tr.is-current td { background: var(--green-tint); }
.versions-table tr.is-current th { padding-left: 10px; }
.versions-table tbody td:nth-child(2) { white-space: nowrap; }

/* On phones each version becomes a stacked row: name and year, then how it differs. */
@container (max-width: 599px) {
  .versions-table { min-width: 0; }
  .versions-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .versions-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .versions-table tr.is-current { padding: 10px; background: var(--green-tint); }
  .versions-table tbody th, .versions-table td { width: auto; padding: 0; border: 0; background: none !important; }
  .versions-table tbody td:last-child { grid-column: 1 / -1; margin-top: 4px; }
}

.alt-list { list-style: none; padding-left: 0 !important; border-top: 1px solid var(--line); }
.alt-list li { display: grid; gap: 4px; margin: 0 !important; padding: 12px 0; border-bottom: 1px solid var(--line); }
.alt-list strong { font-weight: 600; }
.alt-list span:last-child { font-size: 15px; line-height: 1.6; }
.alt-tag { justify-self: start; padding: 3px 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green); background: var(--green-tint); }

.sample-box {
  margin: 0 var(--gutter) clamp(36px, 5cqi, 64px); padding: 18px 20px 20px;
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--green);
  font: 400 14.5px/1.6 var(--sans);
}
.sample-box h2 { margin: 0; font: 600 18px/1.3 var(--sans); color: var(--ink); }
.sample-box h3 { margin: 16px 0 0; font: 600 14.5px/1.4 var(--sans); color: var(--ink); }
.sample-box dl { margin: 12px 0 0; border-top: 1px solid var(--line); }
.sample-box dl > div { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sample-box dt { font: 500 12.5px/1.5 var(--sans); color: var(--muted); }
.sample-box dd { margin: 2px 0 0; color: var(--ink); }
.sample-box p { margin: 12px 0 0; }
.sample-box ul { margin: 6px 0 0; padding-left: 18px; }
.sample-box li + li { margin-top: 6px; }

@container (min-width: 1040px) {
  .perfume-body {
    display: grid; grid-template-columns: minmax(0, 68ch) minmax(300px, 380px);
    column-gap: clamp(32px, 4cqi, 80px); align-items: start; padding: 0 var(--gutter);
  }
  .perfume-body > .prose { max-width: none; padding-inline: 0; }
  .sample-box { margin: clamp(26px, 3.4cqi, 38px) 0 clamp(36px, 5cqi, 64px); }
}
@media (min-height: 760px) {
  @container (min-width: 1040px) {
    .sample-box { position: sticky; top: 24px; }
  }
}

/* ---------- Guide visuals ---------- */

.format-grid {
  list-style: none; margin: 14px 0 0; padding: 0 !important;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px;
}
.format-card {
  --liquid: #b9d8cc;
  margin: 0 !important; padding: 16px; background: #fff; border: 1px solid var(--line); border-top: 3px solid #7fae9c;
}
.format-card.is-bottle { border-top-color: var(--green); }
.format-icon { display: block; width: 40px; height: 60px; color: var(--green); }
.format-card h3 { margin: 12px 0 0; font-size: 17px; }
.format-size { margin: 2px 0 0 !important; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.format-card dl { margin: 12px 0 0; border-top: 1px solid var(--line); }
.format-card dl > div { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.format-card dl > div:last-child { border-bottom: 0; }
.format-card dt { font: 500 12px/1.4 var(--sans); color: var(--muted); }
.format-card dd { margin: 1px 0 0; font: 400 14px/1.45 var(--sans); color: var(--ink); }

.ml-scale { margin: 14px 0 0; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); }
.ml-row { display: grid; grid-template-columns: minmax(0, 250px) 1fr; gap: 6px 16px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ml-row:first-child { padding-top: 0; }
.ml-label { font: 400 13px/1.45 var(--sans); color: var(--muted); }
.ml-label strong { display: block; font-size: 14px; }
.ml-squares { display: grid; grid-template-columns: repeat(25, 11px); gap: 3px; }
.ml-squares i { width: 11px; height: 11px; border-radius: 2px; background: #7fae9c; }
.ml-squares.is-bottle i { background: var(--green); }
.ml-scale figcaption { margin-top: 10px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
@container (max-width: 599px) {
  .ml-row { grid-template-columns: 1fr; }
  .ml-squares { grid-template-columns: repeat(20, 11px); }
}

.bar-chart { margin: 14px 0 0; padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.bar-chart-title { margin: 0 !important; font: 600 15px/1.4 var(--sans); color: var(--ink); }
.bar-group { margin: 14px 0 4px !important; font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bar-row { display: grid; grid-template-columns: minmax(0, 190px) 1fr 52px; gap: 12px; align-items: center; padding: 5px 0; }
.bar-label { font: 400 14px/1.35 var(--sans); color: var(--ink); }
.bar-track { position: relative; height: 18px; border-left: 1px solid #9aa39e; }
.bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: #7fae9c; border-radius: 0 4px 4px 0; }
.bar-row.is-bottle .bar { background: var(--green); }
.bar-row:hover .bar-label { text-decoration: underline; text-underline-offset: 3px; }
.bar-row:hover .bar { filter: brightness(.9); }
.bar-value { font: 500 13.5px/1 var(--mono); color: var(--ink); text-align: right; }
.bar-chart figcaption { margin-top: 12px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
@container (max-width: 599px) {
  .bar-row { grid-template-columns: 1fr 52px; row-gap: 4px; }
  .bar-label { grid-column: 1 / -1; }
}
.chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px !important; font-size: 13.5px; color: var(--muted); }
.key-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: #7fae9c; }
.key-swatch.is-bottle { margin-left: 10px; background: var(--green); }
.price-table { min-width: 560px; }
.price-table tbody th { width: 46%; color: var(--ink); }
.price-table td:nth-child(3), .price-table td:nth-child(4) { white-space: nowrap; font-family: var(--mono); font-size: 13.5px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin-top: 14px; }
.stat { padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid #7fae9c; }
.stat.is-bottle { border-top-color: var(--green); }
.stat p { margin: 0 !important; }
.stat-label { font: 500 13px/1.4 var(--sans); color: var(--muted); }
.stat-value { margin-top: 6px !important; font: 600 30px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.stat-note { margin-top: 6px !important; font: 400 13.5px/1.4 var(--sans); }

.path-steps {
  list-style: none; margin: 14px 0 0; padding: 0 !important; counter-reset: step;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px;
}
.path-steps li { position: relative; margin: 0 !important; padding: 14px 16px 16px; border: 1px solid var(--line); border-top: 2px solid var(--ink); counter-increment: step; }
.path-steps li::before { content: counter(step); position: absolute; right: 14px; top: 12px; font: 500 12px/1 var(--mono); color: var(--muted); }
.path-steps h3 { margin: 8px 0 0; font-size: 16px; }
.path-steps p:last-child { margin-top: 4px; font-size: 14.5px; line-height: 1.55; }

/* Where-to-apply body map */
.apply-map { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 12px 32px; align-items: start; margin: 14px 0 0; padding: 18px; background: var(--paper); border: 1px solid var(--line); }
.apply-map svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; }
.apply-points { list-style: none; margin: 0 !important; padding: 0 !important; counter-reset: pt; }
.apply-points li { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; margin: 0 !important; padding: 10px 0; border-bottom: 1px solid var(--line); counter-increment: pt; }
.apply-points li:first-child { padding-top: 0; }
.apply-points li:last-child { border-bottom: 0; }
.apply-points li::before {
  content: counter(pt); grid-row: span 2;
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff; font: 600 13px/1 var(--sans);
}
.apply-points li.is-optional::before { background: #fff; color: var(--green); border: 2px dashed var(--green); }
.apply-points strong { font-size: 15px; line-height: 1.4; }
.apply-points span { font-size: 14.5px; line-height: 1.55; }
.apply-map figcaption { grid-column: 1 / -1; font: 400 13px/1.5 var(--sans); color: var(--muted); }
@container (max-width: 699px) {
  .apply-map { grid-template-columns: 1fr; }
  .apply-map svg { max-width: 220px; }
}

/* Note timeline */
.fade-chart { margin: 14px 0 0; padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.fade-row { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 6px 14px; align-items: center; padding: 8px 0; }
.fade-label { font: 400 13px/1.4 var(--sans); color: var(--muted); }
.fade-label strong { display: block; font-size: 14.5px; color: var(--ink); }
.fade-track { position: relative; height: 22px; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--line-soft) calc(12.5% - 1px) 12.5%); }
.fade-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--from) / 8 * 100%); width: calc((var(--to) - var(--from)) / 8 * 100%); border-radius: 4px; background: linear-gradient(90deg, var(--c) 0 var(--solid, 55%), color-mix(in srgb, var(--c) 0%, transparent)); }
.fade-axis { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 14px; margin-top: 4px; }
.fade-axis ol { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; justify-content: space-between; font: 400 11.5px/1 var(--mono); color: var(--muted); }
.fade-axis li { margin: 0 !important; }
.fade-chart figcaption { margin-top: 12px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
@container (max-width: 599px) {
  .fade-row, .fade-axis { grid-template-columns: 1fr; }
  .fade-axis > span { display: none; }
}

.tip-grid { list-style: none; margin: 14px 0 0; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; counter-reset: tip; }
.tip-grid li { margin: 0 !important; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--line); counter-increment: tip; }
.tip-grid li::before { content: counter(tip, decimal-leading-zero); font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--green); }
.tip-grid h3 { margin: 6px 0 0; font-size: 16px; }
.tip-grid p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; }
.tip-grid .source-tag { display: inline-block; margin-top: 8px; }

/* ---------- About, team and author profiles ---------- */

.avatar { display: block; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--paper); }
.byline { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font: 400 14px/1.4 var(--sans); color: var(--ink); }
.byline .avatar { flex: none; width: 40px; height: 40px; }
.byline a { display: inline-block; padding: 4px 0; font-weight: 600; }
.byline-role { display: block; font-size: 12.5px; color: var(--muted); }
.page-head .byline + .page-updated { margin-top: 12px; }

.team { padding: clamp(8px, 2cqi, 20px) var(--gutter) 0; }
.team h2 {
  margin: clamp(10px, 1.6cqi, 18px) 0 14px;
  font: 600 clamp(19px, 2cqi, 22px)/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink);
}
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(12px, 1.6cqi, 18px); }
.team-card { position: relative; padding: 18px; background: #fff; border: 1px solid var(--line); }
.team-card .avatar { width: 96px; height: 96px; }
.team-card h3 { margin: 14px 0 0; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.team-card .mono-label { margin-top: 6px; }
.team-card p:last-child { margin: 8px 0 0; font: 400 14px/1.55 var(--sans); text-wrap: pretty; }
.team-card:has(.card-link:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.team-card:hover { border-color: #b9c4bf; }
.team-card:hover .card-link { text-decoration: underline; text-underline-offset: 3px; }

.author-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(18px, 2.4cqi, 28px); margin-top: 14px; }
.author-hero .avatar { width: clamp(88px, 12cqi, 128px); height: clamp(88px, 12cqi, 128px); }
.author-hero h1 { margin-top: 0; }
.author-hero .mono-label { margin-top: 10px; }
.team-card .mono-label { line-height: 1.5; }
.prose:has(+ .team) { padding-bottom: 0; }
.team + .prose { padding-top: 0; }

/* ---------- Gift guide ---------- */

.gift-picks { list-style: none; margin: 14px 0 0; padding: 0 !important; display: grid; gap: 12px; }
.gift-pick {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: start;
  margin: 0 !important; padding: 16px 18px; background: #fff; border: 1px solid var(--line);
}
.gift-photo { display: block; }
.gift-photo .perfume-photo, .gift-photo .plate { margin-top: 0; }
.gift-pick p.mono-label { margin: 0; font-size: 11.5px; line-height: 1.5; }
.prose .gift-pick h3 { margin: 4px 0 0; font-size: 18px; }
.gift-pick p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; }
.gift-pick .gift-fit { font-size: 14px; color: var(--muted); }
.gift-pick .gift-fit strong { color: var(--ink); }
.gift-tag { display: inline-block; margin-left: 8px; padding: 3px 6px; vertical-align: 2px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green); background: var(--green-tint); }
@container (max-width: 599px) {
  .gift-pick { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .prose .gift-pick h3 { font-size: 17px; }
  .gift-tag { display: block; width: fit-content; margin: 6px 0 2px; }
}

/* ---------- Contact form ---------- */

.contact-form { display: grid; gap: 18px; margin-top: 8px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form label { font: 600 14.5px/1.3 var(--sans); color: var(--ink); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid #c9c2b6; border-radius: 0; background: #fff;
  font: 400 16px/1.5 var(--sans); color: var(--ink); /* 16px or more, or iOS Safari zooms in on focus */
}
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 0; border-color: var(--green); box-shadow: 0 0 0 1px var(--green);
}
.contact-form .field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.prose .contact-note { margin: 0; font-size: 14px; color: var(--muted); }
.contact-send {
  justify-self: start; min-height: 52px; padding: 0 28px; border: 0; cursor: pointer;
  background: var(--green); color: #fff; font: 600 15px/1 var(--sans);
}
.contact-send:hover { background: #084535; }
.contact-send:disabled { opacity: .6; cursor: default; }
.prose .contact-status { margin: 0; font-size: 15px; }
.contact-status:empty { display: none; }
.contact-status.is-sent { padding: 12px 14px; background: var(--green-tint); color: var(--ink); }
.contact-status.is-error { padding: 12px 14px; background: #fbeceb; color: #8a2a24; }

/* ---------- Layering guide ---------- */

.layer-pair { max-width: 520px; }