/* ─────────────────────────────────────────────────────────────────
   Ben Mo — Level 3 Common Components
   ─────────────────────────────────────────────────────────────────
   These are the *only* shared pieces between L3 pages.
   Each L3 page is free to design its own typography, layout, color.
   But include this file + use the two components below, and the site
   feels consistent.

   What's here:
     1. .site-anchor    — fixed top-left back link (the consistent
                           "exit" from any L3 page back to L1/L2)
     2. .end-mark       — page-end strip with FILE id + return link
     3. Baseline tokens — fonts, colors, radii (optional to use)

   Usage in your L3 page:
     <link rel="stylesheet" href="../../level3.css" />
   And drop in the two components — see L3 starter template.
   ───────────────────────────────────────────────────────────────── */

/* Load brand mono once for any L3 page that includes this file */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  /* Brand tokens carried over from the main site */
  --bm-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --bm-paper: #f1ede2;        /* L1/L2 background — for reference */
  --bm-ink: #181816;
  --bm-ink-soft: #5a5854;
  --bm-ink-muted: #8a8780;
  --bm-line: rgba(0, 0, 0, 0.12);

  /* Anchor sizing — bump if you want a more prominent corner button */
  --bm-anchor-top: 22px;
  --bm-anchor-left: 28px;
}

/* ─────────────────────────────────────────────────────────────────
   1. SITE ANCHOR — fixed top-left navigation pill (true breadcrumb)
   ─────────────────────────────────────────────────────────────────
   Three independent click targets in one capsule:
     · arrow  → up one level (category, or — for chapter pages —
                the work's own index.html). Set its href per page.
     · home   → site root (house icon, always points at ../../index.html
                or equivalent)
     · cat    → category page (e.g. categories/fiction.html)

   Markup contract (paste verbatim, set the three hrefs):
     <nav class="site-anchor" aria-label="站点导航">
       <a class="site-anchor__arrow" href="../fiction.html" aria-label="返回上一级">←</a>
       <a class="site-anchor__home"  href="../../index.html" aria-label="返回主页">
         <svg viewBox="0 0 24 24" aria-hidden="true">
           <path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-8.5Z"
                 fill="none" stroke="currentColor" stroke-width="1.6"
                 stroke-linejoin="round" stroke-linecap="round"/>
         </svg>
       </a>
       <span class="site-anchor__sep" aria-hidden="true">/</span>
       <a class="site-anchor__cat" href="../fiction.html">小说</a>
     </nav>
   ───────────────────────────────────────────────────────────────── */

.site-anchor {
  position: fixed;
  top: var(--bm-anchor-top);
  left: var(--bm-anchor-left);
  z-index: 300;            /* navigation chrome — must sit above any sticky bars on L3 pages */
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bm-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bm-ink-soft);
  padding: 6px 12px 6px 6px;
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 18px -8px rgba(0, 0, 0, 0.10);
  transition: box-shadow 220ms, background 220ms;
}
.site-anchor:hover,
.site-anchor:focus-within {
  background: rgba(251, 250, 247, 0.96);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 12px 28px -10px rgba(0, 0, 0, 0.18);
}

/* Each segment is its OWN link. Reset anchor defaults, then style. */
.site-anchor a {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: color 180ms, background 180ms, transform 220ms cubic-bezier(.2,.7,.2,1);
}
.site-anchor a:focus-visible {
  outline: 2px solid var(--bm-ink);
  outline-offset: 2px;
}

/* ── ARROW: up one level ────────────────────────────────────────── */
.site-anchor__arrow {
  width: 26px; height: 26px;
  font-size: 14px;
  line-height: 1;
  color: var(--bm-ink);
  border: 1px solid currentColor;
}
.site-anchor__arrow:hover {
  background: var(--bm-ink);
  color: #fafaf7;
  transform: translateX(-2px);
}

/* ── HOME: icon, site root ──────────────────────────────────────── */
.site-anchor__home {
  width: 26px; height: 26px;
  color: var(--bm-ink);
}
.site-anchor__home svg {
  width: 15px; height: 15px;
  display: block;
}
.site-anchor__home:hover {
  background: var(--bm-ink);
  color: #fafaf7;
  transform: translateY(-1px);
}

/* ── SEPARATOR ─────────────────────────────────────────────────── */
.site-anchor__sep {
  opacity: 0.35;
  user-select: none;
  margin: 0 -2px;
}

/* ── CATEGORY ──────────────────────────────────────────────────── */
.site-anchor__cat {
  padding: 4px 8px;
  color: var(--bm-ink-soft);
}
.site-anchor__cat:hover {
  color: var(--bm-ink);
  background: rgba(0,0,0,0.06);
}

/* Mobile: collapse to just arrow + home icon (drop sep + cat label) */
@media (max-width: 640px) {
  .site-anchor {
    top: 14px;
    left: 14px;
    padding: 5px 5px;
    gap: 4px;
  }
  .site-anchor__sep,
  .site-anchor__cat { display: none; }
}

/* If the L3 page itself uses a dark background, add class="on-dark" to
   the .site-anchor element to flip its glass + colors. */
.site-anchor.on-dark {
  background: rgba(24, 24, 22, 0.55);
  color: rgba(255, 255, 255, 0.62);
}
.site-anchor.on-dark:hover,
.site-anchor.on-dark:focus-within { background: rgba(24, 24, 22, 0.78); }
.site-anchor.on-dark .site-anchor__arrow,
.site-anchor.on-dark .site-anchor__home,
.site-anchor.on-dark .site-anchor__cat { color: #fafaf7; }
.site-anchor.on-dark .site-anchor__arrow:hover,
.site-anchor.on-dark .site-anchor__home:hover {
  background: #fafaf7; color: #181816;
}
.site-anchor.on-dark .site-anchor__cat:hover { background: rgba(255,255,255,0.10); }

/* ─────────────────────────────────────────────────────────────────
   2. END MARK — small page-end strip echoing the site identity
   ───────────────────────────────────────────────────────────────── */

.end-mark {
  max-width: var(--bm-end-mark-max, 880px);
  margin: 80px auto 0;
  padding: 28px 32px 32px;
  border-top: 1px solid var(--bm-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--bm-mono);
  font-size: 11px;
  color: var(--bm-ink-muted);
  letter-spacing: 0.05em;
}
.end-mark a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}
.end-mark a:hover { color: var(--bm-ink); border-bottom-color: var(--bm-ink); }

@media (max-width: 640px) {
  .end-mark {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px 22px 28px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   3. OPTIONAL BASELINE — use these if you want, ignore otherwise
   ───────────────────────────────────────────────────────────────── */

/* Centered reading column. Apply to your <article> on essay-type pages.
   For wider layouts (photo galleries, code project pages) use your own
   container instead. */
.bm-read {
  max-width: 640px;
  margin: 0 auto;
  padding: 140px 32px 0;
}
.bm-read--wide { max-width: 880px; }

/* Small mono kicker above a chapter / section title */
.bm-kicker {
  font-family: var(--bm-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bm-ink-muted);
}