/* Shared nav-rail enhancements (loaded after each page's own inline CSS):
   - the section links (Islands / City / History): an icon with its name underneath, centred in the rail
   - the seal is home; Visitors (the (i)) is the last link; the language switch sits at the foot
*/
.side-nav-seal { position: relative; }

/* section links sit in the middle of the rail; the column takes the leftover height so the language switch +
   contact stay pinned at the bottom */
.side-nav-links {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.side-nav-link {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 6px 0;
  font-family: var(--t-tag, 'Geologica', sans-serif); font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(14,11,6,0.82); text-decoration: none; cursor: none;
  transition: color 0.2s ease;
}
.side-nav-link-icon {
  width: 48px; height: 40px; border-radius: 8px; background: rgba(14,11,6,0.07);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.side-nav-link-icon svg { width: 28px; height: 28px; flex: none; }
.side-nav-link:hover { color: #0e0b06; }
.side-nav-link:hover .side-nav-link-icon { background: rgba(14,11,6,0.14); }
.side-nav-link:focus-visible { outline: none; }
.side-nav-link:focus-visible .side-nav-link-icon { outline: 2px solid rgba(14,11,6,0.8); outline-offset: 2px; }
.side-nav-link.is-active { color: #0e0b06; font-weight: 700; }
.side-nav-link.is-active .side-nav-link-icon { background: #f7f1e3; box-shadow: 0 2px 8px rgba(14,11,6,0.22); }

/* ── Visitors: the serif (i) as its icon, set like the others in the rail ── */
.side-nav-link .side-nav-info { font: italic 700 22px/1 Georgia, 'Times New Roman', Times, serif; padding-right: 1px; }


/* inactive rail icons: darker so they read on the gold (about 4.7:1, was 2.5:1) */
.side-nav { --nav-text: rgba(14,11,6,0.75); }
.side-nav-lang-btn { color: rgba(14,11,6,0.65); }
.side-nav-lang-btn:hover { color: rgba(14,11,6,0.95); }

/* language popover — opens beside the rail's globe */
.nav-lang-pop {
  position: fixed; left: 0; top: 0; z-index: 401;
  transform: translateY(-50%) translateX(-6px);
  min-width: 150px; padding: 6px;
  background: #f7f1e3; color: #1e1a12; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32), 0 0 0 1px rgba(30,26,18,0.08);
  opacity: 0; pointer-events: none;
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.25,0.1,0.25,1);
}
.nav-lang-pop::before {
  content: ''; position: absolute; left: -6px; top: 50%; width: 0; height: 0; transform: translateY(-50%);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #f7f1e3;
  filter: drop-shadow(-2px 0 2px rgba(0,0,0,0.12));
}
.nav-lang-pop.is-on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.nav-lang-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 7px; background: none; text-align: left; cursor: none;
  font-family: var(--t-tag, 'Geologica', sans-serif); font-size: 13px; font-weight: 500; color: #1e1a12;
  transition: background 0.15s ease;
}
.nav-lang-opt:hover { background: rgba(30,26,18,0.07); }
.nav-lang-opt .c { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; color: rgba(30,26,18,0.5); }
.nav-lang-opt.is-current { font-weight: 700; }
.nav-lang-opt.is-current .c { color: #8a7040; }
.nav-lang-opt.is-current .n::before { content: '\2713'; margin-right: 8px; color: #8a7040; }

/* ── Display-face fit (Faculty Glyphic, OFL via Google Fonts). It ships in one weight only, so titles use that
   weight (400) instead of a browser-faked bold. Titles are set in capitals (tried title case; caps won). ── */
/* the card is 27vw wide, so the title scales with the viewport (36px from ~1450px wide, 26px at 1024) — sized so a long one like DELPHI ISLANDS fits on one line */
.copy-title, .sb-idle-title, .codex-sb-title, .ct-title { font-size: clamp(26px, 2.45vw, 36px); font-weight: 400; letter-spacing: 0.01em; line-height: 1.1; white-space: nowrap; text-transform: uppercase; }
/* quick-fact values are UI text, so they stay in Geologica */
.sb-qf-v { font-family: var(--t-body); font-weight: 500; font-size: 13px; letter-spacing: 0; }

/* card / tile / chip titles are UI text: Geologica (sizes trimmed since it runs wider than the display face) */
.era-card-title, .isys-stat, .isys-label, .map-card-title { font-family: var(--t-body); font-weight: 700; letter-spacing: 0; }
.era-card-title { font-size: 17px; }
.isys-stat { font-size: 17px; }
.isys-label { font-size: 11px; letter-spacing: 0.04em; }
.map-card-title { font-size: 19px; line-height: 1.2; }

/* ── Side panel kit — one structure for the Islands, City and History panels: the title, a one-line role
   under it, then sections (a label, an optional hint, the content) split by full-width rules. The pages grew
   their own names for these parts (copy-title / sb-idle-title / codex-sb-title, and so on); the sb-* classes
   sit alongside them and set the shared spec here, after each page's own styles (!important where a page's
   older rule is more specific). ── */
body .split.is-city .sb-idle { padding: clamp(24px, 2.4vw, 40px) var(--isl-pad-x) 0 !important; }   /* same inset as the other two panels */
body .sb-title { margin: 0 0 8px; }
body .sb-role { font-family: var(--t-tag); font-weight: 500; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; line-height: 1.3;
  color: var(--accent-1); margin: 0 0 22px !important; min-height: 0; }
body .sb-sec { margin: 0 calc(var(--isl-pad-x) * -1) !important; padding: 24px var(--isl-pad-x) 28px !important; border-top: 1px solid var(--line-2) !important; }
body .sb-label { font-family: var(--t-tag); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-1) !important; margin: 0 0 10px !important; }
body .sb-hint { font-family: var(--t-body); font-weight: 300; font-size: 12px; line-height: 1.4; color: rgba(30,26,18,0.55); margin: -4px 0 12px !important; }
body .sb-lede { font-family: var(--t-body); font-weight: 300; font-size: 14px; line-height: 1.7; color: rgba(30,26,18,0.78); margin: 0 !important; text-wrap: pretty; }

/* ── Postcard carousel — the City's Districts and the Almanac's Landmarks. Each card is a printed postcard: the
   photo sits inset in a parchment border, and the caption under it carries the name in the display face (the
   same voice as the page titles), a line saying where or what it is, and, for a landmark, its registry plate
   number. Nothing is printed over the photo. Only the front card and one peek each side show. ── */
.lm-carousel-scene {
  position: relative; height: 372px; margin-top: 10px;
  display: flex; align-items: flex-start; justify-content: center; overflow: visible;
}
.lm-carousel { position: relative; width: 250px; height: 352px; perspective: 650px; }
.lm-carousel-arrow {
  position: absolute; top: 150px; transform: translateY(-50%); z-index: 10;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--arrow-bg); border: 1px solid rgba(0,0,0,0.06); color: var(--arrow-ink);
  font-size: 16px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: background 0.2s ease, transform 0.15s ease;
}
.lm-carousel-arrow:hover { background: var(--arrow-bg-hover); transform: translateY(-50%) scale(1.08); }
.lm-carousel-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lm-carousel-prev { left: 4px; }
.lm-carousel-next { right: 4px; }
.lm-card {
  position: absolute; inset: 0; padding: 8px 8px 0;
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden; cursor: pointer;
  background: var(--parchment);
  backface-visibility: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.35);
  transition: transform 0.5s cubic-bezier(0.34, 1, 0.64, 1), opacity 0.4s ease, box-shadow 0.4s ease;
}
.lm-card.is-active { box-shadow: 0 20px 48px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.3); }
.lm-card-media {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  border-radius: 11px; background: #d9d2c2;
  box-shadow: inset 0 0 0 1px rgba(30,26,18,0.12);
}
.lm-card-media img, .lm-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lm-card-caption { flex: none; padding: 13px 8px 15px; }
.lm-card-title {
  font-family: var(--t-display); font-weight: 400; font-size: 21px; line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); text-wrap: balance;
}
.lm-card-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.lm-card-role { font-family: var(--t-body); font-weight: 400; font-size: 12.5px; line-height: 1.3; color: rgba(30,26,18,0.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-card-no { flex: none; font-family: var(--t-tag); font-weight: 500; font-size: 11.5px; color: var(--gold-deep); font-variant-numeric: tabular-nums; }