/* Stitch Jam Studio — brand site styles (light/dark). Playfair Display + Inter. */
:root{
  --paper:#FBF6ED;      /* aida cream */
  --glass:#FFFDF8;
  --ink:#32205d;        /* deep violet-currant (light-mode text) */
  --accent:#e0356b;     /* raspberry jam */
  --rasp-deep:#B0244F;
  --apricot:#FFAA5C;
  --goose:#97BC3F;
  --gold:#D9A441;
  --muted:#7A6470;
  --shadow:var(--ink);
  --line:rgba(50,32,93,.16);
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1f1533; --glass:#2a1c47; --ink:#d4e4fa; --accent:#ff3385;
    --muted:#a99fc4; --shadow:#000; --line:rgba(212,228,250,.18);
  }
}
:root[data-theme="light"]{
  --paper:#FBF6ED; --glass:#FFFDF8; --ink:#32205d; --accent:#e0356b;
  --muted:#7A6470; --shadow:var(--ink); --line:rgba(50,32,93,.16);
}
:root[data-theme="dark"]{
  --paper:#1f1533; --glass:#2a1c47; --ink:#d4e4fa; --accent:#ff3385;
  --muted:#a99fc4; --shadow:#000; --line:rgba(212,228,250,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1020px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
a{color:var(--accent); text-underline-offset:3px}
img{max-width:100%}

h1,h2,h3{font-family:var(--display); line-height:1.06; margin:0; text-wrap:balance}
h1{font-size:clamp(38px,6vw,68px); letter-spacing:-.01em}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:21px; margin-bottom:6px}
p{max-width:68ch; margin:0 0 14px}

.eyebrow{
  font-family:var(--body); font-weight:700; font-size:12.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:""; width:26px; height:3px; background:var(--accent)}

/* ---- top bar / logo ---- */
.topbar{border-bottom:3px solid var(--ink)}
.topbar .wrap{display:flex; align-items:center; gap:16px; padding:16px 24px; flex-wrap:wrap}
.brandmark{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
}
.brandmark .chip{
  background:#FFFDF8; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--shadow);
  padding:6px; line-height:0; border-radius:6px;
}
.brandmark .chip img{width:44px; height:auto; display:block}
.brandmark .name{font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.01em}
.brandmark .name .jam{color:var(--accent); font-style:italic}
.brandmark .name .studio{
  display:block; font-family:var(--body); font-weight:700; font-size:10.5px;
  letter-spacing:.5em; color:var(--muted); margin-top:2px;
}
.navlinks{margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; font-weight:600; font-size:14.5px}
.navlinks a{color:var(--ink); text-decoration:none}
.navlinks a:hover{color:var(--accent)}

/* ---- hero ---- */
.hero{display:flex; gap:48px; align-items:center; flex-wrap:wrap; padding:64px 0 44px}
.hero-text{flex:1 1 420px; min-width:300px}
.hero h1 .jam{color:var(--accent)}
.hero-sub{font-size:19px; max-width:48ch; margin-top:18px}
.hero-logo{flex:0 0 auto; margin-inline:auto; background:var(--glass);
  border:2px solid var(--ink); box-shadow:6px 6px 0 var(--shadow); padding:22px; border-radius:10px}
.hero-logo img{width:230px; height:auto; display:block}
.tag{
  display:inline-block; margin-top:20px; background:var(--ink); color:var(--paper);
  font-family:var(--display); font-size:15px; letter-spacing:.04em; padding:9px 16px; border-radius:4px;
}

/* pixel drip */
.drip{display:flex; height:22px}
.drip i{flex:1; background:var(--accent)}
.drip i:nth-child(3n){height:60%}
.drip i:nth-child(4n){height:100%; background:var(--rasp-deep)}
.drip i:nth-child(5n){height:35%}
.drip i:nth-child(7n){height:80%; background:var(--apricot)}
.drip i:nth-child(11n){height:50%; background:var(--goose)}

/* ---- sections & cards ---- */
section{padding:44px 0; border-bottom:2px solid var(--line)}
section:last-of-type{border-bottom:0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px}
.card{background:var(--glass); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--shadow); padding:22px; border-radius:8px}
.card h3{display:flex; align-items:center; gap:8px}

/* stitch-X bullet */
.xdot{display:inline-block; width:14px; height:14px; position:relative; flex:0 0 auto}
.xdot::before,.xdot::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:3.5px; border-radius:2px;
  background:var(--accent); transform:translate(-50%,-50%) rotate(45deg);
}
.xdot::after{transform:translate(-50%,-50%) rotate(-45deg)}
ul.clean{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
ul.clean li{display:flex; gap:11px; align-items:baseline}
ul.clean .xdot{top:2px}

.btn{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-weight:700; padding:12px 22px; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--shadow);
  border-radius:6px; transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--shadow)}
.btn.ghost{background:transparent; color:var(--ink)}

/* ---- policy/doc pages ---- */
.doc{padding:52px 0 20px}
.doc .eyebrow{margin-bottom:10px}
.doc h1{font-size:clamp(30px,4.5vw,48px); margin-bottom:6px}
.updated{color:var(--muted); font-size:14px; margin-bottom:28px}
.doc h2{margin:34px 0 10px}
.doc ul{max-width:68ch; padding-left:22px}
.doc li{margin:6px 0}
.doc code{font-family:Consolas,monospace; font-size:14px; background:var(--glass); border:1px solid var(--line); padding:1px 6px; border-radius:4px}
.note{border-left:5px solid var(--apricot); background:color-mix(in srgb, var(--apricot) 14%, transparent);
  padding:14px 18px; border-radius:4px; max-width:72ch; margin:18px 0}
.placeholder{background:color-mix(in srgb, var(--accent) 16%, transparent); border-bottom:2px dashed var(--accent);
  padding:0 4px; border-radius:3px; font-weight:600}

/* ---- footer ---- */
footer{padding:36px 0 60px; color:var(--muted); font-size:14px}
footer .wrap{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer a{color:var(--muted)}
footer .foot-links{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}

/* ---- dark signature banner hero (matches the Etsy banner) ---- */
.hero-banner{position:relative; overflow:hidden; border-bottom:3px solid var(--accent);
  background:radial-gradient(130% 150% at 82% 18%, #5a2260 0%, #331a4a 42%, #1b1030 100%); color:#eaf0ff}
.hero-banner .wrap{position:relative; z-index:2; display:flex; gap:44px; align-items:center; flex-wrap:wrap; padding:54px 24px}
.hero-banner .jar{width:150px; height:auto; flex:0 0 auto}
.hero-banner .wordmark{font-family:var(--display); font-weight:800; font-size:clamp(40px,7vw,76px);
  line-height:1; letter-spacing:-.01em; color:#dbe6ff}
.hero-banner .wordmark .jam{font-style:italic; color:#ff3385; padding:0 .08em}
.tagline{font-family:var(--body); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:clamp(11.5px,1.5vw,15px); color:#ff7aac; margin-top:14px}
.tagline .x{color:#b9a7dd; margin:0 10px}
.hero-banner p{color:#e6ebff; max-width:52ch; margin-top:16px}
.hero-banner .btn.ghost{color:#fff; border-color:#fff; box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.motif{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5}
.motif svg{position:absolute}

/* ---- exact user-supplied logo images (theme-swapped) ---- */
.logo-full{height:46px; width:auto; display:block}
.only-dark{display:none}
@media (prefers-color-scheme:dark){ .only-light{display:none} .only-dark{display:block} }
:root[data-theme="light"] .only-light{display:block}
:root[data-theme="light"] .only-dark{display:none}
:root[data-theme="dark"] .only-light{display:none}
:root[data-theme="dark"] .only-dark{display:block}
.hero-banner .wrap.hero-center{flex-direction:column; align-items:flex-start; text-align:left}
.hero-wordmark{max-width:min(560px,88%); height:auto; display:block}

/* ---- product gallery ---- */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-top:24px}
.product{background:var(--glass); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--shadow);
  border-radius:8px; overflow:hidden; display:flex; flex-direction:column}
.product img{width:100%; aspect-ratio:1/1; object-fit:contain; display:block; background:var(--paper)}
.product .pinfo{padding:14px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.product .pinfo h3{font-size:18px}
.product .pinfo .price{color:var(--muted); font-size:14px}
.product .pinfo a{margin-top:auto; font-weight:700; text-decoration:none; color:var(--accent)}
.product .ph{display:none; aspect-ratio:1/1; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-size:13px; padding:16px; background:var(--paper); border-bottom:2px solid var(--line)}

/* --- cookie consent --- */
.consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  max-width:760px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
  background:var(--glass); color:var(--ink);
  border:2px solid var(--ink); border-radius:10px;
  box-shadow:5px 5px 0 var(--shadow); padding:16px 18px;
}
.consent p{margin:0; flex:1 1 320px; font-size:14.5px; line-height:1.5}
.consent a{color:var(--accent)}
.consent-actions{display:flex; gap:10px; flex:0 0 auto}
.consent .btn{padding:9px 16px; font-size:14px; box-shadow:3px 3px 0 var(--shadow)}
@media (max-width:520px){
  .consent{padding:14px}
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1 1 auto; text-align:center}
}