/* ==========================================================================
   Ragtrail "International" theme layer.
   Loaded after style.css on every page and in the portal. It only restyles:
   no content, feature or visual is removed. Delete the <link> to luxe.css
   (generator/common.py and portal/inc/layout.php) to return to the previous look.
   ========================================================================== */
:root {
  --paper: #f5f1e9;
  --paper-50: #fcfaf6;
  --paper-200: #ede6d9;
  --paper-300: #e2d9c8;
  --ink: #12110f;
  --ink-900: #0b0a09;
  --ink-700: #26231f;
  --line: #ddd4c4;
  --line-dark: #2f2b26;
  --gold: #a8844c;
  --gold-600: #8d6c39;
  --gold-300: #d6bc8a;
  --gold-100: #f3e9d5;

  --serif: "Cormorant Garamond", "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 2px;
  --track: 0.22em;
}

/* ---------- Type ---------- */
body { font-family: var(--sans); font-size: 16px; letter-spacing: 0.005em; }
h1, h2, h3, h4, .h3, .h4 { font-family: var(--serif); font-weight: 500; }
.display-xl { font-size: clamp(2.9rem, 5vw + 0.6rem, 5.6rem); line-height: 0.98; letter-spacing: -0.015em; font-weight: 500; }
.display-lg { font-size: clamp(2.5rem, 4.4vw + 0.5rem, 4.6rem); line-height: 1.0; letter-spacing: -0.012em; font-weight: 500; }
.display-md { font-size: clamp(2rem, 2.8vw + 0.5rem, 3.2rem); line-height: 1.06; letter-spacing: -0.01em; font-weight: 500; }
.lede { font-size: 1.12rem; line-height: 1.75; font-weight: 400; }
.heading .intro { line-height: 1.8; }

/* Labels: spaced small capitals instead of typewriter type */
.eyebrow, .tag, .marker .num, .cat-note, .fc-lock, .snap-live, .gj-top + small, .scan-label {
  font-family: var(--sans) !important; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; font-size: 0.68rem;
}
.marker { border-top-color: var(--gold-300); padding-top: 18px; gap: 16px; }
.marker .num { color: var(--gold); }
.bg-ink .marker .num, .hero-dark .marker .num, .cta-band .marker .num { color: var(--gold-300); }
.bg-ink .marker, .hero-dark .marker { border-top-color: rgba(214, 188, 138, 0.35); }
.text-clay, .bg-ink .text-clay { color: var(--gold); }
.bg-ink .text-clay { color: var(--gold-300); }

/* ---------- Spacing ---------- */
.section { padding: 96px 0; }
@media (min-width: 1024px) { .section { padding: 128px 0; } .heading h2 { margin-top: 28px; } }
.container { max-width: 1280px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

/* ---------- Buttons ---------- */
.btn {
  padding: 15px 28px; border-radius: 0; font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--ink); border-color: var(--ink);
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.secondary { background: transparent; border-color: rgba(18, 17, 15, 0.35); }
.btn.secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper-50); }
.btn.inverse { background: var(--paper-50); border-color: var(--paper-50); }
.btn.inverse:hover { background: var(--gold-300); border-color: var(--gold-300); color: var(--ink); }
.btn.ghost-dark, .btn.outline-light { border-color: rgba(245, 241, 233, 0.35); }
.btn.ghost-dark:hover, .btn.outline-light:hover { border-color: var(--gold-300); color: var(--gold-300); background: transparent; }
.btn.small { padding: 10px 16px; font-size: 0.68rem; }
.btn.wa { letter-spacing: 0.12em; }
.page-hero.hero-dark .btn:not(.ghost-dark):not(.secondary):not(.inverse):not(.wa),
.home-hero .btn:not(.ghost-dark):not(.secondary):not(.wa):first-child { background: var(--gold-300); border-color: var(--gold-300); color: var(--ink); }
.page-hero.hero-dark .btn:not(.ghost-dark):not(.secondary):not(.inverse):not(.wa):hover,
.home-hero .btn:not(.ghost-dark):not(.secondary):not(.wa):first-child:hover { background: #e7d3ad; border-color: #e7d3ad; color: var(--ink); }
.link { text-decoration-color: var(--gold-300); text-underline-offset: 6px; }
.link:hover { text-decoration-color: var(--gold); color: var(--gold-600); }
.bg-ink .link:hover, .hero-dark .link:hover { color: var(--gold-300); }

/* ---------- Header with an international top bar ---------- */
.topbar { display: none; }
@media (min-width: 1024px) {
  :root { --header-h: 104px; }
  .topbar { display: block; height: 34px; border-bottom: 1px solid rgba(18, 17, 15, 0.08); font: 500 0.68rem/34px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); }
  .topbar .container { display: flex; justify-content: space-between; gap: 24px; height: 34px; }
  .topbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar b { font-weight: 600; color: var(--gold); margin: 0 6px; }
  .topbar a { text-decoration: none; }
  .topbar a:hover { color: var(--gold); }
  .site-header > .container { height: calc(100% - 34px); }
  .site-header.on-dark:not(.scrolled):not(.menu-open) .topbar { border-color: rgba(245, 241, 233, 0.1); color: rgba(245, 241, 233, 0.6); }
  .site-header.on-dark:not(.scrolled):not(.menu-open) .topbar b { color: var(--gold-300); }
  .page-hero { padding-top: 168px; }
  .home-hero { padding-top: 140px; }
  .home-hero .hero-grid { min-height: calc(100vh - 140px); }
}
.site-header { background: rgba(245, 241, 233, 0.9); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.logo span { font: 600 1.05rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; }
.nav ul { gap: 26px; }
.nav a { font: 500 0.82rem var(--sans); letter-spacing: 0.04em; }
.nav a[aria-current="page"]::after { background: var(--gold); height: 1px; }
.header-cta, .header-signin { border-radius: 0; font: 600 0.68rem var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 16px; }
.header-cta:hover { background: var(--gold); border-color: var(--gold); }

/* ---------- Surfaces ---------- */
.card, .cat-card, .grade-jump, .way, .season-card, .p-card, .ob-card, .bs-card, .hb-card { border-radius: 2px; }
.card, .cat-card, .way { box-shadow: 0 1px 0 rgba(18, 17, 15, 0.02); }
.card:hover, .cat-card:hover { box-shadow: 0 28px 60px -40px rgba(18, 17, 15, 0.45); }
.cat-ico { background: var(--gold-100); color: var(--gold-600); }
.way-n { background: var(--ink); color: var(--gold-300); font-family: var(--serif); font-size: 1.1rem; }
.pill { font-family: var(--sans); font-weight: 600; letter-spacing: 0.12em; }
.stat .k, .snap-grid b { font-family: var(--serif); font-weight: 500; }
.steps li::before { font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0; color: var(--gold); }

/* Dark areas: gold hairlines and a soft glow */
.hero-dark, .bg-ink, .cta-band { background-color: var(--ink); }
.hero-dark { background-image: radial-gradient(120% 80% at 85% 0%, rgba(168, 132, 76, 0.16), transparent 55%); }
.cta-band { background-image: radial-gradient(90% 120% at 100% 100%, rgba(168, 132, 76, 0.18), transparent 60%); }
.cta-band h2 { font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer .eyebrow, .footer-h { color: var(--gold-300) !important; }
.site-footer .logo span { letter-spacing: 0.32em; }

/* ---------- Ticker ---------- */
.ticker li { font-family: var(--sans) !important; font-weight: 600; letter-spacing: 0.2em; font-size: 0.68rem; }

/* Every uppercase label that used the monospace face: spaced small capitals in Manrope (data and references stay monospace) */
.bale3d .f1::after,
.bs-arrow,
.cat-note,
.datalist dt,
.dr-h,
.eyebrow,
.fc-lock,
.fc-mail small,
.flag,
.footer-h,
.journey-steps .stage,
.manifest-head,
.pill,
.scroll-cue,
.snap-live,
.tag,
.ticker li,
.tm-tag,
.tok-fields dt,
.wh-loading,
.wh-log li .who,
.with-suffix .suffix,
table.trade tbody th.mono-th,
table.trade thead th {
  font-family: var(--sans) !important; font-weight: 600; letter-spacing: 0.2em;
}

.p-header .logo em,
.p-table th,
.p-who small,
.trust-strip,
dl.mini dt {
  font-family: var(--sans) !important; font-weight: 600; letter-spacing: 0.18em;
}

/* ---------- 3D scenes: same scenes, premium overlays ---------- */
/* Floating labels on the port hero and the Industry story: glass tags with a gold marker */
.hero-pins span, .pin {
  font: 600 0.62rem/1 var(--sans) !important; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 14px 8px 26px; background: rgba(11, 10, 9, 0.62); border-color: rgba(214, 188, 138, 0.45);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.hero-pins span::before, .pin::before { left: 11px; width: 7px; height: 7px; margin-top: -3.5px; background: var(--gold-300); box-shadow: 0 0 0 3px rgba(214, 188, 138, 0.22); }
.hero-pins span::after, .pin::after { background: linear-gradient(rgba(214, 188, 138, 0.7), transparent); height: 24px; }
@supports (backdrop-filter: blur(1px)) { .hero-pins span, .pin { backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); } }

/* Hotspots on the 3D container explorer */
.hotspot span { font-family: var(--serif) !important; font-size: 1rem; background: var(--paper-50); box-shadow: 0 0 0 4px rgba(214, 188, 138, 0.25); }
.hotspot span::after { border-color: rgba(214, 188, 138, 0.8); }
.hotspot[aria-pressed="true"] span { background: var(--gold); }
.hotspot em { font: 600 0.62rem var(--sans) !important; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(214, 188, 138, 0.35); }

/* Warehouse in 3D: stage chips, pins and panels */
.wh-chips button { font: 600 0.66rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; border-color: rgba(214, 188, 138, 0.25); }
.wh-chips button span { font-family: var(--serif) !important; font-size: 0.85rem; }
.wh-chips button[aria-current="step"] { background: var(--gold-300); border-color: var(--gold-300); color: var(--ink); }
.wh-chips button[aria-current="step"] span { background: var(--ink); color: var(--gold-300); }
.wh-pin { box-shadow: 0 0 0 4px rgba(214, 188, 138, 0.25); }
.wh-pin:hover, .wh-pin:focus-visible { background: var(--gold); }
.wh-panel, .wh-side { border-color: rgba(214, 188, 138, 0.22); border-radius: 4px; background: rgba(11, 10, 9, 0.86); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.wh-rec { border-left-color: var(--gold-300); }
.wh-log li .who { font-family: var(--sans) !important; letter-spacing: 0.16em; color: var(--gold-300); }

/* A soft cinematic vignette over the home hero canvas (the stage holds only the canvas; the scene is untouched) */
.hero-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 62% 45%, transparent 58%, rgba(11, 10, 9, 0.32) 100%); }
/* Cormorant's numbers sit low by default; use full-height numbers wherever figures matter */
body, .display-xl, .display-lg, .display-md, h1, h2, h3, .stat .k, .snap-grid b, .way-n, .wh-chips button span, .hotspot span, .steps li::before { font-variant-numeric: lining-nums; }