/* ============================================================
   before you go — editorial travel brand · shared design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..600&family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&family=Noto+Naskh+Arabic:wght@400;500;600&display=swap');

:root {
  /* ============ SURFACES ============ */
  --paper:        #FBF8F2;
  --paper-2:      #F1ECE3;
  --paper-3:      #E8E1D3;
  --ink:          #211C18;
  --ink-soft:     #4A433C;
  --ink-mute:     #897F70;
  --hair:         #DCD4C5;
  --hair-strong:  #C7BCA7;

  /* ============ ACTION — the ONLY saturated color (solid fills only) ============ */
  /* accent on paper #FBF8F2 ≈ 4.65:1 → links / numbers / emphasis / large only; body text uses --ink */
  --accent:       #B0573A;
  --accent-deep:  #8E4429;
  --accent-wash:  #F3E4DC;
  --on-accent:    #FBF8F2;

  /* ============ INSIGHT — low-chroma editorial annotations (tint + rule + ink; NEVER solid) ============ */
  /* each --*-ink verified ≥4.5:1 on its own --*-bg */
  --insight-time-bg:   #F6EBD6;  --insight-time-line: #E2CB94;  --insight-time-rule: #A9781A;  --insight-time-ink: #6E4D12;
  --insight-warn-bg:   #F4E2DD;  --insight-warn-line: #DDB7AC;  --insight-warn-rule: #A23D34;  --insight-warn-ink: #8A3B2C;
  --insight-tip-bg:    #E4ECE8;  --insight-tip-line:  #AFC8C0;  --insight-tip-rule:  #3C6E57;  --insight-tip-ink:  #2F5547;

  /* ---- legacy aliases (migration shim → semantic tokens above) ---- */
  --sienna:       var(--accent);
  --sienna-deep:  var(--accent-deep);
  --sienna-wash:  var(--accent-wash);
  --amber:        var(--insight-time-rule);  --amber-bg: var(--insight-time-bg);  --amber-line: var(--insight-time-line);
  --rose:         var(--insight-warn-rule);  --rose-bg:  var(--insight-warn-bg);  --rose-line:  var(--insight-warn-line);
  --teal:         var(--insight-tip-rule);   --teal-bg:  var(--insight-tip-bg);   --teal-line:  var(--insight-tip-line);
  --verify:       var(--insight-tip-rule);   /* green folded into the tip family — no separate 4th color */

  /* ============ TYPE — Latin display/body/mono with CJK + Arabic fallbacks ============ */
  --cjk-serif: 'Noto Serif SC', 'Noto Serif JP', 'Noto Serif KR';
  --cjk-sans:  'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR';
  --arabic:    'Noto Naskh Arabic';
  --display: 'Fraunces', var(--cjk-serif), var(--arabic), Georgia, serif;
  --sans:    'Geist', var(--cjk-sans), var(--arabic), system-ui, -apple-system, sans-serif;
  --mono:    'Geist Mono', var(--cjk-sans), ui-monospace, monospace;

  /* ============ RHYTHM ============ */
  --maxw: 1340px;
  --node-maxw: 760px;
  --gutter: clamp(20px, 5vw, 76px);
  --section-y: clamp(54px, 7vw, 100px);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 30px; --s-7: 44px; --s-8: 64px;

  /* ============ TYPE SCALE — fluid editorial stops (Fraunces display in clamp) ============ */
  --fs-mega:   clamp(40px, 5.6vw, 76px);
  --fs-h1:     clamp(33px, 4.6vw, 56px);
  --fs-h2:     clamp(28px, 3.8vw, 46px);
  --fs-h3:     clamp(22px, 2.4vw, 30px);
  --fs-lede:   clamp(19px, 1.9vw, 22px);
  --fs-body:   17px;
  --fs-small:  14px;
  --fs-kicker: 12px;
  --fs-micro:  10.5px;

  /* ---- weights · tracking · leading ---- */
  --weight-light: 300; --weight-regular: 400; --weight-display: 420;  /* Fraunces headings sit ~420 */
  --weight-medium: 500; --weight-semi: 560; --weight-bold: 600;
  --track-display: -0.018em; --track-body: 0.005em; --track-kicker: 0.18em; --track-label: 0.08em;
  --leading-display: 1.04; --leading-tight: 1.18; --leading-body: 1.65;

  /* ============ RADIUS · BORDER · SHADOW · MOTION ============ */
  --radius-0: 0px;        /* default: cards, frames, buttons — the brand is square */
  --radius: 10px;         /* photo proof figures only */
  --radius-pill: 999px;   /* live dots, tier markers */
  --border-hair: 1px solid var(--hair);
  --border-strong: 1px solid var(--hair-strong);
  --border-ink: 1px solid var(--ink);
  --shadow-card:  0 1px 2px -1px rgba(33, 28, 24, .12);
  --shadow-raise: 0 2px 5px -2px rgba(33, 28, 24, .16);
  --shadow-plate: 0 3px 8px -3px rgba(33, 28, 24, .18);
  --shadow-inset: none;   /* tinted callouts frame with border + top-rule, not a drop shadow */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: .2s; --dur: .25s; --dur-slow: .7s;
}

/* RTL foundation — full mirroring staged P3; logical properties carry most of it */
[dir="rtl"] { direction: rtl; }

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.005em;
}

::selection { background: var(--sienna); color: var(--paper); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Type primitives ---------- */
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sienna);
  margin: 0;
}
.kicker--mute { color: var(--ink-mute); }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
  margin: 0;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; margin: 0; }

.lede {
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline-start: var(--gutter);
  padding-inline-end: var(--gutter);
}
.hair { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.85em 1.4em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { background: var(--sienna); border-color: var(--sienna); }
.btn--accent { background: var(--sienna); border-color: var(--sienna); }
.btn--accent:hover { background: var(--sienna-deep); border-color: var(--sienna-deep); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--hair-strong);
  width: fit-content;
  transition: border-color .25s, gap .25s, color .25s;
}
.link-arrow:hover { border-color: var(--sienna); gap: 0.85em; color: var(--sienna); }
.link-arrow .ar { transition: transform .25s; }
.link-arrow:hover .ar { transform: translateX(3px); }

/* ---------- Site header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.site-head__row {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; gap: 24px;
}
/* ---- b4ugo brand lockup: the B4 stamp + two-line wordmark ---- */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__stamp {
  width: 30px; height: 30px; flex: none; border-radius: 24%;
  background: var(--ink); display: grid; place-items: center;
}
.brand__stamp span {
  font-family: var(--sans); font-weight: var(--weight-bold); font-size: 16px; line-height: 1;
  letter-spacing: -0.04em; color: var(--accent);
}
.brand__stamp span i { font-style: normal; color: var(--accent); }
.brand__txt { display: flex; flex-direction: column; gap: 1px; }
.brand__name {
  font-family: var(--display); font-size: 21px; font-weight: var(--weight-display);
  letter-spacing: -0.022em; line-height: 1; color: var(--ink); white-space: nowrap;
}
.brand__name .dot { color: var(--accent); }
.brand__sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft);
}
.brand__sub b { color: var(--accent); font-weight: var(--weight-medium); }
/* legacy single-line fallback (defensive: old markup that still uses .brand > .dot) */
.brand > .dot { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 14px; font-weight: 450; color: var(--ink-soft);
  letter-spacing: 0.01em; transition: color .2s; position: relative;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); }
.nav-cta {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1px solid var(--ink); padding: 9px 16px;
  transition: background .2s, color .2s;
}
.nav-cta:hover { background: var(--ink); color: var(--paper); }
.nav-lang {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute);
  border: 1px solid var(--hair-strong); padding: 7px 10px; cursor: default; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.nav-lang:hover { color: var(--ink); border-color: var(--ink-mute); }

/* ---------- Photo placeholders (on-palette, contour-mapped) ---------- */
.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, color-mix(in srgb, var(--ph-tint, var(--sienna)) 22%, transparent), transparent 60%),
    linear-gradient(160deg, var(--paper-2), var(--paper-3));
  isolation: isolate;
}
.ph::before {
  /* contour-line topography texture */
  content: "";
  position: absolute; inset: -20%;
  background-image:
    repeating-radial-gradient(circle at 30% 70%,
      transparent 0 22px,
      color-mix(in srgb, var(--ink) 7%, transparent) 22px 23px),
    repeating-radial-gradient(circle at 80% 20%,
      transparent 0 30px,
      color-mix(in srgb, var(--ink) 5%, transparent) 30px 31px);
  opacity: 0.5;
  z-index: -1;
}
.ph__label {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  padding: 5px 9px; border: 1px solid var(--hair); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
}
.ph__label::before {
  content: ""; width: 6px; height: 6px; background: var(--sienna);
  border-radius: 50%;
}
.ph__coord {
  position: absolute; right: 14px; top: 13px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink-mute); z-index: 2;
}

/* star glyph */
.stars { color: var(--sienna); letter-spacing: 0.1em; font-size: 13px; }

/* ---------- real media inside diorama/scene slots ---------- */
.dio > img, .dio > video,
.live-node__scene > img, .live-node__scene > video,
.node-card__scene > img, .node-card__scene > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; z-index: 0; display: block;
}
.dio.has-media::before, .dio.has-media::after { opacity: 0; }
/* AI-scene credit chip (reused) */
.media-ai {
  position: absolute; inset-inline-end: 12px; top: 12px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); background: color-mix(in srgb, #211C18 58%, transparent);
  padding: 4px 8px; backdrop-filter: blur(3px);
}
.media-ai .spark { color: #E0A07F; }

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .nav { gap: 18px; }
  .nav .nav-hide { display: none; }
}
@media (max-width:560px){ .brand__sub{ display:none; } }