/* ==========================================================================
   MOLIKO HOME — site styles
   One stylesheet, no build step. Change brand values in :root only.
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Ships working on system serifs. To match the packaging exactly, download
   Cormorant Garamond (400/600) + Jost (300/400/500) as .woff2 into /fonts
   and uncomment the @font-face blocks below. See README.md step 3.
   -------------------------------------------------------------------------- */

/*
@font-face { font-family:"Cormorant Garamond"; src:url("../fonts/cormorant-garamond-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("../fonts/cormorant-garamond-600.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("../fonts/jost-300.woff2") format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("../fonts/jost-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
*/

:root {
  /* Ground + ink ------------------------------------------------------- */
  --cream:        #FAF5EE;   /* page background */
  --cream-deep:   #F0E4D2;   /* section bands, hero wash */
  --cream-shell:  #F5EBDF;   /* cards */
  --ink:          #4A3628;   /* body text — warm chocolate */
  --ink-strong:   #33241A;   /* headings */
  --ink-muted:    #8A7461;   /* captions, meta */
  --rule:         #E2D2BC;   /* hairlines */
  --brass:        #B08D57;   /* accent: diamonds, rules, links */
  --brass-deep:   #8E6F41;   /* accent on hover / small text (contrast) */

  /* Scent palette — sampled from the label in each product photo, not
     eyeballed. Used as the accent rule on each range card, so these are
     decorative only and carry no contrast floor. --------------------------- */
  --vanilla-noir:    #8C5E5D;
  --berry-blossom:   #C06085;
  --lime-leaf:       #92987E;
  --golden-bloom:    #816281;
  --creamed-vanilla: #D4B59F;

  /* Type ----------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem,    0.96rem + 0.2vw,  1.09rem);
  --step-1:  clamp(1.2rem,  1.1rem  + 0.5vw,  1.5rem);
  --step-2:  clamp(1.5rem,  1.3rem  + 1vw,    2.1rem);
  --step-3:  clamp(1.9rem,  1.5rem  + 2vw,    3rem);
  --step-4:  clamp(2.4rem,  1.6rem  + 3.6vw,  4.6rem);

  /* Layout --------------------------------------------------------------- */
  --wrap:    72rem;
  --wrap-narrow: 44rem;
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --radius:  2px;   /* the brand is square-ish and editorial — keep it tight */
}

/* --- Reset-ish ------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .6em;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brass-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-strong); }

:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-strong); color: var(--cream);
  padding: .75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; color: var(--cream); }

/* --- Layout helpers ------------------------------------------------------- */

.wrap        { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow{ max-width: var(--wrap-narrow); }
.section     { padding-block: var(--section); }
.section--band { background: var(--cream-deep); }
.center      { text-align: center; }

/* Eyebrow: small letterspaced label above a heading */
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 1rem;
}

/* The diamond divider from the packaging */
.divider {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 1.5rem auto 2.5rem; max-width: 22rem; color: var(--brass);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .5;
}
.divider span { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }

.lede {
  font-size: var(--step-1);
  font-family: var(--font-display);
  line-height: 1.5;
  color: var(--ink);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.25rem;
  border: 1px solid var(--ink-strong);
  background: var(--ink-strong);
  color: var(--cream);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: transparent; color: var(--ink-strong); }

.btn--ghost { background: transparent; color: var(--ink-strong); border-color: var(--brass); }
.btn--ghost:hover { background: var(--ink-strong); color: var(--cream); border-color: var(--ink-strong); }

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-strong);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--brass-deep); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }
.nav a {
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--brass-deep); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .55rem .7rem; cursor: pointer; color: var(--ink-strong);
}

@media (max-width: 46rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.25rem;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .75rem 0; width: 100%; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(4rem, 11vw, 8.5rem);
  background: var(--cream-deep);
  overflow: hidden;
}

/* The five candles sit behind the wordmark as a texture, not as a subject.
   The blur is doing real work: unblurred, the label lettering in the photo
   lands directly behind the lede and two sets of words fight each other. The
   slight scale hides the transparent fringe blur leaves at the edges. */
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(4px) saturate(.92);
  transform: scale(1.05);
}

/* One radial wash, not two stacked ones — alpha compounds, and a second
   full-bleed layer drags the edges opaque however low you set it. Centre .95
   keeps the h1 crisp; .55 at the edge leaves the candles just readable. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(65% 70% at 50% 45%,
    rgba(250,245,238,.95) 0%,
    rgba(250,245,238,.88) 35%,
    rgba(250,245,238,.62) 75%,
    rgba(250,245,238,.55) 100%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; }

.hero h1 {
  font-size: var(--step-4);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .35em;
}
.hero__sub {
  font-size: var(--step-1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-family: var(--font-body);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

/* 450g | 80hr pill, straight off the packaging */
.spec-pill {
  display: inline-flex; align-items: center; gap: 1rem;
  border: 1px solid var(--brass);
  border-radius: 999px;
  padding: .6rem 2rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink-strong);
  margin-bottom: 2rem;
}
.spec-pill span[aria-hidden] { color: var(--brass); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* --- Pillars (the five icons) --------------------------------------------- */

/* Flex + centring rather than auto-fit grid: six items at a 9rem minimum lay out
   5-across at desktop and orphan the sixth hard left. Wrapping a centred flex row
   puts any remainder in the middle, which reads as deliberate at every width. */
.pillars {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.pillars li {
  flex: 0 1 8.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}

.pillar__icon {
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: var(--brass-deep);
}
.pillar__icon svg { width: 1.6rem; height: 1.6rem; }

.pillar__label {
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
}

/* --- The range ------------------------------------------------------------ */

/* Flex rather than grid: there are five cards, and auto-fit orphans the fifth
   on its own row. Wrapping + centring gives 3 then 2, which reads as intended. */
.range {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
}
/* max-width 20rem, not 22: at 22 the three-card row lands at 330px and the
   two-card row hits the cap at 352px, so the two rows don't line up. 20rem is
   the largest value both rows reach, which makes every card the same width. */
.range > li { flex: 1 1 17rem; max-width: 20rem; }

.scent {
  background: var(--cream-shell);
  border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.scent__media { display: block; background: var(--cream-deep); }
.scent__media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* The label colour survives as a rule under the photo — non-text, so the
   WCAG floor that constrained the old colour-block card no longer applies. */
.scent__body {
  padding: 1.4rem 1.5rem 1.75rem;
  border-top: 3px solid var(--scent, var(--creamed-vanilla));
  display: flex; flex-direction: column; flex: 1;
}

.scent__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}
/* the italic second word, mirroring the script on the labels */
.scent__name .script {
  display: block;
  font-style: italic;
  text-transform: none;
  letter-spacing: .01em;
  font-size: .82em;
  margin-top: .12em;
}

.scent__tagline {
  margin: .9rem 0 0;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-deep);
}
.scent__desc {
  margin: .9rem 0 0;
  font-size: var(--step--1);
  line-height: 1.65;
}

/* Fragrance notes as a definition list: it is genuinely term/definition data,
   and the structure is what an answer engine lifts cleanly. */
.notes {
  margin: 1.25rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}
.notes dt {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-deep);
}
.notes dd { margin: .15rem 0 0; color: var(--ink); }
.notes dd + dt { margin-top: .7rem; }

/* Product safety, not decoration — see the Lime & Leaf card. */
.scent__care {
  margin: 1.25rem 0 0;
  padding: .8rem .9rem;
  background: var(--cream);
  border-left: 3px solid var(--brass);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink);
}

/* --- Story ---------------------------------------------------------------- */

.story { display: grid; gap: clamp(2rem, 6vw, 4rem); align-items: center; }
@media (min-width: 52rem) { .story { grid-template-columns: 1fr 1fr; } }

.story__figure { margin: 0; border: 1px solid var(--rule); background: var(--cream-deep); }
.story__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { max-width: var(--wrap-narrow); margin-inline: auto; }

.faq__item { border-bottom: 1px solid var(--rule); padding-block: 1.75rem; }
.faq__item:first-of-type { border-top: 1px solid var(--rule); }

.faq__q {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin: 0 0 .65rem;
  color: var(--ink-strong);
}
/* Answers sit as plain visible prose directly under the question — this is
   the block AI answer engines lift, so it must not be collapsed behind JS. */
.faq__a { margin: 0; }
.faq__a + .faq__a { margin-top: .8rem; }

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

.contact-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 54rem) { .contact-grid { grid-template-columns: 1.15fr .85fr; } }

.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: .55rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brass);
  outline: 2px solid transparent;   /* :focus-visible ring still applies */
}
.field textarea { min-height: 11rem; resize: vertical; }
.field__hint { font-size: var(--step--1); color: var(--ink-muted); margin: .4rem 0 0; }

/* Honeypot — must stay reachable to bots but hidden from people and AT.
   Do not switch to display:none; some bots skip those. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form-error {
  border-left: 3px solid #A5453B;
  background: #F7E9E6;
  color: #6E2A23;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
}

.contact-details dt {
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-deep); margin-top: 1.75rem;
}
.contact-details dt:first-child { margin-top: 0; }
.contact-details dd { margin: .4rem 0 0; }

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

.site-footer {
  background: var(--ink-strong);
  color: var(--cream-deep);
  padding-block: clamp(3rem, 7vw, 4.5rem);
  font-size: var(--step--1);
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--brass); }
.site-footer__inner { display: grid; gap: 2.5rem; }
@media (min-width: 46rem) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer .wordmark { color: var(--cream); display: inline-block; margin-bottom: 1rem; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }

.colophon {
  border-top: 1px solid rgba(240,228,210,.2);
  margin-top: 3rem; padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  color: rgba(240,228,210,.7);
}

/* --- Narrow utility pages (thanks / 404) ---------------------------------- */

.pane {
  min-height: 60vh;
  display: grid; place-items: center; text-align: center;
  padding-block: var(--section);
}
.pane h1 { font-size: var(--step-3); letter-spacing: .1em; text-transform: uppercase; }

/* --- Print ---------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .hero__actions, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}