/* spidermalice.com - built from the Spider Malice identity kit v1.0.0
   Rules that hold everywhere: black on white, one red per surface,
   no gradients (web-spoke field excepted), no shadows, no rounded corners. */

:root {
  --ink: #0D0D0F;
  --paper: #FFFFFF;
  --rubric: #9E2116;
  --prussian: #1A5A86;   /* the Extra Turn */
  --gold: #E1A500;       /* the Wild */
  --rubric-hover: #C2412F;
  --ledger-ink: #E8E2D6;
  --ledger-muted: #A49A8B;
  --ledger-rule: #322D27;

  --display: 'Smythe', serif;
  --body: 'EB Garamond', Georgia, serif;

  --hairline: 1px;
  --rule: 1.5px;
  --frame: 2.5px;
  --heavy: 4px;

  --tracking: 0.16em;
  --leading: 1.42;
  --measure: 1180px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.02; }
a { color: var(--rubric); text-decoration: none; }
a:hover { color: var(--rubric-hover); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: var(--frame) solid var(--rubric); outline-offset: 3px; }

.page { max-width: 100%; }  /* overflow-x lives on html so the sticky header keeps working */
.wrap { max-width: var(--measure); margin: 0 auto; padding: 64px 24px; }

/* type utilities ------------------------------------------------------ */
.label {
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  line-height: 1.3;
}
.eyebrow { margin-bottom: 10px; }
.h2 { font-size: clamp(34px, 4.4vw, 52px); }
.lede { font-size: 19px; }
.copy { font-size: 17px; }
.note { font-size: 16px; }
.small { font-size: 15px; }
.italic { font-style: italic; }
.numeral { font-family: var(--display); line-height: .74; }

/* dark (ledger) surfaces ---------------------------------------------- */
.dark { background: var(--ink); color: var(--paper); }
.dark .eyebrow, .dark .muted { color: var(--ledger-muted); }
.dark .copy, .dark .lede, .dark .note { color: var(--ledger-ink); }

/* buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  font-size: 12px;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  line-height: 1.3;
  border: var(--frame) solid var(--ink);
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--rubric); border-color: var(--rubric); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }

/* header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink); color: var(--paper);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
}
.wordmark { color: var(--paper); font-family: var(--display); font-size: 24px; line-height: 1; }
.wordmark:hover { color: var(--paper); }
.site-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-nav a { color: var(--paper); }
.site-nav a:hover { color: var(--ledger-muted); }

/* 1. hero -------------------------------------------------------------- */
.hero { position: relative; border-bottom: var(--heavy) solid var(--ink); }
.hero__web {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--ink) 0 .35deg, transparent .35deg 6deg);
  opacity: .13;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  align-items: center;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 64px 24px 72px;
}
.hero h1 { font-size: clamp(52px, 9vw, 104px); margin-bottom: 22px; }
.hero__rule { width: 88px; height: var(--frame); background: var(--ink); margin-bottom: 22px; }
.hero__rule--tri { background: none; display: flex; gap: 4px; }
.hero__rule--tri span { flex: 1; height: 100%; background: var(--ink); }
.hero__rule--tri span:nth-child(1) { background: var(--rubric); }
.hero__rule--tri span:nth-child(2) { background: var(--prussian); }
.hero__rule--tri span:nth-child(3) { background: var(--gold); }
.c-red { color: var(--rubric); } .c-blue { color: var(--prussian); } .c-gold { color: var(--gold); }
.footer__tri { letter-spacing: .4em; font-size: 10px; }
.hero__lede { font-size: 20px; max-width: 44ch; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__card { display: flex; justify-content: center; }
.hero__card img { width: 100%; max-width: 330px; border: var(--frame) solid var(--ink); }

/* 2. the game ---------------------------------------------------------- */
.premise { border-bottom: var(--rule) solid var(--ink); }
.premise .h2 { margin-bottom: 40px; }
.five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.five > div { border-top: var(--rule) solid var(--ink); padding-top: 16px; }
.five .label { margin-bottom: 8px; }
@media (max-width: 900px) { .five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .five { grid-template-columns: minmax(0, 1fr); } }

.plates { margin-top: 52px; padding-top: 36px; border-top: var(--rule) solid var(--ink); }
.plates__head {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.plates__head p { flex: 1 1 320px; min-width: 0; }
.plates__nav { display: flex; align-items: center; gap: 10px; }
.plates__count { margin-right: 6px; color: #5A554E; }
.arrow {
  width: 44px; height: 44px;
  border: var(--frame) solid var(--ink);
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1;
  padding: 0;
}
.arrow:hover { background: var(--ink); color: var(--paper); }
.plates__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
}
.plate { cursor: zoom-in; outline-offset: 3px; }
.plates__grid img { width: 100%; transform: rotate(-0.7deg); }
.plates__grid .label { margin-top: 10px; transition: color .12s linear; }
.plate:hover .label, .plate:focus-visible .label { color: var(--rubric); }

/* 3. play tonight ------------------------------------------------------ */
.tonight { border-bottom: var(--heavy) solid var(--ink); }
.tonight .h2 { margin-bottom: 18px; }
.tonight .lede { max-width: 56ch; margin-bottom: 40px; }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px;
}
.stat { border: var(--frame) solid var(--paper); padding: 24px; }
.stat .numeral { font-size: 62px; margin-bottom: 18px; }
.stat .label { margin-bottom: 6px; }
.stat .note { font-size: 16px; }
.stat--red { border-color: var(--rubric); }
.stat--red .numeral { color: var(--rubric); }

.conversion { margin-top: 44px; border-top: var(--rule) solid var(--ledger-rule); padding-top: 28px; }
.conversion > .label { margin-bottom: 20px; }
.conversion__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px;
  background: var(--ledger-rule);
}
.conversion__grid > div { background: var(--ink); padding: 18px 16px; }
.conversion__term { font-family: var(--display); font-size: 26px; line-height: 1.1; margin-bottom: 6px; }
.conversion__term--red { color: var(--rubric); }
.conversion__term--yellow { color: #E1A500; }
.conversion__note { margin-top: 18px; max-width: 60ch; }
.conversion__def { font-size: 15px; color: var(--ledger-muted); }

/* 4. the table --------------------------------------------------------- */
.table { border-bottom: var(--heavy) solid var(--ink); }
.table .h2 { margin-bottom: 16px; }
.table .lede { max-width: 60ch; margin-bottom: 40px; }
/* The table illustration renders on a dark card-table mat so the white playing
   cards contrast sharply even when the surrounding section is white paper. */
.table__svg { --tbl-ink: var(--paper); --tbl-paper: var(--ink); border: var(--heavy) solid var(--ink); }
.dark .table__svg { --tbl-ink: var(--paper); --tbl-paper: var(--ink); border: none; }
.dark .table__legend { color: var(--ledger-ink); }
.dark .table__legend li + li { border-top-color: var(--ledger-rule); }
.dark .table__legend b { color: var(--paper); }
.table__layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr);
  gap: 44px;
  align-items: start;
}
.table__fig { margin: 0; }
.table__svg { width: 100%; height: auto; display: block; }
.table__svg .tbl-label {
  font-family: var(--body);
  font-size: 22px;
  letter-spacing: var(--tracking);
  fill: var(--tbl-ink);
}
.table__svg .tbl-num { font-family: var(--display); font-size: 20px; }
.table__legend { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: var(--leading); }
.table__legend li { display: flex; gap: 14px; align-items: flex-start; }
.table__legend li + li { margin-top: 16px; padding-top: 16px; border-top: var(--hairline) solid var(--ink); }
.table__legend b { font-weight: 500; }
.table__key, .dark .table__key {
  flex: 0 0 auto;
  width: 30px; height: 30px; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--rubric); color: var(--paper);
  font-family: var(--display); font-size: 17px; line-height: 1;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* the lozenge */
}
@media (max-width: 900px) {
  .table__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* 5. rules ------------------------------------------------------------- */
.rules { border-bottom: var(--heavy) solid var(--ink); }
.rules .h2 { margin-bottom: 40px; }
.rules__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
}
.subhead {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: var(--rule) solid var(--ink);
}
.rules__cols .copy + .subhead,
.rules__cols .turn + .subhead { margin-top: 26px; }
.rules__cols p.copy + p.copy { margin-top: 16px; }
.turn { margin: 0; padding-left: 1.4em; font-size: 17px; }
.turn li + li { margin-top: 10px; }

.specials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 52px;
  padding-top: 44px;
  border-top: var(--heavy) solid var(--ink);
}
@media (max-width: 960px) { .specials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .specials { grid-template-columns: minmax(0, 1fr); } }
.specials img { width: 132px; border: var(--rule) solid var(--ink); margin-bottom: 20px; }
.specials .label { margin-bottom: 8px; }

/* 6. the deck ---------------------------------------------------------- */
.deck { border-bottom: var(--heavy) solid var(--ink); }
.deck .h2 { margin-bottom: 16px; }
.deck .lede { max-width: 60ch; margin-bottom: 24px; }
.deck .copy { max-width: 60ch; margin-bottom: 40px; }
.manifest {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  background: var(--ink);
  border: var(--frame) solid var(--ink);
  margin-bottom: 40px;
}
.manifest > div {
  background: var(--paper);
  padding: 16px 14px;
}
.manifest__num {
  font-family: var(--display);
  font-size: 36px;
  line-height: .82;
  margin-bottom: 10px;
}
.manifest .label { margin-bottom: 4px; }
.manifest .small { font-size: 14px; color: #5A554E; line-height: 1.3; }
@media (max-width: 960px) { .manifest { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .manifest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.deck__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: start;
}
.wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1020px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wall__group {
  grid-column: 1 / -1;
  padding-top: 20px;
  margin-top: 10px;
  padding-bottom: 4px;
  border-top: var(--rule) solid var(--ink);
}
.wall__group:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.tile { cursor: zoom-in; outline-offset: 3px; }
.tile img { width: 100%; border: var(--rule) solid var(--ink); }
.tile:hover img, .tile:focus-visible img, .tile.is-active img { border-color: var(--rubric); }
.tile[data-stem="Wild"]:hover img, .tile[data-stem="Wild"]:focus-visible img, .tile[data-stem="Wild"].is-active img { border-color: var(--gold); }
.tile[data-stem="Extra"]:hover img, .tile[data-stem="Extra"]:focus-visible img, .tile[data-stem="Extra"].is-active img { border-color: var(--prussian); }
.tile .label { margin-top: 8px; }
.tile .small { margin-top: 2px; }
.zoom {
  position: sticky; top: 110px;
  width: 400px; max-width: 42vw;
}
.zoom img { width: 100%; border: var(--frame) solid var(--ink); }
.zoom__label { font-family: var(--display); font-size: 30px; line-height: 1; margin-top: 12px; }
.more { margin-top: 16px; padding-top: 14px; border-top: var(--rule) solid var(--ink); }
.more .label { margin-bottom: 8px; }
.more__list { list-style: none; margin: 10px 0 0; padding: 0; }
.more__list li + li { margin-top: 6px; }
.zoom .label { margin-top: 6px; }
.zoom .note { margin-top: 10px; }

@media (max-width: 760px) {
  .deck__layout { grid-template-columns: minmax(0, 1fr); }
  .zoom { display: none; }
}

/* card & plate inspection overlay -------------------------------------- */
.peek {
  position: fixed; inset: 0; z-index: 30;
  display: none;
  background: rgba(13, 13, 15, 0.82);
  padding: 24px;
  overflow: auto;
}
.peek.is-open { display: grid; place-items: center; }
.peek__inner {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  color: var(--ink);
  border: var(--heavy) solid var(--ink);
  padding: 24px;
  margin: auto;
}
.peek img { width: 100%; border: var(--frame) solid var(--ink); }
.peek__label { font-family: var(--display); font-size: 30px; line-height: 1; margin-top: 14px; }
.peek .label { margin-top: 6px; }
.peek .note { margin-top: 10px; }
.peek__close { margin-top: 20px; width: 100%; }

/* 7. get it ------------------------------------------------------------ */
.get__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));   /* two columns under the full-width photo */
  gap: 44px;
  align-items: start;
}
.get__photo { grid-column: 1 / -1; margin: 0 0 6px; }
.get__photo img { display: block; width: 100%; height: auto; border: var(--frame) solid var(--paper); }
.get__photo figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 24px; margin-top: 14px; padding-bottom: 18px; border-bottom: var(--rule) solid var(--ledger-rule);
}
.get__photo figcaption .label { color: var(--ledger-muted); }
.get__photo figcaption .note { font-size: 16px; max-width: 62ch; }
.get .h2 { margin-bottom: 18px; }
.get .lede { max-width: 44ch; margin-bottom: 26px; }
.get .get__price { color: var(--paper); margin-bottom: 16px; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.price { font-size: 56px; color: var(--paper); }
.notice { border: var(--frame) solid var(--paper); padding: 28px; }
.notice > .copy { margin-bottom: 22px; }
.notice__row { display: flex; flex-wrap: wrap; gap: 12px; }
.notice__name { display: block; width: 100%; margin-bottom: 12px; }
.notice input[type="email"], .notice__name {
  flex: 1 1 190px; min-width: 0;
  padding: 13px 14px;
  border: var(--rule) solid var(--paper);
  background: var(--ink); color: var(--paper);
  font-family: var(--body); font-size: 17px; line-height: 1.2;
}
.notice__toggle {
  display: inline-block;
  margin-top: 14px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ledger-muted);
  text-align: left;
  transition: color .12s linear;
}
.notice__toggle:hover { color: var(--paper); }
.notice__message {
  display: block; width: 100%; margin-top: 12px;
  padding: 13px 14px;
  border: var(--rule) solid var(--paper);
  background: var(--ink); color: var(--paper);
  font-family: var(--body); font-size: 17px; line-height: 1.35;
  resize: vertical; min-height: 96px;
}
.notice input::placeholder, .notice textarea::placeholder { color: var(--ledger-muted); opacity: 1; }
.notice input:focus-visible, .notice textarea:focus-visible { outline-color: var(--paper); }
.notice__join {
  padding: 13px 24px;
  border: var(--rule) solid var(--paper);
  background: var(--paper); color: var(--ink);
  font-size: 12px; letter-spacing: var(--tracking); text-transform: uppercase; line-height: 1.3;
}
.notice__join:hover { background: var(--rubric); border-color: var(--rubric); color: var(--paper); }
.notice__join[disabled] { opacity: .6; cursor: wait; }
.notice__error { margin-top: 12px; font-size: 16px; color: var(--ledger-ink); }
.notice__done p:first-child { font-family: var(--display); font-size: 30px; line-height: 1; }
.notice__done p + p { margin-top: 10px; font-size: 16px; color: var(--ledger-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* the shop (inside 7) ------------------------------------------------- */
.shop { margin-top: 30px; padding-top: 26px; border-top: var(--rule) solid var(--ledger-rule); }
.shop .price-row { margin-bottom: 22px; }
.shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 540px;
  margin: 0 0 20px;
}
.shelf__cell { border: var(--frame) solid var(--paper); padding: 14px 16px; margin: 0; min-width: 0; }
.shelf__cell dt { color: var(--ledger-muted); }
.shelf__cell dd { margin: 10px 0 0; color: var(--paper); font-size: 44px; }
.shelf__cell .shelf__date { font-family: var(--display); font-size: 30px; line-height: .92; }
.shelf__cell--red { border-color: var(--rubric); }
.shelf__cell--red dd { color: var(--rubric); }
.shop__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.shop__delivery { flex: 1 1 100%; border: 0; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.shop__delivery legend { color: var(--ledger-muted); margin-bottom: 8px; padding: 0; }
.shop__delivery label { display: flex; align-items: baseline; gap: 10px; font-size: 17px; color: var(--ledger-ink); cursor: pointer; }
.shop__delivery input { accent-color: var(--paper); }
.shop__email {
  flex: 1 1 220px; min-width: 0;
  padding: 13px 14px;
  border: var(--rule) solid var(--paper);
  background: var(--ink); color: var(--paper);
  font-family: var(--body); font-size: 17px; line-height: 1.2;
}
.shop__email::placeholder { color: var(--ledger-muted); opacity: 1; }
.shop__email:focus-visible { outline-color: var(--paper); }
.shop__qty-wrap { display: flex; align-items: center; gap: 12px; }
.shop__qty {
  padding: 12px 14px;
  border: var(--rule) solid var(--paper);
  background: var(--ink); color: var(--paper);
  font-family: var(--body); font-size: 17px; line-height: 1.2;
}
.shop__qty[disabled] { border-color: var(--ledger-rule); color: var(--ledger-muted); }
.shop__buy {
  padding: 13px 24px;
  border: var(--rule) solid var(--paper);
  background: var(--paper); color: var(--ink);
  font-size: 12px; letter-spacing: var(--tracking); text-transform: uppercase; line-height: 1.3;
}
.shop__buy:hover { background: var(--rubric); border-color: var(--rubric); color: var(--paper); }
.shop__buy[disabled] { background: transparent; border-color: var(--ledger-rule); color: var(--ledger-muted); cursor: default; }
.shop__buy.is-busy { opacity: .6; cursor: wait; }
.shop__fine { margin-top: 14px; font-size: 15px; max-width: 44ch; }
.shop__error { margin-top: 12px; font-size: 16px; color: var(--ledger-ink); }
.shop__done { margin-top: 20px; }
.shop__done p:first-child { font-family: var(--display); font-size: 30px; line-height: 1; }
.shop__done p + p { margin-top: 10px; font-size: 16px; color: var(--ledger-muted); }

.site-footer { border-top: var(--rule) solid var(--ledger-rule); }
.site-footer .wrap {
  padding: 28px 24px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  color: var(--ledger-muted);
}

/* touch vs pointer copy ("Hover" / "Tap") ------------------------------ */
.if-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .if-hover { display: none; }
  .if-touch { display: inline; }
}

/* phones ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap { padding: 48px 20px; }
  .hero__grid { padding: 48px 20px 56px; gap: 32px; }

  /* header: wordmark on top, nav as one row that scrolls sideways */
  .site-header { padding: 10px 16px 0; gap: 4px; }
  .wordmark { padding: 2px 0 6px; }
  .site-nav {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 22px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; padding: 8px 0 12px; }

  .btn { padding: 13px 22px; }

  .plates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .plates__grid .label { margin-top: 8px; }

  .stats { gap: 18px; }
  .stat { padding: 20px; }
  .stat .numeral { font-size: 56px; }

  .rules__cols { gap: 36px; }
  .specials { gap: 30px; margin-top: 44px; padding-top: 36px; }

  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .tile .label { margin-top: 6px; }
  .tile .small { font-size: 14px; }

  .table__fig { margin: 0 -20px; }  /* the drawing bleeds to the screen edge */
  .table__svg .tbl-label { font-size: 26px; }

  .get__grid { gap: 36px; }
  .get__photo { margin: 0 -20px; }       /* the photo bleeds to the screen edge, like the table drawing */
  .get__photo img { border-left: 0; border-right: 0; }
  .get__photo figcaption { padding: 0 20px 16px; }
  .shelf { gap: 10px; }
  .shelf__cell { padding: 12px; }
  .shelf__cell dd { font-size: 36px; }
  .shelf__cell .shelf__date { font-size: 24px; }
  .shop__buy { flex: 1 1 100%; }
  .notice { padding: 22px; }
  .notice__join { flex: 1 1 100%; }

  .site-footer .wrap { padding: 24px 20px; }
}
@media (max-width: 360px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}