/* ===========================================================================
   Tileo — inner pages skin (lv2 alignment)
   Loaded AFTER /style.css on every inner page. Re-maps the legacy cream theme
   and the operator-hub theme onto the landing-v2 design language:
   navy frame (nav + footer), cream body #F2EDE1, gold accents, Fraunces /
   Instrument Sans / JetBrains Mono. Landing (/, /fr/) keeps landing.css.
   =========================================================================== */

/* ---- 1. Token remap — legacy family (.site header pages) ---- */
:root {
  --ink: #1C2334;
  --paper: #F2EDE1;
  --paper-2: #E9E2D0;
  --rust: #A3722C;
  --olive: #8A7B4E;
  --gold: #C99A3C;
  --line: #1C2334;
  --muted: #5C6172;
  --hair: #D8D0BC;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* operator-hub family */
  --op-paper: #F2EDE1;
  --op-ink: #1C2334;
  --op-field: #8A7B4E;
  --op-blue: #A3722C;
  --op-rust: #A3722C;
  --op-rule: #D8D0BC;
  --op-muted: #5C6172;
}

body { background: var(--paper); color: var(--ink); }

/* ---- 2. Font alignment — override hardcoded shorthands ---- */
body.operator-hub { font-family: "Instrument Sans", system-ui, sans-serif; }
.op-hero h1, .op-section h2, .op-lede, .op-intro, .op-work h3,
.op-proof h3, .op-door strong, .op-journal-item h3 {
  font-family: "Fraunces", Georgia, serif;
}
.op-brand { font-family: "Fraunces", Georgia, serif; }
.op-brand span, .op-lang, .op-kicker, .op-label, .op-note,
.op-proof small, .op-journal-item time, .op-form label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.op-hero h1 { letter-spacing: -.02em; font-weight: 500; }
.op-section h2 { letter-spacing: -.015em; font-weight: 500; }

/* ---- 3. lv2 nav (navy bar, sticky) — markup identical to landing ---- */
.lv2-nav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px;
  background: #05080F;
  border-bottom: 1px solid rgba(240,235,220,.08);
}
.lv2-nav a { text-decoration: none; }
.lv2-nav .lv2-brand { display: flex; align-items: center; gap: 11px; color: #F0EBDC; }
.lv2-nav .lv2-brand:hover { color: #F0EBDC; }
.lv2-mono-badge { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #C99A3C; color: #DDB25B; font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; }
.lv2-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.lv2-brand-name { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; }
.lv2-brand-sub { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em; color: #8B93A8; }
.lv2-nav-links { display: flex; align-items: center; gap: 22px; font-size: 13.5px; }
.lv2-nav-links a { color: #C7CCDA; white-space: nowrap; }
.lv2-nav-links a:hover { color: #F0EBDC; }
.lv2-nav-links a[aria-current="page"] { color: #DDB25B; }
.lv2-nav-links .lv2-lang { border: 1px solid rgba(240,235,220,.25); border-radius: 999px; color: #DDB25B; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; padding: 6px 13px; }
.lv2-nav-links .lv2-lang:hover { border-color: #C99A3C; }

/* ---- 4. lv2 footer (navy) — markup identical to landing ---- */
.lv2-footer { position: relative; z-index: 1; background: #060B16; padding: 60px 32px 40px; border-top: 1px solid rgba(240,235,220,.07); color: #F0EBDC; margin-top: 80px; }
.lv2-footer a { text-decoration: none; }
.lv2-footer .lv2-shell { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; }
.lv2-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.lv2-footer .lv2-footer-brand { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; }
.lv2-footer-grid p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #8B93A8; }
.lv2-footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.lv2-footer-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: #5C6478; }
.lv2-footer-col a { color: #AEB5C7; }
.lv2-footer-col a:hover { color: #F0EBDC; }
.lv2-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(240,235,220,.07); padding-top: 22px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; color: #5C6478; }

@media (max-width: 640px) {
  .lv2-nav { padding: 10px 12px; gap: 10px; }
  .lv2-brand-sub { display: none; }
  .lv2-nav-links { gap: 10px; }
  .lv2-nav-links a { font-size: 12px; }
  .lv2-nav-links .lv2-lang { padding: 5px 10px; font-size: 10px; }
  .lv2-footer { padding: 48px 22px 32px; }
}

/* ---- 5. Small polish so legacy components sit well on the new tint ---- */
.op-button.primary, a.follow { background: #C99A3C; border-color: #C99A3C; color: #0A101F; }
.op-button.primary:hover, a.follow:hover { background: #DDB25B; border-color: #DDB25B; color: #0A101F; }
::selection { background: #C99A3C; color: #0A101F; }

/* footer identity link (entity fix) */
.lv2-footer-grid p a { color: #AEB5C7; }
.lv2-footer-grid p a:hover { color: #F0EBDC; }