/* Fragrance field guide. Loaded only on the homepage; no script dependency. */
.fn-home-v4 { --home-muted: var(--fn-text-muted); --home-line: var(--fn-border); }
.fn-home-v4 a:focus-visible,.fn-home-v4 button:focus-visible { outline: 3px solid var(--fn-gold-text); outline-offset: 4px; }
.fn-home-v4 section[id] { scroll-margin-top: calc(var(--fn-nav-height) + 24px); }
.fn-home-section { padding-block: clamp(44px,5.2vw,72px); }

/* Hero: actual profiles, readable names, and a stable layout at every width. */
.fn-atlas-hero { padding-top: 40px; background: var(--fn-bg); border-bottom: 1px solid var(--home-line); }
.fn-atlas-hero__grid { display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:clamp(30px,4.5vw,64px); padding-bottom:36px; }
.fn-atlas-hero__eyebrow,.fn-home-heading__kicker { margin:0 0 13px; font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.15em; text-transform:uppercase; color:var(--fn-gold-text); }
.fn-atlas-hero__title { max-width:11ch; margin:0; color:var(--fn-text); font:600 clamp(44px,4.7vw,66px)/1.04 var(--fn-font-heading); letter-spacing:-.04em; }
.fn-atlas-hero__title span { display:block; color:var(--fn-gold-text); font-style:italic; }
.fn-atlas-hero__dek { max-width:46ch; margin:22px 0 25px; color:var(--home-muted); font-size:16px; line-height:1.7; }
.fn-atlas-search { display:flex; align-items:center; gap:10px; padding:6px 6px 6px 17px; background:var(--fn-surface); border:1px solid var(--fn-border-strong); border-radius:12px; box-shadow:0 5px 18px rgba(22,24,29,.04); }
.fn-atlas-search:focus-within { border-color:var(--fn-gold-text); box-shadow:var(--fn-focus-ring); }
.fn-atlas-search svg { flex-shrink:0; color:var(--fn-gold-text); }
.fn-atlas-search input { width:100%; min-width:0; padding:10px 0; background:transparent; border:0; color:var(--fn-text); font:400 16px var(--fn-font-body); }
.fn-atlas-search input:focus { outline:0; }
.fn-atlas-search input::placeholder { color:var(--home-muted); }
.fn-atlas-search button { flex-shrink:0; min-height:44px; padding:10px 19px; border:0; border-radius:8px; background:var(--fn-gold); color:#16130c; font:700 13px var(--fn-font-body); cursor:pointer; }
.fn-atlas-search button:hover { background:var(--fn-gold-light); }
.fn-atlas-hero__routes { display:flex; flex-wrap:wrap; gap:8px 23px; margin:12px 0 0; }
.fn-atlas-hero__routes a { display:inline-flex; align-items:center; gap:5px; min-height:34px; color:var(--fn-text); font-size:12px; font-weight:600; text-underline-offset:4px; text-decoration-color:var(--fn-gold-border); }
.fn-atlas-hero__routes a:hover { color:var(--fn-gold-text); }
.fn-atlas-hero__note { max-width:45ch; margin:13px 0 0; color:var(--home-muted); font-size:11px; line-height:1.6; }

.fn-bottle-stage { min-width:0; }
.fn-bottle-stage__label { display:flex; justify-content:space-between; gap:12px; margin:0 0 13px; color:var(--home-muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.fn-bottle-stage__label span:last-child { color:var(--fn-gold-text); }
.fn-bottle-stage__cards { display:grid; grid-template-columns:1.12fr 1fr; grid-template-rows:1fr 1fr; gap:12px; }
.fn-bottle-stage__card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--home-line); border-radius:14px; background:var(--fn-surface); color:var(--fn-text); text-decoration:none; transition:border-color .18s ease,box-shadow .18s ease; }
.fn-bottle-stage__card:hover { color:var(--fn-text); border-color:var(--fn-gold-text); box-shadow:var(--fn-shadow); }
.fn-bottle-stage__card--1 { grid-row:1 / 3; background:var(--fn-gold-dim); }
.fn-bottle-stage__image { height:104px; flex-shrink:0; background:#fff; overflow:hidden; }
.fn-bottle-stage__image img { display:block; width:100%; height:100%; object-fit:contain; }
.fn-bottle-stage__card--1 .fn-bottle-stage__image { height:250px; }
.fn-bottle-stage__card--1 .fn-bottle-stage__image img { object-fit:cover; }
.fn-bottle-stage__meta { display:flex; flex:1; flex-direction:column; gap:5px; padding:13px 15px; }
.fn-bottle-stage__meta small { color:var(--fn-gold-text); font-size:9px; letter-spacing:.07em; text-transform:uppercase; line-height:1.45; }
.fn-bottle-stage__meta h2 { margin:0; color:var(--fn-text); font:600 16px/1.22 var(--fn-font-heading); overflow-wrap:break-word; }
.fn-bottle-stage__card--1 h2 { font-size:24px; }
.fn-bottle-stage__accords { margin:0; color:var(--home-muted); font-size:10px; line-height:1.4; }
.fn-bottle-stage__card--1 .fn-bottle-stage__accords { font-size:12px; }
.fn-bottle-stage .fn-frag-card__price { margin-top:auto; padding-top:5px; color:var(--home-muted); font-size:11px; line-height:1.45; }
.fn-bottle-stage .fn-price-item strong { color:var(--fn-text); font-family:var(--fn-font-body); font-weight:600; }
.fn-bottle-stage__read { display:none; justify-content:space-between; padding-top:15px; margin-top:7px; border-top:1px solid var(--home-line); font-size:11px; font-weight:600; color:var(--fn-gold-text); }
.fn-bottle-stage__card--1 .fn-bottle-stage__read { display:flex; }

.fn-atlas-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--home-line); }
.fn-atlas-stats a { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 10px; min-height:78px; padding:14px 10px; color:inherit; text-decoration:none; border-right:1px solid var(--home-line); }
.fn-atlas-stats a:last-child { border-right:0; }
.fn-atlas-stats a:hover { background:var(--fn-gold-dim); }
.fn-atlas-stats strong { font:600 25px/1.1 var(--fn-font-heading); color:var(--fn-gold-text); font-variant-numeric:tabular-nums; }
.fn-atlas-stats span { color:var(--home-muted); font-size:11px; }

/* Shared section rhythm. */
.fn-home-heading { margin-bottom:25px; }
.fn-home-heading__kicker { margin-bottom:8px; }
.fn-home-heading h2,.fn-climate-story h2 { margin:0; color:var(--fn-text); font:550 clamp(26px,2.7vw,37px)/1.15 var(--fn-font-heading); letter-spacing:-.025em; text-wrap:balance; }
.fn-home-heading--split { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; }
.fn-home-heading--split > p { max-width:36ch; margin:0; color:var(--home-muted); font-size:13px; line-height:1.65; }
.fn-home-heading__description { margin:10px 0 0; color:var(--home-muted); font-size:13px; }
.fn-home-heading--center { text-align:center; }
.fn-home-text-link { flex-shrink:0; padding-block:8px; color:var(--fn-gold-text); font-size:12px; font-weight:650; text-decoration:none; }
.fn-home-text-link:hover { text-decoration:underline; text-underline-offset:4px; }

/* Each scent family uses a real ingredient illustration from the site library. */
.fn-accord-explorer { background:var(--fn-bg); }
.fn-accord-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; }
.fn-accord-tile { display:flex; min-width:0; flex-direction:column; align-items:center; padding:15px 6px 13px; border:1px solid var(--home-line); border-radius:12px; color:inherit; text-align:center; text-decoration:none; background:var(--fn-surface); transition:border-color .18s ease,background-color .18s ease; }
.fn-accord-tile:hover { color:inherit; border-color:var(--fn-gold-text); background:var(--fn-gold-dim); }
.fn-accord-tile__art { display:grid; place-items:center; width:84px; height:84px; max-width:100%; background:#fff; border-radius:50%; overflow:hidden; }
.fn-accord-tile__art img { width:100%; height:100%; object-fit:contain; }
.fn-accord-tile__art > span { color:var(--fn-gold-text); font:36px var(--fn-font-heading); }
.fn-accord-tile__name { margin-top:6px; color:var(--fn-text); font:600 15px/1.3 var(--fn-font-heading); }
.fn-accord-tile__description { margin-top:4px; color:var(--home-muted); font-size:10px; line-height:1.4; }
.fn-accord-tile__count { margin-top:8px; color:var(--fn-gold-text); font-size:10px; }
.fn-home-note-link { display:flex; justify-content:center; flex-wrap:wrap; gap:3px 7px; margin:21px 0 0; color:var(--home-muted); font-size:12px; }
.fn-home-note-link a { color:var(--fn-gold-text); font-weight:600; text-decoration:none; }
.fn-home-note-link a:hover { text-decoration:underline; }

/* Compact catalogue cards retain the site's compare controls and currency data. */
.fn-home-edit { background:var(--fn-surface-2); border-block:1px solid var(--home-line); }
.fn-home-edit__grid { gap:18px; }
.fn-home-edit .fn-frag-card { border-radius:12px; }
.fn-home-edit .fn-frag-card__image { min-height:0; height:182px; aspect-ratio:auto; background:#fff; }
.fn-home-edit .fn-frag-card__image img { object-fit:cover; }
.fn-home-edit .fn-frag-card__body { padding:17px; gap:10px; }
.fn-home-edit .fn-frag-card__brand { font-size:10px; letter-spacing:.08em; }
.fn-home-edit .fn-frag-card__title { min-height:40px; font-size:16px; }
.fn-home-edit .fn-frag-card__meta { gap:5px; }
.fn-home-edit .fn-badge { font-size:9px; }
.fn-home-edit .fn-note-pills { margin-top:0; gap:5px; }
.fn-home-edit .fn-note-pill { padding:4px 8px; font-size:10px; }
.fn-home-edit .fn-frag-card__price { margin-top:2px; font-size:12px; }
.fn-home-edit .fn-frag-card__compare-toggle { min-width:36px; min-height:36px; }
.fn-home-edit .fn-frag-card__climate-badge { color:var(--home-muted); }

/* Four real tools, with copy that describes their existing behavior. */
.fn-home-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.fn-home-tool { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:22px; border:1px solid var(--home-line); border-radius:12px; color:inherit; text-decoration:none; background:var(--fn-surface); transition:border-color .18s ease,background-color .18s ease; }
.fn-home-tool:hover { color:inherit; background:var(--fn-gold-dim); border-color:var(--fn-gold-text); }
.fn-home-tool__icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; border-radius:50%; background:var(--fn-gold-dim); color:var(--fn-gold-text); }
.fn-home-tool small { color:var(--fn-gold-text); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.fn-home-tool h3 { margin:8px 0 10px; color:var(--fn-text); font:600 20px/1.2 var(--fn-font-heading); }
.fn-home-tool p { margin:0 0 18px; color:var(--home-muted); font-size:12px; line-height:1.6; }
.fn-home-tool__cta { margin-top:auto; color:var(--fn-text); font-size:11px; font-weight:650; }
.fn-home-tool__cta span { color:var(--fn-gold-text); margin-left:4px; }

.fn-climate-story { background:var(--fn-gold-dim); border-block:1px solid var(--home-line); }
.fn-climate-story__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,7vw,90px); align-items:center; }
.fn-climate-story__copy > p:not(.fn-home-heading__kicker) { max-width:45ch; margin:17px 0; color:var(--home-muted); font-size:14px; line-height:1.7; }
.fn-climate-story__fact { display:flex; align-items:center; gap:14px; margin:22px 0; padding-left:15px; border-left:2px solid var(--fn-gold); }
.fn-climate-story__fact strong { font:600 32px/1.1 var(--fn-font-heading); color:var(--fn-gold-text); }
.fn-climate-story__fact span { max-width:19ch; color:var(--home-muted); font-size:12px; line-height:1.45; }
.fn-home-pill-link { display:inline-flex; min-height:44px; align-items:center; gap:16px; padding:9px 17px; border:1px solid var(--fn-border-strong); border-radius:8px; color:var(--fn-text); text-decoration:none; font-size:12px; font-weight:650; }
.fn-home-pill-link:hover { color:var(--fn-gold-text); border-color:var(--fn-gold-text); }
.fn-climate-panel { min-width:0; padding:24px; border:1px solid var(--home-line); border-radius:14px; background:var(--fn-surface); }
.fn-climate-panel__head { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:baseline; gap:8px; padding-bottom:15px; border-bottom:1px solid var(--home-line); }
.fn-climate-panel__head span { color:var(--fn-text); font:600 18px/1.25 var(--fn-font-heading); }
.fn-climate-panel__head small { color:var(--home-muted); font-size:10px; }
.fn-climate-panel ul { margin:14px 0; padding:0; list-style:none; }
.fn-climate-panel li { display:grid; grid-template-columns:20px 100px minmax(0,1fr) 36px; align-items:center; gap:8px; padding:11px 0; }
.fn-climate-panel__icon { display:flex; color:var(--fn-gold-text); }
.fn-climate-panel__icon svg { width:18px; height:18px; }
.fn-climate-panel__label { color:var(--home-muted); font-size:12px; }
.fn-climate-panel__bar { height:6px; background:var(--fn-surface-3); border-radius:6px; overflow:hidden; }
.fn-climate-panel__bar i { display:block; width:var(--fn-pct); height:100%; background:var(--fn-gold); border-radius:inherit; }
.fn-climate-panel li strong { font-size:12px; text-align:right; font-variant-numeric:tabular-nums; color:var(--fn-text); }
.fn-climate-panel__method { display:block; padding-top:13px; border-top:1px solid var(--home-line); color:var(--fn-gold-text); font-size:11px; text-decoration:none; }
.fn-climate-panel__method:hover { text-decoration:underline; }

.fn-house-gallery__list { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.fn-house-gallery__list a { display:inline-flex; align-items:center; min-height:44px; padding:9px 17px; border:1px solid var(--home-line); border-radius:6px; color:var(--home-muted); font:500 14px/1.4 var(--fn-font-heading); text-decoration:none; }
.fn-house-gallery__list a:hover { color:var(--fn-gold-text); border-color:var(--fn-gold-text); }
.fn-house-gallery__method { margin:24px 0 0; text-align:center; color:var(--home-muted); font-size:12px; }
.fn-house-gallery__method a { display:inline-block; padding:6px; color:var(--fn-gold-text); text-decoration:none; }

:root[data-theme="dark"] .fn-home-v4 { --home-muted:#bdb3a2; }
:root[data-theme="dark"] .fn-bottle-stage__image { background:#f7f7f7; }

@media (max-width:1100px) {
  .fn-atlas-hero__grid { gap:28px; }
  .fn-bottle-stage__meta { padding:12px; }
  .fn-bottle-stage__card--1 .fn-bottle-stage__image { height:225px; }
  .fn-atlas-stats a { flex-direction:column; gap:6px; }
  .fn-accord-grid { gap:7px; }
  .fn-accord-tile__art { width:70px; height:70px; }
  .fn-accord-tile__description { display:none; }
  .fn-home-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .fn-atlas-hero { padding-top:30px; }
  .fn-atlas-hero__grid { grid-template-columns:1fr; gap:32px; }
  .fn-atlas-hero__copy { max-width:660px; }
  .fn-atlas-hero__title { max-width:18ch; font-size:56px; }
  .fn-atlas-hero__dek { max-width:56ch; margin-block:16px 22px; }
  .fn-bottle-stage__cards { grid-template-columns:1.15fr 1fr 1fr; grid-template-rows:auto; }
  .fn-bottle-stage__card--1 { grid-row:auto; }
  .fn-bottle-stage__image,.fn-bottle-stage__card--1 .fn-bottle-stage__image { height:150px; }
  .fn-bottle-stage__card--1 h2 { font-size:20px; }
  .fn-bottle-stage__card--1 .fn-bottle-stage__read { display:none; }
  .fn-home-heading--split { gap:18px; }
  .fn-accord-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .fn-accord-tile__description { display:block; }
  .fn-home-edit__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fn-climate-story__grid { gap:30px; }
}
@media (max-width:700px) {
  .fn-home-heading--split { align-items:flex-start; flex-direction:column; gap:12px; }
  .fn-home-heading--split > p { max-width:52ch; }
  .fn-climate-story__grid { grid-template-columns:1fr; }
  .fn-atlas-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fn-atlas-stats a { flex-direction:row; justify-content:flex-start; padding:14px; min-height:65px; }
  .fn-atlas-stats a:nth-child(2) { border-right:0; }
  .fn-atlas-stats a:nth-child(-n+2) { border-bottom:1px solid var(--home-line); }
}
@media (max-width:600px) {
  .fn-atlas-hero__title { font-size:clamp(39px,10.7vw,55px); line-height:1.06; }
  .fn-atlas-hero__dek { font-size:14px; line-height:1.65; }
  .fn-atlas-hero__eyebrow { font-size:10px; }
  .fn-atlas-search { gap:7px; padding-left:12px; }
  .fn-atlas-search button { padding-inline:13px; }
  .fn-atlas-search button span { display:none; }
  .fn-atlas-hero__routes { gap:7px 20px; }
  .fn-atlas-hero__note { margin-top:9px; }
  .fn-atlas-hero__grid { gap:26px; padding-bottom:25px; }
  .fn-bottle-stage__cards { grid-template-columns:1fr; gap:9px; }
  .fn-bottle-stage__card { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:stretch; }
  .fn-bottle-stage__card--1 { grid-template-columns:114px minmax(0,1fr); }
  .fn-bottle-stage__image,.fn-bottle-stage__card--1 .fn-bottle-stage__image { height:100%; min-height:94px; }
  .fn-bottle-stage__card--1 .fn-bottle-stage__image { min-height:115px; }
  .fn-bottle-stage__image img { object-fit:cover; }
  .fn-bottle-stage__meta { gap:3px; padding:12px 14px; }
  .fn-bottle-stage__meta h2,.fn-bottle-stage__card--1 h2 { font-size:17px; }
  .fn-bottle-stage__card--1 .fn-bottle-stage__accords { font-size:10px; }
  .fn-bottle-stage .fn-frag-card__price { padding-top:3px; }
  .fn-atlas-stats strong { font-size:22px; }
  .fn-atlas-stats span { font-size:10px; }
  .fn-accord-grid { gap:8px; }
  .fn-accord-tile { padding:10px 3px; border-radius:9px; }
  .fn-accord-tile__art { width:58px; height:58px; }
  .fn-accord-tile__name { font-size:12px; min-height:31px; display:flex; align-items:center; }
  .fn-accord-tile__description { display:none; }
  .fn-accord-tile__count { margin-top:3px; font-size:9px; }
  .fn-home-edit__grid { gap:10px; }
  .fn-home-edit .fn-frag-card__image { height:128px; }
  .fn-home-edit .fn-frag-card__body { padding:13px 11px; gap:9px; }
  .fn-home-edit .fn-frag-card__brand { font-size:9px; letter-spacing:.03em; }
  .fn-home-edit .fn-frag-card__title { font-size:15px; }
  .fn-home-edit .fn-note-pill { padding:3px 6px; font-size:9px; }
  .fn-home-edit .fn-frag-card__meters { display:none; }
  .fn-home-edit .fn-frag-card__price { font-size:11px; }
  .fn-home-tools { gap:10px; }
  .fn-home-tool { padding:17px 14px; }
  .fn-home-tool__icon { margin-bottom:13px; width:36px; height:36px; }
  .fn-home-tool small { font-size:9px; letter-spacing:.02em; }
  .fn-home-tool h3 { font-size:18px; }
  .fn-home-tool p { font-size:11px; }
  .fn-home-tool__cta { font-size:10px; }
  .fn-climate-panel { padding:20px 16px; }
  .fn-climate-panel li { grid-template-columns:18px 94px minmax(0,1fr) 32px; gap:6px; }
  .fn-house-gallery__list { gap:7px; }
  .fn-house-gallery__list a { padding:7px 12px; font-size:13px; }
}
@media (max-width:360px) {
  .fn-atlas-stats a { flex-direction:column; align-items:flex-start; gap:3px; }
  .fn-atlas-search svg { display:none; }
  .fn-home-tools { grid-template-columns:1fr; }
  .fn-accord-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .fn-accord-tile__count { font-size:8px; }
  .fn-bottle-stage__card,.fn-bottle-stage__card--1 { grid-template-columns:85px minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .fn-home-v4 *, .fn-home-v4 *::before,.fn-home-v4 *::after { animation:none!important; transition:none!important; }
}
