/* ============================================================
   MYTH & ROOT — a storybook of scents.
   Rough paper, old press type, hand-inked wobble.
   ============================================================ */
:root{
  --paper:#F6ECE2;
  --paper-deep:#EDE0CC;
  --edge:#D9C9B0;
  --ink:#2A2722;
  --ink-soft:#4A443B;
  --sepia:#6F604E;
  --ox:#7B3A2E;
  --ox-deep:#5E2A20;
  --disp:'IM Fell English SC',serif;      /* old-press display */
  --fell:'IM Fell English',serif;         /* old-press text + italic */
  --fable:'IM Fell English',serif;
  --body:'Cormorant Garamond',Georgia,serif;
  --wrap:1140px;
  /* the hand-drawn wobble: sketchy asymmetric radii */
  --sketch:255px 18px 235px 20px/22px 240px 18px 250px;
  --sketch2:18px 245px 22px 240px/250px 20px 245px 16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  background:var(--paper) url('/assets/paper.jpg');
  background-size:640px 640px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}

/* ---- type ---- */
h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;letter-spacing:.015em;color:var(--ink)}
.eyebrow{font-family:var(--fell);font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sepia)}
.fable{font-family:var(--fable);font-style:italic;color:var(--sepia)}
.util{font-family:var(--fell);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sepia)}

/* ---- fleuron dinkus between sections ---- */
.dinkus{text-align:center;font-family:var(--fell);color:var(--sepia);font-size:1.5rem;
  letter-spacing:.8em;margin:0;line-height:1;user-select:none}
.dinkus::before{content:"\2766"}  /* ❦ */

/* ---- ornamental rule with diamond ---- */
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:1rem 0;color:var(--ink-soft)}
.rule::before,.rule::after{content:"";height:1px;width:64px;
  background:linear-gradient(90deg,transparent,var(--ink-soft))}
.rule::after{background:linear-gradient(90deg,var(--ink-soft),transparent)}
.rule span{font-size:.8rem}

/* ============================================================
   HAND-INKED FRAME — wobbly double border (SVG displacement)
   Usage: <div class="frame"><i class="fr-b"></i><i class="fr-b fr-b2"></i> …content
   ============================================================ */
.frame{position:relative;padding:clamp(18px,3vw,34px);
  background:var(--paper) url('/assets/paper.jpg');background-size:640px 640px}
.fr-b{position:absolute;inset:6px;border:2px solid var(--ink);pointer-events:none;
  filter:url(#wobble);opacity:.92}
.fr-b2{inset:13px;border-width:1px;opacity:.6;filter:url(#wobble2)}

/* ---- buttons: ink-stamped, sketchy edges ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--disp);font-size:.92rem;letter-spacing:.14em;
  padding:14px 30px;background:var(--ink);color:var(--paper);
  border:2px solid var(--ink);border-radius:var(--sketch);
  cursor:pointer;transition:background .25s,color .25s;min-height:50px;
  box-shadow:2px 3px 0 rgba(42,39,34,.18)}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ox{background:var(--ox);border-color:var(--ox);color:var(--paper);box-shadow:2px 3px 0 rgba(123,58,46,.22)}
.btn-ox:hover{background:transparent;color:var(--ox)}
.btn-ghost{background:transparent;color:var(--ink);border-radius:var(--sketch2)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ---- header: like a book's running head ---- */
.hdr{position:sticky;top:0;z-index:100;
  background:var(--paper) url('/assets/paper.jpg');background-size:640px 640px;
  border-bottom:2px solid var(--ink);box-shadow:0 1px 0 var(--paper),0 3px 0 rgba(42,39,34,.35)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:20px}
.brand{font-family:var(--disp);font-size:1.45rem;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{font-family:var(--fell);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);transition:color .2s;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ox);border-bottom-color:var(--ox)}
.cart-btn{position:relative;background:none;border:none;cursor:pointer;color:var(--ink);padding:4px;display:flex}
.cart-count{position:absolute;top:-7px;right:-9px;background:var(--ox);color:var(--paper);
  font-family:var(--body);font-size:.62rem;min-width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0 3px}
.burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;font-size:1.35rem}
@media(max-width:840px){.nav{display:none}.burger{display:block;margin-left:auto}}

/* ---- the wax-seal stamp ---- */
.seal{width:118px;height:118px;display:inline-block;transform:rotate(-8deg);opacity:.9}