/* Shared page styles.
   These belong to components and page types that exist in both languages,
   so they must live in a stylesheet every page loads — not inside one
   language's .astro file. */


/* ── Journey index — map section, day list, side stories ───────────────────────────── */
  .journey { background: var(--color-bg); }



  .journey-intro {
    padding: clamp(22px, 4vw, 40px) clamp(20px, 5vw, 56px) clamp(30px, 5vw, 52px);
    background: linear-gradient(to bottom, rgba(10,6,0,0.92), rgba(10,6,0,0.98));
    color: rgba(253, 244, 192, 0.95);
  }
  .journey-eyebrow {
    font-family: var(--font-en-serif), serif; font-size: 0.76rem;
    letter-spacing: 0.16em; color: var(--color-gold); margin: 0 0 0.7em;
  }
  .journey-title {
    font-family: var(--font-jp-serif), serif;
    font-size: clamp(1.7rem, 4.4vw, 2.9rem); margin: 0 0 0.5em;
    /* was sinking into the dark band behind it */
    color: rgba(253, 244, 192, 0.97);
  }
  .journey-lead { margin: 0; max-width: 46ch; font-size: 0.95rem; line-height: 1.9; opacity: 0.88; }
  /* ch is sized to a Latin digit, so it under-counts full-width JP characters
     badly enough to wrap this one-line intro mid-sentence; measure in em instead */
  .journey-lead--ja { max-width: 44em; }

  .journey-days, .journey-side {
    max-width: 900px; margin: 0 auto;
    padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 32px);
  }
  .journey-h2 {
    font-family: var(--font-jp-serif), serif; font-size: 1.25rem;
    margin: 0 0 1.2em; padding-left: 0.6em; border-left: 4px solid var(--color-yellow);
  }

  .day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .day-card__link {
    display: grid; grid-template-columns: 4.2em 160px 1fr; gap: 16px; align-items: center;
    padding: 10px 14px; border: 1px solid var(--color-border-light); border-radius: 4px;
    text-decoration: none; color: var(--color-text); background: var(--color-card-bg);
  }
  .day-card__link:hover { border-color: var(--color-yellow); background: var(--color-yellow-pale); }
  .day-card__num {
    font-family: var(--font-en-serif), serif; font-size: 0.66rem; letter-spacing: 0.1em;
    color: var(--color-text-muted); text-align: center; line-height: 1.2;
  }
  .day-card__num b { display: block; font-size: 1.5rem; color: var(--color-terracotta); }
  /* the DAY-title-card art is 16:9 with text baked in on the left half, so give
     it room to breathe instead of the tight square crop plain photos used */
  .day-card__img { width: 160px; height: 90px; object-fit: cover; border-radius: 3px; }
  .day-card__text { display: flex; flex-direction: column; gap: 4px; }
  .day-card__title { font-size: 0.95rem; line-height: 1.6; }
  .day-card__date { font-size: 0.74rem; color: var(--color-text-muted); }

  .journey-side__note { font-size: 0.86rem; color: var(--color-text-muted); margin: -0.6em 0 1.4em; }
  .side-list { list-style: none; margin: 0; padding: 0; }
  .side-list a {
    display: flex; gap: 1.2em; padding: 11px 4px; text-decoration: none;
    color: var(--color-text); border-bottom: 1px solid var(--color-border-light);
    font-size: 0.92rem;
  }
  .side-list a:hover { color: var(--color-terracotta); }
  .side-list time { color: var(--color-text-muted); font-size: 0.78rem; flex: none; padding-top: 0.25em; }

/* ── Diary / Road-to — single-series reading pages ─────────────────────── */
  .diary, .road-to { background: var(--color-bg); }

  .diary-head {
    padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 56px) clamp(36px, 6vw, 64px);
    background: linear-gradient(to bottom, rgba(10,6,0,0.92), rgba(10,6,0,0.98));
    color: rgba(253, 244, 192, 0.95);
  }
  .diary-eyebrow {
    font-family: var(--font-en-serif), serif; font-size: 0.76rem;
    letter-spacing: 0.16em; color: var(--color-gold); margin: 0 0 0.9em;
  }
  .diary-title {
    font-family: var(--font-jp-serif), serif;
    font-size: clamp(1.8rem, 4.8vw, 3rem); line-height: 1.35; margin: 0 0 0.6em;
    color: rgba(253, 244, 192, 0.97);
  }
  .diary-lead { margin: 0; max-width: 52ch; font-size: 0.98rem; line-height: 1.9; opacity: 0.88; }

  .diary-list-section {
    max-width: 900px; margin: 0 auto;
    padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 32px) 0;
  }

  @media (max-width: 620px) {
    .day-card__link { grid-template-columns: 3.4em 1fr; }
    .day-card__img { display: none; }
  }


/* ── Archive — category sections and list rows ───────────────────────────── */
  .archive { background: var(--color-bg); }
  .archive-head, .archive-section {
    max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px);
  }
  .archive-head { padding-top: clamp(36px, 7vw, 84px); padding-bottom: clamp(24px, 4vw, 44px); }
  .archive-eyebrow {
    font-family: var(--font-en-serif), serif; font-size: 0.76rem;
    letter-spacing: 0.18em; color: var(--color-gold); margin: 0 0 0.6em;
  }
  .archive-title { font-family: var(--font-jp-serif), serif; font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0 0 0.6em; }
  .archive-lead { margin: 0 0 1.6em; color: var(--color-text-soft); font-size: 0.95rem; line-height: 1.9; max-width: 52ch; }
  .archive-filters { margin: 0 0 1.4em; }
  .archive-filters__label {
    margin: 0 0 0.5em; font-size: 0.76rem; color: var(--color-text-muted); letter-spacing: 0.04em;
  }
  .archive-filters__label:not(:first-child) { margin-top: 1.1em; }
  .archive-jump { display: flex; flex-wrap: wrap; gap: 8px; }
  .archive-jump--months { max-height: 6.4em; overflow-y: auto; padding-right: 2px; }
  .archive-jump a, .archive-jump button {
    display: inline-flex; align-items: baseline; gap: 0.5em;
    border: 1px solid var(--color-border); border-radius: 999px;
    padding: 0.35em 1em; font-size: 0.84rem; text-decoration: none; color: var(--color-text);
    background: var(--color-card-bg); font: inherit; cursor: pointer;
  }
  .archive-jump a:hover, .archive-jump button:hover { background: var(--color-yellow-pale); border-color: var(--color-yellow); }
  .archive-jump button.is-active {
    background: var(--color-yellow); border-color: var(--color-yellow); color: var(--color-text);
    font-weight: 600;
  }
  .archive-jump b { font-family: var(--font-en-serif), serif; color: var(--color-text-muted); font-weight: 400; font-size: 0.78rem; }
  .archive-jump button.is-active b { color: inherit; opacity: 0.7; }
  .archive-count { margin: 0.2em 0 0; font-size: 0.8rem; color: var(--color-text-muted); }

  .archive-series { margin: 1.2em 0 1.6em; font-size: 0.9rem; color: var(--color-text-muted); }
  .archive-series a { color: var(--color-terracotta); text-decoration: none; }
  .archive-series a:hover { text-decoration: underline; }

  .archive-search { margin: 0 0 1.4em; max-width: 360px; }
  .archive-search input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 0.92rem;
    padding: 0.6em 1em; border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-card-bg); color: var(--color-text);
  }
  .archive-search input:focus { outline: none; border-color: var(--color-yellow); }
  .archive-section[hidden] { display: none; }
  .archive-search-empty { color: var(--color-text-muted); font-size: 0.92rem; padding: 0 clamp(20px, 5vw, 32px) 48px; max-width: 880px; margin: 0 auto; }
  .archive-search-empty[hidden] { display: none; }

  .archive-section { padding-bottom: clamp(28px, 5vw, 56px); scroll-margin-top: 84px; }
  .archive-h2 {
    font-family: var(--font-jp-serif), serif; font-size: 1.2rem;
    margin: 0 0 0.9em; padding-left: 0.6em; border-left: 4px solid var(--color-yellow);
    display: flex; align-items: baseline; gap: 0.8em;
  }
  .archive-h2 span { font-size: 0.76rem; color: var(--color-text-muted); font-family: var(--font-en-serif), serif; }

  .archive-list { list-style: none; margin: 0; padding: 0; }
  .archive-list a {
    display: flex; gap: 14px; align-items: center; padding: 10px 6px;
    text-decoration: none; color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
  }
  .archive-list a:hover { background: var(--color-yellow-pale); }
  .archive-list img { width: 88px; height: 64px; object-fit: cover; border-radius: 3px; flex: none; }
  .archive-list__text { display: flex; flex-direction: column; gap: 3px; }
  .archive-list__title { font-size: 0.93rem; line-height: 1.6; }
  .archive-list__meta { display: flex; gap: 0.9em; font-size: 0.74rem; color: var(--color-text-muted); }
  .archive-list__meta em { font-style: normal; color: var(--color-terracotta); }


/* ── Article — head, body, in-article map, prev/next ───────────────────────────── */
  .article-page { background: var(--color-bg); }
  .article {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(32px, 7vw, 88px) clamp(20px, 5vw, 32px) clamp(48px, 8vw, 96px);
  }
  /* a map opening the page replaces the usual breathing room above the title */
  .article:has(.article-map) {
    padding-top: 0;
  }
  .article-head { border-bottom: 1px solid var(--color-border-light); padding-bottom: 1.6em; margin-bottom: 2em; }
  .article-series {
    display: inline-block;
    font-family: var(--font-en-serif), serif;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--color-terracotta);
    text-decoration: none;
    margin-bottom: 0.9em;
  }
  .article-series:hover { text-decoration: underline; }
  .article-title {
    font-family: var(--font-jp-serif), serif;
    font-size: clamp(1.5rem, 3.6vw, 2.3rem);
    line-height: 1.5;
    margin: 0 0 0.7em;
    text-wrap: balance;
  }
  .article-meta {
    display: flex; flex-wrap: wrap; gap: 0.8em; align-items: center;
    font-size: 0.82rem; color: var(--color-text-muted);
  }
  .article-cat {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.2em 0.9em;
    color: var(--color-text-soft);
    text-decoration: none;
  }
  .article-cat:hover { background: var(--color-yellow-pale); }

  .article-body { font-size: 1rem; line-height: 2; }
  .article-body p { margin: 0 0 1.5em; }
  .article-body img {
    max-width: 100%; height: auto; display: block;
    margin: 1.8em auto; border-radius: 3px;
  }
  .article-body h2 {
    font-family: var(--font-jp-serif), serif;
    font-size: 1.3rem; margin: 2.4em 0 0.8em;
    padding-left: 0.6em; border-left: 4px solid var(--color-yellow);
  }
  .article-body h3 { font-size: 1.1rem; margin: 2em 0 0.6em; }
  .article-body table { width: 100%; border-collapse: collapse; }
  .article-body td { padding: 4px; vertical-align: top; }
  .article-body video {
    max-width: 100%; height: auto; display: block; margin: 1.8em auto;
  }
  .article-body audio { width: 100%; margin: 1.4em 0; }
  .article-body .col { margin-bottom: 1.2em; }
  /* 16:9 box so the player scales with the column */
  .embed-youtube {
    position: relative; padding-top: 56.25%; margin: 1.8em 0;
    background: #000; border-radius: 3px; overflow: hidden;
  }
  .embed-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  .article-map {
    margin: 0 0 2.4em;
    /* break out of the reading column so the map has room */
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  }

  .article-nav {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
    margin-top: 3.5em; padding-top: 1.8em; border-top: 1px solid var(--color-border-light);
  }
  .article-nav__link {
    display: flex; flex-direction: column; gap: 2px;
    text-decoration: none; color: var(--color-text);
    padding: 12px 16px; border: 1px solid var(--color-border);
    border-radius: 4px; font-size: 0.86rem;
  }
  .article-nav__link:hover { background: var(--color-yellow-pale); }
  .article-nav__link span { font-size: 0.72rem; color: var(--color-text-muted); }
  .article-nav__link--next { text-align: right; }
  .article-nav__map {
    font-size: 0.8rem; color: var(--color-terracotta);
    text-decoration: none; white-space: nowrap; padding: 0 8px;
  }
  .article-nav__map:hover { text-decoration: underline; }
  @media (max-width: 640px) {
  .article-nav { grid-template-columns: 1fr; }
    .article-nav__link--next { text-align: left; }
    .article-nav__spacer { display: none; }
  }


/* ── Home — entry cards and the recent list ───────────────────────────── */
  .entry-grid {
    display: grid; gap: 16px; margin: 2.4em 0 3.4em;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .entry-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 26px 24px 22px; text-decoration: none;
    background: var(--color-card-bg); border: 1px solid var(--color-border-light);
    border-radius: 4px; color: var(--color-text);
    transition: border-color var(--transition), transform var(--transition);
  }
  .entry-card:hover { border-color: var(--color-yellow); transform: translateY(-2px); }
  .entry-card--journey { background: var(--color-yellow-pale); border-color: var(--color-yellow); }
  .entry-card__eyebrow {
    font-family: var(--font-en-serif), serif; font-size: 0.72rem;
    letter-spacing: 0.12em; color: var(--color-text-muted);
  }
  .entry-card__title { font-family: var(--font-jp-serif), serif; font-size: 1.22rem; margin: 0; }
  .entry-card__body { margin: 0; font-size: 0.87rem; line-height: 1.85; color: var(--color-text-soft); }
  .entry-card__cta { margin-top: auto; padding-top: 10px; font-size: 0.82rem; color: var(--color-terracotta); }

  .stories-subhead {
    font-family: var(--font-jp-serif), serif; font-size: 1.05rem;
    margin: 0 0 1em; padding-left: 0.6em; border-left: 4px solid var(--color-yellow);
  }
  .latest-list { list-style: none; margin: 0; padding: 0; }
  .latest-item a {
    display: flex; gap: 14px; align-items: center; padding: 11px 6px;
    text-decoration: none; color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
  }
  .latest-item a:hover { background: var(--color-yellow-pale); }
  .latest-item img { width: 96px; height: 70px; object-fit: cover; border-radius: 3px; flex: none; }
  .latest-item__text { display: flex; flex-direction: column; gap: 3px; }
  .latest-item__title { font-size: 0.93rem; line-height: 1.6; }
  .latest-item__meta { display: flex; gap: 0.9em; font-size: 0.74rem; color: var(--color-text-muted); }
  .latest-item__meta em { font-style: normal; color: var(--color-terracotta); }
  @media (max-width: 520px) { .latest-item img { display: none; } }

/* ── English page furniture (used across every /en/ page) ───── */
  .en-page { background: var(--color-bg); }
  .en-hero, .principles, .the-question {
    max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px);
  }
  .en-hero { padding-top: clamp(40px, 8vw, 96px); padding-bottom: clamp(24px, 4vw, 48px); }
  .en-eyebrow {
    font-family: var(--font-en-serif), serif; font-size: 0.76rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 0.8em;
  }
  .en-title {
    font-family: var(--font-en-serif), serif; font-weight: 500;
    font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.25; margin: 0 0 0.6em; text-wrap: balance;
  }
  .en-lead { font-size: 1rem; line-height: 1.95; color: var(--color-text-soft); max-width: 62ch; }
  .en-cta a { color: var(--color-terracotta); }

.en-section { max-width: 760px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 32px); }
.en-h2 {
  font-family: var(--font-en-serif), serif; font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.35; margin: 0 0 0.7em;
}
.lang-btn--active { color: var(--color-text); opacity: 0.55; cursor: default; }