/* ============================================================================
   Hanamaru.ai rebuild — page-scoped layout (spec §2.3 + §3)
   Layout for <main class="page-main"> per page; body carries
   data-page="home|trending|library|post|about|contact|legal".
   Sidebar pages (home/trending/library/post) get a left offset; rail mode
   shrinks it via body class .sidebar-rail (set by js/shell.js).
   Requires: tokens.css, base.css, components.css loaded first.

   CONTENTS
   --------
   1. .page-main offsets (sidebar / rail / mobile)
   2. Page title block
   3. Home feed
   4. Trending page
   5. Library page
   6. Post article
   7. About page
   8. Contact page
   9. Privacy & Terms hub
   10. Responsive
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Main content area (spec §2.3)
   ---------------------------------------------------------------------------- */
.page-main {
  margin-top: var(--header-h);
  padding: var(--space-4) var(--space-5);
}

/* Sidebar pages: offset by expanded sidebar width... */
body[data-page="home"] .page-main,
body[data-page="trending"] .page-main,
body[data-page="library"] .page-main,
body[data-page="category"] .page-main {
  margin-left: var(--sidebar-w);
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* Post pages have no left sidebar (the live single-post template's two
   columns are article + comments/feed rail) — full-bleed like luna3.
   The reading bar replaces the shell header entirely (luna3 trk1), so the
   content starts at the very top and the hero band runs UNDER the
   transparent bar. */
body[data-page="post"] .page-main {
  max-width: none;
  margin: 0;
  padding-top: 0; /* the hero band starts flush at the very top */
}

body[data-page="post"] .site-header {
  display: none;
}

/* Post loader: animating hanamaru flower, centered in the viewport (static
   markup in post.html, replaced wholesale when post.js renders the article).
   Rotates exactly one petal step (72°) per cycle so the loop is seamless,
   with a gentle bloom pulse. Global prefers-reduced-motion rule in base.css
   stops the animation for users who opt out. */
.post-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vermilion);
}

.post-loader__flower {
  width: 48px;
  height: 48px;
  animation: hana-bloom 1.6s ease-in-out infinite;
}

@keyframes hana-bloom {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.85; }
  50%  { transform: rotate(36deg) scale(1.12); opacity: 1; }
  100% { transform: rotate(72deg) scale(1); opacity: 0.85; }
}

body[data-page="post"] .post-hero-band {
  padding-top: calc(var(--header-h) + var(--space-6));
}

/* ...or by rail width when body has .sidebar-rail (spec §2.3) */
body.sidebar-rail .page-main {
  margin-left: var(--sidebar-rail-w);
}

/* ----------------------------------------------------------------------------
   2. Page title block (Trending / Your Library, spec §3.2/§3.3)
   ---------------------------------------------------------------------------- */
.page-title {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 26px;
  font-weight: 800;
  color: var(--pine);
}

.page-sub {
  margin-bottom: var(--space-5);
  font-size: 14px;
  color: var(--stone);
}

/* ----------------------------------------------------------------------------
   3. Home feed (spec §3.1)
   ---------------------------------------------------------------------------- */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 4px;
}

body.sidebar-rail .feed-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ----------------------------------------------------------------------------
   4. Trending page (spec §3.2) — 4-column card grid
   ---------------------------------------------------------------------------- */
[data-page="trending"] .feed-grid {
  grid-template-columns: repeat(4, 1fr);
}

[data-page="trending"] .tab-bar {
  margin-bottom: var(--space-4);
}

.ranked-card {
  position: relative;
}

.ranked-card__rank {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--sumi);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------------------------------------------
   5. Library page (spec §3.3)
   ---------------------------------------------------------------------------- */
.library-section {
  margin-bottom: var(--space-7);
}

/* Horizontal card row: ~300px cards, scrolls sideways when overflowing */
.card-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

/* Library cards: 2-line 14px titles (spec §3.3) */
.card-row .post-card__title,
.library-grid .post-card__title {
  font-size: 14px;
}

/* Full-list pages (history.html / bookmarks.html / liked.html) — luna3
   /history clone: head + count, Clear pill, date-grouped rows, mini-rail. */
.back-link {
  display: inline-block;
  margin: var(--space-2) 0 var(--space-4);
  font-size: 13px;
  color: var(--stone);
  text-decoration: none;
}

.back-link:hover {
  color: var(--sumi);
  text-decoration: underline;
}

.list-layout {
  display: grid;
  grid-template-columns: minmax(0, 860px) 200px;
  gap: var(--space-8);
  justify-content: center;
}

.list-head {
  margin-bottom: var(--space-2);
}

.list-head .section-head {
  margin-bottom: var(--space-1);
}

.list-head .section-head svg {
  width: 22px;
  height: 22px;
}

.section-head__title--page {
  font-size: 26px;
  font-weight: 700;
  color: var(--sumi);
}

.list-count {
  font-size: 13px;
  color: var(--stone);
}

.list-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.list-group {
  margin-bottom: var(--space-6);
}

.list-group__label {
  margin-bottom: var(--space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.list-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.list-row + .list-row {
  border-top: 1px solid var(--border);
}

.list-row__link {
  flex: 1;
  display: flex;
  gap: var(--space-4);
  min-width: 0;
  color: var(--sumi);
  text-decoration: none;
}

.list-row__link:hover {
  text-decoration: none;
}

.list-row__link:hover .list-row__title {
  color: var(--pine);
}

.list-row__thumb {
  flex: 0 0 200px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.list-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding-top: var(--space-1);
}

.list-row__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-row__meta {
  font-size: 12px;
  color: var(--stone);
}

/* Row remove ×: inline (not the hover-overlay used on cards) */
.list-row .card-remove {
  position: static;
  opacity: 1;
  box-shadow: none;
  margin-top: var(--space-1);
}

/* Right mini-rail (Home / Clear) — desktop only */
.list-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-7);
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  align-self: start;
}

.list-rail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sumi);
  text-decoration: none;
  cursor: pointer;
}

.list-rail__link:hover {
  color: var(--pine);
  text-decoration: none;
}

.list-rail__link svg {
  color: var(--slate-500);
}

/* ----------------------------------------------------------------------------
   5b. Category pages (live archive template: pillar header + grid + Load More)
   ---------------------------------------------------------------------------- */
.category-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.category-head__icon {
  display: inline-flex;
  margin-top: 6px; /* optically aligns with the title cap height */
  color: var(--pillar, var(--pine));
}

.category-head .page-title {
  margin: 0 0 var(--space-1);
}

.category-head .page-sub {
  margin-bottom: 0;
  max-width: 60ch;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* ----------------------------------------------------------------------------
   6. Post article — luna3 single-post template clone
   (reference: luna3.ai/asia-pacific-movers-2026-06-10)
   Hero band (image card + title block) → centered action bar →
   two columns (article main + comments/subscribe/feed rail) → reading bar.
   ---------------------------------------------------------------------------- */

/* --- hero band: soft pillar-tinted backdrop, image left / title right --- */
.post-hero-band {
  margin: 0 calc(-1 * var(--space-5)) var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: var(--card-bg); /* fallback when color-mix is unsupported */
  /* luna3-style backdrop: soft pillar tint that FADES to white toward the
     bottom edge, dissolving into the page (the linear layer on top). */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.55) 70%,
      var(--white) 100%),
    radial-gradient(120% 160% at 18% 0%,
      color-mix(in srgb, var(--pillar, var(--pine)) 16%, var(--white)) 0%,
      color-mix(in srgb, var(--pillar, var(--pine)) 6%, var(--white)) 55%,
      color-mix(in srgb, var(--pillar, var(--pine)) 2%, var(--white)) 100%);
}

.post-hero-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(280px, 1fr);
  align-items: center;
  gap: var(--space-7);
}

.post-hero-card {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.post-hero-card img {
  display: block;
  width: 100%;
  height: auto;
}

.post-hero-card__ph {
  aspect-ratio: 16 / 9;
}

.post-hero-info .chip {
  margin-bottom: var(--space-3);
  font-size: 13px;
  padding: 6px 14px;
}

.post-title {
  margin: 0 0 var(--space-3);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sumi);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--stone);
}

/* --- centered action bar under the hero (luna3) --- */
.action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.action-bar--center {
  justify-content: center;
  margin: var(--space-4) 0 var(--space-5);
}

/* Post pages: the mobile bottom tab bar auto-hides on scroll-down and returns
   on scroll-up (the `is-hidden` class is toggled by js/pages/post.js) — an
   uncluttered read without losing one-swipe nav (2026-06-15). Post-scoped so
   other pages keep the bar pinned. */
body[data-page="post"] .bottom-nav {
  transition: transform 0.28s ease;
}
body[data-page="post"] .bottom-nav.is-hidden {
  transform: translateY(110%);
}

/* --- two columns: article main + rail ---
   Desktop geometry carbon-copies luna3 (at 1920: article from ~115px,
   ~1015px wide; rail ~520px on the right). */
.post-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--space-8);
}

.post-main {
  max-width: var(--column-max);
  min-width: 0;
}

@media (min-width: 1025px) {
  .post-hero-band__inner {
    /* Cap + centre the hero so it doesn't hug the left edge on ultra-wide
       screens (2560px etc.); the greedy image keeps the feature image wide at
       normal desktop widths, and the 1fr title column fills the rest within the
       cap so the title sits beside the image, not floating far right. Padding
       trimmed + cap/image widened a touch so the hero + body use more of the
       block (2026-06-14, user request: "reduce side padding, widen a bit"). */
    max-width: 1860px;
    margin: 0 auto;
    padding: 0 56px;
    grid-template-columns: minmax(0, 1020px) minmax(300px, 1fr);
    gap: 56px;
  }

  /* luna3 hero type scale: 26px/600 title (not the 30px/700 mobile-first
     default), 16px meta line. */
  .post-title {
    font-size: 26px;
    font-weight: 600;
  }

  .post-meta {
    font-size: 16px;
  }

  .post-hero-info .chip {
    margin-bottom: var(--space-4);
  }

  .post-columns {
    /* Share the hero's cap + centring so the article + rail stay aligned with
       the hero band and the whole post centres on ultra-wide screens. Padding
       trimmed to match the hero so the body widens a touch too. */
    max-width: 1860px;
    margin: 0 auto;
    padding: 0 72px 0 56px;
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 90px;
  }

  .post-main {
    max-width: 1080px;
  }
}

.post-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* --- Key Points box (luna3: light well, accent left border) --- */
.key-points {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--card-bg);
  border-left: 3px solid var(--pillar, var(--pine));
  border-radius: var(--radius-md);
}

.key-points__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.key-points__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 15px;
  font-weight: 700;
  color: var(--sumi);
}

.key-points__title svg {
  color: var(--pillar, var(--pine));
}

.key-points__about {
  font-size: 12px;
  color: var(--slate-400);
  white-space: nowrap;
}

.key-points ul {
  margin: 0;
  padding-left: var(--space-4);
}

.key-points li {
  margin-bottom: 0.4em;
  font-size: 15px;
  line-height: 1.5;
}

/* --- Comments (luna3 carbon copy: head + composer + list) --- */
.comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.comments-box__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--sumi);
}

.comments-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--stone);
  cursor: pointer;
}

.comments-sort:hover {
  color: var(--sumi);
}

.comments-box__avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--matcha);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

.comments-box__empty {
  font-size: 13px;
  font-style: italic;
  color: var(--slate-400);
}

.comment-composer__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.comment-composer__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.comment-composer__input {
  width: 100%;
  padding: 4px 28px 6px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--sumi);
  resize: none;
  overflow: hidden;
}

.comment-composer__input::placeholder {
  color: var(--slate-400);
}

.comment-composer__input:focus-visible {
  outline: none;
  border-bottom-color: var(--pine);
}

.comment-composer__emoji {
  position: absolute;
  right: 0;
  bottom: 7px; /* nudged 1px up off the underline (was 6px) */
  display: inline-flex;
  border: 0;
  background: none;
  padding: 0;
  color: var(--slate-400);
  cursor: pointer;
}

.comment-composer__emoji:hover {
  color: var(--gold);
}

.emoji-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: var(--space-2);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.emoji-pop__item {
  border: 0;
  background: none;
  padding: 4px;
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.emoji-pop__item:hover {
  background: var(--sage);
}

.comment-composer__extras {
  margin-top: var(--space-2);
}

.comment-composer__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.comment-composer__fields .input-underline {
  font-size: 14px;
}

.comment-composer__subscribe {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--stone);
  cursor: pointer;
}

.comment-composer__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.comment-composer__cancel {
  border: 0;
  background: none;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sumi);
  cursor: pointer;
}

.comment-composer__submit {
  border: 0;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--sumi);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.comment-composer__submit:disabled {
  opacity: 0.45;
  cursor: default;
}

.comments-list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comment-row {
  display: flex;
  gap: var(--space-2);
}

.comment-row__body {
  min-width: 0;
}

.comment-row__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 13px;
}

.comment-row__meta span {
  font-size: 12px;
  color: var(--slate-400);
}

/* Tip badge on comments posted via the thank-you flow.
   Scoped under .comment-row__meta so the white text + 10px size beat the
   generic `.comment-row__meta span { color: slate-400; font-size: 12px }`
   rule above (which otherwise greys the badge out). */
.comment-row__meta .comment-row__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--matcha);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.comment-row__text {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.comment-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.comment-row__like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--stone);
  cursor: pointer;
}

.comment-row__like.is-active {
  color: var(--vermilion);
}

.comment-row__reply {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--slate-400);
  cursor: pointer;
  font-weight: 500;
}

.comment-row__reply:hover {
  color: var(--sumi);
}

/* --- inline reply composer (appears under a comment) --- */
.reply-composer {
  margin-top: var(--space-2);
  padding: var(--space-2) 0;
}

.reply-composer__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.reply-composer__avatar {
  flex: 0 0 auto;
}

.reply-composer__field {
  flex: 1;
  position: relative;
}

.reply-composer__input {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  padding: 6px 30px 6px 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  resize: none;
  outline: none;
}

.reply-composer__input:focus {
  border-bottom-color: var(--pine);
}

.reply-composer__input::placeholder {
  color: var(--slate-400);
}

.reply-composer__field .comment-composer__emoji {
  position: absolute;
  right: 0;
  top: 4px;
}

.reply-composer__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.comment-row__kebab-wrap {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

.comment-row__kebab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: none;
  padding: 0;
  border-radius: var(--radius-full);
  color: var(--slate-400);
  cursor: pointer;
}

.comment-row__kebab:hover {
  background: var(--ghost-hover);
  color: var(--sumi);
}

.comment-row__kebab-menu {
  right: 0;
  top: 24px;
}

/* --- action bar comment counter --- */
.action-bar__count {
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
  color: var(--stone);
}

.action-bar__count:empty {
  display: none;
}

/* --- rail pill filter row (luna3 feed pills) --- */
.rail-pills {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  scrollbar-width: none;
}

.rail-pills::-webkit-scrollbar {
  display: none;
}

/* --- "Aa" text button + active listen state --- */
.icon-btn--text {
  font-size: 15px;
  font-weight: 600;
  color: var(--icon-strong);
}

.icon-btn.js-listen.is-active {
  color: var(--vermilion);
}

/* --- tip overlay (thank-you flow; payments launch later) --- */
.tip-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--speed) var(--ease),
              visibility 0s linear var(--speed);
}

.tip-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--speed) var(--ease);
}

.tip-overlay__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.tip-overlay__card {
  position: relative;
  width: min(500px, calc(100vw - 32px));
  padding: var(--space-4) var(--space-6) var(--space-6);
  background: var(--washi);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-drawer);
  text-align: center;
}

.tip-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.tip-card__header .tip-overlay__close {
  position: static;
  flex-shrink: 0;
}

.tip-overlay__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

/* No hover effect on the modal's close/back buttons (per request) — override
   the base .icon-btn:hover ghost background so nothing changes on hover. */
.tip-overlay .icon-btn:hover {
  background: transparent;
}

.tip-overlay__flower {
  color: var(--vermilion);
  margin-bottom: var(--space-2);
}

.tip-overlay__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--pine);
  margin-bottom: var(--space-1);
}

.tip-overlay__sub {
  font-size: 13px;
  color: var(--stone);
  margin-bottom: var(--space-4);
}

.tip-overlay__amounts {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tip-amount.is-active {
  background: var(--pine);
  color: var(--white);
}

.tip-overlay__note {
  margin-top: var(--space-2);
  font-size: 11px;
  line-height: 1.5;
  color: var(--slate-400);
}

.tip-overlay__note a {
  color: var(--stone);
  text-decoration: underline;
}

.tip-overlay__note a:hover {
  color: var(--sumi);
}

/* --- article text-size steps (Aa dropdown: Small/Normal/Large/XL) ---
   Double-class specificity so these always beat the .post-body base size
   regardless of rule order in this file. */
.post-body.post-body--sm {
  font-size: 15px;
}

.post-body.post-body--lg {
  font-size: 19px;
}

.post-body.post-body--xl {
  font-size: 22px;
}

/* --- avatar circles + "Choose avatar" picker (luna3 carbon copy) --- */
.avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--matcha);
  color: var(--white);
  font-weight: 700;
  line-height: 1;
}

.avatar-circle--emoji {
  background: var(--sage);
}

.avatar-btn {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-full);
}

.avatar-btn:hover .avatar-circle {
  box-shadow: 0 0 0 2px var(--sage-dark, var(--border));
}

/* Small pencil badge: signals the avatar is editable (luna3) */
.avatar-btn__edit {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--stone);
  box-shadow: 0 0 0 1px var(--border);
}

.avatar-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 196px;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.avatar-pop__label {
  margin-bottom: var(--space-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--stone);
}

.avatar-pop__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.avatar-pop__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 17px;
  cursor: pointer;
  border-radius: var(--radius-full);
}

.avatar-pop__item:hover {
  background: var(--sage);
}

.avatar-pop__dot {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
}

/* --- comments Sort by dropdown (Top comments / Newest first) --- */
.comments-sort-wrap {
  position: relative;
}

.sort-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 150px;
  padding: var(--space-1);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.sort-menu__item {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: left;
  color: var(--sumi);
  cursor: pointer;
}

.sort-menu__item:hover {
  background: var(--card-bg);
}

.sort-menu__item.is-active {
  background: var(--card-bg);
  font-weight: 700;
}

/* --- rail feed item + kebab (⋯ → Add to bookmarks / Share) ---
   NOTE: named .feed-item — .rail-item is the SIDEBAR rail nav item
   (components.css §6), do not reuse that class here. */
.feed-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.feed-item .rail-item-link {
  flex: 1;
  min-width: 0;
}

.feed-item__kebab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  padding: 0;
  border-radius: var(--radius-full);
  color: var(--slate-400);
  cursor: pointer;
}

.feed-item__kebab:hover {
  background: var(--ghost-hover);
  color: var(--sumi);
}

.kebab-menu {
  position: absolute;
  right: 0;
  top: 28px;
  z-index: 20;
  min-width: 180px;
  padding: var(--space-1);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.kebab-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: left;
  color: var(--sumi);
  cursor: pointer;
}

.kebab-menu__item:hover {
  background: var(--card-bg);
}

.kebab-menu__item svg {
  color: var(--slate-500);
}

/* --- "Thank Hanamaru.ai" tip modal fields (luna3 carbon copy) --- */
.tip-card {
  text-align: left;
}

.tip-card__title {
  font-size: 19px;
  font-weight: 800;
  color: var(--sumi);
  margin-bottom: 0;
}

.tip-card__copy {
  font-size: 13px;
  line-height: 1.55;
  color: var(--stone);
  margin-bottom: var(--space-4);
}

.tip-card__id-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.tip-card__chip {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--matcha);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.tip-card__nocomment {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--stone);
  cursor: pointer;
}

.tip-card__name {
  margin-bottom: var(--space-2);
}

.tip-card__comment-row {
  position: relative;
  margin-bottom: var(--space-4);
}

.tip-card__comment-row .input-underline {
  padding-right: 26px;
}

.tip-card__emoji {
  position: absolute;
  right: 0;
  bottom: 6px;
  display: inline-flex;
  border: 0;
  background: none;
  padding: 0;
  color: var(--gold);
  cursor: pointer;
}

.tip-card__amounts {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.tip-amount {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  color: var(--sumi);
  cursor: pointer;
  text-align: center;
}

.tip-amount.is-active {
  border-color: var(--pine);
  background: var(--pine);
  color: var(--white);
}

.tip-card__custom-label {
  font-size: 12px;
  color: var(--stone);
  margin-bottom: var(--space-1);
}

.tip-card__custom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.tip-card__custom input {
  flex: 1;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--sumi);
}

.tip-card__custom input:focus-visible {
  outline: none;
}

/* --- tip step 2: payment sheet (carbon copy of luna3's Stripe modal) --- */
.tip-pay {
  text-align: left;
}

.tip-pay__back {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

.tip-pay__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-5);
}

.tip-pay__sub {
  margin-top: var(--space-1);
  font-size: 12px;
  color: var(--stone);
}

.tip-pay__amount {
  text-align: right;
}

/* inline amount editor (Change amount → edits in place, luna3) */
.tip-pay__amount-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--pine);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--pine);
}

.tip-pay__amount-cur {
  font-size: 14px;
  color: var(--stone);
}

.js-pay-amount-input {
  width: 72px;
  border: 0;
  background: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--sumi);
  text-align: right;
}

.js-pay-amount-input:focus-visible {
  outline: none;
}

/* custom up/down stepper for the amount fields (always visible, all browsers) */
.js-tip-custom,
.js-pay-amount-input {
  -moz-appearance: textfield; /* hide Firefox native spinners */
}

.js-tip-custom::-webkit-outer-spin-button,
.js-tip-custom::-webkit-inner-spin-button,
.js-pay-amount-input::-webkit-outer-spin-button,
.js-pay-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none; /* hide WebKit native spinners — we add our own */
  margin: 0;
}

.num-stepper {
  display: none; /* arrows hidden per request; native spinners stay suppressed above */
  flex-direction: column;
  flex: 0 0 auto;
  margin-left: 6px;
}

.num-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--stone);
  cursor: pointer;
}

.num-stepper__btn:first-child {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 0;
}

.num-stepper__btn:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.num-stepper__btn:hover {
  background: var(--card-bg);
  color: var(--sumi);
}

.num-stepper__btn svg {
  width: 11px;
  height: 11px;
}

.tip-pay__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--sumi);
}

.tip-pay__change {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--indigo);
  cursor: pointer;
  text-decoration: underline;
}

.tip-pay__receipt {
  margin: var(--space-3) 0 var(--space-4);
}

/* payment method tabs (Card | Google Pay) */
.pay-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.pay-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  color: var(--sumi);
  cursor: pointer;
}

.pay-tab.is-active {
  border-color: var(--pine);
  background: var(--pine);
  color: var(--white);
}

.gpay-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  color: var(--sumi);
}

.gpay-badge--lg {
  font-size: 13px;
  padding: 2px 10px;
}

/* labeled inputs (Stripe-sheet style) */
.pay-fields {
  display: flex;
  flex-direction: column;
}

.pay-label {
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--sumi);
}

.pay-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 14px;
  color: var(--sumi);
  margin-bottom: var(--space-3);
}

/* --- in-page Stripe Payment Element (mounts here; Stripe renders its own
   iframe card fields inside) --- */
.pay-element {
  min-height: 44px;
  margin-bottom: var(--space-3);
}

.pay-loading {
  margin: 0;
  padding: var(--space-3) 0;
  font-size: 13.5px;
  color: var(--stone);
  text-align: center;
}

.pay-error {
  margin: 0 0 var(--space-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--vermilion, #DD5240);
}

.pay-input:focus-visible {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 1px var(--pine);
}

.pay-input.is-invalid {
  border-color: var(--vermilion);
  box-shadow: 0 0 0 1px var(--vermilion);
}

.pay-input-wrap {
  position: relative;
}

.pay-input-wrap .pay-input {
  padding-right: 110px;
}

.pay-row {
  display: flex;
  gap: var(--space-2);
}

.pay-col {
  flex: 1;
  min-width: 0;
}

.pay-col .pay-input-wrap .pay-input {
  padding-right: 36px;
}

/* iOS Safari auto-zooms the page when a focused input's font-size is < 16px.
   Force the tip modal's own text inputs (name, comment, custom/change amount,
   receipt email, fallback card fields) to 16px on phones so tapping one — e.g.
   the receipt email — doesn't zoom in. The Stripe Element's card fields are in
   a cross-origin iframe and already use 16px. (matches luna3's mobile rule.) */
@media (max-width: 767px) {
  .tip-overlay input[type="text"],
  .tip-overlay input[type="email"],
  .tip-overlay input[type="number"],
  .tip-overlay .input-underline,
  .tip-overlay .pay-input {
    font-size: 16px;
  }
}

/* card brand badges inside the number field */
.card-brands {
  position: absolute;
  right: 10px;
  top: 11px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.card-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 19px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.card-brand--visa {
  background: #1a1f71;
  color: var(--white);
  font-style: italic;
}

.card-brand--mc {
  background: #16366f;
  gap: 0;
}

.card-brand--mc i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #eb001b;
}

.card-brand--mc i + i {
  background: #f79e1b;
  margin-left: -5px;
  opacity: 0.9;
}

.card-brand--amex {
  background: #006fcf;
  color: var(--white);
}

.pay-cvc-icon {
  position: absolute;
  right: 10px;
  top: 12px;
  color: var(--slate-400);
}

/* Google Pay stub */
.gpay-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--sumi);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- step 3: confirmation --- */
.tip-done {
  text-align: center;
}

/* luna3 success modal: the green circle-check is the SVG's own stroke —
   no filled background plate (carbon copy of .luna-confirm-icon). */
.tip-done__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.tip-done__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 10px;
}

.tip-done__sub {
  font-size: 15px;
  color: var(--stone);
  line-height: 1.65;
  max-width: 340px;
  margin: 0 auto;
}

.tip-done__note {
  font-size: 13px;
  color: var(--stone);
  margin-top: var(--space-2);
}

/* --- Aa text-size dropdown --- */
.fontsize-wrap {
  position: relative;
  display: inline-flex;
}

.fontsize-menu {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  min-width: 170px;
}

.fontsize-menu .sort-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- rail feed ("More from Hanamaru", luna3 side feed) --- */
.rail-feed__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: var(--space-3);
}

.rail-feed__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rail-item-link {
  display: flex;
  gap: var(--space-3);
  color: var(--sumi);
  text-decoration: none;
}

.rail-item-link:hover {
  text-decoration: none;
}

.rail-item-link:hover .rail-item-link__title {
  color: var(--pine);
}

.rail-thumb {
  position: relative;
  flex: 0 0 130px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rail-thumb__badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.62);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.rail-item-link__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.rail-item-link__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rail-item-link__meta {
  font-size: 12px;
  color: var(--stone);
}

/* --- reading bar (luna3 trk1): title + scroll progress while reading --- */
.reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) + 1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-h);
  padding: 0 var(--space-3);
  transform: translateY(0);
  transition: transform var(--speed) var(--ease),
              background-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

/* The bar not currently in play slides up out of view. */
.reading-bar.is-away {
  transform: translateY(-110%);
}

/* CATS bar: transparent over the hero at the top; white when shown
   mid-page on scroll-up. */
.reading-bar--cats {
  background: transparent;
}

.reading-bar--cats.is-scrolled {
  background: var(--white);
  box-shadow: none;
}

/* TITLE bar: always white (only ever shown scrolled). */
.reading-bar--title {
  background: var(--white);
  box-shadow: none;
}

/* Category pills row in the cats bar (links to the pillar pages) */
.reading-bar__cats {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.reading-bar__cats::-webkit-scrollbar {
  display: none;
}

/* Equal-width sides keep the title optically centered (luna3). */
.reading-bar__side {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 0 0;
  min-width: 0;
}

.reading-bar__side--right {
  justify-content: flex-end;
}

.reading-bar__title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 56ch;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--sumi);
}

/* Share + tip icons in the title bar: compact so the right side
   doesn't compete with the centered title. */
.reading-bar--title .icon-btn svg {
  width: 16px;
  height: 16px;
}

.reading-bar--title .icon-btn {
  width: 32px;
  height: 32px;
}

.reading-bar__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--vermilion);
}

/* Article body typography */
.post-body {
  font-size: 17px;
  line-height: 1.7;
}

.post-body p {
  margin: 0 0 1.1em;
}

.post-body h2 {
  margin: 1.6em 0 0.6em;
  font-size: 22px;
  font-weight: 700;
  color: var(--pine);
}

.post-body h3 {
  margin: 1.4em 0 0.5em;
  font-size: 19px;
  font-weight: 700;
  color: var(--pine);
}

.post-body a {
  color: var(--vermilion);
  text-decoration: underline;
}

.post-body blockquote {
  margin: 1.4em 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 3px solid var(--vermilion);
  color: var(--stone);
}

.post-body img {
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
}

.hana-figure {
  margin: var(--space-4) 0;
  text-align: center;
}

.hana-figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.hana-figure-caption {
  margin-top: var(--space-1);
  font-size: 0.85em;
  color: var(--stone);
  line-height: 1.4;
}

.post-body ul,
.post-body ol {
  margin: 0 0 1.1em;
  padding-left: var(--space-4);
  list-style-position: outside;
}

.post-body li {
  margin-bottom: 0.4em;
}

/* 9-slot structure: Slot-2 "Do this tonight" micro-win callout */
.post-body .hana-callout-tonight {
  margin: 1.6em 0;
  padding: var(--space-3) var(--space-4);
  background: var(--sage);
  border-left: 4px solid var(--matcha);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.post-body .hana-callout-tonight p { margin: 0; }
.post-body .hana-callout-tonight strong { color: var(--pine); }

/* 9-slot structure: Slot-5 named artifact card (the one ownable, keepable unit) */
.post-body .hana-artifact {
  margin: 2em 0;
  padding: var(--space-4);
  background: var(--washi);
  border: 1px solid var(--sage-dark);
  border-top: 5px solid var(--wealth, var(--gold));
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 14px rgba(39, 44, 41, 0.06);
}
.post-body .hana-artifact .hana-artifact-name {
  margin: 0 0 0.5em;
  font-weight: 700;
  font-size: 1.1em;
  color: var(--pine);
}
.post-body .hana-artifact ol,
.post-body .hana-artifact ul { margin: 0.4em 0 0.7em; }
.post-body .hana-artifact-foot {
  margin: 0.8em 0 0;
  font-size: 0.8em;
  color: var(--stone);
}

/* Wellbeing disclaimer (spec §3.4) */
.disclaimer-box {
  margin: var(--space-7) 0;
  padding: var(--space-4);
  background: var(--sage);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.6;
  color: var(--sumi);
}

/* "Found this useful? Say thanks" CTA at bottom of article */
.post-thanks {
  margin: var(--space-7) 0;
  text-align: center;
}

.post-thanks__heading {
  margin-bottom: var(--space-3);
  font-size: 18px;
  font-weight: 700;
  color: var(--sumi);
}

.post-thanks__btn {
  gap: var(--space-2);
}

.post-thanks__btn svg {
  width: 18px;
  height: 18px;
}

/* Related posts: 3-card grid from same category */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Mobile doom-scroll feed (homepage-style cards below article) — hidden on
   desktop/tablet; shown on mobile portrait where the rail feed is hidden. */
.post-mobile-feed {
  display: none;
}

/* ----------------------------------------------------------------------------
   7. About page (spec §3.5) — no sidebar, washi background, centered hero
   ---------------------------------------------------------------------------- */
body[data-page="about"] {
  background: var(--washi);
}

body[data-page="about"] .site-header {
  background: transparent;
}

body[data-page="about"] .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  max-width: 720px;
  min-height: calc(100vh - var(--header-h));
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.about-mark {
  font-size: 40px;
  font-weight: 800;
  color: var(--pine);
}

.about-hero__img {
  width: min(320px, 70vw);
  height: auto;
}

.about-tag {
  font-size: 14px;
  letter-spacing: 8px;
  color: var(--stone);
}

.about-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.about-heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--pine);
}

.about-body {
  font-size: 17px;
  line-height: 1.7;
}

.about-body p {
  margin-bottom: 1.1em;
}

/* Subscribe CTA (heading + email + vermilion button) */
.about-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-6);
}

.about-cta__heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--pine);
}

.about-cta__sub {
  font-size: 14px;
  color: var(--stone);
}

.about-cta form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  width: 100%;
  max-width: 420px;
}

.about-cta .input-underline {
  flex: 1;
  font-size: 14px;
}

/* ----------------------------------------------------------------------------
   8. Contact page (spec §3.6) — no sidebar, centered hero + 3 cards
   ---------------------------------------------------------------------------- */
body[data-page="contact"] .page-main {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-hero {
  margin: var(--space-7) 0 var(--space-7);
  text-align: center;
}

.contact-hero h1 {
  font-size: 40px;
  font-weight: 800;
  color: var(--pine);
}

.contact-hero__flower {
  color: var(--vermilion);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
  max-width: var(--content-max);
  margin: 0 auto;
}

.card {
  padding: 32px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.card__icon {
  margin-bottom: var(--space-3);
  color: var(--pine);
}

.card__icon svg {
  width: 28px;
  height: 28px;
}

.card__title {
  margin-bottom: var(--space-3);
  font-size: 18px;
  font-weight: 700;
  color: var(--pine);
}

.card a {
  color: var(--vermilion);
}

/* "Type to us" form (underline inputs, vermilion Send) */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form .input-underline {
  font-size: 14px;
}

.contact-form .btn {
  align-self: flex-start;
}

/* FAQ accordion — native <details>/<summary>, chevron rotates when open */
.faq details {
  border-bottom: 1px solid var(--border);
}

.faq details:last-child {
  border-bottom: 0;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--sumi);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: var(--space-1);
  border-right: 2px solid var(--stone);
  border-bottom: 2px solid var(--stone);
  transform: rotate(45deg); /* chevron pointing down */
  transition: transform var(--speed-fast) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(225deg); /* chevron pointing up */
}

.faq details p {
  padding: 0 var(--space-4) var(--space-3) 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--stone);
}

/* ----------------------------------------------------------------------------
   9. Privacy & Terms hub (spec §3.7) — centered column, max 760px
   ---------------------------------------------------------------------------- */
.legal-page {
  max-width: var(--column-max);
  margin: 0 auto;
}

.legal-title {
  margin: var(--space-6) 0 var(--space-4);
  font-size: 28px;
  font-weight: 800;
  color: var(--pine);
  text-align: center;
}

.legal-toggle {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.legal-toggle a {
  padding-bottom: var(--space-1);
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--stone);
  text-decoration: none;
}

.legal-toggle a:hover {
  color: var(--pine);
  text-decoration: none;
}

.legal-toggle a.is-active {
  color: var(--pine);
  border-bottom-color: var(--pine);
}

.legal-body {
  font-size: 16px;
  line-height: 1.7;
}

.legal-body p {
  margin-bottom: 1.1em;
}

.legal-body h2 {
  margin: 1.8em 0 0.6em;
  font-size: 20px;
  font-weight: 700;
  color: var(--pine);
}

.legal-body h3 {
  margin: 1.4em 0 0.5em;
  font-size: 17px;
  font-weight: 700;
  color: var(--pine);
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 1.1em;
  padding-left: var(--space-4);
  list-style-position: outside;
}

.legal-body li {
  margin-bottom: 0.4em;
}

.legal-body a {
  color: var(--vermilion);
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   10. Responsive (breakpoints documented in tokens.css)
   ---------------------------------------------------------------------------- */

/* Tablet + mobile (<=1024px): sidebar gone — drop offsets, clear bottom nav.
   Selector specificity ties the desktop rules above; source order wins. */
@media (max-width: 1024px) {
  body[data-page] .page-main {
    margin-left: 0;
    margin-top: var(--header-h-mobile);
    padding-bottom: 70px; /* bottom nav clearance (spec §2.3) */
  }

  /* Home + category: their header carries the extra pill-bar row (shell.js
     showPills), so clear both rows — plus a small buffer so the first card
     row never tucks under the pills if fonts render the bar a few px
     taller than --pillbar-h. */
  body[data-page="home"] .page-main,
  body[data-page="category"] .page-main {
    margin-top: calc(var(--header-h-mobile) + var(--pillbar-h) + var(--space-3));
  }

  /* Post: the reading bar replaces the header and the hero band runs
     underneath it — no offset, no gap. */
  body[data-page="post"] .page-main {
    margin-top: 0;
  }

  /* About / Contact / Legal: calm static pages — no bottom tab bar, so no
     clearance needed. Restore the drawer's Home/Trending/Library links +
     divider, hidden at this width only because they normally live in the
     bottom bar (components.css §20). */
  body[data-page="about"] .bottom-nav,
  body[data-page="contact"] .bottom-nav,
  body[data-page="legal"] .bottom-nav {
    display: none;
  }

  body[data-page="about"] .page-main,
  body[data-page="contact"] .page-main,
  body[data-page="legal"] .page-main {
    padding-bottom: var(--space-6);
  }

  body[data-page="about"] .drawer-nav .drawer-item,
  body[data-page="contact"] .drawer-nav .drawer-item,
  body[data-page="legal"] .drawer-nav .drawer-item {
    display: flex;
  }

  body[data-page="about"] .drawer-nav__divider,
  body[data-page="contact"] .drawer-nav__divider,
  body[data-page="legal"] .drawer-nav__divider {
    display: block;
  }

  /* Post template: hero stacks (image above title), columns stack
     (rail drops below the article). */
  .post-hero-band__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .post-columns {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .post-rail {
    border-top: 1px solid var(--border);
    padding-top: var(--space-5);
  }

  /* Post: hide category pills in the reading bar on tablet */
  .reading-bar__cats {
    display: none;
  }

  /* Sidebar pages: restore normal padding (desktop uses 8px for tight grid) */
  body[data-page="home"] .page-main,
  body[data-page="trending"] .page-main,
  body[data-page="library"] .page-main,
  body[data-page="category"] .page-main {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* Feed grid: 2 columns on tablet */
  .feed-grid,
  body.sidebar-rail .feed-grid,
  [data-page="trending"] .feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Library list pages: drop the mini-rail */
  .list-layout {
    grid-template-columns: 1fr;
  }

  .list-rail {
    display: none;
  }

  /* Post page: swap rail feed for doom-scroll card grid. Scope the subscribe
     hide to the RAIL — an unscoped `.subscribe-block` also hid the off-canvas
     drawer's subscribe block, making the post drawer differ from every other
     page (2026-06-15). */
  body[data-page="post"] .rail-feed,
  body[data-page="post"] .post-rail .subscribe-block {
    display: none;
  }

  body[data-page="post"] .post-mobile-feed {
    display: block;
    margin-top: var(--space-6);
    border-top: 1px solid var(--border);
    padding-top: var(--space-5);
  }

  body[data-page="post"] .post-mobile-feed .feed-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet landscape (768–1024px): restore desktop-style 2-column post layout.
   min-height 500px excludes phones held sideways (e.g. 812×375, 844×390) —
   width alone can't tell a landscape phone from a landscape tablet. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (min-height: 500px) {
  /* Card grid: 3-up like desktop proportions (2-up reads oversized and
     edge-to-edge at 1024 wide) + visible side margins */
  .feed-grid,
  body.sidebar-rail .feed-grid,
  [data-page="trending"] .feed-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  body[data-page="home"] .page-main,
  body[data-page="trending"] .page-main,
  body[data-page="library"] .page-main,
  body[data-page="category"] .page-main {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .post-hero-band__inner {
    grid-template-columns: minmax(0, 640px) minmax(280px, 1fr);
    gap: var(--space-7);
  }

  .post-columns {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--space-8);
  }

  .post-rail {
    border-top: none;
    padding-top: 0;
  }

  body[data-page="post"] .rail-feed {
    display: block;
  }

  body[data-page="post"] .post-rail .subscribe-block {
    display: flex;
  }

  body[data-page="post"] .post-mobile-feed {
    display: none;
  }
}

/* Mobile landscape (<768px, landscape): 2 columns, edge-to-edge */
@media (max-width: 767px) and (orientation: landscape) {
  .feed-grid,
  body.sidebar-rail .feed-grid,
  [data-page="trending"] .feed-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body[data-page="home"] .page-main,
  body[data-page="category"] .page-main,
  body[data-page="trending"] .page-main {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Mobile portrait (<768px, portrait): 1 column, full-bleed thumbs */
@media (max-width: 767px) and (orientation: portrait) {
  .feed-grid,
  body.sidebar-rail .feed-grid,
  [data-page="trending"] .feed-grid {
    grid-template-columns: 1fr;
  }

  /* Category pages: 1-col grid like homepage on mobile portrait */

  body[data-page="home"] .page-main,
  body[data-page="category"] .page-main,
  body[data-page="trending"] .page-main {
    padding-left: 0;
    padding-right: 0;
  }

  /* Post: feature image full-bleed (edge-to-edge) like the homepage cards —
     the hero card breaks out of the band's reading padding, while the title +
     body keep theirs (2026-06-14, user request: "1 column full width like
     homepage"). */
  body[data-page="post"] .post-hero-card {
    margin-left: calc(-1 * var(--space-5));
    margin-right: calc(-1 * var(--space-5));
    border-radius: 0;
  }

  /* Clear the fixed mobile header so the full-bleed feature image starts below
     it, not behind it (mirrors the desktop rule at line ~82). Without this the
     header's hamburger/logo overlap the top of the hero image (2026-06-14). */
  body[data-page="post"] .post-hero-band {
    padding-top: calc(var(--header-h-mobile) + var(--space-3));
  }

  /* Lift the grid closer to the pill bar on phone portrait: drop the
     pillbar buffer and tighten the page-main top padding. */
  body[data-page="home"] .page-main {
    margin-top: calc(var(--header-h-mobile) + var(--pillbar-h));
    padding-top: var(--space-1);
  }

  .feed-grid .post-card {
    padding: 0;
    border-radius: 0;
    border: none;
  }

  .feed-grid .post-card .thumb {
    border-radius: 0;
  }

  .feed-grid .post-card__footer {
    padding: 0 var(--space-3);
  }

  .feed-grid .post-card:hover {
    padding: 0;
    margin: 0;
    background: none;
  }

  .feed-grid .post-card__thumb-link:hover .post-card__overlay {
    opacity: 0;
  }

  .feed-grid .post-card:hover .post-card__title,
  .feed-grid .post-card:hover .post-card__meta,
  .feed-grid .post-card:hover .post-card__kebab,
  .feed-grid .post-card__title-link:hover .post-card__title {
    color: inherit;
  }

  /* Scroll-preview: reveal overlay when card is centered in viewport */
  .feed-grid .post-card.is-preview-active .post-card__overlay {
    opacity: 1;
    border-radius: 0;
  }

  /* Trending: shift overlay text right so rank badge doesn't cover it */
  .ranked-card .post-card__overlay {
    padding-left: 48px;
  }

  /* Library pages: tighter side padding so cards fill the width */
  body[data-page="library"] .page-main {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* Library + full-list pages: horizontal swipe rows, 2 cards visible, desktop card style */
  body[data-page="library"] .feed-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-4)) / 2);
    grid-template-columns: none;
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
  }

  body[data-page="library"] .feed-grid .post-card {
    scroll-snap-align: start;
    min-width: 0;
    padding: 5px;
    border-radius: 20px;
    border: 2px solid transparent;
  }

  body[data-page="library"] .feed-grid .post-card .thumb {
    border-radius: 20px;
  }

  body[data-page="library"] .feed-grid .post-card__footer {
    padding: 0;
  }

  .related-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .card-row {
    grid-auto-columns: 260px;
  }

  .reading-bar__title {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 13px;
  }

  .reading-bar__side {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
  }

  .reading-bar--title .js-rb-tip {
    color: var(--vermilion);
  }

  /* Post reading bars: icon-only logo on mobile portrait */
  body[data-page="post"] .logo__full {
    display: none;
  }

  body[data-page="post"] .logo__mark {
    display: block;
    width: 32px;
    height: auto;
  }

  .post-title {
    font-size: 24px;
  }

  .list-row__thumb {
    flex-basis: 120px;
  }

  .list-row__title {
    font-size: 14px;
  }

  .contact-hero h1 {
    font-size: 32px;
  }

  /* Post mobile portrait: full-bleed cards + 1 column */
  body[data-page="post"] .post-mobile-feed {
    margin-left: calc(-1 * var(--space-5));
    margin-right: calc(-1 * var(--space-5));
  }

  body[data-page="post"] .post-mobile-feed .feed-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="post"] .post-mobile-feed .post-card {
    padding: 0;
    border-radius: 0;
    border: none;
  }

  body[data-page="post"] .post-mobile-feed .thumb {
    border-radius: 0;
  }

  body[data-page="post"] .post-mobile-feed .post-card__footer {
    padding: 0 var(--space-3);
  }
}