:root {
  --bg:#FCF8EC; --ink:#7A0518; --soft:#9C4A57; --line:#E8DFC9;
  --card:#FFFFFF; --muted:#8a7f6a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#1A1512; --ink:#F3E9D4; --soft:#C79A8B; --line:#33291f;
          --card:#221B16; --muted:#8f8272; }
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink);
  font-family:Georgia,'Times New Roman',serif; line-height:1.55; }
a { color:inherit; }
img { max-width:100%; display:block; }

.preview-strip { text-align:center; font-size:.78rem; letter-spacing:.08em;
  padding:.45rem 1rem; border-bottom:1px solid var(--line); color:var(--soft); }

header.site { display:flex; align-items:center; justify-content:center; gap:.9rem;
  padding:2.2rem 1rem 1.6rem; }
header.site img { width:54px; height:54px; }
header.site a.mark { display:flex; align-items:center; gap:.9rem; text-decoration:none; }
header.site .word { font-size:1.55rem; letter-spacing:.35em; text-indent:.35em; }

.tagline { text-align:center; color:var(--soft); max-width:34rem;
  margin:0 auto 1.6rem; padding:0 1.2rem; font-size:1.02rem; }

.shoprow { display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap;
  margin:0 auto 2.6rem; padding:0 1.2rem; }
.shoprow .bt { display:inline-block; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; border:1px solid var(--soft); padding:.55rem 1.1rem;
  text-decoration:none; }
.shoprow .bt:hover { background:var(--card); }
.shoprow .soon { border-color:var(--line); color:var(--muted); }

main.wrap { max-width:1160px; margin:0 auto; padding:0 1.2rem 4rem; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.6rem; }
.card { text-decoration:none; }
.card .ph { border:1px solid var(--line); background:var(--card);
  transition:transform .18s ease; }
.card:hover .ph { transform:translateY(-3px); }
.card figcaption { padding:.65rem .15rem 0; }
.card .t { font-size:1.0rem; }
.card .s { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-top:.1rem; }
.card .cw { font-size:.78rem; color:var(--soft); margin-top:.1rem; }

.albums { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.6rem; }
.albums .ph img { aspect-ratio:5/6; object-fit:cover; width:100%; }

h1.page { font-weight:normal; font-size:1.6rem; margin:0 0 .3rem; }
p.pagecount { color:var(--muted); font-size:.85rem; margin:0 0 1.6rem;
  letter-spacing:.1em; text-transform:uppercase; }

.dpage { display:grid; grid-template-columns:minmax(0,7fr) minmax(260px,4fr);
  gap:2.6rem; align-items:start; }
@media (max-width:760px) { .dpage { grid-template-columns:1fr; } }
.dpage .art { border:1px solid var(--line); background:var(--card); }
.dpage h1 { font-weight:normal; font-size:1.7rem; line-height:1.25; margin:.2rem 0 .3rem; }
.series-tag { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); }
.desc { color:var(--soft); margin:.7rem 0 0; }

.cwrow { display:flex; gap:.6rem; margin:1rem 0 0; }
.cwrow button { border:1px solid var(--line); background:var(--card); padding:2px;
  cursor:pointer; width:64px; }
.cwrow button.on { border-color:var(--soft); }
.cwrow img { width:100%; }
.cwname { font-size:.85rem; color:var(--soft); margin-top:.35rem; }

.tiers { margin-top:1.6rem; border-top:1px solid var(--line); }
.tier { padding:1.05rem 0; border-bottom:1px solid var(--line); }
.tier .n { font-size:1.02rem; }
.tier .d { font-size:.85rem; color:var(--muted); margin-top:.15rem; }
.tier .st { display:inline-block; font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft); border:1px solid var(--line);
  padding:.15rem .55rem; margin-top:.55rem; }
.tier a.st { text-decoration:none; }

.ask { margin-top:1.4rem; font-size:.9rem; color:var(--soft); }
.ask a { color:var(--ink); }

.back { display:inline-block; margin:0 0 1.4rem; font-size:.85rem;
  color:var(--soft); text-decoration:none; }

h2.sec { font-weight:normal; font-size:1.05rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); border-bottom:1px solid var(--line);
  padding-bottom:.4rem; margin:2.4rem 0 1.2rem; }
h2.sec:first-of-type { margin-top:0; }

footer.site { text-align:center; padding:2.5rem 1rem 3rem; font-size:.85rem;
  color:var(--soft); border-top:1px solid var(--line); }
footer.site a { color:var(--ink); }
footer.site .shops { margin-bottom:.5rem; }

.tech { font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:.2rem 0 0; }
.chans { display:flex; gap:.6rem; flex-wrap:wrap; margin:1.5rem 0 0; }
.chan { display:inline-flex; align-items:center; gap:.45rem; font-family:inherit;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:.5rem .85rem; border-radius:4px; text-decoration:none; cursor:pointer; }
.chan:hover { border-color:var(--soft); }
.chan svg { width:17px; height:17px; }
.chan.inquire { border-style:dashed; color:var(--soft); }

.inq-back { position:fixed; inset:0; background:rgba(10,8,6,.72);
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
  z-index:50; }
.inq-back[hidden] { display:none; }
.inq { background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:1.5rem 1.6rem 1.7rem; max-width:26rem; width:100%; position:relative; }
.inq h3 { font-weight:normal; font-size:1.25rem; margin:0; }
.inq-sub { color:var(--soft); font-size:.88rem; margin:.25rem 0 1.1rem; }
.inq label { display:block; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:.7rem 0 .25rem; }
.inq input, .inq textarea { width:100%; font-family:inherit; font-size:.92rem;
  background:var(--bg); color:var(--ink); border:1px solid var(--line);
  border-radius:4px; padding:.5rem .6rem; }
.inq-send { margin-top:1.1rem; width:100%; font-family:inherit; font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--soft);
  background:var(--soft); color:var(--card); padding:.6rem; border-radius:4px;
  cursor:pointer; }
.inq-note { font-size:.85rem; color:var(--soft); margin:.7rem 0 0; min-height:1.1em; }
.inq-x { position:absolute; top:.5rem; right:.7rem; background:none; border:0;
  color:var(--muted); font-size:1.5rem; line-height:1; cursor:pointer; }