/* Creatures Studio — Big Cartel theme */
:root{
  --cream:#f6f1e4; --ink:#1f1a12; --quiet:#6f6552; --faint:#8b8069;
  --green:#036844; --green-ink:#cfe8db; --paper:#fffdf6; --rule:#e6ddc7;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)' opacity='0.13'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--noise) repeat,radial-gradient(#e6ddc7 .7px,transparent .85px) 0 0/22px 22px,var(--cream);color:var(--ink);font:400 15px/1.6 Archivo,sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:74px}
a{color:#8a4b2f;text-decoration:none}
a:hover{opacity:.65}
h1,h2,h3{font-family:Creatures,serif;font-weight:300;letter-spacing:-.1em;text-transform:capitalize;margin:0}
.kicker{margin:0;font:400 10px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:var(--noise) repeat,var(--cream);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 11px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 11px),transparent)}
.navrow{display:flex;align-items:center;gap:20px;padding:16px 32px 20px;flex-wrap:wrap}
.wordmark{font:300 50px/.8 Creatures,serif;letter-spacing:-.1em;text-transform:capitalize;color:var(--ink)}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:18px}
.navlinks a,.cartlink{font:400 11px/1 Archivo,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet)}
.navright{display:flex;align-items:center;gap:14px;color:var(--quiet)}
.burger{display:none;border:0;background:none;padding:0;color:var(--ink);cursor:pointer}

/* hero */
.hero{padding:30px 0 0;text-align:center}
.hero-h1{margin:14px auto 0;max-width:20ch;font-size:clamp(38px,6.2vw,96px);line-height:.9}
.board-wrap{padding:30px 0 58px}
.board{position:relative;width:100%;transform:rotate(-1.2deg);filter:drop-shadow(0 24px 38px rgba(20,44,32,.4)) drop-shadow(0 3px 5px rgba(20,44,32,.26))}
.board-mat{display:block;width:100%;height:auto;border-radius:8px}
.board-light{position:absolute;inset:0;border-radius:8px;background:radial-gradient(120% 95% at 30% 18%,rgba(255,255,255,.15) 0,rgba(255,255,255,0) 50%,rgba(10,28,20,.2) 100%)}
.note{position:absolute;box-shadow:3px 6px 12px -2px rgba(12,32,22,.45)}
.note-a{left:5%;top:6%;width:11%;transform:rotate(5.5deg)}
.note-b{left:3.5%;bottom:12%;width:12%;transform:rotate(-9deg);filter:hue-rotate(112deg) saturate(.85)}
.note-c{left:30%;top:4.5%;width:10.5%;transform:rotate(-6deg)}
.note-d{left:27.5%;bottom:6.5%;width:11%;transform:rotate(8deg);filter:hue-rotate(248deg) saturate(1.05) brightness(1.04)}
.sharpie{position:absolute;right:5%;bottom:4%;width:13%;transform:rotate(-28deg);filter:drop-shadow(5px 8px 10px rgba(12,32,22,.5))}

.glossy{position:absolute;left:39%;top:48%;width:46.8%;z-index:3;transform:translate(-50%,-50%) rotate(-2.6deg);aspect-ratio:5/4;overflow:hidden;background:#e8dfca;filter:drop-shadow(0 2px 3px rgba(14,36,26,.4)) drop-shadow(0 16px 28px rgba(14,36,26,.48))}
.glossy-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease}
.glossy-slide.is-on{opacity:1}
.glossy-sheen{position:absolute;inset:0;background:linear-gradient(116deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.3) 44%,rgba(255,255,255,.08) 52%,rgba(255,255,255,0) 64%)}
.glossy-cap{position:absolute;left:0;right:0;bottom:0;padding:10% 5% 4%;background:linear-gradient(180deg,rgba(10,26,18,0),rgba(10,26,18,.55));text-align:left}
.glossy-cap span{font:400 9px/1.4 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f4f7ee}

.card{position:absolute;right:3.5%;top:50%;width:26%;z-index:2;transform:translateY(-50%) rotate(1.4deg);background:var(--paper);padding:4% 4.5% 4.5%;text-align:left;box-shadow:0 2px 3px rgba(14,36,26,.3),0 16px 30px -14px rgba(14,36,26,.5)}
.card-tape{position:absolute;left:50%;top:-13px;margin-left:-52px;width:104px;height:26px;background:rgba(212,194,160,.72);box-shadow:0 1px 3px rgba(31,26,18,.14);transform:rotate(-2.6deg)}
.card-hey{display:block;margin-bottom:10px;font:300 clamp(29px,2.65vw,42px)/.92 Creatures,serif;letter-spacing:-.08em;text-transform:capitalize}
.card p{margin:0;font:400 clamp(13px,1.1vw,16px)/1.75 Archivo,sans-serif;color:#4a4438;text-wrap:pretty}
.card-sig{display:block;width:23.8%;min-width:55px;height:auto;margin-top:14px}
.card-tags{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font:400 10px/1 Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.snapshot{position:absolute;left:50.5%;top:71%;width:12%;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;z-index:5;pointer-events:none;background:var(--paper);padding:1.1%;transform:rotate(3.4deg);box-shadow:0 2px 3px rgba(14,36,26,.32),0 12px 22px -10px rgba(14,36,26,.5)}

/* buttons */
.btn-dark{display:inline-block;margin-top:20px;padding:14px 26px;border:0;border-radius:99px;background:var(--ink);color:#fffdf6;font:400 10px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.btn-dark:hover{opacity:1;background:var(--green)}
.btn-outline{display:inline-block;margin-top:22px;padding:14px 28px;border:1px solid var(--ink);border-radius:99px;background:none;color:var(--ink);font:400 10px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.link-quiet{font:400 11px/1 Archivo,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet)}

/* product grid */
.grid-wrap{max-width:1240px;margin:0 auto;padding:40px 32px 10px;text-align:center}
.grid-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;text-align:left}
.grid-head h2{font-size:clamp(40px,5vw,62px);line-height:.9}
.grid-head .link-quiet{margin-left:auto}
.filters{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.pill{padding:6px 0;font:400 12px/1 Archivo,sans-serif;color:var(--faint);border-bottom:1px solid transparent}
.pill.is-on{color:var(--ink);border-bottom-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:48px;row-gap:56px;margin-top:34px;text-align:left}
.card-print{display:flex;flex-direction:column;color:var(--ink)}
.card-print:hover{opacity:1}
.card-print:hover .card-print-img{transform:translateY(-8px) rotate(-1deg)}
.card-print-img{display:block;width:100%;aspect-ratio:1/1.4;background:#efe9da center/cover no-repeat;transition:transform .45s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(2px 8px 18px rgba(31,26,18,.16))}
.card-print-name{margin:18px 0 6px;font:300 40px/.95 Creatures,serif;letter-spacing:-.1em;text-transform:capitalize;padding-top:18px;border-top:1px solid var(--rule)}
.card-print-price{font:400 11px/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.pager{display:flex;gap:22px;justify-content:center;margin-top:44px;font:400 11px/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.empty{color:var(--quiet)}

/* product page */
.pdp{max-width:1240px;margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:start}
.pdp-imgs img{display:block;width:100%;height:auto;margin-bottom:18px;box-shadow:2px 10px 26px -14px rgba(31,26,18,.5)}
.pdp-info h1{font-size:clamp(42px,5vw,68px);line-height:.92}
.pdp-price{margin:14px 0 0;font:500 26px/1 Archivo,sans-serif}
.pdp-desc{margin:18px 0 0;color:var(--quiet);max-width:46ch}
.pdp-form{margin-top:26px;display:flex;flex-direction:column;gap:12px;max-width:320px}
.pdp-form label{font:500 10px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pdp-form select{padding:13px 14px;border:1px solid #ddd2ba;border-radius:0;background:var(--paper);font:400 14px/1 Archivo,sans-serif;color:var(--ink)}
.pdp-form .btn-dark{margin-top:4px;text-align:center}
.pdp-specs{margin:28px 0 0;padding:0;list-style:none;font:400 12px/1.9 Archivo,sans-serif;color:var(--quiet)}
.soldout{margin-top:24px;color:#8a4b2f}

/* cart */
.cartpage{max-width:900px;margin:0 auto;padding:40px 32px}
.cartpage h1{font-size:clamp(42px,5vw,64px)}
.carttable{width:100%;border-collapse:collapse;margin-top:26px}
.carttable td{padding:16px 10px;border-bottom:1px solid var(--rule);vertical-align:middle}
.ct-img img{display:block;width:64px;height:90px;object-fit:cover}
.ct-opt{display:block;font:400 11px/1.6 Archivo,sans-serif;color:var(--faint)}
.ct-price{text-align:right;font:400 14px/1 Archivo,sans-serif}
.cartfoot{display:flex;align-items:center;gap:16px;margin-top:24px}
.ct-total{margin-right:auto;font:500 26px/1 Archivo,sans-serif}

/* sizing page */
.sizing{max-width:1320px;margin:0 auto;padding:24px 32px 0}
.sizing h1{margin:14px 0 0;max-width:20ch;font-size:clamp(40px,6.4vw,92px);line-height:.9}
.lede{margin:18px 0 0;max-width:56ch;color:var(--quiet)}
.sizing-tool{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;margin-top:38px;align-items:start}
.scene{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#eee6d3;box-shadow:inset 0 0 90px rgba(31,26,18,.09),0 18px 40px -22px rgba(31,26,18,.45)}
.skirting{position:absolute;left:0;right:0;bottom:0;height:3.6%;background:#efe7d4;box-shadow:0 -1px 0 rgba(31,26,18,.14)}
.door-arch{position:absolute;left:4.7%;bottom:3.6%;width:29.7%;height:85%;background:#e4dac3;box-shadow:inset 0 0 0 1px rgba(31,26,18,.1)}
.door-leaf{position:absolute;left:7.5%;bottom:3.6%;width:24.1%;height:81.6%;background:#d7cbb0}
.door-knob{position:absolute;left:29%;bottom:44%;width:1.5%;height:2%;border-radius:99px;background:#a2916f}
.p-head{position:absolute;left:41.6%;bottom:66.8%;width:5.9%;aspect-ratio:1/1;border-radius:99px;background:#cdc1a8}
.p-torso{position:absolute;left:39%;bottom:40.8%;width:11.2%;height:27%;border-radius:22px 22px 6px 6px;background:#cdc1a8}
.p-leg{position:absolute;bottom:3.6%;width:3.8%;height:38%;border-radius:4px 4px 2px 2px;background:#cdc1a8}
.p-leg-l{left:40.2%}.p-leg-r{left:46%}
.scene-tag{position:absolute;font:400 10px/1 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.door-tag{left:4.7%;bottom:calc(3.6% + 85% + 8px)}
.person-tag{left:38%;bottom:calc(3.6% + 70.8% + 8px)}
.hung{position:absolute;left:74%;transform:translateX(-50%);transition:width .32s cubic-bezier(.2,.7,.2,1),height .32s cubic-bezier(.2,.7,.2,1),bottom .32s ease;box-shadow:0 2px 3px rgba(31,26,18,.28),0 14px 26px -12px rgba(31,26,18,.4)}
.hung-art{position:absolute;inset:0;background:#c9bda1 center/cover no-repeat}
.dim{position:absolute;width:1px;background:#c7bba0;transition:all .32s ease}
.dim span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;padding:0 6px;background:#eee6d3;font:400 10px/1 Archivo,sans-serif;letter-spacing:.1em;color:var(--quiet)}
.scene-note{margin:10px 0 0;font:400 10px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.rec{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:18px}
.rec-title{font:300 34px/1 Creatures,serif;letter-spacing:-.08em}
.rec p{margin:0;flex:1;min-width:240px;font:400 13px/1.7 Archivo,sans-serif;color:var(--quiet)}
.sizing-ctrl{display:flex;flex-direction:column;gap:12px}
.ctrl-label{font:500 10px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.sizerows{display:flex;flex-direction:column;gap:8px}
.sizerow{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #ddd2ba;background:var(--paper);color:var(--ink);font:400 13px/1 Archivo,sans-serif;cursor:pointer;text-align:left}
.sizerow.is-on{background:var(--ink);border-color:var(--ink);color:#fffdf6}
.sizerow b{font:500 15px/1 Archivo,sans-serif}
.sizerow i{font-style:normal;font-size:11px;color:var(--faint)}
.sizerow.is-on i{color:#bdb3a0}
.sizerow em{margin-left:auto;font-style:normal;font-size:12px}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin:64px 0 0;padding:44px 32px;background:var(--paper);box-shadow:2px 3px 0 rgba(31,26,18,.09);font:400 13px/1.9 Archivo,sans-serif;color:var(--quiet)}
.specs h3{margin:0 0 14px;font-size:30px;line-height:1;color:var(--ink)}

/* marquee + footer + bar */
.mq{overflow:hidden;margin-top:64px;padding:16px 0 19px;background:var(--green) var(--noise) repeat}
.mq-track{display:flex;width:max-content;animation:mq 101s linear infinite}
.mq-row{flex:none;display:flex;align-items:center;gap:34px;white-space:nowrap;padding-right:34px;font:400 11px/1 Archivo,sans-serif;color:#f3efe2}
.mq-row em{font-style:normal;color:var(--green-ink)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.foot{display:flex;gap:38px;flex-wrap:wrap;max-width:1320px;margin:0 auto;padding:44px 32px 30px;font:400 12px/1.9 Archivo,sans-serif;color:var(--quiet)}
.foot b{color:var(--ink)}
.wallbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;align-items:center;gap:16px;padding:0 24px;height:54px;background:var(--green);color:var(--cream)}
.wallbar-label{font:300 26px/1 Creatures,serif;letter-spacing:-.05em;text-transform:capitalize;white-space:nowrap}
.wallbar-note{font:400 10px/1 Archivo,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink)}
.wallbar-total{margin-left:auto;font:500 17px/1 Archivo,sans-serif}
.wallbar-cta{padding:9px 18px;border-radius:99px;background:var(--cream);color:var(--ink);font:400 10px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase}

@media(max-width:900px){
  .navlinks{display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:14px;margin:4px 0 2px}
  .navlinks.is-open{display:flex}
  .navright{margin-left:auto}
  .burger{display:block}
  .grid{grid-template-columns:1fr;row-gap:44px}
  .pdp,.sizing-tool,.specs{grid-template-columns:1fr;gap:26px}
  .card{position:static;width:auto;transform:none;box-shadow:none;background:none;padding:18px 20px 0;text-align:center}
  .card-tape,.snapshot{display:none}
  .glossy{position:static;width:100%;transform:none;margin:0 auto}
  .note,.sharpie{display:none}
  .board{transform:none;filter:none}
  .board-mat,.board-light{display:none}
  .wallbar-note{display:none}
}
