/* ---------- discover your fragrance ----------
   The Discover Your Fragrance page: the four fragrances as cards,
   each on a ground in its own colours, then three quick questions that
   suggest one of them. It reuses the tokens in index.css -- the same type,
   brass accent and hairlines -- and only the cards change colour, by
   re-setting those tokens for each fragrance. */
.discover{
  padding-block:clamp(24px,4vw,44px);
  border-top:1px solid var(--line);
}
.discover > h1{margin:0 0 8px;font-size:clamp(2.2rem,6vw,3rem);}
/* The menu marks this page as the one being viewed. */
.nav-row a[aria-current="page"]{color:var(--gold);}
.discover > p{margin:0 0 28px;color:var(--ink-dim);max-width:56ch;}
.text-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--gold-soft);
  padding-bottom:1px;
  transition:color .2s ease, border-color .2s ease;
}
.text-link:hover{color:var(--gold);border-color:var(--gold);}

/* ---------- collection: four atmospheres at a glance ---------- */
.collection-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.collection-grid .collection-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:18px 18px 20px;
  margin:0;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--world-bg, var(--surface));
  color:var(--ink);
  overflow:hidden;
}
.collection-grid .collection-card + .collection-card{margin-top:0;}
.collection-card-media{
  display:block;
  width:100%;
  height:170px;
  margin-bottom:10px;
}
.collection-card-media img{
  display:block;width:100%;height:100%;
  object-fit:contain;
  
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.collection-card:hover .collection-card-media img{transform:translateY(-4px);}
.collection-grid .collection-card-name{font-size:1.5rem;line-height:1.1;}
.collection-grid .collection-card-meta{flex:none;min-width:0;font-size:0.82rem;}
.collection-card-feel{font-size:0.78rem;letter-spacing:0.08em;color:var(--gold);}
.collection-grid .collection-card-link{margin-top:10px;}
.collection-card-new{
  position:absolute;top:12px;right:12px;
  font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-soft);border-radius:20px;padding:3px 9px;
}
@media (max-width:860px){
  .collection-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:640px){
  .collection-grid{gap:10px;}
  .collection-grid .collection-card{padding:14px 14px 16px;}
  .collection-card-media{height:140px;}
  .collection-grid .collection-card-name{font-size:1.3rem;}
}

/* Each fragrance's colour, used only as a faint wash.
   The cards sit on the site's own paper and keep its ink, brass and
   hairlines, so they read as part of the page rather than as photographs
   pasted onto it: calm, light and Scandinavian. Each fragrance contributes
   one tint, taken from its bottle, mixed at low strength into the page's
   surface colour -- so it follows the light and dark themes on its own. */
[data-scent]{
  --world-bg:
    radial-gradient(ellipse 80% 62% at 50% 34%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--tint) 7%, var(--paper)), var(--paper));
}
[data-scent="kavach"]{--tint:#a0603a;}       /* cognac glass */
[data-scent="tantra-aura"]{--tint:#d98fa4;}  /* frosted rose */
[data-scent="roohani"]{--tint:#c9b896;}      /* ivory, warm linen */
[data-scent="agni-fiero"]{--tint:#c8683a;}   /* a low ember */
/* Agni Fiero's bottle is black, so its ember needs a little more to show. */
.collection-card[data-scent="agni-fiero"]{
  --world-bg:
    radial-gradient(ellipse 80% 62% at 50% 34%, color-mix(in srgb, var(--tint) 20%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--tint) 8%, var(--paper)), var(--paper));
}
/* Older browsers without color-mix get the plain surface. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  [data-scent]{--world-bg:var(--surface);}
}
.collection-grid .collection-card{border-color:var(--line);}
.collection-grid .collection-card:hover{border-color:var(--gold-soft);}
/* A softer shadow on the light page: grounded, not floating. */
.collection-card-media img,
.finder-card-media img{filter:drop-shadow(0 10px 12px rgba(40,28,14,.16));}

/* ---------- find your fragrance ---------- */
.finder{margin-top:clamp(40px,6vw,64px);}
.finder h3.finder-title{margin:0 0 8px;font-family:'Instrument Serif', Georgia, serif;font-weight:400;font-size:1.7rem;}
.finder > p{margin:0 0 26px;color:var(--ink-dim);max-width:56ch;}
.finder-form{display:grid;gap:22px;}
.finder fieldset{border:0;margin:0;padding:0;min-width:0;}
.finder legend{
  padding:0;
  margin-bottom:12px;
  font-size:0.74rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.finder legend .finder-step{color:var(--ink-dim);margin-right:8px;}
.finder-options{display:flex;flex-wrap:wrap;gap:10px;}
.finder-option{position:relative;}
.finder-option input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
.finder-option span{
  display:block;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:0.95rem;
  line-height:1.3;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.finder-option small{display:block;margin-top:2px;font-size:0.78rem;color:var(--ink-dim);}
.finder-option:hover span{border-color:var(--gold-soft);}
.finder-option input:checked + span{border-color:var(--gold);background:var(--gold-soft);}
.finder-option input:focus-visible + span{outline:1px solid var(--gold);outline-offset:3px;}
.finder-submit{justify-self:start;margin-top:4px;cursor:pointer;font:inherit;}
.finder.is-enhanced .finder-submit{display:none;}
.finder-result{margin-top:30px;}
.finder-result[hidden]{display:none;}
.finder-card{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:clamp(18px,4vw,40px);
  align-items:center;
  padding:clamp(18px,3vw,32px);
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--world-bg);
  color:var(--ink);
}
.finder-card-media{height:230px;}
.finder-card-media img{display:block;width:100%;height:100%;object-fit:contain;}
.finder-card .eyebrow{color:var(--gold);}
.finder-card h4{margin:0;font-family:'Instrument Serif', Georgia, serif;font-weight:400;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;}
.finder-why{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;}
.finder-why li{position:relative;padding-left:22px;color:var(--ink-dim);line-height:1.55;font-size:0.95rem;}
.finder-why li::before{
  content:"";position:absolute;left:0;top:0.55em;
  width:8px;height:8px;border-radius:50%;
  background:var(--gold);
}
.finder-why li.is-off::before{background:transparent;border:1px solid var(--ink-dim);}
.finder-why strong{color:var(--ink);font-weight:500;}
.finder-meta{margin:16px 0 0;color:var(--ink-dim);font-size:0.92rem;font-variant-numeric:tabular-nums;}
.finder-actions{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;}
.finder-actions .cta{margin-top:0;}
.finder-alt{margin:18px 0 0;font-size:0.9rem;color:var(--ink-dim);}
.finder-alt a{color:var(--ink);}
@media (max-width:640px){
  .finder-actions .text-link{align-self:center;}
  .finder-options{display:grid;grid-template-columns:1fr 1fr;}
  .finder-options-3{grid-template-columns:1fr;}
  .finder-card{grid-template-columns:1fr;text-align:center;}
  .finder-card-media{height:200px;}
  .finder-why{text-align:left;}
  .finder-actions{flex-direction:column;align-items:stretch;}
  .finder-actions .cta{text-align:center;}
}