:root { color-scheme: light; }
body { margin: 0; }
[hidden] { display: none !important; }

/* Layout concept: a phone-first storefront where scent is colour. Giant type in the hero, a colour field per fragrance, one inverted band for the birthday gifts, everything else quiet. Photos drop onto the fields later. */
:root {
  --bg: #ece9e6; --surface: #f7f5f3; --fg: #1b1518; --muted: #675d61; --line: rgba(27, 21, 24, 0.16);
  --ink: #1b1518; --on-ink: #f4f0ec; --accent: #ffb02e; --on-accent: #1b1518;
  --danger: #b3361f; --ok: #22703a; --warn: #8a5a00; --overlay: rgba(20, 12, 10, 0.55);
  --shadow: 0 30px 60px -30px rgba(27, 21, 24, 0.4); --fl: 42%;
  --chevron-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b1518' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f2eae4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: var(--chevron-ink);
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-logo: 'Cinzel', Georgia, serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17100e; --surface: #231915; --fg: #f2eae4; --muted: #a79a94; --line: rgba(242, 234, 228, 0.17);
    --ink: #f2eae4; --on-ink: #17100e; --accent: #ffb02e; --on-accent: #1b1518;
    --danger: #ff8a70; --ok: #8fd19e; --warn: #f0c060; --overlay: rgba(0, 0, 0, 0.62);
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); --fl: 62%; color-scheme: dark;
    --chevron: var(--chevron-paper);
  }
}
:root[data-theme="dark"] {
  --bg: #17100e; --surface: #231915; --fg: #f2eae4; --muted: #a79a94; --line: rgba(242, 234, 228, 0.17);
  --ink: #f2eae4; --on-ink: #17100e; --accent: #ffb02e; --on-accent: #1b1518;
  --danger: #ff8a70; --ok: #8fd19e; --warn: #f0c060; --overlay: rgba(0, 0, 0, 0.62);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); --fl: 62%; color-scheme: dark;
  --chevron: var(--chevron-paper);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.num { font-variant-numeric: tabular-nums; }
.display { font-weight: 800; font-stretch: 100%; letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance; }