/* Ember & Oak, one page. Oat and Olive: oat linen and oak ink with one smoked olive accent.
   Faces are the tile's (Boska 500 for display, General Sans for body). Every colour keys on
   html[data-theme]; nothing here follows the device. Motion is keyed on html.mo, which the page
   script sets only while neither reduced motion nor the preview frame's still mode is on, so this
   file never reads the motion preference itself. */

/* The picked faces, self-hosted from build/fonts/ and nowhere else: Boska for headings, General
   Sans for text. One static file per family (no axes in either name), so one face each, declared at
   the weight the tile names; text set at 600 takes the browser's bold from the General Sans file. */
@font-face { font-family: "Boska"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/boska.woff2") format("woff2"); }
@font-face { font-family: "General Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/general-sans.woff2") format("woff2"); }

/* The palettes are in the page head (index.html), ahead of every stylesheet. Layout tokens sit on
   body, so the starter's html block stays the page's only root block. */
body {
  --bar: 64px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --rad: 8px;
  --display: "Boska", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: "General Sans", "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

html { background: var(--ground); color: var(--ink); min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--line-2) var(--ground); }
body { margin: 0; font-family: var(--body); font-weight: 400; font-size: 1.0625rem; line-height: 1.6; background: var(--ground); color: var(--ink); min-height: 100%; caret-color: var(--accent); font-variant-numeric: lining-nums; }[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; text-wrap: balance; margin: 0; color: inherit; }
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
section[id], [id="top"] { scroll-margin-top: calc(var(--bar) + 12px); }

.skip { position: absolute; left: 1rem; top: -100px; z-index: 30; background: var(--accent); color: var(--accent-ink); padding: 0.75rem 1rem; border-radius: var(--rad); font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.75rem; }

/* Buttons: solid, radius 8, the tile's two. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.4rem; border-radius: var(--rad); font: 600 1rem/1.2 var(--body); text-decoration: none; text-align: center; border: 1.5px solid transparent; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
@media (hover: hover) {
  .btn-primary:hover { background: color-mix(in oklab, var(--accent) 86%, var(--ink)); }
  .btn-secondary:hover { border-color: var(--ink); }
  .nav a:hover { color: var(--ink); text-decoration: underline; }
  .foot a:hover { color: var(--ink); }
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The bar: fixed, full width, near solid, no blur. */
.top { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 20; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 var(--gut); background: var(--ground); background: color-mix(in srgb, var(--ground) 97%, transparent); border-bottom: 1px solid var(--line); justify-self: stretch; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.005em; white-space: nowrap; }
.mark { width: 24px; height: 29px; flex: none; }
.mark-body { fill: var(--accent); }
.mark-vein { fill: none; stroke: var(--ground); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem; color: var(--ink-2); text-decoration: none; font-size: 0.975rem; font-weight: 600; }
.nav a.nav-order { margin-left: 0.4rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--rad); padding: 0 1rem; white-space: nowrap; }
@media (hover: hover) { .nav a.nav-order:hover { color: var(--accent-ink); text-decoration: none; background: color-mix(in oklab, var(--accent) 86%, var(--ink)); } }
@media (max-width: 640px) { .nav .nav-wide { display: none; } }
/* "Order a candle" is longer than the old "Order", so the phone bar tightens to keep one row:
   less padding first, then a smaller wordmark, then the mark alone at the narrowest phones (the
   link keeps its spoken name). */
@media (max-width: 480px) { .top { gap: 0.5rem; } .brand { font-size: 1.2rem; gap: 0.5rem; } .nav { gap: 0.125rem; } .nav a { padding: 0 0.55rem; font-size: 0.9375rem; } .nav a.nav-order { margin-left: 0.25rem; padding: 0 0.8rem; } }
@media (max-width: 400px) { .brand { font-size: 1.05rem; } .mark { width: 21px; height: 25px; } }
@media (max-width: 359.98px) { .brand span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.band { padding-top: clamp(4.5rem, 10vw, 8.5rem); padding-bottom: clamp(4.5rem, 10vw, 8.5rem); }
.h2 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.9rem); line-height: 1.04; letter-spacing: -0.012em; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 36rem; }

/* ---------- Hero ---------- */
.hero .pin { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; place-items: initial; min-height: 100vh; min-height: 100svh; padding: calc(var(--bar) + clamp(1.25rem, 4svh, 2.75rem)) var(--gut) 1rem; }
.hero-copy { position: relative; z-index: 2; max-width: 40rem; }
.hero h1 { font-size: clamp(2.45rem, 1.55rem + 3.7vw, 5.25rem); line-height: 1.02; letter-spacing: -0.018em; margin: 0 0 0.45em; }
/* The heading's spoken copy (splitWords adds it after the word spans) is one unwrapped line; left at
   its static position it lay over the sub-line, so it sits off the page's left edge instead. */
.reveal > .sr-only { top: 0; left: -10000px; }
.hero-sub { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 32rem; margin-bottom: 1.6rem; }
.hero .actions .btn { flex: 1 1 100%; }
@media (min-width: 480px) { .hero .actions .btn { flex: 0 0 auto; } }
.hero-frame { position: relative; z-index: 1; flex: 1 1 auto; min-height: 15rem; margin-top: 1.5rem; border-radius: var(--rad); overflow: hidden; --grow: 0; }
.hero-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 58%; }
.hero-img-night { display: none !important; }
html[data-theme="dark"] .hero-img-day { display: none !important; }
html[data-theme="dark"] .hero-img-night { display: block !important; }
.hero-cap { position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.25rem); z-index: 2; max-width: min(30rem, calc(100% - 2rem)); margin: 0; padding: 0.7rem 1rem 0.8rem; border-radius: var(--rad); background: var(--night); color: var(--night-ink); font-family: var(--display); font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem); line-height: 1.32; text-wrap: balance; }

/* Wide and landscape: the photo window sits left, where the candle is, and the copy right. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero .pin { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: calc(var(--bar) + 2rem) var(--gut) 2.5rem; }
  .hero-copy { grid-column: 2; max-width: 36rem; padding-left: clamp(1rem, 3vw, 3.5rem); }
  .hero-frame { position: absolute; inset: 0; margin: 0; min-height: 0; border-radius: 0;
    clip-path: inset(calc((var(--bar) + 2rem) * (1 - var(--grow))) calc(50% * (1 - var(--grow)) + 0.5rem * (1 - var(--grow))) calc(2.5rem * (1 - var(--grow))) calc(var(--gut) * (1 - var(--grow))) round calc(var(--rad) * (1 - var(--grow)))); }
  .hero-frame img { object-position: 28% 58%; }
}
/* Motion: the window grows to the whole screen as the copy leaves, then one line holds over it. */
.mo .hero-frame {
  --g1: clamp(0, (var(--p) - 0.3) / 0.48, 1);
  --grow: calc(var(--g1) * var(--g1) * (3 - 2 * var(--g1)));
}
.mo .hero-frame img { scale: calc(1.1 - 0.1 * var(--grow)); transform-origin: 28% 55%; }
.mo .hero-copy.gone { visibility: hidden; }
.mo .hero-cap { opacity: clamp(0, (var(--grow) - 0.7) / 0.3, 1); }
@media (max-width: 899.98px), (max-aspect-ratio: 999/1000) {
  .mo .hero-frame { position: absolute; inset: 0; margin: 0; min-height: 0; border-radius: 0;
    clip-path: inset(calc(var(--rest-top, 62%) * (1 - var(--grow))) calc(var(--gut) * (1 - var(--grow))) calc(1rem * (1 - var(--grow))) calc(var(--gut) * (1 - var(--grow))) round calc(var(--rad) * (1 - var(--grow)))); }
  .mo .hero-frame img { translate: 0 calc(var(--rest-top, 0px) * 0.42 * (1 - var(--grow))); }
}

/* ---------- Scents ---------- */
.scents-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 900px) { .scents-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6vw; align-items: end; } }
.scents-grid { display: grid; gap: 0; }
.place { display: none; }
.scent-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.scent { display: grid; gap: 1rem; padding: 2rem 0 2.25rem; border-bottom: 1px solid var(--line); }
.scent-pic { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--rad); overflow: hidden; background: var(--surface); }
.scent-pic img { width: 100%; height: 100%; object-fit: cover; }
.scent h3 { font-size: clamp(1.95rem, 1.35rem + 2.1vw, 3.1rem); line-height: 1.05; letter-spacing: -0.01em; }
.notes { font-weight: 600; font-size: 0.975rem; color: var(--accent); margin-top: 0.15rem; }
.scent-line { color: var(--ink-2); font-size: 1.0625rem; max-width: 30rem; }
.scents-foot { margin-top: 2rem; color: var(--ink-2); font-size: 0.975rem; max-width: 34rem; }
@media (min-width: 900px) {
  .js .scents-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6vw; align-items: start; }
  .js .place { display: block; position: sticky; top: calc(var(--bar) + 2rem); height: calc(100vh - var(--bar) - 4rem); height: calc(100svh - var(--bar) - 4rem); max-height: 52rem; border-radius: var(--rad); overflow: hidden; background: var(--surface); isolation: isolate; }
  .js .scent-pic { display: none; }
  .js .scent { min-height: 52vh; min-height: 52svh; align-content: center; padding: 2.5rem 0; }
}
.place figure { position: absolute; inset: 0; margin: 0; clip-path: inset(100% 0 0 0); z-index: 0; }
.place figure.was { clip-path: inset(0); z-index: 1; }
.place figure.on { clip-path: inset(0); z-index: 2; }
.place img { width: 100%; height: 100%; object-fit: cover; }
.place figcaption, .scent-pic figcaption { position: absolute; left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); padding: 0.4rem 0.75rem; border-radius: 6px; background: var(--night); color: var(--night-ink); font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
.scent-pic { position: relative; }
.mo .place figure.on { transition: clip-path 0.95s var(--ease); }
.mo .place figure img { scale: 1.06; transition: scale 1.4s var(--ease); }
.mo .place figure.on img, .mo .place figure.was img { scale: 1; }

/* A wipe that plays once when its container first comes into view (data-seen). Like every start
   state below the first screen, it waits for html.go, set on the visitor's first scroll: until the
   page moves, it is whole. */
.mo.armed .wipe { transition: clip-path 1s var(--ease), translate 1s var(--ease); }
.mo.go [data-seen]:not(.seen) .wipe { clip-path: inset(0 100% 0 0); }
.mo.go [data-seen]:not(.seen) .wipe-up { clip-path: inset(100% 0 0 0); translate: 0 1.5rem; }
.mo.armed .facts .wipe:nth-child(2) { transition-delay: 0.09s; }
.mo.armed .facts .wipe:nth-child(3) { transition-delay: 0.18s; }
.mo.armed .facts .wipe:nth-child(4) { transition-delay: 0.27s; }

/* ---------- Maker ---------- */
.maker { background: var(--surface); }
.maker-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.maker-pics { position: relative; display: grid; gap: 1rem; }
.maker-pic { margin: 0; border-radius: var(--rad); overflow: hidden; }
.maker-pic img { width: 100%; height: 100%; object-fit: cover; }
.maker-pic-main { aspect-ratio: 5 / 4; }
.maker-pic-main img { object-position: 50% 42%; }
.maker-pic-wick { aspect-ratio: 16 / 10; }
.maker-copy p { max-width: 34rem; }
.maker-copy .h2 { margin-bottom: 1.5rem; }
.maker-copy .lead + .lead { margin-top: 1rem; }
.facts { margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 34rem; }
.facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; color: var(--ink-2); font-size: 0.975rem; }
.facts dd { margin: 0; font-family: var(--display); font-size: 1.3rem; line-height: 1.3; }
@media (min-width: 900px) {
  .maker-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
  .maker-pics { display: block; padding-bottom: 18%; }
  .maker-pic-main { aspect-ratio: 4 / 5; width: 86%; margin-left: auto; }
  .maker-pic-wick { position: absolute; left: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; box-shadow: 0 18px 40px -18px rgba(20, 14, 8, 0.45); outline: 6px solid var(--surface); }
}
.maker .layer { position: relative; }
@media (min-width: 900px) { .maker .maker-pic-wick.layer { position: absolute; } }
@media (max-width: 899.98px) { .maker .layer { transform: none; } }

/* ---------- Market: a chapter in olive ---------- */
.market { background: var(--chap); color: var(--chap-ink); --accent: var(--chap-ink); --ink-2: var(--chap-ink-2); --line: var(--chap-line); }
.market :focus-visible { outline-color: var(--chap-ink); }
.market-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.market .lead { color: var(--chap-ink-2); margin-top: 1.25rem; }
.hours { margin: 2.25rem 0 0; padding: 0; border-top: 1px solid var(--chap-line); max-width: 34rem; }
.hours > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--chap-line); }
.hours dt { font-weight: 600; color: var(--chap-ink-2); font-size: 0.975rem; }
.hours dd { margin: 0; font-size: 1.125rem; line-height: 1.45; }
/* The hours a little bigger on phones, where they were hard to read. */
@media (max-width: 640px) { .hours > div { grid-template-columns: 6.75rem minmax(0, 1fr); gap: 0.875rem; } .hours dt { font-size: 1.0625rem; line-height: 1.5; } .hours dd { font-size: 1.25rem; line-height: 1.4; } }
.market-photo { margin: 0; border-radius: var(--rad); overflow: hidden; aspect-ratio: 3 / 2; --open: 1; clip-path: inset(0 calc((1 - var(--open)) * 32%) 0 calc((1 - var(--open)) * 32%) round var(--rad)); }
.market-photo img { width: 100%; height: 100%; object-fit: cover; }
.mo.go .market-photo { --o1: clamp(0, (var(--p) - 0.06) / 0.34, 1); --open: calc(1 - (1 - var(--o1)) * (1 - var(--o1))); }
.mo .market-photo img { scale: calc(1.12 - 0.12 * var(--open)); }
@media (min-width: 900px) { .market-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }

/* ---------- Order: the candle lit, opening from its flame ---------- */
.order { position: relative; }
.order-art { position: relative; margin: 0 var(--gut) 2rem; aspect-ratio: 4 / 3; border-radius: var(--rad); overflow: hidden; --iris: 1; clip-path: circle(calc(6% + var(--iris) * 70%) at 50% 44%); }
.order-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.order-copy { position: relative; z-index: 2; }
.order-copy .h2 { margin-bottom: 1.25rem; }
.order-copy .lead { margin-bottom: 1.75rem; }
.order-note { margin-top: 1.25rem; color: var(--ink-2); font-size: 0.975rem; }
.mo.go .order-art { --i1: clamp(0, (var(--p) - 0.04) / 0.4, 1); --iris: calc(var(--i1) * var(--i1) * (3 - 2 * var(--i1))); }
.mo.go .order-art img { scale: calc(1.15 - 0.15 * var(--iris)); }
/* Wide: a dark room, the flame opening across it behind the words. The words sit on the room's
   own dark ground, so they read before, during and after the opening. */
@media (min-width: 900px) {
  .order { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; background: var(--night); color: var(--night-ink); --ink: var(--night-ink); --ink-2: var(--night-ink-2); --accent: var(--night-accent); --accent-ink: #1C1A16; --surface: #2A241D; --line-2: rgba(247, 241, 230, 0.7); }
  .order-art { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border-radius: 0; }
  .order-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(23, 18, 13, 0.9) 38%, rgba(23, 18, 13, 0.2) 66%, rgba(23, 18, 13, 0) 82%); }
  .order-art img { object-position: 62% 44%; }
  .order-art { clip-path: circle(calc(4% + var(--iris) * 74%) at 62% 44%); }
  .order-copy { max-width: min(32rem, 38vw); }
  .order-copy .lead { color: var(--night-ink-2); }
  .order :focus-visible { outline-color: var(--night-ink); }
}

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 2.5rem var(--gut) 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; color: var(--ink-2); font-size: 0.95rem; max-width: 1280px; margin: 0 auto; }
.foot .brand { font-size: 1.2rem; }
.foot a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-items: center; }