/* ════════════════════════════════════════════════════════════════════
   Heritage Fine Scale — FOUNDATION
   Linked by every page. Palette, header lockup, rivet motifs, footer.
   Page-type CSS lives in: chronology.css, dataviz.css, and per-page sheets.
   Nav CSS is owned by nav.js (NAV_CSS) — do NOT add nav rules here.
   ════════════════════════════════════════════════════════════════════ */

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

:root {
  --cream:      #F5F0E8;
  --parchment:  #EDE6D6;
  --bone:       #F2ECDF;
  --metal:      #CFC4AA;
  --ink:        #2C2416;
  --ink-mid:    #4A3E2C;
  --ink-light:  #7A6A52;
  --field:      #16110A;
  --oxblood:    #6A2429;   /* RIVETS ONLY — never text fill */
  --rule:       #C4B89A;

  /* Type stacks. Always use these — never retype a literal stack in a page
     sheet, or the fallbacks silently rot out of sync (they already did once). */
  --font-serif:     'Source Serif 4', 'Noto Serif JP', Georgia, serif;
  --font-condensed: 'Barlow Condensed', 'Roboto Condensed', 'Noto Sans JP', sans-serif;
  --font-sans:      'Barlow', 'Noto Sans JP', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── RIVET MOTIFS ── */
.rivet-rule {
  height: 6px;
  background-image: repeating-linear-gradient(
    90deg, var(--oxblood) 0, var(--oxblood) 6px,
    transparent 6px, transparent 16px);
}
.riveted { position: relative; }
.riveted .rvt {
  position: absolute; width: 6px; height: 6px;
  background: var(--oxblood); border-radius: 50%;
}
.riveted .rvt.tl { top: 10px; left: 10px; }
.riveted .rvt.tr { top: 10px; right: 10px; }
.riveted .rvt.bl { bottom: 10px; left: 10px; }
.riveted .rvt.br { bottom: 10px; right: 10px; }

/* ── HEADER PLATE ── */
header {
  background-color: var(--field); color: var(--bone);
  padding: 1.6rem 1.5rem; border-bottom: 1px solid var(--ink);
}
/* Header rivets sit slightly larger and further in than the generic .riveted
   box. These MUST qualify the element with .riveted: a bare `header .rvt.tl`
   is (0,2,1) and loses to `.riveted .rvt.tl` at (0,3,0), which is why these
   overrides silently did nothing for as long as they existed. */
header.riveted .rvt { width: 7px; height: 7px; }
header.riveted .rvt.tl { top: 12px; left: 14px; }
header.riveted .rvt.tr { top: 12px; right: 14px; }
header.riveted .rvt.bl { bottom: 12px; left: 14px; }
header.riveted .rvt.br { bottom: 12px; right: 14px; }

.lockup { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; }
.lockup a { display: flex; align-items: center; gap: 1.1rem; text-decoration: none; }
.shield { width: 54px; height: auto; display: block; flex-shrink: 0; }
.lockup-text { text-align: left; }
.wordmark {
  font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem); line-height: 1; color: var(--bone);
}
.wordmark-rule { width: calc(100% + 18px); margin: 0.5rem 0 0.4rem -9px; }
.subline {
  font-family: var(--font-condensed); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.34em;
  font-size: 0.68rem; color: var(--rule);
}

/* ── FOOTER ── */
footer {
  background-color: var(--ink-mid); color: var(--rule); text-align: center;
  padding: 1.6rem; font-family: var(--font-condensed); font-weight: 500;
  font-size: 0.84rem; letter-spacing: 0.14em; border-top: 1px solid var(--field);
}

/* ── ATTRIBUTION (Linden Street Studio) ─────────────────────────────
   Doubled class = specificity 0,0,2,0, which outranks a host site's own
   `footer a { color: … }` (0,0,1,1) without !important. color:inherit is
   what stops this rendering as a link. No opacity — see attribution.py. */
.lss-credit.lss-credit {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: inherit; text-decoration: none;
  font-size: 0.74rem;
}
.lss-credit.lss-credit:visited { color: inherit; }
.lss-credit.lss-credit:hover,
.lss-credit.lss-credit:focus-visible {
  text-decoration: underline; text-underline-offset: 0.22em;
}
.lss-mark { fill: currentColor; flex: none; }

/* HFS-local fit only. The block above is copied verbatim from
   C:\Sites\linden\tools\attribution.py — keep it that way so drift is
   visible, and put any site-specific adjustment down here instead. */
footer .lss-credit.lss-credit { margin-top: 0.7rem; font-size: 0.72rem; }

/* ── BACK-TO-TOP (floating) ── */
.to-top {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40;
  width: 2.6rem; height: 2.6rem; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--field);
  color: var(--bone); border: 1px solid var(--oxblood); text-decoration: none;
  font-size: 1.15rem; line-height: 1; opacity: 0; pointer-events: none;
  transition: opacity 0.25s; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.to-top.show { opacity: 0.82; pointer-events: auto; }
.to-top:hover { opacity: 1; }

/* ── A11Y ── */
a:focus-visible, button:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}