/* Blue Monadel International Ltd. — Domain Ownership Notice
 * Design system: austere monochrome luxury (from the supplied DESIGN.md).
 * Pure black canvas, white uppercase letterspaced display, weight 400 everywhere,
 * Display / serif Text / Monospace trinity, 0px radius, no shadows, no gradients.
 * The brand logo is the only colour on the page. */

@font-face {
  font-family: "Saira Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/saira-condensed-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-latin.woff2") format("woff2");
}

:root {
  /* colors */
  --canvas: #000000;
  --ink: #ffffff;
  --body: #cccccc;
  --body-strong: #e6e6e6;
  --muted: #999999;
  --muted-soft: #666666;
  --hairline: #262626;
  --hairline-strong: #3a3a3a;

  /* families */
  --font-display: "Saira Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-text: "EB Garamond", Garamond, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  /* spacing */
  --xs: 8px;
  --sm: 12px;
  --md: 16px;
  --lg: 24px;
  --xl: 40px;
  --xxl: 64px;
  --section: 120px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); }
h1, p, dl, dd { margin: 0; }
h1, strong, b { font-weight: 400; }
img { display: block; max-width: 100%; height: auto; }

body {
  color: var(--body);
  font-family: var(--font-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--canvas); }

/* ---------- typography roles ---------- */
.type-display-xl {
  font-family: var(--font-display);
  font-size: 64px; line-height: 1.1; letter-spacing: 4px;
  text-transform: uppercase; color: var(--ink);
}
.type-title-md {
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.3; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink);
}
.type-wordmark {
  font-family: var(--font-display);
  font-size: 14px; line-height: 1; letter-spacing: 6px;
  text-transform: uppercase; color: var(--ink);
}
.type-caption {
  font-family: var(--font-mono);
  font-size: 11px; line-height: 1.4; letter-spacing: 2px;
  text-transform: uppercase;
}
.type-nav {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.4; letter-spacing: 2px;
  text-transform: uppercase;
}
.type-body-md { font-family: var(--font-text); font-size: 16px; line-height: 1.5; }
.type-body-sm { font-family: var(--font-text); font-size: 14px; line-height: 1.5; }

.muted { color: var(--muted); }
.strong { color: var(--body-strong); }

/* ---------- layout ---------- */
.page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }

.nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 56px; padding: 0 var(--xl);
}
.nav .type-wordmark { grid-column: 2; }
.nav-side { color: var(--muted); }
.nav-right { justify-self: end; }

.hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 96px var(--lg);
}
.logo { width: 112px; height: 112px; }
.hero > .type-caption { margin-top: var(--xl); }
.hero h1 { margin-top: var(--lg); max-width: 56rem; }
.statements { margin-top: 32px; max-width: 36rem; }
.statements p + p { margin-top: var(--sm); }

.specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: 100%; max-width: 64rem; margin-top: 80px;
  border-top: 1px solid var(--hairline);
}
.spec {
  display: flex; flex-direction: column-reverse; align-items: center; gap: var(--xs);
  padding: var(--lg) var(--md);
  border-right: 1px solid var(--hairline);
}
.spec:last-child { border-right: 0; }
.spec dd { word-break: break-all; }

.identity {
  display: flex; flex-direction: column; align-items: center; gap: var(--lg);
  padding: var(--xxl) var(--lg); text-align: center;
  border-top: 1px solid var(--hairline);
}
/* corporate motto — Integrity • Precision • Innovation */
.identity { gap: 40px; padding: 112px var(--lg); }
.type-motto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: 28px; row-gap: 12px;
  font-family: var(--font-display); font-size: 26px; line-height: 1.2; letter-spacing: 10px;
  text-transform: uppercase; color: var(--ink);
}
/* letter-spacing trails the last glyph; pull it back so each word sits optically centred */
.motto-word { margin-right: -10px; }
.motto-dot { font-size: 0.75em; letter-spacing: 0; color: var(--body); }
.motto-rule { display: block; width: 48px; height: 1px; background: var(--hairline-strong); }

.footer {
  padding: 32px var(--lg); text-align: center;
  border-top: 1px solid var(--hairline); color: var(--muted-soft);
}

/* ---------- one quiet reveal ---------- */
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal { animation: reveal 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.d1 { animation-delay: 150ms; }
.d2 { animation-delay: 250ms; }
.d3 { animation-delay: 400ms; }
.d4 { animation-delay: 550ms; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .nav { padding: 0 var(--lg); }
  .nav-side { display: none; }
  .hero { padding: var(--xxl) var(--lg); }
  .logo { width: 80px; height: 80px; }
  .type-display-xl { font-size: 32px; letter-spacing: 2px; line-height: 1.15; }
  .specs { grid-template-columns: 1fr; margin-top: var(--xxl); }
  .spec { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .identity { padding: 80px var(--lg); }
  .type-motto { font-size: 15px; letter-spacing: 4px; column-gap: 12px; }
  .motto-word { margin-right: -4px; }
}