/* ============================================================
   SILK ROUTE TRADE PARTNERS — "The Manifest"
   Dark technical-cartographic system. Steel + customs-stamp.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Archivo:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  --bg:        oklch(0.185 0.016 252);
  --bg-2:      oklch(0.222 0.018 252);
  --bg-3:      oklch(0.262 0.020 252);
  --panel:     oklch(0.235 0.019 252);
  --line:      oklch(0.345 0.022 250);
  --line-soft: oklch(0.30 0.020 251);

  --fg:        oklch(0.945 0.006 95);
  --fg-dim:    oklch(0.745 0.012 245);
  --fg-faint:  oklch(0.575 0.016 248);

  --stamp:     oklch(0.685 0.165 46);   /* customs-stamp amber  */
  --stamp-2:   oklch(0.60 0.17 42);
  --signal:    oklch(0.78 0.105 205);   /* steel route cyan     */

  --display: 'Bricolage Grotesque', sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --mono:    'Spline Sans Mono', ui-monospace, monospace;

  --maxw: 1280px;
  --gut: clamp(20px, 4.5vw, 70px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--bg);
  color: var(--fg-dim);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint technical grid */
  background-image:
    linear-gradient(oklch(1 0 0 / 0.022) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.022) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--fg);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(70px, 9vw, 132px); position: relative; }

/* ---- mono tag / code labels ---- */
.tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.tag-stamp { color: var(--stamp); }
.tag-signal { color: var(--signal); }

/* section marker §0X */
.sec-no {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--stamp);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.sec-no::after { content: ""; width: 46px; height: 1px; background: var(--line); }

/* ---- buttons ---- */
.btn {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .2s ease;
}
.btn .arr { transition: transform .22s ease; }
.btn:hover .arr { transform: translateX(4px); }
.btn-stamp { background: var(--stamp); border-color: var(--stamp); color: oklch(0.2 0.04 50); font-weight: 600; }
.btn-stamp:hover { background: var(--stamp-2); border-color: var(--stamp-2); transform: translateY(-2px); }
.btn-ghost { color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg-dim); background: oklch(1 0 0 / 0.04); }

/* corner registration ticks (decorative frame) */
.ticks { position: absolute; inset: 0; pointer-events: none; }
.ticks::before, .ticks::after {
  content: ""; position: absolute; width: 11px; height: 11px;
  border: 1px solid var(--line);
}

/* ============ HEADER ============ */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand .name {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  color: var(--fg); letter-spacing: -0.01em; line-height: 1; text-transform: uppercase;
}
.brand .name small {
  display: block; font-family: var(--mono); font-weight: 400;
  font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: 4px;
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn) { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); transition: color .18s; }
.nav a:not(.btn):hover, .nav a.active:not(.btn) { color: var(--stamp); }
.nav .btn { padding: 11px 18px; }

/* ============ FOOTER ============ */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(56px, 7vw, 88px) 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; align-items: start; }
.site-foot h4 { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stamp); margin-bottom: 18px; }
.site-foot p { color: var(--fg-dim); font-size: 15px; }
.foot-links { display: flex; flex-direction: column; gap: 12px; }
.foot-links a { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--fg-dim); transition: color .18s; }
.foot-links a:hover { color: var(--fg); }
.foot-base {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--fg-faint);
}

/* ---- image slots (technical plates) ---- */
image-slot { --slot-bg: var(--bg-3); display: block; }
.plate { position: relative; }
.plate .plate-cap {
  position: absolute; left: 0; bottom: 0; transform: translateY(115%);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-faint); padding-top: 10px;
}
.plate .plate-no {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--stamp); background: var(--bg); padding: 4px 8px; border: 1px solid var(--line);
}

@media (max-width: 880px) {
  .nav { gap: 16px; }
  .nav a:not(.btn) { display: none; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---- load reveal ---- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .25s; }
.d4 { animation-delay: .35s; } .d5 { animation-delay: .45s; } .d6 { animation-delay: .55s; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; } }