/* ============================================================
   Ceramic Guide — main.css (r13): removed affiliate elements
   r7: appended article-page styles (10-article set)
   "heritage-blue" theme: oat / navy / brick / bronze
   Inspired by Ralph Lauren / RH catalogue + museum publication
   Mobile-first nav inherited from game-guide-factory v7
   (r38-r40 fixes pre-applied)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

:root {
  /* Backgrounds — oat / cream / warm linen */
  --bg:           #f3eadb;     /* oat / cream linen */
  --bg-elev:      #ebe0cc;     /* card surface */
  --bg-soft:      #e2d4b8;     /* hover / subtle elevation */
  --header-bg:    rgba(243, 234, 219, 0.94);

  /* Text — deep navy ink */
  --ink:          #1e2a4a;     /* deep navy, primary text */
  --ink-soft:     #4a5470;     /* faded navy, secondary */
  --ink-dim:      #8a8a78;     /* sage / muted */

  /* Dividers — thin gold rule */
  --rule:         #c9b88a;     /* aged gold */
  --rule-soft:    #d9cca6;

  /* Primary accent (mapped to --cyan to inherit factory selectors) */
  --cyan:         #1e2a4a;     /* navy = primary accent everywhere */
  --cyan-deep:    #131c33;
  --cyan-soft:    rgba(30, 42, 74, 0.08);

  /* Clay-body pair palette */
  --admin:        #1e2a4a;     /* porcelain / high-fire — navy */
  --admin-soft:   rgba(30, 42, 74, 0.10);
  --dest:         #8a3a2a;     /* earthenware / low-fire — brick red */
  --dest-soft:    rgba(138, 58, 42, 0.10);

  /* Brand reds & golds */
  --brick:        #8a3a2a;     /* eyebrow accent, brick red */
  --bronze:       #a8783c;     /* aged bronze gold */
  --gold-deep:    #8a5e2e;

  /* Signal */
  --warn:         #a8783c;
  --danger:       #8a3a2a;
  --success:      #4a5d3a;

  /* Fonts — Cormorant Garamond display + Noto Serif SC for CJK */
  --font-display: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, 'Times New Roman', serif;
  --font-body:    'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Layout */
  --container:        1180px;
  --container-narrow: 760px;
  --radius:           2px;     /* near-sharp, RL feel */
  --radius-lg:        4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: none; transition: color .2s; border-bottom: 1px solid transparent; }
a:hover { color: var(--brick); border-bottom-color: var(--brick); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; }

/* ============== Header / Nav ============== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-top {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; max-width: var(--container);
  margin: 0 auto; padding: 0 1.5rem;
}
.nav-utils { display: flex; align-items: center; gap: 0.6rem; }
.nav-bar {
  border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: center;
  max-width: var(--container); margin: 0 auto; padding: 0 1.5rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 0.7rem;
}
.brand-mark {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink);
  font-weight: 500; font-size: 1.15rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-display);
  font-style: italic;
}
.brand small {
  font-family: var(--font-display);
  font-weight: 400; font-style: italic;
  font-size: 0.78rem; letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-transform: lowercase;
}

.nav-links {
  display: flex; gap: 0.2rem; list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap; justify-content: center;
}
.nav-links a {
  display: inline-block;
  padding: 12px 13px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .2s;
}
.nav-links a:hover { color: var(--brick); background: transparent; }
.nav-links a.active { color: var(--brick); }

.nav-cta {
  display: inline-block;
  padding: 9px 18px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--cyan);
  border-radius: var(--radius);
  border: 1.5px solid var(--cyan);
  transition: all .15s;
}
.nav-cta:hover {
  background: transparent;
  color: var(--cyan);
}

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.nav-toggle:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 900px) {
  .nav-bar { display: none; }
  .nav-toggle { display: inline-flex; }
  .brand { font-size: 1rem; }
  .brand-mark { width: 28px; height: 28px; font-size: 0.85rem; }
  .nav-top { padding: 0 0.95rem; height: 56px; }
  .site-header.open .nav-bar {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--rule);
    padding: 0.5rem 1.5rem 1rem;
  }
  .site-header.open .nav-links {
    flex-direction: column; gap: 0; width: 100%;
  }
  .site-header.open .nav-links a {
    display: block; padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
    white-space: normal; letter-spacing: 0.12em;
  }
}

/* ============== Hero ============== */

.hero {
  padding: 6rem 0 4.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.hero .container { display: flex; flex-direction: column; align-items: center; }
.hero .lede { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.hero .stats { justify-content: center; }
@media (max-width: 760px) {
  .hero { padding: 3.5rem 0 2.75rem; }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 0;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: var(--brick);
  opacity: 0.55;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  color: var(--ink);
}
.hero h1 .accent {
  color: var(--brick);
  font-style: italic;
  font-weight: 500;
}
.hero .lede {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-soft);
  max-width: 640px;
  line-height: 1.6;
  margin: 0 0 2rem;
  font-weight: 400;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.btn {
  display: inline-block;
  padding: 14px 30px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer; transition: all .2s;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: transparent; color: var(--ink); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--cyan-soft); }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem; max-width: 620px;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.stats .stat .value,
.stats .stat .v {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.stats .stat .label,
.stats .stat .l {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-top: 0.45rem;
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* ============== Section ============== */

section.block { padding: 6rem 0; border-bottom: 1px solid var(--rule); }
section.block:last-child { border-bottom: none; }
.section-head { margin-bottom: 3.5rem; text-align: center; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--ink);
  line-height: 1.15;
}
.section-head .sub {
  font-family: var(--font-display);
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}
@media (max-width: 760px) {
  section.block { padding: 4rem 0; }
  .section-head { margin-bottom: 2.5rem; }
}

/* ============== Faction cards (clay bodies) ============== */

.factions {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border-top: 1px solid var(--rule);
}
@media (max-width: 760px) { .factions { grid-template-columns: 1fr; } }

.faction-card {
  background: transparent;
  border: none;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
}
.faction-card:last-child { border-right: none; }
@media (max-width: 760px) {
  .faction-card {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 2rem 0.5rem;
  }
  .faction-card:last-child { border-bottom: none; }
}
.faction-card.admin,
.faction-card.dest { border-top: none; }

.faction-card .corner {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--brick);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  position: static;
}
.faction-card h3 {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.faction-card.admin h3,
.faction-card.dest h3 { color: var(--ink); }

.faction-card .tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
  letter-spacing: 0;
}
.faction-card p { color: var(--ink-soft); margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; }
.faction-card ul { color: var(--ink-soft); padding-left: 1.2rem; margin: 0; list-style: none; }
.faction-card ul li {
  margin: 0.5rem 0;
  padding-left: 0;
  position: relative;
  font-size: 0.98rem;
}
.faction-card ul li::before {
  content: "—";
  position: absolute;
  left: -1.2rem;
  color: var(--bronze);
}
.faction-card ul li strong { color: var(--ink); font-weight: 500; }

/* ============== Unit grid (full data cards) ============== */

.units-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
@media (max-width: 760px) { .units-grid { grid-template-columns: 1fr; } }

.unit-full {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column;
  transition: border-color .2s, background .2s;
}
.unit-full:hover { border-color: var(--ink); background: rgba(255,255,255,0.18); }
.unit-full header { margin-bottom: 1.25rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--rule-soft); }
.unit-full h3 {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.unit-full .role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--brick);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.weapons { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.weapon {
  background: transparent;
  border: none;
  border-left: 2px solid var(--rule);
  border-radius: 0;
  padding: 0.5rem 0.85rem;
}
.weapon .wname {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500; color: var(--ink);
  letter-spacing: 0;
  margin-bottom: 0.45rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.weapon .wname .wtype {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: lowercase;
  color: var(--bronze);
  background: transparent;
  padding: 0; border: none; border-radius: 0;
  font-weight: 400;
}
.weapon .wstats { display: flex; gap: 1.1rem; font-size: 0.82rem; color: var(--ink-soft); }
.weapon .wstats b { color: var(--ink); font-weight: 700; }

.unit-stats {
  display: flex; gap: 2rem;
  padding: 1rem 0;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.unit-stats .us { display: flex; flex-direction: column; gap: 0.2rem; }
.unit-stats .ul {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.05em; text-transform: lowercase;
  color: var(--brick);
}
.unit-stats .uv {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 500; color: var(--ink);
  line-height: 1;
}

.tech-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tech-tag {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 5px 12px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
}
.tech-tag strong { color: var(--ink); font-weight: 500; font-style: normal; }
.tech-tag small { color: var(--ink-dim); margin-left: 0.4rem; font-size: 0.78rem; }

/* ============== How to choose (site opinion rows) ============== */

.choose-list { display: flex; flex-direction: column; gap: 1.25rem; }
.choose-row {
  background: transparent;
  border: none;
  border-left: 2px solid var(--bronze);
  border-radius: 0;
  padding: 1.5rem 2rem;
  margin-bottom: 0;
}
.choose-row .choose-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--brick);
  text-transform: lowercase;
  margin-bottom: 0.6rem;
}
.choose-row h3 {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 0.75rem;
  color: var(--ink);
}
.choose-row p { color: var(--ink-soft); margin: 0; line-height: 1.7; font-size: 0.95rem; }
.choose-row p strong { color: var(--ink); }

/* ============== Controls table ============== */

.controls-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: transparent;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
  font-size: 1rem;
  margin: 1rem 0;
}
.controls-table thead th {
  background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--brick);
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
.controls-table tbody td {
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.controls-table tbody tr:last-child td { border-bottom: none; }
.controls-table .key {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  font-size: 1rem;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  white-space: nowrap;
}
.controls-table .desc { color: var(--ink-soft); }
.controls-table tbody tr:hover { background: rgba(255,255,255,0.18); }

/* ============== Modes ============== */

.modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }

.mode-card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 2rem 0;
}
.mode-card h3 {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.mode-card .tag,
.mode-card .mode-tag {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.95rem;
  color: var(--brick); letter-spacing: 0.04em;
  text-transform: lowercase;
  margin-bottom: 0.85rem;
  display: block;
}
.mode-card p { color: var(--ink-soft); margin: 0; font-size: 1.02rem; line-height: 1.75; }

/* ============== CTA banner ============== */

.cta-banner {
  background: transparent;
  border: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  display: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: var(--ink);
}
.cta-banner p { color: var(--ink-soft); margin: 0 auto 2rem; font-size: 1.15rem; max-width: 540px; line-height: 1.7; }

/* ============== Footer ============== */

.site-footer {
  background: var(--ink);
  color: var(--bg);
  border-top: none;
  padding: 4rem 0 2.5rem;
  margin-top: 0;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem; margin-bottom: 2rem;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.footer-grid h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--bronze);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.footer-grid p, .footer-grid li {
  color: rgba(243, 234, 219, 0.7); font-size: 0.95rem;
  line-height: 1.75;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid ul li { margin: 0.3rem 0; }
.footer-grid ul li a { color: rgba(243, 234, 219, 0.75); border-bottom-color: transparent; }
.footer-grid ul li a:hover { color: var(--bg); border-bottom-color: var(--bronze); }
.footer-meta {
  border-top: 1px solid rgba(243, 234, 219, 0.15);
  padding-top: 1.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: rgba(243, 234, 219, 0.55);
  text-align: center;
}

/* ============== Misc utility ============== */

.tech-note {
  background: transparent;
  border: none;
  border-left: 2px solid var(--bronze);
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-radius: 0;
  margin: 2rem 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.75;
}
.tech-note strong:first-child {
  display: inline;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--brick);
  margin-right: 0.4rem;
  font-weight: 500;
}
.tech-note .label {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--brick);
  margin-right: 0.5rem;
}

/* ============== Floating return-to-position pill (reused from Redcoats r40) ============== */

#ret-pos {
  position: fixed; left: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  transform: translateX(-50%) translateY(16px);
  font-family: var(--font-display);
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--cyan);
  font-family: var(--font-display);
  font-size: 0.9rem;
  cursor: pointer; opacity: 0; pointer-events: none;
  text-align: center; line-height: 1.3;
  box-shadow: 0 4px 20px var(--cyan-glow);
  transition: opacity .25s, transform .25s;
  z-index: 58;
  -webkit-tap-highlight-color: transparent;
}
#ret-pos.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#ret-pos:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#ret-pos .rp-x {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; opacity: .7;
  font-size: 1.1rem; line-height: 1;
  min-width: 28px; min-height: 28px;
  padding: 4px 8px; border-radius: 50%;
  flex: 0 0 auto;
}
#ret-pos .rp-x:hover { opacity: 1; background: var(--hover-overlay); }
@media (max-width: 480px) {
  #ret-pos { font-size: 0.85rem; padding: 10px 14px; gap: 6px; border-radius: 24px; max-width: calc(100vw - 16px); }
  #ret-pos .rp-x { min-width: 32px; min-height: 32px; font-size: 1.15rem; }
}
@media print { #ret-pos { display: none; } }

/* ============== Units (full data cards) — r3 ============== */

.units-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (max-width: 760px) { .units-grid { grid-template-columns: 1fr; } }

.unit-full {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: border-color .2s;
}
.unit-full:hover { border-color: var(--ink); background: rgba(255,255,255,0.18); }
.unit-full header { padding-bottom: 0.85rem; border-bottom: 1px solid var(--rule-soft); }
.unit-full h3 {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 0.3rem;
  color: var(--ink);
  text-transform: uppercase;
}
.unit-full .role {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.weapons {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.weapon {
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.wname {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.92rem;
  color: var(--cyan);
  margin-bottom: 0.55rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.wtype {
  font-family: var(--font-mono); font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.wstats {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.wstats span { display: flex; justify-content: space-between; }
.wstats b { color: var(--ink); font-weight: 500; font-family: var(--font-display); }

.unit-stats {
  display: flex; gap: 1.5rem;
  padding-top: 0.25rem;
}
.us { flex: 1; }
.ul {
  display: block;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.2rem;
}
.uv {
  display: block;
  font-family: var(--font-display); font-size: 1.4rem;
  font-weight: 800; color: var(--cyan);
  line-height: 1;
}

.tech-row {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  padding-top: 0.25rem;
}
.tech-tag {
  flex: 1; min-width: 0;
  background: var(--cyan-soft);
  border: 1px solid var(--cyan-border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.tech-tag strong {
  display: block;
  color: var(--cyan); font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}
.tech-tag small { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.4; }

/* ============== "How to Choose" advisory rows — r3 ============== */

.choose-list { display: flex; flex-direction: column; gap: 0; }
/* .choose-row visuals already defined earlier (RL-style) — duplicates removed */
.choose-row p strong { color: var(--ink); font-weight: 500; }

/* ============== Systems grid (Match Flow & Systems) — r4 ============== */

.systems-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}
@media (max-width: 760px) { .systems-grid { grid-template-columns: 1fr; } }

.system-block {
  background: transparent;
  border: none;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 2rem 1.5rem 2rem 0;
  transition: background .2s;
}
.system-block:hover { background: rgba(255,255,255,0.18); }
.system-block .sys-tag,
.system-block .system-tag {
  display: inline-block;
  font-family: var(--font-display); font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em; text-transform: lowercase;
  color: var(--brick);
  margin-bottom: 0.85rem;
}
.system-block h3 {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 0.85rem;
  color: var(--ink);
}
.system-block p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0;
}
.system-block p strong { color: var(--ink); font-weight: 500; }
.system-block p em { color: var(--ink-soft); font-style: italic; }

/* ============== Maps (r4) ============== */

.maps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 900px) { .maps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .maps-grid { grid-template-columns: 1fr; } }

.map-card {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color .2s, background .2s;
}
.map-card:hover { border-color: var(--ink); background: rgba(255,255,255,0.18); }
.map-tag,
.map-card .mode-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--brick);
}
.map-card h3 {
  font-family: var(--font-display);
  font-size: 1.65rem; font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
}
.map-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}
.map-card p strong { color: var(--ink); font-weight: 700; }
.map-warn {
  margin-top: 0.4rem;
  background: var(--dest-soft);
  border-left: 3px solid var(--dest);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.map-warn strong {
  color: var(--dest);
  font-weight: 800;
  display: block;
  margin-bottom: 0.3rem;
}

/* ============================================================
   Card "alive" interaction module (lcyoyo lesson sealed in v5)
   
   Why this exists: until r2, all card-class hover effects were just
   `border-color: var(--cyan)` — flat. The lcyoyo Redcoats Guide
   sites have a "card lift + shadow + accent border" pattern that
   makes the whole site feel alive. This module unifies that across
   every card class the factory generates, and adds the fadeUp
   hero-entrance animation lcyoyo uses on first paint.
   
   All effects use theme variables (--accent, --shadow-md, etc.) so
   they auto-adapt to retro-war / cyber-robot / night-sky-castle /
   dragon-fire and any future theme.
   ============================================================ */

/* Card-like surfaces get a unified transition + lift on hover.
   We use individual properties (transform, box-shadow, border-color)
   not `transition: all` to avoid layout thrash. */
.unit-full,
.faction-card,
.mode-card,
.choose-row,
.system-block,
.map-card {
  transition: transform .2s ease,
              box-shadow .2s ease,
              border-color .2s ease;
}

/* Big primary cards lift by 3px and grow a soft glow.
   The --accent variable is gold/orange/cyan/red depending on theme. */
.unit-full:hover,
.faction-card:hover,
.mode-card:hover,
.choose-row:hover,
.system-block:hover,
.map-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

/* Weapon and stat sub-cards get a smaller, contained lift —
   they live inside .unit-full so they don't compete with the
   parent's lift. */
.weapon,
.tech-row {
  transition: background .15s ease, border-color .15s ease;
}
.weapon:hover {
  background: var(--cyan-soft);
}

/* Hero entrance — staggered fade-up on first paint.
   The user sees the title fade in, then lede, then buttons, then stats.
   This is what makes the site feel "alive" instead of static. */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero h1,
.hero .lede,
.hero-actions,
.hero .stats {
  animation: fadeUp .7s cubic-bezier(.2,.7,.3,1) backwards;
}
.hero .lede     { animation-delay: .1s; }
.hero-actions   { animation-delay: .2s; }
.hero .stats    { animation-delay: .3s; }

/* Respect user's reduced-motion preference — disable all animations
   for users who set prefers-reduced-motion: reduce. Required for a11y. */
@media (prefers-reduced-motion: reduce) {
  .unit-full,
  .faction-card,
  .mode-card,
  .choose-row,
  .system-block,
  .map-card {
    transition: none;
  }
  .unit-full:hover,
  .faction-card:hover,
  .mode-card:hover,
  .choose-row:hover,
  .system-block:hover,
  .map-card:hover {
    transform: none;
  }
  .hero h1,
  .hero .lede,
  .hero-actions,
  .hero .stats {
    animation: none;
  }
}

/* ============================================================
   Ceramic Guide — extensions on top of factory base
   ============================================================ */

/* Source citation (every fact gets a tiny [src] link) */
.fact-source {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin-left: 0.4rem;
  letter-spacing: 0.04em;
}
.fact-source a {
  color: var(--ink-dim);
  border-bottom: 1px dotted var(--ink-dim);
  padding-bottom: 1px;
}
.fact-source a:hover {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}

/* Language switcher (top-right pill) */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2px;
  margin-left: 0.6rem;
}
.lang-switch a {
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-radius: 3px;
  transition: all .15s;
}
.lang-switch a.current {
  background: var(--cyan);
  color: var(--bg);
}
.lang-switch a:not(.current):hover {
  color: var(--cinnabar);
}
@media (max-width: 860px) {
  .lang-switch { margin-left: 0.3rem; }
  .lang-switch a { padding: 3px 7px; font-size: 0.68rem; }
}

/* Cinnabar accent (used inline for critical numbers / warnings) */
.accent-cinnabar {
  color: var(--cinnabar);
  font-weight: 700;
}

/* Awaiting-data marker — honesty over fabrication */
.awaiting {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  background: var(--bg-soft);
  border: 1px dashed var(--rule);
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}


/* ============================================================
   Hide inline [Source] citation markers in body text.
   Sources are now consolidated in .section-sources at the
   end of each section.
   ============================================================ */
.fact-source {
  display: none !important;
}

/* Section sources block — consolidated citation list */
.section-sources {
  margin: 3rem auto 0;
  max-width: 720px;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-dim);
  line-height: 1.75;
}
.section-sources .label {
  display: block;
  color: var(--brick);
  font-style: italic;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  text-transform: lowercase;
}
.section-sources a {
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--rule);
  margin: 0 0.3rem;
}
.section-sources a:hover {
  color: var(--brick);
  border-bottom-color: var(--brick);
}

/* ============================================================
   r5: classes replacing inline style= attributes (CSP-clean)
   ============================================================ */

/* Footer language switch link */
.footer-meta .lang-alt {
  color: rgba(243, 234, 219, 0.6);
  border-bottom-color: transparent;
}
.footer-meta .lang-alt:hover {
  color: var(--bg);
  border-bottom-color: var(--bronze);
}

/* About page's "back to home" link in dark footer */
.site-footer .lang-alt {
  color: rgba(243, 234, 219, 0.6);
  border-bottom-color: transparent;
}
.site-footer .lang-alt:hover {
  color: var(--bg);
  border-bottom-color: var(--bronze);
}

/* 404 page Chinese lede line — smaller, dimmer */
.lede.lede-cn {
  font-size: 0.95rem;
  color: var(--ink-dim);
}

/* ============================================================
   CERAMIC GUIDE — Articles add-on styles  (append to main.css)
   Appended for the 10-article content set. RL heritage theme.
   Uses existing tokens: --paper #f3eadb, --navy #1e2a4a,
   --brick #8a3a2a, --bronze #a8783c.  No new fonts, CSP-safe.
   Bump CSS rev to r7 after appending: ?v=20260521-r7
   ============================================================ */

/* ---- Article hero: tighter than the home hero ---- */
.article-hero { padding-block: clamp(2.4rem, 6vw, 4.2rem) clamp(1.4rem, 3vw, 2.2rem); }
.article-hero h1 { max-width: 18ch; margin-inline: auto; }
.article-hero .lede { max-width: 56ch; margin-inline: auto; }

/* ---- Article body: readable measure, classic rhythm ---- */
.article-body {
  max-width: 68ch;
  margin-inline: auto;
  padding-block: clamp(1.2rem, 3vw, 2rem) clamp(3rem, 7vw, 5rem);
  font-size: 1.06rem;
  line-height: 1.75;
}
.article-body > p { margin-block: 0 1.15em; }
.article-body h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.55rem, 3.4vw, 2.1rem);
  color: var(--navy, #1e2a4a);
  margin-block: 2em 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid color-mix(in srgb, var(--bronze, #a8783c) 45%, transparent);
}
.article-body h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.4rem);
  color: var(--brick, #8a3a2a);
  margin-block: 1.5em 0.35em;
}
.article-body a { color: var(--navy, #1e2a4a); text-underline-offset: 2px; }
.article-body a:hover { color: var(--brick, #8a3a2a); }


/* ---- Sources block + disclosure ---- */
.section-sources { margin-top: 2.6em; padding-top: 1.2em; border-top: 1px solid color-mix(in srgb, var(--bronze, #a8783c) 50%, transparent); }
.sources-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze, #a8783c); font-style: italic; margin: 0 0 0.5rem; }
.section-sources ul { margin: 0 0 1rem; padding-left: 1.1rem; font-size: 0.92rem; line-height: 1.65; }
.section-sources li { margin-bottom: 0.3rem; }

/* ---- Article list (index) ---- */
.article-list { max-width: 72ch; margin-inline: auto; padding-block: 1rem clamp(3rem, 7vw, 5rem); list-style: none; }
.article-list li { padding: 1.2rem 0; border-bottom: 1px solid color-mix(in srgb, var(--bronze, #a8783c) 40%, transparent); }
.article-list h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.45rem; margin: 0 0 0.25rem; }
.article-list h2 a { color: var(--navy, #1e2a4a); text-decoration: none; }
.article-list h2 a:hover { color: var(--brick, #8a3a2a); text-decoration: underline; text-underline-offset: 2px; }
.article-list p { margin: 0; font-size: 0.97rem; line-height: 1.6; color: color-mix(in srgb, var(--navy, #1e2a4a) 82%, transparent); }
.footer-brand { margin-bottom: 0.6rem; }

/* ============================================================
   r8 — site search + section overview cards
   ============================================================ */
.site-search { display: flex; align-items: center; margin: 0; }
.site-search input[type="search"] {
  font: inherit; font-size: 0.9rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--bronze, #a8783c) 55%, transparent);
  border-radius: 2px; background: #fff; color: var(--navy, #1e2a4a);
  width: 9rem; max-width: 40vw;
}
.site-search input[type="search"]:focus { outline: 2px solid var(--bronze, #a8783c); outline-offset: 1px; }
.search-page-form { margin: 1.5rem 0 2rem; gap: 0.6rem; }
.search-page-form input[type="search"] { width: min(28rem, 70vw); }
.search-summary { font-style: italic; color: color-mix(in srgb, var(--navy,#1e2a4a) 75%, transparent); margin: 0 0 1rem; }
.search-results .search-cat {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brick, #8a3a2a); font-style: italic; margin-bottom: 0.2rem;
}
.faction-card h3 a { color: inherit; text-decoration: none; }
.faction-card h3 a:hover { color: var(--brick, #8a3a2a); text-decoration: underline; text-underline-offset: 2px; }
.card-cta { font-weight: 600; color: var(--brick, #8a3a2a); text-decoration: none; letter-spacing: 0.02em; }
.card-cta:hover { text-decoration: underline; text-underline-offset: 2px; }

/* keep search box usable on mobile */
@media (max-width: 900px) {
  .site-search input[type="search"] { width: 6.5rem; }
  .nav-utils { gap: 0.4rem; }
}
@media (max-width: 540px) {
  .nav-top { padding: 0 0.7rem; gap: 0.4rem; }
  .brand { letter-spacing: 0.18em; }
  .nav-utils { gap: 0.3rem; }
  .site-search input[type="search"] {
    width: 5.5rem; padding: 0.3rem 0.55rem; font-size: 0.82rem;
  }
}
@media (max-width: 380px) {
  .brand small { display: none; }
  .site-search input[type="search"] { width: 4.6rem; }
}

/* ============================================================
   r11 — SVG illustrations / figures
   ============================================================ */
.svg-figure {
  margin: 1.6rem 0 0.5rem;
  text-align: center;
}
.svg-figure img {
  width: 100%; height: auto;
  max-width: 760px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  display: block; margin: 0 auto;
}
.svg-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ============================================================
   r12 — decorative SVG banners/dividers + photo slots
   ============================================================ */
.vessel-banner {
  margin: 0 auto 0.5rem; max-width: 880px; padding: 0 1.5rem;
}
.vessel-banner img { width: 100%; height: auto; display: block; opacity: 0.92; }

.vine-divider {
  margin: 2.5rem auto; max-width: 880px; padding: 0 1.5rem;
  text-align: center;
}
.vine-divider img { width: 100%; max-width: 520px; height: auto; display: inline-block; }

/* Photo slot: styled placeholder until a real photo is dropped in */
.photo-figure { margin: 1.8rem 0; text-align: center; }
.photo-figure img {
  width: 100%; height: auto; max-width: 820px;
  border: 1px solid var(--rule); border-radius: 4px;
  display: block; margin: 0 auto; background: var(--bg-elev);
  aspect-ratio: 3 / 2; object-fit: cover;
}
.photo-figure figcaption {
  margin-top: 0.6rem; font-size: 0.9rem; font-style: italic; color: var(--ink-soft);
}
/* placeholder look when src is the bundled SVG stand-in */
.photo-figure .photo-ph {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; max-width: 820px; width: 100%; margin: 0 auto;
  border: 1px dashed var(--rule); border-radius: 4px;
  background: var(--bg-elev); color: var(--ink-dim);
  font-style: italic; font-size: 0.95rem; text-align: center; padding: 1rem;
}