/* ==========================================================================
   Otabek Portfolio — design system
   Fonts: Times New Roman (display serif) · Geist (sans) · Geist Mono (labels)
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* colors (extracted from reference) */
  --bg-dark: #12110d;
  --bg-dark-2: #282623;
  --bg-cream: #f9f6ed;
  --bg-cream-2: #eee7db;
  --ink: #ffffff;            /* light text on dark */
  --ink-dim: #b1a89d;        /* muted text on dark */
  --ink-faint: #413e3c;      /* ghost numbers, faint on dark */
  --dark-ink: #12110d;       /* text on cream */
  --dark-ink-dim: #6f6a68;
  --gold: #366d51;
  --gold-dim: #2b573f;
  --line-dark: #34322d;
  --line-cream: #ddd9d1;
  --grid-line: rgba(18, 17, 13, 0.06);

  /* type */
  --serif: 'Times New Roman', Times, serif;
  --sans: 'Geist', 'Inter', -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --script: 'Mrs Saint Delafield', cursive;

  /* layout */
  --container: 1160px;
  --pad-x: 70px;
  --sec-y: 120px;
  --nav-h: 112px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.3s;
  --t-med: 0.6s;
}

@media (max-width: 1199px) { :root { --pad-x: 40px; --sec-y: 96px; } }
@media (max-width: 809px)  { :root { --pad-x: 20px; --sec-y: 72px; --nav-h: 84px; } }

/* ---------- light theme: the same tokens, flipped ---------- */
html.light {
  --bg-dark: #f9f6ed;        /* page surface */
  --bg-dark-2: #ffffff;      /* cards */
  --bg-cream: #ffffff;       /* formerly-cream sections go white */
  --bg-cream-2: #f3eee1;
  --ink: #12110d;
  --ink-dim: #6f6a68;
  --ink-faint: #d8d2c4;
  --line-dark: #ddd9d1;
}

/* some blocks stay dark even on the light theme (contrast rhythm) */
html.light .force-dark,
html.light .whyus-card {
  --bg-dark: #12110d;
  --bg-dark-2: #282623;
  --bg-cream: #f9f6ed;
  --bg-cream-2: #eee7db;
  --ink: #ffffff;
  --ink-dim: #b1a89d;
  --ink-faint: #413e3c;
  --line-dark: #34322d;
}
html.light .force-dark {
  background: var(--bg-dark);
  color: var(--ink);
}

/* theme-specific hero portrait: black shirt on dark, white shirt on light */
.hero-portrait .ph-light { display: none; }
html.light .hero-portrait .ph-dark { display: none; }
html.light .hero-portrait .ph-light { display: block; }

/* ---------- theme toggle ---------- */
.theme-toggle {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 150;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: var(--bg-dark-2);
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.theme-toggle:hover { background: var(--ink); color: var(--bg-dark); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; touch-action: manipulation; }
body {
  background: var(--bg-dark);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--gold); color: var(--bg-dark); }

/* ---------- type helpers ---------- */
.serif { font-family: var(--serif); font-weight: 400; }

.display-xl {              /* giant gold words: 140px desktop / 100 tablet / 64 phone */
  font-family: var(--serif);
  font-weight: 400;
  color: var(--gold);
  line-height: 0.8;
  letter-spacing: -0.03em;
  font-size: 140px;
}
.display-l {               /* hero h1: 64/56/40 */
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  font-size: 64px;
}
.h2 {                      /* section h2: 48/38/36 */
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  font-size: 48px;
}
.h3 { font-size: 32px; letter-spacing: -0.03em; line-height: 1; }
@media (max-width: 1199px) {
  .display-xl { font-size: 100px; }
  .display-l { font-size: 56px; }
  .h2 { font-size: 38px; }
}
@media (max-width: 809px) {
  .display-xl { font-size: 64px; }
  .display-l { font-size: 40px; }
  .h2 { font-size: 36px; }
}
.h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.eyebrow {                 /* • WHY US — mono 12, ls .14em, gold by default */
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow.dim { color: var(--ink-dim); }
.eyebrow::before { content: '•'; color: var(--gold); }
.eyebrow.no-dot::before { content: none; }
.on-cream .eyebrow { color: var(--dark-ink-dim); }

.mono-caption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--dark-ink-dim);
}

.body-dim { color: var(--ink-dim); font-size: 16px; }
.on-cream .body-dim { color: var(--dark-ink-dim); }

.sig { font-family: var(--script); font-size: 44px; color: var(--ink); line-height: 1; }

/* ---------- layout helpers ---------- */
.container { max-width: calc(var(--container) + var(--pad-x) * 2); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.on-cream { background: var(--bg-cream); color: var(--dark-ink); }
.hairline { border: 0; border-top: 1px solid var(--line-dark); }
.on-cream .hairline { border-top-color: var(--line-cream); }

/* ---------- buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 8px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.pill .arr {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg-dark);
  display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast);
}
.pill .arr svg { width: 14px; height: 14px; }
.pill:hover { background: var(--ink); color: var(--bg-dark); border-color: var(--ink); }
.pill:hover .arr { background: var(--bg-dark); color: var(--ink); transform: rotate(-45deg); }

.pill--solid { background: var(--ink); color: var(--bg-dark); border-color: var(--ink); }
.pill--solid .arr { background: var(--bg-dark); color: var(--ink); }
.pill--solid:hover { background: transparent; color: var(--ink); }
.pill--solid:hover .arr { background: var(--ink); color: var(--bg-dark); }

.on-cream .pill--dark { background: var(--dark-ink); color: var(--bg-cream); border-color: var(--dark-ink); }
.on-cream .pill--dark .arr { background: var(--bg-cream); color: var(--dark-ink); }
.on-cream .pill--dark:hover { background: transparent; color: var(--dark-ink); }

/* ---------- nav ---------- */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
}
.nav .container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 0.9fr 0.9fr 0.7fr auto;
  align-items: start;
  gap: 24px;
}
.nav-logo { font-family: var(--serif); font-size: 26px; letter-spacing: 0.01em; }
.nav-logo b { color: var(--gold); font-weight: 400; }
.nav-meta span { display: block; font-family: var(--sans); font-size: 14px; letter-spacing: -0.02em; }
.nav-meta .lbl { color: var(--ink-dim); }
.nav-links { display: flex; flex-direction: column; gap: 2px; }
.nav-links a { font-family: var(--sans); font-size: 14px; letter-spacing: -0.02em; line-height: 1.5; opacity: 0.9; transition: opacity var(--t-fast), color var(--t-fast); }
.nav-links a:hover { color: var(--gold); }
.nav-burger { display: none; }
.nav-mobile { display: none; }

@media (max-width: 1023px) {
  .nav .container { grid-template-columns: 1fr auto auto; }
  .nav-meta { display: none; }
  .nav-links { display: none; }
  .nav-burger {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line-dark); border-radius: 50%;
  }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    content: ''; display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative;
    transition: transform var(--t-fast), opacity var(--t-fast);
  }
  .nav-burger span::before { position: absolute; top: -6px; }
  .nav-burger span::after { position: absolute; top: 6px; }
  body.nav-open .nav-burger span { background: transparent; }
  body.nav-open .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-burger span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav-mobile {
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    position: fixed; inset: 0; z-index: 40;
    background: var(--bg-dark);
    padding: 0 var(--pad-x);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .nav-mobile a { font-family: var(--serif); font-size: 44px; line-height: 1.3; border-bottom: 1px solid var(--line-dark); padding: 12px 0; }
  body.nav-open .nav-mobile { opacity: 1; pointer-events: auto; }
}
@media (max-width: 809px) {
  .nav .container > .pill { display: none; }
  .nav .container { grid-template-columns: 1fr auto; }
}

/* ---------- word-stagger reveal ---------- */
.split .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.split.is-in .w { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .split .w { opacity: 1; transform: none; transition: none; } }

/* ---------- appear animations ---------- */
[data-appear], [data-appear-group] > * {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-appear="fade"] { transform: none; }
[data-appear="fade-left"] { transform: translateX(-42px); }
[data-appear="fade-right"] { transform: translateX(42px); }
[data-appear="scale"] { transform: scale(0.94); }
[data-appear].is-in, [data-appear-group] > .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-appear], [data-appear-group] > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- page transition ---------- */
.page-fade {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-dark);
  opacity: 1; pointer-events: none;
  transition: opacity 0.45s ease, visibility 0s 0.5s;
}
.page-fade.done { opacity: 0; visibility: hidden; }