/* ============================================================
   STUDIO SYD
   Colors, fonts and spacing all live in :root. Change them once
   here and the whole site follows.
   ============================================================ */
:root{
  --kraft:#B88A59;
  --kraft-dark:#a4784a;
  --teal:#269D9B;
  --teal-dark:#1d7c7a;
  --ink:#242329;
  --pink:#C32770;
  --cream:#FBF6EC;
  --sky:#BFE1EE;            /* the blue room: From sketch to the real thing */

  /* Pairing A · Gallery. Swap these three (and the Google Fonts link in
     index.html) for pairing B or C. See fonts.html. */
  /* Chosen: Permanent Marker + Caveat Brush + Outfit */
  --f-display:'Permanent Marker', system-ui, cursive;
  --f-script:'Caveat Brush', cursive;
  --f-body:'Outfit', system-ui, -apple-system, sans-serif;

  --wrap:1120px;
  --gutter:20px;
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--kraft);color:var(--ink);
  font-family:var(--f-body);font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* real kraft paper: fibers, flecks and mottling, generated by
   tools/make-paper/make_paper.py and tiled seamlessly */
body{background:url('../assets/paper/kraft-tile.webp') repeat, var(--kraft);background-size:560px}
/* a touch of extra fine grain on top so it does not look printed */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
main,.nav,.footer{position:relative;z-index:1}
main{overflow-x:clip}   /* nothing hangs off the page sideways */
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;margin:0}
p{margin:0 0 1em}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--cream);padding:10px 14px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-display);font-size:1.25rem;letter-spacing:.02em;
  padding:13px 26px;border:2.5px solid var(--ink);border-radius:var(--radius);
  text-decoration:none;cursor:pointer;background:var(--cream);color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .14s ease, box-shadow .14s ease, background .2s;
}
.btn:hover{transform:translate(-1px,-2px) rotate(-1deg);box-shadow:5px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-teal{background:var(--teal);color:var(--cream)}
.btn-teal:hover{background:var(--teal-dark)}
.btn-pink{background:var(--pink);color:var(--cream)}
.btn-ghost{background:transparent}
.btn-sm{font-size:1.05rem;padding:9px 18px;box-shadow:2px 2px 0 var(--ink)}
.btn-big{font-size:1.5rem;padding:16px 34px;width:100%}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(184,138,89,.94);border-bottom:2.5px solid var(--ink);
}
.nav-in{display:flex;align-items:center;gap:16px;min-height:66px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-size:1.45rem}
/* the logo is transparent art: no box, no border, just a contact shadow */
.nav-logo img{width:52px;height:auto;border:0;border-radius:0;
  filter:drop-shadow(2px 3px 3px rgba(36,35,41,.24))}
.nav-links{display:none;gap:20px;margin-left:auto;font-weight:500}
.nav-links a{text-decoration:none;padding:4px 2px;border-bottom:2.5px solid transparent}
.nav-links a:hover{border-bottom-color:var(--pink)}
.nav .btn{margin-left:auto}
@media (min-width:860px){
  .nav-links{display:flex}
  .nav .btn{margin-left:0}
}

/* ---------- hero ---------- */
.hero{
  padding:12px 0 0;position:relative;text-align:center;overflow:hidden;
  /* very white, with the same paper grain as the rest of the site */
  /* warm off-white with the paper grain still showing */
  background:url('../assets/paper/offwhite-tile.webp') repeat, #FBF7F0;
  background-size:380px;
  background-blend-mode:multiply;
}
/* 2 · more paper in the paper: fine grain over long soft fibres */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.42;mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .015' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)' opacity='.22'/%3E%3C/svg%3E");
  background-size:220px 220px, 420px 420px;
}

/* 3 · the flicked paint down the outside edges */
.splats{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Flicked paint down the two outside edges. No blur, no filter, no scaling
   past the file's own size: width only, height follows. Each one is a
   different file, so nothing on screen is ever a repeat. */
.splat{
  position:absolute;top:var(--y);height:auto;
  transform:rotate(var(--r,0deg));
}
.splat-l{left:var(--x)}
.splat-r{right:var(--x)}
/* the big ones and their small partners */
.splat{width:clamp(240px,24vw,400px)}
.splat-sm{width:clamp(130px,12vw,190px)}
.splat-xs{width:clamp(90px,8vw,120px)}
.splat-m{display:none;width:78px}
/* on a phone: two or three small ones, right at the edges, and that is all */
@media (max-width:1100px){
  .splat{display:none}
  .splat-m{display:block}
}
.hero-in,.hero .paintpass{position:relative;z-index:1}
.hero-in{display:block}
.eyebrow{
  font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);opacity:.8;margin-bottom:2px;
}
.logo-type{font-size:clamp(3.4rem,13vw,6rem);letter-spacing:-.01em}

/* --- the wordmark that paints itself on --- */
/* the name: one line, always, static */
.painted{
  margin:0;color:var(--ink);
  font-family:var(--f-display);font-weight:400;line-height:1.06;
  font-size:clamp(3.1rem,7.4vw,6.6rem);
  white-space:nowrap;letter-spacing:.012em;
}

.drip{transform-origin:top center;transform:scaleY(0)}
.js .painted.paint .drip{animation:dripDown 1.3s ease-in forwards}
.drip-1{animation-delay:1.35s !important}
.drip-2{animation-delay:1.62s !important}
@keyframes dripDown{
  0%{transform:scaleY(0)}
  100%{transform:scaleY(1)}
}


.hero-meta{
  margin-top:8px;font-size:.88rem;font-weight:500;opacity:.85;
}

.hero-banner{touch-action:auto}

.tagline{font-family:var(--f-display);font-size:clamp(1.3rem,3.4vw,1.9rem);margin:0 0 2px;line-height:1.15}
.tagline .script{font-family:var(--f-script);color:var(--pink);display:inline-block}
.lede{max-width:52ch;font-size:1.02rem;margin:2px auto 0}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;justify-content:center}

/* the hanging banner: Three.js canvas goes in here, image is the fallback.
   The canvas carries padding around the sheet (see js/banner3d.js) so no
   corner is ever clipped while it sways; the flat fallback gets the tilt
   from CSS instead. */
.hero-banner{
  /* the sheet answers to the height of the screen as well as the width, so
     the buttons under it stay on the first screen on a short laptop */
  position:relative;margin:-4px auto 0;width:min(100%,760px,82vh);
}
.hero-banner-img{transform:rotate(-7deg);filter:brightness(1.06)}
.hero-banner.has-3d{transform:none}
.hero-banner canvas{display:block;width:100%;height:auto}
.hero-banner-img{
  width:100%;border:0;
  filter:drop-shadow(6px 14px 16px rgba(36,35,41,.34));
}
.hero-banner.has-3d .hero-banner-img{display:none}
/* once the 3D tape exists, drop the flat CSS strips */
.hero-banner.has-3d-tape .tape{display:none}
.hero-banner.has-3d .tape{top:-10px}
/* the sheet is taller than it is wide, so the column stays narrow */
.tape{
  position:absolute;top:-16px;width:74px;height:30px;z-index:2;
  background:rgba(251,246,236,.72);border-left:2px dashed rgba(36,35,41,.25);
  border-right:2px dashed rgba(36,35,41,.25);
  box-shadow:0 2px 6px rgba(36,35,41,.22);
}
.tape-l{left:9%;transform:rotate(-8deg)}
.tape-r{right:9%;transform:rotate(7deg)}

.squiggle{
  height:40px;margin-top:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' fill='none' stroke='%23242329' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 26c14-18 28 18 42 0s28 18 42 0 28 18 42 0 28 18 42 0 28 18 42 0'/%3E%3C/svg%3E") repeat-x center/240px 40px;
  opacity:.5;
}

/* ---------- sections ---------- */
.sec{padding:54px 0}
.sec h2{font-size:clamp(2rem,7vw,3rem);margin-bottom:10px}
.sec-lede{max-width:48ch;margin-bottom:26px}
.note,.fine{font-size:.92rem;opacity:.85}
.fine{margin-top:16px}

/* the wobbly painted blob behind headings */
.blob{position:relative;display:inline-block;padding:4px 20px 6px;color:var(--cream)}
.blob::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--teal);
  border-radius:62% 38% 55% 45% / 48% 56% 44% 52%;
  transform:rotate(-1.4deg);
}

/* ---------- how it works ---------- */
.steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px}
.steps li{
  background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--radius);
  padding:22px 20px 18px;box-shadow:4px 4px 0 var(--ink);position:relative;
}
.steps li:nth-child(odd){transform:rotate(-.7deg)}
.steps li:nth-child(even){transform:rotate(.8deg)}
.steps h3{font-size:1.5rem;margin-bottom:6px}
.steps p{margin:0;font-size:.98rem}
.num{
  position:absolute;top:-16px;left:-12px;width:44px;height:44px;
  display:grid;place-items:center;background:var(--pink);color:var(--cream);
  font-family:var(--f-display);font-size:1.5rem;
  border:2.5px solid var(--ink);border-radius:50%;
}

/* ---------- gallery ---------- */
.grid{display:grid;gap:22px}
.card{
  position:relative;margin:0;background:var(--cream);
  border:2.5px solid var(--ink);border-radius:var(--radius);
  padding:12px;box-shadow:5px 6px 0 rgba(36,35,41,.9);
  transform:rotate(var(--rot,0deg));
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
  cursor:zoom-in;perspective:900px;
}
.card:hover{transform:rotate(0deg) translateY(-6px) scale(1.015);box-shadow:8px 12px 0 rgba(36,35,41,.9)}
.card img{width:100%;border:1px solid rgba(36,35,41,.15)}
.card figcaption{font-family:var(--f-display);font-size:1.2rem;padding:10px 2px 12px}
.card .washi{
  position:absolute;top:-14px;left:50%;width:86px;height:26px;margin-left:-43px;
  background:repeating-linear-gradient(135deg,var(--teal) 0 7px,#5bbdbb 7px 14px);
  opacity:.9;border:2px solid var(--ink);transform:rotate(-3deg);
}
.card-soon img{filter:saturate(.25) contrast(.95);opacity:.55}
.card-soon::after{
  content:'photo coming soon';position:absolute;top:46%;left:0;right:0;text-align:center;
  font-family:var(--f-display);font-size:1.35rem;color:var(--ink);
}

/* ---------- pricing ---------- */
.prices{display:grid;gap:18px;margin-top:26px}
.price{
  background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--radius);
  padding:20px 18px;box-shadow:4px 4px 0 var(--ink);text-align:center;
  transform:rotate(var(--rot,-.6deg));
}
.price:nth-child(even){--rot:.7deg}
.price h3{font-size:1.7rem}
.price .dim{font-weight:600;opacity:.8;margin:2px 0 8px}
.price .amt{font-family:var(--f-display);font-size:2.6rem;color:var(--pink);margin:0}
.price-custom{text-align:left}
.price-custom p{font-size:.95rem}

/* ---------- story ---------- */
.story-head{display:grid;gap:18px;align-items:center;margin:26px 0 8px}
.headshot{
  width:160px;height:160px;border-radius:50%;object-fit:cover;
  border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);
}
.story-intro{font-family:var(--f-display);font-size:1.6rem;line-height:1.3;margin:0}
.story-body{display:grid;gap:26px}
.story-col p{max-width:60ch}
.draft-note{
  margin-top:28px;background:rgba(251,246,236,.75);border-left:5px solid var(--pink);
  padding:14px 16px;font-size:.93rem;
}

/* childhood drawings, taped into the scrapbook */
.drawing{
  margin:0 auto;width:min(100%,260px);position:relative;
  background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--radius);
  padding:12px 12px 4px;box-shadow:4px 5px 0 rgba(36,35,41,.85);
  transform:rotate(var(--rot,0deg));
}
.drawing svg{width:100%;height:auto;display:block;color:#4a4a4a}
.drawing .ink path,.drawing .ink circle,.drawing .ink ellipse{
  filter:url(#pencil);
}
.drawing .color{opacity:0;transition:opacity .7s ease}
.drawing.inked .color{opacity:1}
/* when real scans arrive they cross-fade in over the finished sketch */
.drawing{position:relative}
.drawing-scan{
  position:absolute;left:12px;right:12px;top:12px;
  width:calc(100% - 24px);opacity:0;transition:opacity .8s ease;pointer-events:none;
}
.drawing.inked .drawing-scan{opacity:1}
.drawing.inked:has(.drawing-scan) .ink{opacity:.35;transition:opacity .8s ease}
.drawing figcaption{
  font-family:var(--f-script);font-size:1.05rem;padding:8px 2px 10px;text-align:center;opacity:.85;
}

/* ---------- downloads ---------- */
.downloads{
  background:url('../assets/paper/kraft-tile.webp') repeat, #163A5F;
  background-size:520px;background-blend-mode:soft-light;
  color:var(--cream);padding:40px 0 44px;
}
.downloads-in{
  max-width:620px;margin:0 auto;
  background:var(--cream);color:var(--ink);
  border:2.5px dashed var(--ink);border-radius:var(--radius);
  padding:26px 22px 24px;text-align:center;box-shadow:5px 6px 0 rgba(10,24,40,.55);
}
.downloads-in p{margin-bottom:.7em}
.downloads-in .btn{margin-top:4px}
.downloads h2{font-size:clamp(1.8rem,5.4vw,2.4rem);margin-bottom:4px}
.downloads .soon{
  font-family:var(--f-script);color:var(--pink);font-size:1.5rem;margin:0 0 10px;
}

/* ---------- form ---------- */
.form{
  background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--radius);
  padding:24px 20px;box-shadow:6px 7px 0 var(--ink);max-width:760px;
}
.f{display:block;margin-bottom:18px;font-weight:600;font-size:.95rem}
.f-row{display:grid;gap:0}
.req{color:var(--pink)}
.opt{font-weight:400;opacity:.65;font-size:.85em}
.f input[type=text],.f input[type=tel],.f input[type=email],.f input[type=date],
.f select,.f textarea,.f input[type=file]{
  display:block;width:100%;margin-top:6px;font:inherit;font-weight:400;font-size:16px;
  padding:11px 12px;background:#fff;color:var(--ink);
  border:2.5px solid var(--ink);border-radius:var(--radius);
}
.f textarea{resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:3px solid var(--teal);outline-offset:1px}
fieldset.f{border:2.5px dashed rgba(36,35,41,.4);border-radius:var(--radius);padding:12px 14px}
fieldset.f legend{padding:0 6px}
.radio{display:flex;align-items:center;gap:9px;font-weight:400;margin:6px 0}
.radio input{width:20px;height:20px;accent-color:var(--teal)}
.f-hidden{display:none}
.hp{position:absolute;left:-9999px}

/* ---------- footer ---------- */
.footer{border-top:2.5px solid var(--ink);margin-top:20px;padding:30px 0 40px}
.footer-in{display:grid;gap:14px;justify-items:center;text-align:center}
.footer img{width:78px;height:auto;filter:drop-shadow(2px 3px 3px rgba(36,35,41,.24))}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;font-weight:600}
.footer-links a{text-decoration:none;border-bottom:2.5px solid var(--pink)}
.footer-meta{font-size:.88rem;opacity:.85;margin:0}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:24px;
  background:rgba(36,35,41,.88);
}
.lb.open{display:grid}
.lb figure{margin:0;max-width:min(94vw,820px)}
.lb img{width:100%;max-height:80vh;object-fit:contain;border:3px solid var(--cream)}
.lb figcaption{color:var(--cream);font-family:var(--f-display);font-size:1.3rem;text-align:center;padding-top:10px}
.lb-close{
  position:absolute;top:14px;right:16px;width:46px;height:46px;font-size:30px;line-height:1;
  background:var(--cream);color:var(--ink);border:2.5px solid var(--ink);border-radius:50%;cursor:pointer;
}
body.locked{overflow:hidden}

/* ---------- scroll reveal ----------
   Only hidden when JS is running, so a failed script can never leave the
   page blank. js/site.js also force-reveals anything still hidden after 2s. */
/* The .rv class used to fade and slide sections in on scroll. Update #6
   dropped every entrance animation: the content is simply there. The class is
   left on the markup so nothing has to be rewired if it is ever wanted back. */
.rv{opacity:1;transform:none}

/* ============================================================
   BIGGER SCREENS
   ============================================================ */
@media (min-width:640px){
  .f-row{grid-template-columns:1fr 1fr;gap:18px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .prices{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .story-head{grid-template-columns:auto 1fr;gap:26px}
  .form{padding:30px 28px}
}
@media (min-width:900px){
  body{font-size:18px}
  .sec{padding:76px 0}
  .hero{padding:14px 0 0}
  .hero-banner{width:min(100%,720px,78vh)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .prices{grid-template-columns:repeat(4,1fr)}
  .price-custom{grid-column:span 4;display:flex;align-items:center;gap:20px;justify-content:space-between}
  .price-custom p{margin:0;max-width:52ch}
  /* drawings alternate down the sides of the story text */
  .story-body{grid-template-columns:1fr 290px;gap:34px 40px;align-items:start}
  .story-col{grid-column:1;grid-row:1 / span 4}
  .drawing{width:100%}
  .drawing:nth-of-type(odd){justify-self:end}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .btn:hover{transform:none}
  .card:hover{transform:rotate(var(--rot,0deg))}
  .drawing .color{opacity:1}
  .brush-strokes path{stroke-dashoffset:0 !important;animation:none !important}
  .drip{transform:scaleY(1) !important;animation:none !important}
  }


/* ============================================================
   REAL THINGS ON THE PAGE
   Her photographed paint and brushes, at the size they would
   actually be. One light source, top left, so every contact
   shadow falls down and to the right.
   ============================================================ */

/* --- the section-crossing paint strokes ---
   Real photographed strokes, scaled uniformly and bled off both edges. The
   reveal runs along the stroke with a soft, ragged leading edge, driven by
   GSAP ScrollTrigger in js/strokes.js. No brush follows them. --- */
/* --- the long painted streak. One image, one pass, right across the page.
       Two on the whole site: teal under the hero, blue near the foot. --- */
.paintpass{
  position:relative;z-index:2;pointer-events:none;
  width:100vw;margin-left:calc(50% - 50vw);     /* bleeds off both edges */
  height:clamp(34px,4vw,58px);
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}
.pass-teal{background-image:url('../assets/strokes/drybrush-long-teal.png')}
.pass-blue{background-image:url('../assets/strokes/drybrush-long-lightblue.png')}
.pass-long{margin-top:6px;margin-bottom:6px}

/* --- her yellow brush, resting where it just painted --- */
.resting-brush{
  position:absolute;right:3%;bottom:-56px;z-index:5;
  width:clamp(220px,26vw,360px);
  transform:rotate(16deg);
  filter:
    drop-shadow(3px 5px 4px rgba(36,35,41,.34))
    drop-shadow(14px 22px 22px rgba(36,35,41,.22));
  transition:transform .3s ease, filter .3s ease;
  pointer-events:auto;
}
.resting-brush:hover{transform:rotate(16deg) translateY(-2px)}
.resting-dab{
  position:absolute;right:16%;bottom:-18px;z-index:4;
  width:clamp(120px,14vw,190px);transform:rotate(-7deg);
  filter:drop-shadow(2px 4px 3px rgba(36,35,41,.22));
  pointer-events:none;
}
@media (max-width:719px){
  .resting-brush{width:190px;right:-4%;bottom:-40px}
  .resting-dab{width:110px;right:16%;bottom:-12px}
}

/* --- two really tiny flecks on the nav bar, each a different splatter,
       sitting fully inside the bar in the gap between the logo and the
       links: nothing hangs over the bar's edge --- */
.nav{position:sticky}
.nav-in{position:relative;z-index:1}
.nav-splat{
  position:absolute;pointer-events:none;z-index:0;
  height:auto;                       /* width only, so nothing is distorted */
  transform:rotate(var(--r,0deg));
}
.nav-splat.n1{left:29%;top:13px;width:22px;--r:24deg}
.nav-splat.n2{left:43%;top:28px;width:17px;--r:-38deg}
/* a phone has no room on the bar, so none of them show */
@media (max-width:1100px){
  .nav-splat{display:none}
}

/* ============================================================
   PAINTED SECTION HEADINGS
   White brush stroke behind, paint-textured letters on top.
   ============================================================ */
.ph{
  position:relative;display:inline-block;z-index:4;   /* always above doodles and paint */
  max-width:100%;overflow-wrap:break-word;
  padding:12px 34px 18px;margin:0 0 20px;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.35rem,4.2vw,2.5rem);line-height:1.14;
}
/* A swipe of nearly transparent paint behind the words: wider than the text,
   tapered at both ends, no hard edge. Not a blob with text sitting on it. */
/* A real white brush stroke, behind the words. The letters stay solid black:
   no texture on them, no blending, nothing showing through. Both ends of the
   stroke fade out into dry brush, helped along by a soft mask. */
.ph::before{
  content:'';position:absolute;z-index:-1;
  left:-10%;right:-10%;top:-10%;bottom:-14%;
  /* the stroke is used as a mask, so the same brush texture can be any colour,
     and a second mask feathers both ends away to nothing */
  background:var(--ph-colour,#fff);
  -webkit-mask-image:
    url('../assets/paint/generated/stroke-white.webp'),
    linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:
    url('../assets/paint/generated/stroke-white.webp'),
    linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-size:100% 100%,100% 100%;
  mask-size:100% 100%,100% 100%;
  -webkit-mask-repeat:no-repeat,no-repeat;
  mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  opacity:var(--ph-paint,.5);
}
.ph span{display:inline;color:#1A1A1A;background:none}
/* soft, varied paint behind the titles: never heavy, never white everywhere */
.pricing{--ph-colour:#8CC9E3;--ph-paint:.5}
.how{--ph-colour:#BFE4F2;--ph-paint:.5}
.banners{--ph-colour:#F2B6D0;--ph-paint:.5}
.clients{--ph-colour:#9AD6D5;--ph-paint:.46}
.story{--ph-colour:#A8D8EA;--ph-paint:.5}
.studio{--ph-colour:#F2B6D0;--ph-paint:.46}
.order{--ph-colour:#fff;--ph-paint:.4}
/* no paint behind these two titles at all */
.process .ph::before,.order .ph::before{display:none}
/* With no paint behind it, the heading no longer needs the 34px the paint
   wanted, so it lines up with the paragraph under it instead of sitting
   proud of it. The whole block then sits a little in from the column edge. */
.process .ph{padding-left:0;padding-right:0}
@media (min-width:860px){
  .process-txt{padding-left:30px}      /* a phone keeps the normal gutter */
}

/* the designer and the order slip read down the middle */
.sec-centred .wrap{text-align:center}
.sec-centred .sec-lede{margin-left:auto;margin-right:auto}
.sec-centred .form,
.sec-centred .studio-box{text-align:left}

/* ============================================================
   HOW IT WORKS · teal, hand-cut edges, canvases propped up
   ============================================================ */
.how{
  position:relative;background:var(--teal);color:var(--cream);
  padding:70px 0 40px;margin:34px 0;
}
.how::after{   /* paint streaks left on the teal */
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;
  background:
    radial-gradient(60% 18% at 12% 22%, #1d7c7a 0 40%, transparent 70%),
    radial-gradient(42% 12% at 82% 68%, #0f5f5d 0 40%, transparent 72%),
    radial-gradient(30% 10% at 48% 92%, #FBF6EC 0 40%, transparent 70%);
}
.how .wrap{position:relative;z-index:1}
.edge{position:absolute;left:0;width:100%;height:42px;z-index:2;fill:var(--kraft)}
.edge-top{top:-1px}
.edge-bottom{bottom:-1px}

.steps{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:40px 22px}

/* a small stretched canvas, propped against the wall */
.canvas{
  position:relative;
  transform:rotate(var(--rot,-1.4deg));
  transition:transform .35s ease;
}
.canvas:nth-child(2){--rot:1.6deg}
.canvas:nth-child(3){--rot:-.8deg}
.canvas:hover{transform:rotate(0deg) translateY(-3px)}
.canvas-face{
  position:relative;z-index:1;padding:26px 22px 22px;
  background:url('../assets/paint/canvas-weave.webp') repeat;
  background-size:140px;
  color:var(--ink);
  box-shadow:
    inset 0 0 22px rgba(36,35,41,.07),         /* the slight dish of stretched canvas */
    14px 20px 26px -12px rgba(16,58,57,.55);   /* shadow on the teal wall */
}
.canvas-edge{                                    /* the stretcher bar, seen from the side */
  position:absolute;left:5px;right:-7px;bottom:-7px;height:9px;z-index:0;
  background:linear-gradient(#cdbfa4,#a9977b);
  box-shadow:0 5px 10px -3px rgba(16,58,57,.5);
}
.canvas-face h3{
  font-family:var(--f-display);font-weight:400;
  font-size:1.32rem;line-height:1.15;margin:12px 0 7px;
}
.canvas-face p{margin:0;font-size:.97rem;line-height:1.55;color:#3a3740}
.step-art{display:block;width:92px;height:auto}
/* her own paintbrush drawing, used exactly as she sent it */
.step-art-img{width:104px;margin:-6px 0 -8px -4px}

.ready{
  margin:46px auto 0;text-align:center;
  font-family:var(--f-script);font-size:clamp(1.6rem,5.4vw,2.5rem);line-height:1.2;
  color:var(--cream);
}
.how-cta{text-align:center;margin-top:18px}
.btn-cream{background:var(--cream);color:var(--ink)}
.incentive{
  margin:14px 0 0;font-size:.95rem;color:var(--cream);opacity:.92;
  font-family:var(--f-script);font-size:1.15rem;
}
.swatch-white-how{width:min(16%,130px);right:3%;bottom:4%;transform:rotate(-12deg);opacity:.9}
.defs-only{position:absolute;width:0;height:0;overflow:hidden}

@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr);gap:26px}
  .canvas-face{padding:30px 26px 26px}
}


/* ============================================================
   PRICING · dark brown wall, mini banners on a line
   ============================================================ */
.pricing{
  position:relative;color:var(--cream);
  background:url('../assets/paper/brown-tile.webp') repeat, #3B2A1E;
  background-size:420px;
  padding:78px 0 86px;margin:46px 0 0;
}
.pricing .edge{fill:var(--kraft)}
.pricing .ph span{color:#1A1A1A}

.line-up{position:relative;margin:38px 0 10px;padding-top:26px}
.twine{position:absolute;top:0;left:-2%;width:104%;height:40px;z-index:0}
.minis{
  list-style:none;margin:0;padding:0;position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:26px 20px;
}
.mini{position:relative;width:clamp(118px,15vw,152px)}
.peg{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(var(--pegrot,-6deg));
  width:16px;height:34px;z-index:2;border-radius:3px;
  background:linear-gradient(#e8d6bb,#c9b193);
  box-shadow:1px 2px 3px rgba(0,0,0,.4);
}
.mini:nth-child(even) .peg{--pegrot:7deg}
.mini-paper{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:16px 10px;text-align:center;color:var(--ink);
  /* drawn to scale against each other: 24x24, 24x30, 24x36, 24x48 */
  aspect-ratio:1 / var(--h,1);
  background:url('../assets/paper/kraft-tile.webp') repeat, var(--kraft);
  background-size:260px;
  transform:rotate(var(--rot,-1.5deg));
  transform-origin:top center;
  box-shadow:6px 12px 18px -8px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.3,1.4,.5,1);
}
.mini:nth-child(2) .mini-paper{--rot:1.4deg}
.mini:nth-child(3) .mini-paper{--rot:-1deg}
.mini:nth-child(4) .mini-paper{--rot:1.8deg}
.mini:nth-child(5) .mini-paper{--rot:-2deg}
.mini:hover .mini-paper{animation:sway 1.6s ease-in-out}
@keyframes sway{
  0%{transform:rotate(var(--rot,-1.5deg))}
  30%{transform:rotate(calc(var(--rot,-1.5deg) + 3deg))}
  60%{transform:rotate(calc(var(--rot,-1.5deg) - 2deg))}
  100%{transform:rotate(var(--rot,-1.5deg))}
}
.mini-name{font-family:var(--f-display);font-size:1.05rem;line-height:1}
.mini-size{font-size:.72rem;letter-spacing:.04em;opacity:.8}
.mini-price{font-family:var(--f-display);font-size:1.5rem;color:var(--pink);line-height:1}
.mini-custom .mini-q{font-family:var(--f-display);font-size:2.4rem;line-height:1;color:var(--teal)}
.mini-note{font-size:.66rem;line-height:1.35;opacity:.85}
.pricing .fine{text-align:center;margin-top:30px;color:var(--cream);opacity:.85}
.pricing .how-cta{margin-top:10px}

/* ============================================================
   MY STORY · warm off-white paper
   ============================================================ */
.story{
  position:relative;overflow:hidden;
  color:var(--ink);padding:54px 0 64px;
  /* a sketchbook page: warm paper, faint ruled lines and a margin rule */
  background:
    linear-gradient(to right, transparent 0 7.2%, rgba(195,39,112,.16) 7.2% 7.45%, transparent 7.45%),
    repeating-linear-gradient(to bottom, transparent 0 33px, rgba(36,35,41,.055) 33px 34px),
    url('../assets/paper/offwhite-tile.webp') repeat,
    #FAF6EC;
  background-size:auto, auto, 460px, auto;
}

.story .edge{fill:var(--kraft)}
.story-grid{display:grid;gap:22px;margin-top:6px;position:relative;z-index:1}
.story-photo img{
  width:min(100%,230px);border-radius:50%;
  filter:drop-shadow(3px 5px 4px rgba(36,35,41,.26));
}
.story-txt .lead{font-family:var(--f-script);font-size:1.5rem;line-height:1.25;color:var(--ink);margin-bottom:.5em}
.story-txt p{max-width:70ch}
.story .draft-note{
  margin-top:14px;background:rgba(38,157,155,.10);border-left:5px solid var(--pink);
  padding:9px 12px;font-size:.84rem;line-height:1.45;
}
/* --- her childhood drawings: little hanging banners, fanned like cards --- */
.deck-caption{
  font-family:var(--f-script);font-size:1.5rem;text-align:center;
  margin:46px 0 0;color:var(--ink);opacity:.9;
}
/* ============================================================
   THE DRAWINGS DECK
   BounceCards (React Bits), ported to vanilla JS in
   assets/js/bounce-cards.js: the cards push each other aside when
   you hover or tap one. The cards themselves are unchanged — the
   same little kraft mini-banners with her drawings. They start
   already in place: this site has no entrance animations.
   ============================================================ */
.bounce-cards{
  position:relative;z-index:2;
  width:100%;max-width:860px;
  height:calc(var(--bc-h) + 70px);
  margin-inline:auto;
  touch-action:pan-y;
}
.bounce-cards__card{
  position:absolute;top:50%;left:50%;
  width:var(--bc-w);height:var(--bc-h);
  transform-origin:50% 50%;
  will-change:transform;
  cursor:pointer;
  transition:filter .25s ease;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.bounce-cards__card[data-active]{filter:drop-shadow(0 18px 30px rgba(0,0,0,.28))}
.bounce-cards__card:focus-visible{outline:3px solid #269D9B;outline-offset:4px}

/* the card itself, exactly as it was: kraft paper, a string, a caption */
.card-banner{
  background:url('../assets/paper/kraft-tile.webp') repeat, #efe3cd;
  background-size:240px;background-blend-mode:soft-light;
  border:0;padding:10px 10px 0;font:inherit;color:var(--ink);
  display:block;
}
.card-banner img{
  width:100%;height:calc(100% - 46px);display:block;background:#fff;
  object-fit:contain;object-position:center;     /* the whole drawing, as before */
}
.card-string{
  position:absolute;left:50%;top:-14px;width:46%;height:16px;transform:translateX(-50%);
  border-top:2px solid rgba(36,35,41,.5);border-radius:50%;
}
.card-note{
  display:flex;align-items:center;justify-content:center;
  height:46px;padding:2px 4px 0;overflow:hidden;
  font-family:var(--f-script);font-size:.8rem;line-height:1.12;text-align:center;
}

/* ============================================================
   PROCESS · one picture, told plainly
   ============================================================ */
.process{
  padding:70px 0 64px;position:relative;
  background:url('../assets/paper/offwhite-tile.webp') repeat, var(--sky);
  background-size:400px;background-blend-mode:multiply;
  color:var(--ink);
}
.process .edge{fill:var(--sky)}
.process-in{display:grid;gap:26px;align-items:center}
.process-txt p{max-width:46ch;font-size:1.12rem}
.process-txt .small{font-size:.98rem;opacity:.8}
.process-shot img{
  width:100%;display:block;
  border:10px solid var(--cream);
  box-shadow:6px 14px 26px -10px rgba(36,35,41,.5);
  transform:rotate(-1.2deg);
}
@media (min-width:860px){
  /* the picture is the smaller half now, and the words carry the section */
  .process-in{grid-template-columns:1.25fr .75fr;gap:46px}
  .process-txt p{font-size:1.22rem;line-height:1.62}
  .process-txt .small{font-size:1.02rem}
}
/* the tall sheet was swamping the section: cap it */
.process-shot{margin:0 auto;width:min(100%,300px)}

/* ============================================================
   HAPPY CLIENTS · taped-up photos
   ============================================================ */
.clients{padding:60px 0 70px}
.client-wall{display:grid;gap:30px;margin-top:30px;align-items:start}
.polaroid{
  margin:0;background:var(--cream);padding:14px 14px 10px;
  transform:rotate(var(--rot,0deg));
  box-shadow:5px 12px 22px -8px rgba(36,35,41,.5);
  position:relative;
}

/* the Boo Bash photo is portrait: it gets a taller window so the woman who
   ordered it is in frame, face and all, not just the banner */
.polaroid.polaroid-low img{object-position:center 9%}   /* framed on her, not the banner */
.polaroid::before{            /* the tape holding it up */
  content:'';position:absolute;top:-14px;left:50%;width:92px;height:28px;margin-left:-46px;
  background:url('../assets/paper/tape.webp') no-repeat center/100% 100%;
  transform:rotate(-4deg);
}
.polaroid:nth-child(even)::before{transform:rotate(5deg)}
.polaroid img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.polaroid figcaption{
  font-family:var(--f-script);font-size:1.12rem;padding:10px 2px 2px;text-align:center;
}
.polaroid-empty .slot{
  display:grid;place-content:center;gap:6px;text-align:center;
  aspect-ratio:4/3;background:rgba(36,35,41,.05);
  border:2px dashed rgba(36,35,41,.35);color:var(--ink);
}
.polaroid-empty .slot span{font-family:var(--f-display);font-size:1.1rem}
.polaroid-empty .slot small{font-size:.76rem;opacity:.75;max-width:22ch;margin:0 auto}
@media (min-width:760px){
  .client-wall{grid-template-columns:repeat(3,1fr);gap:26px}
}

.banners{position:relative;z-index:3}

/* ============================================================
   KID DOODLES
   ============================================================ */
.doodle{
  position:absolute;z-index:1;width:var(--size,80px);height:auto;pointer-events:none;
  opacity:.9;
}
.paintpass .doodle{z-index:3}
/* On a phone there are no side margins to put them in, so the ones pinned to
   section corners come off and only the ones living in the empty paint bands
   stay. Nothing sits on top of text at any width. */
@media (max-width:719px){
  .doodle{display:none}
  .doodle.doodle-mobile{display:block}
}
.doodle svg{width:100%;height:auto;display:block;overflow:visible}
.doodle path,.doodle circle,.doodle ellipse,.doodle line{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  filter:url(#crayon);
}
.sec{position:relative}

/* ============================================================
   THE ORDER SLIP · wide, two columns on desktop
   ============================================================ */
.form-wide{max-width:none}
@media (min-width:860px){
  .form-wide{
    display:grid;grid-template-columns:1fr 1fr;gap:0 26px;align-items:start;
    padding:34px 34px 30px;
  }
  .form-wide .f-row{display:contents}
  .form-wide > .f,.form-wide > fieldset.f{grid-column:auto}
  .form-wide > .f-full,
  .form-wide > button,
  .form-wide > .fine{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .js .kiddrawing img{clip-path:none;opacity:1}
  .mini:hover .mini-paper{animation:none}
}


/* the open sixth slot in the banners grid */
.card-ask{
  display:grid;place-items:center;text-align:center;text-decoration:none;
  color:var(--ink);background:url('../assets/paper/kraft-tile.webp') repeat, var(--kraft);
  background-size:240px;
}
.card-ask .ask-in{display:grid;gap:10px;padding:26px 16px}
.ask-big{font-family:var(--f-display);font-size:1.5rem;line-height:1.1}
.ask-small{font-size:.8rem;line-height:1.5;opacity:.85;max-width:22ch;margin:0 auto}
.ask-cta{
  font-family:var(--f-script);font-size:1.2rem;color:var(--pink);
}
.card-ask:hover{transform:rotate(0deg) translateY(-6px) scale(1.015)}


/* ============================================================
   MOBILE MENU  (fix: the links used to just disappear under 860px)
   ============================================================ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nav-toggle{
  display:grid;place-items:center;margin-left:auto;margin-right:10px;
  width:46px;height:46px;background:var(--cream);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:2px 2px 0 var(--ink);cursor:pointer;
}
.nav-toggle .bars{display:grid;gap:5px}
.nav-toggle .bars span{display:block;width:20px;height:2.5px;background:currentColor;border-radius:2px}
.nav-toggle[aria-expanded="true"]{background:var(--teal)}
@media (min-width:860px){ .nav-toggle{display:none} }

@media (max-width:859px){
  .nav-links{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:url('../assets/paper/kraft-tile.webp') repeat, var(--kraft);
    background-size:420px;
    border-bottom:2.5px solid var(--ink);
    padding:6px 20px 14px;
    /* closed by default, and closed is not just invisible: it cannot be tabbed */
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s .22s;
  }
  .nav.menu-open .nav-links{
    visibility:visible;opacity:1;transform:none;transition-delay:0s;
  }
  .nav-links a{
    display:block;padding:13px 2px;border-bottom:1px solid rgba(36,35,41,.18);
    font-size:1.05rem;
  }
  .nav-links a:last-child{border-bottom:0}
  .nav{overflow:visible}          /* the panel hangs below the bar */
  .nav-drop{z-index:-1}
}

/* ============================================================
   M4 · THE OCCASIONS RIBBON
   A painted strip of tape that runs under the hero. Pure CSS; the
   words are real text, so it reads fine with CSS or JS switched off.
   ============================================================ */
.ticker{
  position:relative;z-index:3;overflow:hidden;
  background:var(--teal);color:var(--cream);
  border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  padding:11px 0;margin:6px 0 0;transform:rotate(-.6deg) scaleX(1.02);
}
.ticker-rail{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker:hover .ticker-rail{animation-play-state:paused}
.ticker-run{display:flex;align-items:center;gap:0}
.tick{
  font-family:var(--f-display);font-size:1.12rem;line-height:1;white-space:nowrap;
  padding:0 2px;
}
.tick-dot{padding:0 18px;color:#bdeceb;font-size:.9rem}
@keyframes tick{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .ticker-rail{animation:none}
  .ticker{overflow-x:auto}          /* swipe it instead */
}

/* ============================================================
   M3 · BEFORE / AFTER
   ============================================================ */
.ba{position:relative;overflow:hidden;background:#efe6d6;line-height:0;cursor:ew-resize;touch-action:pan-y}
.ba img{width:100%;height:auto;display:block}
.ba-before{
  position:absolute;inset:0;overflow:hidden;
  width:var(--split,50%);
  border-right:3px solid var(--cream);
}
.ba-before img{width:var(--baw,100%);max-width:none}
.ba-range{
  position:absolute;inset:auto 0 0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;
  touch-action:none;                 /* a touch drags the divider, not the page */
}
.ba-handle{
  position:absolute;top:50%;left:var(--split,50%);translate:-50% -50%;
  width:40px;height:40px;border-radius:50%;background:var(--cream);
  border:2.5px solid var(--ink);box-shadow:2px 3px 0 var(--ink);
  display:grid;place-items:center;pointer-events:none;
}
.ba-grip{width:18px;height:18px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.ba-tag{
  position:absolute;bottom:10px;font-family:var(--f-script);font-size:1rem;line-height:1;
  background:rgba(251,246,236,.9);border:2px solid var(--ink);padding:5px 9px;pointer-events:none;
}
.ba-tag-l{left:10px}
.ba-tag-r{right:10px}
.process-shot figcaption{
  font-family:var(--f-script);font-size:1.05rem;padding-top:10px;text-align:center;opacity:.85;
}

/* ============================================================
   M5 · MAGNETIC BUTTONS, with a dab of paint
   ============================================================ */
.btn{position:relative}
.btn.magnetic{will-change:transform}
.btn-dab{
  position:absolute;z-index:-1;width:84px;height:62px;pointer-events:none;
  background:url('../assets/paint/generated/stroke-teal.webp') no-repeat center/contain;
  opacity:0;transform:translate(-50%,-50%) rotate(var(--dr,0deg)) scale(.6);
  transition:opacity .5s ease, transform .5s ease;
}
.btn-dab.on{opacity:.75;transform:translate(-50%,-50%) rotate(var(--dr,0deg)) scale(1)}
@media (prefers-reduced-motion:reduce){
  .btn.magnetic{transform:none !important}
  .btn-dab{display:none}
}

/* ============================================================
   M6 · the hung banners swing with scroll speed
   ============================================================ */
.mini-paper{transform:rotate(calc(var(--rot,-1.5deg) + var(--swing,0deg)))}

@media (prefers-reduced-motion:reduce){
  .mini-paper{transform:rotate(var(--rot,-1.5deg))}
}

/* ============================================================
   DESIGN YOUR OWN  ·  the pad at the bottom of the page
   ============================================================ */
.hero-try{margin-top:4px;font-family:var(--f-script);font-size:1.2rem}
.hero-try a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}

.studio{background:var(--cream);position:relative}
.studio-box{max-width:820px;margin:0 auto}
.studio-stage{
  position:relative;border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:7px 9px 0 rgba(36,35,41,.9);overflow:hidden;line-height:0;
  background:var(--kraft) url('../assets/paper/kraft-tile.webp') repeat;
  background-size:420px auto;
}
.studio-stage canvas{
  width:100%;height:auto;display:block;touch-action:none;
}
#studio-items,#studio-text{
  position:absolute;inset:0;pointer-events:none;width:100%;height:100%;
}
/* the one surface that takes the pointer */
.studio-surface{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.studio-surface.is-stamping{cursor:copy}

.studio-label{
  display:block;font-family:var(--f-script);font-size:1.25rem;margin-bottom:6px;
}
.studio-label em{font-family:var(--f-body);font-size:.8rem;font-style:normal;opacity:.7}
.studio-words{margin-top:18px}
.studio-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.studio-row input{
  flex:1;min-width:200px;padding:11px 12px;font:inherit;font-size:16px;
  background:#fff;color:var(--ink);
  border:2.5px solid var(--ink);border-radius:var(--radius);
}

.studio-tools{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;
  font-size:.9rem;
}
.studio-group{display:flex;border:2.5px solid var(--ink);border-radius:var(--radius);overflow:hidden}
.tool{
  font:inherit;font-size:.9rem;padding:8px 14px;background:var(--cream);color:var(--ink);
  border:0;border-right:2.5px solid var(--ink);cursor:pointer;
}
.studio-group .tool:last-child{border-right:0}
.tool.on{background:var(--ink);color:var(--cream)}

.mini-tag{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.studio-row .mini-tag{margin-left:auto}
.swatches{display:flex;gap:6px}
.swatch{
  width:28px;height:28px;border:2.5px solid var(--ink);border-radius:50%;
  cursor:pointer;padding:0;
}
.swatches-sm .swatch{width:22px;height:22px;border-width:2px}
.swatch.on{box-shadow:0 0 0 3px var(--teal)}
.paint-size{display:flex;align-items:center;gap:8px}
.paint-size input{width:120px}

.studio-addons{margin-top:18px}
.stickers{display:flex;flex-wrap:wrap;gap:8px}
.sticker{
  width:52px;height:52px;padding:6px;cursor:pointer;background:#fff;
  border:2.5px solid var(--ink);border-radius:var(--radius);line-height:0;
  transition:transform .18s cubic-bezier(.22,1,.36,1), background .18s;
}
.sticker svg{width:100%;height:100%}
.sticker:hover{transform:translateY(-3px) rotate(-3deg)}
.sticker.on{background:var(--teal);box-shadow:3px 4px 0 rgba(36,35,41,.9)}

/* the design, shown on the order slip once it is attached */
.attached{display:flex;align-items:center;gap:12px;font-size:.92rem}
.attached[hidden]{display:none}
.attached img{
  width:96px;height:auto;border:2.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:3px 3px 0 rgba(36,35,41,.8);
}
.link-btn{
  background:none;border:0;padding:0;font:inherit;color:var(--pink);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.order-lede{margin-bottom:10px;font-size:1.06rem}
.order-lede strong{font-weight:600}
.order .ph{margin-bottom:26px}
.order-back{font-family:var(--f-script);font-size:1.2rem;margin-bottom:22px}
.order-back a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}

.studio-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:22px;
}
.paint-done{font-family:var(--f-script);font-size:1.1rem;color:var(--teal)}

@media (max-width:520px){
  .sticker{width:44px;height:44px}
  .studio-actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .sticker:hover{transform:none}
}

/* ============================================================
   MY STORY ON A DESKTOP: the whole section in one screen.
   These live at the end of the file on purpose — the base
   .story / .deck rules come later than the main breakpoint
   block, so an override up there would never win.
   ============================================================ */
@media (min-width:900px){
  .story{
    /* the top padding keeps the painted heading clear of the hand-cut edge */
    padding:68px 0 44px;
    min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  }
  .story-grid{grid-template-columns:300px 1fr;gap:36px;align-items:start}
  .story-photo img{width:300px}
  .story-txt{font-size:.92rem;line-height:1.52}
  .story-txt p{max-width:72ch;margin-bottom:.62em}
  .story-txt .lead{font-size:1.35rem;margin-bottom:.35em}
  .story .draft-note{margin-top:10px;padding:7px 11px}
  .story .ph{margin-bottom:6px}
  .deck-caption{margin:6px 0 0;font-size:1.25rem}
  .story .deck{z-index:3}
}
/* shorter laptops: the deck scales as a whole, its format never changes */
@media (min-width:900px) and (max-height:900px){
  .story{padding:64px 0 30px}
}
@media (min-width:900px) and (max-height:820px){
  .story{padding:52px 0 26px}
  .story-txt{font-size:.9rem;line-height:1.5}
  .deck-caption{font-size:1.2rem;margin-top:6px}
}