/* =========================================================================
   THE KOBE MINARET (kobemosque.org) : "Kitano stone-and-timber dusk".
   Portal skeleton (portail-rubriques) redressed as a dusk gazetteer of
   Kitano-cho: ijinkan sandstone ground, kawara roof slate ink, dome
   copper-green accent, lantern white cards, harbor ink dark bands.
   Prefix kbm-, lamp vocabulary:
     court (container)        lantern (header)        way (nav)
     handle (mobile trigger)  threshold (hero)        beacon (button)
     ledger (key figures)     porch (section band)    gatehouse (hub tile)
     tablet (article card)    noticeboard (pinned)    annex (method band)
     ledgerline (rule ornament)  trail (breadcrumb)
     opening (page head)      broadside (wide figure) cloister (grid)
     folio (reading column)   verger (margin)         casket (box)
     jetty (footer)           shuttered (404)
   No external request, no third-party font, no script, light color-scheme,
   fixed tokens on dark bands.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- colors: Kitano dusk ------------------------------------------ */
  --kbm-sand: #E9DFCE;         /* ijinkan sandstone, page ground           */
  --kbm-paper: #FAF6EC;        /* lantern white, cards                     */
  --kbm-tint: #DFD5BE;         /* alternating light band                   */
  --kbm-slate: #3A4750;        /* kawara roof slate, ink                   */
  --kbm-slate-2: #5C6A74;      /* secondary text, captions                 */
  --kbm-harbor: #1D242B;       /* harbor ink: header, method, footer       */
  --kbm-on-harbor: #F2EDE0;    /* text on dark band (fixed)                */
  --kbm-on-harbor-2: #B9C0C4;  /* secondary text on dark (fixed)           */
  --kbm-copper: #2E6B5C;       /* dome copper-green deepened for contrast  */
  --kbm-copper-deep: #1F4A40;  /* hover                                    */
  --kbm-copper-on-dark: #8FC0AE; /* copper readable on dark band           */
  --kbm-kerb: #C9BFA9;         /* thin rule                                */
  --kbm-rail: #3D4A53;         /* rule on dark band                        */

  /* ---- type: system stacks, nothing leaves the page ------------------ */
  --kbm-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --kbm-text: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kbm-mono: "SF Mono", Menlo, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  /* ---- rhythm ---------------------------------------------------------- */
  --kbm-width: 79rem;
  --kbm-verger: 19rem;
  --kbm-measure: 70ch;
  --kbm-gutter: clamp(1rem, 4vw, 2.5rem);
  --kbm-gap: clamp(1rem, 2.4vw, 1.75rem);
  --kbm-breath: clamp(2.2rem, 5vw, 4rem);
  --kbm-corner: 0.45rem;
  --kbm-rule: 1px solid var(--kbm-kerb);
}

/* =========================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kbm-sand);
  color: var(--kbm-slate);
  font-family: var(--kbm-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-wrap: break-word;
}
img, svg, picture { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--kbm-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
p, ul, ol, figure { margin: 0; }
a { color: var(--kbm-copper); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--kbm-copper-deep); }
:focus-visible { outline: 3px solid var(--kbm-copper); outline-offset: 3px; }
::selection { background: var(--kbm-copper); color: #fff; }

.kbm-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--kbm-copper); color: #fff;
  font-family: var(--kbm-display); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.7rem 1.1rem; z-index: 60;
}
.kbm-skip:focus { left: 0.6rem; top: 0.6rem; }

.kbm-court {
  width: 100%;
  max-width: var(--kbm-width);
  margin-inline: auto;
  padding-inline: var(--kbm-gutter);
}

/* =========================================================================
   LANTERN: header on harbor ink, copper rule beneath
   ========================================================================= */
.kbm-lantern { background: var(--kbm-harbor); color: var(--kbm-on-harbor); border-bottom: 3px solid var(--kbm-copper); }
.kbm-lantern__row {
  display: flex; align-items: center; gap: 1.25rem;
  padding-block: 0.9rem;
}
.kbm-brand { display: flex; align-items: center; gap: 0.7rem; color: var(--kbm-on-harbor); text-decoration: none; margin-right: auto; }
.kbm-brand svg { width: 2.4rem; height: 2.4rem; flex: none; }
.kbm-brand__name { display: block; font-family: var(--kbm-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.kbm-brand__line { display: block; font-family: var(--kbm-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kbm-on-harbor-2); }
.kbm-toggle { position: absolute; opacity: 0; pointer-events: none; }
.kbm-handle {
  display: none;
  font-family: var(--kbm-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--kbm-rail); border-radius: var(--kbm-corner);
  color: var(--kbm-on-harbor); padding: 0.5rem 0.9rem; cursor: pointer;
}
.kbm-way ul { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.kbm-way a { color: var(--kbm-on-harbor); text-decoration: none; font-size: 0.98rem; padding: 0.35rem 0.1rem; border-bottom: 2px solid transparent; }
.kbm-way a:hover { color: var(--kbm-copper-on-dark); }
.kbm-way a[aria-current="page"] { border-bottom-color: var(--kbm-copper-on-dark); }

/* =========================================================================
   THRESHOLD: hero, copy left, view right
   ========================================================================= */
.kbm-threshold {
  display: grid; gap: var(--kbm-gap);
  grid-template-columns: 1fr;
  padding-block: var(--kbm-breath);
}
.kbm-kicker {
  font-family: var(--kbm-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kbm-copper); margin: 0 0 0.7rem;
}
.kbm-threshold h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.kbm-lead { font-size: 1.15rem; line-height: 1.55; color: var(--kbm-slate); margin-top: 1rem; max-width: 44ch; }
.kbm-lamps { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.kbm-beacon {
  display: inline-block; background: var(--kbm-copper); color: #fff;
  font-family: var(--kbm-display); font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: 0.7rem 1.3rem; border-radius: var(--kbm-corner);
}
.kbm-beacon:hover { background: var(--kbm-copper-deep); color: #fff; }
.kbm-beacon--hollow { background: transparent; color: var(--kbm-copper); border: 2px solid var(--kbm-copper); padding: calc(0.7rem - 2px) calc(1.3rem - 2px); }
.kbm-beacon--hollow:hover { background: var(--kbm-copper); color: #fff; }
.kbm-threshold__view figure { border: 1px solid var(--kbm-kerb); border-radius: var(--kbm-corner); overflow: hidden; background: var(--kbm-paper); }
.kbm-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; margin: 0.9rem 0 0; padding: 0; border: 1px solid var(--kbm-kerb); border-radius: var(--kbm-corner); background: var(--kbm-paper); overflow: hidden; }
.kbm-ledger li { padding: 0.7rem 0.4rem; text-align: center; }
.kbm-ledger li + li { border-left: 1px solid var(--kbm-kerb); }
.kbm-ledger b { display: block; font-family: var(--kbm-display); font-size: 1.35rem; color: var(--kbm-copper-deep); }
.kbm-ledger span { font-family: var(--kbm-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kbm-slate-2); }

/* =========================================================================
   LEDGERLINE ornament
   ========================================================================= */
.kbm-ledgerline { color: var(--kbm-copper); margin: var(--kbm-breath) auto; max-width: var(--kbm-width); padding-inline: var(--kbm-gutter); }

/* =========================================================================
   PORCH: section band
   ========================================================================= */
.kbm-porch { padding-block: var(--kbm-breath); }
.kbm-porch--tint { background: var(--kbm-tint); border-block: 1px solid var(--kbm-kerb); }
.kbm-porch--first { padding-top: calc(var(--kbm-breath) * 0.7); }
.kbm-porch__head { display: grid; gap: 0.5rem; margin-bottom: 1.6rem; max-width: 62ch; }
.kbm-porch__no { font-family: var(--kbm-mono); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--kbm-copper); }
.kbm-porch h2, .kbm-porch__title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.kbm-porch__note { color: var(--kbm-slate-2); font-size: 1.02rem; }
.kbm-more { font-family: var(--kbm-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* =========================================================================
   GATEHOUSE: hub tiles on home
   ========================================================================= */
.kbm-gates { display: grid; gap: var(--kbm-gap); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.kbm-gatehouse { background: var(--kbm-paper); border: 1px solid var(--kbm-kerb); border-radius: var(--kbm-corner); overflow: hidden; display: grid; }
.kbm-gatehouse__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kbm-tint); }
.kbm-gatehouse__view img { width: 100%; height: 100%; object-fit: cover; }
.kbm-gatehouse__no {
  position: absolute; left: 0.7rem; top: 0.7rem;
  background: var(--kbm-harbor); color: var(--kbm-on-harbor);
  font-family: var(--kbm-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  padding: 0.3rem 0.6rem; border-radius: var(--kbm-corner);
}
.kbm-gatehouse__body { padding: 1.1rem 1.2rem 1.3rem; }
.kbm-gatehouse__body h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.kbm-gatehouse__body h3 a { color: var(--kbm-slate); text-decoration: none; }
.kbm-gatehouse__body h3 a:hover { color: var(--kbm-copper); }
.kbm-gatehouse__body p { color: var(--kbm-slate-2); font-size: 0.99rem; }

/* =========================================================================
   TABLETS: article cards
   ========================================================================= */
.kbm-tablets { display: grid; gap: var(--kbm-gap); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.kbm-tablet { background: var(--kbm-paper); border: 1px solid var(--kbm-kerb); border-radius: var(--kbm-corner); overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr; }
.kbm-tablet__view { aspect-ratio: 16 / 10; overflow: hidden; background: var(--kbm-tint); }
.kbm-tablet__view img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.kbm-tablet:hover .kbm-tablet__view img { transform: scale(1.02); }
.kbm-tablet > p, .kbm-tablet__tag {
  font-family: var(--kbm-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kbm-copper); padding: 0.9rem 1.1rem 0;
}
.kbm-tablet h3 { font-size: 1.12rem; padding: 0.35rem 1.1rem 0; }
.kbm-tablet h3 a { color: var(--kbm-slate); text-decoration: none; }
.kbm-tablet h3 a:hover { color: var(--kbm-copper); }
.kbm-tablet > p:last-child { color: var(--kbm-slate-2); font-size: 0.95rem; padding: 0.4rem 1.1rem 1.1rem; }

/* =========================================================================
   NOTICEBOARD: pinned guides
   ========================================================================= */
.kbm-notice { display: grid; gap: var(--kbm-gap); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.kbm-notice__intro { max-width: 60ch; }
.kbm-notice__intro h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.4rem 0 0.7rem; }
.kbm-notice__intro p { color: var(--kbm-slate-2); }

/* =========================================================================
   ANNEX: method band on harbor ink
   ========================================================================= */
.kbm-annex { background: var(--kbm-harbor); color: var(--kbm-on-harbor); padding-block: var(--kbm-breath); }
.kbm-annex__grid { display: grid; gap: var(--kbm-gap); grid-template-columns: 1fr; }
.kbm-annex h2 { color: var(--kbm-on-harbor); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0.4rem 0 0.9rem; }
.kbm-annex p { color: var(--kbm-on-harbor-2); max-width: 62ch; margin-bottom: 0.9rem; }
.kbm-annex ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; align-content: start; }
.kbm-annex ul a { color: var(--kbm-on-harbor); font-family: var(--kbm-display); font-size: 1.08rem; text-decoration: none; border-bottom: 1px solid var(--kbm-rail); padding-bottom: 0.5rem; display: block; }
.kbm-annex ul a:hover { color: var(--kbm-copper-on-dark); }
.kbm-annex .kbm-kicker { color: var(--kbm-copper-on-dark); }

/* =========================================================================
   OPENING: page head + BROADSIDE figure
   ========================================================================= */
.kbm-opening { padding-top: var(--kbm-breath); }
.kbm-opening .kbm-kicker a { color: var(--kbm-copper); }
.kbm-opening h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); max-width: 22ch; }
.kbm-chapo { font-size: 1.12rem; line-height: 1.55; color: var(--kbm-slate); margin-top: 0.9rem; max-width: 56ch; }
.kbm-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; margin: 1rem 0 0; padding: 0; font-family: var(--kbm-mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kbm-slate-2); }
.kbm-broadside { margin: 1.6rem 0 0; border: 1px solid var(--kbm-kerb); border-radius: var(--kbm-corner); overflow: hidden; background: var(--kbm-paper); }
.kbm-broadside img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.kbm-broadside figcaption { font-size: 0.88rem; color: var(--kbm-slate-2); padding: 0.7rem 1rem; }

/* =========================================================================
   CLOISTER: two-column reading grid
   ========================================================================= */
.kbm-cloister { display: grid; gap: var(--kbm-gap); grid-template-columns: 1fr; margin-top: 1.8rem; padding-bottom: var(--kbm-breath); }
.kbm-folio { min-width: 0; max-width: var(--kbm-measure); }
.kbm-folio h2 { font-size: 1.45rem; margin: 1.9rem 0 0.7rem; padding-top: 1.2rem; border-top: 2px solid var(--kbm-copper); }
.kbm-folio h2:first-child { margin-top: 0; }
.kbm-folio h3 { font-size: 1.15rem; margin: 1.4rem 0 0.5rem; }
.kbm-folio p { margin-bottom: 1rem; }
.kbm-folio ul, .kbm-folio ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.kbm-folio li { margin-bottom: 0.4rem; }
.kbm-verger { display: grid; gap: var(--kbm-gap); align-content: start; }
.kbm-casket { background: var(--kbm-paper); border: 1px solid var(--kbm-kerb); border-radius: var(--kbm-corner); padding: 1.1rem 1.2rem; }
.kbm-casket h2 { font-size: 1.05rem; margin-bottom: 0.7rem; font-family: var(--kbm-display); }
.kbm-casket ol, .kbm-casket ul { margin: 0; padding-left: 1.2rem; font-size: 0.95rem; }
.kbm-casket li { margin-bottom: 0.45rem; }
.kbm-casket--tint { background: var(--kbm-harbor); border-color: var(--kbm-harbor); color: var(--kbm-on-harbor); }
.kbm-casket--tint h2 { color: var(--kbm-on-harbor); }
.kbm-casket--tint a { color: var(--kbm-copper-on-dark); }
.kbm-casket--tint p { color: var(--kbm-on-harbor-2); font-size: 0.95rem; margin-bottom: 0.7rem; }

/* =========================================================================
   TRAIL: breadcrumb
   ========================================================================= */
.kbm-trail ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; list-style: none; margin: 0 0 1.4rem; padding: 0; font-size: 0.88rem; }
.kbm-trail li + li::before { content: "›"; margin-right: 0.6rem; color: var(--kbm-slate-2); }

/* =========================================================================
   JETTY: footer on harbor ink
   ========================================================================= */
.kbm-jetty { background: var(--kbm-harbor); color: var(--kbm-on-harbor); border-top: 3px solid var(--kbm-copper); padding-block: 2.5rem 0; }
.kbm-jetty__row { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.kbm-jetty h2 { font-size: 1rem; font-family: var(--kbm-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--kbm-on-harbor-2); margin-bottom: 0.8rem; }
.kbm-jetty ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.kbm-jetty a { color: var(--kbm-on-harbor); text-decoration: none; }
.kbm-jetty a:hover { color: var(--kbm-copper-on-dark); }
.kbm-jetty p { color: var(--kbm-on-harbor-2); font-size: 0.95rem; margin-top: 0.9rem; max-width: 46ch; }
.kbm-jetty__sign { color: var(--kbm-on-harbor-2); font-size: 0.9rem; margin-top: 0.9rem; }
.kbm-jetty__sign a { color: var(--kbm-on-harbor); }
.kbm-jetty__line { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: space-between; border-top: 1px solid var(--kbm-rail); margin-top: 2rem; padding-block: 1.1rem; font-family: var(--kbm-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--kbm-on-harbor-2); }

/* =========================================================================
   SHUTTERED: 404
   ========================================================================= */
.kbm-shuttered { padding-block: var(--kbm-breath); max-width: 60ch; }
.kbm-shuttered h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0.5rem 0 1rem; }
.kbm-shuttered p { margin-bottom: 1rem; }

/* =========================================================================
   BREAKPOINTS: two nav states + columns
   breakpoint 54rem (inside the 46-62rem window)
   ========================================================================= */
@media (min-width: 44rem) {
  .kbm-gates { grid-template-columns: repeat(3, 1fr); }
  .kbm-tablets { grid-template-columns: repeat(2, 1fr); }
  .kbm-notice { grid-template-columns: 1fr 1fr; }
  .kbm-notice__intro { grid-column: 1 / -1; }
  .kbm-jetty__row { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 54rem) {
  /* DESKTOP: trigger hidden, horizontal bar */
  .kbm-handle { display: none; }
  .kbm-way ul { display: flex; }
  .kbm-threshold { grid-template-columns: 1.05fr 1fr; align-items: center; }
  .kbm-tablets { grid-template-columns: repeat(3, 1fr); }
  .kbm-notice { grid-template-columns: repeat(3, 1fr); }
  .kbm-notice__intro { grid-column: 1 / -1; }
  .kbm-cloister { grid-template-columns: minmax(0, 1fr) var(--kbm-verger); align-items: start; }
  .kbm-annex__grid { grid-template-columns: 1.5fr 1fr; }
}
@media (max-width: 53.99rem) {
  /* MOBILE: trigger visible, list folded until checked */
  .kbm-handle { display: inline-block; }
  .kbm-way ul { display: none; }
  .kbm-toggle:checked ~ .kbm-way ul { display: grid; gap: 0.2rem; padding-block: 0.7rem; }
  .kbm-lantern__row { flex-wrap: wrap; }
  .kbm-way { flex-basis: 100%; }
}

/* ---- threshold view caption + gatehouse hover ---- */
.kbm-threshold__view figcaption { font-size: 0.85rem; color: var(--kbm-slate-2); padding: 0.6rem 0.9rem; }
.kbm-gatehouse__view img { transition: transform 0.4s ease; }
.kbm-gatehouse:hover .kbm-gatehouse__view img { transform: scale(1.02); }
.kbm-gatehouse__body h3 a::after { content: " ›"; color: var(--kbm-copper); }
.kbm-tablet h3 a::after { content: " ›"; color: var(--kbm-copper); font-size: 0.9em; }
.kbm-folio strong { color: var(--kbm-slate); }
.kbm-folio blockquote { border-left: 3px solid var(--kbm-copper); margin: 0 0 1rem; padding: 0.2rem 0 0.2rem 1rem; color: var(--kbm-slate-2); }
.kbm-opening .kbm-meta li + li::before { content: "·"; margin-right: 1.2rem; color: var(--kbm-kerb); }