/* ============================================================================
   東京の棚 — Tokyo Pilot 01

   Art direction: 夜の展示室。
   3枚の写真はどれも「暗い室内で照明の当たった物」を撮ったもので、
   画面の地を暗くすると写真の中の空間がそのまま続く。地を暗くしたぶん、
   画面のなかで光っているのは Real Media だけになる。
   文字と罫は図録の札として扱い、写真の邪魔をしない位置に置く。

   この product の名前は「棚」。3つの物が1枚の棚板の上に並んでいる、
   という composition にする。写真の縦横比の違いは、棚に並んだ物の
   背の違いとしてそのまま出す。棚板より下が札。

   単一の見え方に決めているので theme 分岐は持たない。
   ただし色は全部ここで明示的に塗る（host の地を借りない）。
   ========================================================================= */

:root {
  /* 展示室 */
  --hall:        #141312;
  --hall-raised: #1c1a18;
  --hall-line:   #2e2b28;   /* 棚板・区切り（構造。文字ではない） */
  --hall-edge:   #6e675e;   /* 操作の輪郭。地に対して 3.33:1 */

  /* 札・刷り物 */
  --bone:        #f1ebe0;
  --bone-line:   rgba(20, 19, 18, .16);

  /* 文字 */
  --chalk:       #ece7de;   /* 暗い地の上の主文字 */
  --chalk-dim:   #9a938a;   /* 暗い地の上の副文字 */
  --ink:         #1a1815;   /* 明るい地の上の主文字 */
  --ink-dim:     #6a635a;   /* 明るい地の上の副文字 */

  /* 唯一の signal。通し番号と、外へ出る導線にだけ使う。
     暗い地に載せる版と、白文字を載せる版で明度を分ける。
     地に対して 4.92:1 / 白文字に対して 5.11:1。 */
  --signal:      #e0563c;
  --signal-fill: #c93a22;
  --signal-lift: #d8442b;

  --serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;

  --page: 1360px;
  --gutter: 20px;
}

* { box-sizing: border-box; }

html { background: var(--hall); }

body {
  margin: 0;
  min-height: 100vh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* 展示室の光。中央がわずかに明るく、周辺が落ちる。装飾ではなく照明条件。 */
  background:
    radial-gradient(120% 80% at 50% 12%, #1a1816 0%, var(--hall) 58%, #100f0e 100%),
    var(--hall);
  background-attachment: fixed;
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
/* 主要操作は double-tap zoom 待ちを挟まない。見た目は変えない。 */
.open-button,
.dialog-close,
.official-action { touch-action: manipulation; }
button:focus-visible, a:focus-visible, .object-card:has(:focus-visible) {
  outline: 2px solid var(--signal-lift);
  outline-offset: 4px;
}

.skip-link {
  position: fixed; left: 12px; top: -100px; z-index: 100;
  padding: 12px 16px; background: var(--bone); color: var(--ink);
  border-radius: 2px; font-size: 0.875rem;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- 見出し帯 */

.site-header {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
  padding: 22px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
  margin: 0;
  min-width: 0;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}
.brand-lockup-image {
  display: block;
  width: clamp(230px, 21vw, 292px);
  max-width: 100%;
  height: auto;
  flex: 0 1 auto;
}
.pilot-label {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: .2em;
  color: var(--chalk-dim);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- 標題 */

.hero {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
  padding: 24px 0 22px;
}
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.375rem, 9.4vw, 4.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.05em;
  color: var(--chalk);
}
.hero-line { display: block; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 0.8125rem;
  letter-spacing: .2em;
  color: var(--chalk-dim);
}

/* --------------------------------------------------------------- 展示の列 */

.objects-section {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
}

.object-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 72px;
}

.object-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
}

.media-frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 18px;
  overflow: visible;
  background: transparent;
}
.media-frame img {
  display: block;
  width: auto;
  max-width: min(100%, var(--plate-w, 100%));
  height: auto;
  max-height: var(--plate-h, 62vh);
  object-fit: contain;
  background: var(--hall-raised);
  outline: 1px solid rgba(236, 231, 222, .14);
  outline-offset: 0;
  box-shadow: 0 26px 56px -22px rgba(0,0,0,.85);
}

.card-media { --plate-h: 48vh; }
.object-card:first-child .card-media { --plate-h: 54vh; }

/* -------------------------------------------------------------------- 札 */

.card-body {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 30em;
  padding-top: 16px;
  border-top: 1px solid var(--hall-line);   /* 棚板 */
}

.card-number,
.detail-count {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--chalk-dim);
}
.plate-n {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .02em;
  color: var(--signal);
  line-height: 1;
}
.plate-sep, .plate-of { color: var(--chalk-dim); }

/* 日本語見出しの意味単位ひとかたまり。keep-all が文節内の暗黙の改行機会を消すので、
   通常は <wbr>（と読点の後）でしか折返せない。Safari も keep-all を解釈する。
   nowrap ではなく keep-all にしているのは、文節そのものが1行に収まらない極端な幅で
   横スクロールを出さないため。その最終手段としてだけ overflow-wrap: anywhere が働く。
   break-word ではなく anywhere なのは、keep-all した文節が grid track の min-content を
   押し広げて 200% zoom で横スクロールを作ってしまうため。anywhere は min-content を
   1文字に戻すが、実際の改行は今までどおり <wbr> の位置が優先される。 */
.jp-phrase {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 実写を持たない対象のための活字図版。写真のふりをさせない。
   V3 が組んだ版面だと見て分かるように、罫と余白で図録の扉に寄せる。
   既存の表紙・ポスター・スチル・チラシは一切使わない。 */
/* 高さは縦横比では決めない。写真は img の実寸で決まるので、図版を縦横比で
   引き伸ばすと、中身と無関係な空白が残って「読み込めていない箱」に見える。
   1440 では列幅に比例して1枚目だけ背が伸び、棚の行も揃わなくなる。
   図版は活字なのだから、活字と余白で高さを決める。 */
.media-plate .plate-inner {
  width: 100%;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 18px;
  padding: 40px 30px 44px;
  background:
    linear-gradient(180deg, rgba(241, 235, 224, .07), rgba(241, 235, 224, .03)),
    var(--hall);
  border: 1px solid var(--hall-edge);
  box-shadow: 0 26px 56px -22px rgba(0, 0, 0, .85);
}
.plate-rule {
  width: 44px;
  height: 2px;
  background: var(--signal-fill);
}
.plate-word {
  font-family: var(--serif);
  font-size: clamp(2rem, 8.6vw, 3rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--chalk);
  line-break: strict;
  /* JIROKICHI / SHELTER のような欧文は既定では折返せず、図版の min-content を
     押し広げて 200% 拡大で横スクロールを作る。最終手段として折れるようにする。 */
  overflow-wrap: anywhere;
}
.plate-sub {
  font-size: 0.8125rem;
  letter-spacing: .14em;
  line-height: 1.7;
  color: var(--chalk-dim);
}

.object-hook {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 6.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.03em;
  color: var(--chalk);
  line-break: strict;
  overflow-wrap: normal;
  word-break: auto-phrase;
}

/* 「ひらく」は浮いた pill ではなく、札の最後の一行。
   実際の当たり判定は plate 全体（::after）。 */
.open-button {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--hall-edge);
  border-radius: 0;
  background: transparent;
  color: var(--chalk);
  font: inherit;
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: .18em;
  text-align: left;
  cursor: pointer;
}
.open-button::after {
  content: "";
  position: absolute;
  inset: -14px -14px -14px -14px;
}
.open-word { color: var(--chalk); }
.open-mark { color: var(--signal); font-size: 1.375rem; line-height: 1; }

/* ---------------------------------------------------------- 何のサイトか */

/* identity のすぐ下に置く一文。写真より先に読ませるのが役目なので、
   見出しより小さく、しかし読み飛ばせない大きさにする。 */
.site-intro {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
  padding: 4px 0 0;
}
.site-explainer {
  margin: 0;
  max-width: 34em;
  color: var(--chalk-dim);
  font-size: 0.9375rem;
  line-height: 1.85;
}

/* 二つの入口。どちらも同じ格で並べる。 */
.entry-axis {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto 18px;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--chalk-dim);
}
.by-kind { margin-top: 72px; }

/* 種類は EC の filter pill 群ではなく、書店の索引。名前と件数を1行ずつ。 */
.category-index {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
  display: grid;
}
.category-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  min-height: 48px;
  padding: 13px 0;
  border-top: 1px solid var(--hall-edge);
  color: var(--chalk-dim);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: .1em;
}
.category-link:last-child { border-bottom: 1px solid var(--hall-edge); }
.category-link .category-count {
  font-size: 0.8125rem;
  letter-spacing: .16em;
  color: var(--chalk-dim);
}
.category-link.is-selected { color: var(--chalk); }
.category-link.is-selected .category-name {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
.category-link.is-selected .category-count { color: var(--signal); }

/* 結果は文字が先。写真の一覧にしない。 */
.category-results {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
}
.result-count {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 0;
  font-size: 0.8125rem;
  letter-spacing: .16em;
  color: var(--chalk-dim);
}
.result-count-name { font-family: var(--serif); color: var(--chalk); }
.result-empty {
  margin: 18px 0 0;
  color: var(--chalk-dim);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.result-row {
  padding: 22px 0 20px;
  border-top: 1px solid var(--hall-edge);
}
.result-row:first-of-type { margin-top: 14px; }
.result-row:last-child { border-bottom: 1px solid var(--hall-edge); }
.result-meta {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: .16em;
  color: var(--chalk-dim);
}
.result-name {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--chalk-dim);
}
.result-hook {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--chalk);
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}
.result-go { margin: 12px 0 0; }
.result-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  color: var(--chalk);
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: .14em;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.result-link span[aria-hidden] { color: var(--signal); }

/* 候補の導線は主要探索より下位。塗りの CTA にしない。 */
.suggest-lane {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 78px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--hall-edge);
}
.suggest-lane-note {
  margin: 0;
  color: var(--chalk-dim);
  font-size: 0.875rem;
  line-height: 1.8;
}
.suggest-lane-link { margin: 2px 0 0; }

/* ------------------------------------------------------------ 候補を教える */

.suggest-section {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
  max-width: 44em;
}
.suggest-form { display: grid; gap: 26px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 0.8125rem;
  letter-spacing: .16em;
  color: var(--chalk-dim);
}
.field .req, .field .opt {
  margin-left: 10px;
  font-size: 0.6875rem;
  letter-spacing: .12em;
}
.field .req { color: var(--signal); }
.field .opt { color: var(--hall-edge); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--hall-edge);
  border-radius: 2px;
  background: rgba(241, 235, 224, .04);
  color: var(--chalk);
  font: inherit;
  font-size: 1rem;
  line-height: 1.7;
}
.field textarea { min-height: 112px; resize: vertical; }
.counter {
  margin: 0;
  text-align: right;
  font-size: 0.75rem;
  letter-spacing: .12em;
  color: var(--chalk-dim);
}

.suggest-output { margin-top: 44px; }
.output-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--chalk-dim);
}
.suggest-output-text {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--hall-edge);
  border-radius: 2px;
  background: rgba(241, 235, 224, .04);
  color: var(--chalk);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.85;
  resize: vertical;
}
.copy-fallback {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--chalk-dim);
}
.suggest-actions { margin: 20px 0 0; }
/* 送信フォームと公式Xは別々の行き先。inline のままだと語間の 4.5px しか
   空かず、下線が続いて1つの文に見える。押す的も接する。別の場所へ行く
   2つの操作だと分かる間隔を空け、狭い画面では折り返させる。 */
.suggest-actions-secondary {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
.copy-status {
  margin: 10px 0 0;
  min-height: 1.6em;
  font-size: 0.8125rem;
  letter-spacing: .1em;
  color: var(--signal);
}
.suggest-terms {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--hall-edge);
}
.suggest-terms p {
  margin: 14px 0 0;
  color: var(--chalk-dim);
  font-size: 0.875rem;
  line-height: 1.9;
}

/* ------------------------------------------------------------------ 玄関 */

/* 4つの棚は feed ではなく入口の並び。番号・名前・その棚の一行だけ。
   バッジも件数も出さず、4街を同じ文字サイズと余白で並べる。 */
.shelf-list {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
  display: grid;
  gap: 0;
}

.shelf-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "number mark"
    "name   mark"
    "tag    mark"
    "media  media";
  align-items: baseline;
  gap: 6px 18px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--hall-edge);
  text-decoration: none;
  color: inherit;
}
.shelf-entry:last-child { border-bottom: 1px solid var(--hall-edge); }

.shelf-number {
  grid-area: number;
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: .2em;
  line-height: 1;
}
.shelf-name {
  grid-area: name;
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: .12em;
  color: var(--chalk-dim);
}
.shelf-tagline {
  grid-area: tag;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 6.2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.03em;
  color: var(--chalk);
  line-break: strict;
  /* auto-phrase は文節を min-content に押し上げるので、200% 拡大で棚の入口が
     横へはみ出す。anywhere で min-content を1文字へ戻す。通常の折返しは
     いままでどおり文節境界が優先される。 */
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}
.shelf-mark {
  grid-area: mark;
  align-self: center;
  color: var(--signal);
  font-size: 1.375rem;
  line-height: 1;
}

.shelf-entry-media {
  position: relative;
  grid-area: media;
  min-width: 0;
  margin: 18px 0 0;
}
.shelf-entry-media-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  isolation: isolate;
  border: 1px solid rgba(236, 231, 222, .18);
  background:
    linear-gradient(135deg, #dfc79a 0%, #a9b29f 44%, #7397a1 100%);
}
.shelf-entry-media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(135deg,
      rgba(224,86,60,.22) 0%,
      rgba(223,199,154,.16) 38%,
      rgba(115,151,161,.36) 100%);
  mix-blend-mode: color;
  pointer-events: none;
}
.shelf-entry-media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(241,235,224,.06) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(20,19,18,.018) 0 1px,
      transparent 1px 5px
    ),
    radial-gradient(circle at 20% 18%, rgba(241,235,224,.14), transparent 34%),
    linear-gradient(180deg, transparent 58%, rgba(20,19,18,.18));
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.shelf-entry-media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.38) brightness(1.02);
  mix-blend-mode: multiply;
  opacity: .80;
  transform: scale(1.012);
}
.shelf-entry-media-credit {
  position: absolute;
  z-index: 4;
  left: 8px;
  bottom: 7px;
  margin: 0;
  padding: 3px 5px;
  max-width: calc(100% - 16px);
  color: rgba(241,235,224,.76);
  background: rgba(20,19,18,.48);
  font-size: .48rem;
  line-height: 1.25;
  letter-spacing: .02em;
}

.brand-home { text-decoration: none; }

.foyer-end { margin-top: 84px; }

/* ------------------------------------------------------------------ 終わり */

.shelf-reading {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 80px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--hall-line);
}
.shelf-reading h2 {
  margin: 0 0 14px;
  color: var(--chalk-dim);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .08em;
}
.shelf-reading-links { margin: 0; padding: 0; list-style: none; }
.shelf-reading-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 12px 0;
  color: var(--chalk);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.7;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.shelf-reading-from {
  display: block;
  color: var(--chalk-dim);
  font-family: var(--sans);
  font-size: .8125rem;
}

.end-plate {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 108px auto 0;
  padding: 44px 0 0;
  border-top: 1px solid var(--hall-line);
}
.end-plate h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4.4vw, 2.625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.03em;
  /* 390px で「3つで終わりで / す。」のように語の途中で折れるのを避ける。
     実際の折返し位置は index.html の .end-phrase（nowrap）と <wbr> が決める。
     word-break: auto-phrase は Chromium 系だけの progressive enhancement で、
     Safari の正しさはこれに依存していない。 */
  line-break: strict;
  overflow-wrap: normal;
  word-break: auto-phrase;
}
/* 文節ひとかたまり。keep-all が文節内の暗黙の改行機会を消すので、通常は
   <wbr>（と読点の後）でしか折返せない。Safari も keep-all は解釈する。
   nowrap ではなく keep-all にしているのは、200% zoom のように文節そのものが
   1行に収まらない場合に横スクロールを出さないため。その最終手段としてだけ
   overflow-wrap: break-word が働く。 */
.end-phrase {
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 終わったあとの出口は1つだけ。次回予告でも推薦でもない。 */
.end-exit { margin: 26px 0 0; }
.other-shelves {
  display: inline-block;
  min-height: 44px;
  padding: 11px 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: .16em;
  color: var(--chalk);
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}
.lost-exit { width: min(calc(100% - var(--gutter) * 2), var(--page)); margin: 20px auto 0; }

.end-plate p:last-child {
  margin: 18px 0 0;
  max-width: 32em;
  color: var(--chalk-dim);
  font-size: 0.9375rem;
  line-height: 1.9;
}

.site-footer {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto;
  padding: 68px 0 56px;
}
.site-footer p {
  margin: 0;
  max-width: 44em;
  color: var(--chalk-dim);
  font-size: 0.8125rem;
  line-height: 1.9;
}

.noscript-note {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--hall-line);
  color: var(--chalk-dim);
  font-size: 0.9375rem;
  line-height: 1.8;
}

/* ------------------------------------------------------------------ 刷り物 */

.detail-dialog {
  width: 100%;
  max-width: 100%;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  /* generic な 18px bottom-sheet に見せない。展示室から紙面が立ち上がる。
     821px 以上では下の大画面ブロックが radius / max-height とも上書きする。 */
  border-radius: 4px 4px 0 0;
  background: var(--bone);
  color: var(--ink);
  max-height: 96vh;
  max-height: 96dvh;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 -30px 80px rgba(0,0,0,.6);
}
.detail-dialog::backdrop { background: rgba(8, 7, 7, .82); }

.dialog-shell { position: relative; }

/* 閉じるは pill にしない。写真の上に来ても読めるよう、紙が右から
   立ち上がってくる gradient の上に置く。四角い箱には見せない。 */
.dialog-close {
  position: sticky;
  float: right;
  top: 0; right: 0; z-index: 5;
  margin: 0 0 -58px 0;
  min-height: 58px; padding: 0 22px 0 44px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to left, var(--bone) 58%, rgba(241, 235, 224, 0));
  color: var(--ink-dim);
  font: inherit;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .18em;
  cursor: pointer;
}
.dialog-close:hover { color: var(--ink); }
/* programmatic focus でも keyboard focus は残す。ただし紙面の上に大きな
   外周枠を描かず、図録の校正線のような内側の下線で示す。
   forced-colors 環境では box-shadow が無視されるため、下の高コントラスト
   ブロックで outline を戻している。 */
.dialog-close:focus-visible {
  outline: 0;
  box-shadow: inset 0 -2px 0 var(--signal-fill);
  color: var(--ink);
}

.detail-article { display: grid; }

.detail-count {
  color: var(--ink-dim);
  padding: 22px 22px 0;
}
.detail-count .plate-sep, .detail-count .plate-of { color: var(--ink-dim); }

.detail-media {
  display: flex;
  justify-content: center;
  margin: 20px 22px 0;
  background: transparent;
}
.detail-media img {
  max-height: min(46vh, 420px);
  max-height: min(46dvh, 420px);
  background: transparent;
  outline: 0;
  box-shadow: 0 20px 44px -22px rgba(26, 24, 21, .55);
}

.detail-copy { padding: 30px 22px 40px; }

.detail-hook-echo {
  margin: 0 0 14px;
  color: var(--ink-dim);
  font-size: 0.875rem;
  line-height: 1.7;
}

.detail-reveal {
  margin: 0;
  max-width: 21em;
  font-family: var(--serif);
  font-size: clamp(1.625rem, 6.6vw, 2.375rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.03em;
  color: var(--ink);
  line-break: strict;
  overflow-wrap: normal;
  word-break: auto-phrase;
}

.detail-copy .object-meta {
  margin: 24px 0 0;
  color: var(--ink-dim);
  font-size: 0.8125rem;
  letter-spacing: 0;
  line-break: strict;
}

.verified-block { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--bone-line); }
.verified-block h3 { margin: 0 0 14px; font-size: 0.8125rem; font-weight: 600; letter-spacing: .16em; color: var(--ink-dim); }
.facts-list { margin: 0; }
.fact-row { display: grid; grid-template-columns: 4.5em 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--bone-line); }
.fact-row:first-of-type { border-top: 0; padding-top: 0; }
.fact-row dt { color: var(--ink-dim); font-size: 0.8125rem; }
.fact-row dd { margin: 0; font-size: 0.9375rem; line-height: 1.75; color: var(--ink); }

.detail-actions { display: grid; margin-top: 34px; }
.official-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  border: 0;
  background: var(--signal-fill);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
}
.official-action:hover { background: var(--signal-lift); }

.rights-note { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--bone-line); display: grid; gap: 6px; }
.rights-title { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; letter-spacing: .16em; color: var(--ink-dim); }
.rights-row { display: grid; grid-template-columns: 4.5em 1fr; gap: 16px; }
.rights-key { color: var(--ink-dim); font-size: 0.8125rem; }
.rights-value { font-size: 0.8125rem; line-height: 1.7; color: var(--ink-dim); }
.rights-link { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------------------- 小さい画面 */

@media (max-width: 820px) {
  .media-frame { justify-content: center; }

  /* 背後の棚を塗り潰さない。どこから開いたのかを残す。 */
  .detail-dialog::backdrop { background: rgba(8, 7, 7, .72); }
}

/* ------------------------------------------------------------ 大きい画面 */

@media (min-width: 821px) {
  .shelf-entry {
    grid-template-columns: minmax(0, 1fr) clamp(330px, 34vw, 480px) 28px;
    grid-template-areas:
      "number media mark"
      "name   media mark"
      "tag    media mark";
    column-gap: 34px;
    align-items: center;
    min-height: 208px;
    padding: 22px 0;
  }
  .shelf-entry-media {
    margin: 0;
    align-self: stretch;
    min-height: 0;
  }
  .shelf-entry-media-frame {
    height: 100%;
    min-height: 166px;
    aspect-ratio: auto;
  }
  .shelf-mark { justify-self: end; }
}

@media (min-width: 821px) {
  :root { --page: 1200px; --gutter: 56px; }

  .site-header { padding-top: 30px; }
  .hero { padding: 44px 0 46px; }
  .hero h1 { font-size: clamp(3.25rem, 5vw, 4.25rem); }
  .hero-line { display: inline; }

  /* 棚板の高さ。全 Object の写真がこの高さの行の底に揃って立つ。
     列は等分ではなく、1点目にだけ広い枠を与える。写真の幅は列幅と
     自分の縦横比で決まるので、背の高い物・低い物・細い物がそのまま並ぶ。 */
  .object-grid {
    --shelf-h: 52vh;
    grid-template-columns: 1.24fr 1fr 1fr;
    justify-content: start;
    align-items: stretch;
    column-gap: 44px;
    row-gap: 0;
  }
  /* 列の隙間ぶんの棚板を渡して、1本の水平線に見せる。 */
  .object-grid::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: var(--shelf-h);
    height: 1px;
    background: var(--hall-line);
    pointer-events: none;
  }
  .object-card { grid-template-rows: var(--shelf-h) auto; width: auto; max-width: 100%; }
  .media-frame { align-items: flex-end; padding-bottom: 20px; }

  .card-media,
  .object-card:first-child .card-media { --plate-h: calc(var(--shelf-h) - 20px); --plate-w: 100%; }

  .card-body { max-width: 100%; }

  .object-card:first-child .object-hook { font-size: clamp(1.5rem, 1.95vw, 1.875rem); }
  .object-card:nth-child(n+2) .object-hook { font-size: clamp(1.3125rem, 1.7vw, 1.5rem); }

  .end-plate { margin-top: 132px; }

  /* 詳細は中央の generic modal にしない。写真と刷り物の見開きにする。 */
  .detail-dialog {
    width: min(1140px, calc(100% - 64px));
    max-width: min(1140px, calc(100% - 64px));
    margin: auto;
    border-radius: 4px;
    max-height: min(88vh, 860px);
    max-height: min(88dvh, 860px);
    box-shadow: 0 40px 120px rgba(0,0,0,.62);
  }
  .detail-article {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .detail-count {
    grid-column: 1; grid-row: 1;
    padding: 44px 0 0 44px;
  }
  .detail-media {
    grid-column: 1; grid-row: 2;
    align-self: start;
    justify-content: center;
    margin: 20px 24px 48px 44px;
  }
  .detail-media img { max-height: min(58vh, 520px); max-height: min(58dvh, 520px); }
  .detail-copy {
    grid-column: 2; grid-row: 1 / span 2;
    padding: 40px 48px 48px 44px;
  }
  .detail-reveal { font-size: clamp(1.875rem, 2.5vw, 2.5rem); }
  .detail-actions { margin-top: 38px; }
}

/* 低背の desktop（1024x768 など）でも、1点目の写真・Hook・ひらくが
   スクロールなしで成立するよう、足りない高さは標題から回収する。 */
@media (min-width: 821px) and (max-height: 820px) {
  .hero { padding: 24px 0 26px; }
  .hero h1 { font-size: clamp(2.5rem, 3.6vw, 3.25rem); }
  .object-grid { --shelf-h: 48vh; }
}

@media (min-width: 1200px) {
  .detail-copy { padding: 52px 60px 56px 52px; }
  .detail-count { padding: 52px 0 0 56px; }
  .detail-media { margin: 24px 24px 56px 56px; }
}

@media (max-width: 430px) {
  :root { --gutter: 18px; }
  .hero { padding: 20px 0 20px; }
  .object-grid { gap: 64px; }
  .card-media { --plate-h: 46vh; }
  .object-card:first-child .card-media { --plate-h: 51vh; }
  .detail-copy { padding: 26px 18px 36px; }
  .detail-count { padding: 20px 18px 0; }
  .detail-media { margin: 16px 18px 0; }
  .fact-row, .rights-row { grid-template-columns: 4em 1fr; gap: 12px; }
}

/* --------------------------------------------------------------- 手ざわり */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .media-frame img,
  .open-mark,
  .open-button { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }

  .object-card:hover .media-frame img {
    transform: translateY(-4px);
    box-shadow: 0 44px 78px -24px rgba(0,0,0,.9);
  }
  .object-card:hover .open-mark { transform: translateX(5px); }
  .object-card:hover .open-button { border-top-color: var(--chalk); }
  .object-card:active .media-frame img { transform: translateY(-1px) scale(.995); }

  .detail-dialog[open] { animation: sheet-rise 190ms cubic-bezier(.2,.7,.3,1); }
  @keyframes sheet-rise {
    from { transform: translateY(26px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* touch 端末では :hover が tap 後に貼り付くことがある。desktop の hover
   choreography を状態として残さない。押した手ざわりは既存の :active だけ。
   hover 演出自体が prefers-reduced-motion: no-preference の中にしか無いので、
   打ち消しも同じ条件に合わせる。 */
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .object-card:hover .media-frame img {
    transform: none;
    box-shadow: 0 26px 56px -22px rgba(0,0,0,.85);
  }
  .object-card:hover .open-mark { transform: none; }
  .object-card:hover .open-button { border-top-color: var(--hall-edge); }
}

/* -------------------------------------------------- ハイコントラスト環境 */

@media (forced-colors: active) {
  .open-button, .official-action, .dialog-close {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
    background: ButtonFace; color: ButtonText;
  }
  .media-frame img, .detail-media img { border: 1px solid CanvasText; }
  .detail-dialog { border: 1px solid CanvasText; }
  /* box-shadow が捨てられる環境なので、閉じるの focus は outline で示す。 */
  .dialog-close:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}


/* ====================================================== City entrance V3 */
/* Homeは文字だけ。街を開いた後にだけ、その街の風景を一枚見せる。 */
.shelf-portrait { display: none; margin: 0; min-width: 0; }
.shelf-portrait.has-media { display: block; }
.shelf-portrait-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(236, 231, 222, .18);
  background: var(--hall-raised);
}
.shelf-portrait-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,18,.02), rgba(20,19,18,.3));
  pointer-events: none;
}
.shelf-portrait img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.66) brightness(.66) contrast(1.16);
  transform: scale(1.01);
}
.shelf-portrait-credit {
  margin: 9px 0 0;
  color: var(--chalk-dim);
  font-size: .6875rem;
  line-height: 1.55;
}
.shelf-portrait-credit a { color: inherit; text-underline-offset: 3px; }

/* Object一覧は全件活字札。写真は詳細を開いた後にだけ出る。 */
.list-plate .plate-inner { min-height: 230px; }
.list-plate .plate-word { font-size: clamp(1.75rem, 6.8vw, 2.75rem); }

/* 4街の有限な終わりと、Cross-mediaの寄り道を同じ終端面に置く。 */
.foyer-closing {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 84px auto 0;
  display: grid;
  gap: 48px;
}
.foyer-closing .foyer-end {
  width: auto;
  margin: 0;
  padding-top: 44px;
  border-top: 1px solid var(--hall-line);
}
.weekly-detour {
  padding-top: 44px;
  border-top: 1px solid var(--hall-line);
}
.detour-theme {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.03em;
}
.detour-list { margin-top: 28px; display: grid; gap: 0; }
.detour-item {
  min-width: 0;
  padding: 20px 0 22px;
  border-top: 1px solid var(--hall-line);
}
.detour-media { margin: 0 0 18px; }
.detour-media-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(236, 231, 222, .18);
  background:
    linear-gradient(180deg, rgba(241,235,224,.055), rgba(241,235,224,.02)),
    var(--hall);
}
.detour-cover .detour-media-frame { background: #0f0f10; }
.detour-cover img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.detour-media-source {
  margin: 7px 0 0;
  color: var(--chalk-dim);
  font-size: .625rem;
  line-height: 1.45;
}
.detour-media-source a { color: inherit; text-underline-offset: 3px; }
.detour-video-play {
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--chalk);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "source source"
    "label mark";
  align-content: end;
  gap: 10px 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.detour-video-source {
  grid-area: source;
  color: var(--chalk-dim);
  font-size: .6875rem;
  line-height: 1.5;
}
.detour-video-label {
  grid-area: label;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
}
.detour-video-mark {
  grid-area: mark;
  align-self: center;
  color: var(--signal);
}
.detour-video-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.detour-publisher-link {
  text-decoration: none;
  padding: 20px;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker kicker"
    "title mark";
  align-content: end;
  gap: 10px 16px;
}
.detour-publisher-kicker {
  grid-area: kicker;
  color: var(--signal);
  font-size: .6875rem;
  letter-spacing: .18em;
}
.detour-publisher-title {
  grid-area: title;
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: .06em;
}
.detour-publisher-link .detour-video-mark { grid-area: mark; }
.detour-kind {
  margin: 0 0 8px; color: var(--signal); font-size: .75rem;
  letter-spacing: .18em;
}
.detour-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.detour-creator { margin: 6px 0 0; color: var(--chalk-dim); font-size: .8125rem; }
.detour-why { margin: 12px 0 0; color: var(--chalk-dim); font-size: .875rem; line-height: 1.8; }
.detour-action { margin: 10px 0 0; }
.detour-link {
  display: inline-flex; min-height: 44px; align-items: center;
  font-family: var(--serif); font-size: .875rem; letter-spacing: .1em;
  text-decoration-color: var(--signal); text-underline-offset: 5px;
}

@media (min-width: 821px) {
  .shelf-page .shelf-hero {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(340px, .72fr);
    gap: 64px;
    align-items: end;
  }
  .shelf-portrait-frame { aspect-ratio: 16 / 9; max-height: 300px; }
  .detour-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 28px; }
  .detour-item { min-width: 0; }
  .detour-name {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    font-size: clamp(.96rem, 1.55vw, 1.2rem);
    letter-spacing: -.04em;
  }
}

@media (min-width: 1200px) {
  .foyer-closing {
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1.58fr);
    gap: 64px;
    align-items: start;
  }
}

@media (min-width: 1440px) {
  .site-footer {
    width: min(calc(100% - var(--gutter) * 2), 1540px);
  }
  .site-footer p {
    max-width: none;
    white-space: nowrap;
    font-size: .6875rem;
    line-height: 1.6;
  }
}

@media (max-width: 820px) {
  .shelf-page .shelf-hero { display: grid; gap: 26px; }
  .shelf-portrait-frame { aspect-ratio: 16 / 10; }
  .foyer-closing { gap: 24px; }
  .weekly-detour { padding-top: 34px; }
}

/* ================================================= Editorial city panels + official brand */
@media (max-width: 820px) {
  .shelf-entry {
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-areas:
      "number mark"
      "name   mark"
      "tag    mark"
      "media  media";
  }
  .shelf-entry-media { margin-top: 16px; }
  .shelf-entry-media-frame { aspect-ratio: 16 / 8; }
  .shelf-entry-media-credit { font-size: .44rem; }
}
@media (min-width: 1000px) {
  .site-explainer {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(.8125rem, 1.05vw, .9375rem);
  }
}
@media (max-width: 520px) {
  .brand-lockup { gap: 8px; }
  .brand-symbol { width: 32px; }
  .brand-name { font-size: .9375rem; }
}

/* ================================================= Founder-supplied AI city illustrations */
/* Home入口だけAIイラストをそのまま使う。街ページのheroMedia実写真には影響させない。 */
.shelf-entry-media.is-entry-illustration .shelf-entry-media-frame {
  aspect-ratio: 1942 / 809;
  height: auto;
  min-height: 0;
  background: #f3eadb;
}
.shelf-entry-media.is-entry-illustration .shelf-entry-media-frame::before,
.shelf-entry-media.is-entry-illustration .shelf-entry-media-frame::after {
  display: none;
}
.shelf-entry-media.is-entry-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  transform: none;
}
.shelf-entry-media.is-entry-illustration .shelf-entry-media-credit {
  display: none;
}
@media (min-width: 821px) {
  .shelf-entry-media.is-entry-illustration {
    align-self: center;
  }
  .shelf-entry-media.is-entry-illustration .shelf-entry-media-frame {
    aspect-ratio: 1942 / 809;
    height: auto;
    min-height: 0;
  }
}
@media (max-width: 820px) {
  .shelf-entry-media.is-entry-illustration .shelf-entry-media-frame {
    aspect-ratio: 1942 / 809;
  }
}

/* ================================================= Official 2026-09-01 lockup */
@media (max-width: 520px) {
  .site-header { gap: 10px; }
  .brand-lockup-image { width: min(180px, 58vw); }
  .pilot-label {
    font-size: .625rem;
    letter-spacing: .1em;
    white-space: nowrap;
  }
}

/* ================================================= Mobile editorial rhythm — 2026-09-01 */
@media (min-width: 821px) {
  .foyer-end .end-phrase {
    display: inline-block;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

@media (max-width: 820px) {
  .site-explainer {
    max-width: none;
    font-size: clamp(.8125rem, 3.6vw, .875rem);
    line-height: 1.85;
  }
  /* 各文節は自分の行から始める（display: block）。文節の中では keep-all なので、
     幅が足りるかぎり折返しは起きない。nowrap + overflow-wrap: normal にしていた
     ときは、文節が 320 / 390 の幅に収まらないと（26 字 × 13-14px > 284 / 354px）
     文が viewport の外へはみ出して横スクロールになり、末尾が読めなかった
     （棚 / 候補 page の m320・m390・200% 拡大・forced-colors で実測）。
     最終手段の折返しだけを許す：文節境界（・ 読点）で先に折れ、それでも
     収まらない 200% 拡大では anywhere が働く。幅が足りる 430 以上では
     以前と同じ 1 文節 1 行のまま。 */
  .site-explainer .explainer-line {
    display: block;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .site-explainer wbr { display: none; }

  .weekly-video-plate-title .weekly-video-plate-line {
    display: block;
    white-space: nowrap;
    word-break: keep-all;
  }

  .shelf-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "number"
      "name"
      "media"
      "tag"
      "mark";
    row-gap: 8px;
    column-gap: 0;
    align-items: start;
  }
  .shelf-entry-media {
    margin: 12px 0 8px;
    width: 100%;
  }
  .shelf-tagline { margin-top: 4px; }
  .shelf-mark {
    justify-self: end;
    align-self: end;
    margin-top: 2px;
    padding: 2px 0 0;
  }

  .shelf-entry-media.is-entry-illustration .shelf-entry-media-frame {
    border: 0;
    background: transparent;
  }
  .shelf-entry-media.is-entry-illustration .shelf-entry-media-frame::after {
    display: block;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(to right,
        rgba(20,19,18,.30) 0%,
        transparent 5%,
        transparent 95%,
        rgba(20,19,18,.30) 100%),
      linear-gradient(to bottom,
        rgba(20,19,18,.18) 0%,
        transparent 7%,
        transparent 91%,
        rgba(20,19,18,.30) 100%);
  }
  .shelf-entry-media.is-entry-illustration img {
    filter: saturate(.94) brightness(.97);
  }
}

/* ================================================= MENU + weekly feature */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.menu-trigger {
  appearance: none;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--hall-edge);
  border-radius: 0;
  background: transparent;
  color: var(--chalk);
  padding: 7px 0 5px;
  font: inherit;
  font-family: var(--serif);
  font-size: .8125rem;
  letter-spacing: .18em;
  cursor: pointer;
  touch-action: manipulation;
}
.site-menu {
  width: min(440px, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--hall-line);
  background: var(--hall);
  color: var(--chalk);
}
.site-menu::backdrop { background: rgba(8, 7, 6, .72); }
.site-menu-shell {
  min-height: 100%;
  padding: max(28px, env(safe-area-inset-top)) 28px max(32px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.site-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.site-menu-head .eyebrow { margin: 0; }
.site-menu-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--chalk-dim);
  font: inherit;
  padding: 8px 0;
  cursor: pointer;
}
.site-menu-title {
  margin: 56px 0 30px;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.04em;
}
.site-menu-nav {
  display: grid;
  border-top: 1px solid var(--hall-edge);
}
.site-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
  border-bottom: 1px solid var(--hall-line);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.45rem;
}
.site-menu-link[aria-current="page"] { color: var(--signal); }
.site-menu-home {
  margin: auto 0 0;
  padding-top: 40px;
}
.site-menu-home a {
  color: var(--chalk-dim);
  text-underline-offset: 5px;
}

.weekly-feature {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto 68px;
  padding-top: 18px;
  border-top: 1px solid var(--hall-edge);
}
.weekly-feature[hidden] { display: none !important; }
.weekly-feature .eyebrow { margin-bottom: 24px; }
.weekly-feature-card {
  display: grid;
  grid-template-columns: minmax(180px, .52fr) minmax(0, 1.48fr);
  grid-template-areas:
    "meta title"
    "meta why"
    "meta action";
  gap: 14px 42px;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--hall-line);
}
/* Event identity is readable before the editorial background. */
.weekly-feature-kind, .weekly-feature-status { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.6; color: var(--chalk); }
.weekly-feature-status { font-weight: 600; }
.weekly-feature-hours { margin: .5rem 0; font-size: .875rem; line-height: 1.6; color: var(--chalk-dim); }


.weekly-feature-meta { grid-area: meta; }
.weekly-feature-date,
.weekly-feature-venue {
  margin: 0;
  color: var(--chalk-dim);
  line-height: 1.7;
}
.weekly-feature-date {
  color: var(--signal);
  font-family: var(--serif);
}
.weekly-feature-title {
  grid-area: title;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.weekly-feature-why {
  grid-area: why;
  margin: 0;
  max-width: 39em;
  color: var(--chalk-dim);
  line-height: 1.9;
}
.weekly-feature-action {
  grid-area: action;
  margin: 6px 0 0;
}
.weekly-feature-action a {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  color: var(--chalk);
  font-family: var(--serif);
  text-decoration-color: var(--signal);
  text-underline-offset: 7px;
}

@media (max-width: 820px) {
  .header-actions { gap: 10px; }
  .site-header .header-actions .pilot-label { display: none; }
  .menu-trigger {
    font-size: .75rem;
    letter-spacing: .14em;
  }
  .site-menu {
    width: 100%;
    border-left: 0;
  }
  .site-menu-shell {
    padding-left: 22px;
    padding-right: 22px;
  }
  .weekly-feature {
    margin-bottom: 54px;
    padding-top: 16px;
  }
  .weekly-feature .eyebrow { margin-bottom: 18px; }
  .weekly-feature-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "title"
      "why"
      "action";
    gap: 14px;
    padding-bottom: 26px;
  }
  .weekly-feature-title {
    font-size: clamp(1.8rem, 8.7vw, 2.45rem);
  }
  .weekly-feature-why {
    font-size: .9375rem;
    line-height: 1.85;
  }
  .weekly-feature-action a { min-height: 44px; }
}

/* ================================================= Final UI pass 2026-09-01 */
.site-header > .menu-trigger { margin-left: auto; }

@media (min-width: 821px) {
  .object-grid { align-items: stretch; }
  .object-card .list-plate {
    height: clamp(320px, 27vw, 365px);
    align-items: stretch;
  }
  .object-card .list-plate .plate-inner {
    height: 100%;
    min-height: 0;
    align-content: center;
  }
}

.site-menu-section {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--hall-line);
}
.site-menu-section .eyebrow { margin-bottom: 14px; }
.site-menu-secondary { display: grid; }
.site-menu-secondary-link {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--hall-line);
  color: var(--chalk);
  font-family: var(--serif);
  text-decoration: none;
}
.site-menu-favorites { display: grid; }
.site-menu-favorites-empty { margin: 0; color: var(--chalk-dim); font-size: .875rem; }
.site-menu-favorite-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "town mark" "title mark";
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hall-line);
  text-decoration: none;
}
.site-menu-favorite-town { grid-area: town; color: var(--signal); font-size: .75rem; letter-spacing: .08em; }
.site-menu-favorite-title { grid-area: title; min-width: 0; font-family: var(--serif); line-height: 1.5; }
.site-menu-favorite-mark { grid-area: mark; align-self: center; color: var(--signal); }
.site-menu-bottom { margin-top: auto; padding-top: 36px; display: grid; gap: 16px; }
.site-menu-data-link, .site-menu-entry-link { width: fit-content; color: var(--chalk-dim); text-underline-offset: 5px; }
.site-menu-data-link { color: var(--chalk); }

.weekly-feature-title {
  font-size: clamp(1.75rem, 3.25vw, 2.75rem);
  word-break: keep-all;
  overflow-wrap: normal;
}
.weekly-feature-title .jp-phrase { word-break: keep-all; overflow-wrap: normal; }
.weekly-feature-actions {
  grid-area: action;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 8px;
}
.weekly-feature-official,
.weekly-feature-secondary {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--signal);
  border-radius: 0;
  background: transparent;
  color: var(--chalk);
  min-height: 44px;
  padding: 7px 0 5px;
  font: inherit;
  font-family: var(--serif);
  text-decoration: none;
  cursor: pointer;
}
.weekly-feature-secondary[aria-pressed="true"] { color: var(--signal); }

.detour-theme-copy .jp-phrase,
.detour-theme .jp-phrase { word-break: keep-all; overflow-wrap: normal; }
.detour-destinations { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; }
.detour-destination {
  color: var(--chalk);
  font-family: var(--serif);
  font-size: .95rem;
  text-underline-offset: 6px;
  text-decoration-color: var(--signal);
}
.affiliate-disclosure { margin: 0; color: var(--chalk-dim); font-size: .75rem; line-height: 1.7; }

@media (max-width: 820px) {
  .weekly-feature-title { font-size: clamp(1.55rem, 6.4vw, 2.1rem); line-height: 1.32; }
  .weekly-feature-actions { display: grid; justify-items: start; gap: 6px; }
  .weekly-feature-official, .weekly-feature-secondary { min-height: 44px; }
  .detour-theme { font-size: clamp(1.9rem, 8.5vw, 2.55rem); line-height: 1.32; }
  .detour-theme .jp-phrase { word-break: keep-all; overflow-wrap: normal; }
  .detour-destinations { display: grid; justify-items: start; gap: 4px; }
  .site-menu-section { margin-top: 28px; }
}

/* ================================================= Category town + archive */
.category-town-index {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 0 auto 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--hall-line);
}
.category-town-link {
  display: inline-block;
  min-height: 44px;
  padding: 11px 0 8px;
  color: var(--chalk-dim);
  font-family: var(--serif);
  font-size: .875rem;
  letter-spacing: .12em;
  text-decoration: none;
}
.category-town-link.is-selected {
  color: var(--chalk);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-underline-offset: 6px;
}
.category-archive {
  width: min(calc(100% - var(--gutter) * 2), var(--page));
  margin: 42px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hall-edge);
}
.category-archive[hidden] { display: none !important; }
.category-archive .eyebrow { margin-bottom: 8px; }
.category-archive-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--chalk-dim);
}
.archive-result-row { opacity: .82; }
.archive-status {
  margin-left: 10px;
  color: var(--signal);
  font-size: .65rem;
  letter-spacing: .14em;
}
.footer-brand {
  display: block;
  width: fit-content;
  margin: 44px auto 0;
  text-decoration: none;
}
.footer-brand-image {
  display: block;
  width: clamp(230px, 27vw, 360px);
  max-width: min(100%, 360px);
  height: auto;
  opacity: .92;
}
@media (max-width: 820px) {
  .category-town-index {
    gap: 4px 18px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
  .category-town-link {
    font-size: .8125rem;
    letter-spacing: .1em;
  }
  .footer-brand { margin-top: 38px; }
  .footer-brand-image { width: min(72vw, 280px); }
}

/* ================================================= Visible freshness */
.weekly-feature-verified,
.detail-freshness,
.archive-verified {
  margin: 6px 0 0;
  color: var(--chalk-dim);
  font-size: .72rem;
  line-height: 1.65;
  letter-spacing: .08em;
}
.detail-freshness {
  color: var(--ink-dim);
  margin-top: 8px;
}
.archive-verified {
  margin-top: 10px;
}
@media (max-width: 820px) {
  .weekly-feature-verified,
  .detail-freshness,
  .archive-verified {
    font-size: .7rem;
    letter-spacing: .06em;
  }
}

/* ====================================================== 写真・出典 (credits) */
/* HOME 本文に長い attribution を常時載せない代わりに置く、静かな一覧。
   data.html と同じ .suggest-page の型の上に、asset ごとの記録だけを並べる。 */
.credits-lead {
  margin: 0;
  color: var(--chalk-dim);
  font-size: 0.875rem;
  line-height: 1.9;
}
.credits-list {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}
.credits-entry {
  padding-top: 22px;
  border-top: 1px solid var(--hall-line);
}
.credits-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--chalk);
}
.credits-meta {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.8;
}
.credits-meta dt {
  margin: 0;
  color: var(--chalk-dim);
  letter-spacing: .06em;
}
.credits-meta dd {
  margin: 0;
  min-width: 0;
  color: var(--chalk);
  overflow-wrap: anywhere;
}
.credits-meta a {
  color: var(--chalk);
  text-underline-offset: 4px;
}
@media (max-width: 480px) {
  .credits-meta { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .credits-meta dd { margin-bottom: 8px; }
}


.city-culture-paths{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 32px}.city-culture-paths a{padding:14px 18px;border:1px solid #887956;border-radius:4px;min-height:44px;font-size:15px;text-decoration:none;background:#211f1a;color:#fff8e6}.city-culture-paths[hidden]{display:none}

.shelf-page{--hall:#f8f7f2;--hall-raised:#eeeee5;--hall-line:#d6d8ce;--hall-edge:#7f897b;--chalk:#292d26;--chalk-dim:#596252;background:#f8f7f2;color:var(--chalk);color-scheme:light}
.shelf-page :is(.brand-lockup-image,.footer-brand-image){filter:brightness(0)}
.shelf-page .shelf-portrait img{filter:none;transform:none}
.shelf-page .shelf-portrait-frame::after{display:none}
.shelf-page .media-plate .plate-inner{box-shadow:none;background:#eeeee5}
.shelf-page .site-menu{background:#f8f7f2;color:#292d26}
.shelf-page main>.city-weather-wrap,.shelf-page .city-culture-paths{width:min(calc(100% - var(--gutter) * 2),var(--page));margin-inline:auto}
.shelf-page .city-culture-paths a{background:#edf0e8;color:#344231;border-color:#bbc3b2}

/* ==========================================================================
   HOME — CONTENT-LED IMMERSIVE TIME / VISUAL_CANONICAL 853px

   Founder/HQ 承認済み HOME 画像を唯一の正とした忠実実装。
   Designer ではなく Frontend Implementer として書く。再解釈・整理・
   modernize をしない。値は canonical から測ったものだけを置く。

   材質は2つだけ。deep night と warm paper。
   3つ目の材質・glass・gradient blob・floating card は足さない。

   すべて .home-canonical 配下。shelf.html / suggest.html / data.html には
   一切かからない。
   ========================================================================== */

.home-canonical {
  --hc-night:        #0e0f12;
  --hc-panel:        #131a24;
  --hc-paper:        #f2ead8;
  --hc-ink:          #23201b;
  --hc-ink-dim:      #6b6459;
  --hc-ink-faint:    #4a443c;
  --hc-ivory:        #f2ece0;
  --hc-ivory-dim:    #a49c90;
  --hc-gold:         #c2a068;
  --hc-gold-solid:   #c9a063;

  --hc-pad: 32px;

  margin: 0;
  padding: 0;
  background: var(--hc-night);
  color: var(--hc-ink);
  font-family: var(--sans);
}

.home-canonical #main { display: block; }

/* -------------------------------------------------------------- 1. HERO */

.hc-hero {
  position: relative;
  height: 617px;
  overflow: hidden;
  isolation: isolate;
  background: var(--hc-night);
  color: var(--hc-ivory);
}

.hc-hero-media { position: absolute; inset: 0; z-index: 0; }
.hc-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  /* 権利確認済みの実写を canonical の夜の階調へ寄せる。CITY_MEDIA_ATTRIBUTION.md
     に記した CSS treatment のみ。原本ファイルは書き換えない。 */
  filter: brightness(.74) contrast(1.16) saturate(.78);
}
/* 読ませるための遮光。装飾の glow ではない。 */
.hc-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,9,12,.80) 0%, rgba(8,9,12,.46) 38%, rgba(8,9,12,.10) 64%, rgba(8,9,12,.34) 100%),
    linear-gradient(180deg, rgba(8,9,12,.62) 0%, rgba(8,9,12,.14) 28%, rgba(8,9,12,.10) 62%, rgba(8,9,12,.68) 100%);
}

.hc-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 30px 0 28px;
}
.hc-brand { margin: 0; }
.hc-brand-link {
  display: inline-block;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .055em;
  color: #ecdcb9;
  text-decoration: none;
}
.hc-menu-trigger {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 15px 0 0;
  margin: 0;
  width: 32px;
  cursor: pointer;
  color: var(--hc-ivory);
  touch-action: manipulation;
}
.hc-menu-bars,
.hc-menu-bars::before,
.hc-menu-bars::after {
  display: block;
  width: 32px;
  height: 1.6px;
  background: currentColor;
}
.hc-menu-bars { position: relative; }
.hc-menu-bars::before,
.hc-menu-bars::after { content: ""; position: absolute; left: 0; }
.hc-menu-bars::before { top: -8px; }
.hc-menu-bars::after  { top: 8px; }

.hc-hero-body {
  position: absolute;
  z-index: 2;
  left: var(--hc-pad);
  top: 147px;
}
.hc-hero-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 61px;
  font-weight: 600;
  line-height: 74px;
  letter-spacing: .01em;
  color: #f7f3ec;
}
.hc-hero-line { display: block; }

.hc-hero-sub {
  margin: 25px 0 0;
  max-width: 20em;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: .03em;
  color: #cfc7b8;
}
.hc-hero-phrase { display: inline-block; max-width: 100%; }

.hc-hero-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 244px;
  max-width: 100%;
  height: 52px;
  margin: 12px 0 0;
  padding: 0 16px;
  border: 1px solid rgba(194,160,104,.85);
  border-radius: 4px;
  background: transparent;
  text-decoration: none;
}
.hc-hero-cta-label {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .06em;
  color: #f0e7d6;
}
.hc-hero-cta-mark { font-size: 15px; color: var(--hc-gold); }



.hc-hero-scroll {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(242,236,224,.72);
}
.hc-hero-scroll-mark {
  display: block;
  width: 11px;
  height: 11px;
  border-left: 1.3px solid rgba(242,236,224,.72);
  border-bottom: 1.3px solid rgba(242,236,224,.72);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------- warm paper */

.hc-sheet {
  position: relative;
  z-index: 1;
  background: var(--hc-paper);
  border-radius: 24px 24px 0 0;
  color: var(--hc-ink);
}

.hc-section { padding-inline: var(--hc-pad); }

/* 見出し / 副文 / すべて見る の3列。副文の左位置は canonical で固定。 */
.hc-section-head {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0;
}
.hc-section-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--hc-ink);
}
.hc-section-note {
  margin: 0;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--hc-ink-dim);
}
.hc-section-more {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--hc-ink-faint);
}

/* ------------------------------------------------------ 2. 街から入る */

.hc-cities { padding-top: 38px; }
.hc-cities .hc-section-head { margin-bottom: 20px; }

.hc-city-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* .shelf-entry は GA4 の v3_shelf_open が closest() で拾う class。
   ここで玄関一覧用の旧 geometry を完全に打ち消してから card を組む。 */
.home-canonical .hc-city {
  position: relative;
  display: block;
  grid-template-columns: none;
  grid-template-areas: none;
  align-items: stretch;
  gap: 0;
  height: 311px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--hc-ivory);
  background: #14161b;
}
.home-canonical .hc-city:last-child { border-bottom: 0; }

.hc-city-media { position: absolute; inset: 0; z-index: 0; display: block; }
.hc-city-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: brightness(.48) contrast(1.2) saturate(.6);
}
.hc-city-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,13,.30) 0%, rgba(10,10,13,.46) 38%, rgba(10,10,13,.90) 100%);
}

.hc-city-body {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  bottom: 18px;
  display: block;
}
.hc-city-name {
  display: block;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  color: #f6f2ea;
}
.hc-city-q {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 20px;
  letter-spacing: .01em;
  color: #c8c1b4;
}
.hc-city-q-line { display: block; }
.hc-city-mark {
  display: block;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1;
  color: rgba(230,222,208,.82);
}

/* ---------------------------------------------------- 3. 作品から入る */

.hc-works { padding-top: 27px; }
.hc-works .hc-section-head { margin-bottom: 29px; }

.hc-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hc-work {
  position: relative;
  display: block;
  height: 143px;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  color: var(--hc-ivory);
  background: #14161b;
  text-decoration: none;
}
/* ASSET_HOLD。権利確認済みの図版が入るまで、geometry を保ったまま
   card の地の色だけで立てる。illustration / blob / icon-only へ置換しない。 */
.hc-work.is-asset-hold {
  background: linear-gradient(180deg, #191c22 0%, #101318 100%);
}
/* 作品 card の image plane — city card と同じ材質（写真 + 暗い scrim）。
   図版が入る card だけが持つ。foot row（icon / label / →）は上に載る。 */
.hc-work-media { position: absolute; inset: 0; z-index: 0; display: block; }
.hc-work-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(.58) contrast(1.16) saturate(.66);
}
.hc-work-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,13,.16) 0%, rgba(10,10,13,.34) 46%, rgba(10,10,13,.86) 100%);
}
/* 映画の原本は暗い室内（リールと映写機）なので、共通の減光だと被写体が沈む。
   この card だけ減光を弱め、リールが読める明度にする（scrim は共通のまま）。 */
.hc-work[data-work="film"] .hc-work-media img { object-position: 50% 36%; filter: brightness(1.38) contrast(1.08) saturate(.5); }
.hc-work[data-work="video"] .hc-work-media img { object-position: 40% 50%; }
.hc-work-foot {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hc-work-icon {
  display: flex;
  align-items: center;
  color: rgba(240,236,228,.9);
}
.hc-work-label {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .06em;
  color: #f4f0e8;
}
.hc-work-mark {
  margin-left: auto;
  font-size: 15px;
  color: rgba(230,222,208,.8);
}

/* --------------------------------------------- 4. いま辿れるスレッド */

.hc-thread-section { padding: 28px 25px 25px; }

.hc-thread {
  border-radius: 12px;
  background: var(--hc-panel);
  color: var(--hc-ivory);
  padding: 20px 21px 27px;
}
.hc-thread-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.hc-thread-heading {
  margin: 0;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
  color: #ede6da;
}
.hc-thread-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .02em;
  color: #8e8880;
}

.hc-thread-body {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  column-gap: 22px;
  margin-top: 23px;
}
.hc-thread-media {
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(194,160,104,.38);
}
.hc-thread-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  filter: brightness(.94) contrast(1.1) saturate(.72);
}

.hc-thread-copy { padding-top: 7px; }
.hc-thread-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 108px;
  height: 22px;
  margin: 0;
  border-radius: 3px;
  background: var(--hc-gold-solid);
  color: #1a1710;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
}
.hc-thread-title {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  color: #f0e9dc;
}
.hc-thread-sub {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #9c958b;
}

.hc-thread-chain {
  display: flex;
  align-items: center;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}
.hc-node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(200,165,105,.42);
  border-radius: 999px;
  text-align: center;
}
.hc-node + .hc-node { margin-left: 26px; }
.hc-node + .hc-node::before {
  content: "→";
  position: absolute;
  left: -21px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
  color: #7a7266;
}
.hc-node-kind { font-size: 10.5px; line-height: 14px; color: #a99b84; }
.hc-node-name { font-size: 10.5px; line-height: 14px; color: #e4dcce; }

.hc-thread-read {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
  height: 44px;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .04em;
  color: #d8cdbb;
  text-decoration: none;
}
.hc-thread-read-mark { display: block; width: 26px; text-align: right; }

/* -------------------------------------------------------- 5. 現実へ出る */

.hc-reality {
  display: grid;
  grid-template-columns: 301px minmax(0, 1fr);
  padding: 21px 8px 38px var(--hc-pad);
  align-items: start;
}
.hc-reality-copy { min-width: 0; }
.hc-reality-lead {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 26px;
  letter-spacing: .02em;
  color: #5c554b;
}
.hc-reality-line { display: block; white-space: nowrap; }

.hc-reality-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 212px;
  height: 48px;
  margin: 32px 0 0;
  padding: 0 18px 0 34px;
  border-radius: 3px;
  background: #1e1c19;
}
.hc-reality-cta-label {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .06em;
  color: #f0e9dc;
}
.hc-reality-cta-mark { display: flex; align-items: center; color: #efe6d4; }

.hc-reality-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 7px;
}
.hc-reality-shot {
  margin: 0;
  height: 186px;
  border-radius: 4px;
  overflow: hidden;
  background: #14161b;
}
.hc-reality-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(.6) contrast(1.16) saturate(.68);
}
/* FOUNDER PREVIEW FIX UNIT D: 実際の場所へ — 3 つの行き先 card。写真の上に名前と公式 action を重ね、
   strip の geometry（写真の高さ・列・gap）は変えない。.official-action の共通 button 見た目は HOME では使わない。 */
.home-canonical .hc-reality-card,
.home-canonical .hc-reality-card.official-action,
.home-canonical .hc-reality-card.official-action:hover {
  position: relative;
  display: block;
  min-width: 0;
  width: auto;
  min-height: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #14161b;
  color: #f0e9dc;
  font: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
}
.hc-reality-card .hc-reality-shot { border-radius: 0; }
.hc-reality-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 28px 12px 11px;
  background: linear-gradient(180deg, rgba(20, 22, 27, 0) 0%, rgba(20, 22, 27, .82) 100%);
}
.hc-reality-name {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: .04em;
  color: #f4eee2;
}
.hc-reality-action {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 18px;
  letter-spacing: .04em;
  color: #d9cfbd;
}

/* -------------------------------------------------------------- 手ざわり */

.home-canonical .hc-hero-cta:focus-visible,
.home-canonical .hc-reality-card:focus-visible,
.home-canonical .hc-city:focus-visible,
.home-canonical .hc-brand-link:focus-visible,
.home-canonical .hc-menu-trigger:focus-visible,
.home-canonical .hc-work:focus-visible,
.home-canonical .hc-thread-read:focus-visible {
  outline: 2px solid var(--hc-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-canonical * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .home-canonical .hc-reality-card.official-action { border: 2px solid LinkText; background: Canvas; color: LinkText; forced-color-adjust: auto; }
}

/* ---------------------------------------------- RESPONSIVE ROUND 4 ----
   853 Golden は上の default rule のまま（visual delta 0）。以下は Brief V2 §3
   の明示範囲だけに override を置き、800–899px（Golden corridor）には入らない。
     Mobile   0–767   Tablet 768–799   Desktop 900–1199   Wide 1200–
   新しい route / CTA / content / animation は持たない。 */

/* corridor 外の全域: 実 anchor / button だけ当たり判定 44px 以上。
   可視文字・bar の位置は padding と負 margin で変えない。 */
@media (max-width: 799px), (min-width: 900px) {
  .hc-brand-link { padding: 12px 8px; margin: -12px -8px; }
  .hc-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: -6px -6px 0 0;
  }
}

/* ------------------------------------------------- Mobile 0–767 */

@media (max-width: 767px) {
  .home-canonical {
    --hc-pad: clamp(20px, 6.15vw, 24px);
    /* 320→390 の一次補間（Brief §5 A の 3 幅を通る）。390 以上は次の block。 */
    --hc-hero-h: clamp(600px, calc(417.143px + 57.143vw), 660px);
    --hc-title: clamp(44px, calc(14.286vw - 1.714px), 58px);
    --hc-city-h: clamp(228px, calc(118.286px + 34.286vw), 264px);
    --hc-work-h: clamp(112px, calc(48px + 20vw), 135px);
    --hc-panel-pad: clamp(18px, calc(5.714vw - 0.286px), 22px);
  }

  /* 1. HERO — full-bleed media、title 3 行、CTA は左 gutter、aside は右 gutter、
     trace は CTA と scroll cue の間の帯に縮小（静的・同じ 4 年号）。 */
  .hc-hero { height: var(--hc-hero-h); }
  .hc-header { padding: 20px var(--hc-pad) 0; }
  .hc-hero-body { left: var(--hc-pad); right: var(--hc-pad); top: 118px; }
  .hc-hero-title { font-size: var(--hc-title); line-height: 1.2; }
  .hc-hero-sub { margin-top: 20px; }
  .hc-hero-cta { margin-top: 20px; }


  /* 2–5. warm sheet — section 間 44px、head は縦積み */
  .hc-sheet { border-radius: 20px 20px 0 0; }
  .hc-section-head { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .hc-section-note { line-height: 1.5; }
  .hc-section-more { justify-content: flex-end; }

  .hc-cities { padding-top: 40px; }
  .hc-cities .hc-section-head,
  .hc-works .hc-section-head { margin-bottom: 18px; }
  .hc-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-canonical .hc-city { height: var(--hc-city-h); }
  .hc-city-q { font-size: clamp(11px, 3.6vw, 12.5px); }

  .hc-works { padding-top: 44px; }
  .hc-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-work { height: var(--hc-work-h); }

  .hc-thread-section { padding: 44px var(--hc-pad) 0; }
  .hc-thread { padding: var(--hc-panel-pad); }
  .hc-thread-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hc-thread-body { grid-template-columns: minmax(0, 1fr); row-gap: 18px; margin-top: 20px; }
  .hc-thread-media { height: auto; aspect-ratio: 292 / 180; }
  .hc-thread-copy { padding-top: 0; }
  /* chain: DOM 5 node のまま 2 列に wrap、5 番目は 2 列 span。
     行をまたぐ connector（3→、5→）は誤った直線関係になるので出さない。 */
  .hc-thread-chain {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
    row-gap: 10px;
  }
  .hc-node + .hc-node { margin-left: 0; }
  .hc-node + .hc-node::before { display: none; }
  .hc-node:nth-child(2)::before,
  .hc-node:nth-child(4)::before { display: block; }
  .hc-node:nth-child(5) { grid-column: 1 / -1; }
  .hc-thread-read { margin-top: -7px; }

  .hc-reality { grid-template-columns: minmax(0, 1fr); padding: 44px var(--hc-pad) 44px; }
  /* 本文は列幅に収まらないときだけ折る。読点の後でしか折らない（keep-all）。 */
  .hc-reality-line { white-space: normal; word-break: keep-all; }
  .hc-reality-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .hc-reality-card:first-child { grid-column: 1 / -1; }
}

/* 390→430 の一次補間（Brief §5 A の値を通り、430 以上は 430 の値で固定） */
@media (min-width: 390px) and (max-width: 767px) {
  .home-canonical {
    --hc-hero-h: clamp(640px, calc(445px + 50vw), 660px);
    --hc-title: clamp(54px, calc(15px + 10vw), 58px);
    --hc-city-h: clamp(252px, calc(135px + 30vw), 264px);
    --hc-work-h: clamp(126px, calc(38.25px + 22.5vw), 135px);
    --hc-panel-pad: 22px;
  }
}

/* ------------------------------------------------ Tablet 768–799 */

@media (min-width: 768px) and (max-width: 799px) {
  /* content shell 720px を viewport 中央に、左右 24px 以上。sheet は full-bleed。 */
  .home-canonical { --hc-shell-x: max(24px, calc(50% - 360px)); }
  .hc-hero { height: 600px; }
  .hc-header { padding: 20px calc(var(--hc-shell-x) - 2px) 0 calc(var(--hc-shell-x) - 4px); }
  .hc-hero-body { left: var(--hc-shell-x); }
  .hc-hero-title { font-size: 64px; line-height: 78px; }


  .hc-section { max-width: 768px; margin-inline: auto; padding-inline: 24px; }
  .hc-thread-section { padding-inline: 24px; }
  .home-canonical .hc-city { height: 286px; }
  .hc-work { height: 132px; }

  .hc-thread { padding: 24px; }
  .hc-thread-body { grid-template-columns: 280px minmax(0, 1fr); column-gap: 24px; }
  .hc-thread-media { height: auto; aspect-ratio: 292 / 180; }
  .hc-node + .hc-node { margin-left: 18px; }
  .hc-node + .hc-node::before { left: -15px; }

  .hc-reality { grid-template-columns: 240px minmax(0, 1fr); padding-inline: 24px; }
  .hc-reality-line { white-space: normal; word-break: keep-all; }
  .hc-reality-strip { gap: 10px; }
  .hc-reality-shot { height: 154px; }
}

/* ---------------------------------------------- Desktop 900–1199 */

@media (min-width: 900px) and (max-width: 1199px) {
  /* warm sheet は最大 960px・左右 32px 以上で中央。content はその内側 32px。
     Hero の photo は full-bleed、header / body / aside / trace は shell 基準。 */
  .home-canonical { --hc-shell-x: max(64px, calc(50% - 448px)); }
  .hc-hero { height: 640px; }
  .hc-header { padding: 20px calc(var(--hc-shell-x) - 2px) 0 calc(var(--hc-shell-x) - 4px); }
  .hc-hero-body { left: var(--hc-shell-x); }
  .hc-hero-title { font-size: 72px; line-height: 87px; }

  /* trace は 853 の比率のまま hero 高さに等倍（横へ引き伸ばさない）、shell 右端に寄せる */

  .hc-sheet { margin-inline: max(32px, calc(50% - 480px)); }
  .hc-city-grid { gap: 16px; }
  .home-canonical .hc-city { height: 320px; }
  .hc-work-grid { gap: 16px; }
  .hc-work { height: 156px; }

  .hc-thread-section { padding-inline: 32px; }
  .hc-thread { padding: 28px; }
  .hc-thread-body { grid-template-columns: 360px minmax(0, 1fr); column-gap: 32px; }
  .hc-thread-media { height: auto; aspect-ratio: 292 / 180; }

  .hc-reality { grid-template-columns: 280px minmax(0, 1fr); padding-inline: 32px; }
  .hc-reality-line { white-space: normal; word-break: keep-all; }
  .hc-reality-shot { height: 184px; }
}

/* --------------------------------------------------- Wide 1200– */

@media (min-width: 1200px) {
  /* warm sheet は最大 1240px（1440 で左右 100px）。content はその内側 32px。 */
  .home-canonical { --hc-shell-x: max(64px, calc(50% - 588px)); }
  .hc-hero { height: 680px; }
  .hc-header { padding: 20px calc(var(--hc-shell-x) - 2px) 0 calc(var(--hc-shell-x) - 4px); }
  .hc-hero-body { left: var(--hc-shell-x); }
  .hc-hero-title { font-size: 84px; line-height: 102px; max-width: 7.2em; }


  .hc-sheet { margin-inline: max(32px, calc(50% - 620px)); }
  .hc-city-grid { gap: 18px; }
  .home-canonical .hc-city { height: 340px; }
  .hc-work-grid { gap: 18px; }
  .hc-work { height: 170px; }

  .hc-thread-section { padding-inline: 32px; }
  .hc-thread { padding: 32px; }
  .hc-thread-body { grid-template-columns: 440px minmax(0, 1fr); column-gap: 40px; }
  .hc-thread-media { height: auto; aspect-ratio: 292 / 180; }

  .hc-reality { grid-template-columns: 320px minmax(0, 1fr); padding-inline: 32px; }
  .hc-reality-strip { gap: 14px; }
  .hc-reality-shot { height: 220px; }
}

.hc-work-caption { min-width: 0; display: grid; gap: .2rem; }
.hc-discovery-entry { margin: 24px 0 32px; padding: clamp(18px, 4vw, 30px); border: 1px solid var(--hc-ink-dim); }
.hc-discovery-lead { margin: 0 0 16px; font-size: 18px; line-height: 1.6; color: var(--hc-ink); }
.hc-discovery-button { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; box-sizing: border-box; padding: 16px 20px; background: var(--hc-ink); color: #f3eddd; font-size: 18px; line-height: 1.5; font-weight: 600; text-decoration: none; }
.hc-discovery-button:hover { background: #433b30; }
.hc-discovery-button:focus-visible { outline: 3px solid #9c452b; outline-offset: 4px; }
.hc-discovery-note { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--hc-ink-dim); }
.hc-featured-heading { margin: 0 0 16px; font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--hc-ink); }
.hc-work-place { font-size: .875rem; line-height: 1.4; color: #f4f0e8; }

.hc-weekly-entry{display:block;background:#24221c;color:#f2ecdf;padding:18px;margin-bottom:22px;line-height:1.7;text-decoration:none}.hc-weekly-entry:focus-visible{outline:3px solid #b38a4b;outline-offset:4px}

.hc-english-entry{position:absolute;right:85px;top:24px;z-index:3;font-family:var(--sans);font-size:13px;color:#f2ecdf;padding:8px;text-underline-offset:4px}@media(max-width:520px){.hc-english-entry{top:55px;right:20px;font-size:12px}}

/* 2026-09-08 R8: Founder requested clear purpose, neutral culture imagery,
   nonoverlapping controls, and compact HOME. Supersedes hero pixel contracts. */
.hc-hero{height:auto;min-height:0;overflow:visible;padding-bottom:64px}
.hc-header{padding:24px max(24px,calc((100vw - 1320px)/2));align-items:center;gap:20px}
.hc-header-actions{display:flex;align-items:center;gap:24px;flex:none}
.hc-english-entry{position:static;padding:12px 0;display:inline-block;font-size:14px;line-height:20px}
.hc-menu-trigger{position:static;flex:none;width:44px;height:44px;padding:0;margin:0;display:flex;align-items:center;justify-content:center}
.hc-brand-link{font-size:22px;line-height:1.5;margin:0;padding:0}
.hc-hero-content{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;max-width:1320px;margin:48px auto 0;padding:0 24px;align-items:center}
.hc-hero-body{position:static;max-width:100%;min-width:0}
.hc-hero-kicker{color:var(--hc-gold);font-size:14px;letter-spacing:.12em;margin:0 0 24px}
.hc-hero-title{font-size:clamp(30px,3.4vw,50px);line-height:1.6;max-width:none;letter-spacing:0;font-weight:500}
.hc-hero-sub{max-width:30em;font-size:16px;line-height:2;margin:24px 0 0}
.hc-hero-cta{margin-top:30px;background:var(--hc-ivory);color:var(--hc-ink);padding:18px 28px;border:0;min-width:200px;justify-content:space-between;font-family:var(--sans)}
.hc-hero-cta-label,.hc-hero-cta-mark{color:inherit}
.hc-hero-cta-label{font-family:var(--sans);font-size:17px;font-weight:600}
.hc-hero-sub{max-width:32em;text-wrap:pretty}
.hc-culture-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:380px;min-width:0}
.hc-culture-mosaic figure{margin:0;position:relative;overflow:hidden;min-height:0}
.hc-culture-mosaic figure:first-child{grid-row:span 2}
.hc-culture-mosaic img{width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.hc-culture-mosaic figcaption{position:absolute;bottom:16px;left:16px;color:white;font-size:20px;font-family:var(--serif)}
.hc-city-q{font-size:14px;line-height:1.8}
.hc-thread-section .hc-thread-note{max-width:100%}
.hc-reality{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hc-reality-copy{max-width:100%}
.hc-reality-lead{font-size:16px;line-height:2;max-width:34em}
.hc-event-kicker{font-size:13px;color:#736041;letter-spacing:.1em}
.hc-weekly-entry{display:inline-flex;padding:16px 22px;margin:16px 0 0;background:var(--hc-ink);color:var(--hc-ivory);border:0;text-decoration:none;font-size:17px}
.hc-reality-hint{font-size:13px;color:#645b50}
.hc-event-photo{margin:0;min-width:0}
.hc-event-photo img{display:block;width:100%;height:260px;object-fit:cover}
.hc-event-photo figcaption{font-size:12px;line-height:1.7;margin-top:10px;color:#645b50}
@media(max-width:760px){
.hc-header{padding:16px 20px;gap:12px;flex-wrap:wrap}
.hc-header-actions{gap:14px;margin-left:auto}
.hc-brand-link{font-size:18px}
.hc-hero-content{grid-template-columns:1fr;gap:32px;margin-top:24px;padding:0 24px}
.hc-hero-title{font-size:clamp(25px,5.5vw,38px);line-height:1.65}
.hc-hero-kicker{margin-bottom:14px;font-size:12px}
.hc-hero-sub{font-size:15px;line-height:1.9;margin-top:18px}
.hc-hero-cta{margin-top:20px;padding:16px 24px}
.hc-culture-mosaic{height:180px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hc-culture-mosaic figure:first-child{grid-row:auto}
.hc-culture-mosaic figcaption{font-size:16px;bottom:12px;left:12px}
.hc-hero{padding-bottom:40px}
.hc-reality{grid-template-columns:1fr;gap:24px}
.hc-event-photo img{height:210px}
}
@media(max-width:390px){.hc-header{column-gap:8px}.hc-brand-link{font-size:16px}.hc-header-actions{gap:10px}.hc-english-entry{font-size:12px}.hc-menu-trigger{width:40px}}

.hc-about-link{display:inline-block;margin-top:16px;padding:8px 0;font-size:13px;color:#cfc7b8;text-underline-offset:4px}

/* 2026-09-08: daylight around real streets; photographs carry their own light. */
.home-canonical{--hc-night:#f8f7f2;--hc-paper:#eeece3;--hc-gold:#805d2e;background:#f8f7f2;color:#262923;color-scheme:light}
.home-canonical .hc-hero{background:#f8f7f2;color:#262923}
.home-canonical :is(.hc-brand-link,.hc-hero-title,.hc-english-entry){color:#262923}
.home-canonical :is(.hc-hero-sub,.hc-about-link){color:#535d55}
.home-canonical .hc-menu-bars,.home-canonical .hc-menu-bars::before,.home-canonical .hc-menu-bars::after{background:#262923}
.home-canonical .hc-hero-cta{background:#294c42;color:#fff;min-height:56px;height:auto}
.home-canonical .hc-hero-cta:hover{background:#203d35}
.home-canonical .hc-header{max-width:1320px;margin:auto;padding:24px;box-sizing:border-box;border-bottom:1px solid #d9dace}
.hc-brand-link{display:block}
.hc-brand-logo{display:block;width:300px;max-width:100%;height:auto;filter:brightness(0)}
.home-canonical .hc-hero-content{gap:clamp(28px,4vw,64px);margin-top:52px;padding:0 36px}
.home-canonical .hc-hero-kicker{display:flex;align-items:center;gap:14px;color:#8b4934;font:500 15px/1.6 var(--sans);letter-spacing:.1em;margin-bottom:22px}
.home-canonical .hc-hero-kicker::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.home-canonical .hc-hero-title{font-size:clamp(30px,3.7vw,52px);line-height:1.5;letter-spacing:-.04em}
.hc-hero-accent{color:#a44f34}
.home-canonical .hc-hero-line:first-child{font-size:.85em;margin-bottom:5px}
.home-canonical .hc-hero-sub{max-width:29em}
.home-canonical .hc-city{display:flex;flex-direction:column;height:auto;background:#faf9f4;color:#262923;border:1px solid #d9dace;border-radius:6px}
.home-canonical .hc-city:last-child{border-bottom:1px solid #d9dace}
.home-canonical .hc-city-media{position:relative;inset:auto;height:auto;aspect-ratio:4/3;flex:none;overflow:hidden}
.home-canonical .hc-city-media img{filter:none;object-position:50% 42%}
.home-canonical .hc-city-media::after{display:none}
.home-canonical .hc-city-body{position:static;padding:18px;display:flex;flex-direction:column;flex:1}
.home-canonical .hc-city-name{color:#262923;font-size:26px;line-height:1.4}
.home-canonical .hc-city-q{color:#586155;font-size:14px;line-height:1.8;margin-top:8px}
.home-canonical .hc-city-mark{color:#294c42;margin-top:auto;padding-top:16px}
.home-canonical .hc-city:hover{border-color:#667d70}
@media(max-width:760px){.home-canonical .hc-culture-mosaic{height:260px;gap:8px}.hc-culture-mosaic figcaption{padding:5px 9px;font-size:13px}.home-canonical .hc-city-body{padding:14px}.home-canonical .hc-city-name{font-size:23px}}
@media(max-width:390px){.home-canonical .hc-city-grid{grid-template-columns:1fr}.home-canonical .hc-city{display:grid;grid-template-columns:42% 1fr}.home-canonical .hc-city-media{height:100%;aspect-ratio:auto}.home-canonical .hc-city-body{padding:14px}.home-canonical .hc-city-mark{padding-top:8px}}
@media(max-width:760px){
.home-canonical .hc-header{padding:16px 20px;flex-wrap:nowrap;gap:12px}
.hc-brand{flex:1;min-width:0}.hc-brand-logo{width:240px}
.hc-header-actions{gap:14px}.hc-english-entry{font-size:12px}
.home-canonical .hc-hero-content{margin-top:30px;padding:0 24px;gap:26px}
.home-canonical .hc-hero-title{font-size:clamp(27px,6.5vw,42px)}
.home-canonical .hc-hero-kicker{font-size:13px;gap:10px;margin-bottom:16px}
.hc-culture-mosaic figcaption{padding:5px 2px 1px;font-size:13px}
.hc-culture-mosaic figcaption small{display:none}
}
@media(max-width:440px){.home-canonical .hc-header{padding-inline:16px;align-items:center}.hc-header-actions{gap:8px}.hc-english-entry{width:42px;line-height:1.3}.hc-brand-logo{width:200px}.hc-culture-mosaic figure{border-width:4px}}