/* ===========================================================
   HARVEY L. PHELPS — EXECUTIVE ADVISORY
   2026 Luxury Asset System · Design Tokens
   Aesthetic: Old-Money Editorial (Bloomberg × Robb Report)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ——— Core Brand ——— */
  --hlp-midnight:      #0A0D11;   /* Midnight Black — primary ground */
  --hlp-navy:          #1A2540;   /* Deep executive navy */
  --hlp-navy-deep:     #0F1830;   /* Cinematic navy */
  --hlp-gold:          #C9A961;   /* Signature gold */
  --hlp-gold-warm:     #D4B776;   /* Warm gold highlight */
  --hlp-gold-deep:     #A88A47;   /* Antique gold */
  --hlp-champagne:     #E8D9B8;   /* Whisper accent */

  /* ——— Paper System (Ivory) ——— */
  --hlp-ivory:         #F5F0E6;   /* Primary paper */
  --hlp-ivory-soft:    #FAF6EC;   /* Airy paper */
  --hlp-ivory-deep:    #EBE3D2;   /* Card / envelope */
  --hlp-bone:          #F0EBDD;   /* Stationery bone */

  /* ——— Neutrals ——— */
  --hlp-ink:           #14171C;   /* Editorial text */
  --hlp-ink-soft:      #2A2F38;   /* Body */
  --hlp-graphite:      #4A5060;   /* Muted */
  --hlp-silver:        #8C8579;   /* Warm silver */
  --hlp-rule:          #1F2A44;   /* Rule lines on light */
  --hlp-rule-light:    rgba(26, 37, 64, 0.12);

  /* ——— Foil Gradients (restrained luxury) ——— */
  --hlp-gold-foil: linear-gradient(135deg, #A88A47 0%, #D4B776 25%, #F0DDA6 50%, #C9A961 75%, #A88A47 100%);
  --hlp-gold-thread: linear-gradient(180deg, #A88A47 0%, #D4B776 50%, #A88A47 100%);
  --hlp-navy-depth: linear-gradient(180deg, #0F1830 0%, #1A2540 55%, #0A0D11 100%);

  /* ——— Type ——— */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ——— Scale (editorial rhythm) ——— */
  --step-0:  clamp(0.72rem, 0.68rem + 0.2vw, 0.78rem);
  --step-1:  clamp(0.86rem, 0.82rem + 0.2vw, 0.94rem);
  --step-2:  clamp(1.00rem, 0.96rem + 0.25vw, 1.10rem);
  --step-3:  clamp(1.18rem, 1.12rem + 0.4vw, 1.35rem);
  --step-4:  clamp(1.44rem, 1.34rem + 0.7vw, 1.72rem);
  --step-5:  clamp(1.86rem, 1.70rem + 1.1vw, 2.30rem);
  --step-6:  clamp(2.40rem, 2.16rem + 1.6vw, 3.10rem);
  --step-7:  clamp(3.20rem, 2.80rem + 2.4vw, 4.50rem);
  --step-8:  clamp(4.20rem, 3.50rem + 3.5vw, 6.20rem);

  /* ——— Space ——— */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ——— Print (US Letter, Business Card) ——— */
  --bc-w: 3.5in;
  --bc-h: 2in;
  --letter-w: 8.5in;
  --letter-h: 11in;
}

/* ——— Base editorial reset ——— */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--hlp-ink);
  background: var(--hlp-ivory);
  font-feature-settings: "ss01", "cv11", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ——— Editorial primitives ——— */
.hlp-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.hlp-headline {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.hlp-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hlp-gold-deep);
}
.hlp-eyebrow-navy {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hlp-navy);
}
.hlp-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-4);
  line-height: 1.35;
  color: var(--hlp-ink-soft);
}
.hlp-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.6;
  color: var(--hlp-ink-soft);
}
.hlp-caption {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hlp-silver);
}
.hlp-serif-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ——— Gold foil text ——— */
.hlp-foil {
  background: var(--hlp-gold-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ——— Editorial rule (hair line + gold pip) ——— */
.hlp-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hlp-rule::before,
.hlp-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hlp-rule);
}
.hlp-rule .pip {
  width: 6px;
  height: 6px;
  background: var(--hlp-gold);
  transform: rotate(45deg);
}
.hlp-hairline {
  height: 1px;
  background: var(--hlp-rule);
}
.hlp-hairline-gold {
  height: 1px;
  background: var(--hlp-gold);
}
.hlp-double-rule {
  border-top: 2px solid var(--hlp-navy);
  border-bottom: 0.5px solid var(--hlp-navy);
  height: 5px;
}

/* ——— Cinematic navy surface ——— */
.hlp-navy-surface {
  background: var(--hlp-navy-depth);
  color: var(--hlp-ivory);
  position: relative;
}
.hlp-navy-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(201,169,97,0.08), transparent 60%),
    radial-gradient(800px 400px at 80% 100%, rgba(201,169,97,0.05), transparent 60%);
  pointer-events: none;
}

/* ——— Serif drop-cap ——— */
.hlp-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.2em;
  float: left;
  line-height: 0.85;
  padding: 0.05em 0.12em 0 0;
  color: var(--hlp-gold-deep);
  font-variation-settings: "opsz" 144;
}

/* ——— Frame (portfolio) ——— */
.hlp-frame {
  position: relative;
  padding: var(--sp-6);
}
.hlp-frame::before,
.hlp-frame::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--hlp-gold);
  border-style: solid;
}
.hlp-frame::before {
  top: 0; left: 0;
  border-width: 1px 0 0 1px;
}
.hlp-frame::after {
  bottom: 0; right: 0;
  border-width: 0 1px 1px 0;
}

/* ——— Print helpers ——— */
@media print {
  @page { margin: 0; }
  body { background: white; }
  .no-print { display: none !important; }
}