/* ============================================================
   MYTH & ROOT — storybook pages
   ============================================================ */

/* ---------- HERO: the first page of a storybook ---------- */
.hero{position:relative;border-bottom:2px solid var(--ink);overflow:hidden}
.hero-in{padding:clamp(52px,9vw,110px) 26px clamp(44px,6vw,80px);text-align:center;position:relative}
.hero-h{font-size:clamp(2.7rem,7.5vw,5.4rem);line-height:1.02;margin:.35rem 0 .7rem}
.hero-sub{font-size:clamp(1.25rem,2.6vw,1.7rem);max-width:600px;margin:0 auto 2rem}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:1.8rem}
.hero-seal{margin-top:1.6rem}
.hero-fmt{margin-top:1rem}

/* ---------- section heads ---------- */
.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(34px,5vw,56px)}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.1rem);margin:.5rem 0}
.sec-lede{font-size:1.3rem}
.bestiary{padding:clamp(52px,8vw,96px) 0}

/* ---------- BESTIARY: specimens laid on a desk ---------- */
.bz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,48px)}
.bz-card{display:flex;flex-direction:column;transition:transform .35s}
.bz-card:nth-child(6n+1){transform:rotate(-1.1deg)}
.bz-card:nth-child(6n+2){transform:rotate(.7deg)}
.bz-card:nth-child(6n+3){transform:rotate(-.5deg)}
.bz-card:nth-child(6n+4){transform:rotate(.9deg)}
.bz-card:nth-child(6n+5){transform:rotate(-.8deg)}
.bz-card:nth-child(6n+6){transform:rotate(.5deg)}
.bz-card:hover{transform:rotate(0) translateY(-6px)}
.bz-num{text-align:center;margin-bottom:.7rem}
.bz-art{position:relative;aspect-ratio:1/1;overflow:hidden;
  box-shadow:0 2px 0 rgba(42,39,34,.12),0 14px 30px rgba(42,39,34,.18);
  border:1px solid rgba(42,39,34,.35)}
.bz-art img{width:100%;height:100%;object-fit:cover}
.bz-card:hover .bz-art{box-shadow:0 3px 0 rgba(42,39,34,.15),0 20px 44px rgba(42,39,34,.26)}
.bz-soon{position:absolute;top:12px;right:12px;z-index:3;background:var(--ox);color:var(--paper);
  font-family:var(--fell);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--sketch2);transform:rotate(2deg)}
.bz-meta{text-align:center;padding:16px 8px 4px}
.bz-meta h3{font-size:1.8rem}
.bz-meta .fable{font-size:1.15rem;margin:.15rem 0 .5rem}
.bz-notes{font-size:.72rem}
@media(max-width:880px){.bz-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.bz-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

/* ---------- storybook opening text block ---------- */
.opening{max-width:640px;margin:0 auto clamp(40px,6vw,64px);text-align:center}
.opening p{font-size:1.35rem;font-family:var(--fell);color:var(--ink-soft);line-height:1.75}
.opening p::first-letter{font-family:var(--disp);font-size:3.4em;float:left;line-height:.78;
  padding:.06em .12em 0 0;color:var(--ox)}

/* ---------- PROMISE / manifesto ---------- */
.promise{padding:clamp(36px,6vw,72px) 0 clamp(64px,9vw,110px)}
.promise-fr{padding:clamp(30px,5vw,56px)}
.promise-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,60px);align-items:center}
.promise-grid h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.08}
.promise-body p{margin:0 0 1rem;color:var(--ink-soft);font-size:1.15rem}
.promise-body p:first-child::first-letter{font-family:var(--disp);font-size:3em;float:left;
  line-height:.8;padding:.04em .1em 0 0;color:var(--ox)}
@media(max-width:760px){.promise-grid{grid-template-columns:1fr;gap:22px}}

/* ---------- PRODUCT page: a page from the book ---------- */
.pd{padding:clamp(34px,5vw,60px) 0 clamp(56px,8vw,96px)}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:start}
.pd-art{position:relative;aspect-ratio:1/1;overflow:hidden;transform:rotate(-1deg);
  box-shadow:0 3px 0 rgba(42,39,34,.12),0 18px 40px rgba(42,39,34,.2);
  border:1px solid rgba(42,39,34,.35)}
.pd-art img{width:100%;height:100%;object-fit:cover}
.pd-info{position:sticky;top:100px}
.pd-crumb{margin-bottom:1.1rem}
.pd-crumb a{color:var(--sepia);border-bottom:1px dotted var(--sepia)}
.pd-num{margin-bottom:.4rem}
.pd-name{font-size:clamp(2.8rem,5.6vw,4.2rem);line-height:.95;margin:.15rem 0}
.pd-line{font-size:1.7rem;margin:.45rem 0 1.1rem}
.pd-family{margin-bottom:1rem}
.pd-story{font-size:1.28rem;line-height:1.75;color:var(--ink-soft);margin:1.2rem 0;font-family:var(--fell)}
.pd-story::first-letter{font-family:var(--disp);font-size:3.2em;float:left;line-height:.78;
  padding:.05em .12em 0 0;color:var(--ox)}
.pd-notes{margin:1.7rem 0}
.pd-notes h4{font-family:var(--fell);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sepia);margin:0 0 .8rem}
.pd-note-row{display:flex;gap:10px;flex-wrap:wrap}
.pd-note{font-family:var(--fable);font-style:italic;font-size:1.15rem;color:var(--ink);
  border:1.5px solid var(--ink-soft);padding:7px 18px;border-radius:var(--sketch2);
  background:url('/assets/paper-deep.jpg');background-size:640px}
.pd-price{font-family:var(--disp);font-size:2rem;color:var(--ox);margin:1.5rem 0 .3rem}
.pd-fmt{margin-bottom:1.5rem}
.pd-buy{display:flex;gap:14px;flex-wrap:wrap}
.pd-buy .btn{flex:1 1 auto;min-width:190px}
.pd-soon-note{font-family:var(--fable);font-style:italic;color:var(--sepia);margin-top:1rem;font-size:1.1rem}
.pd-next{text-align:center;margin-top:clamp(40px,6vw,64px)}
.pd-next a{border-bottom:1px dotted var(--sepia)}
@media(max-width:760px){.pd-grid{grid-template-columns:1fr;gap:26px}.pd-info{position:static}.pd-art{transform:rotate(0)}}

/* ---------- SHOP ---------- */
.shop{padding:clamp(38px,6vw,72px) 0 clamp(56px,8vw,96px)}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,40px)}
.sh-card{display:flex;flex-direction:column;background:url('/assets/paper.jpg');background-size:640px;
  border:1.5px solid var(--ink-soft);box-shadow:0 2px 0 rgba(42,39,34,.1),0 12px 26px rgba(42,39,34,.14);
  transition:transform .3s,box-shadow .3s}
.sh-card:nth-child(3n+1){transform:rotate(-.6deg)}
.sh-card:nth-child(3n+2){transform:rotate(.4deg)}
.sh-card:nth-child(3n+3){transform:rotate(-.3deg)}
.sh-card:hover{transform:rotate(0) translateY(-5px);box-shadow:0 3px 0 rgba(42,39,34,.12),0 18px 38px rgba(42,39,34,.2)}
.sh-art{aspect-ratio:1/1;overflow:hidden;border-bottom:1.5px solid var(--ink-soft)}
.sh-art img{width:100%;height:100%;object-fit:cover}
.sh-body{padding:18px 18px 22px;text-align:center;display:flex;flex-direction:column;gap:.25rem}
.sh-body h3{font-size:1.6rem}
.sh-body .fable{font-size:1.08rem}
.sh-price{font-family:var(--disp);color:var(--ox);font-size:1.25rem;margin:.4rem 0}
.sh-btn{margin-top:.5rem}
@media(max-width:880px){.shop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.shop-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

/* ---------- content pages ---------- */
.page{padding:clamp(44px,7vw,88px) 0;max-width:720px;margin:0 auto}
.page h1{font-size:clamp(2.3rem,5.4vw,3.6rem);margin-bottom:.4rem}
.page h2{font-size:1.8rem;margin:2rem 0 .6rem}
.page p{color:var(--ink-soft);margin:0 0 1.1rem;font-size:1.15rem}
.page .lede{font-family:var(--fell);font-size:1.4rem}
.page .lede::first-letter{font-family:var(--disp);font-size:3.2em;float:left;line-height:.78;
  padding:.05em .12em 0 0;color:var(--ox)}

/* ---------- footer: colophon ---------- */
.ft{border-top:2px solid var(--ink);background:url('/assets/paper-deep.jpg');background-size:640px;
  padding:clamp(38px,5vw,58px) 0 26px;text-align:center}
.ft .brand{font-size:1.4rem}
.ft .fable{margin:.4rem 0 1.2rem;font-size:1.1rem}
.ft-links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem}
.ft-links a{font-family:var(--fell);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px dotted transparent}
.ft-links a:hover{color:var(--ox);border-bottom-color:var(--ox)}
.ft-note{border-top:1px solid rgba(42,39,34,.25);padding-top:1.2rem;max-width:520px;margin:0 auto}

/* ---------- mobile nav ---------- */
.mobnav{display:none;flex-direction:column;background:url('/assets/paper.jpg');background-size:640px;
  border-bottom:2px solid var(--ink);padding:8px 26px 16px}
.mobnav.open{display:flex}
.mobnav a{font-family:var(--fell);font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding:11px 0;border-bottom:1px dotted var(--edge)}

/* ---------- cart drawer ---------- */
.cart-ov{position:fixed;inset:0;z-index:200;background:rgba(42,39,34,0);pointer-events:none;transition:background .35s}
.cart-ov.on{background:rgba(42,39,34,.55);pointer-events:auto}
.cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);
  background:var(--paper) url('/assets/paper.jpg');background-size:640px;
  border-left:2px solid var(--ink);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .4s cubic-bezier(.32,.72,0,1);box-shadow:-16px 0 50px rgba(42,39,34,.3)}
.cart-panel.open{transform:none}
.uc-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:2px solid var(--ink)}
.uc-title{font-family:var(--disp);font-size:1.2rem;letter-spacing:.08em;color:var(--ink)}
.uc-x{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink);line-height:1}
.uc-items{flex:1 1 auto;overflow-y:auto;padding:8px 20px}
.uc-empty{text-align:center;padding:3rem 1rem;color:var(--sepia)}
.uc-empty .fable{font-size:1.25rem}
.uc-item{display:grid;grid-template-columns:54px 1fr auto;gap:12px;padding:16px 0;border-bottom:1px dotted var(--sepia);align-items:start}
.uc-thumb{width:54px;height:54px;border:1px solid var(--ink-soft);overflow:hidden;transform:rotate(-2deg)}
.uc-thumb img{width:100%;height:100%;object-fit:cover}
.uc-nm{font-family:var(--disp);font-size:1.1rem;color:var(--ink)}
.uc-ln{font-family:var(--fable);font-style:italic;font-size:.95rem;color:var(--sepia);margin:.1rem 0 .4rem}
.uc-qty{display:flex;align-items:center;gap:.5rem}
.uc-qty button{width:23px;height:23px;border:1.5px solid var(--ink-soft);background:none;color:var(--ink);cursor:pointer;border-radius:50%;line-height:1;font-size:.85rem}
.uc-qty span{font-size:.85rem;min-width:16px;text-align:center}
.uc-rm{background:none;border:none;color:var(--sepia);font-family:var(--fell);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;cursor:pointer;margin-left:.4rem}
.uc-price{font-family:var(--fable);font-size:1.1rem;color:var(--ink);white-space:nowrap}
.uc-foot{flex:0 0 auto;border-top:2px solid var(--ink);padding:16px 20px}
.uc-sub{display:flex;justify-content:space-between;font-family:var(--disp);font-size:1.15rem;color:var(--ink);margin-bottom:.3rem}
.uc-note{font-family:var(--fable);font-style:italic;font-size:.92rem;color:var(--sepia);margin-bottom:1rem}
.uc-foot .btn{width:100%}

/* ---------- CHECKOUT ---------- */
.co-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,52px);align-items:start}
.co-form .eyebrow{display:block;margin-bottom:1rem}
.co-fields{display:flex;flex-direction:column;gap:12px}
.co-in{font-family:var(--body);font-size:1.05rem;padding:13px 16px;
  background:url('/assets/paper.jpg');background-size:640px;
  border:1.5px solid var(--ink-soft);color:var(--ink);width:100%;border-radius:var(--sketch2)}
.co-in:focus{outline:none;border-color:var(--ox)}
.co-ta{min-height:84px;resize:vertical}
.co-pay{margin:1.4rem 0}
.co-paynote{border:1.5px solid var(--ink-soft);padding:1rem 1.2rem;border-radius:var(--sketch);
  background:url('/assets/paper-deep.jpg');background-size:640px}
.co-paynote b{font-family:var(--fell);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:block}
.co-paynote em{font-family:var(--fable);font-style:italic;color:var(--sepia);display:block;margin-top:.3rem}
.co-err{color:var(--ox);font-family:var(--fable);font-style:italic;min-height:1.4em;margin:.6rem 0}
.co-place{width:100%}
.co-summary{border:1.5px solid var(--ink-soft);background:url('/assets/paper-deep.jpg');background-size:640px;padding:24px;transform:rotate(.4deg)}
.co-summary .eyebrow{display:block;margin-bottom:1rem}
.co-line{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dotted var(--sepia)}
.co-ln{font-family:var(--disp);font-size:1.05rem;color:var(--ink)}
.co-ls{font-family:var(--fable);font-style:italic;font-size:.95rem;color:var(--sepia)}
.co-lp{font-family:var(--fable);font-size:1.05rem;color:var(--ink);white-space:nowrap}
.co-tot{display:flex;justify-content:space-between;font-family:var(--disp);font-size:1.3rem;color:var(--ink);margin-top:1rem}
.co-note{font-family:var(--fable);font-style:italic;font-size:.95rem;color:var(--sepia);margin-top:1rem}
.co-empty{text-align:center;padding:4rem 1rem}
.co-empty .fable{font-size:1.3rem;margin-bottom:1.4rem}
.co-done{text-align:center;max-width:540px;margin:2rem auto}
.co-crest{font-family:var(--disp);font-size:1.5rem;letter-spacing:.18em;color:var(--ink)}
.co-drule{height:1px;background:var(--ink-soft);width:80px;margin:1.2rem auto}
.co-done h2{font-size:2.2rem;margin:.6rem 0}
.co-done p{color:var(--ink-soft);font-size:1.15rem}
.co-dsub{font-family:var(--fable);font-style:italic;color:var(--sepia);margin-top:.8rem}
.co-dpid{display:inline-block;margin-top:1rem;font-family:var(--fell);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sepia)}
@media(max-width:760px){.co-grid{grid-template-columns:1fr;gap:24px}.co-summary{transform:none}}

/* ---------- logo seal + gallery + product bottle shot ---------- */
.seal-img{width:132px;height:132px;border-radius:50%;object-fit:cover;transform:rotate(-6deg);
  box-shadow:0 4px 14px rgba(42,39,34,.22);border:1px solid rgba(42,39,34,.25)}
.gallery{padding:clamp(30px,5vw,64px) 0 clamp(20px,3vw,36px)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px)}
.gal-it{aspect-ratio:4/5;overflow:hidden;border:1.5px solid var(--ink);
  box-shadow:0 3px 0 rgba(42,39,34,.12),0 14px 32px rgba(42,39,34,.22)}
.gal-it:nth-child(1){transform:rotate(-.8deg)}
.gal-it:nth-child(2){transform:rotate(.5deg)}
.gal-it:nth-child(3){transform:rotate(-.4deg)}
.gal-it img{width:100%;height:100%;object-fit:cover}
@media(max-width:680px){.gal-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

.pd-left{display:flex;flex-direction:column;gap:clamp(18px,3vw,28px)}
.pd-shot{overflow:hidden;transform:rotate(.7deg);border:1.5px solid var(--ink);
  box-shadow:0 3px 0 rgba(42,39,34,.12),0 14px 32px rgba(42,39,34,.2)}
.pd-shot img{width:100%;display:block}
@media(max-width:760px){.pd-shot{transform:none}}

/* ---------- coupon ---------- */
.co-coupon{display:flex;gap:8px;margin:1rem 0 .2rem}
.co-coupon .co-in{flex:1 1 auto;text-transform:uppercase;letter-spacing:.08em}
.co-coupon .btn{flex:0 0 auto;padding:10px 20px;min-height:0;font-size:.8rem}
.co-cmsg{font-family:var(--fable);font-style:italic;font-size:.95rem;min-height:1.3em;margin-bottom:.6rem}
.co-cmsg.ok{color:#3E6B3A}
.co-cmsg.bad{color:var(--ox)}
.co-disc{display:flex;justify-content:space-between;font-family:var(--fable);font-size:1.05rem;color:#3E6B3A;padding:10px 0;border-bottom:1px dotted var(--sepia)}
.co-strike{text-decoration:line-through;opacity:.55;margin-right:.5em}