:root {
  --zine-ink: #24211d;
  --zine-paper: #f4eddd;
  --zine-red: #e9553f;
  --zine-blue: #247ba0;
  --zine-yellow: #f2c94c;
  --zine-green: #5f8f70;
}

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(36, 123, 160, .09) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 9%, rgba(233, 85, 63, .08) 0 3px, transparent 4px),
    repeating-linear-gradient(2deg, rgba(36, 33, 29, .025) 0 1px, transparent 1px 6px),
    var(--zine-paper);
  background-size: 43px 41px, 61px 57px, auto, auto;
  color: var(--zine-ink);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

a { color: #b62f23; }

.site-header {
  background: var(--zine-blue);
  border-bottom: 5px solid var(--zine-ink);
  color: #fff9eb;
  overflow: hidden;
  padding: 34px 18px 30px;
  position: relative;
}

.site-header::before,
.site-header::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.site-header::before {
  background: var(--zine-yellow);
  height: 140px;
  right: -42px;
  top: -58px;
  transform: rotate(18deg);
  width: 210px;
}

.site-header::after {
  border: 3px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  bottom: -56px;
  height: 120px;
  left: 8%;
  width: 120px;
}

.site-header__inner { position: relative; z-index: 1; }
.site-title {
  background: #fff9eb;
  box-shadow: 7px 7px 0 var(--zine-ink);
  color: var(--zine-ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(27px, 5vw, 50px);
  line-height: 1.15;
  padding: 6px 14px;
  transform: rotate(-1.2deg);
}

.site-lead {
  background: var(--zine-red);
  color: #fff;
  display: table;
  font-weight: 800;
  margin: 18px 0 0 18px;
  padding: 3px 10px;
  transform: rotate(.7deg);
}

.container { max-width: 1160px; padding-top: 34px; }
.breadcrumb { font-family: monospace; font-weight: 700; }

.hero {
  background: #fffdf6;
  border: 3px solid var(--zine-ink);
  border-radius: 30px 5px 26px 8px;
  box-shadow: 10px 11px 0 rgba(36, 33, 29, .18);
  overflow: visible;
  padding: 34px;
  position: relative;
  transform: rotate(.35deg);
}

.hero::before {
  background: rgba(242, 201, 76, .75);
  content: "";
  height: 30px;
  left: 42%;
  position: absolute;
  top: -17px;
  transform: rotate(-3deg);
  width: 130px;
}

.hero h1,
.page-title {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 900;
  letter-spacing: -.035em;
}

.hero h1 {
  color: var(--zine-ink);
  font-size: clamp(34px, 6vw, 64px);
  text-shadow: 3px 3px 0 rgba(242, 201, 76, .9);
}

.page-title {
  background: var(--zine-ink);
  color: #fffdf6;
  display: table;
  padding: 4px 14px;
  transform: rotate(-.5deg);
}

.area-description,
.search-box,
.link-panel,
.content-section,
.post-form,
.pr-ranking,
.area-stats {
  background: #fffdf6;
  border: 2px solid var(--zine-ink);
  border-radius: 4px 18px 5px 14px;
  box-shadow: 6px 7px 0 rgba(36, 33, 29, .12);
  padding: 22px;
}

.search-box { border-top: 12px solid var(--zine-red); }
.link-panel { border-top: 12px solid var(--zine-blue); }
.content-section { border-top: 12px solid var(--zine-green); }

.search-box h2,
.link-panel h2,
.content-section h2,
.post-form h2,
.area-stats h2,
.pr-ranking h2 {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: 1.3;
}

input,
select,
textarea {
  background: #fffef9;
  border: 2px solid var(--zine-ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(36, 33, 29, .12);
}

.submit-button,
button,
.post-card__cta,
.pr-card__button {
  background: var(--zine-red);
  border: 2px solid var(--zine-ink);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--zine-ink);
  color: #fff;
  transform: rotate(-.5deg);
}

.submit-button:hover,
button:hover,
.post-card__cta:hover,
.pr-card__button:hover {
  box-shadow: 1px 1px 0 var(--zine-ink);
  transform: translate(2px, 2px) rotate(-.5deg);
}

.area-link-grid { gap: 12px; }
.area-link-grid a,
.pagination a,
.pagination span {
  background: #fff9e5;
  border: 2px solid var(--zine-ink);
  border-radius: 2px 12px 3px 9px;
  box-shadow: 3px 3px 0 rgba(36, 33, 29, .16);
  color: var(--zine-ink);
}

.area-link-grid a:nth-child(4n+2) { background: #dcecf1; transform: rotate(.7deg); }
.area-link-grid a:nth-child(4n+3) { background: #f8d9d3; transform: rotate(-.6deg); }
.area-link-grid a:nth-child(4n) { background: #e2eddd; }

.post-list {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px 5px;
}

.post-card {
  background: #fffdf6;
  border: 2px solid var(--zine-ink);
  border-radius: 3px 14px 5px 10px;
  box-shadow: 8px 9px 0 rgba(36, 33, 29, .15);
  padding: 21px 18px 17px;
  position: relative;
}

.post-card:nth-child(4n+1) { transform: rotate(-.65deg); }
.post-card:nth-child(4n+2) { transform: rotate(.5deg); }
.post-card:nth-child(4n+3) { transform: rotate(.25deg); }
.post-card:nth-child(4n) { transform: rotate(-.35deg); }

.post-card::before {
  background: rgba(36, 123, 160, .34);
  content: "";
  height: 22px;
  left: 35%;
  position: absolute;
  top: -12px;
  transform: rotate(2deg);
  width: 92px;
}

.post-card:nth-child(3n)::before { background: rgba(242, 201, 76, .62); transform: rotate(-3deg); }
.post-card__name { color: #b62f23; font-family: "Yu Mincho", serif; font-size: 21px; }
.post-card__age,
.post-card__area,
.post-card__date { color: #625b51; font-family: monospace; }

.post-card__message {
  background: repeating-linear-gradient(transparent 0 27px, rgba(36, 123, 160, .15) 27px 28px);
  line-height: 28px;
  min-height: 70px;
}

.post-card__meta span,
.post-card__tag--job,
.post-card__tag--body_type,
.post-card__tag--purpose,
.pr-card__badges span {
  background: #f8e3a6 !important;
  border: 1px solid var(--zine-ink);
  border-radius: 2px !important;
  color: var(--zine-ink) !important;
  font-family: monospace;
}

.post-card__tag--body_type { background: #dcead7 !important; }
.post-card__tag--purpose { background: #f5d2cb !important; }
.post-card__foot { border-top: 2px dashed rgba(36, 33, 29, .35); }

.area-stats { background: #e9f1e5; }
.area-stats__eyebrow {
  background: var(--zine-ink);
  color: #fff;
  display: inline-block;
  padding: 2px 8px;
}

.area-stats__head p { color: #4f574d; }
.area-stats__head strong { color: #a92d22; }
.area-stats__block {
  background: #fff3ae;
  border: 0;
  border-radius: 1px;
  box-shadow: 4px 5px 0 rgba(36, 33, 29, .12);
  color: var(--zine-ink);
  transform: rotate(-.6deg);
}

.area-stats__block:nth-child(even) { background: #dcecf1; transform: rotate(.7deg); }
.area-stats__block li { border-top-color: rgba(36, 33, 29, .23); }
.area-stats__block b { background: #fffdf6; color: var(--zine-ink); }
.area-stats__note { background: #f5d2cb; color: #71251f; }

.pr-ranking {
  background: #f6d9d4;
  border-color: var(--zine-ink);
}

.pr-ranking__label,
.pr-card__rank { background: var(--zine-ink); border-radius: 2px; color: #fff; }
.pr-ranking__head p { color: #66524e; }
.pr-card {
  background: #fffdf6;
  border: 2px solid var(--zine-ink);
  border-radius: 3px;
  box-shadow: 5px 5px 0 rgba(36, 33, 29, .14);
}

.pr-card__image { border: 2px solid var(--zine-ink); border-radius: 50%; transform: rotate(-3deg); }
.pr-card__catch { color: #a92d22; }

.info-table th,
.info-table td { border: 2px solid var(--zine-ink); }
.info-table th { background: #f8e3a6; }
.alert { border: 2px solid var(--zine-red); border-radius: 2px; }

.site-footer {
  background: var(--zine-ink);
  border-top: 9px solid var(--zine-yellow);
  color: #dfd7c9;
}

@media (max-width: 760px) {
  .site-header { padding-top: 26px; }
  .site-title { box-shadow: 4px 4px 0 var(--zine-ink); }
  .site-lead { margin-left: 4px; }
  .hero { padding: 25px 20px; transform: none; }
  .hero::before { left: calc(50% - 50px); width: 100px; }
  .post-list { grid-template-columns: 1fr; padding-inline: 0; }
  .post-card { transform: none !important; }
  .pr-card { grid-template-columns: 64px 1fr; }
  .area-stats__block { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .submit-button,
  button,
  .post-card__cta,
  .pr-card__button { transform: none; }
}