:root {
  --paper: #f3e6c8;
  --ink: #1c1612;
  --muted: #4a4034;
  --spot: #c23b22;
  --spot-ink: #fff8ee;
  --rule: #1c1612;
  --card: rgba(247, 241, 228, 0.94);
  --shade: rgba(28, 22, 18, 0.55);
  --placeholder: #e4d3b4;
  --tape: rgba(214, 196, 120, 0.78);
  --font: "Ripped Toons Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Ripped Toons Marker", "Ripped Toons Hand", "Comic Sans MS", cursive;
  --hand: "Ripped Toons Hand", "Ripped Toons Sans", cursive;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: 6rem; }
body.riptoons {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
}
.sketch-wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #e7d3ae;
}
.sketch-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 6px;
}
.sketch-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 4px;
  min-height: 0;
  height: 100%;
  padding: 4px;
  overflow: hidden;
  background: #f7f1e4;
  box-shadow: none;
  position: relative;
}
.sketch-pair::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 34%;
  width: 46px;
  height: 14px;
  background: var(--tape);
  transform: rotate(-6deg);
  z-index: 1;
}
.sketch-pair img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.sketch-veil {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(70, 96, 140, 0.045) 28px),
    repeating-linear-gradient(to right, transparent 0 27px, rgba(70, 96, 140, 0.03) 28px),
    rgba(236, 222, 196, 0.5);
}
.site { position: relative; z-index: 1; min-height: 100vh; display: block; }
html[data-age="ok"] .gate { display: none; }
html:not([data-age="ok"]) body { overflow: hidden; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--spot);
  color: var(--spot-ink);
  padding: 8px;
}
.skip:focus { top: 12px; z-index: 90; min-height: 44px; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(28, 22, 18, 0.55);
}
.gate-title { font-family: var(--display); font-size: clamp(40px, 8vw, 64px); line-height: 0.95; margin: 0 0 8px; }
.gate-block[hidden], .gate-actions[hidden], .pick-detail[hidden] { display: none; }
.gate-card, .card, .tier, .pair, .stack, .notes, .faq, .series, .split article, .prose article, .page-head, .band, .shelf, .foot, .hero-copy, .decoder p {
  background: var(--card);
  border: 2px solid var(--rule);
  border-radius: 3px 16px 5px 14px / 12px 4px 14px 5px;
  box-shadow: 3px 4px 0 rgba(28, 22, 18, 0.1);
}
.gate-card { max-width: 34rem; padding: 28px 24px; }
h1, h2, h3 { font-family: var(--hand); font-weight: 400; }
h1 { font-family: var(--display); letter-spacing: 0.01em; line-height: 0.95; }
.gate-card, .page-head h1, .hero h1 { font-family: var(--display); line-height: 0.95; }
.gate-actions, .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.eyebrow, .studio, .field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.solid, .ghost, .cart-open, .chips button, .sizes button, .design-pick button, .drawer-head button, .compare-switch button, .nav-more summary, .pick-open, .buy-printify {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hand);
  font-size: 20px;
}
.solid { background: var(--spot); color: var(--spot-ink); border-color: var(--spot); }
button:disabled, .solid:disabled { opacity: 0.72; cursor: not-allowed; }
.chips button[aria-pressed="true"], .sizes button[aria-pressed="true"], .design-pick button[aria-pressed="true"], .compare-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: rgba(243, 230, 200, 0.94);
  position: sticky;
  top: 0;
  z-index: 3;
}
.brand-lock { display: flex; align-items: center; gap: 12px; min-height: 96px; }
.brand { display: flex; line-height: 0; text-decoration: none; }
.brand-badge { width: 96px; height: 96px; display: block; object-fit: contain; }
.studio { margin: 0; max-width: 12rem; }
@media (max-width: 799px) {
  .top { flex-wrap: nowrap; height: 72px; min-height: 72px; padding: 4px 10px; gap: 8px; }
  .studio { display: none; }
  .brand-lock { min-height: 0; gap: 0; }
  .brand-badge { width: 64px; height: 64px; }
}
.credit-sign { margin: 0; display: flex; }
.sign { height: 36px; width: auto; }
.foot .sign { height: 28px; }
.sign-white { display: none; }
.nav-bar { display: none; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
.nav-bar a, .nav-more a, .nav-shop summary { text-decoration: none; font-family: var(--hand); font-size: 18px; }
.nav-bar a, .nav-shop summary { min-height: 44px; display: inline-flex; align-items: center; }
.nav-bar a[aria-current="page"], .nav-more a[aria-current="page"], .nav-shop summary[aria-current="page"] { text-decoration: underline wavy var(--spot); text-underline-offset: 4px; }
.nav-shop { position: relative; }
.nav-shop summary { list-style: none; cursor: pointer; }
.nav-shop summary::-webkit-details-marker { display: none; }
.nav-shop div {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 6;
  display: grid;
  min-width: 220px;
  padding: 8px;
  background: #f7f1e4;
  border: 2px solid var(--ink);
}
.nav-shop a { min-height: 44px; display: flex; align-items: center; padding: 0 8px; text-decoration: none; }
.top-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; flex: 0 0 auto; position: relative; }
.nav-more { position: relative; }
.nav-more nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  background: #f7f1e4;
  border: 2px solid var(--ink);
}
.nav-more a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}
.cart-open { position: relative; z-index: 4; flex: 0 0 auto; }
.cart-open span {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  margin-left: 6px;
  background: var(--spot);
  color: var(--spot-ink);
}

.hero { position: relative; min-height: 70vh; display: grid; align-items: end; }
.collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
}
.tile { position: relative; display: block; background: var(--placeholder); }
.tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2/3; }
.tile.feature { grid-column: span 2; grid-row: span 2; }
.tile.feature img { aspect-ratio: auto; height: 100%; }
.decoder {
  min-height: 110px;
  background-repeat: repeat;
  background-size: 220px auto;
  display: grid;
  align-items: center;
  padding: 18px 16px;
}
.decoder p {
  margin: 0;
  justify-self: start;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  padding: 6px 8px;
}
.compare { display: grid; gap: 8px; margin: 0 0 28px; }
.compare h3 { margin: 0; }
.compare-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.compare-pair { display: grid; gap: 12px; }
.compare-pair figure { margin: 0; display: grid; gap: 6px; }
.compare-pair figure { position: relative; }
.compare-pair img { width: 100%; height: auto; border: 2px solid var(--rule); background: var(--placeholder); }
.compare-pair figure::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 28%;
  width: 52px;
  height: 14px;
  background: var(--tape);
  transform: rotate(-4deg);
  z-index: 1;
}
.compare-pair[data-compare-view="original"] [data-compare-pane="remaster"],
.compare-pair[data-compare-view="remaster"] [data-compare-pane="original"] { display: none; }
.tile span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 6px;
}
.hero-copy { position: relative; z-index: 1; margin: 10vh 16px 28px; padding: 28px 18px 22px; max-width: min(920px, calc(100% - 32px)); color: var(--ink); }
.hero-mark { display: grid; gap: 12px; align-items: center; justify-items: start; }
.hero-badge { width: 240px; height: 240px; display: block; object-fit: contain; }
@media (min-width: 800px) {
  .hero-mark { grid-template-columns: 400px minmax(0, 1fr); gap: 20px; }
  .hero-badge { width: 400px; height: 400px; }
}
.hero-copy::before, .taped::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 22%;
  width: 74px;
  height: 18px;
  background: var(--tape);
  transform: rotate(-5deg);
}
.hero h1 { font-size: clamp(56px, 12vw, 104px); margin: 0; }
.tagline { font-family: var(--hand); font-size: clamp(22px, 4vw, 34px); margin: 8px 0 0; }
.doodle { width: 84px; height: 42px; color: var(--ink); margin-top: 8px; }

.band, .page-head, .split, .series, .pairs, .product-grid, .tier-grid, .faq, .stack, .notes, .steps, .prose, .band-inline {
  width: min(1100px, calc(100% - 32px));
  margin: 28px auto;
}
.band, .split { display: grid; gap: 16px; }
.split { grid-template-columns: 1fr; }
.split article, .series, .faq, .notes, .tier, .card { padding: 16px; }
.page-head, .band, .shelf, .foot { padding: 16px; }
.text-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.prose { display: grid; gap: 16px; }
.prose article { padding: 16px; }
.prose article p { margin: 0; }
.soon { font-family: var(--hand); font-size: 22px; margin: 8px 0 0; }
.nav-more summary { list-style: none; }
.shelf { width: min(1100px, calc(100% - 32px)); margin: 28px auto; }
.catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shot { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.shot img { width: 100%; height: auto; display: block; background: var(--placeholder); border: 1px solid var(--rule); }
.shot span, .fine, .pending-photo figcaption { color: var(--muted); font-size: 14px; }
.product-grid, .tier-grid { display: grid; gap: 16px; }
.swatch { background: var(--placeholder); border: 1px solid var(--rule); }
.swatch img { width: 100%; aspect-ratio: 2/3; object-fit: contain; background: var(--placeholder); }
.price { font-weight: 700; }
.chips, .sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.steps { padding-left: 1.2rem; }
.stack, .ship { display: grid; gap: 10px; }
.stack label, .ship label { display: grid; gap: 4px; font-weight: 700; }
.stack input, .stack select, .stack textarea, .ship input {
  min-height: 44px;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 8px;
}
.form-result { font-weight: 700; }
.pending-photo { width: min(360px, calc(100% - 32px)); margin: 0 auto 40px; }
.notes h2 { font-size: 18px; }
.foot {
  padding: 28px 16px 48px;
  display: grid;
  gap: 8px;
  width: min(1100px, 100%);
  margin: 0 auto;
}
.foot p { margin: 0; }
.drawer[hidden] { display: none; }
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(28, 22, 18, 0.45);
}
.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(420px, 100%);
  height: 100%;
  height: 100dvh;
  z-index: 41;
  overflow: auto;
  background: #f7f1e4;
  color: var(--ink);
  padding: 16px;
  border-left: 2px solid var(--ink);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 0; border-top: 1px solid var(--rule); }
.remove { background: transparent; border: 0; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 8px; }

.art-grid { display: grid; gap: 16px; }
.art-pick h2 { margin: 0 0 8px; font-size: 28px; }
.art-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.art-choice, .art-still {
  display: grid;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  position: relative;
  background: #f7f1e4;
  padding: 8px;
  border: 2px solid var(--rule);
}
.art-choice img, .art-still img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
.art-choice span, .gallery-flag { font-family: var(--hand); font-size: 20px; }
.gallery-flag { display: inline-block; margin: 0 0 8px; padding: 2px 8px; background: var(--tape); }
.chooser[hidden], .art-grid[hidden], [data-shop-head][hidden] { display: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: center; margin: 0 0 8px; }
.crumbs a, .crumbs span { min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a + a::before, .crumbs a + span::before, .crumbs span + span::before { content: "/"; margin-right: 8px; text-decoration: none; }
.shop-doors, .product-index { display: grid; gap: 16px; width: min(1100px, calc(100% - 32px)); margin: 16px auto 28px; }
.door {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  background: #f7f1e4;
  border: 2px solid var(--ink);
}
.door h2 { margin: 0; font-family: var(--display); font-size: 32px; }
.door p { margin: 0; }
.product-buy {
  display: grid;
  gap: 16px;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto 28px;
  align-items: start;
}
.mock-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #f7f1e4;
  border: 2px solid var(--ink);
  overflow: hidden;
}
.mock-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mock-note {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
  padding: 4px 8px;
  background: #f7f1e4;
  border: 2px solid var(--ink);
  font-family: var(--hand);
  font-size: 22px;
}
.design-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.art-logo img { object-fit: contain; background: #f7f1e4; }
.mock {
  min-height: 250px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  padding: 4px 0 0;
}
.mock-shape {
  width: 100%;
  height: 236px;
  display: block;
}
.item-grid, .pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto 28px;
}
.item-card, .pick-card {
  background: #f7f1e4;
  border: 2px solid var(--ink);
  color: inherit;
  text-decoration: none;
}
.item-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 132px; padding: 14px; }
.item-card h2 { margin: 0; font-size: clamp(20px, 4vw, 32px); }
.pick-card { padding: 8px; }
.pick-open {
  display: grid;
  width: 100%;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  justify-items: stretch;
}
.pick-art { position: relative; display: block; }
.pick-art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #f7f1e4; }
.pick-label { display: grid; gap: 2px; }
.pick-art .mock-note { left: 8px; bottom: 8px; }
.buy-printify { margin-top: 16px; width: 100%; }
.next-step { display: flex; flex-wrap: wrap; gap: 4px 16px; }
#shop-next:empty { display: none; }
#shop-next { margin-top: 4px; }
#shop-next .soon { margin-top: 0; }
.consent { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 700; }
.consent input { width: 22px; height: 22px; flex: 0 0 auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.size-chart {
  border: 2px solid var(--ink);
  background: #f7f1e4;
  color: var(--ink);
  max-width: min(36rem, calc(100% - 32px));
  padding: 16px;
}
.size-chart::backdrop { background: rgba(28, 22, 18, 0.45); }

@media (min-width: 800px) {
  .nav-bar { display: flex; }
  .nav-more { display: none; }
  .sketch-sheet { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
  .art-grid { grid-template-columns: 1fr 1fr; }
  .collage { grid-template-columns: repeat(6, 1fr); }
  .catalog { grid-template-columns: repeat(4, 1fr); }
  .compare-pair[data-compare-view="both"] { grid-template-columns: 1fr 1fr; }
  .split, .product-grid, .tier-grid { grid-template-columns: 1fr 1fr; }
  .tier-grid { grid-template-columns: 1fr 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .shop-doors, .product-index { grid-template-columns: 1fr 1fr; }
  .product-buy { grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
  .buy-printify { width: auto; min-width: 14rem; }
}
@media (max-width: 799px) {
  .nav-bar { display: none; }
  .crumbs { flex-wrap: nowrap; overflow: hidden; }
  .crumbs a, .crumbs span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30vw;
  }
  .band { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}