/* =========================================================
   AK REAL ESTATE — Foundations: Color + Type
   Dark, cinematic, editorial. Black/charcoal base, crimson
   accent, condensed editorial display type.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100;200;300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ---------- COLOR — Base / Neutrals ---------- */
  --ak-black:           #000000;   /* true black — hero, contact */
  --ak-ink:             #0a0a0a;   /* near-black — main dark sections */
  --ak-charcoal:        #141414;   /* secondary dark surface */
  --ak-graphite:        #1c1c1c;   /* card on dark */
  --ak-smoke:           #2a2a2a;   /* divider on dark, hairline */
  --ak-iron:            #3a3a3a;   /* outline on dark */

  --ak-bone:            #f5f1ea;   /* warm bone — light section bg */
  --ak-paper:           #ece7dd;   /* secondary cream */
  --ak-stone:           #c9c2b4;   /* muted warm stone */
  --ak-fog:             #8a8478;   /* warm mid gray */
  --ak-pewter:          #4a4a48;   /* dark warm gray */

  --ak-white:           #ffffff;
  --ak-mute:            #9a9590;   /* small caption text on dark */
  --ak-dim:             #5a5550;   /* tertiary text */

  /* ---------- COLOR — Accent ---------- */
  --ak-crimson:         #b0181c;   /* primary accent — CTAs, marks */
  --ak-crimson-deep:    #7a0f12;   /* hover / pressed */
  --ak-crimson-bright:  #d12028;   /* highlight, focus */
  --ak-blood:           #4a0608;   /* deep editorial wash */

  /* ---------- COLOR — Semantic ---------- */
  --bg:                 var(--ak-ink);
  --bg-alt:             var(--ak-bone);
  --surface:            var(--ak-charcoal);
  --surface-2:          var(--ak-graphite);
  --hairline:           var(--ak-smoke);
  --hairline-light:     rgba(255, 255, 255, 0.08);
  --hairline-dark:      rgba(0, 0, 0, 0.10);

  --fg:                 var(--ak-white);
  --fg-2:               var(--ak-mute);
  --fg-3:               var(--ak-dim);
  --fg-on-light:        var(--ak-ink);
  --fg-on-light-2:      var(--ak-pewter);
  --fg-on-light-3:      var(--ak-fog);

  --accent:             var(--ak-crimson);
  --accent-hover:       var(--ak-crimson-deep);

  /* Cinematic overlays — placed over hero / property imagery */
  --overlay-hero:       linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.85) 100%);
  --overlay-card:       linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.75) 100%);
  --overlay-flat:       rgba(0,0,0,0.45);

  /* ---------- TYPE — Families ---------- */
  --font-display:       'Antonio', 'Saira Condensed', 'Oswald', 'Helvetica Neue Condensed', sans-serif;
  --font-body:          'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE — Weight ---------- */
  --w-thin:    200;
  --w-light:   300;
  --w-reg:     400;
  --w-med:     500;
  --w-bold:    600;

  /* ---------- TYPE — Scale (display) ---------- */
  --t-hero:     clamp(72px, 11vw, 196px);  /* full-bleed hero headline */
  --t-display:  clamp(56px, 7.5vw, 132px); /* section opener */
  --t-h1:       clamp(40px, 5vw, 84px);
  --t-h2:       clamp(30px, 3.6vw, 56px);
  --t-h3:       clamp(22px, 2.2vw, 34px);
  --t-h4:       18px;

  /* ---------- TYPE — Scale (body) ---------- */
  --t-lead:     19px;   /* article lead */
  --t-body:     15px;   /* default */
  --t-small:    13px;
  --t-micro:    11px;   /* labels, eyebrows */
  --t-nano:     10px;   /* corner crops */

  /* ---------- TYPE — Tracking ---------- */
  --track-tightest: -0.04em;
  --track-tighter:  -0.02em;
  --track-tight:    -0.01em;
  --track-normal:    0;
  --track-wide:      0.08em;
  --track-wider:     0.14em;
  --track-widest:    0.28em;   /* eyebrows, nav */
  --track-vertical:  0.42em;   /* vertical rotated labels */

  /* ---------- TYPE — Line height ---------- */
  --lh-display: 0.92;
  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.8;

  /* ---------- SPACING ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;
  --s-11: 192px;
  --gutter:         clamp(24px, 4vw, 64px);
  --section-y:      clamp(80px, 10vw, 160px);

  /* ---------- RADIUS ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-card: 4px;     /* "slight" border radius on cards */
  --r-pill: 999px;

  /* ---------- SHADOW (used sparingly — luxury restraint) ---------- */
  --sh-card:    0 24px 60px -20px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.18);
  --sh-light:   0 18px 40px -16px rgba(20,18,14,0.22);
  --sh-press:   0 2px 6px rgba(0,0,0,0.6);

  /* ---------- MOTION ---------- */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 0.84, 0.32, 1);
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
  --dur-cine:    900ms;
}

/* =========================================================
   Semantic typographic atoms — apply by class
   ========================================================= */

.ak-hero {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg);
}

.ak-display {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}

.ak-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.ak-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.ak-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-reg);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.ak-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-med);
  font-size: var(--t-h4);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}

.ak-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-med);
  font-size: var(--t-micro);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

.ak-eyebrow .mark { color: var(--accent); }

.ak-vertical {
  font-family: var(--font-body);
  font-weight: var(--w-med);
  font-size: var(--t-micro);
  letter-spacing: var(--track-vertical);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--fg-2);
}

.ak-lead {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--fg);
}

.ak-body {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.ak-small {
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.ak-meta {
  font-family: var(--font-body);
  font-weight: var(--w-med);
  font-size: var(--t-micro);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Red highlight word inside a display heading */
.ak-mark {
  color: var(--accent);
  font-style: italic;
  font-weight: var(--w-reg);
}

/* =========================================================
   Page baseline
   ========================================================= */
.ak-base {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--w-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}