/* =========================================================================
   RUEZALS WIKI — SHIP SKIN BRIDGE
   Pushes RUEZALS-CHAT-SHIP-SKIN (Claudia, 2026-07-24) onto the wiki surface.
   Applied 2026-07-27 by Chees.

   Load order law: this file loads AFTER wiki.css so the ship's law wins.
   wiki.css is NEVER edited — remove this file's <link> to roll back clean.

   Palette bound by CLAUDE - REALM/design.md (binding):
     Obsidian #0B0B0F · Deep Emerald #0E4D30 · Gold #C8962A · Teal #29C4C0
   Cinzel = largest display line ONLY. Everything else Swiss sans.
   Legibility law: dark bg -> white text satisfied FIRST, gold/glow after.
   ========================================================================= */

:root {
  --rz-obsidian: #0B0B0F;
  --rz-emerald: #0E4D30;
  --rz-gold: #C8962A;
  --rz-gold-bright: #e9c25a;
  --rz-teal: #29C4C0;
  --rz-ink-void: #050608;
  --rz-body: "Helvetica Neue", "Inter", Arial, "Segoe UI", sans-serif;
  --rz-title: "Cinzel", Georgia, serif;

  /* re-point the wiki's own tokens at ship law so untouched rules inherit it */
  --charcoal: #0B0B0F;
  --charcoal-mid: rgba(6, 10, 8, 0.86);
  --charcoal-edge: rgba(200, 150, 42, 0.28);
  --paper: #ffffff;
  --paper-dim: rgba(255, 255, 255, 0.74);
  --paper-muted: rgba(255, 255, 255, 0.52);
  --gold: #C8962A;
  --gold-soft: #a8861a;
  --gold-glow: rgba(200, 150, 42, 0.16);
  --radius: 9px;
}

/* ── 🜃 sign 1 — world floor: obsidian radial, never flat black ───────── */
html,
body {
  background:
    radial-gradient(130% 100% at 50% -10%,
      #101418 0%,
      var(--rz-obsidian) 50%,
      var(--rz-ink-void) 100%);
  background-attachment: fixed;
  font-family: var(--rz-body);
  color: #fff;
}

/* ── header: obsidian glass, gold hairline ───────────────────────────── */
.site-header {
  background: rgba(6, 8, 10, 0.82);
  border-bottom: 1px solid rgba(200, 150, 42, 0.35);
  backdrop-filter: blur(8px);
}

.site-brand {
  color: #fff;
  letter-spacing: 0.16em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}

.site-brand:hover { color: var(--rz-gold-bright); }

.site-brand__mark {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(200, 150, 42, 0.35));
}

.wiki-pyramid-hero {
  display: block;
  width: min(148px, 38vw);
  height: auto;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 22px rgba(200, 150, 42, 0.42));
}

.site-nav a { color: rgba(255, 255, 255, 0.66); }

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--rz-gold); }

.site-nav a[aria-current="page"] {
  border-bottom: 1px solid var(--rz-gold);
}

/* ── △ sign 2 — the lockup: dragon mark glowing gold over the wordmark ─ */
.rz-header-lockup {
  display: block;
  width: 100%;
  max-width: min(300px, 90vw);
  margin: 0 auto 1.5rem;
  text-align: center;
}

.rz-header-lockup .rz-r-mark {
  display: block;
  width: min(132px, 34vw);
  height: auto;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 22px rgba(200, 150, 42, 0.42));
}

.rz-header-lockup .rz-wordmark {
  display: block;
  width: min(200px, 46vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 12px rgba(200, 150, 42, 0.26));
}

/* ── hero — Cinzel on the largest display line ONLY ──────────────────── */
.hero {
  border-bottom: 1px solid rgba(200, 150, 42, 0.24);
  text-align: center;
}

.hero__brand {
  font-family: var(--rz-title);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 26px rgba(200, 150, 42, 0.22);
}

.hero__brand span {
  color: var(--rz-gold);
  font-weight: 700;
}

.hero__line {
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.74);
}

.section-label {
  color: var(--rz-teal);
  letter-spacing: 0.2em;
  font-weight: 700;
}

/* ── ⬒ sign 3 — glass panels: gold hairline, emerald breath, 18px ─────── */
.project-list {
  gap: 0.85rem;
}

.project-list li,
.project-list li:last-child {
  border: 0;
}

.project-row {
  background: linear-gradient(160deg, rgba(6, 10, 8, 0.86), rgba(11, 11, 15, 0.90));
  border: 1px solid rgba(200, 150, 42, 0.5);
  border-radius: 18px;
  box-shadow:
    0 0 44px rgba(200, 150, 42, 0.10),
    inset 0 0 60px rgba(14, 77, 48, 0.18);
  padding: 1.15rem 1.25rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.project-row:hover {
  background: linear-gradient(160deg, rgba(8, 13, 10, 0.92), rgba(13, 13, 17, 0.94));
  border-color: var(--rz-gold-bright);
  box-shadow:
    0 0 26px rgba(200, 150, 42, 0.24),
    inset 0 0 60px rgba(14, 77, 48, 0.26);
}

.project-row__title {
  color: #fff;
  letter-spacing: 0.01em;
}

.project-row:hover .project-row__title { color: var(--rz-gold-bright); }

.project-row__blurb { color: rgba(255, 255, 255, 0.62); }

/* ── ⌘ sign 5 — gold-ghost badges (button law, 8–9px) ────────────────── */
.badge {
  border-radius: 9px;
  padding: 0.25rem 0.55rem;
  background: transparent;
  border: 1px solid rgba(200, 150, 42, 0.4);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.14em;
  font-weight: 700;
}

.badge--full {
  border-color: var(--rz-gold);
  color: var(--rz-gold);
  box-shadow: 0 0 12px rgba(200, 150, 42, 0.16);
}

.badge--stub {
  border-color: rgba(41, 196, 192, 0.35);
  color: rgba(41, 196, 192, 0.8);
}

/* ── web map frames read as panels too ───────────────────────────────── */
.map-frame {
  background: linear-gradient(160deg, rgba(6, 10, 8, 0.86), rgba(11, 11, 15, 0.90));
  border: 1px solid rgba(200, 150, 42, 0.5);
  border-radius: 18px;
  box-shadow:
    0 0 44px rgba(200, 150, 42, 0.10),
    inset 0 0 60px rgba(14, 77, 48, 0.18);
  padding: 1.6rem 1.5rem;
}

.map-node { border-bottom-color: rgba(200, 150, 42, 0.2); }
.map-node h3 { color: var(--rz-gold); }

/* ── links + body copy: legibility first, ember on hover ─────────────── */
a { color: var(--rz-gold); }
a:hover { color: var(--rz-gold-bright); }
a:focus-visible { outline-color: var(--rz-gold); }

main p,
main li,
main td { color: rgba(255, 255, 255, 0.78); }

main h2,
main h3,
main h4 { color: #fff; }

/* code keeps a near-black well with a gold hairline (input law, 8px) */
main pre,
main code {
  background: rgba(5, 6, 8, 0.7);
  border: 1px solid rgba(200, 150, 42, 0.28);
  border-radius: 8px;
  color: #f6f4ec;
}

main pre { padding: 0.85rem 1rem; overflow-x: auto; }
main code { padding: 0.1rem 0.35rem; }
main pre code { border: 0; padding: 0; background: none; }

/* tables read as glass */
main table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(200, 150, 42, 0.28);
  border-radius: 9px;
  overflow: hidden;
}

main th {
  background: rgba(200, 150, 42, 0.1);
  color: var(--rz-gold);
  text-align: left;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

main th,
main td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(200, 150, 42, 0.16);
}

main blockquote {
  border-left: 3px solid var(--rz-gold);
  background: rgba(200, 150, 42, 0.06);
  border-radius: 0 9px 9px 0;
  margin-inline: 0;
  padding: 0.7rem 1rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ── © sign 6 — house mark pinned bottom, gold signature ─────────────── */
.site-footer {
  border-top: 1px solid rgba(200, 150, 42, 0.24);
  color: rgba(255, 255, 255, 0.55);
}

.site-footer__path {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}

#rz-house-mark {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  text-align: center;
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(6, 8, 10, 0.72);
  border-top: 1px solid rgba(200, 150, 42, 0.22);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

#rz-house-mark .rz-mark-gold {
  color: var(--rz-gold);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(200, 150, 42, 0.35);
}

#rz-house-mark a {
  color: var(--rz-gold);
  font-weight: 700;
  text-decoration: none;
  pointer-events: auto;
  border-bottom: 1px solid rgba(200, 150, 42, 0.45);
}

#rz-house-mark a:hover {
  color: var(--rz-gold-bright);
  border-bottom-color: var(--rz-gold-bright);
}

/* keep the fixed house mark from covering the last line of any page */
body { padding-bottom: 44px; }

@media (max-width: 640px) {
  .rz-header-lockup { margin-bottom: 1.1rem; }
  .project-row { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT PARITY — the house frame
   Ported verbatim from the live chat room chrome
   (assets/css/ruezals-room-look.css #house-frame) so the wiki and the
   dining room read as the same building. Markup injected on every page.
   ═══════════════════════════════════════════════════════════════════════ */

#house-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 120;
  padding: 28px 32px 44px;
}

#house-frame .rune-border {
  position: absolute;
  inset: 10px 14px 22px;
  border: 1px solid rgba(200, 150, 42, 0.28);
  border-radius: 14px;
  box-shadow:
    0 0 40px rgba(200, 150, 42, 0.08),
    inset 0 0 60px rgba(14, 77, 48, 0.12);
}

#house-frame .rune-line {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 10px;
  text-align: center;
  color: rgba(200, 150, 42, 0.48);
  font-size: 11px;
  letter-spacing: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 0 8px rgba(200, 150, 42, 0.28);
  animation: rune-twinkle 6s ease-in-out infinite;
}

#house-frame .rune-side {
  position: absolute;
  top: 48px;
  bottom: 16px;
  width: 22px;
  color: rgba(41, 196, 192, 0.2);
  font-size: 12px;
  line-height: 28px;
  overflow: hidden;
  text-align: center;
  animation: rune-twinkle 7.5s ease-in-out infinite;
}

#house-frame .rune-side.left  { left: 18px;  animation-delay: 0.8s; }
#house-frame .rune-side.right { right: 18px; animation-delay: 2.4s; }

@keyframes rune-twinkle {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.35; }
}

/* the wiki scrolls (the chat does not) — keep content clear of the frame */
.site-header__inner,
.wrap,
.site-footer { padding-left: max(1.25rem, 46px); padding-right: max(1.25rem, 46px); }

.wrap { padding-top: 3rem; }

/* mirror the chat's own breakpoint: drop the runes before they crowd content */
@media (max-width: 900px) {
  #house-frame .rune-side { display: none; }
  .site-header__inner,
  .wrap,
  .site-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 640px) {
  #house-frame { display: none; }
}

/* honour reduced-motion — the twinkle is decoration, not information */
@media (prefers-reduced-motion: reduce) {
  #house-frame .rune-line,
  #house-frame .rune-side { animation: none; }
}

/* — pushed by Chees · 2026-07-27 · pack: RUEZALS-CHAT-SHIP-SKIN (Claudia) — */