/* A perfume photographed in a studio. The page ground is the studio backdrop; the bottle and the
   ingredients are photographs; the only thing the code colours is the liquid inside the glass.
   Every size is in rem; the root size stays near a normal 16px and only creeps up a little on wide
   screens. Two columns: the bottle, and a sheet that says what is in it. */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --c4 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --c5 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --c6 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
:root {
  color-scheme: light;
  --ground: #CFCAC5; --ink: #15120F; --muted: #48423C; --faint: #7A726A; --line: #ACA59E; --stone: #E3DFDA;
  --voice: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: clamp(15px, 0.2vw + 13px, 17.5px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1.0625rem/1.5 var(--text); padding-inline: 1.25rem; padding-block: env(safe-area-inset-top, 0px) 5rem; }
main, nav.top, footer.legal { max-width: 70rem; margin-inline: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--voice); font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-size: 1.9rem; line-height: 1.15; }
p, ul, figure { margin: 0; }
.note { font-size: .95rem; color: var(--muted); }
.note.wide { max-width: 38rem; }
.kicker { font-size: 1rem; color: var(--muted); }
.quietline { font-size: 1.0625rem; color: var(--muted); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

nav.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; padding-block: 1.25rem; gap: .5rem 1.5rem; }
nav.top .brand { font: italic 400 1.7rem/1 var(--voice); text-decoration: none; }
nav.top div { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-size: 1rem; }
nav.top div a { text-decoration: none; }
nav.top div a:hover { text-decoration: underline; }

/* ---------- 1. write */
.intro { display: grid; gap: 1.25rem; padding-top: 1.5rem; }
.intro h1 { font: 400 1.2rem/1.4 var(--text); max-width: 34rem; }
.compose { display: grid; gap: .9rem; }
.compose label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#box { display: block; width: 100%; resize: none; overflow: hidden; font: italic 400 clamp(2rem, 4.6vw, 3.6rem)/1.12 var(--voice); color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 0 0 .9rem; outline: none; }
#box::placeholder { color: var(--faint); opacity: 1; }
.tries { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem; font-size: 1rem; color: var(--muted); }
.link { font: inherit; color: var(--ink); background: none; border: 0; padding: .2rem 0; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .3em; }
.link:hover { text-decoration-color: var(--ink); }
.link.try { font: italic 400 1.15rem/1.3 var(--voice); }
.chipline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; font-size: 1rem; color: var(--muted); }
.chipline i, .meta i { font: italic 400 1.1em/1.2 var(--voice); color: var(--ink); }
.chipline button { font: inherit; font-size: .95rem; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* ---------- 2. see: bottle on the left, the sheet on the right */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 1rem 3rem; align-items: start; padding-top: 1rem; }
.bottlecol { min-width: 0; display: grid; justify-items: center; }
.sheet { min-width: 0; display: grid; gap: 1.75rem; align-content: start; padding-top: 2.5rem; }
@media (max-width: 52rem) { .studio { grid-template-columns: minmax(0, 1fr); } .sheet { padding-top: 0; } }
.conc { font: italic 400 2rem/1.1 var(--voice); }
.cta { display: grid; gap: .6rem; justify-items: start; }
.go, .ghost { font: 500 1.0625rem/1 var(--text); border-radius: 999px; padding: 1rem 2.1rem; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
.go { background: var(--ink); color: var(--stone); border: 1px solid var(--ink); }
.go:disabled { opacity: .25; cursor: default; }
.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.ghost:hover:not(:disabled) { background: var(--stone); }
.ghost:disabled { color: var(--muted); border-color: var(--line); cursor: default; }

/* the flacon: a photograph; only the liquid takes colour. Its edges melt into the page. */
.flacon { position: relative; isolation: isolate; width: 100%;
  transition: --c1 1.6s ease, --c2 1.6s ease, --c3 1.6s ease, --c4 1.6s ease, --c5 1.6s ease, --c6 1.6s ease;
  -webkit-mask: linear-gradient(to right, transparent 2%, #000 24%, #000 76%, transparent 98%), linear-gradient(to bottom, transparent, #000 14%, #000 90%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, transparent 2%, #000 24%, #000 76%, transparent 98%), linear-gradient(to bottom, transparent, #000 14%, #000 90%, transparent); mask-composite: intersect; }
.flacon img { display: block; width: 100%; height: auto; }
.flacon .juice { position: absolute; inset: 0; opacity: 0; mix-blend-mode: multiply; transition: opacity 1.6s ease;
  background: linear-gradient(to top, var(--c1) var(--j0), var(--c2) calc(var(--j0) + var(--jh) * .2), var(--c3) calc(var(--j0) + var(--jh) * .4), var(--c4) calc(var(--j0) + var(--jh) * .6), var(--c5) calc(var(--j0) + var(--jh) * .8), var(--c6) calc(var(--j0) + var(--jh)));
  -webkit-mask: var(--jm) center / 100% 100% no-repeat; mask: var(--jm) center / 100% 100% no-repeat; }
.flacon.full .juice { opacity: 1; }
/* the reading's certainty: an unsure perfume is milky, a sure one is clear (--clarity 0..1) */
.flacon .juice { filter: saturate(calc(.55 + var(--clarity, 1) * .45)); }
.flacon .mist { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.4s ease;
  background: linear-gradient(to top, rgba(248,246,242,.9) var(--j0), rgba(248,246,242,.55) calc(var(--j0) + var(--jh)));
  -webkit-mask: var(--jm) center / 100% 100% no-repeat; mask: var(--jm) center / 100% 100% no-repeat; }
.flacon.full .mist { opacity: calc((1 - var(--clarity, 1)) * .75); }
/* one light sweeping across the glass when the perfume is bottled */
.flacon .glint { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 48%, transparent 58%);
  -webkit-mask: linear-gradient(#000, #000) 50% 58% / 58% 62% no-repeat; mask: linear-gradient(#000, #000) 50% 58% / 58% 62% no-repeat; }
/* the typed paper label */
.flacon .label { position: absolute; left: 50%; top: 61%; width: 31%; transform: translate(-50%, -50%); background: #F5F2EC; color: #1d1915;
  padding: 1.1em .9em 1em; display: grid; gap: .45em; justify-items: center; text-align: center; font: 400 clamp(9px, .95vw, 13px)/1.3 "Courier Prime", "Courier New", monospace;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 14px -8px rgba(30,20,10,.35); outline: 1px solid rgba(30,20,10,.18); outline-offset: -5px; }
.flacon .label .ln { font-weight: 700; letter-spacing: .08em; }
.flacon .label .lt { font-size: 1.05em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.flacon .label .lc, .flacon .label .ld { font-size: .9em; }
.flacon .label .lt::after { content: ""; }
.flacon .label.typing .lt::after { content: "▌"; animation: caret .6s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* rejected notes leaving the bottle */
.vapour { position: fixed; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; z-index: 10; filter: blur(3px); }
.flacon.stage { --j0: 20.49%; --jh: 31.72%; --jm: url(/static/img/stage-juice.png); max-width: min(34rem, 66vh); margin-top: -3.5rem; }
@media (min-width: 52.01rem) { .bottlecol { position: sticky; top: 1rem; } }
.flacon.mini { --j0: 18.51%; --jh: 38.88%; --jm: url(/static/img/mini-juice.png); width: 8.5rem; }
.drop { position: fixed; left: 0; top: 0; width: 10px; height: 14px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; pointer-events: none; z-index: 10; box-shadow: inset -1px -2px 2px rgba(0, 0, 0, .18), inset 1px 1px 1px rgba(255, 255, 255, .5); }

/* the sheet: three layers, each ingredient with its photograph, name and one plain line */
.pyramid { display: grid; gap: 1.5rem; }
.tier { display: grid; gap: .9rem; }
.tier h3 { font: italic 400 1.5rem/1.1 var(--voice); display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.tier h3 span, .palette h3 span { font: 400 .95rem/1.3 var(--text); color: var(--muted); }
.acc { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.acc img { width: 4rem; height: 4rem; border-radius: 50%; display: block; }
.acc b { display: block; font-weight: 500; font-size: 1.125rem; line-height: 1.25; }
.acc span { display: block; font-size: 1rem; color: var(--muted); line-height: 1.35; }
.without { font-size: 1rem; color: var(--muted); padding-top: .25rem; }
.without b { font: italic 400 1.25rem/1 var(--voice); color: var(--ink); margin-right: .4rem; }
.hint { display: grid; gap: .9rem; }
.hint p { color: var(--muted); }
.hint ul { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.hint li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.hint li b { font: italic 400 1.5rem/1.1 var(--voice); }
.hint li span { font-size: .95rem; color: var(--muted); }

/* ---------- lower sections */
.band { padding-top: 5rem; display: grid; gap: 1.75rem; }
.band.first { padding-top: 1.5rem; }
.band h1 { font-size: 2.4rem; line-height: 1.1; }
.bandhead { display: grid; gap: .6rem; justify-items: start; }
.bandhead h2 { font-size: 2.2rem; }
.bandhead .ghost { margin-top: .5rem; }
.pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); gap: 2.25rem 1rem; }
.pieces > .quietline { grid-column: 1 / -1; }
.piece { display: grid; justify-items: center; align-content: start; gap: .3rem; text-align: center; text-decoration: none; min-width: 0; }
.piece i { font: italic 400 1.15rem/1.25 var(--voice); overflow-wrap: anywhere; max-width: 100%; }
.piece span { font-size: .95rem; color: var(--muted); }
.piece:hover i { text-decoration: underline; text-decoration-thickness: 1px; }

.creation h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; overflow-wrap: anywhere; }
.creation .sheet { gap: 1rem; }
.creation .pyramid { padding-top: 1rem; }
.meta { font-size: 1rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .5rem; }

/* smells closest to: real perfumes, named plainly, with what they share */
.nears { display: grid; border-top: 1px solid var(--line); }
.near { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 11rem; grid-template-areas: "brand shared where" "name shared where" "conc shared where"; column-gap: 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: center; }
.near .nb { grid-area: brand; font-size: 1rem; color: var(--muted); }
.near b { grid-area: name; font: 400 1.6rem/1.15 var(--voice); }
.near .nc { grid-area: conc; font-size: .95rem; color: var(--muted); }
.near .ns { grid-area: shared; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.near .ns img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.near .ns em { font-style: normal; font-size: 1rem; color: var(--muted); flex-basis: 100%; }
.near .nw { grid-area: where; font-size: 1rem; text-decoration: underline; text-underline-offset: .25em; justify-self: end; text-align: right; overflow-wrap: anywhere; }
.near .nw.buy { display: grid; gap: .4rem; text-decoration: none; justify-items: end; }
.near .nw.buy a { text-underline-offset: .25em; }
a.near:hover b { text-decoration: underline; text-decoration-thickness: 1px; }
@media (max-width: 46rem) { .near { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "name" "conc" "shared" "where"; row-gap: .2rem; } .near .ns { margin-top: .5rem; } .near .nw { margin-top: .4rem; } .near .nw.buy { justify-items: start; } }
.nearlive { display: grid; gap: .75rem; }
.nearlive h2 { font-size: 1.5rem; font-style: italic; }
.nears.compact .near { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "name" "conc" "shared" "where"; padding: .8rem 0; row-gap: .1rem; }
.nears.compact .near .nw { justify-self: start; justify-items: start; text-align: left; margin-top: .5rem; }
.nears.compact .near b { font-size: 1.3rem; }
.near .nk { font-size: .85rem; color: var(--muted); text-align: inherit; max-width: 22rem; }
.near .nk.differs { color: var(--ink); }
.excl { margin: 0; }

.makers { display: grid; border-top: 1px solid var(--line); }
.maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 11rem; gap: .75rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.maker .mh { display: grid; gap: .25rem; }
.maker .mh b { font: 400 1.6rem/1.15 var(--voice); }
.maker .mh span { font-size: .95rem; color: var(--muted); }
.maker .mc { display: grid; gap: .3rem; font-size: 1rem; }
.maker .has { font-weight: 500; }
.maker .ask { padding-top: .2rem; }
.maker .ask span { font: italic 400 1.15rem/1 var(--voice); margin-right: .3rem; }
.maker .mv { font-size: 1rem; text-underline-offset: .25em; justify-self: end; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 46rem) { .maker { grid-template-columns: minmax(0, 1fr); } .maker .mv { justify-self: start; text-align: left; } }

/* the forty ingredients, closed until someone asks for them, each with its name */
.palette summary { font: 400 1.9rem/1.15 var(--voice); cursor: pointer; }
.palette h3 { font: italic 400 1.5rem/1.1 var(--voice); display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; padding-top: .75rem; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 1.25rem .75rem; }
.swatches figure { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.swatches img { width: 4.5rem; height: 4.5rem; border-radius: 50%; }
.swatches figcaption { font-size: .95rem; line-height: 1.25; }
footer { padding-top: 5rem; }
footer p { font-size: .95rem; color: var(--muted); max-width: 38rem; }
footer.legal { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; padding-top: 4rem; font-size: .95rem; color: var(--muted); }

/* the legal notice and the privacy page: plain reading text */
.legaltext { max-width: 42rem; display: grid; gap: 1rem; padding-top: 1.5rem; }
.legaltext h1 { font-size: 2.4rem; line-height: 1.1; }
.legaltext h2 { font-size: 1.5rem; padding-top: 1.25rem; }
.legaltext ul { display: grid; gap: 1rem; padding-left: 1.1rem; }
.legaltext dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.legaltext dt { color: var(--muted); }
.legaltext dd { margin: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .flacon, .flacon .juice, .flacon .mist { transition: none; } .flacon .label.typing .lt::after { animation: none; } }