@charset "UTF-8";
/* =============================================
   FOUNDATION — Design tokens
   Palette, type scale and rhythm are taken verbatim from the parent site
   (nishimurafudousan.com / nishimura-v3 style.css) so livnavi reads as the
   same brand one level down: same forest green, same gold, same 84/64px
   header, same Zen Old Mincho + Noto Sans JP pairing.
   Only the tokens livnavi actually needs are carried over.
   ============================================= */
:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --color-primary: #0a4024; /* deep forest green */
  --color-primary-dark: #042614; /* footer copyright bar, hero floor */
  --color-accent: #ba9438; /* gold */
  --color-accent-dark: #9c7b2c;
  --color-accent-light: #cfa74a; /* gold hover — one step up, mirroring -dark */
  --color-accent-soft: #d9bd7c; /* gold on dark ground */
  --color-line: #06C755; /* LINE brand green */
  /* ── Neutrals ──────────────────────────────────────────────────────── */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-mute: #8a8f8c;
  --color-white: #ffffff;
  --color-bg: #ffffff; /* page ground */
  --color-bg-light: #f7f8f6;
  --color-border: #e4e2dc;
  /* ── Rank medals (人気記事ランキング) ──────────────────────────────── */
  --color-rank-1: #c3a24a; /* gold */
  --color-rank-2: #a8adb0; /* silver */
  --color-rank-3: #a9793f; /* bronze */
  --color-rank-n: #6f7773; /* 4th and below */
  /* ── Type ──────────────────────────────────────────────────────────── */
  --font-base: 'Noto Sans JP', Meiryo, sans-serif;
  --font-heading: 'Zen Old Mincho', 'Noto Serif JP', serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  /* ── Rhythm ────────────────────────────────────────────────────────── */
  /* Content column — same box as the parent site: 1320px wide with a 16px
     inner pad, giving a 1288px content column and an identical gap between
     the content and the screen edge at every viewport. */
  --content-max: 1320px;
  /* Article reading column: 800px of text inside the same 16px inner pad,
     so a paragraph stays at a comfortable measure while the gutter matches
     every other band. */
  --reading-max: 832px;
  --space-inline: 16px;
  --header-height: 84px; /* parent site's desktop header height */
  --header-height-sp: 64px; /* parent site's mobile header height */
  --space-section: clamp(40px, 4.4vw, 68px);
  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --radius-card: 4px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-card-hover: 0 10px 22px rgba(0, 0, 0, .12);
  /* Verbatim from nishimura-v3 layout/_header.scss — the bar lifts off the page
     rather than sitting on a hairline, and deepens once the page scrolls. */
  --shadow-header: 0 2px 10px rgba(0, 0, 0, .08);
  --shadow-header-scrolled: 0 4px 18px rgba(0, 0, 0, .12);
}

/* =============================================
   FOUNDATION — Base
   This layer loads *after* the legacy TCD style.css, so its job is twofold:
   undo the handful of old-theme rules that fight the new design, and set the
   shared typographic ground for everything the redesign owns.
   ============================================= */
/* style.css paints the body #c9e7ff with a diagonal stripe image and pins it
   to min-width:1125px — both belong to the 2014 design. The new ground is a
   warm off-white; the min-width stays (the legacy inner pages still assume
   it) except on the homepage, which is fully fluid. */
body {
  background: var(--color-bg);
}

/* `body.archive` is WordPress's own class for every listing archive.php serves
   — category, tag, date, author — so the two fluid template families are named
   here together. Interior pages (single, page) still rely on the legacy floor. */
body.home,
body.archive,
body.single {
  min-width: 0;
  /* style.css fixes #main_contents to a hard 1125px box. These templates'
     sections manage their own max-width, so let the wrapper go full-bleed
     instead of double-constraining (and clipping on narrow viewports). */
}
body.home #main_contents,
body.archive #main_contents,
body.single #main_contents {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Everything the redesign owns opts back into a sane box model and the brand
   font — scoped rather than global so the legacy article styles are untouched. */
.l-header,
.l-drawer,
.l-overlay,
.l-footer,
.p-home,
.p-archive,
.p-ranking,
.p-single {
  font-family: var(--font-base);
  color: var(--color-text);
  box-sizing: border-box;
}
.l-header *,
.l-header *::before,
.l-header *::after,
.l-drawer *,
.l-drawer *::before,
.l-drawer *::after,
.l-overlay *,
.l-overlay *::before,
.l-overlay *::after,
.l-footer *,
.l-footer *::before,
.l-footer *::after,
.p-home *,
.p-home *::before,
.p-home *::after,
.p-archive *,
.p-archive *::before,
.p-archive *::after,
.p-ranking *,
.p-ranking *::before,
.p-ranking *::after,
.p-single *,
.p-single *::before,
.p-single *::after {
  box-sizing: border-box;
}

/* Link behaviour, copied from the main site's reset so hovers feel identical
   across the two properties.
   Two legacy rules have to be beaten here: style.css:126 underlines every
   link on hover, and functions/head.php prints an inline
   `a:hover { color: #<pickedcolor1> }` that repaints them the old TCD green.
   Both are single-class specificity, so scoping ours under the redesign roots
   is enough to win without !important. */
.l-header a,
.l-drawer a,
.l-footer a,
.p-home a,
.p-archive a,
.p-ranking a,
.p-single a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.l-header,
.l-drawer,
.l-footer,
.p-home,
.p-archive,
.p-ranking,
.p-single {
  /* Hover-capable pointers only — on touch, :hover sticks after a tap and
     leaves the card sitting at 80% until you tap something else. */
}
@media (hover: hover) {
  .l-header a:hover,
  .l-drawer a:hover,
  .l-footer a:hover,
  .p-home a:hover,
  .p-archive a:hover,
  .p-ranking a:hover,
  .p-single a:hover {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
  }
}

/* Inline icon sprite (functions/redesign.php → livnavi_icon()). Sized in em so
   each call site controls it with font-size alone. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

/* The legacy back-to-top button has to sit under the sticky header. */
#return_top {
  z-index: 900;
}

/* =============================================
   LAYOUT — Header
   Same silhouette as nishimurafudousan.com: white bar, 84px tall on desktop /
   64px on mobile, sticky, logo hard against the page gutter. Livnavi's own bar
   is lighter — six magazine pillars and a search affordance, no phone/LINE/
   contact cluster, since the conversion path lives in the footer CTA band.
   ============================================= */
/* Above the drawer (1200) and its overlay (1100), not below them: the drawer
   is anchored to the right edge, which is exactly where the hamburger is, so a
   header underneath it took the close X down with it and left the panel with
   no way out. */
.l-header {
  position: sticky;
  top: 0;
  z-index: 1300;
  background: var(--color-white);
  box-shadow: var(--shadow-header);
  transition: box-shadow 0.3s ease;
  /* No border-bottom, same as the main site: the drop shadow already separates
     the bar from the page, and stacking a hairline on top reads as a doubled
     edge where the two sites sit side by side. */
}
.l-header.is-scrolled {
  box-shadow: var(--shadow-header-scrolled);
}

.l-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-height);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}
@media screen and (max-width: 770px) {
  .l-header__inner {
    min-height: var(--header-height-sp);
    gap: 10px;
  }
}

/* ── Logo ──────────────────────────────────────────────────────────────── */
/* the_dp_logo() prints the legacy `#logo_image > h1 > a > img` block, which
   style.css sizes as a 1125x310 hero banner. Flatten it back to a plain inline
   mark now that it lives in a compact bar. */
.l-header__logo {
  flex-shrink: 0;
  line-height: 0;
  /* responsive.css turns the legacy logo block into a floated 19px-inset box
     (`#logo_image`, line 94) — the 2014 mobile header's own layout. In a flex
     bar the float is inert but the margin is not, and it pushed the mark down
     and in. */
}
.l-header__logo #logo_image,
.l-header__logo #logo_text {
  width: auto;
  height: auto;
  margin: 0;
  float: none;
  background: none;
}
.l-header__logo {
  /* `.pc #logo_image h1` (style.css:221) is `padding: 5% 0 0` — 5% of the bar's
     logo column, about 12px, meant to drop the old hero banner off the top edge
     of the page. It is (1,1,1), so the plain `.l-header__logo h1` below loses to
     it and the mark hangs that far below the bar's centre line. Carrying
     `#logo_image` into the selector matches its specificity, and this sheet
     loads after style.css. */
}
.l-header__logo #logo_image h1,
.l-header__logo h1 {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}
.l-header__logo #logo_text h1 {
  font-size: 18px;
  line-height: 1.2;
}
.l-header__logo {
  /* 44px in an 84px bar leaves 20px of air above and below. `display: block`
     is what makes that exact: an inline image sits on its parent's baseline, so
     the wrapper's box would be a fraction taller than the mark and flex would
     centre the box rather than the artwork.

     The second selector is what puts the mark back on a phone. responsive.css
     hides it — `#logo_image h1 img { display:none }` (line 96), at (1,0,2) —
     and prints the site name as text in its place via the `data-label`
     attribute on the anchor, because the 2014 design had no mark small enough
     for a 64px bar. This one does. Matching the ID and adding the wrapper class
     gets to (1,2,2), which outranks it without !important. */
}
.l-header__logo img,
.l-header__logo #logo_image h1 img {
  display: block;
  height: 44px;
  width: auto;
}
@media screen and (max-width: 770px) {
  .l-header__logo img,
  .l-header__logo #logo_image h1 img {
    height: 42px;
  }
}
.l-header__logo {
  /* The text stand-in that went with that hidden image (responsive.css:97).
     `font-size: 0` on the h1 already makes it invisible, but leaving the
     content in place means the bar's accessible name is the site title twice
     over — once from the label, once from the image's alt. */
}
.l-header__logo #logo_image h1 a::before {
  content: none;
}

/* ── Primary nav ───────────────────────────────────────────────────────── */
.l-header__nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}
@media screen and (max-width: 770px) {
  .l-header__nav {
    display: none;
  }
}

.l-header__nav-group {
  position: relative;
}

.l-header__nav-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
  white-space: nowrap;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.l-header__nav-item:hover {
  color: var(--color-primary);
  background: rgba(6, 51, 28, 0.06);
  opacity: 1;
}
.l-header__nav-item {
  /* Pillars whose section isn't published yet (menu item tagged
     `is-placeholder`) stay visible but inert, so the six-pillar rhythm the
     design depends on survives a half-populated site. */
}
.l-header__nav-item.is-placeholder {
  color: var(--color-text-mute);
  cursor: default;
}

.l-header__caret {
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform 0.2s ease;
}
.l-header__nav-group:hover .l-header__caret {
  transform: rotate(180deg);
}

.l-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 200px;
  padding: 8px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 30px rgba(4, 38, 20, 0.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  /* Hover bridge — without it the menu closes in the gap between the nav item
     and the panel, and a sub-item can never be reached. */
}
.l-header__dropdown::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 12px;
}
.l-header__nav-group:hover .l-header__dropdown, .l-header__nav-group:focus-within .l-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 4px);
}

.l-header__dropdown-item {
  display: block;
  padding: 11px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
  /* Scoped under .l-header on purpose: foundation/_base.scss pins
     `.l-header a:hover { color: inherit }` to beat TCD's inline hover colour,
     and that selector outranks a bare `&:hover` here. The extra class puts the
     white back on top without reaching for !important. */
}
.l-header .l-header__dropdown-item:hover {
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}

/* ── Search ────────────────────────────────────────────────────────────── */
.l-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media screen and (max-width: 770px) {
  .l-header__actions {
    display: none;
  }
}

.l-header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--color-primary);
  transition: background 0.2s ease;
}
.l-header__icon-btn .icon {
  font-size: 22px;
  stroke-width: 1.5;
}
.l-header__icon-btn:hover {
  background: var(--color-bg-light);
}

/* ── Hamburger ─────────────────────────────────────────────────────────── */
.l-header__hamburger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
}
@media screen and (max-width: 770px) {
  .l-header__hamburger {
    display: flex;
    margin-left: auto;
  }
}
.l-header__hamburger .icon {
  position: absolute;
  font-size: 24px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.l-header__hamburger[aria-expanded=true] .l-header__hamburger-open {
  opacity: 0;
  transform: rotate(90deg);
}
.l-header__hamburger[aria-expanded=true] .l-header__hamburger-close {
  opacity: 1;
  transform: rotate(0);
}

.l-header__hamburger-close {
  opacity: 0;
  transform: rotate(-90deg);
}

/* =============================================
   LAYOUT — Mobile drawer + overlay
   Off-canvas panel driven by the small inline toggle in header.php.
   ============================================= */
/* Starts below the header rather than at the top of the viewport, so the bar —
   and the hamburger's close X — stays visible and clickable while the panel is
   open. The header is sticky at top:0, so the two line up whether the page is
   scrolled or not. */
.l-drawer {
  position: fixed;
  top: var(--header-height-sp);
  right: 0;
  bottom: 0;
  z-index: 1200;
  width: min(320px, 85vw);
  padding: 16px 0;
  background: var(--color-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.l-drawer.is-open {
  transform: translateX(0);
}

.l-drawer__group {
  border-bottom: 1px solid var(--color-border);
}

.l-drawer__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-text);
}
.l-drawer__item .icon {
  font-size: 18px;
  color: var(--color-accent);
}
.l-drawer__item.is-placeholder {
  color: var(--color-text-mute);
}
.l-drawer__item.is-placeholder .icon {
  color: #c2c7c4;
}

.l-drawer__children {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 20px 14px 48px;
}

.l-drawer__child {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
}

.l-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.l-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(4, 38, 20, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.l-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* =============================================
   LAYOUT — Footer
   Two dark-green bands plus a copyright rule: the conversion CTA on the
   brand green, the sitemap on the darker shade, matching the parent site's
   footer stack (nishimurafudousan.com) one tone deeper.
   ============================================= */
.l-footer {
  font-family: var(--font-base);
  color: var(--color-white);
  /* One green for the whole footer — the CTA band and the sitemap band share
     it, and the hairline under the CTA is the only thing dividing them. Same
     stack as the main site. */
  background: var(--color-primary);
}

/* ── CTA band ──────────────────────────────────────────────────────────── */
/* The main site's top-page contact row, reproduced: equal columns on the brand
   green, hairline between each, gold icon beside a bold action and its
   note. No headline, no boxes — the rules are the only structure. */
.l-footer__cta {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.l-footer__cta-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 770px) {
  .l-footer__cta-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .l-footer__cta-inner {
    grid-template-columns: 1fr;
  }
}

.l-footer__cta-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 30px 24px;
  color: var(--color-white);
  transition: background 0.2s ease;
}
.l-footer__cta-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.l-footer__cta-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.l-footer__cta-item {
  /* Two-up: the rule belongs between the pair, never at the start of a row. */
}
@media screen and (max-width: 770px) {
  .l-footer__cta-item {
    padding: 24px 16px;
  }
  .l-footer__cta-item:nth-child(odd)::before {
    display: none;
  }
}
.l-footer__cta-item {
  /* Stacked, a vertical rule reads as a stray mark — separate with a top
     border instead. */
}
@media screen and (max-width: 600px) {
  .l-footer__cta-item {
    padding: 20px 0;
  }
  .l-footer__cta-item::before {
    display: none;
  }
  .l-footer__cta-item:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

.l-footer__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}
.l-footer__cta-icon .icon {
  font-size: 30px;
  stroke-width: 1.5;
}

.l-footer__cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.l-footer__cta-main {
  font-size: 18px;
  font-weight: 700;
}

.l-footer__cta-sub {
  margin-top: 2px;
  font-size: var(--fs-sm);
  opacity: 0.8;
}

/* ── Sitemap band ──────────────────────────────────────────────────────── */
.l-footer__body {
  padding-block: clamp(36px, 17.612px + 2.388vw, 52px);
}

.l-footer__body-inner {
  display: flex;
  justify-content: space-between;
  gap: clamp(28px, -4.179px + 4.179vw, 56px);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}
@media screen and (max-width: 770px) {
  .l-footer__body-inner {
    flex-direction: column;
  }
}

.l-footer__brand {
  flex-shrink: 0;
  max-width: 300px;
}

/* White plate, 290x86 including the plate itself. The mark is dark green and
   gold and the band is #0a4024, so it needs its own ground rather than a
   reversed copy of the artwork. The asset is trimmed tight to the ink, so the
   padding here *is* the logo's clear space.

   The image is capped on both axes instead of being given a width: at 806x200
   the *width* is the binding constraint inside this box (258px of inner width
   resolves to 64px of height), and letting the browser pick the other axis
   keeps the lockup correct if the file is ever replaced at another ratio. */
.l-footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  height: 86px;
  padding: 11px 16px;
  background: var(--color-white);
  border-radius: var(--radius-card);
}

.l-footer__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.l-footer__tagline {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.72);
}

.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px clamp(16px, -2.388px + 2.388vw, 32px);
  flex: 1;
}
@media screen and (max-width: 770px) {
  .l-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 480px) {
  .l-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.l-footer__col-title {
  display: block;
  margin-bottom: 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-white);
}
.l-footer__col-title.is-placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.l-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.l-footer__col-list a {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  transition: opacity 0.2s ease, color 0.2s ease;
  /* Gold on hover, the same as the main site's footer sitemap links. */
}
.l-footer__col-list a:hover {
  opacity: 1;
  color: var(--color-accent-soft);
}

/* ── Copyright ─────────────────────────────────────────────────────────── */
.l-footer__bottom {
  padding: 16px 20px;
  text-align: center;
  background: var(--color-primary-dark);
  /* style.css paints #copyright as a 60px-tall #222 strip for the old footer —
     strip it back to plain text on the band's own ground. */
}
.l-footer__bottom #copyright {
  height: auto;
  padding: 0;
  margin: 0;
  background: none;
  line-height: 1.6;
}
.l-footer__bottom #copyright,
.l-footer__bottom #copyright a {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}

/* =============================================
   COMPONENT — Buttons
   ============================================= */
/* Hero CTA — solid gold slab, square-ish corners, arrow pushed to the right.
   Matches the parent site's primary button weight without borrowing its
   green fill, which on the hero would disappear into the photo. */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 15px 26px;
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.c-btn--gold {
  background: var(--color-accent);
  /* Doubled class again: foundation/_base.scss sets `.p-home a { color: inherit }`
     at (0,1,1), which outranked a plain `.c-btn--gold` and left the label
     inheriting TCD's body #333 — the grey that showed on the hero slab. */
}
.c-btn--gold.c-btn--gold {
  color: #000;
}
.c-btn--gold {
  /* Lightens rather than darkens on hover: over the hero photo the slab reads
     as lifting toward the light, and a darker gold sank into the image.

     The class is doubled on purpose. foundation/_base.scss scopes its link
     reset as `.p-home a:hover { opacity: .8 }` — (0,2,1) — so it can beat
     TCD's inline hover rules, and that outranks a plain `&:hover` here. The
     slab kept fading to 80% into the dark photo, which reads as a darken no
     matter what background we set. (0,3,0) wins it back without !important. */
}
.c-btn--gold.c-btn--gold:hover {
  background: var(--color-accent-light);
  color: #000;
  opacity: 1;
}

/* The arrow glyph already points right — no rotation, unlike the chevron it
   replaced. */
.c-btn__arrow {
  font-size: 17px;
  transition: transform 0.2s ease;
}
.c-btn:hover .c-btn__arrow {
  transform: translateX(3px);
}

/* Drawer-only contact buttons — the header no longer carries them, but on
   mobile the drawer is the one place a reader can act without scrolling to
   the footer band.

   Both labels are doubled, and so are their hover states. foundation/_base.scss
   scopes the link reset as `.l-drawer a { color: inherit }` (0,1,1) and
   `.l-drawer a:hover { color: inherit; opacity: .8 }` (0,2,1), so a plain
   `.c-btn--line` lost outright: the label rendered as TCD's body #333 on a
   LINE-green and a forest-green slab. (0,2,0) takes the resting state and
   (0,3,0) the hover, which is the same climb `.c-share--copy` had to make.
   `opacity: 1` comes along because the inherited fade over a solid fill just
   greys it — these two draw their own hover instead. */
.c-btn--line {
  background: var(--color-line);
}
.c-btn--line.c-btn--line {
  color: var(--color-white);
}
.c-btn--line.c-btn--line:hover {
  color: var(--color-white);
  background: #05b34c;
  opacity: 1;
}

.c-btn--contact {
  background: var(--color-primary);
}
.c-btn--contact.c-btn--contact {
  color: var(--color-white);
}
.c-btn--contact.c-btn--contact:hover {
  color: var(--color-white);
  background: var(--color-accent);
  opacity: 1;
}

.c-btn--line .icon,
.c-btn--contact .icon {
  font-size: 19px;
}

/* =============================================
   COMPONENT — Section heading
   Mincho title behind a gold rule, with an optional "see all" link parked on
   the far right. Reused by every homepage band.
   ============================================= */
.c-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.c-section-head__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(20px, 13.104px + 0.896vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  /* Gold rule. Drawn as a flex sibling rather than a text-relative ::before so
     it keeps its own height when the title wraps on narrow screens. */
}
.c-section-head__title::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 1.05em;
  background: var(--color-accent);
}

.c-section-head__more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 0.2s ease;
  /* Doubled: the link reset in foundation/_base.scss is `.p-home a { color:
     inherit }` at (0,1,1), so a plain `.c-section-head__more` lost and the
     "see all" links rendered as body #333 instead of the muted grey. */
}
.c-section-head__more.c-section-head__more {
  color: var(--color-text-light);
}
.c-section-head__more .icon {
  font-size: 20px;
  color: var(--color-accent);
  transition: transform 0.2s ease;
}
.c-section-head__more:hover {
  color: var(--color-primary);
  opacity: 1;
}
.c-section-head__more:hover .icon {
  transform: translateX(3px);
}
@media screen and (max-width: 480px) {
  .c-section-head__more {
    gap: 8px;
    font-size: var(--fs-xs);
  }
}

/* =============================================
   COMPONENT — Article cards
   One card object with two modifiers: --featured (注目記事, 3-up, arrow in the
   foot) and --ranking (人気記事ランキング, 4-up, medal in the corner).
   ============================================= */
.c-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.c-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* The whole card is one link, so the inherited `a:hover { opacity: .8 }` veils
   the entire card — photo, badge and text together — over the white page.
   That veil *is* the main site's card hover (.p-top-blog__card / .c-prop-card);
   don't cancel it here. */
.c-card__link {
  display: block;
  height: 100%;
  color: inherit;
}

.c-card__img-wrap {
  position: relative;
  aspect-ratio: 2/1;
  overflow: hidden;
  background: var(--color-bg-light);
}
.c-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-bg-light), var(--color-border));
}

/* Category pill, bottom-left over the photo — same placement and weight as the
   parent site's property-type badge. A span, not a link: the card itself is
   the anchor (see livnavi_card_category_badge()). */
.c-card__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: inline-block;
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-white);
  background: rgba(6, 51, 28, 0.88);
}

/* Rank medal, top-left. 1/2/3 take gold, silver and bronze; everything below
   falls back to a neutral green-grey so a top-8 list still reads cleanly. */
.c-card__rank {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-rank-n);
}
.c-card__rank.is-rank-1 {
  background: var(--color-rank-1);
}
.c-card__rank.is-rank-2 {
  background: var(--color-rank-2);
}
.c-card__rank.is-rank-3 {
  background: var(--color-rank-3);
}

.c-card__body {
  padding: 16px 18px 14px;
}

.c-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-primary-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-card__excerpt {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-light);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.c-card__date {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-mute);
}

/* Page views, on the ranking page only — the number the list is sorted by,
   printed where the featured card puts its arrow. */
.c-card__views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-mute);
}
.c-card__views .icon {
  font-size: 15px;
  color: var(--color-accent);
}

.c-card__arrow {
  font-size: 18px;
  color: var(--color-accent);
  transition: transform 0.2s ease;
}
.c-card:hover .c-card__arrow {
  transform: translateX(3px);
}

.c-card--ranking .c-card__title {
  font-size: 16px;
}
.c-card--ranking .c-card__excerpt {
  font-size: 14px;
}
.c-card--ranking .c-card__body {
  padding: 14px 14px 12px;
}

/* ── Area card ─────────────────────────────────────────────────────────── */
/* Wide photographic tile: the image is a CSS custom property set inline by the
   template, veiled by a left-to-bottom scrim so the Mincho name stays legible
   whatever photo an editor attaches to the tag. */
.c-card--area {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  aspect-ratio: 16/7;
  padding: 22px 24px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(2, 20, 11, 0.25) 0%, rgba(2, 20, 11, 0.62) 45%, rgba(2, 20, 11, 0.9) 100%), var(--area-bg, none) center/cover no-repeat, var(--color-primary-dark);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.c-card--area:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.c-card--area__text {
  min-width: 0;
}

.c-card--area__title {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(20px, 13.104px + 0.896vw, 26px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--color-white);
}

.c-card--area__desc {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.c-card--area__arrow {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-white);
  transition: transform 0.2s ease;
}
.c-card--area:hover .c-card--area__arrow {
  transform: translateX(4px);
}

/* =============================================
   COMPONENT — Filter chip
   The pill used by the archive's 絞り込み row. Hover borrows the header nav's
   tint (rgba(6,51,28,.06)) so filtering feels like the same gesture as opening
   a dropdown; the current chip takes the solid brand green.
   ============================================= */
.c-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  /* Doubled class, for the same reason as .c-btn--gold: foundation/_base.scss
     scopes its link reset under `.p-archive` / `.p-single`, which puts both
     `a { color: inherit }` at (0,1,1) and `a:hover { opacity: .8 }` at (0,2,1)
     above a plain `.c-chip`. Without the doubling the chip renders as body #333
     and fades on hover instead of tinting. */
}
.c-chip.c-chip {
  color: var(--color-text-light);
}
.c-chip.c-chip:hover {
  color: var(--color-primary);
  background: rgba(6, 51, 28, 0.06);
  border-color: rgba(6, 51, 28, 0.18);
  opacity: 1;
}
.c-chip.is-current, .c-chip.is-current:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 1;
}
@media screen and (max-width: 480px) {
  .c-chip {
    padding: 7px 13px;
    font-size: var(--fs-xs);
  }
}

/* =============================================
   COMPONENT — Pagination
   Rendered by template-parts/archive-pagination.php under its own class, not
   the legacy `.page_navi` — style.css and the inline block in
   functions/head.php both paint that class with the old TCD green.
   ============================================= */
.c-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(40px, 21.612px + 2.388vw, 56px);
}
.c-pagination a,
.c-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-text-light);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.c-pagination {
  /* Doubled class: `.p-archive a:hover { opacity: .8 }` in foundation/_base.scss
     is (0,2,1) and would fade the tile rather than tint it. */
}
.c-pagination a.page-numbers:hover {
  color: var(--color-primary);
  background: rgba(6, 51, 28, 0.04);
  border-color: var(--color-accent);
  opacity: 1;
}
.c-pagination .current {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.c-pagination {
  /* The ellipsis is a label, not a target — no box around it. */
}
.c-pagination .dots {
  min-width: 24px;
  padding-inline: 0;
  background: none;
  border-color: transparent;
  color: var(--color-text-mute);
}
.c-pagination {
  /* &lsaquo; / &rsaquo; are small glyphs; size them up so the arrows read at the
     same weight as the numerals beside them. */
}
.c-pagination .prev,
.c-pagination .next {
  font-size: 20px;
}
@media screen and (max-width: 480px) {
  .c-pagination {
    gap: 6px;
  }
  .c-pagination a,
  .c-pagination span {
    min-width: 38px;
    height: 38px;
    padding-inline: 6px;
    font-size: var(--fs-xs);
  }
}

/* =============================================
   COMPONENT — Keyword box
   The pill on the right of the archive toolbar. Same radius and hairline as
   .c-chip beside it, so the row reads as one set of controls; the submit is a
   filled green disc rather than a bordered button, which is the only thing in
   the row that looks pressable.
   ============================================= */
.c-search {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(320px, 100%);
  padding: 4px 4px 4px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* The whole pill takes the focus ring, not the bare input inside it —
     style.css:96 zeroes `outline` on every input, so the field alone would
     otherwise focus invisibly. */
}
.c-search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(186, 148, 56, 0.16);
}

.c-search__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--color-text);
  background: none;
  border: 0;
}
.c-search__input::placeholder {
  color: var(--color-text-mute);
}
.c-search__input {
  /* WebKit draws its own round clear button inside type="search"; the pill
     already has one in the toolbar copy, and two reads as clutter. */
}
.c-search__input::-webkit-search-decoration, .c-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.c-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease;
}
.c-search__btn .icon {
  font-size: 17px;
}
.c-search__btn:hover {
  background: var(--color-accent);
}

/* =============================================
   COMPONENT — Dropdown pill
   The year selector in the archive toolbar. Deliberately the same pill as
   .c-search beside it — same radius, same hairline, same 42px height and the
   same gold focus ring — so the toolbar reads as one row of controls rather
   than two unrelated widgets.

   The native <select> keeps its own menu (it is the one control a phone renders
   better than anything we could draw); only the closed state is restyled, and
   the caret is our own gold chevron with the platform arrow suppressed.
   ============================================= */
.c-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* The pill takes the ring, not the bare control — style.css:96 zeroes
     `outline` on every select, so the field alone would focus invisibly. */
}
.c-select:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(186, 148, 56, 0.16);
}

.c-select__label {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-mute);
  cursor: pointer;
}

.c-select__input {
  height: 32px;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--color-text);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Firefox draws a dotted focus ring inside the control on top of the pill's
     own ring, and pads options with the system colour on Windows. */
}
.c-select__input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--color-text);
}
.c-select__input option {
  color: var(--color-text);
  background: var(--color-white);
}

.c-select__caret {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-accent);
  pointer-events: none;
}

/* Only ever seen with scripting off — archive-years.php removes it as soon as
   its listener is bound. Styled anyway, because "only ever" is doing a lot of
   work in that sentence. */
.c-select__go {
  height: 32px;
  padding: 0 14px;
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.c-select__go:hover {
  background: var(--color-accent);
}

/* =============================================
   COMPONENT — Share button
   Round, brand-coloured, icon-only. Sized to the 44px touch target the footer
   CTA icons use, so a thumb can hit them on a phone.
   ============================================= */
.c-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--color-primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.c-share .icon {
  font-size: 20px;
}
.c-share {
  /* Doubled, or the glyph is black. Three of these four are <a>, so
     `.p-single a { color: inherit }` at (0,1,1) in foundation/_base.scss
     outranks a plain `.c-share` and the icon inherits the body #333 — an
     invisible X on the black disc, and a muddy mark on the other two. (The
     copy button is a <button>, so it was the only one rendering correctly,
     which is what made this look like a hover bug rather than a base one.) */
}
.c-share.c-share {
  color: var(--color-white);
}
.c-share {
  /* Doubled again to beat `.p-single a:hover { opacity: .8 }` — the button
     lifts and brightens rather than fading into the page. */
}
.c-share.c-share:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  color: var(--color-white);
  opacity: 1;
}

.c-share--line {
  background: var(--color-line);
}

.c-share--x {
  background: #000000;
}

.c-share--facebook {
  background: #1877f2;
}

/* Copy link: the one control that isn't a share target, so it takes the
   neutral treatment until it succeeds. */
.c-share--copy {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  /* Has to out-rank `.c-share.c-share { color: white }` above, which would
     otherwise paint this glyph white on its white ground. */
}
.c-share--copy.c-share.c-share--copy {
  color: var(--color-text-light);
}
.c-share--copy.c-share--copy:hover {
  color: var(--color-primary);
  border-color: var(--color-accent);
  filter: none;
}
.c-share--copy .c-share__done {
  display: none;
}
.c-share--copy {
  /* Matched to the (0,3,0) of the idle colour above, and later in the file, so
     the confirmed state actually lands. */
}
.c-share--copy.c-share--copy.is-copied {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.c-share--copy.c-share--copy.is-copied .c-share__idle {
  display: none;
}
.c-share--copy.c-share--copy.is-copied .c-share__done {
  display: inline-flex;
}

.c-share__idle,
.c-share__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =============================================
   PROJECT — Homepage hero
   Full-bleed Bangkok skyline with a dark wedge on the left for the copy.
   The photo ships with the theme (assets/images/hero-bangkok.webp); the
   template can still override it per-site by setting --hero-bg inline.
   ============================================= */
.p-home__hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 202.09px + 17.91vw, 460px);
  /* Three layers: the scrim, the photo, then a solid floor so the copy stays
     readable for the moment before the image decodes. The scrim is neutral
     black, not the brand green — tinting it green cast the whole left wedge
     olive instead of reading as shadow over the photograph. It's opaque
     through the first third and gone by ~74%, which puts the fade in the
     river rather than across the skyline. */
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.92) 30%, rgba(0, 0, 0, 0.55) 47%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0) 74%), var(--hero-bg, url("../images/hero-bangkok.webp")) center right/cover no-repeat, #000;
}

/* Padding-only, matching .u-inner — the headline has to start on the same
   left edge as the header logo, so no max-width + margin:auto centering. */
.p-home__hero-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  padding-block: clamp(48px, 20.418px + 3.582vw, 72px);
}

/* Capped separately from the container so the headline starts on the content
   edge but still breaks before it runs under the skyline. */
.p-home__hero-title,
.p-home__hero-copy {
  max-width: 640px;
}

.p-home__hero-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(30px, 7.015px + 2.985vw, 50px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.p-home__hero-copy {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.88);
}

.p-home__hero-cta {
  margin-top: 28px;
}

/* =============================================
   PROJECT — Homepage pillar row
   The six magazine categories restated directly under the hero as a single
   hairline-divided band: gold glyph, Japanese label, English caption.
   ============================================= */
/* Full-bleed band — the hairline under it runs the whole width of the page,
   as in the comp, so the band itself carries no gutter. */
.p-home__pillars {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.p-home__pillars-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media screen and (max-width: 770px) {
  .p-home__pillars-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-home__pillar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 8px;
  color: var(--color-text);
  transition: background 0.2s ease;
  /* Hairline between items only — drawn on the item rather than as a border so
     the first column in every row stays flush with the page gutter. */
}
.p-home__pillar + .p-home__pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 42px;
  background: var(--color-border);
}
.p-home__pillar:not(.is-placeholder):hover {
  opacity: 1;
  background: var(--color-bg-light);
}
.p-home__pillar.is-placeholder {
  color: var(--color-text-mute);
  cursor: default;
}
@media screen and (max-width: 770px) {
  .p-home__pillar {
    flex-direction: column;
    gap: 6px;
    padding: 16px 4px;
    text-align: center;
    /* In the 3-up grid the divider must not appear on the first item of the
       second row, so key it off the column position instead of `& + &`. */
  }
  .p-home__pillar + .p-home__pillar::before {
    display: none;
  }
  .p-home__pillar:nth-child(3n+2)::before, .p-home__pillar:nth-child(3n)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 1px;
    height: 34px;
    background: var(--color-border);
  }
}

.p-home__pillar-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
}
.p-home__pillar-glyph .icon {
  font-size: 30px;
  stroke-width: 1.3;
}
.is-placeholder .p-home__pillar-glyph {
  color: #c9c6bd;
}

.p-home__pillar-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.p-home__pillar-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.p-home__pillar-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--color-text-mute);
  white-space: nowrap;
}
@media screen and (max-width: 600px) {
  .p-home__pillar-sub {
    display: none;
  }
}

/* =============================================
   PROJECT — Homepage bands
   Three stacked bands (注目記事 / 人気記事ランキング / エリア特集) sharing one
   section shell and one gutter, so their columns line up with each other and
   with the header logo.
   ============================================= */
.p-home {
  background: var(--color-bg);
}

.p-home__section {
  padding-block: var(--space-section);
  /* The bands run back-to-back on the same ground; only the first one needs
     air under the pillar row. */
}
.p-home__section + .p-home__section {
  padding-top: 0;
}

.p-home__section-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}

.p-home__featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 6.507px + 1.493vw, 28px);
}
@media screen and (max-width: 770px) {
  .p-home__featured-grid {
    grid-template-columns: 1fr;
  }
}

.p-home__ranking-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 6.806px + 1.194vw, 24px);
}
@media screen and (max-width: 770px) {
  .p-home__ranking-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .p-home__ranking-grid {
    grid-template-columns: 1fr;
  }
}

.p-home__area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 6.507px + 1.493vw, 28px);
}
@media screen and (max-width: 770px) {
  .p-home__area-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   PROJECT — Archive (category / tag / date / author)
   Hero band → filter chips → 3-up card grid → pagination.

   Everything here is scoped under `.p-archive` for the same reason the homepage
   is scoped under `.p-home`: this sheet loads after the legacy TCD stylesheet,
   and a scoped rule beats TCD's single-class rules without !important.
   ============================================= */
.p-archive {
  background: var(--color-bg);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Same three layers as the homepage hero — scrim, photo, solid floor — but
   angled less steeply and about two-thirds the height: an archive is a list,
   not a front door, and the copy over it is one short block rather than a
   headline plus CTA. The photo comes in as --archive-bg from the template. */
.p-archive__hero {
  position: relative;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.88) 32%, rgba(0, 0, 0, 0.62) 52%, rgba(0, 0, 0, 0.34) 72%, rgba(0, 0, 0, 0.24) 100%), var(--archive-bg, url("../images/hero-bangkok.webp")) center/cover no-repeat, var(--color-primary-dark);
}

/* 360px / 496px are taken verbatim from nishimura-v3's `.p-prop-list-hero`
   (object/project/_page-hero.scss) — the band behind nishimurafudousan.com's
   /search/ hero — so the two sites' interior heroes are the same depth. */
.p-archive__hero-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding-block: 14px clamp(30px, 13.91px + 2.09vw, 44px);
}
@media screen and (max-width: 770px) {
  .p-archive__hero-inner {
    min-height: 496px;
  }
}

/* `auto` on *both* block margins centres the copy in the space the breadcrumb
   leaves, while the breadcrumb keeps the top edge. The inner's uneven padding
   (14px top vs 30–44px bottom) lifts the block by about half the breadcrumb's
   height, which is what puts it on the band's true optical centre rather than
   slightly below it. */
.p-archive__hero-copy {
  margin-block: auto;
  max-width: 760px;
}

.p-archive__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(28px, 11.91px + 2.09vw, 42px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.p-archive__lead {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.84);
}

/* ── Breadcrumb, pulled up into the hero ───────────────────────────────── */
/* header.php skips printing it on archives; archive-hero.php prints it inside
   the band instead. style.css draws it black at 1125px wide with two
   design_plus glyphs (a house before Home, a caret between crumbs), and
   responsive.css re-pins it at ≤770px with `#main_contents #bread_crumb`
   (2,0,0) — both sheets load *after* this one, so the overrides below carry an
   `#main_contents` of their own to outrank them. */
.p-archive__hero #bread_crumb {
  width: auto;
  margin: 0 0 18px;
  padding: 0;
  line-height: 1;
}
.p-archive__hero #bread_crumb li,
.p-archive__hero #bread_crumb li a {
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-base);
  font-size: var(--fs-xs);
}
.p-archive__hero {
  /* style.css:288 gives the Home crumb a 0px-wide `<a>` whose only visible part
     is a `border-left:1px solid #eee` — a divider meant to butt against the old
     layout's left edge. Here it just reads as a stray rule floating in front of
     the house glyph. */
}
.p-archive__hero #bread_crumb li.home a {
  border-left: none;
}
.p-archive__hero #bread_crumb li::after,
.p-archive__hero #bread_crumb li.home a::before {
  color: rgba(255, 255, 255, 0.55);
}
.p-archive__hero #bread_crumb li a:hover {
  color: var(--color-white);
  opacity: 1;
}
.p-archive__hero #bread_crumb li.home a:hover::before {
  color: var(--color-accent-soft);
}

#main_contents .p-archive__hero #bread_crumb {
  width: auto;
  margin: 0 0 18px;
  padding: 0;
}

/* ── Filter chips ──────────────────────────────────────────────────────── */
.p-archive__filters {
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}

.p-archive__filters-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-block: 14px;
}

.p-archive__filters-label {
  margin-right: 6px;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-mute);
}

/* ── List ──────────────────────────────────────────────────────────────── */
.p-archive__list {
  padding-block: var(--space-section);
}

.p-archive__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}

/* Count on the left, keyword box on the right, on the content edge just above
   the first row of cards — so the number reads as a caption for the list it
   counts, and the search sits with the thing it narrows. */
.p-archive__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 20px;
}

.p-archive__count {
  margin: 0;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--color-text-mute);
}

.p-archive__count-clear {
  margin-left: 12px;
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border);
}
.p-archive__count-clear:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* Year selector and keyword box, kept together on the right of the toolbar so
   the two controls that narrow the list sit side by side rather than at
   opposite ends of the row. */
.p-archive__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* On a phone the two stack, and the box takes the full width — a 320px pill
   floated right under a short count line reads as a stray element. */
@media screen and (max-width: 600px) {
  .p-archive__toolbar {
    align-items: stretch;
  }
  /* The controls go full-width and stack too: side by side they leave the
     select about 120px, which truncates 2024年（192件） to nothing useful. */
  .p-archive__tools {
    flex-direction: column;
    align-items: stretch;
  }
  .c-search {
    width: 100%;
  }
  .c-select {
    justify-content: space-between;
  }
}
.p-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 8.507px + 1.493vw, 30px);
  /* Two-up rather than the homepage's single column: an archive page carries
     twelve cards, and one per row turns a phone into a very long scroll. */
}
@media screen and (max-width: 770px) {
  .p-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media screen and (max-width: 480px) {
  .p-archive__grid {
    grid-template-columns: 1fr;
  }
}
.p-archive__grid {
  /* The homepage clamps the sub-copy to one line so three cards sit on a tight
     rhythm under the hero. A list page has room to say more. */
}
.p-archive__grid .c-card__excerpt {
  -webkit-line-clamp: 2;
}

.p-archive__empty {
  margin: 0;
  padding-block: 40px 12px;
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--color-text-light);
  text-align: center;
}

.p-archive__empty-action {
  margin: 0;
  padding-bottom: 40px;
  text-align: center;
}

/* =============================================
   PROJECT — 人気記事ランキング (/ranking/)
   Hero band → note → twenty numbered cards.

   The band and the card are the archive's and the homepage's respectively;
   what belongs to this page is only the grid it lays them out on and the line
   above it. Scoped under `.p-ranking` for the same reason `.p-archive` is —
   this sheet loads after the legacy TCD stylesheet.
   ============================================= */
.p-ranking {
  background: var(--color-bg);
}

.p-ranking__list {
  padding-block: var(--space-section);
}

.p-ranking__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}

/* Sits where the archive's count line sits, and says the same kind of thing —
   what the list is and how much of it there is. */
.p-ranking__note {
  margin: 0 0 20px;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--color-text-mute);
}

/* Four across, the same rhythm as the homepage band this page opens out of, so
   ranks 1-4 land where the reader last saw them. Twenty cards make five rows. */
.p-ranking__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 6.806px + 1.194vw, 24px);
}
@media screen and (max-width: 770px) {
  .p-ranking__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .p-ranking__grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   PROJECT — Article body (.post_content)

   This styles editor output, not markup we control: 800-odd posts already
   exist, written as <p> with an inline `font-weight:400`, <h2>/<h3>/<h4>,
   full-width <img>, Google Maps <iframe>, and the occasional table or
   blockquote. So every rule here has to be safe against content that was
   written years ago for the old theme.

   Kept in its own partial because .post_content is the legacy class name shared
   by single posts and pages — it is not `.p-single`'s private property.
   ============================================= */
.post_content {
  /* style.css:430 insets the body by 50px to clear the old fixed-width column.
     The reading column handles that now. */
  margin: 0;
  /* No font-size here on purpose. functions/head.php:95 prints
     `.post_content { font-size:<content_font_size>px }` inline, after main.css
     and at the same (0,1,0) — it is the 本文の文字サイズ field on the TCD
     options screen, currently 14px, and it is the editor's to set. Declaring a
     size here would either lose silently or take that control away. The heading
     sizes below are ours because that field doesn't reach them. */
  line-height: 2;
  color: var(--color-text);
  word-wrap: break-word;
}
.post_content > *:first-child {
  margin-top: 0;
}
.post_content p {
  margin: 0 0 1.9em;
}
.post_content strong,
.post_content b {
  font-weight: 700;
  color: var(--color-primary-dark);
}
.post_content {
  /* ── Links ─────────────────────────────────────────────────────────────
     foundation/_base.scss strips underlines and inherits colour for everything
     under .p-single, which is right for cards and nav and wrong inside running
     prose — a link in a paragraph has to be visible as one. Put it back. */
}
.post_content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(10, 64, 36, 0.35);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.post_content {
  /* Doubled class — the one rule in this partial that has to fight rather than
     scope. functions/head.php prints `.post_content a { color:#<pickedcolor1> }`
     into an inline <style> that lands *after* main.css, at the identical
     (0,1,1); a tie goes to whoever is later, so every in-article link came out
     the old TCD bright green. (0,2,1) settles it. */
}
.post_content.post_content a {
  color: var(--color-primary);
}
@media (hover: hover) {
  .post_content a:hover {
    color: var(--color-accent-dark);
    text-decoration-color: var(--color-accent);
    opacity: 1;
  }
}
.post_content {
  /* ── Headings ──────────────────────────────────────────────────────────
     Replacing three loud 2014 treatments: an h2 on a #ccf5d0 mint slab with a
     PNG cube icon, an h3 under a 5px #2aaa38 rule, and an h4 with a JPG bullet.

     Sans, like the article title above them — Zen Old Mincho stays the voice of
     the site's own furniture (section heads, the archive hero), and at 20-24px
     inside running body copy it read as a second voice interrupting the text
     rather than as structure within it.
     Sizes are fixed rather than fluid() — the reading column is a fixed 800px,
     so there is nothing for them to scale against.

     `padding` needs !important here — and only here — because style.css:423-425
     marks its own padding !important, which no amount of specificity beats.
     Everything else is won by scoping under .p-single. */
}
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.post_content h6 {
  clear: both;
  font-family: var(--font-base);
  font-weight: 700;
  color: var(--color-primary-dark);
  background: none;
  letter-spacing: 0.02em;
}
.post_content h2 {
  margin: 2.6em 0 1.1em;
  padding: 0 0 14px 18px !important;
  font-size: 24px;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  /* The gold bar from .c-section-head__title — the same mark opens a section
     on the homepage, the archive and here. */
}
.post_content h2::before {
  content: "";
  position: absolute;
  top: 0.18em;
  left: 0;
  width: 4px;
  height: 1.05em;
  background: var(--color-accent);
}
.post_content h3 {
  margin: 2.2em 0 0.9em;
  padding: 0 0 0 15px !important;
  font-size: 20px;
  line-height: 1.6;
  border-bottom: 0;
  border-left: 3px solid var(--color-primary);
}
.post_content {
  /* Carries no rule or bar of its own — it is the body typeface at body-ish
     size, set bold, so it reads as an emphasised paragraph opener rather than
     as a fourth level of furniture. */
}
.post_content h4 {
  margin: 2em 0 0.8em;
  padding: 0 !important;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-primary);
}
.post_content h5,
.post_content h6 {
  margin: 1.8em 0 0.7em;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
}
.post_content {
  /* ── Media ─────────────────────────────────────────────────────────────
     Content images are 790px wide, which is all but exactly the reading
     column — so they read as full-bleed within it without being upscaled. */
}
.post_content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}
.post_content {
  /* Editors wrap nearly every image in its own <p>, so the paragraph rhythm
     would otherwise leave a 1.9em gap under a picture and a tight one above. */
}
.post_content p > img:only-child {
  display: block;
  margin-inline: auto;
}
.post_content figure {
  margin: 0 0 1.9em;
}
.post_content iframe {
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-card);
}
.post_content .wp-caption {
  max-width: 100%;
  margin-bottom: 1.9em;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.post_content .wp-caption-text {
  margin: 10px auto 0;
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: 1.7;
  color: var(--color-text-light);
  text-align: center;
}
.post_content {
  /* ── Lists ─────────────────────────────────────────────────────────────── */
}
.post_content ul,
.post_content ol {
  margin: 0 0 1.9em;
  padding-left: 1.4em;
}
.post_content ul {
  list-style: disc outside;
}
.post_content ol {
  list-style: decimal outside;
}
.post_content li {
  margin-bottom: 0.4em;
  line-height: 2;
}
.post_content li::marker {
  color: var(--color-accent);
}
.post_content li > ul,
.post_content li > ol {
  margin: 0.4em 0 0;
}
.post_content {
  /* ── Quote ─────────────────────────────────────────────────────────────
     The old one drew two floating blue quotation glyphs and a hard drop
     shadow; this is a tinted panel with a gold edge. */
}
.post_content blockquote {
  margin: 0 0 1.9em;
  padding: 22px 26px;
  background: var(--color-bg-light);
  border: 0;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  box-shadow: none;
  color: var(--color-text-light);
}
.post_content blockquote::before, .post_content blockquote::after {
  content: none;
}
.post_content blockquote > *:last-child {
  margin-bottom: 0;
}
.post_content blockquote cite {
  display: block;
  margin-top: 12px;
  padding: 0;
  border: 0;
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--color-text-mute);
  text-align: right;
}
.post_content {
  /* ── Table ─────────────────────────────────────────────────────────────
     Wrapped so a wide spec table scrolls inside itself rather than pushing the
     whole page sideways on a phone. */
}
.post_content table {
  width: 100%;
  margin: 0 0 1.9em;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.post_content th,
.post_content td {
  padding: 12px 16px;
  line-height: 1.8;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  text-align: left;
  vertical-align: top;
}
.post_content th {
  background: var(--color-bg-light);
  font-weight: 700;
  color: var(--color-primary-dark);
}
.post_content hr {
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}
@media screen and (max-width: 770px) {
  .post_content {
    line-height: 1.95;
  }
  .post_content table {
    display: block;
    overflow-x: auto;
  }
}

/* =============================================
   PROJECT — Single post
   One centred reading column: header → photo → article → tags → share →
   prev/next, with the 関連記事 band breaking out to the full page width so the
   article visibly ends before the cards begin.
   ============================================= */
.p-single {
  background: var(--color-bg);
}

/* The reading column. Same construction as the `container` mixin — box plus
   inner pad — just a narrower box, so the text measure stays comfortable while
   the gutter behaves identically to every other band on the site. */
.p-single__inner {
  width: 100%;
  max-width: var(--reading-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}

/* ── Header ────────────────────────────────────────────────────────────── */
.p-single__head {
  padding-block: clamp(24px, 10.209px + 1.791vw, 36px) 0;
}

.p-single__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 18px;
}

/* A link, unlike the card badge — here there is no enclosing anchor to nest
   inside, and the category is the most useful next step from an article. */
.p-single__cat {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  background: var(--color-primary);
  border-radius: 2px;
  transition: background 0.2s ease;
  /* Doubled, like .c-btn--gold: foundation/_base.scss sets
     `.p-single a { color: inherit }` at (0,1,1), which outranks a plain
     `.p-single__cat` and left the label rendering as the body's #333 on the
     dark green pill — invisible. */
}
.p-single__cat.p-single__cat {
  color: var(--color-white);
}
.p-single__cat {
  /* Doubled again for the same reason on `.p-single a:hover { opacity: .8 }` —
     the pill should darken, not fade. */
}
.p-single__cat.p-single__cat:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
  opacity: 1;
}

.p-single__date,
.p-single__views {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-mute);
}

.p-single__views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.p-single__views .icon {
  font-size: 15px;
}

/* Sans, like the headings inside the article. Zen Old Mincho stays the voice of
   the *site* — section heads, the archive hero, area tiles — while an article
   and its own title read in the body typeface. */
.p-single__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-primary-dark);
}

/* ── Breadcrumb, on the page ground this time ──────────────────────────── */
/* Unlike the archive's, this one sits on white, so it only needs the geometry
   fixing, not the colours. The `#main_contents` prefix is still required:
   responsive.css loads after main.css and pins `#main_contents #bread_crumb`
   at (2,0,0). */
#main_contents .p-single__head #bread_crumb {
  width: auto;
  margin: 0 0 20px;
  padding: 0;
}

.p-single__head #bread_crumb li,
.p-single__head #bread_crumb li a {
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
}
.p-single__head {
  /* style.css:288 gives the Home crumb a 0px-wide <a> whose only visible part
     is a border-left — a stray rule in front of the house glyph. */
}
.p-single__head #bread_crumb li.home a {
  border-left: none;
}
.p-single__head #bread_crumb li a:hover {
  color: var(--color-primary);
  opacity: 1;
}

/* ── Featured photo ────────────────────────────────────────────────────── */
.p-single__thumb {
  margin: clamp(24px, 12.507px + 1.493vw, 34px) 0 clamp(28px, 14.209px + 1.791vw, 40px);
}
.p-single__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* No photo: the article still needs air under the title. */
.p-single__content {
  margin-top: clamp(24px, 12.507px + 1.493vw, 34px);
}

.p-single__thumb + .p-single__content {
  margin-top: 0;
}

/* ── Tags ──────────────────────────────────────────────────────────────── */
.p-single__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: clamp(28px, 14.209px + 1.791vw, 40px);
  padding-top: clamp(20px, 10.806px + 1.194vw, 28px);
  border-top: 1px solid var(--color-border);
}

.p-single__tags-icon {
  font-size: 18px;
  color: var(--color-accent);
}

/* ── Share ─────────────────────────────────────────────────────────────── */
.p-single__share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: clamp(24px, 14.806px + 1.194vw, 32px);
}

.p-single__share-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-mute);
}

.p-single__share-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Prev / next ───────────────────────────────────────────────────────── */
.p-single__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: clamp(36px, 17.612px + 2.388vw, 52px);
  padding-top: clamp(28px, 18.806px + 1.194vw, 36px);
  border-top: 1px solid var(--color-border);
}
@media screen and (max-width: 600px) {
  .p-single__nav {
    grid-template-columns: 1fr;
  }
}

.p-single__nav-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--color-bg-light);
  border-radius: var(--radius-card);
  transition: background 0.2s ease, transform 0.2s ease;
}
.p-single__nav-item.p-single__nav-item:hover {
  background: rgba(6, 51, 28, 0.06);
  transform: translateY(-2px);
  opacity: 1;
}
.p-single__nav-item {
  /* A lone next link keeps the right-hand column, so the pair always reads as
     back / forward rather than sliding to whichever side is filled. */
}
.p-single__nav-item--next {
  grid-column: 2;
  text-align: right;
}
@media screen and (max-width: 600px) {
  .p-single__nav-item--next {
    grid-column: auto;
  }
}

.p-single__nav-dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-mute);
}

.p-single__nav-item--next .p-single__nav-dir {
  justify-content: flex-end;
}

/* One arrow glyph, pointed each way — it already points right, so only the
   prev copy is flipped. */
.p-single__nav-arrow {
  font-size: 17px;
  color: var(--color-accent);
}

.p-single__nav-item--prev .p-single__nav-arrow {
  transform: scaleX(-1);
}

.p-single__nav-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-primary-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Option-driven banner slots ────────────────────────────────────────── */
.p-single__ads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block: clamp(24px, 14.806px + 1.194vw, 32px);
}
.p-single__ads.is-single {
  grid-template-columns: 1fr;
}
@media screen and (max-width: 600px) {
  .p-single__ads {
    grid-template-columns: 1fr;
  }
}

.p-single__ad img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* ── Pickup list ───────────────────────────────────────────────────────── */
.p-single__pickup {
  padding-block: var(--space-section) 0;
}

.p-single__pickup-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-single__pickup-list li + li {
  border-top: 1px solid var(--color-border);
}
.p-single__pickup-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-primary-dark);
}
.p-single__pickup-list a .icon {
  flex-shrink: 0;
  font-size: 17px;
  color: var(--color-accent);
  transition: transform 0.2s ease;
}
.p-single__pickup-list a:hover .icon {
  transform: translateX(3px);
}

/* ── Related ───────────────────────────────────────────────────────────── */
/* Breaks out of the reading column to the site's full content width, so the
   article visibly ends where the cards start. */
.p-single__related {
  margin-top: clamp(48px, 20.418px + 3.582vw, 72px);
  padding-block: var(--space-section);
  background: var(--color-bg-light);
}

.p-single__related-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}

.p-single__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 8.507px + 1.493vw, 30px);
}
@media screen and (max-width: 770px) {
  .p-single__related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media screen and (max-width: 480px) {
  .p-single__related-grid {
    grid-template-columns: 1fr;
  }
}
.p-single__related-grid .c-card__excerpt {
  -webkit-line-clamp: 2;
}

/* =============================================
   UTILITY
   ============================================= */
/* Visible to screen readers only — used for section labels that the design
   carries visually (an icon, a rank medal) but that need a text equivalent. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Shared page gutter. Padding-only — no max-width + margin:auto — so every
   inner (header bar, hero copy, section grids) resolves to the *same* left
   edge. Combining both would inset the sections a further 60px at 1440px and
   the homepage columns would no longer line up with the logo. */
.u-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
}

/* Line breaks that only render at one size: .sp = phone, .pc = desktop.
   Verbatim from nishimura-v3's utility layer, so copy written for one site
   breaks the same way on the other. Used by the archive lead sentence. */
br.sp {
  display: none;
}

@media screen and (max-width: 770px) {
  br.sp {
    display: inline;
  }
  br.pc {
    display: none;
  }
}