/* ============================================================================
   HIGHRAVEN — Colors & Type
   Naturally fermented, locally crafted. Utrecht · Hoograven · est. 2023
   Site identity refresh, 2025. The 2026 pressing is not yet bottled.
   ----------------------------------------------------------------------------
   Mood: dark, mysterious, literary (Edgar Allan Poe), yet professional & crisp.
   The palette is built on deep ravenwing navy, lit by a single sage-green and a
   warm gold. Bone-coloured type. Oxblood reserved for warnings / "sold out".
   ============================================================================ */

:root {
  /* ---- INK · the dark (backgrounds, deepest → panel) -------------------- */
  --ink-900: #0B1118;   /* page floor — almost black, blue-cold              */
  --ink-850: #0E1620;   /* base background                                    */
  --ink-800: #121C28;   /* raised background / sections                       */
  --ink-700: #16222E;   /* panels                                             */
  --ink-600: #1E2D3B;   /* cards · the label navy                             */
  --ink-500: #2A3C4D;   /* hairlines on dark · the raven-illustration tone    */
  --ink-400: #3B4F61;   /* stronger borders / disabled                        */

  /* ---- BONE · the light (type & marks on dark) -------------------------- */
  --bone:     #ECE5D4;  /* primary text on ink                                */
  --bone-2:   #C7C0AF;  /* secondary text                                     */
  --bone-3:   #8B8675;  /* muted · meta · captions                            */
  --bone-4:   #5E5C52;  /* faintest · disabled                                */

  /* ---- BRAND · the bird's two lights ------------------------------------ */
  --green:      #B6D26B;  /* PRIMARY — sage / lime. The living wordmark.      */
  --green-deep: #95B450;  /* pressed / hover-dark                             */
  --green-dim:  #6F8742;  /* on-bone green                                    */

  --gold:       #E3B85C;  /* SECONDARY accent — oak, amber, candlelight       */
  --gold-deep:  #C99A3E;
  --gold-dim:   #9A7626;

  /* ---- SIGNAL ----------------------------------------------------------- */
  --oxblood:    #7C2230;  /* sold out · rare · warning                        */
  --oxblood-lt: #A83C49;

  /* ---- semantic ---------------------------------------------------------- */
  --bg:           var(--ink-850);
  --bg-raised:    var(--ink-800);
  --surface:      var(--ink-700);
  --surface-card: var(--ink-600);
  --border:       rgba(236,229,212,0.10);   /* bone @ 10% — the default rule  */
  --border-strong:rgba(236,229,212,0.18);
  --fg:           var(--bone);
  --fg-muted:     var(--bone-2);
  --fg-faint:     var(--bone-3);
  --accent:       var(--green);
  --accent-2:     var(--gold);

  /* ---- TYPE families ----------------------------------------------------- */
  /* Display & body: an editorial, high-contrast serif world (mystery,
     literature). UI furniture: a precise grotesque (the "professional/strak"
     counterpoint). Wordmark itself is the bespoke calligraphic logo asset.    */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- TYPE scale (fluid, for a 1440 canvas) ----------------------------- */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem); /* @kind spacing */
  --step-0:  clamp(1.02rem, 0.98rem + 0.2vw, 1.16rem); /* @kind spacing */
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* @kind spacing */
  --step-2:  clamp(1.6rem,  1.4rem  + 1vw,   2.25rem); /* @kind spacing */
  --step-3:  clamp(2.2rem,  1.8rem  + 2vw,   3.5rem); /* @kind spacing */
  --step-4:  clamp(3rem,    2.2rem  + 4vw,   5.5rem); /* @kind spacing */
  --step-5:  clamp(3.8rem,  2.4rem  + 7vw,   8.5rem); /* @kind spacing */

  /* micro-label (eyebrows, nav, buttons, meta) */
  --label-size: 0.72rem;            /* @kind spacing */
  --label-track: 0.22em;            /* @kind spacing */

  /* ---- spacing (8-pt rhythm) -------------------------------------------- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;   --sp-7: 6rem;     --sp-8: 9rem;

  /* ---- radii (small — the brand is sharp & sober, not bubbly) ----------- */
  --r-xs: 2px;   --r-sm: 3px;   --r-md: 5px;   --r-lg: 8px;   --r-pill: 999px;

  /* ---- shadow / elevation (dark-room glows, not drop shadows) ----------- */
  --shadow-card: 0 24px 60px -32px rgba(0,0,0,0.85);
  --shadow-pop:  0 30px 80px -28px rgba(0,0,0,0.9);
  --glow-green:  0 0 28px -6px rgba(182,210,107,0.45);
  --glow-gold:   0 0 28px -6px rgba(227,184,92,0.40);

  /* ---- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-1: 0.25s;  /* @kind other */
  --dur-2: 0.45s;  /* @kind other */
  --dur-3: 0.8s;   /* @kind other */
  --measure: 38rem;   /* readable line length  @kind spacing */
}

/* ===========================================================================
   SEMANTIC ELEMENT STYLES  (use these as the canonical look)
   =========================================================================== */

.hr-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green);
}

.hr-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: var(--bone);
}
.hr-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-5);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.hr-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.hr-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--bone);
}
.hr-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--bone-2);
  max-width: var(--measure);
}
.hr-body {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--bone-2);
  max-width: var(--measure);
}
/* the Poe-voice story block — slightly tighter, more literary */
.hr-verse {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--bone);
}
.hr-meta {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bone-3);
}

/* drop cap for story openings */
.hr-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 4.4em;
  line-height: 0.66;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--green);
}