@charset "UTF-8";
/* ===================== MehndikaGardens — Scrapbook theme ===================== */

/* palette: back to the original cream / maroon / gold — with --camo added as a
   deliberate accent used in a few spots (switch, some doodles) for a hint of green. */
:root{
  --cream:#f6efdd;
  --paper:#efe4c8;
  --paper-dark:#e6d8b4;
  --ink:#2c2420;
  --maroon:#5a1626;
  --maroon-dark:#3a0e19;
  --maroon-soft:#7c2438;
  --gold:#b4893f;
  --gold-soft:#dcc48f;
  --sage:#5f6b4a;
  --camo:#5f6b4a;         /* hint of camo green */
  --camo-dark:#3f4832;
  --shadow: 0 18px 40px -18px rgba(43,20,14,.35);
  --shadow-sm: 0 8px 20px -10px rgba(43,20,14,.35);
  --serif:'Playfair Display', Georgia, serif;
  --script:'Caveat', cursive;
  --sans:'Jost', 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
.script{font-family:var(--script);font-weight:600}

/* paper texture applied globally via layered gradients (no image asset needed) */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 15% 20%, rgba(180,137,63,.08), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(90,22,38,.06), transparent 45%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 1px, transparent 1px 3px),
    var(--cream);
}

/* ===================== progress vine ===================== */
#progressVine{
  position:fixed; top:0; left:0; width:100%; height:6px; z-index:900;
  pointer-events:none;
}
#progressVine path{
  fill:none; stroke:var(--maroon); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400;
  transition:stroke-dashoffset .1s linear;
}

/* ===================== cursor dot ===================== */
#cursorDot{
  position:fixed; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--maroon); pointer-events:none; z-index:950;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .25s ease, width .2s, height .2s, background .2s;
  mix-blend-mode:multiply;
}
#cursorDot.show{opacity:.55}
#cursorDot.big{width:44px;height:44px;background:rgba(90,22,38,.12)}
@media (hover:none){ #cursorDot{display:none} }

/* ===================== nav ===================== */
#siteNav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(18px,4vw,48px);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
#siteNav.scrolled{
  background:rgba(246,239,221,.86);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 24px -10px rgba(43,20,14,.25);
  padding-top:10px; padding-bottom:10px;
}
.brandmark{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.15rem;letter-spacing:.02em;color:var(--maroon-dark)}
.brandmark img{width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--cream),0 0 0 3px var(--gold)}
.brandmark em{font-style:italic;color:var(--maroon)}
#siteNav nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
#siteNav nav a{
  font-size:.92rem; letter-spacing:.02em; position:relative; padding:4px 2px;
}
#siteNav nav a:not(.navcta)::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
#siteNav nav a:not(.navcta):hover::after{transform:scaleX(1)}
.navcta{
  background:var(--maroon); color:var(--cream)!important; padding:9px 18px!important;
  border-radius:100px; font-weight:500; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, background .25s ease;
}
.navcta:hover{background:var(--maroon-dark); transform:translateY(-2px)}
#navToggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:none;cursor:pointer;position:relative;z-index:2}
#navToggle span{display:block;height:2px;background:var(--maroon-dark);border-radius:2px;transition:transform .3s ease, opacity .3s ease}
#navToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#navToggle.open span:nth-child(2){opacity:0}
#navToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{position:fixed; inset:0; background:rgba(43,20,14,.35); z-index:790; opacity:0; pointer-events:none; transition:opacity .35s ease}
.nav-backdrop.open{opacity:1; pointer-events:auto}

/* ===================== hero / sketchbook ===================== */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:clamp(84px,10vh,120px) clamp(16px,4vw,48px) 60px;
  background:
    radial-gradient(circle at 12% 15%, rgba(180,137,63,.12), transparent 42%),
    radial-gradient(circle at 90% 85%, rgba(90,22,38,.12), transparent 46%),
    var(--paper);
}
.paper-grain{position:absolute;inset:0;mix-blend-mode:overlay;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0 2px, transparent 2px 4px);}

.tape{position:absolute; width:110px; height:38px; background:linear-gradient(100deg, rgba(255,255,255,.65), rgba(255,255,255,.32)); opacity:.7; box-shadow:0 4px 10px rgba(0,0,0,.15); z-index:3}
.corner-tl{top:18px; left:-18px; transform:rotate(-38deg)}
.corner-br{bottom:26px; right:-18px; transform:rotate(-38deg)}

.hero-copy{position:relative; z-index:2; text-align:center; max-width:560px; margin-bottom:clamp(14px,2.4vh,26px)}
.hero-kicker{display:inline-block;font-family:var(--script);font-size:1.3rem;color:var(--maroon);margin-bottom:6px}
.hero-title{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,5.4vw,3.8rem);line-height:1.08;margin:0 0 14px}
.hero-title.dark{color:var(--maroon-dark)}
.hero-title span{display:block}
.hero-title .script{font-family:var(--script);font-weight:600;color:var(--maroon);font-size:1.05em}
.hl0{opacity:0;transform:translateY(34px);animation:hlin 1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes hlin{to{opacity:1;transform:none}}
.hero-sub{max-width:46ch;margin:0 auto;font-size:1.05rem;font-weight:300;color:#5a4f42}
.hero-sub.dark{color:#5a4f42}
.hero-actions{position:relative;z-index:2;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:clamp(24px,4vh,44px)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:100px;font-size:.95rem;font-weight:500;letter-spacing:.01em;cursor:pointer;border:1.5px solid transparent;transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, color .3s, border-color .3s}
.btn-solid{background:var(--maroon);color:var(--cream);box-shadow:var(--shadow-sm)}
.btn-solid:hover{background:var(--maroon-dark); transform:translateY(-3px)}
.btn-outline{border-color:var(--maroon-dark);color:var(--maroon-dark);background:transparent}
.btn-outline:hover{background:var(--maroon-dark); color:var(--cream); transform:translateY(-3px)}
.sketch-btn{color:var(--maroon-dark); border-color:var(--maroon-dark)}
.sketch-btn:hover{background:var(--maroon-dark); color:var(--cream)}

.scroll-hint{position:relative; margin-top:34px; z-index:2; color:var(--maroon-dark); opacity:.6; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px}
.scroll-hint span{width:1px;height:34px;background:var(--maroon-dark);opacity:.5;position:relative;overflow:hidden}
.scroll-hint span::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--gold);animation:hintdrip 2.2s ease-in-out infinite}
@keyframes hintdrip{0%{top:-100%}60%{top:100%}100%{top:100%}}

/* ---- botanical doodle field (hero + every section, via JS scatterDoodles) ---- */
.doodle-field{position:absolute; inset:0; z-index:0; overflow:hidden; color:var(--maroon-dark); pointer-events:none}
.doodle-svg{
  position:absolute; width:90px; height:90px; opacity:.16;
  animation:doodleDrift 14s ease-in-out infinite;
  pointer-events:auto; cursor:default;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.doodle-svg:hover{opacity:.55; transform:scale(1.35) rotate(14deg)!important; animation-play-state:paused}
.doodle-svg.d1{top:10%; left:5%; width:110px; height:110px; animation-duration:16s}
.doodle-svg.d2{top:16%; right:8%; width:80px; height:80px; color:var(--gold); animation-duration:19s; animation-delay:-4s}
.doodle-svg.d3{bottom:8%; left:9%; width:70px; height:100px; animation-duration:21s; animation-delay:-9s}
.doodle-svg.d4{bottom:14%; right:6%; width:95px; height:95px; color:var(--gold); animation-duration:17s; animation-delay:-6s}
.doodle-svg.d5{top:46%; left:1.5%; width:60px; height:60px; opacity:.1; animation-duration:23s; animation-delay:-11s}
.doodle-svg.d6{top:42%; right:2%; width:70px; height:70px; color:var(--gold); opacity:.13; animation-duration:20s; animation-delay:-3s}
@keyframes doodleDrift{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(6px,-10px) rotate(6deg)}
}
@media (max-width:720px){ .doodle-svg{display:none} .doodle-svg.d1,.doodle-svg.d4{display:block} }

/* scattered per-section doodles injected by JS — decorative only, never blocks clicks */
.doodle-scatter{position:absolute; opacity:.14; color:var(--maroon-dark); pointer-events:none; z-index:0;
  animation:doodleDrift ease-in-out infinite;}
.doodle-scatter.tone-b{color:var(--camo)}
footer .doodle-scatter{color:var(--cream); opacity:.14}
footer .doodle-scatter.tone-b{color:var(--gold-soft)}
@media (max-width:640px){ .doodle-scatter{display:none} }

/* ---- the book (the hero itself — background-less pages that sit right on the paper) ---- */
.book-wrap{position:relative; width:100%; max-width:1180px; display:flex; flex-direction:column; align-items:center}
/* loose pencil-shading doodles behind the whole scrapbook — hand-placed hatch
   clusters (not a uniform tiled pattern, which read as a technical grid)
   spread across the full horizontal span so both margins either side of the
   book, and the area past its own edges, carry graphite shading. */
.pencil-shade-field{
  position:absolute; left:-9vw; right:-9vw; top:-8%; bottom:-8%;
  pointer-events:none; z-index:0; color:var(--maroon-dark); overflow:visible;
}
.pencil-shade{position:absolute}
.pencil-shade.s1{left:0%;   top:6%;  width:120px; opacity:.4;  transform:rotate(-8deg)}
.pencil-shade.s2{left:7%;   top:58%; width:86px;  opacity:.28; transform:rotate(16deg)}
.pencil-shade.s3{left:17%;  top:2%;  width:70px;  opacity:.22; transform:rotate(-22deg)}
.pencil-shade.s4{left:29%;  top:74%; width:96px;  opacity:.26; transform:rotate(9deg)}
.pencil-shade.s5{right:0%;  top:8%;  width:120px; opacity:.4;  transform:rotate(10deg) scaleX(-1)}
.pencil-shade.s6{right:8%;  top:60%; width:86px;  opacity:.28; transform:rotate(-15deg) scaleX(-1)}
.pencil-shade.s7{right:18%; top:0%;  width:70px;  opacity:.22; transform:rotate(20deg) scaleX(-1)}
.pencil-shade.s8{right:30%; top:72%; width:96px;  opacity:.26; transform:rotate(-9deg) scaleX(-1)}
@media (max-width:900px){
  .pencil-shade.s3, .pencil-shade.s4, .pencil-shade.s7, .pencil-shade.s8{display:none}
}
.book{position:relative; z-index:1; width:100%; max-width:100%; display:flex; align-items:center; justify-content:center; gap:14px; touch-action:pan-y}
.book-shadow{position:absolute; left:50%; bottom:-14px; width:66%; max-width:640px; transform:translateX(-50%); height:30px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(43,20,14,.18), transparent 72%); filter:blur(4px); z-index:0}

.flip-frame{
  position:relative; flex:1 1 auto; min-width:0; max-width:960px;
  border:1px solid rgba(43,20,14,.1); /* the "book outline" — barely there on purpose */
  border-radius:6px;
  box-shadow:
    0 30px 50px -22px rgba(43,20,14,.4),
    0 10px 18px -10px rgba(43,20,14,.28);
  perspective:1800px;
}
/* bound-page stack: a few layered "sheet edges" peeking out behind the visible
   spread, so the flat plate art reads as one leaf of a much thicker book */
.flip-frame:before, .flip-frame:after{
  content:""; position:absolute; top:5px; bottom:5px; width:100%;
  border-radius:5px; z-index:-1; background:var(--paper-dark);
  box-shadow:0 8px 16px -8px rgba(43,20,14,.3);
}
.flip-frame:before{left:-4px; transform:rotate(-.6deg)}
.flip-frame:after{left:4px; transform:rotate(.5deg); background:var(--paper)}
/* the spine: a soft dark gutter down the centre of the spread, since each
   plate image already depicts an open two-page layout */
.flip-frame .spine-shadow{
  position:absolute; top:0; bottom:0; left:50%; width:64px; margin-left:-32px; z-index:4;
  pointer-events:none; mix-blend-mode:multiply; opacity:.4;
  background:linear-gradient(90deg, transparent, rgba(43,20,14,.14) 46%, rgba(43,20,14,.2) 50%, rgba(43,20,14,.14) 54%, transparent);
}
.flip-frame.mode-real .spine-shadow{mix-blend-mode:normal; opacity:.3}

/* symmetric hover affordance for turning the page either way — the flip library's
   own corner-hover preview only ever registers on the right edge in our full-width
   single-page layout (its "portrait" mode still models a phantom left half that the
   cursor can never actually reach), so both corners are recreated here in CSS,
   driven by JS toggling .hint-left/.hint-right on .book as the cursor crosses thirds. */
.corner-hint{
  position:absolute; bottom:0; width:38px; height:38px; z-index:5; pointer-events:none;
  opacity:0; transform:scale(.5); transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.corner-hint-left{left:0; transform-origin:bottom left;
  background:linear-gradient(135deg, transparent 50%, rgba(43,20,14,.22) 50%);
  border-radius:0 0 0 5px; box-shadow:-2px 2px 6px rgba(43,20,14,.15);}
.corner-hint-right{right:0; transform-origin:bottom right;
  background:linear-gradient(225deg, transparent 50%, rgba(43,20,14,.22) 50%);
  border-radius:0 0 5px 0; box-shadow:2px 2px 6px rgba(43,20,14,.15);}
.book.hint-left .corner-hint-left,
.book.hint-right .corner-hint-right{opacity:1; transform:scale(1)}
/* the library stamps its own "stf__parent" class (with transform:translateZ(0)) onto
   #bookFlip itself, making it the nearest stacking context — paint OUR page colour
   there so multiply-blending the canvas's white paper background onto it reads as
   "no background at all" against the rest of the hero. */
#bookFlip{margin:0 auto; background:var(--paper); transition:opacity .22s ease, background .3s ease}
#bookFlip canvas{display:block; background:transparent!important; mix-blend-mode:multiply}
.flip-frame.mode-real #bookFlip canvas{mix-blend-mode:normal}
.flip-frame.mode-real #bookFlip{background:transparent}
.flip-frame.switching #bookFlip{opacity:.15}

.page-arrow{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid rgba(90,22,38,.2);
  background:rgba(245,240,225,.6); color:var(--maroon-dark); font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:background .25s ease, transform .25s ease, color .25s ease;
}
.page-arrow:hover{background:var(--maroon-dark); color:var(--cream); transform:scale(1.08)}
.page-arrow:disabled{opacity:.25; cursor:default}
.page-arrow:disabled:hover{background:rgba(245,240,225,.6); color:var(--maroon-dark); transform:none}

/* ---- sketch / real toggle switch ---- */
.mode-switch{display:flex; align-items:center; gap:10px}
.ms-label{font-family:var(--script); font-size:1.15rem; color:#8a7a63; transition:color .25s ease}
.ms-label.active{color:var(--maroon-dark)}
.switch{
  position:relative; width:52px; height:28px; border-radius:100px; border:1px solid rgba(90,22,38,.25);
  background:#e5dabd; cursor:pointer; padding:0; flex:0 0 auto;
}
.switch .knob{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:var(--maroon); box-shadow:0 2px 4px rgba(0,0,0,.3);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.switch[aria-checked="true"] .knob{transform:translateX(24px); background:var(--camo)}
.switch:disabled{opacity:.35; cursor:default}
.mode-switch:has(.switch:disabled) .ms-label{opacity:.35}

.book-footer{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:26px}
.plate-caption{font-size:1.5rem; color:var(--maroon-dark); min-height:1.6em}
.book-hint{margin-top:16px; font-size:.78rem; color:#8a7a63; text-align:center; max-width:44ch}

@media (max-width:720px){
  .page-arrow{width:34px;height:34px;font-size:1.05rem}
  .book-hint{display:none}
}

/* ===================== torn edges between sections ===================== */
.torn-edge{
  height:34px; margin-top:-1px; position:relative; z-index:5;
  background:var(--cream);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M0,0 L0,14 Q10,20 20,13 T40,14 T60,12 T80,15 T100,11 T120,14 T140,12 T160,15 T180,12 T200,14 L200,0 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M0,0 L0,14 Q10,20 20,13 T40,14 T60,12 T80,15 T100,11 T120,14 T140,12 T160,15 T180,12 T200,14 L200,0 Z'/></svg>");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.torn-edge.flip{transform:scaleY(-1)}

/* ===================== generic page/section ===================== */
.page{position:relative; padding:clamp(70px,10vw,120px) 0; background:var(--cream)}
.page:nth-of-type(even){background:var(--paper)}
.page-inner{max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,48px); display:flex; gap:clamp(30px,6vw,80px); align-items:center}
.page-inner.narrow{max-width:760px; flex-direction:column; text-align:left}
.page-inner.wide{max-width:1280px; flex-direction:column}
.page-inner.center{align-items:center; text-align:center}
@media (max-width:860px){ .page-inner{flex-direction:column} }

.eyebrow{font-family:var(--script); font-size:1.35rem; color:var(--maroon); display:block; margin-bottom:6px}
.eyebrow.center{text-align:center}
.back-link{display:inline-flex; align-items:center; gap:6px; font-size:.88rem; color:var(--maroon-dark); opacity:.75; text-decoration:none; margin-bottom:10px; transition:opacity .2s ease}
.back-link:hover{opacity:1}
.section-title{font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,4vw,3rem); line-height:1.15; margin:0 0 18px; color:var(--maroon-dark)}
.section-title.center{text-align:center}
.muted{color:#5a4f42; font-size:1.02rem; line-height:1.7; max-width:60ch}
.muted.small{font-size:.85rem; opacity:.75}
.center .muted{margin-left:auto;margin-right:auto}

/* ===================== draw-your-own-henna ===================== */
.draw-toolbar{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:22px 30px;
  margin:0 auto 20px; padding:16px 20px; max-width:640px;
  background:#fffdf8; border:1px solid rgba(90,22,38,.14); border-radius:12px; box-shadow:var(--shadow-sm);
}
.draw-tool-group{display:flex; flex-direction:column; align-items:center; gap:8px}
.draw-tool-group[hidden]{display:none}
.draw-tool-label{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#8a7d6c}

.swatch-row{display:flex; gap:8px}
.swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer;
  background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); transition:transform .2s ease, border-color .2s ease;
}
.swatch:hover{transform:scale(1.12)}
.swatch.active{border-color:var(--maroon-dark); transform:scale(1.15)}

.mode-row{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.mode-btn{
  padding:7px 12px; border-radius:100px; border:1px solid rgba(90,22,38,.2); background:transparent;
  font-size:.82rem; color:#5a4f42; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.mode-btn:hover{border-color:var(--maroon)}
.mode-btn.active{background:var(--maroon); color:var(--cream); border-color:var(--maroon)}

#brushSize{accent-color:var(--maroon); width:110px}

.draw-canvas-wrap{
  position:relative; margin:0 auto; width:100%; max-width:640px; aspect-ratio:4/3;
  border-radius:8px; overflow:hidden; background:var(--paper);
  box-shadow:var(--shadow); border:1px solid rgba(43,20,14,.14);
}
#drawCanvas{width:100%; height:100%; display:block; cursor:crosshair; touch-action:none}
.draw-hint{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  margin:0; font-family:var(--script); font-size:1.1rem; color:rgba(90,22,38,.4);
  pointer-events:none; transition:opacity .3s ease;
}
.draw-hint.gone{opacity:0}
.draw-controls{margin-top:22px; display:flex; justify-content:center; gap:14px}

@media (max-width:640px){
  .draw-toolbar{gap:18px 22px; padding:14px}
}

/* ===================== pricing ===================== */
.price-sheet{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:36px; width:100%; margin:36px 0 30px; text-align:left}
.price-col h3{font-family:var(--serif); color:var(--maroon-dark); font-size:1.2rem; margin:0 0 14px; text-align:center}
.price-list{display:flex; flex-direction:column; gap:0}
.price-list li{display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px dashed rgba(90,22,38,.2)}
.price-list li span{color:#4a3f34}
.price-list li em{font-style:normal; font-family:var(--script); font-size:1.15rem; color:var(--maroon)}
.price-note{font-size:.82rem; color:#6b6053; line-height:1.5; margin:12px 0 0}

/* ===================== reveal system ===================== */
.rv{opacity:0; transform:translateY(30px) scale(.98); transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
.rt{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1)}
.rt.in{opacity:1; transform:none}

/* ===================== polaroid ===================== */
.polaroid{
  background:#fffdf8; padding:14px 14px 46px; box-shadow:var(--shadow);
  transform:rotate(var(--rot,-3deg)); position:relative; flex-shrink:0; width:100%;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.polaroid:hover{transform:rotate(0deg) scale(1.02); box-shadow:0 26px 50px -18px rgba(43,20,14,.45)}
.polaroid img{width:100%; aspect-ratio:4/5; object-fit:cover; filter:sepia(.06) saturate(1.05)}
.polaroid .cap{position:absolute; left:0; right:0; bottom:10px; text-align:center; color:var(--maroon-dark); font-size:1.25rem}

/* ===================== sticky note ===================== */
.sticky-note{
  background:var(--gold-soft); padding:22px 22px 18px; max-width:320px;
  box-shadow:var(--shadow-sm); position:relative; margin-top:26px;
}
.sticky-note::before{content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-4deg);width:60px;height:20px;background:rgba(255,255,255,.5);box-shadow:0 3px 6px rgba(0,0,0,.12)}
.sticky-note p{margin:0 0 6px; font-family:var(--serif); font-style:italic; color:#3a2f18; line-height:1.5}
.sticky-note .script{color:var(--maroon-dark)}
.tilt-l{transform:rotate(-3deg)}
.tilt-r{transform:rotate(3deg)}

/* ===================== index cards (services) ===================== */
.index-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:44px}
.index-card{
  background:#fffdf8; border:1px solid rgba(90,22,38,.12); border-left:5px solid var(--maroon);
  padding:22px 20px; box-shadow:var(--shadow-sm); opacity:0; transform:translateY(26px) rotate(var(--r,0deg));
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.index-card.in{opacity:1; transform:rotate(var(--r,0deg))}
.index-card .num{font-family:var(--script); font-size:1.5rem; color:var(--gold); display:block; margin-bottom:4px}
.index-card h3{font-family:var(--serif); font-size:1.15rem; margin:0 0 6px; color:var(--maroon-dark)}
.index-card p{margin:0; font-size:.92rem; color:#5a4f42; line-height:1.55}

/* ===================== gallery / sketchbook viewer ===================== */
.gallery-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap}

.sb-wrap{display:grid; justify-items:center; gap:16px; width:100%}
.sb-stage{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; max-width:640px; margin:0 auto; position:relative}
.sb-arrow{
  flex:none; width:38px; height:38px; border-radius:50%; border:1px solid rgba(44,36,32,.15);
  background:rgba(255,252,244,.7); display:inline-flex; align-items:center; justify-content:center;
  color:#5a4f42; cursor:pointer; transition:.2s; z-index:9;
}
.sb-arrow:hover{color:var(--maroon); border-color:var(--maroon); background:#fff}
.sb-arrow svg{width:16px; height:16px}

.sb-3d{position:relative; flex:1 1 auto; min-width:0; max-width:460px; perspective:1800px; padding-left:6px}
.sb-book{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:4px; overflow:hidden;
  background:linear-gradient(180deg,#fffdf6,var(--paper) 12%,var(--paper) 88%,#efe0bd);
  box-shadow:0 2px 0 #fff inset, var(--shadow); touch-action:pan-y; cursor:grab;
}
.sb-book:active{cursor:grabbing}
/* bound-page stack peeking out on the spine side, so a single photo still reads
   as one leaf of a thicker sketchbook rather than a loose print */
.sb-3d:before, .sb-3d:after{
  content:""; position:absolute; top:6px; bottom:6px; left:0; right:0;
  border-radius:4px; z-index:-1; background:var(--paper-dark);
  box-shadow:0 8px 16px -8px rgba(43,20,14,.3);
}
.sb-3d:before{left:-5px; right:5px; transform:rotate(-.7deg)}
.sb-3d:after{left:-2px; right:2px; transform:rotate(.5deg); background:var(--paper)}
.sb-plate{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:8%; backface-visibility:hidden}
.sb-plate.incoming, .sb-plate.leaving{transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .38s}
.sb-photo-mount{
  position:relative; width:100%; height:100%; border-radius:2px; overflow:hidden; background:var(--paper);
  box-shadow:0 10px 26px -12px rgba(43,20,14,.5), 0 2px 0 rgba(255,255,255,.6) inset;
  transform:rotate(var(--r,0deg));
}
.sb-photo-mount img{
  width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none;
  transform:scale(var(--zoom,1)); transform-origin:center; transition:transform .18s ease, filter .6s ease;
}
.sb-tape{position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-3deg); width:64px; height:26px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7); box-shadow:0 2px 4px rgba(0,0,0,.12); z-index:4}
.sb-plate-num{position:absolute; bottom:4%; right:6%; font-size:11px; letter-spacing:.1em; color:rgba(44,36,32,.4)}

/* sketch mode, reused for the viewer's live photo */
body.sketch-mode .sb-photo-mount img{
  filter:grayscale(1) contrast(1.55) brightness(1.18) saturate(0);
}
body.sketch-mode .sb-caption::before{content:'✎ sketch — '}

/* draggable magnifier */
.loupe{position:absolute; left:0; top:0; width:170px; height:170px; pointer-events:none; opacity:0; transition:opacity .2s ease; z-index:20; will-change:transform}
.loupe.on{opacity:1}
.loupe .ring{position:absolute; inset:0; border-radius:50%; pointer-events:auto; cursor:grab;
  box-shadow:0 1px 2px rgba(58,44,26,.3),0 10px 18px rgba(58,44,26,.24),0 24px 38px rgba(58,44,26,.18)}
.loupe.held .ring{cursor:grabbing}
.loupe .ring:before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(146deg,#fdf7e9 0%,#e6d7b4 14%,var(--gold) 32%,#7d6740 50%,#cdbb92 66%,#f4ead3 80%,#9b8459 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8), inset 0 -2px 3px rgba(70,52,26,.5);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 87%,#000 89% 100%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 87%,#000 89% 100%);
}
/* a longer, Mjolnir-style handle: brass collar where it meets the glass,
   a wrapped-leather shaft, and a squared dark pommel cap at the far end */
.loupe .grip{
  position:absolute; left:50%; top:50%; width:116px; height:20px; transform-origin:0 50%;
  transform:rotate(40deg) translate(60px,-50%); border-radius:4px; pointer-events:auto; cursor:grab;
  background:
    linear-gradient(180deg,rgba(255,255,255,.2) 0 16%,transparent 48%,rgba(0,0,0,.34) 100%),
    repeating-linear-gradient(90deg,#5a3a22 0 5px,#33200f 5px 6.5px,#5a3a22 6.5px 11.5px,#241609 11.5px 13px);
  box-shadow:0 10px 18px rgba(20,12,6,.35);
}
.loupe .grip:before{
  content:""; position:absolute; left:-8px; top:-4px; bottom:-4px; width:20px; border-radius:4px;
  background:linear-gradient(90deg,#f4ead3,var(--gold) 45%,#7d6740 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6), 0 3px 8px rgba(58,44,26,.3);
}
.loupe .grip:after{
  content:""; position:absolute; right:-11px; top:-7px; bottom:-7px; width:24px; border-radius:5px;
  background:linear-gradient(90deg,#241609,#4a2f1a 50%,#1a0f06 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.15);
}
.lens{
  position:absolute; inset:11px; border-radius:50%; overflow:hidden; background-repeat:no-repeat; background-color:#111;
  box-shadow:inset 0 0 0 1px rgba(52,40,22,.55), inset 0 4px 12px rgba(40,30,14,.28), inset 0 -7px 16px rgba(255,250,240,.14);
}
@media (pointer:coarse){ .loupe{display:none} }

.sb-caption{font-size:1.15rem}
.sb-tools{
  display:flex; align-items:center; gap:6px; border:1px solid rgba(44,36,32,.15); border-radius:999px;
  padding:5px 7px; background:rgba(255,252,244,.72); backdrop-filter:blur(6px);
}
.tool{width:28px; height:28px; border-radius:50%; border:0; background:transparent; color:#5a4f42;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.18s}
.tool:hover{background:#fff; color:var(--maroon)}
.tool[aria-pressed="true"]{background:rgba(90,22,38,.12); color:var(--maroon)}
.tool:disabled{opacity:.3; cursor:default}
.tool svg{width:15px; height:15px}
.tool-sep{width:1px; height:16px; background:rgba(44,36,32,.15); margin:0 2px}
/* the hero's loupe toggle sits alone in the book-footer (no .sb-tools pill
   around it), so it needs its own visible border/background as a button */
.tool-loupe{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(90,22,38,.2);
  background:rgba(245,240,225,.6); color:var(--maroon-dark);
}
.tool-loupe svg{width:18px; height:18px}
.tool-loupe:hover{background:var(--maroon-dark); color:var(--cream)}
.tool-loupe[aria-pressed="true"]{background:var(--maroon-dark); color:var(--cream)}
@media (pointer:coarse){ .tool-loupe, #gLoupeBtn{display:none} }
.zoom-read{font-size:11px; letter-spacing:.08em; color:rgba(44,36,32,.4); min-width:36px; text-align:center}
.sb-hint{margin:0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(44,36,32,.38); text-align:center; transition:opacity .4s}
.sb-hint.gone{opacity:0}

/* plate index, below the viewer — 4-column grid so it doesn't run on forever */
.plate-list{
  list-style:none; margin:36px 0 0; padding:0; max-width:900px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(44,36,32,.15); border-left:1px solid rgba(44,36,32,.15);
}
.plate{
  display:flex; flex-direction:column; gap:3px; width:100%; height:100%;
  padding:14px 14px; border:0; border-right:1px solid rgba(44,36,32,.15); border-bottom:1px solid rgba(44,36,32,.15);
  background:transparent; text-align:left; cursor:pointer; color:inherit; transition:background-color .2s; font-family:var(--sans);
}
.plate:hover, .plate[aria-current="true"]{background:rgba(255,252,244,.6)}
.plate .n{font-size:11px; color:rgba(44,36,32,.4)}
.plate .t{font-family:var(--serif); font-size:.92rem; line-height:1.25; color:var(--maroon-dark)}
.plate[aria-current="true"] .t{color:var(--maroon)}

@media (max-width:640px){
  .sb-3d{max-width:300px}
  .loupe{width:130px; height:130px}
  .plate-list{grid-template-columns:repeat(2,1fr)}
}

/* ===================== corkboard / notes ===================== */
.corkboard{display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin:44px 0 50px}
.corkboard .sticky-note{margin-top:0}
.ig-strip{
  display:flex; align-items:center; justify-content:center; gap:12px; margin:0 auto; width:fit-content;
  padding:16px 30px; border-radius:100px; background:var(--maroon); color:var(--cream);
  font-family:var(--serif); font-style:italic; font-size:1.05rem; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, background .3s ease;
}
.ig-strip:hover{transform:translateY(-3px); background:var(--maroon-dark)}

/* ===================== contact ===================== */
.contact-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; width:100%; margin:36px 0 20px}
.contact-card{
  background:#fffdf8; border:1px solid rgba(90,22,38,.14); padding:22px 18px; text-align:center;
  box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.contact-card:not(.static):hover{transform:translateY(-6px) rotate(-1deg); box-shadow:var(--shadow)}
.cc-label{display:block; font-family:var(--script); color:var(--maroon); font-size:1.15rem; margin-bottom:6px}
.cc-value{display:block; font-weight:500; color:var(--ink); overflow-wrap:anywhere; word-break:break-word}

/* ===================== doodles (pure CSS/SVG, no assets) ===================== */
.doodle{position:absolute; opacity:.5; pointer-events:none}
.doodle-leaf-1{width:120px;height:120px;right:6%;top:8%;
  background:radial-gradient(circle at 30% 30%, transparent 40%, var(--sage) 42%, transparent 55%);
  border-radius:50% 0 50% 50%; transform:rotate(20deg); opacity:.18}
.doodle-swirl{width:160px;height:160px;left:4%;bottom:6%;
  border:3px dashed var(--gold); border-radius:50%; opacity:.2}
.doodle-leaf-2{width:100px;height:100px;left:8%;top:10%;
  background:radial-gradient(circle at 30% 30%, transparent 40%, var(--maroon) 42%, transparent 55%);
  border-radius:50% 0 50% 50%; transform:rotate(-30deg); opacity:.12}

/* ===================== footer ===================== */
footer{background:var(--maroon-dark); color:var(--cream); padding:70px 24px 30px; text-align:center}
.footer-wordmark{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(2.2rem,10vw,6rem); color:transparent; -webkit-text-stroke:1px rgba(246,239,221,.55);
  margin-bottom:34px;
}
.footer-wordmark span{color:var(--gold-soft); -webkit-text-stroke:0}
.footer-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; max-width:1100px; margin:0 auto; padding-top:22px; border-top:1px solid rgba(246,239,221,.18); font-size:.85rem; opacity:.85}
.footer-links{display:flex; gap:20px; flex-wrap:wrap}
.footer-links a:hover{color:var(--gold-soft)}

/* ===================== check list ===================== */
.check-list{margin:20px 0 26px; display:flex; flex-direction:column; gap:10px}
.check-list li{position:relative; padding-left:30px; color:#4a3f34; line-height:1.5}
.check-list li::before{content:'✦'; position:absolute; left:0; top:0; color:var(--gold); font-size:1rem}

/* ===================== cones CTA row ===================== */
.cones-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}

/* ===================== henna cone order form ===================== */
.order-cones .page-inner{gap:0}
.cone-order-form{width:100%; display:flex; flex-direction:column; gap:34px; margin-top:22px; text-align:left}
.cone-order-block h3{font-family:var(--serif); font-size:1.2rem; color:var(--maroon-dark); margin:0 0 16px}
.cone-order-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px}

.cone-size-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px}
.cone-size-card{background:#fffdf8; border:1px solid rgba(90,22,38,.14); border-radius:10px; padding:16px 18px; box-shadow:var(--shadow-sm)}
.cone-size-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.cone-size-name{font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--ink)}
.cone-size-price{font-family:var(--script); font-size:1.3rem; color:var(--maroon)}
.cone-size-price small{font-family:var(--sans); font-size:.62rem; color:#8a7d6c; letter-spacing:.02em}
.cone-size-meta{margin:4px 0 14px; font-size:.82rem; color:#7a6c5c}
.qty-stepper{display:flex; align-items:center; justify-content:space-between; border:1px solid rgba(90,22,38,.2); border-radius:100px; overflow:hidden}
.qty-btn{width:36px; height:36px; border:0; background:transparent; color:var(--maroon-dark); font-size:1.15rem; cursor:pointer; transition:background .2s ease}
.qty-btn:hover{background:rgba(90,22,38,.1)}
.qty-stepper input{width:100%; border:0; background:transparent; text-align:center; font-family:var(--sans); font-size:1rem; color:var(--ink); -moz-appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.cone-discount-note{margin:16px 0 0; font-size:.85rem; color:var(--maroon); text-align:center}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-size:.88rem; color:#5a4f42}
.field.full{grid-column:1 / -1}
.field input, .field textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--ink); background:#fffdf8;
  border:1px solid rgba(90,22,38,.2); border-radius:8px; padding:10px 12px; resize:vertical;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--gold); outline-offset:1px}
.field-hint{font-size:.8rem; color:#8a7d6c; margin:6px 0 0}

.radio-row{display:flex; gap:12px; margin-bottom:12px}
.radio-pill{display:flex; align-items:center; gap:8px; padding:9px 18px; border:1px solid rgba(90,22,38,.2); border-radius:100px; font-size:.9rem; cursor:pointer; transition:background .2s ease, border-color .2s ease}
.radio-pill:has(input:checked){background:rgba(90,22,38,.1); border-color:var(--maroon)}
.radio-pill input{accent-color:var(--maroon)}

.cone-order-summary{background:var(--paper); border:1px dashed rgba(90,22,38,.3); border-radius:12px; padding:18px 22px}
.cone-summary-rows{display:flex; flex-direction:column; gap:6px; font-size:.9rem}
.cone-summary-rows .row{display:flex; justify-content:space-between; gap:10px}
.cone-summary-rows .discount{color:var(--maroon)}
.cone-summary-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:12px; border-top:1px solid rgba(90,22,38,.2); font-family:var(--serif); font-size:1.1rem; color:var(--maroon-dark)}
.cone-payment-note{font-size:.85rem; color:#7a6c5c; text-align:center; margin:0}
#coneFormMsg{text-align:center; min-height:1.2em}
#coneFormMsg.ok{color:var(--sage)}
#coneFormMsg.error{color:var(--maroon)}
.cone-order-form > .btn{align-self:center}

/* ===================== footer legal + modal ===================== */
.footer-disclaimer{max-width:680px; margin:0 auto 22px; text-align:center; font-size:.8rem; color:rgba(246,239,221,.7); line-height:1.5}
.footer-legal{margin-top:14px; padding-top:14px; border-top:1px solid rgba(246,239,221,.18); justify-content:center}
.footer-legal .footer-links{justify-content:center; row-gap:8px}
.legal-link{background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; opacity:.85}
.legal-link:hover{color:var(--gold-soft); opacity:1}
.footer-credit{margin:16px 0 0; text-align:center; font-size:.75rem; color:rgba(246,239,221,.5)}

.legal-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .3s ease}
.legal-modal.open{opacity:1; pointer-events:auto}
.legal-modal-backdrop{position:absolute; inset:0; background:rgba(43,20,14,.5)}
.legal-modal-card{
  position:relative; background:var(--cream); border-radius:14px; max-width:560px; width:100%;
  max-height:80vh; overflow-y:auto; padding:34px 30px; box-shadow:var(--shadow);
  transform:translateY(14px); transition:transform .3s ease;
}
.legal-modal.open .legal-modal-card{transform:translateY(0)}
.legal-modal-card h3{font-family:var(--serif); color:var(--maroon-dark); margin:0 0 16px; padding-right:24px}
.legal-modal-card p{line-height:1.65; color:#4a3f34; margin:0 0 14px; font-size:.95rem}
.legal-modal-close{position:absolute; top:18px; right:18px; width:32px; height:32px; border-radius:50%; border:0; background:rgba(90,22,38,.1); color:var(--maroon-dark); font-size:1.3rem; line-height:1; cursor:pointer}
.legal-modal-close:hover{background:rgba(90,22,38,.2)}

/* ===================== responsive nav ===================== */
@media (max-width:820px){
  #siteNav nav{position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--cream); flex-direction:column; align-items:flex-start; padding:100px 30px 30px; gap:26px; transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1); box-shadow:-10px 0 30px rgba(0,0,0,.15); z-index:1}
  #siteNav nav.open{transform:translateX(0)}
  #navToggle{display:flex}
  .navcta{margin-top:6px}
  .cone-order-grid{grid-template-columns:1fr}
}

/* ===================== floating quick-contact buttons ===================== */
.float-contacts{position:fixed; right:20px; bottom:20px; z-index:500; display:flex; flex-direction:column; gap:12px}
.float-btn{
  position:relative; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--maroon); color:var(--cream); box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease;
}
.float-btn:hover{background:var(--maroon-dark); transform:scale(1.08) translateY(-2px)}
.float-btn svg{width:24px; height:24px}
.float-tip{
  position:absolute; right:62px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--maroon-dark); color:var(--cream); padding:6px 14px; border-radius:100px;
  font-size:.8rem; white-space:nowrap; box-shadow:var(--shadow-sm);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.float-btn:hover .float-tip{opacity:1; transform:translateY(-50%) translateX(0)}

@media (max-width:640px){
  .float-contacts{right:14px; bottom:14px; gap:10px}
  .float-btn{width:44px; height:44px}
  .float-btn svg{width:20px; height:20px}
  .float-tip{display:none}
}

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv,.rt,.hl0,.index-card{opacity:1!important; transform:none!important; animation:none!important}
  .polaroid,.btn,.contact-card{transition:none}
}