/* =========================================================
   with 日本橋 — editorial guide for inbound visitors to Nihonbashi.
   Palette: 雀色 suzume-iro (lead) · 墨 ink · 石/和紙 stone · 緑青 patina · 朱 vermilion(spark)
   — historical Nihonbashi mood (was: modern indigo).
   Type: Mobo (角丸ゴシック / rounded gothic, self-hosted) for headings, body and
   labels; Inter for Latin display accents (big EN titles, numerals).
   ========================================================= */

/* ---------- Fonts (self-hosted, SIL OFL 1.1 — Flop Design "Mobo") ---------- */
@font-face {
  font-family: "Mobo";
  src: url("../fonts/MOBO-ExtraLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mobo";
  src: url("../fonts/MOBO-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mobo";
  src: url("../fonts/MOBO-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mobo";
  src: url("../fonts/MOBO-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --ink:        #15171b;   /* 墨 sumi */
  --ink-soft:   #3f444c;
  --mute:       #7c7f86;
  --line:       #d8d6cc;   /* hairline on stone */
  --line-soft:  #e6e4da;

  --ai:         #16314f;   /* 藍 indigo — lead (reverted from 雀色 suzume-iro) */
  --ai-deep:    #0b1424;   /* deep indigo for large surfaces (was the literal --header-navy pre-suzume) */
  --ai-bright:  #2e629e;   /* link / hover — brighter, more saturated indigo */
  --patina:     #6f7d5c;   /* 緑青 oxidized bronze (kirin) — markers; warmed to pair with suzume-iro */
  --patina-ink: #4a5540;
  --shu:        #d9552e;   /* 朱 vermilion — single spark only; pushed brighter/more orange to stay distinct from the (now reddish) lead */

  --stone:      #faf9f1;   /* washi/stone paper (page base) — historical warm cream */
  --stone-2:    #f1f0e5;   /* alt section, same warm family as --stone */
  --paper:      #fbfbf8;   /* card / reading surface */
  --on-ai:      #f5f0e8;   /* text on suzume-iro — warmed off-white */
  --on-ai-mute: #c9ada0;
  --chrome-deep: color-mix(in srgb, var(--ai-deep) 50%, var(--ai) 50%); /* header + footer bars — same background on both, a step lighter than the plain --ai-deep used by Concept/hero so the chrome doesn't blend into Concept right above the footer */

  /* Type — one rounded-gothic voice: Mobo (self-hosted) for headings, body and
     labels; Inter for Latin display accents (big EN titles, numerals). */
  --rounded: "Mobo", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  --latin:  "Inter", var(--rounded);
  --serif:  var(--rounded); /* headings (bold) */
  --fancy:  var(--rounded); /* display accents */
  --sans:   var(--rounded); /* body (main) */
  --mono:   var(--rounded); /* labels / data (eyebrows, dates) */

  /* Layout */
  --maxw: 1240px;
  --gap: 30px;
  --radius: 2px;
  --header-h: 64px;

  --ease: cubic-bezier(.2,.6,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--stone);
  line-height: 1.8;
  font-size: 15px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease), opacity .2s var(--ease); }
ul { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; line-height: 1.35; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--ai-bright); outline-offset: 3px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.serif { font-family: var(--serif); }
.fancy { font-family: var(--fancy); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* mono "survey" label used for eyebrows, dates, data */
.label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--patina-ink);
}

/* =========================================================
   Signature: the milestone ruler
   ========================================================= */
.ruler {
  height: 12px;
  background-image: repeating-linear-gradient(to right,
    var(--line) 0, var(--line) 1px, transparent 1px, transparent 16px);
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 16px 7px;
  opacity: .9;
}

/* =========================================================
   Header
   ========================================================= */
/* White bar with indigo content — the one surface on the site that stays
   light while everything else (footer, ranking band, concept, page-head-dark
   etc.) keeps the dark --chrome-deep treatment. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid color-mix(in srgb, var(--ai) 12%, transparent);
}
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 30px; }

.brand { display: flex; align-items: baseline; gap: .4em; line-height: 1; flex-shrink: 0; }
/* masthead states the concept: "with" = modern gothic, "日本橋" = old mincho */
.brand .with { font-family: var(--sans); font-weight: 400; font-size: 16px; letter-spacing: .06em; }
.brand .place { font-family: var(--serif); font-weight: 600; font-size: 25px; letter-spacing: .04em; }
.brand .place-en { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .42em; margin-top: 3px; }

.global-nav { margin-left: 8px; }
.global-nav ul { display: flex; gap: 30px; }
.global-nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  position: relative; padding: 8px 0;
}
.global-nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.global-nav a:hover::after { transform: scaleX(1); }

.header-tools { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: auto; }
.about-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  position: relative; padding: 8px 0;
  transition: transform .32s var(--ease), opacity .32s var(--ease);
}
.about-link::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.about-link:hover::after { transform: scaleX(1); }
/* The search input expands over this link (it's position:absolute, so it
   doesn't push layout) — slide the link clear instead of letting them overlap. */
.header-tools.search-open .about-link { transform: translateX(-220px); opacity: 0; pointer-events: none; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; transition: background .2s; position: relative; z-index: 1; }
.icon-btn svg { width: 19px; height: 19px; }

/* ---- Header search: click the icon, the input expands leftward from it ----
   The pill and the icon-btn share the same 38px circle diameter so the pill's
   rounded right end sits exactly concentric under the icon — no seam. */
.header-search { position: relative; display: flex; align-items: center; }
.header-search .search-form {
  position: absolute; top: 0; right: 0; height: 38px; box-sizing: border-box;
  display: flex; align-items: center;
  width: 0; max-width: calc(100vw - 220px); overflow: hidden;
  background: color-mix(in srgb, var(--ai) 6%, transparent); border: 1px solid transparent; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: width .32s var(--ease), opacity .2s var(--ease), background .2s;
}
.header-search.open .search-form {
  width: 230px; opacity: 1; pointer-events: auto;
  background: color-mix(in srgb, var(--ai) 8%, transparent); border-color: color-mix(in srgb, var(--ai) 22%, transparent);
}
.header-search .search-form input[type="search"] {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  padding: 0 40px 0 16px; font-family: var(--sans); font-size: 13px; color: var(--ai);
}
.header-search .search-form input[type="search"]::placeholder { color: color-mix(in srgb, var(--ai) 55%, transparent); }
/* The toggle icon-btn is the only visible search glyph — Enter still submits the form. */
.header-search .search-form button[type="submit"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.icon-btn[data-search-toggle][aria-expanded="true"] { background: color-mix(in srgb, var(--ai) 10%, transparent); }

.lang-switch { display: flex; align-items: center; gap: 4px; }
.lang-switch button {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 4px 4px;
  transition: color .2s;
}

/* ---- Header palette: indigo content on the white bar ---- */
.site-header .brand,
.site-header .brand .with { color: var(--ai); }
.site-header .brand .place-en { color: color-mix(in srgb, var(--ai) 70%, transparent); }
.site-header .global-nav a { color: var(--ai); }
.site-header .global-nav a::after { background: var(--ai); }
.site-header .global-nav a:hover { color: var(--ai); opacity: .7; }
.site-header .about-link { color: var(--ai); }
.site-header .about-link::after { background: var(--ai); }
.site-header .about-link:hover { color: var(--ai); opacity: .7; }
.site-header .icon-btn { color: var(--ai); }
.site-header .icon-btn:hover { background: color-mix(in srgb, var(--ai) 10%, transparent); }
.site-header .lang-switch button { color: color-mix(in srgb, var(--ai) 55%, transparent); }
.site-header .lang-switch button.active { color: var(--ai); }
.site-header .lang-switch button:hover:not(.active) { color: var(--ai); }
.site-header .hamburger span { background: var(--ai); }

.hamburger { display:none; width:40px; height:40px; flex-direction:column; justify-content:center; gap:5px; align-items:center; }
.hamburger span { width:22px; height:2px; transition: transform .3s var(--ease), opacity .3s, background .3s; }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  position: fixed; top: var(--header-h); right: 0; bottom: 0; left: auto;
  width: 100%; max-width: 420px; background: var(--stone); z-index: 99;
  box-shadow: -12px 0 40px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .35s var(--ease);
  padding: 30px 32px; overflow-y: auto; display: flex; flex-direction: column;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer a { font-family: var(--serif); font-size: 19px; padding: 13px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mobile-drawer a small { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; text-align:right; }
.drawer-foot { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mobile-drawer .lang-switch { border-color: var(--line); }
.mobile-drawer .lang-switch button { color: var(--mute); }
.mobile-drawer .lang-switch button + button { border-left-color: var(--line); }
.mobile-drawer .lang-switch button.active { background: var(--ai); color: #fff; }
.mobile-drawer .lang-switch button:hover:not(.active) { background: var(--stone-2); color: var(--ink); }
.drawer-social { display: flex; gap: 12px; }
.drawer-social a { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.drawer-social a:hover { border-color: var(--ai); color: var(--ai); }
.drawer-social svg { width: 18px; height: 18px; }

/* ---- Minimal header on article pages: logo + search + hamburger only ---- */
.wn-minimal-header .global-nav { display: none; }
.wn-minimal-header .header-tools { margin-left: auto; }
.wn-minimal-header .header-tools .about-link { display: none; }
.wn-minimal-header .header-tools .lang-switch { display: none; }
.wn-minimal-header .hamburger { display: flex; }

/* =========================================================
   Category archive (2-col: article grid + sidebar)
   ========================================================= */
.archive-main { padding: calc(64px + var(--header-h)) 0 64px; }
.archive-row { display:flex; gap:36px; align-items:flex-start; }
.archive-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:36px; }
.archive-col .sidebar { width:280px; flex-shrink:0; }
.archive-head p.eyebrow { font-family: var(--mono); font-size: 13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: var(--patina-ink); margin:0 0 6px; }
.archive-head h1 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing:.04em; color: var(--ink); margin:0; }
.archive-lead { font-size: 15px; line-height: 1.9; color: var(--ink-soft); text-align:center; }
.archive-keywords p.eyebrow { font-family: var(--mono); font-size: 12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--patina-ink); margin:0 0 14px; }
.archive-keywords .tags { display:flex; flex-wrap:wrap; gap:10px 8px; }

.keywords-band { padding: 40px 0; border-top: 1px solid var(--line-soft); }
.keywords-band p.eyebrow { font-family: var(--mono); font-size: 12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--patina-ink); margin:0 0 18px; }
.keywords-band .tags { display:flex; flex-wrap:wrap; gap:10px 8px; }

@media (max-width: 900px) {
  .archive-row { flex-direction:column; }
  .archive-col .sidebar { width:100%; }
}

/* =========================================================
   Section heads
   ========================================================= */
.section { padding: 64px 0; }
.section-soft { background: var(--stone-2); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; gap: 16px; flex-wrap: wrap; }
.sec-head .titles h2 {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--patina-ink);
}
.sec-head .titles p { margin: 8px 0 0; font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.sec-head .count { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .06em; }
.more-link { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ai); display: inline-flex; align-items: center; gap: 8px; }
.more-link::after { content:"→"; transition: transform .25s var(--ease); }
.more-link:hover { color: var(--ai-bright); }
.more-link:hover::after { transform: translateX(4px); }

/* =========================================================
   Hero — the thesis: "where Japan begins"
   ========================================================= */
.hero { position: relative; background: var(--ai-deep); }
.hero-track { position: relative; height: clamp(460px, 60vw, 660px); overflow: hidden; }
.hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; z-index:0; display:block; }
.hero-slide img { width:100%; height:100%; object-fit: cover; transform: scale(1.04); transition: transform 7s linear; }
.hero-slide.active img { transform: scale(1.12); }

/* Diagonal (~60°) wipe: the incoming slide sweeps in left-to-right over the
   previous one, which stays fully visible underneath until it's covered.
   The clip-path motion itself is driven from JS via the Web Animations API
   (element.animate) rather than a class-toggled CSS transition/animation —
   restarting a CSS animation/transition by re-adding a class is flaky across
   engines (Firefox/Safari can skip or fail to restart it); animate() always
   plays a fresh, explicit animation on every call. */
.hero-slide.prev { opacity:1; visibility:visible; z-index:1; }
.hero-slide.active { opacity:1; visibility:visible; z-index:2; }
.hero-slide::after { content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, color-mix(in srgb, var(--ai-deep) 72%, transparent) 100%); }
.hero-caption { position:absolute; left:0; right:0; bottom:0; z-index:2; color:#fff; padding: 0 0 56px; }
.hero-caption .container { display:flex; flex-direction:column; gap:14px; }
.hero-cat { font-family: var(--mono); font-size: 11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: var(--on-ai); align-self:flex-start; padding: 5px 0; border-bottom: 2px solid var(--patina); }
.hero-caption h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.42; letter-spacing: .03em; max-width: 20ch;
  text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.hero-meta { font-family: var(--mono); font-size: 12px; letter-spacing:.06em; color: var(--on-ai-mute); display:flex; gap:16px; align-items:center; }

/* =========================================================
   Layout + cards
   ========================================================= */
.layout { display: grid; grid-template-columns: 1fr 330px; gap: 64px; align-items: start; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card { display:flex; flex-direction:column; }
.card .thumb { position:relative; aspect-ratio: 4/3; overflow:hidden; border-radius: var(--radius); background: var(--stone-2); }
.card .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.card:hover .thumb img { transform: scale(1.06); }
.card .body { padding: 16px 2px 0; display:flex; flex-direction:column; gap: 9px; }
.card .cat { font-family: var(--mono); font-size: 10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--ai); }
.card h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.55; letter-spacing: .02em; }
.card:hover h3 { color: var(--ai); }
.card .meta { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing:.02em; display:flex; gap:14px; flex-wrap:wrap; }
.card .tags { display:flex; gap:8px; flex-wrap:wrap; }

.tag { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: 4px 11px; border-radius: 999px; }
.tag:hover { background: var(--ai); color:#fff; border-color: var(--ai); }

/* =========================================================
   Sidebar
   ========================================================= */
.sidebar { display:flex; flex-direction:column; gap: 46px; position: sticky; top: calc(var(--header-h) + 26px); }
.widget h3 { font-family: var(--mono); font-size: 12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--patina-ink);
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--ink); }

.rank-list { display:flex; flex-direction:column; }
.rank-item { display:grid; grid-template-columns: 30px 64px 1fr; gap: 14px; align-items:center; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.rank-item .num { font-family: var(--mono); font-size: 16px; font-weight:700; color: var(--patina); text-align:center; }
.rank-item:nth-child(-n+3) .num { color: var(--shu); }
.rank-item .thumb { aspect-ratio:1/1; border-radius: var(--radius); overflow:hidden; background: var(--stone-2); }
.rank-item .thumb img { width:100%; height:100%; object-fit:cover; }
.rank-item h4 { font-family: var(--serif); font-size: 14px; font-weight: 600; line-height: 1.55; }
.rank-item:hover h4 { color: var(--ai); }

.tag-cloud { display:flex; flex-wrap:wrap; gap:9px; }

.rec-item { display:flex; gap:12px; align-items:flex-start; }
.rec-item + .rec-item { margin-top: 18px; }
.rec-item .thumb { width:88px; height:64px; flex-shrink:0; border-radius: var(--radius); overflow:hidden; background: var(--stone-2); }
.rec-item .thumb img { width:100%; height:100%; object-fit:cover; }
.rec-item .meta { display:flex; flex-direction:column; gap:5px; min-width:0; }
.rec-item .meta .cat-date { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.rec-item .meta h4 { font-size: 13px; color: var(--ink); line-height: 1.5; }
.rec-item:hover .meta h4 { color: var(--ai); }

.cat-list-plain { display:flex; flex-direction:column; gap:12px; }
.cat-list-plain a { font-family: var(--mono); font-size: 15px; letter-spacing: .1em; color: var(--ink); text-transform: uppercase; }
.cat-list-plain a:hover, .cat-list-plain a.active { color: var(--ai); }

.widget-promo { background: var(--ai); color:#fff; border-radius: var(--radius); padding: 28px 24px; position: relative; overflow: hidden; }
.widget-promo::after { content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background-image: repeating-linear-gradient(to right, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 1px, transparent 1px, transparent 14px);
  background-size: 14px 6px; background-position: bottom; background-repeat: repeat-x; }
.widget-promo h3 { font-family: var(--serif); color:#fff; border:0; padding:0; margin:0 0 10px; font-size: 19px; letter-spacing:0; text-transform:none; }
.widget-promo p { font-size: 13px; color: var(--on-ai); opacity:.9; margin: 0 0 18px; line-height:1.7; }
.btn-light { display:inline-block; background:#fff; color: var(--ai); font-family: var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding: 11px 20px; border-radius: 999px; }
.btn-light:hover { background: var(--patina); color:#fff; }

/* =========================================================
   Categories compact — Top page "カテゴリから探す" list
   ========================================================= */
.cat-compact { padding: 88px 0; }
.cat-compact .head { margin-bottom: 0; }
.cat-compact .head p:first-child { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--patina-ink); margin: 0 0 6px; }
.cat-compact .head p:last-child { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--ink); margin: 0; }
.cat-row { display: flex; align-items: center; gap: 28px; padding: 24px 0; border-top: 1px solid var(--line-soft); }
.cat-row:last-child { border-bottom: 1px solid var(--line-soft); }
.cat-row .label { width: 150px; flex-shrink: 0; }
.cat-row .label .en { display:block; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--patina-ink); font-weight: 700; }
.cat-row .label .ja { display:block; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 3px; }
.cat-row .article-mini { flex: 1; min-width: 0; display:flex; flex-direction:column; gap:10px; }
.cat-row .article-mini .thumb { height: 100px; border-radius: var(--radius); overflow:hidden; background: var(--stone-2); }
.cat-row .article-mini .thumb img { width:100%; height:100%; object-fit:cover; }
.cat-row .article-mini p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.cat-row .arrow { font-size: 16px; color: var(--ink); flex-shrink:0; }
@media (max-width: 780px) {
  .cat-row { flex-wrap: wrap; }
  .cat-row .label { width: 100%; display:flex; align-items:baseline; gap:10px; }
  .cat-row .arrow { position:absolute; }
}

/* =========================================================
   Ranking band — Top page dark full-bleed ranking section
   ========================================================= */
/* Warm charcoal — a distinct shade from --ai-deep (Concept, right below) so the
   two dark bands don't read as one block, but still in the same warm suzume
   family as the rest of the page (this used to be the cool --ink, a leftover
   from the pre-2026-09 indigo palette). */
.ranking-band { background: color-mix(in srgb, var(--ink) 55%, var(--ai-deep) 45%); color: var(--on-ai); padding: 80px 0; }
.ranking-band .ranking-title { display:flex; align-items:baseline; gap:14px; margin-bottom: 40px; }
.ranking-band .ranking-title .en { font-family: var(--latin); font-weight:700; font-size: 40px; letter-spacing: .06em; color:#fff; }
.ranking-band .ranking-title .ja { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--on-ai-mute); }
.ranking-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.ranking-grid + .ranking-grid { margin-top: 36px; }
.rank-card { display:flex; flex-direction:column; text-decoration:none; }
.rank-card .rank-no { display:block; font-family: var(--mono); font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--shu); margin-bottom: 10px; }
.rank-card .thumb { display:block; height: 210px; border-radius: var(--radius); overflow:hidden; background: var(--stone-2); }
.rank-card .thumb img { width:100%; height:100%; object-fit:cover; }
.rank-card .body { padding-top: 10px; display:flex; flex-direction:column; gap:8px; }
.rank-card .meta { font-family: var(--mono); font-size: 11px; letter-spacing:.02em; color: var(--on-ai-mute); }
.rank-card h3 { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height:1.5; color: var(--on-ai); }
.rank-card:hover h3 { color: #fff; }
@media (max-width: 900px) {
  .ranking-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ranking-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Concept band — "すべての道は、日本橋から" statement
   ========================================================= */
/* Same deep indigo as the hero, sitting between the ranking band and the
   footer. A light stone panel here read as a bright gap between two dark bands. */
.concept { background: var(--ai-deep); color: var(--on-ai); text-align:center; padding: 96px 0; position: relative; }
.concept::before { content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background-image: repeating-linear-gradient(to right, rgba(245,240,232,.28) 0, rgba(245,240,232,.28) 1px, transparent 1px, transparent 18px);
  background-size: 18px 8px; background-position: top; background-repeat: repeat-x; }
.concept .with { font-family: var(--mono); font-size: 12px; letter-spacing:.3em; text-transform:uppercase; color: var(--on-ai-mute); }
.concept h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.6vw, 50px); letter-spacing: .06em; margin: 14px 0 22px; color: #fff; }
.concept > .container > p { max-width: 74ch; margin: 0 auto; font-size: 15.5px; line-height: 2; color: var(--on-ai); text-wrap: balance; }
.concept .feats { display:flex; justify-content:center; gap: 30px; margin-top: 48px; flex-wrap:wrap; text-align:left; }
.concept .feats div { max-width: 230px; padding-top: 18px; border-top: 2px solid color-mix(in srgb, var(--on-ai) 42%, transparent); }
.concept .feats strong { display:block; font-family: var(--serif); font-size: 19px; color: #fff; margin-bottom: 8px; }
.concept .feats span { font-size: 13px; color: var(--on-ai-mute); line-height: 1.7; }

/* =========================================================
   Article
   ========================================================= */
.article-hero { position: relative; height: clamp(380px, 50vw, 560px); background: var(--ai-deep); }
.article-hero img { width:100%; height:100%; object-fit:cover; }
.article-hero::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, transparent 0%, transparent 50%, color-mix(in srgb, var(--ai-deep) 78%, transparent) 100%); }
.article-head { position:absolute; z-index:2; bottom:0; left:0; right:0; color:#fff; padding-bottom: 48px; }
.article-head .cat { font-family: var(--mono); font-size: 11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color: var(--on-ai); border-bottom: 2px solid var(--patina); padding-bottom: 4px; display:inline-block; }
.article-head h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(27px, 4.2vw, 46px); line-height: 1.48; letter-spacing: .03em; margin: 18px 0 14px; max-width: 24ch; text-shadow: 0 2px 22px rgba(0,0,0,.3); }
.article-head .meta { font-family: var(--mono); font-size: 12px; letter-spacing:.04em; color: var(--on-ai-mute); display:flex; gap:18px; flex-wrap:wrap; align-items:center; }

.prose { font-size: 16.5px; line-height: 2; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.5em; }
.prose h2 { font-family: var(--serif); font-weight: 600; font-size: 27px; color: var(--ink); margin-top: 2em; padding-left: 16px; border-left: 3px solid var(--ai); }
.prose h3 { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-top: 1.8em; }
.prose img { border-radius: var(--radius); margin: 1.8em 0; }
.prose figcaption { font-family: var(--mono); font-size: 11px; color: var(--mute); text-align:center; margin-top: 10px; letter-spacing:.03em; }
.prose blockquote { border-left: 3px solid var(--shu); padding-left: 22px; font-family: var(--serif); font-size: 21px; color: var(--ink); font-style: normal; line-height: 1.7; }
.prose a { color: var(--ai); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--patina); }
.prose a:hover { color: var(--ai-bright); }

.shop-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; margin: 2.6em 0; background: var(--paper); position: relative; }
.shop-box::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background: var(--ai); }
.shop-box h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 18px; }
.shop-box dl { display:grid; grid-template-columns: 96px 1fr; gap: 11px 18px; margin:0; font-size: 14px; }
.shop-box dt { font-family: var(--mono); font-size: 11px; letter-spacing:.06em; text-transform:uppercase; color: var(--mute); padding-top: 2px; }
.shop-box dd { margin:0; color: var(--ink); }
.amenities { display:flex; flex-wrap:wrap; gap:10px; margin-top: 20px; }
.amenity { display:inline-flex; align-items:center; gap:7px; font-family: var(--mono); font-size: 11px; font-weight:700; letter-spacing:.04em; color: var(--patina-ink); background: var(--stone); border:1px solid var(--line); padding: 7px 13px; border-radius: 999px; }
.amenity svg { width:15px; height:15px; }

.article-tags { display:flex; gap:9px; flex-wrap:wrap; margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--line); }

/* =========================================================
   Page title — Map / Ranking / Features / Articles / Search / 404 / About /
   generic pages. Deliberately just a heading on the normal page background,
   no dark band — this component was never in the design comp, so it follows
   the same eyebrow+h1 recipe as the (comp-approved) .archive-head instead of
   inventing its own look.
   ========================================================= */
.page-head { padding: calc(40px + var(--header-h)) 0 8px; text-align:center; }
.page-title .eyebrow { font-family: var(--mono); font-size: 13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color: var(--patina-ink); margin:0 0 6px; }
/* About page only — its page-head is immediately followed by full-bleed dark
   photo bands (.about-mission), so the shared light page-head reads as a
   bright gap wedged between two dark sections (header above, photo below).
   Matching it to the header's dark tone keeps that stretch of the page one
   continuous dark passage instead of a light interruption. Left-aligned per
   request, unlike the shared (centered) page-head. */
.page-head-dark { background: var(--chrome-deep); text-align: left; }
.page-head-dark .page-title .eyebrow { color: var(--on-ai-mute); }
.page-head-dark .page-title h1 { color: var(--on-ai); }
.page-title h1 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing:.04em; color: var(--ink); margin:0; }
.page-lead { max-width: 58ch; margin: 12px auto 0; font-size: 15px; line-height: 1.9; color: var(--ink-soft); }

/* min-height (not height) — the copy in each band varies in length, and a
   fixed height + overflow:hidden would silently clip text that runs long,
   especially on narrow viewports where lines wrap more. Range sized for
   body-only captions (no h2 in these bands anymore) — the old 420-704px
   range was tuned for a heading + short blurb and left a lot of empty
   gradient once the headings were dropped. */
/* display:flex + justify-content:center (not .container's old height:100%)
   vertically centers the caption — height:100% can't resolve against a
   min-height parent (its used height is auto), so with only min-height the
   caption was landing flush at the top instead of centered. Flex centering
   on the band itself works regardless, and still lets the band grow past
   min-height instead of clipping when a caption runs long. */
.about-mission { position:relative; min-height: clamp(300px, 34vw, 420px); overflow:hidden; background: linear-gradient(135deg, var(--ai), var(--ai-deep)); display:flex; flex-direction:column; justify-content:center; }
/* Placeholder photography — real shots pending, per wn_thumb_url()'s picsum
   convention used everywhere else on the site for un-shot posts. Sits behind
   the existing ::after scrim so caption text stays readable over it. */
.about-mission .mission-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-mission::after { content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(20,12,8,.72) 0%, rgba(20,12,8,.30) 55%, rgba(20,12,8,.15) 100%); }
.about-mission.align-right::after { background: linear-gradient(270deg, rgba(20,12,8,.72) 0%, rgba(20,12,8,.30) 55%, rgba(20,12,8,.15) 100%); }
/* width:100% — now that .about-mission is itself a flex container (for
   vertical centering), .container became a flex item, and its inherited
   margin:0 auto started absorbing space by shrinking the box to fit the
   caption instead of stretching it to the band's full content width. That
   left no room for justify-content:flex-end to actually push the caption
   toward the right edge. width:100% (capped by .container's own max-width)
   restores the original full-width column so left/right placement reads
   against the photo, not just the text-align inside a barely-there box. */
.about-mission .container { position:relative; z-index:2; display:flex; align-items:center; width:100%; }
/* Indigo (--ai) glow sitting only behind the caption, on top of the full-band scrim —
   a radial fade reads as light concentrated right behind the text rather
   than a hard box, so it stays soft against the photo. Drawn on an oversized
   ::before with closest-side so the fade reaches 0 before the layer's edge —
   painting it on .caption itself clipped the ellipse at the box and left a
   visible hard edge. isolation keeps z-index:-1 above the band's scrim. */
.about-mission .caption { position:relative; isolation:isolate; display:flex; flex-direction:column; gap:22px; max-width:600px; padding: 32px 40px; }
.about-mission .caption::before { content:""; position:absolute; inset:-80px -140px; z-index:-1; pointer-events:none;
  background: radial-gradient(closest-side, rgba(22,49,79,.6) 0%, rgba(22,49,79,.45) 35%, rgba(22,49,79,.2) 65%, rgba(22,49,79,.06) 85%, rgba(22,49,79,0) 100%); }
.about-mission.align-right .container { justify-content:flex-end; }
.about-mission.align-right .caption { align-items:flex-end; text-align:right; }
.about-mission h2 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; color:#fff; line-height:1.48; }
.about-mission .body p { font-size: 16.5px; line-height:2; color: var(--on-ai); }

.about-categories { padding: 88px 0; }
.about-cat-list { border-top: 1px solid var(--line-soft); }
.about-cat-row { display:flex; align-items:center; gap:36px; padding: 32px 0; border-bottom: 1px solid var(--line-soft); }
.about-cat-row .en { font-family: var(--mono); font-size: 13px; font-weight:700; letter-spacing:.1em; color: var(--patina-ink); width:120px; flex-shrink:0; }
.about-cat-row .ja { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); flex:1; }
.about-cat-row .arrow { font-size: 18px; color: var(--ink); }
.about-cat-row:hover .ja { color: var(--ai); }

.cta-band { background: var(--ai); color:#fff; text-align:center; padding: 84px 0; }
.cta-band h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; margin:0 0 16px; }
.cta-band p { max-width:52ch; margin:0 auto 24px; color: var(--on-ai); font-size:15px; }
.cta-band .btn-light { color: var(--ai); }

@media (max-width: 780px) {
  .about-mission .container { padding: 0 20px; }
  .about-mission .caption { max-width:100%; }
  .about-cat-row { flex-wrap:wrap; gap:6px 20px; padding:20px 0; }
  .about-cat-row .en { width:auto; }
}

/* =========================================================
   Map page
   ========================================================= */
.map-embed { background: var(--ai-deep); }
.map-embed iframe { display:block; width:100%; height: clamp(360px, 52vw, 560px); border:0; filter: grayscale(.15) contrast(1.02); }

.spot-list { display:flex; flex-direction:column; }
.spot { display:grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items:center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.spot-thumb { width:84px; height:84px; border-radius: var(--radius); overflow:hidden; background: var(--stone-2); }
.spot-thumb img { width:100%; height:100%; object-fit:cover; }
.spot:hover .spot-thumb img { transform: scale(1.05); transition: transform .5s var(--ease); }
.spot-body { min-width:0; }
.spot-meta { display:flex; align-items:center; gap:14px; margin-bottom: 6px; flex-wrap:wrap; }
.spot-meta .cat { font-family: var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--ai); }
.spot-body h3 { font-family: var(--serif); font-size:18px; font-weight: 600; line-height:1.4; }
.spot-body h3 a:hover { color: var(--ai); }
.spot-addr { font-size:13px; color: var(--mute); margin: 4px 0 0; }
.spot-go { font-family: var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; color: var(--ai); white-space:nowrap; }
.spot-go:hover { color: var(--ai-bright); }

/* =========================================================
   Ranking board (ランキング page)
   ========================================================= */
.rank-board { list-style:none; counter-reset:none; margin:0; padding:0; }
.rank-row { display:grid; grid-template-columns: 64px 120px 1fr; gap: 22px; align-items:center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rank-no { font-family: var(--mono); font-size: 30px; font-weight:700; color: var(--patina); text-align:center; line-height:1; }
.rank-row:nth-child(-n+3) .rank-no { color: var(--shu); }
.rank-thumb { width:120px; aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden; background: var(--stone-2); }
.rank-thumb img { width:100%; height:100%; object-fit:cover; }
.rank-row:hover .rank-thumb img { transform: scale(1.05); transition: transform .5s var(--ease); }
.rank-text { min-width:0; }
.rank-meta { display:flex; align-items:center; gap:14px; margin-bottom: 8px; flex-wrap:wrap; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.rank-meta .cat { font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--ai); }
.rank-text h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height:1.45; }
.rank-text h3 a:hover { color: var(--ai); }

@media (max-width: 560px) {
  .spot { grid-template-columns: 64px 1fr; }
  .spot-thumb { width:64px; height:64px; }
  .spot-go { grid-column: 2; justify-self:start; }
  .rank-row { grid-template-columns: 44px 1fr; gap:14px; }
  .rank-thumb { display:none; }
  .rank-no { font-size: 24px; }
}

/* =========================================================
   Pagination
   ========================================================= */
.pagination { margin-top: 60px; }
.pagination .nav-links { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.pagination .page-numbers { min-width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius: var(--radius); font-family: var(--mono); font-size:13px; font-weight:700; padding: 0 8px; background: var(--paper); }
.pagination .page-numbers.current { background: var(--ai); color:#fff; border-color: var(--ai); }
.pagination a.page-numbers:hover { border-color: var(--ai); color: var(--ai); }
.pagination .page-numbers.dots { border:0; background:transparent; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--chrome-deep); color: var(--on-ai-mute); padding: 48px 0 24px; }
.footer-top { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand .place { font-family: var(--serif); font-weight: 600; font-size: 27px; color:#fff; }
.footer-brand .with { font-family: var(--sans); font-weight: 400; letter-spacing: .06em; color: var(--patina); }
.footer-brand p { font-size: 13px; line-height: 1.9; margin: 12px 0 0; color: rgba(201,173,160,.75); max-width: 32ch; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom: 12px; }
.footer-col a { display:block; font-size: 13px; padding: 4px 0; color: rgba(201,173,160,.85); }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing:.04em; color: rgba(201,173,160,.55); flex-wrap:wrap; gap: 12px; }
.footer-social { font-family: var(--mono); font-size: 11px; letter-spacing:.04em; color: rgba(201,173,160,.55); }
.footer-social a { color: rgba(201,173,160,.55); }
.footer-social a:hover { color:#fff; }

/* =========================================================
   Search form
   ========================================================= */
.search-form { display:flex; max-width:560px; margin: 0 auto; border:1px solid var(--line); border-radius:999px; overflow:hidden; background: var(--paper); }
.search-form input[type="search"] { flex:1; border:0; padding:13px 20px; font: inherit; outline:none; background: transparent; }
.search-form button { width:54px; display:grid; place-items:center; background: var(--ai); color:#fff; }
.search-form button svg { width:18px; height:18px; }

/* =========================================================
   WP content helpers
   ========================================================= */
.prose .alignleft { float:left; margin:.4em 1.4em 1em 0; }
.prose .alignright { float:right; margin:.4em 0 1em 1.4em; }
.prose .aligncenter { display:block; margin-left:auto; margin-right:auto; }
.prose .wp-caption, .prose figure.wp-block-image { max-width:100%; }
.prose .wp-caption-text { font-family: var(--mono); font-size:11px; color: var(--mute); text-align:center; margin-top:8px; }
.prose ul:not(.tag-cloud), .prose ol { padding-left: 1.4em; }
.prose ul:not(.tag-cloud) { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.page-links { margin-top: 2em; font-family: var(--mono); font-size:13px; display:flex; gap:8px; }
.comment-list, .comment-list .children { list-style:none; padding-left:0; }
.comment-body { padding: 16px 0; border-bottom: 1px solid var(--line); }
.brand .custom-logo-link { display:inline-flex; align-items:center; }
.brand img.custom-logo { height: 40px; width:auto; }
.brand-logo { display:inline-flex; align-items:center; }
.brand-logo img { height: 48px; width:auto; display:block; }
.admin-bar .site-header { top: 32px; }
@media (max-width:782px){ .admin-bar .site-header { top: 46px; } }
@media (max-width:600px){ .admin-bar .site-header { top: 0; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; gap: 52px; }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .sidebar .widget { flex: 1 1 280px; }
}
@media (max-width: 860px) {
  .global-nav, .header-tools .lang-switch { display:none; }
  .hamburger { display:flex; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap:32px; }
}
@media (max-width: 560px) {
  .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  .sec-head .titles p { font-size: 23px; }
  .footer-top { grid-template-columns: 1fr; }
  .shop-box dl { grid-template-columns: 1fr; gap: 3px 0; }
  .shop-box dt { margin-top: 10px; }
  .concept { padding: 72px 0; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-slide img, .hero-slide.active img { transform: none; }
}