/* Layout: a tattoo flash sheet. Stencil-violet linework on pale paper, dashed cut lines between designs, mono labels like a price tag on a parlour wall. */
:root{
  --paper:#F2F3EE;
  --sheet:#FBFBF8;
  --ink:#17151F;
  --muted:#5D5A6A;
  --line:#CDCAD8;
  --stencil:#4733C4;
  --stencil-soft:#E5E1F8;
  --go:#00873A;
  --go-soft:#DDF3E4;
  --f-display:"Shrikhand", "Georgia", serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121119; --sheet:#1A1824; --ink:#ECEAF4; --muted:#A3A0B4; --line:#363247;
    --stencil:#A797FF; --stencil-soft:#2A2550; --go:#4FD07A; --go-soft:#16301F; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121119; --sheet:#1A1824; --ink:#ECEAF4; --muted:#A3A0B4; --line:#363247;
  --stencil:#A797FF; --stencil-soft:#2A2550; --go:#4FD07A; --go-soft:#16301F; color-scheme:dark;
}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px)}
body{margin:0}
img{max-width:100%;height:auto;display:block}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--stencil)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
h1,h2,h3{text-wrap:balance;margin:0}
h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.1;color:var(--stencil)}
p{margin:0}
:focus-visible{outline:2px solid var(--stencil);outline-offset:3px;border-radius:4px}

/* header */
header{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px;padding-block:14px}
.logo{font-family:var(--f-display);font-size:24px;color:var(--ink);text-decoration:none;line-height:1}
.logo span{color:var(--stencil)}
.nav nav{display:flex;gap:20px;margin-left:auto}
.nav nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px}
.nav nav a:hover{color:var(--stencil)}
@media (max-width:640px){.nav nav{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--f-body);padding:12px 18px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--stencil);border-color:var(--stencil)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:var(--paper)}
.nav .btn{padding:9px 14px;font-size:14px}
@media (max-width:640px){.nav .btn{margin-left:auto}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-block:56px 64px}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:32px;padding-block:36px 44px}}
.hero > div{min-width:0}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--go-soft);color:var(--go);font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:999px}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--go);display:block}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(38px,6vw,64px);line-height:1.02;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--stencil)}
.hero .lede{font-size:18px;color:var(--muted);margin-top:18px;max-width:34em}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;color:var(--muted)}
.facts b{color:var(--ink);font-weight:600}

.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:18px;position:relative;box-shadow:0 1px 0 var(--line),0 18px 40px -24px rgba(40,30,90,.35);transform:rotate(1.2deg)}
.sheet .grid{display:grid;grid-template-columns:repeat(3,1fr)}
.sheet .cell{aspect-ratio:1;display:grid;place-items:center;border-right:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line);color:var(--stencil);padding:14%}
.sheet .cell:nth-child(3n){border-right:none}
.sheet .cell:nth-last-child(-n+3){border-bottom:none}
.sheet .tag{position:absolute;top:-14px;left:18px;background:var(--ink);color:var(--paper);padding:6px 10px;border-radius:3px}
.sheet svg{width:100%;height:100%}

/* sections */
section{padding-block:64px;border-top:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:32px}
.sec-head p{color:var(--muted);max-width:36em}

/* try before you ink */
.try{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:860px){.try{grid-template-columns:1fr}}
.try > div{min-width:0}
.try p{color:var(--muted);margin-top:14px;max-width:34em}
.try ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.try li{display:flex;gap:12px;align-items:baseline}
.try li .mono{color:var(--stencil);min-width:5.5em}
.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--sheet)}
.compare div{padding:22px}
.compare div + div{border-left:1px dashed var(--line)}
.compare .mono{color:var(--muted)}
.compare .big{font-family:var(--f-display);font-size:30px;margin-top:8px;line-height:1.1}
.compare .big.v{color:var(--stencil)}
.compare small{display:block;color:var(--muted);margin-top:6px;font-size:14px}

/* shop */
.flash{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--sheet);border:1px solid var(--line);border-radius:6px}
@media (max-width:860px){.flash{grid-template-columns:repeat(2,1fr)}}
.item{display:flex;flex-direction:column;gap:12px;padding:20px;border-right:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line);min-width:0}
.flash .item:nth-child(4n){border-right:none}
.flash .item:nth-last-child(-n+4){border-bottom:none}
@media (max-width:860px){
  .flash .item:nth-child(4n){border-right:1.5px dashed var(--line)}
  .flash .item:nth-child(2n){border-right:none}
  .flash .item:nth-last-child(-n+4){border-bottom:1.5px dashed var(--line)}
  .flash .item:nth-last-child(-n+2){border-bottom:none}
}
.item .art{aspect-ratio:1;color:var(--stencil);padding:12%}
.item .art svg{width:100%;height:100%}
.item .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.item h3{font-size:16px;font-weight:600}
.item .mono{color:var(--muted)}
.add{font:600 14px/1 var(--f-body);border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:999px;padding:10px 12px;cursor:pointer}
.add:hover{background:var(--ink);color:var(--paper)}
.add.on{background:var(--stencil);border-color:var(--stencil);color:var(--sheet)}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
@media (max-width:860px){.packs{grid-template-columns:1fr}}
.pack{border:1px solid var(--line);border-radius:6px;padding:22px;display:flex;flex-direction:column;gap:10px;background:var(--sheet)}
.pack h3{font-size:18px}
.pack p{color:var(--muted);font-size:15px;flex:1}
.pack .price{font-family:var(--f-mono);font-size:15px}
.note{margin-top:14px;color:var(--muted);font-size:13px}

/* delivery */
.deliv{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
@media (max-width:860px){.deliv{grid-template-columns:1fr}}
.deliv > div{min-width:0}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--sheet)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:none}
td.fee{font-family:var(--f-mono);font-size:14px}
.cutoff{border:2px solid var(--go);border-radius:6px;padding:22px;background:var(--go-soft)}
.cutoff .mono{color:var(--go)}
.cutoff .big{font-family:var(--f-display);font-size:44px;line-height:1;margin-top:10px;color:var(--ink)}
.cutoff p{margin-top:10px;color:var(--ink)}
.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px;counter-reset:s}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;border:1.5px solid var(--stencil);color:var(--stencil);display:grid;place-items:center;font:500 13px/1 var(--f-mono)}
.steps b{display:block}
.steps span{color:var(--muted);font-size:15px}

/* events */
.uses{display:flex;flex-wrap:wrap;gap:10px}
.uses span{border:1.5px dashed var(--stencil);color:var(--stencil);padding:10px 16px;border-radius:999px;font-weight:600}

/* faq */
.faq{display:grid;gap:0;border-top:1px solid var(--line);max-width:780px}
details{border-bottom:1px solid var(--line);padding-block:18px}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-mono);color:var(--stencil)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--muted);max-width:62ch}
.warn{border-left:3px solid #C2410C;padding-left:14px}

footer{border-top:1px solid var(--line);padding-block:40px 120px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
footer .logo{font-size:20px}

/* order tray */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--ink);color:var(--paper);padding-bottom:env(safe-area-inset-bottom, 0px);transform:translateY(0);transition:transform .25s ease}
.tray[data-empty="true"]{transform:translateY(110%)}
.tray .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-block:14px}
.tray .sum{font-family:var(--f-mono);font-size:14px;flex:1;min-width:0}
.tray select{font:500 14px var(--f-body);padding:9px 10px;border-radius:8px;border:1px solid var(--muted);background:var(--paper);color:var(--ink);max-width:100%}
.tray .btn{background:var(--go);border-color:var(--go);color:#fff}
.tray .btn:hover{filter:brightness(1.1)}
.tray .btn[disabled]{opacity:.6;cursor:wait}
.tray .err{flex-basis:100%;margin:0;font-size:14px;color:#FFB4A0}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.sheet{transform:none}}

/* ---------- catalogue pages (generated by scripts/build.mjs) ---------- */
.page{padding-block:28px 72px}
.crumbs{color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--stencil)}
.page-title{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1.05;color:var(--ink)}
.page-title span{color:var(--stencil)}
.page .lede{font-size:18px;color:var(--muted);margin-top:14px;max-width:40em}
.meta-line{color:var(--muted);margin-top:14px}
.notice{margin-top:18px;border:1.5px dashed var(--stencil);color:var(--ink);padding:14px 16px;border-radius:6px;max-width:40em}
.page > .tile-grid,.page > .cat-grid{margin-top:32px}

.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;background:var(--sheet);text-decoration:none;color:var(--ink);overflow:hidden;min-width:0}
.tile:hover{border-color:var(--stencil)}
.tile-thumbs{display:grid;grid-template-columns:1fr 1fr;background:#FBFBF8;border-bottom:1px solid var(--line)}
.tile-thumbs img{aspect-ratio:1;object-fit:contain;padding:14%;border-right:1.5px dashed #CDCAD8;border-bottom:1.5px dashed #CDCAD8}
.tile-thumbs img:nth-child(2n){border-right:none}
.tile-thumbs img:nth-child(n+3){border-bottom:none}
.tile-meta{padding:16px 18px 20px;display:grid;gap:6px}
.tile-meta .mono{color:var(--stencil)}
.tile-meta h3{font-size:20px}
.tile-meta p{color:var(--muted);font-size:15px}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.cat-grid .item{border:1.5px dashed var(--line);border-radius:6px;background:var(--sheet);padding:14px}
.art-tile{display:block;background:#FBFBF8;border-radius:4px;aspect-ratio:1}
.art-tile img{width:100%;height:100%;object-fit:contain;padding:12%}
.item h3 a{color:var(--ink);text-decoration:none}
.item h3 a:hover{color:var(--stencil)}
.item .price{color:var(--ink)}
.tag-off{color:var(--muted);padding-block:10px}

.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:760px){.pdp{grid-template-columns:1fr;gap:24px}}
.art-tile.big img{padding:10%}
.pdp-info{display:grid;gap:14px;justify-items:start}
.pdp-info > a.mono{color:var(--stencil);text-decoration:none}
.pdp-info p{color:var(--muted);max-width:36em}
.price-lg{font-family:var(--f-mono);font-size:22px;color:var(--ink)!important}
.pdp-buy .add{padding:13px 22px;font-size:15px}
.pdp-facts{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:6px}
.more{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.more h2{margin-bottom:24px}

.tray label{color:var(--paper)}
.tray-clear{background:none;border:none;color:var(--paper);opacity:.7;cursor:pointer;padding:6px}
.tray-clear:hover{opacity:1}

/* ---------- filters and category chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 14px/1 var(--f-body);padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--sheet);color:var(--ink);text-decoration:none;cursor:pointer}
.chip span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.chip:hover{border-color:var(--stencil);color:var(--stencil)}
.chip.on{background:var(--stencil);border-color:var(--stencil);color:var(--sheet)}
.chip.on span{color:var(--sheet)}
.sub-nav{margin-top:24px}
.filters{display:grid;gap:10px;margin-top:24px}
.filters .chip{padding:7px 12px;font-size:13px}
.page .meta-line + .cat-grid,.filters + .cat-grid{margin-top:20px}
.just-added{margin-top:56px;margin-bottom:20px}
.just-added a{color:var(--stencil);text-decoration:none}
.pdp-info .chips{margin-top:4px}