/* 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}
}

/* --- newsletter signup (#free) --- */
/* Reuses .card and .btn; only the field, the consent row and the status line
   are new, so the form reads as part of the same set as every other card. */
.signup{max-width:560px; margin-top:22px; display:flex; flex-direction:column; gap:14px}
.signup-label{font-weight:700; font-size:14.5px}
.signup-input{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:6px;
  padding:11px 13px;
}
.signup-input::placeholder{color:var(--muted)}
.signup-input:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

.signup-consent{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.5}
.signup-consent input{margin-top:4px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--accent)}

.signup .btn{align-self:flex-start; border:2px solid var(--ink); cursor:pointer; font:inherit; font-weight:700}
.signup .btn[disabled]{opacity:.6; cursor:default; transform:none; box-shadow:4px 4px 0 var(--shadow)}

.signup-status{margin:0; font-size:14.5px; font-weight:600; min-height:1.2em}
.signup-status.is-ok{color:var(--goose)}
.signup-status.is-err{color:var(--accent)}
.signup-fine{margin:0; font-size:13px; color:var(--muted); line-height:1.5}

/* Honeypot. Off-screen rather than display:none — a bot that skips hidden
   fields is the one we are trying to catch, and a person still never meets it
   because it is aria-hidden and tabindex="-1". */
.signup-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* --- follow row (About) --- */
.follow{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin-top:26px; padding-top:20px; border-top:2px solid var(--line);
}
.follow-label{
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:12px; color:var(--muted); margin-right:4px;
}
.follow a{
  display:inline-block; text-decoration:none; font-weight:700; font-size:14.5px;
  color:var(--ink); background:var(--glass);
  border:2px solid var(--ink); border-radius:999px; padding:7px 16px;
  box-shadow:3px 3px 0 var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.follow a:hover{
  transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--shadow);
  background:var(--accent); color:#fff; border-color:var(--accent);
}

/* About: let the card hug its content instead of stretching to match the
   (much longer) story column — a stretched card reads as a loading failure. */
#about .grid{align-items:start}

/* ---- card actions: Buy (primary) + Details (secondary) ---- */
/* Two jobs per card. Buy is filled because it is the one that earns; Details is
   outlined so it reads as "more info", not as a second, competing checkout. */
.btn-buy,.btn-more{
  display:block; text-align:center; text-decoration:none; font-weight:700; font-size:15px;
  padding:9px 14px; border:2px solid var(--ink); border-radius:6px;
  box-shadow:3px 3px 0 var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.btn-buy{background:var(--accent); color:#fff}
.btn-more{background:transparent; color:var(--ink)}
.btn-buy:hover,.btn-more:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--shadow)}
.btn-more:hover{background:var(--glass)}

/* The card markup lists the two buttons in different orders on the home page
   and on a collection page; ordering here keeps every grid identical. */
.product .pinfo h3{order:0}
.product .pinfo .btn-buy{order:1; margin-top:auto; color:#fff}
.product .pinfo .btn-more{order:2; margin-top:0; color:var(--ink)}

/* ---- standalone pattern & collection pages ---- */
/* These pages have no .wrap — they are generated, and the generator emits one
   <main>. The measure lives here so the markup stays plain. */
.pattern-page,.collection-page{max-width:1020px; margin:0 auto; padding:32px 24px 72px}
.pattern-page h1,.collection-page h1{font-size:clamp(30px,4.6vw,52px); margin-bottom:14px}
.pattern-page article{max-width:72ch}

.crumbs{
  font-size:14px; font-weight:600; color:var(--muted);
  margin-bottom:20px; display:flex; flex-wrap:wrap; gap:6px; align-items:baseline;
}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--accent)}

img.hero{
  display:block; width:100%; height:auto; margin:0 0 24px;
  background:var(--paper); border:2px solid var(--ink); border-radius:8px;
  box-shadow:5px 5px 0 var(--shadow);
}

/* The buy row is the page's one action: give it the full-size button, not the
   compact card variant. */
.pattern-page .buy{margin:0 0 26px}
.pattern-page .buy .btn-buy{
  display:inline-block; font-size:17px; padding:12px 22px; box-shadow:4px 4px 0 var(--shadow);
}

.tags{
  display:flex; flex-wrap:wrap; gap:8px; max-width:none;
  margin-top:28px; padding-top:20px; border-top:2px solid var(--line);
}
.tags span{
  font-size:13px; font-weight:600; color:var(--muted);
  background:var(--glass); border:1px solid var(--line);
  border-radius:999px; padding:4px 12px;
}

.intro{font-size:18.5px; color:var(--muted); margin-bottom:28px}

@media (max-width:520px){
  .pattern-page,.collection-page{padding:24px 18px 56px}
  .pattern-page .buy .btn-buy{display:block; text-align:center}
}

/* Header/footer for generated pattern & collection pages (§7F).
   A visitor arriving from Google lands here, not on the home page, so these are
   the only route back to the shop — without them the page is a dead end and
   wastes the ranking it was built to earn. */
.page-top {
  max-width: 1020px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

.page-brand {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.page-brand:hover { border-bottom-color: var(--accent); }

.page-foot {
  max-width: 1020px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}

.page-foot p { margin: 8px 0 0; }

.page-foot a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.page-foot a:hover { border-bottom-color: var(--accent); color: var(--accent); }

.page-foot__links { font-weight: 600; }

.page-foot__brand { color: var(--muted); }