/* ─────────────────────────────────────────────────────────────────────────────
   MAKE YOUR CANDLE

   The whole scheme is taken off the logo: gold foil pressed into warm paper.
   Nothing on this site is a flat brand colour — gold here is always a gradient
   running dark→light→dark, because that is what foil does under a light, and a
   single flat #C9A227 is the thing that makes a gold logo look cheap.

   Paper is never pure white (#FAF6EC), ink is never pure black (#3A2E1E). The
   only saturated colour anywhere is the colour we sell: the ten liquid dyes in
   the spectrum rule and the fifteen fragrances on their chips. Everything else
   is paper, gold and espresso.

   Type is the logo's own three voices. Cormorant Garamond is the fine serif of
   "Make your". Pinyon Script is the flourish of "candle", used for exactly two
   things — the wordmark and one word in the hero — because a script used more
   than twice stops being a flourish. Jost sets the wide-tracked caps of
   "CREATE. LIGHT. BE YOU." and all interface text. IBM Plex Mono sets every
   measurement, and only measurements.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --paper:    #FAF6EC;
  --paper-2:  #F4EDDE;
  --card:     #FFFDF8;
  --ink:      #3A2E1E;
  --ink-2:    #7C6A4E;
  --gold-d:   #9C7222;
  --gold:     #C29A4E;
  --gold-l:   #E7D3A2;
  --line:     #E5D9C0;
  --espresso: #26200F;
  --wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.8 14.13c-.24.68-1.42 1.32-1.96 1.37-.5.05-1.14.07-1.83-.11-.42-.13-.96-.31-1.66-.61-2.92-1.26-4.82-4.2-4.97-4.4-.14-.2-1.19-1.58-1.19-3.02s.76-2.14 1.03-2.44c.27-.3.58-.37.78-.37h.56c.18 0 .42-.07.66.5.24.58.83 2.02.9 2.17.07.15.12.32.02.52-.1.2-.15.32-.3.5-.15.17-.31.39-.44.52-.15.15-.3.31-.13.61.17.3.76 1.25 1.63 2.02 1.12 1 2.06 1.31 2.36 1.46.3.15.47.13.64-.08.17-.2.74-.86.94-1.16.2-.3.4-.25.66-.15.27.1 1.7.8 1.99.95.29.15.48.22.55.35.07.12.07.72-.17 1.4z'/%3E%3C/svg%3E");
  --bad:      #A8412A;
  --good:     #6E8F5E;

  --foil: linear-gradient(118deg, #A2761F 0%, #E4C983 26%, #C39B4A 48%, #EFE0B4 68%, #A2761F 100%);
  --hair: 1px solid var(--line);
  --lift: 0 1px 2px rgba(90,66,26,.05), 0 14px 34px -22px rgba(90,66,26,.42);
  --lift-2: 0 2px 6px rgba(90,66,26,.07), 0 26px 56px -28px rgba(90,66,26,.5);

  --measure: 60ch;
  --pad: clamp(1.1rem, 4vw, 4rem);

  --f-disp:   "Cormorant Garamond", Georgia, serif;
  --f-script: "Pinyon Script", "Cormorant Garamond", cursive;
  --f-body:   "Jost", system-ui, sans-serif;
  --f-mono:   "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(1rem, .5vw + .9rem, 1.08rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Paper, not a flat fill: two soft warm lights and a fibre grain, so the gold
     has something with tooth to sit on. */
  background:
    radial-gradient(70% 45% at 12% 0%, rgba(231,211,162,.34), transparent 70%),
    radial-gradient(60% 40% at 92% 12%, rgba(231,211,162,.24), transparent 72%),
    var(--paper);
}

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset: .6rem auto auto .6rem; z-index: 99;
  background: var(--espresso); color: var(--gold-l); padding: .6rem 1rem; border-radius: 4px;
}
:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 3px; }

/* Gold foil, as text. Used on display type only — foil on body copy is illegible. */
.foil {
  background: var(--foil);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ── announcement ───────────────────────────────────────────────────────────── */
.anno {
  background: var(--espresso); color: var(--gold-l);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  text-align: center; padding: .55rem 1rem; min-height: 2.1rem;
}
.anno span { display: inline-block; animation: annoIn .5s ease; }
@keyframes annoIn { from { opacity: 0; transform: translateY(5px); } }

/* ── header ─────────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(.8rem, 2.6vw, 2.2rem);
  padding: .6rem var(--pad);
  background: rgba(250,246,236,.86);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: var(--hair);
}
.mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.mark-emblem svg { display: block; width: 40px; height: auto; }
.mark-type { display: block; line-height: 1; }
.mark-l1 {
  display: block; font-family: var(--f-disp); font-weight: 400;
  font-size: 1.12rem; letter-spacing: .03em;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mark-l2 {
  display: block; font-family: var(--f-script); font-size: 1.5rem;
  line-height: .9; margin-top: -.12em; margin-left: .9em;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav { display: flex; gap: clamp(.55rem, 1.5vw, 1.35rem); flex-wrap: wrap; }
.nav a {
  color: var(--ink-2); text-decoration: none;
  font-size: .76rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--gold-d); border-bottom-color: var(--gold); }

.cart-btn {
  display: flex; align-items: center; gap: .45rem; white-space: nowrap; cursor: pointer;
  font-family: var(--f-body); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1px solid var(--gold); border-radius: 999px; padding: .48rem .9rem;
  transition: background .18s ease, color .18s ease;
}
.cart-btn:hover { background: var(--espresso); color: var(--gold-l); border-color: var(--espresso); }
.ico-cart { width: 16px; height: 16px; }
.cart-count {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: 0;
  background: var(--gold-d); color: #FFF8E6;
  border-radius: 999px; min-width: 1.3rem; padding: .04rem .34rem; text-align: center;
}
@media (max-width: 860px) { .cart-btn span:not(.cart-count) { display: none; } }

/* The colour shelf, used as a rule. Ten bands, ten dyes. */
.spectrum { display: flex; height: 3px; }
.spectrum i { flex: 1; }

/* ── hero ───────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center; gap: clamp(1.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .8fr);
  padding: clamp(3rem, 8vw, 7rem) var(--pad) clamp(2.4rem, 6vw, 5rem);
  max-width: 1440px; margin-inline: auto;
}
/* A wash of warmth behind the whole intro, so the niche does not sit on bare
   paper. Cheap to paint, and it is what stops the section reading as a form. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 52% at 74% 42%, rgba(226,178,92,.16), transparent 68%),
    radial-gradient(38% 44% at 12% 78%, rgba(200,168,108,.1), transparent 70%);
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-art { order: -1; } }

.eyebrow {
  display: flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 1.2rem;
}
.eyebrow--gold { color: var(--gold-d); }
.eyebrow .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--gold); }

.hero-h {
  font-family: var(--f-disp); font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.0; letter-spacing: -.016em;
  margin: 0 0 1.5rem; max-width: 14ch;
}
/* A gold hairline under the headline, drawn short and then let go — the same
   gesture as a hallmark stamped on the base of a piece. */
.hero-h::after {
  content: ""; display: block; width: 84px; height: 2px; margin-top: 1.4rem;
  background: var(--foil); border-radius: 2px;
}
.hero-h em {
  font-family: var(--f-script); font-style: normal;
  font-size: 1.22em; line-height: .7; padding-inline: .04em;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-p {
  max-width: 46ch; margin: 0 0 2rem; color: var(--ink-2);
  font-size: 1.04rem; line-height: 1.78;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 0;
  list-style: none; padding: 1.9rem 0 0; margin: 2.2rem 0 0; border-top: var(--hair);
}
/* Hallmark row: three assertions, separated the way marks are punched on silver
   — by a rule, not by whitespace alone. */
.hero-facts li {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
  padding-inline: clamp(1rem, 2.6vw, 2.1rem); border-left: var(--hair);
}
.hero-facts li:first-child { padding-left: 0; border-left: 0; }
.hero-facts b {
  display: block; font-family: var(--f-disp); font-weight: 500; font-size: 1.9rem;
  letter-spacing: 0; text-transform: none; line-height: 1.15; margin-bottom: .18rem;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* The intro arrives in order: mark, headline, promise, actions, hallmarks. One
   sequence on load, then never again. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise .8s cubic-bezier(.2, .7, .3, 1) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .16s; }
.hero-copy > :nth-child(3) { animation-delay: .28s; }
.hero-copy > :nth-child(4) { animation-delay: .4s; }
.hero-copy > :nth-child(5) { animation-delay: .52s; }
.hero-art { animation: rise 1.1s cubic-bezier(.2, .7, .3, 1) both .1s; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-art { animation: none; }
}

/* A live candle, lit, as the hero image — the only honest hero for a shop whose
   product is the thing that has not been made yet.

   It is set in a dark lacquered niche, because candlelight is only ever as rich
   as the dark it is asked to fill. On cream it was a pale shape; here it is the
   one source of light in the frame, and the gold hairline around the arch is lit
   by it rather than drawn on top of it. */
.hero-art {
  position: relative; border-radius: 210px 210px 20px 20px;
  background: linear-gradient(168deg, #241B10, #120D07 60%, #1B1409);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(226,197,128,.26),
    inset 0 1px 0 rgba(255,232,178,.2),
    inset 0 -60px 90px -50px rgba(240,190,105,.3),
    0 3px 10px rgba(50,34,10,.16),
    0 44px 80px -40px rgba(50,34,10,.55);
}
/* The glow does not stop at the arch — a little of it lifts the page behind. */
.hero-art::after {
  content: ""; position: absolute; inset: -14% -10% -18%;
  border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(52% 40% at 50% 40%, rgba(226,170,80,.3), transparent 72%);
  filter: blur(26px);
}
.hero-candle { display: block; width: 100%; height: auto; }

/* The photograph is still. A slow breath of light over the flame is the one
   thing that keeps it from reading as a picture of a candle rather than a lit
   one — and it costs nothing, because it is a gradient, not a frame loop. */
.hero-glow {
  position: absolute; left: 50%; top: 41%; width: 62%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    rgba(255,206,130,.3), rgba(255,178,78,.1) 42%, transparent 70%);
  animation: breathe 4.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .68; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; opacity: .8; } }

/* ── buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-body); font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: .82rem 1.5rem; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; transition: transform .16s ease, box-shadow .16s ease, background .18s ease;
}
.btn--gold { background: var(--foil); background-size: 220% 100%; color: #2A2010; box-shadow: var(--lift); }
.btn--gold:hover:not(:disabled) { background-position: 80% 0; transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn--line { background: transparent; border-color: var(--gold); color: var(--gold-d); }
.btn--line:hover:not(:disabled) { background: var(--espresso); border-color: var(--espresso); color: var(--gold-l); }
.btn--flame { background: linear-gradient(140deg, #E8A33D, #C7501F); color: #FFF6E4; }
.btn--flame:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(199,80,31,.7); }
.btn--sm { padding: .58rem 1.05rem; font-size: .68rem; }
.btn--wide { width: 100%; margin-top: .9rem; }
.btn:disabled { opacity: .32; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── category tiles ─────────────────────────────────────────────────────────── */
.cats { padding: 0 var(--pad) clamp(2rem, 5vw, 3.6rem); max-width: 1440px; margin-inline: auto; }
.cats-row {
  display: grid; gap: clamp(.6rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.cat {
  display: block; text-decoration: none; color: inherit; text-align: center;
  background: var(--card); border: var(--hair); border-radius: 18px;
  padding: .7rem .7rem 1rem; box-shadow: var(--lift);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--lift-2); border-color: var(--gold); }
.cat-plate { position: relative; border-radius: 13px; overflow: hidden; }
.cat svg { display: block; width: 100%; height: auto; border-radius: 13px; }
.cat-plate svg { border-radius: 0; }
.cat:hover .shot { transform: scale(1.04); }
.cat b { display: block; font-family: var(--f-disp); font-weight: 500; font-size: 1.12rem; margin-top: .5rem; }
.cat span { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }

/* ── trust row ──────────────────────────────────────────────────────────────── */
.trust {
  display: grid; gap: clamp(.8rem, 2vw, 1.6rem); list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  max-width: 1440px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.2rem) var(--pad);
  border-block: var(--hair);
}
.trust li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: center; }
.trust-i { grid-row: span 2; color: var(--gold-d); }
.trust-i svg { width: 30px; height: 30px; }
.trust b { font-family: var(--f-disp); font-weight: 500; font-size: 1.12rem; align-self: end; }
.trust span:last-child { font-size: .78rem; color: var(--ink-2); line-height: 1.4; align-self: start; }

/* ── section heads ──────────────────────────────────────────────────────────── */
.sec-head { max-width: var(--measure); margin-bottom: clamp(1.5rem, 3.5vw, 2.6rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head h2 {
  font-family: var(--f-disp); font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  letter-spacing: -.01em; line-height: 1.06; margin: 0 0 .55rem;
}
.sec-head p { margin: 0; color: var(--ink-2); font-size: .97em; }

/* ── the studio ─────────────────────────────────────────────────────────────── */
.studio {
  padding: clamp(2.6rem, 6vw, 5rem) var(--pad);
  max-width: 1500px; margin-inline: auto;
}
.studio-grid {
  display: grid; gap: clamp(1rem, 2.4vw, 1.9rem);
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(260px, 340px);
  align-items: start;
}
@media (max-width: 1120px) { .studio-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--card); border: var(--hair); border-radius: 20px;
  padding: clamp(1.1rem, 2vw, 1.5rem); box-shadow: var(--lift);
}
.panel-h {
  font-family: var(--f-body); font-size: .68rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-d);
  margin: 0 0 1.1rem; padding-bottom: .6rem; border-bottom: var(--hair);
}

.ctrl { margin-bottom: 1.15rem; }
.ctrl label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: .5rem;
}
.step {
  display: grid; place-items: center; width: 1.35rem; height: 1.35rem; flex: none;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: 0;
  color: var(--gold-d); border: 1px solid var(--gold); border-radius: 999px;
}
.out { margin-left: auto; font-family: var(--f-mono); font-size: .76rem; letter-spacing: 0;
       text-transform: none; color: var(--gold-d); }
.ctrl select {
  width: 100%; font-family: var(--f-body); font-weight: 300; font-size: .92rem;
  padding: .66rem .8rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
}
.ctrl select:hover { border-color: var(--gold); }
.hint { margin: .45rem 0 0; font-size: .76rem; line-height: 1.45; color: var(--ink-2); min-height: 1.1rem; }
.hint strong { color: var(--bad); font-weight: 500; }

input[type=range] { width: 100%; accent-color: var(--gold-d); }

/* Colour and fragrance are the two choices you make with your eyes, so they are
   swatches you can see rather than names in a dropdown. */
.chips { display: flex; flex-wrap: wrap; gap: .38rem; }
.chips button { cursor: pointer; font-family: var(--f-body); transition: transform .14s ease; }
.chips button:hover { transform: translateY(-2px); }
.chips--colour button {
  width: 1.85rem; height: 1.85rem; border-radius: 999px; padding: 0;
  border: 1px solid var(--line); box-shadow: inset 0 -3px 6px rgba(0,0,0,.14);
}
.chips--colour button[aria-checked="true"] { outline: 2px solid var(--gold-d); outline-offset: 2px; }
.chips--scent button {
  display: inline-flex; align-items: center; gap: .36rem;
  font-size: .7rem; font-weight: 300; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: .26rem .6rem .26rem .32rem;
}
.chips--scent button i { width: .66rem; height: .66rem; border-radius: 999px; flex: none; }
.chips--scent button[aria-checked="true"] { border-color: var(--gold-d); background: #FFF8E6; }

.studio-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.studio-actions .btn { flex: 1 1 auto; }

.stage-frame {
  position: relative; border-radius: 22px; padding: 10px;
  background: var(--foil); box-shadow: var(--lift-2);
}
.stage-frame::after {
  content: ""; position: absolute; inset: 10px; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,248,230,.5); pointer-events: none;
}
#stage {
  display: block; width: 100%; height: auto; border-radius: 14px;
  background: #1A1710;
}
.stage-cap {
  margin: .85rem 0 0; font-family: var(--f-mono); font-size: .76rem;
  color: var(--ink-2); text-align: center; min-height: 1.4rem;
}

.spec { margin: 0; font-family: var(--f-mono); font-size: .78rem; }
.spec div { display: flex; justify-content: space-between; gap: .8rem; padding: .38rem 0; border-bottom: 1px dotted var(--line); }
.spec dt { color: var(--ink-2); }
.spec dd { margin: 0; text-align: right; }
.spec .tot { border-bottom: 0; padding-top: .6rem; }
.spec .tot dd { color: var(--gold-d); font-size: 1.05rem; }
.spec-note { font-size: .72rem; line-height: 1.55; color: var(--ink-2); margin: 1rem 0 0; }

.verdict {
  margin-top: 1rem; padding: .85rem .9rem; border-radius: 12px;
  font-size: .84rem; line-height: 1.5;
  border-left: 3px solid var(--gold); background: rgba(231,211,162,.3);
}
.verdict.is-bad  { border-left-color: var(--bad);  background: rgba(168,65,42,.09); }
.verdict.is-good { border-left-color: var(--good); background: rgba(110,143,94,.12); }
.verdict b { display: block; font-family: var(--f-disp); font-weight: 500; font-size: 1.16rem; margin-bottom: .2rem; }

/* ── shelves ────────────────────────────────────────────────────────────────── */
.shop { padding: clamp(2.4rem, 5.5vw, 4.4rem) var(--pad); max-width: 1500px; margin-inline: auto; }
.shop--alt {
  max-width: none;
  background: linear-gradient(180deg, rgba(244,237,222,.75), rgba(244,237,222,.35));
  border-block: var(--hair);
}
.shop--alt > * { max-width: 1500px; margin-inline: auto; }
.grid {
  display: grid; gap: clamp(.6rem, 1.5vw, 1.05rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr));
}
.card {
  display: flex; flex-direction: column;
  background: var(--card); border: var(--hair); border-radius: 18px;
  overflow: hidden; box-shadow: var(--lift);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: var(--gold); }
.card-plate { position: relative; background: var(--paper-2); }
.card-plate svg.art { display: block; width: 100%; height: auto; }

/* The photograph sits over the drawing, not instead of it. The drawing paints
   instantly and is correct to the millimetre; the photograph arrives a beat later
   and fades in on top. If a frame is missing the plate is still furnished. */
.shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .5s ease;
}
.shot.in { opacity: 1; }
.card:hover .shot { transform: scale(1.035); }
.shot { transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .shot { transition: none; }
  .card:hover .shot { transform: none; }
}
.card-off {
  position: absolute; top: .5rem; left: .5rem;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .04em;
  background: var(--espresso); color: var(--gold-l);
  padding: .2rem .45rem; border-radius: 999px;
}
.card-fav {
  position: absolute; top: .4rem; right: .4rem; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,253,248,.82); border: var(--hair); border-radius: 999px;
  color: var(--ink-2); padding: 0;
}
.card-fav svg { width: 14px; height: 14px; }
.card-fav[aria-pressed="true"] { color: var(--bad); }
.card-fav[aria-pressed="true"] svg { fill: currentColor; }
.card-body { display: flex; flex-direction: column; gap: .3rem; padding: .75rem .85rem .9rem; flex: 1; }
.card-rate { display: flex; align-items: center; gap: .3rem; font-family: var(--f-mono); font-size: .64rem; color: var(--ink-2); }
.card-rate .stars { color: var(--gold-d); letter-spacing: .06em; }
.card-name { font-family: var(--f-disp); font-weight: 500; font-size: 1.04rem; line-height: 1.22; }
.card-spec { font-size: .7rem; line-height: 1.45; color: var(--ink-2); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.card-price { font-family: var(--f-mono); font-size: .95rem; color: var(--ink); }
.card-was { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-2); text-decoration: line-through; margin-left: .35rem; }
.card-add {
  font-family: var(--f-body); font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: var(--gold-d);
  border: 1px solid var(--gold); border-radius: 999px; padding: .38rem .75rem;
  transition: background .18s ease, color .18s ease;
}
.card-add:hover { background: var(--espresso); border-color: var(--espresso); color: var(--gold-l); }
.card-add.is-in { background: var(--good); border-color: var(--good); color: #FFF; }
.card-sold { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* ── ask ────────────────────────────────────────────────────────────────────── */
.ask {
  background:
    radial-gradient(70% 60% at 22% 0%, rgba(196,154,78,.3), transparent 70%),
    var(--espresso);
  color: #EFE7D4; padding: clamp(2.8rem, 6vw, 5rem) var(--pad);
}
.ask-inner { max-width: 900px; margin-inline: auto; }
.ask .sec-head p { color: rgba(239,231,212,.72); }
.ask .sec-head h2 { color: #F6EEDB; }
#askQ {
  width: 100%; font-family: var(--f-body); font-weight: 300; font-size: .98rem; line-height: 1.55;
  padding: .95rem 1rem; color: #F6EEDB; resize: vertical;
  background: rgba(255,248,230,.06); border: 1px solid rgba(231,211,162,.34); border-radius: 14px;
}
#askQ::placeholder { color: rgba(239,231,212,.45); }
.ask-row { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; flex-wrap: wrap; }
.ask-meta { font-family: var(--f-mono); font-size: .7rem; color: rgba(239,231,212,.6); }
.ask-out {
  margin-top: 1.2rem; padding: 1.1rem 1.2rem; border-radius: 14px;
  background: rgba(255,248,230,.07); border: 1px solid rgba(231,211,162,.24);
  border-left: 3px solid var(--gold); font-size: .95rem; line-height: 1.68; white-space: pre-wrap;
}
.ask-out.is-wait { font-family: var(--f-mono); font-size: .8rem; white-space: normal; color: rgba(239,231,212,.7); }
.ask-eg { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 1.3rem 0 0; }
.ask-eg button {
  font-family: var(--f-body); font-weight: 300; font-size: .76rem; cursor: pointer;
  color: rgba(239,231,212,.82); background: transparent;
  border: 1px solid rgba(231,211,162,.3); border-radius: 999px; padding: .36rem .82rem;
}
.ask-eg button:hover { border-color: var(--gold); color: #FFF6E2; }

/* ── offer band ─────────────────────────────────────────────────────────────── */
.band { padding: clamp(2.6rem, 6vw, 4.6rem) var(--pad); text-align: center; }
.band-in { max-width: 620px; margin-inline: auto; }
.band h2 {
  font-family: var(--f-disp); font-weight: 300; font-size: clamp(1.9rem, 4.4vw, 3rem);
  margin: 0 0 .6rem;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.band p { color: var(--ink-2); margin: 0 0 1.5rem; }

/* ── footer ─────────────────────────────────────────────────────────────────── */
.foot {
  background: var(--espresso); color: rgba(239,231,212,.76);
  padding: clamp(2.6rem, 6vw, 4.4rem) var(--pad) 2rem;
}
.foot-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); max-width: 1400px; margin-inline: auto;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); align-items: start;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand { text-align: center; }
.foot-emblem svg { width: clamp(84px, 16vw, 116px); height: auto; margin-inline: auto; display: block; }
.foot-mark { margin: .5rem 0 0; line-height: 1; }
.foot-mark .mark-l1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.foot-mark .mark-l2 { font-size: clamp(2.2rem, 5.6vw, 3.2rem); margin-left: 1.1em; }
.foot-rule {
  display: flex; align-items: center; gap: .7rem; margin: 1rem auto .7rem; max-width: 260px;
  color: var(--gold); font-size: .7rem;
}
.foot-rule::before, .foot-rule::after {
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.foot-line { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-l); margin: 0; }
.foot-cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.foot-cols h4 {
  font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .7rem;
}
.foot-cols a, .foot-cols span {
  display: block; font-size: .84rem; color: rgba(239,231,212,.72);
  text-decoration: none; padding: .18rem 0;
}
.foot-cols a:hover { color: var(--gold-l); }
.foot-small {
  max-width: 1400px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding-top: 1.4rem;
  border-top: 1px solid rgba(231,211,162,.18);
  font-size: .74rem; line-height: 1.7; color: rgba(239,231,212,.52);
}

/* ── drawer & checkout shell ────────────────────────────────────────────────── */
.drawer, .pay { position: fixed; inset: 0; z-index: 60; }
.scrim { position: absolute; inset: 0; background: rgba(26,20,10,.5); backdrop-filter: blur(3px); }
.drawer-panel, .pay-panel {
  position: absolute; inset: 0 0 0 auto; width: min(460px, 100%);
  background: var(--paper); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; animation: slideIn .26s ease;
}
.pay-panel { width: min(540px, 100%); }
@keyframes slideIn { from { transform: translateX(100%); } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem; border-bottom: var(--hair);
}
.drawer-head h2 { font-family: var(--f-disp); font-weight: 400; font-size: 1.5rem; margin: 0; }
.x { background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--ink-2); }

.ship-bar { height: 3px; background: var(--line); margin: 0 1.3rem; border-radius: 999px; overflow: hidden; }
.ship-fill { height: 100%; width: 0; background: var(--foil); transition: width .3s ease; }
.drawer-ship { font-size: .74rem; color: var(--ink-2); margin: .5rem 1.3rem 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: .8rem 1.3rem; }
.drawer-empty { color: var(--ink-2); font-size: .88rem; }
.line { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px dotted var(--line); }
.line-art { position: relative; width: 62px; flex: none; border-radius: 10px; overflow: hidden; background: var(--paper-2); border: var(--hair); }
.line-art svg { display: block; width: 100%; height: auto; }
.line-main { flex: 1; min-width: 0; }
.line-name { font-family: var(--f-disp); font-weight: 500; font-size: .98rem; line-height: 1.25; }
.line-spec { font-family: var(--f-mono); font-size: .66rem; color: var(--ink-2); margin-top: .1rem; }
.line-qty { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.line-qty button {
  width: 1.5rem; height: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
}
.line-qty button:hover { border-color: var(--gold); color: var(--gold-d); }
.line-qty span { font-family: var(--f-mono); font-size: .76rem; min-width: 1.4rem; text-align: center; }
.line-price { font-family: var(--f-mono); font-size: .82rem; white-space: nowrap; }
.drawer-foot { padding: 1rem 1.3rem 1.4rem; border-top: var(--hair); background: var(--card); }
.drawer-tot { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.drawer-tot strong {
  font-family: var(--f-disp); font-weight: 500; font-size: 1.8rem; letter-spacing: 0;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── checkout ───────────────────────────────────────────────────────────────── */
.pay-steps {
  display: flex; gap: .4rem; list-style: none; counter-reset: s;
  margin: 0; padding: .9rem 1.3rem; border-bottom: var(--hair);
}
.pay-steps li {
  flex: 1; counter-increment: s; text-align: center;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  padding-top: 1.6rem; position: relative;
}
.pay-steps li::before {
  content: counter(s); position: absolute; top: 0; left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
}
.pay-steps li.on { color: var(--ink); }
.pay-steps li.on::before { background: var(--foil); border-color: transparent; color: #2A2010; }
.pay-body { flex: 1; overflow-y: auto; padding: 1.2rem 1.3rem 1.6rem; }

.fields { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.fields label { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.fields label.wide { grid-column: 1 / -1; }
.fields input, .fields textarea {
  width: 100%; margin-top: .3rem; font-family: var(--f-body); font-weight: 300; font-size: .92rem;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  padding: .6rem .75rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; resize: vertical;
}
.fields input:focus, .fields textarea:focus { border-color: var(--gold); outline: none; }
.pay-err { color: var(--bad); font-size: .8rem; margin: .8rem 0 0; }

.spec--pay { margin-bottom: 1.2rem; }
.upi {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--card); border: var(--hair); border-radius: 18px; padding: 1rem; box-shadow: var(--lift);
}
.upi-qr { flex: none; line-height: 0; padding: 8px; background: #FFF; border-radius: 12px; border: var(--hair); }
.upi-qr svg { display: block; width: 168px; height: 168px; }
.upi-side { flex: 1; min-width: 160px; }
.upi-lab { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .5rem; }
/* Who is being paid, not where. */
.upi-payee {
  font-family: var(--f-disp); font-size: 1.12rem; font-weight: 500;
  margin: 0 0 .75rem; line-height: 1.2;
}
.upi-amt { margin: 0 0 .3rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.upi-amt strong {
  display: block; font-family: var(--f-disp); font-weight: 500; font-size: 2rem; letter-spacing: 0;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.upi-ref { font-family: var(--f-mono); font-size: .7rem; color: var(--ink-2); margin: .4rem 0 0; }
.upi-apps { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-top: .9rem; }
.upi-app {
  text-align: center; text-decoration: none; font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .6rem .5rem;
}
.upi-app:hover { border-color: var(--gold); color: var(--gold-d); }
.upi-note {
  font-size: .74rem; line-height: 1.6; color: var(--ink-2);
  background: rgba(231,211,162,.26); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; padding: .7rem .85rem; margin: 1rem 0 0;
}

.done { text-align: center; padding: 1.5rem 0; }
.done-tick { color: var(--good); }
.done-tick svg { width: 62px; height: 62px; }
.done h3 { font-family: var(--f-disp); font-weight: 400; font-size: 1.8rem; margin: .8rem 0 .3rem; }
.done-ref { font-family: var(--f-mono); font-size: .86rem; color: var(--ink-2); margin: 0 0 1rem; }
.done-p { font-size: .86rem; color: var(--ink-2); max-width: 38ch; margin: 0 auto; line-height: 1.65; }

/* The handoff to WhatsApp wears WhatsApp's own green. It is the one colour on
   this page that is not ours, and that is the point: it tells you exactly which
   app is about to open before you commit to opening it. */
.btn--wa {
  background: #1FA855; border-color: #1FA855; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn--wa::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: var(--wa) center/contain no-repeat; mask: var(--wa) center/contain no-repeat;
}
.btn--wa:hover { background: #17924a; border-color: #17924a; color: #fff; }
.done-note { font-size: .74rem; color: var(--ink-2); margin: .7rem auto 0; max-width: 40ch; line-height: 1.6; }

@media (max-width: 520px) {
  .fields { grid-template-columns: 1fr; }
  .upi { justify-content: center; text-align: center; }
  .upi-payee { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}