/* ============================================================
   中央図書館 — theme
   palette: crimson / tan / warm gray, after classic library print
   ============================================================ */

:root {
  --crimson: #8a1f2d;
  --crimson-dark: #6d1421;
  --crimson-ink: #7c1b29;
  --tan: #b3a08c;
  --tan-dark: #8f7a63;
  --tan-pale: #cdbfae;
  --ink: #3a3532;
  --ink-soft: #6b625c;
  --paper: #ffffff;
  --wash: #f4f2ef;
  --wash-deep: #eceae6;
  --line: #ddd8d2;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* iOS 26 Safari chrome, learned the hard way:
   - theme-color is ignored; the *body* background drives the status bar tint
     (the progressive haze at the top) AND the overscroll rubber-band — one
     color rules both ends, so any crimson body near the page bottom paints a
     red haze over the top chrome. body therefore stays paper at all times;
     the bottom bounce showing paper is the lesser evil.
   - html background is chrome-inert; crimson here only fills the area below
     the colophon on pages shorter than the viewport (reads as footer-extend).
   - the bottom toolbar samples the fixed .ios-chrome-bottom sentinel instead. */
html { scroll-behavior: smooth; background: var(--crimson); }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { background: var(--paper); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
img, video, iframe { max-width: 100%; }
body { overflow-x: clip; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.topline { height: 5px; background: var(--crimson-dark); }

/* small icons (pure css) */
.i-search {
  display: inline-block; width: 11px; height: 11px;
  border: 2px solid currentColor; border-radius: 50%;
  position: relative; margin-right: 6px; vertical-align: -1px;
}
.i-search::after {
  content: ""; position: absolute; width: 6px; height: 2px;
  background: currentColor; transform: rotate(45deg);
  bottom: -3px; right: -4px; border-radius: 1px;
}
.i-search.lg { width: 14px; height: 14px; margin: 0; }
.i-search.lg::after { width: 8px; bottom: -4px; right: -6px; }
.i-globe {
  display: inline-block; width: 13px; height: 13px;
  border: 1.5px solid currentColor; border-radius: 50%;
  margin-right: 6px; vertical-align: -2px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
}
.i-clock {
  display: inline-block; width: 12px; height: 12px;
  border: 1.5px solid currentColor; border-radius: 50%;
  position: relative; margin-right: 6px; vertical-align: -1px;
}
.i-clock::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 1.5px; height: 4px; background: currentColor;
}
.caret {
  display: inline-block; margin-left: 6px; vertical-align: 2px;
  border: 4px solid transparent; border-top-color: currentColor;
}

/* ============ utility bar ============ */
.utility {
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.utility-inner {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 38px; flex-wrap: wrap;
}
.utility-nav a, .utility-tools a {
  display: inline-block; padding: 8px 12px; color: var(--ink-soft);
}
.utility-nav a:hover, .utility-tools a:hover { color: var(--crimson); }
.utility-nav a + a { border-left: 1px solid var(--line); }
.utility-tools .u-login {
  color: var(--crimson); font-weight: 700; letter-spacing: .15em;
}
.lang-switch {
  display: inline-flex; align-items: center;
  padding: 8px 12px; color: var(--ink-soft);
}
.lang-switch .i-globe { margin-right: 8px; }
.lang-switch a { padding: 0 2px; }
.lang-switch a:hover { color: var(--crimson); }
.lang-switch a.is-current { color: var(--crimson); font-weight: 700; }
.lang-switch .l-sep { opacity: .5; margin: 0 4px; }
.u-logout { display: inline-block; }
.u-logout button {
  border: none; background: transparent;
  font-family: inherit; font-size: 13px; color: var(--ink-soft);
  padding: 8px 12px;
}
.u-logout button:hover { color: var(--crimson); }

/* ============ masthead ============ */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 14px; color: var(--crimson); }
.seal { width: 58px; height: 58px; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  letter-spacing: .3em; color: var(--ink);
}
.brand-sub {
  font-size: 13px; letter-spacing: .3em; color: var(--ink-soft);
  margin-top: 2px;
}
.nav-toggle {
  display: none;
  flex-direction: column; gap: 6px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: 4px;
}
.nav-toggle:active { background: var(--wash); }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--crimson); border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mainnav { display: flex; flex-wrap: wrap; }
.mainnav a {
  display: block; padding: 10px 16px;
  font-size: 16px; font-weight: 600; letter-spacing: .1em;
  border-bottom: 3px solid transparent;
}
.mainnav a:hover, .mainnav a.is-active {
  color: var(--crimson); border-bottom-color: var(--crimson);
}

/* ============ hero ============ */
.hero {
  margin: 28px 0 48px;
  background: var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Ctext x='20' y='60' font-family='serif' font-size='48' fill='%23d9d3ca' opacity='.35'%3E書%3C/text%3E%3Ctext x='90' y='130' font-family='serif' font-size='40' fill='%23d9d3ca' opacity='.25'%3E文%3C/text%3E%3C/svg%3E");
  border: 1px solid var(--line);
  padding: 44px 56px 40px;
  position: relative;
  overflow: hidden;
}
.hero--no-tile { background-image: none; }
.hero > *:not(.hero-backdrop) { position: relative; z-index: 1; }

/* backdrop text pieces: a clipped window onto a larger text */
.hero-backdrop {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.backdrop-piece {
  position: absolute;
  font-family: var(--serif);
  color: #b8ac9c;
  line-height: 1.75;
  letter-spacing: .12em;
  user-select: none;
  white-space: normal;
}
.backdrop-piece.bp-vertical {
  writing-mode: vertical-rl;
  top: 0; height: 100%;
}
.backdrop-piece.bp-vertical.bp-end { right: 0; }
.backdrop-piece.bp-vertical.bp-start { left: 0; writing-mode: vertical-lr; }
.backdrop-piece.bp-vertical.bp-center { left: 50%; transform: translateX(-50%); }
.backdrop-piece.bp-horizontal {
  left: 0; width: 100%;
}
.backdrop-piece.bp-horizontal.bp-start { top: 0; }
.backdrop-piece.bp-horizontal.bp-end { bottom: 0; }
.backdrop-piece.bp-horizontal.bp-center { top: 50%; transform: translateY(-50%); }
.hero-motto {
  display: flex; align-items: center; gap: 28px;
  justify-content: center;
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  letter-spacing: .12em; color: var(--crimson-ink);
  margin-bottom: 36px; text-align: center;
}
.hero-motto .rule { flex: 1; max-width: 180px; height: 1px; background: var(--crimson-ink); }

.search-tabs { display: flex; }
.search-tabs .tab {
  padding: 12px 30px; font-size: 16px; letter-spacing: .08em;
  background: transparent; border: none; color: var(--ink);
  position: relative;
}
.search-tabs .tab.is-active {
  background: var(--tan-dark); color: #fff; font-weight: 600;
}
.search-tabs .tab.is-active::after {
  content: ""; position: absolute; left: 20px; bottom: -14px;
  width: 2px; height: 14px; background: var(--tan-dark);
}

.searchbar {
  display: flex; align-items: stretch;
  background: #fff; border: 1px solid var(--line);
}
.searchbar .scope { display: flex; border-right: 1px solid var(--line); }
.searchbar select {
  border: none; background: #fff; font-size: 16px; padding: 0 36px 0 24px;
  font-family: inherit; color: var(--ink); letter-spacing: .1em;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.searchbar input {
  flex: 1; border: none; font-size: 17px; padding: 20px 22px;
  font-family: inherit; color: var(--ink); background: transparent;
}
.searchbar input::placeholder { color: #b8b1a9; letter-spacing: .08em; }
.searchbar input:focus, .searchbar select:focus { outline: 2px solid var(--tan); outline-offset: -2px; }
.searchbar .go {
  width: 66px; border: none; background: var(--tan-pale); color: var(--ink);
  margin: 5px; transition: background .15s;
}
.searchbar .go:hover { background: var(--tan); color: #fff; }

.hero-links { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }
.hero-links a { text-decoration: underline; text-underline-offset: 4px; }
.hero-links a:hover { color: var(--crimson); }
.hero-links .sep { margin: 0 6px; }

/* ============ activities ============ */
.activities-wrap {
  background: linear-gradient(115deg, var(--paper) 0 18%, var(--wash-deep) 18.2% 100%);
  padding: 40px 0 56px;
}
.activities { position: relative; display: flow-root; }

.section-vertical {
  writing-mode: vertical-rl;
  font-family: var(--serif); font-size: 34px; font-weight: 600;
  letter-spacing: .5em; color: var(--ink);
  border-top: 4px solid var(--crimson);
  padding-top: 18px;
  float: left; margin-right: 36px; height: 300px;
}

.activities-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 28px;
  align-items: start;
}

/* calendar */
.calendar-card {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.calendar-filter {
  display: flex; background: var(--tan);
  padding: 10px 12px; gap: 0;
}
.calendar-filter select {
  flex: 1; border: 1px solid #fff; background: #fff; padding: 8px 12px;
  font-family: inherit; font-size: 14px; letter-spacing: .1em;
}
.calendar-filter button {
  border: none; background: var(--ink); color: #fff;
  padding: 0 22px; font-size: 14px; letter-spacing: .2em;
}
.calendar-filter button:hover { background: var(--crimson); }
.calendar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 6px;
}
.cal-month { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: .08em; }
.cal-arrow {
  width: 30px; height: 30px; border: 1px solid var(--ink);
  background: #fff; font-size: 14px;
}
.cal-arrow:hover { background: var(--wash); }
.calendar { width: 100%; border-collapse: collapse; font-size: 14px; }
.calendar th { font-weight: 600; padding: 8px 0; }
.calendar th.sun, .calendar td:first-child { color: var(--crimson); }
.calendar th.sat, .calendar td:last-child { color: var(--crimson); }
.calendar td {
  text-align: center; padding: 7px 0; width: 14.28%;
  position: relative;
}
.calendar td.dim { color: #b8b1a9; }
.calendar td.closed { background: var(--wash-deep); color: #a09890; }
.calendar td.today { outline: 1.5px solid var(--crimson); outline-offset: -5px; font-weight: 700; }
.calendar td.ev::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 3px; width: 14px; height: 2px; background: var(--crimson);
}
.cal-legend {
  display: flex; gap: 18px; padding: 12px 18px 16px;
  font-size: 12px; color: var(--ink-soft);
}
.cal-legend span::before {
  content: ""; display: inline-block; width: 12px; height: 12px;
  margin-right: 6px; vertical-align: -2px;
}
.lg-today::before { border: 1.5px solid var(--crimson); }
.lg-closed::before { background: var(--wash-deep); }
.lg-event::before { height: 2px !important; width: 14px !important; background: var(--crimson); vertical-align: 3px !important; }

/* event carousel */
.carousel { overflow: hidden; }
.carousel-track {
  display: flex; transition: transform .4s ease;
}
.carousel-page {
  flex: none; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.event-card {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
}
.event-art {
  height: 190px; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 76px; color: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
}
.art-a { background: linear-gradient(135deg, #a8b8a0, #6f8a74); }
.art-b { background: linear-gradient(135deg, #cdb892, #a08a5f); }
.art-c { background: linear-gradient(135deg, #8d9db0, #5d7189); }
.art-d { background: linear-gradient(135deg, #b89a9a, #8a5d63); }
.event-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.badges { display: flex; gap: 6px; }
.badge {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  color: #fff; padding: 3px 10px;
}
.badge-crimson { background: var(--crimson); }
.badge-dark { background: var(--crimson-dark); }
.badge-gold { background: var(--tan-dark); }
.event-time { font-size: 13px; color: var(--ink-soft); }
.event-title {
  font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: .04em;
  flex: 1;
}
.event-meta { display: flex; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.chip {
  font-size: 13px; padding: 3px 12px; background: var(--wash);
  color: var(--ink-soft); border-radius: 2px;
}
.chip-open { background: #f3dede; color: var(--crimson); }
.chip-closed { background: var(--wash-deep); color: #8d857e; }

.carousel-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 20px;
}
.car-arrow, .f-arrow {
  border: none; background: transparent; color: var(--tan-dark);
  font-size: 18px; padding: 2px 6px;
}
.car-arrow:hover, .f-arrow:hover { color: var(--crimson); }
.dots { display: inline-flex; gap: 8px; }
.dots .dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; background: var(--tan-pale); padding: 0;
  transition: width .2s;
}
.dots .dot.is-active { background: var(--crimson); width: 26px; border-radius: 5px; }

/* horizontal section heading */
.section-h {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: .2em; margin-bottom: 22px;
  padding-top: 14px; position: relative;
}
.section-h::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 4px; background: var(--crimson);
}

/* more button */
.more-row { text-align: center; margin-top: 36px; clear: both; }
.btn-more {
  display: inline-flex; align-items: center; gap: 40px;
  background: linear-gradient(100deg, var(--tan-pale), var(--tan-dark));
  color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .2em;
  padding: 16px 30px 16px 44px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: filter .15s;
}
.btn-more:hover { filter: brightness(1.06); }
.btn-more .arrow { font-size: 14px; }

/* ============ announcements ============ */
.announce {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding-top: 64px; padding-bottom: 64px;
  align-items: start;
}
.announce-h { grid-column: 1 / -1; margin-bottom: 0; }
.announce.single { grid-template-columns: 1fr; }

.featured { position: relative; border: 1px solid var(--line); }
.featured-page { display: none; }
.featured-page.is-active { display: block; }
.featured-art {
  min-height: 460px;
  background:
    radial-gradient(ellipse 120% 60% at 50% 108%, rgba(255,255,255,.28), transparent 60%),
    linear-gradient(170deg, #4a4642 0%, #6b655e 55%, #8d857b 100%);
  color: #f3efe8;
  padding: 36px 40px;
  display: flex; flex-direction: column;
}
.featured-art.alt {
  background:
    radial-gradient(ellipse 120% 60% at 50% 108%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(170deg, #3f4a45 0%, #5d6e63 55%, #82917f 100%);
}
.featured-kicker { font-size: 18px; font-weight: 600; letter-spacing: .1em; }
.featured-display {
  font-family: var(--serif); font-size: 64px; font-weight: 600;
  letter-spacing: .35em; text-align: center; margin: auto 0;
  text-indent: .35em;
}
.featured-sub {
  text-align: center; font-family: var(--serif); font-size: 17px;
  letter-spacing: .2em; margin-bottom: 28px;
}
.featured-facts {
  border-top: 1px solid rgba(255,255,255,.4);
  padding-top: 18px;
  font-size: 14px; letter-spacing: .08em;
  display: grid; gap: 6px;
}
.featured-bar {
  display: flex; align-items: stretch;
  background: rgba(42,38,35,.95); color: #d8d2c9;
  font-size: 13px;
}
.featured-jump {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; color: inherit;
  padding: 14px 18px; text-align: left; letter-spacing: .05em;
  border-right: 1px solid rgba(255,255,255,.15);
}
.featured-jump .num { color: #d9b23c; font-weight: 700; }
.featured-jump.is-active, .featured-jump:hover { background: rgba(255,255,255,.08); color: #fff; }
.featured-count { align-self: center; padding: 0 14px; white-space: nowrap; }
.featured-arrows { align-self: center; padding-right: 10px; white-space: nowrap; }
.featured-arrows .f-arrow { color: #d8d2c9; }
.featured-arrows .f-arrow:hover { color: #fff; }

/* notice list (flat rows with pill category filter, after the reference library) */
.pill-tabs {
  display: flex; flex-wrap: wrap;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}
.ptab {
  flex: 1; border: 1px solid transparent; background: transparent;
  border-radius: 999px; padding: 8px 18px;
  font-size: 14px; letter-spacing: .1em; color: var(--ink-soft);
  white-space: nowrap;
}
.ptab:hover { color: var(--crimson); }
.ptab.is-active {
  background: #fff; border-color: var(--tan-pale);
  color: var(--crimson); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.notice-list {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.notice-list li { display: none; }
.notice-list li.is-shown { display: block; border-top: 1px dashed var(--line); }
.notice-list li.is-shown.first-shown { border-top: none; }
.notice-list a {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 14px 40px 14px 20px; position: relative;
}
.notice-list a::after {
  content: "\276F"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); color: var(--tan-dark); font-size: 12px;
}
.notice-list a:hover { background: var(--wash); }
.notice-list a:hover .n-title { color: var(--crimson); }
.notice-list time { flex: none; font-size: 14px; font-weight: 700; color: var(--tan-dark); letter-spacing: .08em; }
.n-where { flex: none; font-size: 12px; font-weight: 700; color: var(--crimson); letter-spacing: .15em; }
.n-title { font-size: 15px; line-height: 1.7; }
.notice-empty {
  border: 1px solid var(--line); background: #fff;
  padding: 22px 20px; font-size: 14px; color: var(--ink-soft);
  letter-spacing: .08em;
}
.see-all { text-align: right; margin-top: 16px; }
.see-all a {
  font-size: 14.5px; font-weight: 600; color: var(--crimson);
  letter-spacing: .1em;
}
.see-all a span { font-size: 11px; margin-left: 8px; }
.see-all a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ branch guide ============ */
.branches-wrap {
  background: var(--wash);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 48px 0 56px;
}
.branches {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.branch-card {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 26px 26px 20px; text-align: center;
}
.branch-mark { width: 64px; height: 40px; color: var(--ink-soft); }
.branch-name {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: .3em; margin: 6px 0 10px;
}
.branch-hours { font-size: 14.5px; font-weight: 600; letter-spacing: .04em; }
.branch-closed {
  font-size: 12.5px; color: var(--ink-soft); letter-spacing: .03em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px; margin-bottom: 6px;
}
.branch-links {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 14px; margin-top: 6px;
}
.branch-links a {
  font-size: 14px; font-weight: 600; color: var(--crimson); letter-spacing: .08em;
}
.branch-links a span { font-size: 10px; margin-left: 7px; }
.branch-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* mini calendar variant (closed days only) */
.calendar.mini { font-size: 12.5px; }
.calendar.mini th { padding: 6px 0; font-weight: 600; }
.calendar.mini td { padding: 4px 0; }
.calendar.mini td.today { outline-offset: -3px; }
.calendar td.off {
  background: #f2d7d4; color: var(--crimson-dark); font-weight: 600;
}

/* calendar month arrows are links (real month navigation) */
a.cal-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); text-decoration: none;
}

/* branch details on the 各館 page */
.branch-addr { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 8px; }
.branch-desc {
  font-size: 13.5px; color: var(--ink-soft); text-align: left;
  line-height: 1.8; border-top: 1px solid var(--line);
  padding-top: 14px; margin-top: 6px;
}
.kakukan-branches { margin-top: 32px; }

/* collections page (蔵書): computed holdings + collection log */
.zosho-intro { margin-top: 8px; }
.zosho-table { margin-top: 24px; max-width: 560px; }
.zosho-table td.num, .zosho-log td.num { text-align: right; font-variant-numeric: tabular-nums; }
.zosho-total td { font-weight: 700; background: var(--wash); }
.zosho-h {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: .12em; margin: 36px 0 10px;
}
.zosho-loc { margin-left: 10px; font-size: 13px; color: var(--ink-soft); }
.zosho-log { margin-top: 16px; }

/* events page (活動申込): filterable grid of event cards */
.events-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  margin-top: 28px; list-style: none; padding: 0;
}
.events-list li { display: none; }
.events-list li.is-shown { display: block; }
.events-list .event-card { height: 100%; }

/* ============ service cards ============ */
.promos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px;
  padding-top: 64px; padding-bottom: 64px;
}
.promo { display: block; }
.promo-art {
  display: flex; align-items: center; justify-content: center;
  height: 168px; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--serif); font-size: 72px; color: rgba(255,255,255,.88);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .15s, transform .15s;
}
.promo:hover .promo-art { box-shadow: 0 5px 16px rgba(0,0,0,.14); transform: translateY(-2px); }
.pa-a { background: linear-gradient(135deg, #8d9db0, #5d7189); }
.pa-b { background: linear-gradient(135deg, #a8b8a0, #6f8a74); }
.pa-c { background: linear-gradient(135deg, #b89a9a, #8a5d63); }
.pa-d { background: linear-gradient(135deg, #cdb892, #a08a5f); }
.pa-e { background: linear-gradient(135deg, #9f8faf, #6e5d82); }
.pa-f { background: linear-gradient(135deg, #8fa9a9, #567878); }
.promo-cap {
  display: block; margin-top: 12px;
  font-size: 14.5px; line-height: 1.7; letter-spacing: .04em;
  color: var(--ink);
}
.promo:hover .promo-cap { color: var(--crimson); text-decoration: underline; text-underline-offset: 4px; }

/* ============ shared page chrome ============ */
.crumb { font-size: 13px; color: var(--ink-soft); margin-bottom: 28px; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: var(--crimson); }
.crumb-sep { margin: 0 10px; font-size: 10px; }
.page-title {
  font-family: var(--serif); font-size: 34px; font-weight: 600;
  letter-spacing: .2em; color: var(--crimson-ink);
  border-bottom: 1px solid var(--line); padding-bottom: 16px;
}
.page-note { margin-top: 20px; font-size: 15px; letter-spacing: .06em; color: var(--ink-soft); }

.stub { padding: 56px 24px 120px; }
.stub-note { margin-top: 32px; font-size: 17px; letter-spacing: .1em; }

.listpage { padding: 48px 24px 96px; }
.formpage { padding: 48px 24px 96px; max-width: 760px; }
.formpage.slim { max-width: 560px; }

/* pagination */
.pager {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-top: 40px;
}
.pg-num, .pg-arrow {
  min-width: 38px; height: 38px; padding: 0 6px;
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; color: var(--ink);
}
.pg-arrow { font-size: 11px; color: var(--tan-dark); }
.pg-num:hover, .pg-arrow:hover { border-color: var(--crimson); color: var(--crimson); }
.pg-num.is-active {
  background: var(--crimson); border-color: var(--crimson);
  color: #fff; font-weight: 700;
}

/* archive list tools */
.list-tools {
  display: flex; gap: 16px; align-items: center;
  margin: 28px 0 18px; flex-wrap: wrap;
}
.year-select {
  border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 14px; letter-spacing: .08em;
  padding: 10px 36px 10px 16px; color: var(--ink);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.list-tools .pill-tabs { flex: 1; margin-bottom: 0; min-width: 320px; }

/* ============ publications list ============ */
.pub-list { margin-top: 28px; display: grid; gap: 20px; }
.pub-card {
  display: flex; gap: 24px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 20px;
  transition: box-shadow .15s, border-color .15s;
}
.pub-card:hover { border-color: var(--tan-dark); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.pub-card:hover .pub-title { color: var(--crimson); }
.pub-thumb {
  flex: none; width: 168px; height: 118px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 52px; color: rgba(255,255,255,.88);
  border: 1px solid var(--line);
}
.pub-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pub-title {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  letter-spacing: .06em; line-height: 1.5;
}
.pub-intro { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.pub-meta {
  margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-soft);
}
.pub-meta time { font-weight: 700; color: var(--tan-dark); }
.pub-meta .m-sep { opacity: .55; }

/* ============ encyclopedia browser ============ */
.listpage .post-grid { margin-top: 32px; }
.entry-col { display: grid; gap: 16px; align-content: start; }
.jiten-welcome {
  justify-self: end;
  font-size: 14px; font-weight: 600; color: var(--crimson); letter-spacing: .08em;
}
.jiten-welcome span { font-size: 10px; margin-left: 7px; }
.jiten-welcome:hover { text-decoration: underline; text-underline-offset: 4px; }
.entry-list {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.entry-list li + li { border-top: 1px dashed var(--line); }
.entry-list a {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 16px 44px 16px 20px; position: relative;
}
.entry-list a::after {
  content: "\276F"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); color: var(--tan-dark); font-size: 12px;
}
.entry-list a:hover { background: var(--wash); }
.entry-list a:hover .entry-name { color: var(--crimson); }
.entry-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15.5px; font-weight: 600;
}
.entry-sub { font-size: 13.5px; color: var(--ink-soft); }
.entry-list .chip { margin-left: auto; }
.chip-neg { background: #f3dede; color: var(--crimson); }

/* ============ forms ============ */
.form-intro { margin: 28px 0; }
.form-intro a { color: var(--crimson); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.form-card {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 32px 34px;
  display: grid; gap: 24px;
}
.field { display: grid; gap: 8px; }
.field label {
  font-size: 14.5px; font-weight: 600; letter-spacing: .1em;
  display: flex; align-items: center; gap: 10px;
}
.req {
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  color: #fff; background: var(--crimson); padding: 1px 8px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
  border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 14px; letter-spacing: .04em;
  width: 100%;
}
.field textarea { resize: vertical; line-height: 1.8; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--tan); outline-offset: -1px;
}
.field-help { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .04em; }
.field-help a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
.field-error { font-size: 12.5px; font-weight: 600; color: var(--crimson); letter-spacing: .04em; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--crimson); }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { outline-color: var(--crimson); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

.check {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 14px; letter-spacing: .05em;
}
.check input { accent-color: var(--crimson); }
.check a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }

.form-actions {
  display: flex; gap: 16px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.btn-primary {
  border: 1px solid var(--crimson); background: var(--crimson); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .3em;
  text-indent: .3em; padding: 12px 36px;
  transition: background .15s;
}
.btn-primary:hover { background: var(--crimson-dark); }
.btn-ghost {
  display: inline-block;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 14px; letter-spacing: .2em; text-indent: .2em;
  padding: 11px 26px;
}
.btn-ghost:hover { border-color: var(--crimson); color: var(--crimson); }

/* auth extras */
.form-alert { margin: 0 0 24px; }
.qr-box {
  background: #fff; border: 1px solid var(--line);
  padding: 24px; text-align: center; margin-bottom: 24px;
}
.qr-box img { border: 1px solid var(--line); }
.qr-secret { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.qr-secret .file-chip { margin-left: 10px; }
.profile-card { gap: 20px; }
.profile-head { display: flex; align-items: center; gap: 16px; }
.profile-head .avatar { width: 56px; height: 56px; font-size: 24px; }
.profile-name { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .08em; }
.profile-badges { margin-top: 4px; }
.profile-facts { display: grid; gap: 10px; }
.profile-facts div {
  display: flex; gap: 18px; align-items: baseline;
  border-bottom: 1px dashed var(--line); padding-bottom: 10px;
}
.profile-facts dt {
  flex: none; width: 140px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--ink-soft);
}
.profile-facts dd { font-size: 15px; }
.inline-form { display: inline-block; margin-left: auto; }

/* buntai + misc content pages */
.buntai { max-width: 900px; }
.buntai-body { display: grid; gap: 16px; margin-top: 28px; }
.buntai-body > p { font-size: 15.5px; line-height: 2; letter-spacing: .04em; }
.buntai-more { text-align: left; margin-top: 12px; }

/* parsed language guide */
.guide-sec { margin-top: 44px; }
.guide-h {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  letter-spacing: .15em; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--wash-deep);
  position: relative;
}
.guide-h::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 72px; height: 2px; background: var(--crimson);
}
.guide-card {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 6px 22px 18px;
}
.g-head {
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  letter-spacing: .1em; color: var(--crimson-ink);
  margin: 20px 0 4px;
}
.guide-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 8px 24px; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.guide-row:last-child { border-bottom: none; }
.g-sk { font-size: 15.5px; line-height: 1.9; letter-spacing: .03em; }
.g-ja { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
@media (max-width: 700px) {
  .guide-row { grid-template-columns: 1fr; gap: 2px; }
}
.item-meta { font-size: 13px; color: var(--ink-soft); letter-spacing: .04em; }
.exhibit-link {
  color: var(--crimson); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* admin panel */
.kanri-stats { display: flex; gap: 10px; margin: 24px 0; flex-wrap: wrap; }
.kanri-h {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  letter-spacing: .15em; margin: 32px 0 14px;
}
.kanri-scroll { overflow-x: auto; }
.kanri-table { font-size: 13.5px; }
.kanri-table td { vertical-align: top; }
.kanri-table .chip { margin: 1px 2px 1px 0; display: inline-block; }
.kanri-dim { font-size: 12px; color: var(--ink-soft); }
.kanri-content { max-width: 360px; }
.kanri-actions { white-space: nowrap; }
.kanri-actions form { display: inline-block; margin: 1px 2px; }
.btn-mini {
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  font-family: inherit; font-size: 12px; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 2px;
}
.btn-mini:hover { border-color: var(--crimson); color: var(--crimson); }
.btn-mini.danger:hover { background: var(--crimson); color: #fff; }
.kanri-table a { color: var(--crimson); text-decoration: underline; text-underline-offset: 2px; }
.kanri-spacer { flex: 1; }
.kanri-stats .btn-ghost { padding: 7px 18px; font-size: 13px; }
a.btn-mini { display: inline-block; text-decoration: none; }

/* compose editor */
.composepage { max-width: 900px; }
.composepage .form-card { margin-top: 24px; }
.compose-sections { display: grid; gap: 18px; }
.compose-sec {
  border: 1px dashed var(--tan-pale); border-radius: 3px;
  padding: 16px 18px; display: grid; gap: 14px;
  background: var(--wash);
}
.sec-tools { text-align: right; }
.compose-select {
  border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 14px; width: 100%;
}

/* ============ search results ============ */
.results-bar { margin-top: 28px; }
.result-count {
  margin: 20px 0 14px; font-size: 14.5px; letter-spacing: .06em;
  color: var(--ink-soft);
}
.result-list {
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.result-list li + li { border-top: 1px dashed var(--line); }
.result-list a {
  display: flex; gap: 18px; align-items: baseline;
  padding: 16px 20px;
}
.result-list a:hover { background: var(--wash); }
.result-list a:hover .result-title { color: var(--crimson); }
.result-list .badges { flex: none; }
.result-body { display: grid; gap: 4px; min-width: 0; }
.result-title { font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.result-sub { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.result-list time { margin-left: auto; flex: none; font-size: 13px; color: var(--tan-dark); font-weight: 700; }

/* ============ not found ============ */
.lost { padding: 96px 24px 140px; text-align: center; }
.lost-code {
  font-family: var(--serif); font-size: 88px; font-weight: 600;
  letter-spacing: .3em; text-indent: .3em; color: var(--wash-deep);
  -webkit-text-stroke: 1px var(--tan-pale);
  line-height: 1; margin-bottom: 18px;
}
.lost .page-title { border-bottom: none; padding-bottom: 0; }
.lost-note { margin-top: 14px; font-size: 15px; color: var(--ink-soft); letter-spacing: .08em; }

/* ============ post view ============ */
.post { padding: 48px 24px 96px; }
.post .crumb { margin-bottom: 40px; }

.post-grid {
  display: grid; grid-template-columns: 250px 1fr; gap: 56px;
  align-items: start;
}

/* table of contents (after the reference library's side card) */
.post-side { position: sticky; top: 24px; }
.toc {
  border: 1px solid var(--tan-pale);
  border-radius: 4px;
  background: #fff;
  padding: 6px 18px 10px;
}
.toc-head {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  letter-spacing: .3em; color: var(--crimson-ink);
  padding: 12px 2px; border-bottom: 1px solid var(--tan-pale);
}
.toc-link {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent;
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  letter-spacing: .08em; line-height: 1.5;
  padding: 11px 2px 11px 14px; position: relative;
}
.toc-link + .toc-link { border-top: 1px dashed var(--line); }
.toc-link::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0; background: var(--crimson);
  transition: height .15s;
}
.toc-link:hover { color: var(--crimson); }
.toc-link.is-active { color: var(--crimson); font-weight: 600; }
.toc-link.is-active::before { height: 16px; }

/* article */
.post-header { margin-bottom: 40px; }
.post-title {
  font-family: var(--serif); font-size: 36px; font-weight: 600;
  letter-spacing: .08em; line-height: 1.4;
  margin: 14px 0 12px;
}
.post-meta { font-size: 13.5px; color: var(--ink-soft); letter-spacing: .05em; }
.post-meta .m-sep { margin: 0 10px; opacity: .55; }
.post-tags { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 12px; letter-spacing: .12em; color: var(--tan-dark);
  border: 1px solid var(--tan-pale); padding: 2px 12px; border-radius: 2px;
}

.post-sec { margin-bottom: 44px; scroll-margin-top: 24px; }
.post-sec p { font-size: 15.5px; line-height: 2; letter-spacing: .04em; }
.post-sec p + p { margin-top: 14px; }
.post-lead {
  font-family: var(--serif); font-size: 18px !important;
  letter-spacing: .08em !important; color: var(--crimson-ink);
  margin-bottom: 16px;
}
.post-sec h2 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: .12em; margin-bottom: 20px;
  padding-bottom: 10px; border-bottom: 2px solid var(--wash-deep);
  position: relative;
}
.post-sec h2::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 96px; height: 2px; background: var(--crimson);
}

/* quote */
.post-quote {
  margin: 24px 0 8px; padding: 22px 28px;
  background: var(--wash);
  border-left: 3px solid var(--crimson);
}
.post-quote p {
  font-family: var(--serif); font-size: 17px !important;
  letter-spacing: .1em !important;
}
.post-quote cite {
  display: block; text-align: right; font-style: normal;
  font-size: 13px; color: var(--ink-soft); margin-top: 8px;
}

/* figure */
.post-figure { margin: 28px 0 8px; }
.figure-art {
  height: 220px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #9aa8b8, #63758a);
  border: 1px solid var(--line);
  font-family: var(--serif); font-size: 84px; color: rgba(255,255,255,.85);
}
.post-figure figcaption {
  font-size: 13px; color: var(--ink-soft); margin-top: 10px;
  letter-spacing: .08em;
}

/* labeled blocks (after the reference library's gray label bars) */
.labeled-block { border: 1px solid var(--line); margin-bottom: 18px; }
.block-label {
  background: var(--wash-deep); color: var(--ink);
  font-size: 14px; font-weight: 600; letter-spacing: .08em;
  padding: 9px 16px;
}
.block-body { padding: 16px 18px; display: grid; gap: 12px; }
.io { display: flex; gap: 14px; align-items: baseline; font-size: 15px !important; }
.io-key {
  flex: none; font-size: 12px; font-weight: 600; letter-spacing: .2em;
  color: #fff; background: var(--tan-dark); padding: 2px 10px;
}
.io-text { line-height: 1.9; }
.file-chip {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; color: var(--crimson);
  background: var(--wash); border: 1px solid var(--line);
  padding: 3px 12px; border-radius: 2px;
}

/* note */
.post-note {
  background: #f6efe4; border: 1px solid var(--tan-pale);
  border-left: 4px solid var(--tan-dark);
  padding: 18px 22px;
}
.post-note.negative {
  background: #f7e9e9; border-color: #e2c4c4;
  border-left-color: var(--crimson);
}

/* sources */
.sources { display: grid; gap: 0; border: 1px solid var(--line); }
.sources li {
  display: flex; gap: 20px; align-items: baseline;
  padding: 13px 18px; font-size: 14.5px;
}
.sources li + li { border-top: 1px dashed var(--line); }
.src-name { font-weight: 600; }
.src-type {
  font-size: 12px; color: var(--tan-dark);
  border: 1px solid var(--tan-pale); padding: 1px 10px;
}
.sources time { margin-left: auto; color: var(--ink-soft); font-size: 13px; }

.post-back { text-align: left; margin-top: 56px; }

/* code block */
.code-block { margin-bottom: 22px; border: 1px solid #262220; }
.code-head {
  background: #262220; color: #cfc8bf;
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  padding: 8px 16px;
}
.code-block pre {
  background: #322d2a; color: #ece6dd;
  padding: 18px 20px; overflow-x: auto;
  font-size: 13.5px; line-height: 1.8;
}
.code-block code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* table */
.post-table {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; margin-bottom: 22px;
  border: 1px solid var(--line);
}
.post-table caption {
  caption-side: top; text-align: left;
  font-size: 13px; color: var(--ink-soft); letter-spacing: .08em;
  padding-bottom: 8px;
}
.post-table th {
  background: var(--wash-deep); font-weight: 600; letter-spacing: .06em;
  padding: 10px 16px; text-align: left;
  border: 1px solid var(--line);
}
.post-table td { padding: 10px 16px; border: 1px solid var(--line); }
.post-table td.ok { color: #2c6e49; font-weight: 600; }
.post-table td.no { color: var(--crimson); font-weight: 600; }

/* video */
.post-video { margin: 4px 0 8px; }
.video-frame {
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, #3a3532, #57504b);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.video-frame .play {
  width: 0; height: 0;
  border-left: 30px solid rgba(255,255,255,.85);
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  margin-left: 6px;
}
.post-video figcaption {
  font-size: 13px; color: var(--ink-soft); margin-top: 10px;
  letter-spacing: .08em;
}

/* keep long content inside its column: without min-width:0, grid/flex
   children refuse to shrink below their content width and force the
   whole page wider than the viewport */
.post-main, .entry-col, .pub-body, .result-body { min-width: 0; }
.prose, .post-lead, .post-title, .io-text, .review-text, .n-title,
.pub-title, .result-title { overflow-wrap: break-word; }
.io-text { min-width: 0; }

/* rendered article body (markdown-processed HTML from the data store) */
.prose { min-width: 0; }
.prose p { font-size: 15.5px; line-height: 2; letter-spacing: .04em; }
.prose p + p { margin-top: 14px; }
.prose strong { font-weight: 700; }
.prose a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 12px 0; padding-left: 26px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: 15.5px; line-height: 1.9; letter-spacing: .04em; }
.prose h3 {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: .08em; margin: 22px 0 10px;
}
.prose pre {
  background: #322d2a; color: #ece6dd;
  border: 1px solid #262220;
  padding: 18px 20px; overflow-x: auto;
  font-size: 13.5px; line-height: 1.8;
  margin: 14px 0;
}
.prose pre code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.prose code.inline-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; color: var(--crimson-dark);
  background: var(--wash); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 2px;
}
.post-lead.prose p {
  font-family: var(--serif); font-size: 18px; letter-spacing: .08em;
  color: var(--crimson-ink);
}

/* article media */
.hero-img { width: 100%; display: block; border: 1px solid var(--line); }
.video-embed {
  aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--line); background: #262220;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.sec-media { margin: 18px 0; }
.sec-media img, .sec-media video {
  width: 100%; display: block; border: 1px solid var(--line);
}
.sec-media figcaption {
  font-size: 13px; color: var(--ink-soft); margin-top: 8px; letter-spacing: .06em;
}
.io .io-text.prose p { font-size: 15px; line-height: 1.9; }
.pub-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* reader reviews */
.reviews { display: grid; gap: 0; border: 1px solid var(--line); background: #fff; }
.review { display: flex; gap: 16px; padding: 18px 20px; }
.review + .review { border-top: 1px dashed var(--line); }
.avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--wash-deep); color: var(--tan-dark);
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.review-body { display: grid; gap: 6px; }
.review-head { display: flex; gap: 14px; align-items: baseline; }
.review-name { font-size: 14.5px; font-weight: 700; letter-spacing: .05em; }
.review-head time { font-size: 12.5px; color: var(--ink-soft); }
.review-text { font-size: 14.5px !important; line-height: 1.9 !important; }
.review-alert { margin: 18px 0; }
.review-form { margin-top: 18px; padding: 24px 26px; }
.review-text { white-space: pre-line; }
.review-head { flex-wrap: wrap; }
.review-head .chip { font-size: 11.5px; padding: 1px 9px; }
.rev-login { margin-top: 18px; }
.rev-login a {
  color: var(--crimson); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}

/* ============ sitemap footer ============ */
.sitemap {
  background: var(--wash-deep);
  border-top: 1px solid var(--line);
  padding: 40px 0 44px;
}
.sitemap .container { position: relative; }
.to-top {
  position: absolute; right: 24px; top: -63px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 2px;
  background: var(--crimson); color: #fff;
  font-size: 18px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: background .15s;
}
.to-top:hover { background: var(--crimson-dark); }
/* visually hidden, not display:none — the label still names the button */
.to-top-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.sitemap-cols {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
}
.sitemap .col h3 {
  font-size: 16px; letter-spacing: .15em; margin-bottom: 14px;
  padding-top: 10px; position: relative;
}
.sitemap .col h3::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 4px; background: var(--crimson);
}
/* heading is a button so the mobile accordion is keyboard-reachable;
   on desktop it renders as the plain heading it replaced */
.col-toggle {
  display: block; width: 100%;
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; letter-spacing: inherit;
  text-align: left; cursor: default;
}
.sitemap .col a {
  display: block; font-size: 14px; color: var(--ink-soft);
  padding: 4px 0;
}
.sitemap .col a:hover { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }

/* iOS 26 Safari bottom-toolbar tint: sampled from a fixed element near the
   bottom edge (must be ≥80% wide, ≥3px tall, within ~3px of the edge, and
   display:none — not opacity:0 — when off). Colored like .colophon so the
   floating chrome reads seamlessly against the footer. Hidden by default;
   enabled only on iOS-class small screens to avoid iPad/desktop side effects. */
.ios-chrome-bottom {
  display: none;
  position: fixed;
  left: 0;
  bottom: -8px;
  width: 100%;
  min-height: 12px;
  background: var(--crimson);
  pointer-events: none;
  z-index: 2147483647;
  /* promote to its own compositor layer so it tracks momentum scrolling
     instead of lagging and flashing white behind it during a hard fling */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .ios-chrome-bottom { display: block; }
  }
}

/* ============ colophon ============ */
.colophon { background: var(--crimson); color: #fff; }
.colophon-inner {
  display: flex; justify-content: space-between; gap: 40px;
  padding-top: 40px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  flex-wrap: wrap;
}
.colophon-brandrow {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
.seal-inverse { width: 48px; height: 48px; color: #fff; flex: none; }
.colophon-brand {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  letter-spacing: .35em; line-height: 1.2;
}
.colophon-sub {
  font-size: 12px; letter-spacing: .28em; opacity: .8; margin-top: 3px;
}
.addr { display: grid; gap: 5px; font-size: 14px; letter-spacing: .05em; }
.addr div { display: flex; gap: 18px; }
.addr dt { font-weight: 700; white-space: pre; }
.colophon-right {
  font-size: 14px; letter-spacing: .05em; text-align: right;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.colophon-links a { font-weight: 600; }
.colophon-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.colophon-links span { margin: 0 8px; opacity: .6; }
.colophon-meta {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  display: grid; gap: 6px;
  font-size: 13px; opacity: .92;
}

/* ============ responsive ============ */
@media (max-width: 1000px) {
  .masthead-inner { justify-content: space-between; }
  .brand { flex: 1; min-width: 0; }
  .nav-toggle { display: flex; flex: none; }
  .mainnav {
    display: none;
    flex-basis: 100%; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--crimson);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .1);
    margin-top: 14px;
  }
  .mainnav.is-open { display: flex; }
  .mainnav a {
    padding: 14px 18px;
    font-size: 15px; letter-spacing: .15em;
    border-bottom: 1px solid var(--wash-deep);
  }
  .mainnav a:last-child { border-bottom: none; }
  .mainnav a:hover { background: var(--wash); color: var(--crimson); }
  .mainnav a.is-active {
    color: var(--crimson); background: var(--wash);
    box-shadow: inset 3px 0 0 var(--crimson);
  }
  .field-row { grid-template-columns: 1fr; }
  .pub-card { flex-direction: column; }
  .pub-thumb { width: 100%; height: 150px; }
  .result-list time { margin-left: 0; }
  .activities-grid { grid-template-columns: 1fr; }
  .section-vertical { float: none; writing-mode: horizontal-tb; height: auto; margin: 0 0 24px; padding-top: 12px; letter-spacing: .3em; }
  .announce { grid-template-columns: 1fr; }
  .branches { grid-template-columns: 1fr; }
  .events-list { grid-template-columns: 1fr; }
  .promos { grid-template-columns: repeat(2, 1fr); }
  .pill-tabs { border-radius: 22px; }
  .ptab { flex: 1 1 30%; }
  .sitemap-cols { grid-template-columns: repeat(2, 1fr); }
  .carousel-page { grid-template-columns: 1fr; }
  .hero { padding: 32px 24px; }
  .hero-motto { font-size: 22px; }
  .colophon-right { text-align: left; }
  .post-grid { grid-template-columns: 1fr; gap: 32px; }
  .post-side { position: static; }
  .post-title { font-size: 28px; }
}

/* small screens */
@media (max-width: 720px) {
  .container { padding: 0 16px; }

  /* utility bar: one clean line — page links live in the menu/footer */
  .utility-nav { display: none; }
  .utility-inner { min-height: 0; }
  .utility-tools {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .utility-tools a, .u-logout button { padding: 9px 7px; white-space: nowrap; }
  .lang-switch { padding: 9px 4px; white-space: nowrap; }
  .lang-switch .i-globe { display: none; }
  .lang-switch .l-sep { margin: 0 2px; }
  .utility-tools .caret { display: none; }

  /* masthead */
  .masthead-inner { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .seal { width: 42px; height: 42px; }
  .brand { gap: 10px; }
  .brand-name { font-size: 20px; letter-spacing: .18em; }
  .brand-sub { font-size: 11px; letter-spacing: .18em; }

  /* hero */
  .hero { padding: 26px 18px 24px; margin: 18px 0 32px; }
  .hero-motto {
    font-size: 17px; letter-spacing: .05em;
    gap: 12px; margin-bottom: 22px;
  }
  .hero-motto .rule { max-width: 36px; }
  .search-tabs .tab { flex: 1; padding: 10px 8px; font-size: 13.5px; letter-spacing: .04em; }
  .searchbar input { padding: 14px 12px; font-size: 16px; }
  .searchbar select { padding: 0 26px 0 12px; font-size: 14px; letter-spacing: .04em; }
  .searchbar .go { width: 52px; }

  /* section rhythm */
  .section-h { font-size: 22px; }
  .announce { padding-top: 40px; padding-bottom: 40px; gap: 28px; }
  .promos { gap: 20px 14px; padding-top: 40px; padding-bottom: 48px; }
  .promo-art { height: 120px; font-size: 52px; }
  .promo-cap { font-size: 13px; line-height: 1.6; }
  .activities-wrap { padding: 28px 0 40px; }
  .branches-wrap { padding: 32px 0 40px; }

  /* lists */
  .notice-list a { padding: 12px 32px 12px 14px; gap: 10px; }
  .notice-list time { font-size: 13px; }
  .n-title { font-size: 14px; }
  .pub-card { padding: 14px; gap: 14px; }
  .pub-title { font-size: 18px; }
  .entry-list a { padding: 13px 36px 13px 14px; gap: 10px; }
  .result-list a { flex-wrap: wrap; }
  .result-list time { margin-left: 0; }
  .btn-more { padding: 13px 24px 13px 30px; gap: 22px; font-size: 14px; }

  /* pages */
  .listpage, .formpage, .stub, .post, .lost { padding: 30px 16px 64px; }
  .page-title { font-size: 25px; letter-spacing: .12em; }
  .post .crumb, .listpage .crumb { margin-bottom: 22px; }
  .post-grid { gap: 22px; }
  .post-title { font-size: 24px; }
  .post-sec h2 { font-size: 21px; }
  .post-sec { margin-bottom: 34px; }
  .form-card { padding: 22px 16px; gap: 20px; }
  .block-body { padding: 12px; }
  .io { flex-direction: column; gap: 6px; }
  .io-key { align-self: flex-start; }
  .post-table { display: block; overflow-x: auto; }
  .sources li { flex-wrap: wrap; }
  .sources time { margin-left: 0; width: 100%; }
  .guide-card { padding: 4px 14px 14px; }
  .g-sk { font-size: 14.5px; }

  /* footers — JP mobile conventions (NDL-style): the sitemap as a closed
     accordion, then a full-width 「ページの先頭へ」bar capping the crimson
     colophon — instead of a floating button + ragged columns */
  .sitemap { padding: 0; }
  .to-top {
    position: static;
    width: calc(100% + 32px); height: auto;
    margin: 0 -16px;
    padding: 13px 0;
    gap: 9px;
    border-radius: 0; box-shadow: none;
    background: var(--crimson-dark);
    font-size: 13px; letter-spacing: .18em;
  }
  .to-top-mark { font-size: 15px; }
  .to-top-label {
    position: static; width: auto; height: auto;
    overflow: visible; clip-path: none;
  }
  .sitemap-cols { display: block; }
  .sitemap .col { border-bottom: 1px solid var(--line); }
  .sitemap .col h3 { margin: 0; padding: 0; font-size: 15px; letter-spacing: .12em; }
  .sitemap .col h3::before { display: none; }
  .sitemap .col h3 .col-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 2px;
    cursor: pointer;
  }
  .col-toggle::after {
    content: "+";
    font-size: 20px; font-weight: 400; line-height: 1;
    color: var(--crimson);
  }
  .col.is-open .col-toggle::after { content: "\2212"; }
  .col-links { display: none; padding: 0 0 12px; }
  .col.is-open .col-links { display: block; }
  .sitemap .col a { padding: 8px 12px; }

  .colophon-inner {
    flex-direction: column; align-items: center;
    text-align: center;
    gap: 20px;
    padding-top: 30px;
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  }
  .colophon-brandrow { justify-content: center; gap: 12px; margin-bottom: 12px; }
  .seal-inverse { width: 40px; height: 40px; }
  .colophon-brand { font-size: 21px; letter-spacing: .28em; }
  .addr { font-size: 13px; }
  .addr div { justify-content: center; gap: 10px; }
  .colophon-right { text-align: center; justify-content: flex-start; width: 100%; }
  .colophon-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px 20px;
    font-size: 13.5px;
  }
  .colophon-links span { display: none; }
  .colophon-meta { margin-top: 6px; font-size: 12.5px; }
  .profile-facts dt { width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-track { transition: none; }
}