/* えだまめ の ゲームのかんがえ
   薄いピンクの空間に、濃いピンクの線と白い要素が浮かぶ、Pisorium由来のトーンをブログ向けに調整。 */

:root {
  --bg: #fff5f8;
  --pink-light: #ffdde9;
  --pink-main: #ff4f91;
  --pink-deep: #e82e73;
  /* Deep Pink (#E82E73) on white is ~4.1:1 — fine for lines/large UI,
     but under AA for normal-size text. This variant keeps the same hue
     family while clearing 4.5:1 for links/button labels. */
  --pink-deep-text: #c2185b;
  --green-light: #e3f3e2;
  --green-deep: #4c9a5b;
  --white: #ffffff;
  --text: #3b3035;
  --text-muted: #7a6a70;

  --font-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI',
    'Meiryo', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brush: 'Yomogi', var(--font-sans);

  --container: 1040px;
  --radius: 20px;
  --ease-slow: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(560px circle at 8% 0%, rgba(255, 79, 145, 0.08), transparent 60%),
    radial-gradient(480px circle at 96% 18%, rgba(76, 154, 91, 0.07), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* Accessibility helpers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--white);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(59, 48, 53, 0.15);
  transition: top 0.2s var(--ease-slow);
}

.skip-link:focus {
  top: 12px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--pink-deep-text);
  outline-offset: 3px;
}

/* Layout helpers */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 48px 24px;
}

.lead {
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.section p + p {
  margin-top: 16px;
}

.section h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  margin-top: 40px;
  margin-bottom: 14px;
}

.section h2:first-child {
  margin-top: 0;
}

.section ul {
  padding-left: 1.4em;
  list-style: disc;
}

.section li + li {
  margin-top: 8px;
}

.muted {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.text-link {
  color: var(--pink-deep-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--pink-main);
}

.button {
  display: inline-block;
  background: linear-gradient(135deg, var(--pink-main), var(--pink-deep-text));
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(232, 46, 115, 0.22);
  transition: box-shadow 0.25s var(--ease-slow), transform 0.25s var(--ease-slow);
}

.button:hover,
.button:focus-visible {
  box-shadow: 0 14px 30px rgba(232, 46, 115, 0.3);
  transform: translateY(-2px);
}

.br-sm {
  display: none;
}

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink-deep-text);
  margin-bottom: 10px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 245, 248, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(232, 46, 115, 0.12);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.site-logo__mark {
  font-size: 1.6rem;
  line-height: 1;
}

.site-logo__text {
  font-family: var(--font-brush);
  font-size: 1.15rem;
  line-height: 1.25;
}

.site-nav ul {
  display: flex;
  gap: 26px;
}

.site-nav a {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}

.site-nav a[aria-current='page'] {
  color: var(--pink-deep-text);
}

.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--pink-deep);
  border-radius: 2px;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--pink-deep-text);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-slow), opacity 0.25s var(--ease-slow);
}

/* Hero */
.hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px 24px 48px;
  text-align: center;
  overflow: hidden;
}

.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__cloud {
  position: absolute;
  border-radius: 50%;
  background: var(--pink-light);
  opacity: 0.55;
  filter: blur(2px);
  animation: drift 26s ease-in-out infinite;
}

.hero__cloud--1 {
  width: 160px;
  height: 160px;
  top: 6%;
  left: 6%;
  animation-duration: 30s;
}

.hero__cloud--2 {
  width: 110px;
  height: 110px;
  top: 55%;
  right: 8%;
  animation-duration: 24s;
  animation-delay: -6s;
}

.hero__cloud--3 {
  width: 70px;
  height: 70px;
  bottom: 8%;
  left: 20%;
  animation-duration: 20s;
  animation-delay: -3s;
}

@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(14px, -18px);
  }
}

.hero__sparkle {
  position: absolute;
  font-size: 1.2rem;
  opacity: 0.8;
  animation: twinkle 3.2s ease-in-out infinite;
}

.hero__sparkle--1 { top: 14%; left: 16%; animation-delay: 0s; }
.hero__sparkle--2 { top: 22%; right: 14%; font-size: 1rem; animation-delay: -1.1s; }
.hero__sparkle--3 { bottom: 18%; right: 24%; font-size: 0.9rem; animation-delay: -2.1s; }

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.05);
  }
}

.hero__eyebrow {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pink-deep-text);
  margin-bottom: 18px;
}

.hero__title {
  position: relative;
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--text);
}

.hero__title--brush {
  font-family: var(--font-brush);
  font-weight: 400;
  background: linear-gradient(100deg, var(--pink-deep-text) 20%, var(--pink-main) 55%, var(--green-deep) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero .pink-line {
  margin: 24px auto;
  max-width: 380px;
}

.hero__sub {
  position: relative;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  max-width: 480px;
  margin: 0 auto;
}

.hero__share {
  position: relative;
  margin-top: 20px;
}

/* Share button (X) */
.share-x {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--text);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 999px;
  transition: background 0.2s var(--ease-slow), transform 0.2s var(--ease-slow);
}

.share-x:hover,
.share-x:focus-visible {
  background: #58474e;
  transform: translateY(-1px);
}

.post-detail__share {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--pink-light);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Like button */
.like-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  color: var(--pink-deep-text);
  border: 1px solid var(--pink-light);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 17px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease-slow), color 0.2s var(--ease-slow), transform 0.2s var(--ease-slow);
}

.like-button:hover,
.like-button:focus-visible {
  background: var(--pink-light);
  transform: translateY(-1px);
}

.like-button.is-liked {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  color: var(--white);
  cursor: default;
}

.like-button.is-liked:hover {
  transform: none;
}

/* Pink line */
.pink-line {
  width: 100%;
  height: auto;
  display: block;
}

.pink-line path {
  animation: float-line 16s ease-in-out infinite;
  transform-origin: center;
}

@keyframes float-line {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.pink-line--section {
  max-width: 260px;
  margin: 20px 0 0;
}

.pink-line--footer {
  max-width: 100%;
  height: 40px;
  opacity: 0.8;
}

/* Page hero (non-home pages) */
.section--page-hero {
  text-align: center;
  padding-top: 64px;
  padding-bottom: 36px;
}

.page-hero__eyebrow {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pink-deep-text);
  margin-bottom: 10px;
}

.page-hero__title {
  font-size: clamp(1.8rem, 1.5rem + 1.3vw, 2.6rem);
  font-weight: 800;
}

.page-hero__lead {
  max-width: 620px;
  margin: 20px auto 0;
  color: var(--text-muted);
}

/* Tag chips */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pink-deep-text);
  background: var(--pink-light);
  padding: 5px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s var(--ease-slow), color 0.2s var(--ease-slow);
}

.tag-chip:hover,
.tag-chip:focus-visible {
  background: var(--pink-main);
  color: var(--white);
}

.tag-chip--active {
  background: var(--pink-deep-text);
  color: var(--white);
}

.tag-chip--type {
  color: var(--green-deep);
  background: var(--green-light);
}

.tag-chip--type:hover,
.tag-chip--type:focus-visible {
  background: var(--green-deep);
  color: var(--white);
}

.tag-chip--sm {
  font-size: 0.72rem;
  padding: 3px 10px;
}

.tag-chip__count {
  opacity: 0.75;
  font-weight: 600;
}

.tag-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip-row--vertical {
  flex-direction: column;
  align-items: flex-start;
}

.tag-chip-row--vertical .tag-chip {
  width: 100%;
  justify-content: space-between;
}

.filter-bar__clear {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: underline;
}

/* Home: post grid + right sidebar, after the reference blog's layout. */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
}

.page-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 84px;
}

.widget {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 8px 24px rgba(59, 48, 53, 0.06);
  overflow: hidden;
}

.widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pink-main), var(--green-deep));
}

.widget__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.widget__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 14px 0 8px;
}

.widget__label:first-of-type {
  margin-top: 0;
}

.widget__popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: popular;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget__popular-list li {
  counter-increment: popular;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.widget__popular-list li::before {
  content: counter(popular);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pink-light);
  color: var(--pink-deep-text);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.widget__popular-list a {
  font-size: 0.86rem;
  line-height: 1.5;
  text-decoration: none;
  color: var(--text);
}

.widget__popular-list a:hover,
.widget__popular-list a:focus-visible {
  color: var(--pink-deep-text);
  text-decoration: underline;
}

.widget--profile {
  text-align: center;
}

.widget--profile__mark {
  font-size: 2.4rem;
  margin-bottom: 6px;
}

.widget--profile__avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--pink-main);
}

.widget--profile__name {
  font-family: var(--font-brush);
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.widget--profile__bio {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 14px;
  white-space: pre-line;
}

.widget--profile__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.widget--profile__social a {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink-deep-text);
  background: var(--pink-light);
  padding: 4px 12px;
  border-radius: 999px;
  text-decoration: none;
}

.widget--profile__social a:hover,
.widget--profile__social a:focus-visible {
  background: var(--pink-deep-text);
  color: var(--white);
}

/* Post grid (Home) */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.post-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(59, 48, 53, 0.06);
  transition: transform 0.25s var(--ease-slow), box-shadow 0.25s var(--ease-slow);
}

.post-card:hover,
.post-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(232, 46, 115, 0.16);
}

.post-card__thumb {
  width: 100%;
  /* Matches the 1920x1080 thumbnails the admin's prompt-generator button
     asks for — a fixed px height cropped whatever the card happened to be
     wide (varies with post count in the auto-fill grid) instead of always
     16:9, which was cutting the top/bottom off wider cards. */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: var(--pink-light);
  transition: transform 0.4s var(--ease-slow);
}

.post-card:hover .post-card__thumb,
.post-card:focus-visible .post-card__thumb {
  transform: scale(1.06);
}

.post-card__thumb--placeholder {
  display: flex;
  background: linear-gradient(135deg, var(--pink-light), var(--green-light));
}

.post-card__body {
  padding: 18px 20px 22px;
}

.post-card__meta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink-deep-text);
  margin-bottom: 6px;
}

.post-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.5;
}

.post-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
}

.pagination__link:hover,
.pagination__link:focus-visible {
  background: var(--pink-light);
}

.pagination__link.is-current {
  background: var(--pink-deep-text);
  color: var(--white);
}

/* Post detail */
.post-detail__meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 12px;
}

.post-detail__tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.post-detail {
  position: relative;
  background-color: var(--white);
  /* Notebook-paper feel: a pink margin line near the left edge, card-wide.
     The horizontal ruled lines themselves are NOT here — they're on each
     paragraph/list item individually (see below), each restarting fresh at
     its own top edge in that element's own line-height. A single card-wide
     pattern would only align under the first paragraph and drift out of
     sync after any heading/image/blockquote interrupts the flow. */
  background-image: linear-gradient(to right, transparent 0 39px, rgba(232, 46, 115, 0.2) 39px 40px, transparent 40px);
  border-radius: var(--radius);
  padding: 44px 48px 40px;
  box-shadow: 0 10px 30px rgba(59, 48, 53, 0.06);
  font-size: 1.03rem;
}

.post-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--pink-deep-text), var(--pink-main), var(--green-deep));
}

.post-detail > :first-child {
  margin-top: 0 !important;
}

/* First paragraph reads as a short lead-in, like most blog platforms —
   :first-child (not :first-of-type) so this only fires when the article
   actually opens with a paragraph, not some unrelated <p> further down. */
.post-detail > p:first-child {
  font-size: 1.1em;
  color: var(--text);
}

.post-detail img {
  max-width: 100%;
  border-radius: 12px;
  margin: 8px 0;
}

.yt-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 0 0 1.2em;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Markdown-rendered content (headings, lists, quotes, code) */
.post-detail :is(h1, h2, h3, h4) {
  font-weight: 700;
  line-height: 1.5;
  margin: 1.6em 0 0.7em;
}

.post-detail :is(h1, h2, h3, h4):first-child {
  margin-top: 0;
}

/* h1 is the biggest section break an article body can use, so it gets a
   filled banner treatment — clearly heavier than h2's underline and h3's
   marker, instead of just "slightly bigger bold text" that blended in. */
.post-detail h1 {
  font-size: 1.45rem;
  padding: 14px 22px;
  background: linear-gradient(120deg, var(--pink-deep-text), var(--pink-main));
  color: var(--white);
  border-radius: 12px;
}

.post-detail h1:first-child {
  margin-top: 0;
}

.post-detail h1 a {
  color: var(--white);
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.post-detail h2 {
  font-size: 1.4rem;
  padding-bottom: 0.4em;
  border-bottom: 3px solid var(--pink-light);
  position: relative;
}

.post-detail h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--pink-deep-text), var(--pink-main));
  border-radius: 3px;
}

.post-detail h3 {
  font-size: 1.18rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-detail h3::before {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--pink-main);
  transform: rotate(45deg);
}

.post-detail h4 { font-size: 1.05rem; }

/* Ruled lines, per text-flow element rather than on the card as a whole —
   each restarts at its own top edge, so it always lines up with that
   element's own text regardless of what's above it (headings, images,
   blockquotes...) even though that means the pitch isn't continuous from
   one paragraph to the next. */
.post-detail p,
.post-detail ul,
.post-detail ol {
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.9em - 1px), rgba(120, 150, 190, 0.16) calc(1.9em - 1px) 1.9em);
}

.post-detail p {
  margin: 0 0 1.3em;
}

.post-detail ul,
.post-detail ol {
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}

.post-detail li + li {
  margin-top: 4px;
}

.post-detail li:has(> input[type='checkbox']) {
  list-style: none;
  margin-left: -1.4em;
}

.post-detail li input[type='checkbox'] {
  margin-right: 6px;
}

.post-detail blockquote {
  position: relative;
  margin: 0 0 1.3em;
  padding: 14px 20px 14px 46px;
  background: var(--bg);
  border-left: 4px solid var(--pink-main);
  border-radius: 0 12px 12px 0;
  color: var(--text-muted);
}

.post-detail blockquote::before {
  content: '“';
  position: absolute;
  left: 12px;
  top: 4px;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 700;
  color: var(--pink-main);
  font-family: Georgia, 'Times New Roman', serif;
}

.post-detail blockquote p:last-child {
  margin-bottom: 0;
}

.post-detail pre {
  background: #2d2430;
  color: #f4eef1;
  padding: 16px 20px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 0 0 1.2em;
  font-size: 0.88rem;
  line-height: 1.6;
}

.post-detail code {
  background: var(--pink-light);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9em;
}

.post-detail pre code {
  background: none;
  padding: 0;
}

.post-detail table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.3em;
  font-size: 0.95rem;
  border-radius: 10px;
  overflow: hidden;
}

.post-detail :is(th, td) {
  background-color: var(--white);
  border: 1px solid var(--pink-light);
  padding: 10px 14px;
  text-align: left;
}

.post-detail th {
  background: var(--pink-deep-text);
  color: var(--white);
  font-weight: 700;
  border-color: var(--pink-deep-text);
}

.post-detail tbody tr:nth-child(even) {
  background: var(--bg);
}

.post-detail a {
  color: var(--pink-deep-text);
  text-decoration: underline;
  text-decoration-color: var(--pink-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease-slow), color 0.2s var(--ease-slow);
}

.post-detail a:hover,
.post-detail a:focus-visible {
  color: var(--pink-main);
  text-decoration-color: var(--pink-main);
}

.post-detail__back {
  text-align: center;
  margin-top: 24px;
}

/* Empty state */
.empty-state {
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state p + p {
  margin-top: 8px;
}

/* Privacy */
.privacy {
  background: var(--white);
  border-radius: var(--radius);
  padding: 48px;
}

/* 404 */
.not-found .button {
  margin-top: 24px;
}

/* Footer */
.site-footer {
  margin-top: 40px;
  padding-top: 8px;
  background: var(--pink-light);
}

.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 24px 56px;
  text-align: center;
}

.site-footer__logo {
  font-size: 2rem;
  margin: 0 0 16px;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
  margin-bottom: 32px;
}

.site-footer__nav a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--pink-deep-text);
}

.site-footer__note {
  font-weight: 700;
  margin-bottom: 6px;
}

.site-footer__tagline {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.site-footer__copyright {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 900px) {
  .page-layout {
    grid-template-columns: 1fr;
  }

  .page-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .page-sidebar .widget {
    flex: 1;
    min-width: 240px;
  }
}

@media (max-width: 720px) {
  .br-sm {
    display: inline;
  }

  .site-nav {
    position: fixed;
    inset: 64px 16px auto 16px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(59, 48, 53, 0.18);
    padding: 12px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s var(--ease-slow), opacity 0.25s var(--ease-slow);
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 4px;
  }

  .site-nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible {
    background: var(--pink-light);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .section {
    padding: 40px 20px;
  }

  .privacy,
  .post-detail {
    padding: 28px 22px;
  }

  .hero {
    padding: 56px 20px 36px;
  }
}

/* Motion & contrast preferences */
@media (prefers-reduced-motion: reduce) {
  .hero__cloud,
  .hero__sparkle,
  .pink-line path {
    animation: none !important;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}