/* Home screen. Extends entry.css — every colour here is one of its tokens,
   except accord hues, which arrive per-tile from data/accords.csv. */

.lede{margin-top:10px;font-size:15.5px;line-height:1.5;letter-spacing:-.01em;color:var(--color-ink2);max-width:54ch}

.search{position:relative;display:flex;align-items:center;margin-top:20px}
.search svg{position:absolute;left:15px;width:16px;height:16px;fill:var(--color-ink3);pointer-events:none}
.search input{width:100%;min-height:50px;padding:0 16px 0 41px;font:inherit;font-size:16.5px;
  letter-spacing:-.01em;color:var(--color-ink);background:var(--color-card);border:.5px solid var(--color-line);
  border-radius:var(--radius-base);appearance:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .18s,box-shadow .18s}
.search input::placeholder{color:var(--color-ink4)}
.search input:hover{border-color:rgba(0,0,0,.14)}
.search input:focus{outline:none;border-color:var(--color-accent);
  box-shadow:0 0 0 3.5px hsl(214 100% 52% / .14)}

.search-results[hidden]{display:none}
.search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;
  background:var(--color-card);border:.5px solid var(--color-line);border-radius:var(--radius-base);
  box-shadow:0 8px 24px rgba(0,0,0,.1);overflow:hidden}
.search-results a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:10px 14px;text-decoration:none;color:var(--color-ink);font-size:14.5px;letter-spacing:-.01em}
.search-results a+a{border-top:.5px solid var(--color-line)}
.search-results a:hover{background:var(--color-line)}
.search-results a i{font-style:normal;color:var(--color-ink3);font-size:12.5px;white-space:nowrap}
.search-none{padding:12px 14px;font-size:13px;color:var(--color-ink3)}

.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sugg a{font-size:13px;letter-spacing:-.01em;color:var(--color-ink2);text-decoration:none;
  padding:7px 12px;border-radius:var(--radius-pill);background:var(--color-card);
  border:.5px solid var(--color-line);transition:border-color .16s,color .16s}
.sugg a:hover{border-color:rgba(0,0,0,.16);color:var(--color-ink)}
.sugg em{font-style:normal;align-self:center;font-size:12px;color:var(--color-ink4);margin-right:2px}

.trust{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--color-ink3)}
.trust b{font-weight:560;color:var(--color-ink2)}

.fams{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fam{position:relative;overflow:hidden;isolation:isolate;display:block;padding:13px 14px;
  border-radius:var(--radius-sm);text-decoration:none;color:hsl(var(--h) calc(var(--s) * .72) 26%);
  /* --bg comes from build_home.tile_light(): a fixed tint made every swatch
     collapse to the same near-white, so a dark family reads as deep here. */
  background:hsl(var(--h) calc(var(--s) * .9) var(--bg, 92%));
  border:.5px solid hsl(var(--h) calc(var(--s) * .55) calc(var(--bg, 92%) - 14%) / .85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .16s ease,box-shadow .16s ease}
.fam::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,hsl(var(--h) var(--s) var(--l) / .3),
    hsl(var(--h) var(--s) var(--l) / .04) 62%)}
.fam b{display:block;font-family:"Fraunces","Fraunces Fallback",Georgia,serif;
  font-size:18px;font-weight:500;letter-spacing:-.005em}
.fam i{display:block;font-style:normal;margin-top:2px;font-size:12px;
  /* .45/32% keeps every accord hue >=5.2:1 on its own tile; .4/38% at .8 opacity failed AA */
  color:hsl(var(--h) calc(var(--s) * .45) 32%)}
.fam:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(0,0,0,.07)}
.fam:active{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}

.lines{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.line{display:flex;flex-direction:column;justify-content:center;
  min-height:76px;  /* fits a two-line name, so every row matches whether it wraps */
  padding:12px 14px;border-radius:var(--radius-sm);text-decoration:none;color:inherit;
  background:var(--color-card);border:.5px solid var(--color-line);transition:border-color .16s,transform .16s}
.line b{display:block;font-size:14.5px;font-weight:560;letter-spacing:-.01em}
.line i{display:block;font-style:normal;margin-top:2px;font-size:12px;color:var(--color-ink3)}
.line:hover{border-color:rgba(0,0,0,.16);transform:translateY(-1px)}
.line:active{transform:none}

.var a{transition:border-color .16s,transform .16s}
.var a:hover{border-color:rgba(0,0,0,.16);transform:translateY(-1px)}
.var .sq{display:block;background:linear-gradient(150deg,
  hsl(var(--h,220) calc(var(--s,10%) * .92) 84%),
  hsl(var(--h,220) calc(var(--s,10%) * .55) 95%))}

/* Policy links. build_home.py emits this nav only for pages that exist, so an
   empty footer here means none have been written yet, not that it is broken. */
.footnav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:26px;padding-top:16px;
  border-top:.5px solid var(--color-line)}
.footnav a{font-size:12.5px;color:var(--color-ink2);text-decoration:none}
.footnav a:hover{color:var(--color-accent);text-decoration:underline}

.stats{display:flex;gap:10px;margin-top:26px;padding:15px 16px;border-radius:var(--radius-base);
  background:var(--color-sunk3)}
.stats div{flex:1;min-width:0}
.stats b{display:block;font-size:19px;font-weight:620;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats i{display:block;font-style:normal;margin-top:1px;font-size:11.5px;line-height:1.3;color:var(--color-ink3)}

a:focus-visible,input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

@media (min-width:880px){
  .lede{font-size:18px;margin-top:13px}
  .search{margin-top:26px;max-width:560px}
  .search input{min-height:56px;font-size:18px}
  .fams{grid-template-columns:repeat(4,1fr);gap:10px}
  .lines{grid-template-columns:repeat(4,1fr);gap:10px}
  .stats{max-width:560px}
  .stats b{font-size:23px}
}

@media (prefers-reduced-motion:reduce){
  .fam,.line,.var a,.search input{transition:none}
  .fam:hover,.line:hover,.var a:hover{transform:none}
}

/* ── Hero carousel ─────────────────────────────────────────────────────────
   The finished entries on a native scroll-snap rail: touch swipe, trackpad and
   keyboard all come free, so there is no JS and no carousel library. Each slide
   carries its OWN --a1/--a2 from its own accords, so the glow behind the bottle
   changes as you swipe. Slides are narrower than the rail so the next one peeks
   -- that peek is the affordance, which is why there are no dots (dots would
   need JS to track the active slide).

   The slides are LIGHT, and that is a data constraint, not a taste call: only 47
   of 474 product images carry an alpha channel. The other 388 are JPEGs with a
   white background baked in, so on a dark slide they render as white rectangles.
   A near-white card lets every one of them blend, which is why this works for
   the whole catalogue and the old dark hero only ever worked for Yara Candy. */
.hero-cover{position:relative;margin:0 0 4px;padding:30px 0 20px;
  background:var(--color-bg);
  /* Fallback only. Every slide sets its own --a1/--a2 inline, so this is just
     what a slide would use if its accords were ever missing; 29 is saddle
     brown's hue. It used to be 346 -- a pink left over from when the hero was
     Yara Candy -- and it went unnoticed because the comment above it closed
     early and this whole rule was being skipped as invalid CSS. */
  --a1:29;--a2:44}
.hero-copy{padding:0 20px}

.hero-rail{display:flex;gap:12px;margin-top:22px;padding:0 22px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.hero-rail::-webkit-scrollbar{display:none}

.hero-slide{position:relative;isolation:isolate;overflow:hidden;
  flex:0 0 calc(100% - 68px);scroll-snap-align:center;
  display:flex;flex-direction:column;
  min-height:44vh;padding:16px 0 54px;   /* 54px reserves the caption bar */
  border-radius:var(--radius-base);
  /* Deepened 95/97% -> 88/92% (2026-09-19). At the old lightness the tint was
     there but invisible, so the rail read as four white cards. multiply carries
     the white matte down with the background, so this is as safe as near-white;
     checked against both hard cases -- the black Asad bottle and the pale glass
     Khamrah Waha. The saturation sits in tierra's muted register, but the HUE
     stays per-fragrance: this tint is information, the same accords the bars
     show, and one fixed palette colour here would make all four slides
     identical. Do not take it much below 88% -- that is where the matte on the
     lightest bottles starts to show as an edge. */
  background:linear-gradient(168deg,hsl(var(--a1) 52% 88%),
    hsl(var(--a2) 42% 92%) 58%,var(--color-sunk2) 94%);
  border:.5px solid hsl(var(--a1) 32% 80% / .8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}

.hero-over{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-ink3);text-align:center}
.hero-cover h1{font-family:"Fraunces","Fraunces Fallback",Georgia,serif;
  font-optical-sizing:auto;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-weight:400;font-size:clamp(31px,8.6vw,46px);line-height:1.06;
  letter-spacing:-.022em;text-align:center;margin-top:12px;
  color:var(--color-ink)}
/* The brand accent, not an accord hue: this is the masthead, it is not about
   any one fragrance. 6.40:1 on the page background. */
.hero-cover h1 em{font-style:italic;font-weight:400;color:var(--color-accent)}
.hero-sub{margin-top:13px;text-align:center;font-size:15px;line-height:1.55;
  color:var(--color-ink2);max-width:36ch;margin-left:auto;margin-right:auto}

/* multiply drops the white matte into whatever tint is behind it, so the JPEG
   mattes never show as boxes. No drop-shadow, for the same reason -- it would
   trace the matte's rectangle rather than the bottle. Every derivative shares
   one aspect ratio (see hero_derivatives), so a width is enough here: the
   height follows and all four bottles land the same size. */
.hero-shot{display:block;width:72%;height:auto;margin:auto auto 0;
  mix-blend-mode:multiply}

.hero-tag{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;align-items:center;gap:10px;padding:11px 15px 13px;
  font-size:12.5px;color:var(--color-ink2);text-decoration:none;
  border-top:.5px solid hsl(var(--a1) 30% 80% / .7);
  background:linear-gradient(to top,hsl(var(--a1) 34% 91% / .97),hsl(var(--a1) 34% 91% / .75))}
.hero-tag b{font-weight:600;color:var(--color-ink);white-space:nowrap}
.hero-tag span{display:none;color:var(--color-ink2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hero-tag i{font-style:normal;margin-left:auto;white-space:nowrap;font-weight:500;
  color:var(--color-accent)}

@media (min-width:880px){
  /* left edge matches .wrap's text edge so the hero lines up with the page below */
  .hero-cover{padding:56px 0 30px}
  .hero-copy{padding:0 max(40px,calc((100% - 1060px) / 2 + 18px))}
  .hero-cover .hero-over,.hero-cover h1,.hero-sub{text-align:left;margin-left:0}
  .hero-cover h1{font-size:clamp(50px,5.4vw,74px);margin-top:16px}
  .hero-sub{font-size:16.5px;max-width:38ch}
  /* Several slides fit at once, so they snap to the left edge rather than centre. */
  .hero-rail{gap:18px;margin-top:30px;
    padding:0 max(40px,calc((100% - 1060px) / 2 + 18px))}
  .hero-slide{flex:0 0 clamp(250px,29%,340px);scroll-snap-align:start;
    min-height:50vh;padding-top:20px}
  .hero-shot{width:80%}
  .hero-tag{padding:14px 18px 16px;font-size:13px}
  .hero-tag span{display:block}
}

@media (prefers-reduced-motion:reduce){ .hero-rail{scroll-behavior:auto} }