/* =========================================================================
   HOLY GRAIL — Colors & Type
   "an emerging taste infrastructure for the next era of beauty culture."
   ========================================================================= */

/* -- WEBFONTS ---------------------------------------------------------------
   PRIMARY brand faces (mini brand guidelines, p.3):
     · GT Figue Trial — high-contrast literary serif → display, ALWAYS CAPS
     · Helvetica Neue  — secondary grotesque → UI headers, labels, buttons
   Supporting faces:
     · JetBrains Mono — typewriter system labels / data / marginalia
     · EB Garamond    — long-form reference-book body
     · UnifrakturCook — blackletter wordmark stand-in (see README: substitute)
   NOTE: only GT Figue Regular (TRIAL) was supplied. Display type is carried
   by SIZE, not weight, until the full family lands — flag for the team.
   ------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Pirata+One&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Italiana&display=swap");

@font-face {
  font-family: "GT Figue";
  src: url("fonts/GTFFigueTRIAL-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* -- COLORS ------------------------------------------------------------- */

  /* PAPER — the substrate. Crumpled, off-white, slightly warm.
     hg-paper is the canonical background for marketing & editorial surfaces.
     hg-paper-deep is for cards / inset panels on top of paper.
     NOTE: the real brand palette (mini brand guidelines, p.4) is a NEUTRAL
     GREYSCALE — cool, near-achromatic. No warm cream, no chromatic accent.
     Colour enters ONLY through product photography. */
  --hg-paper:          #F4F3F2;   /* off-white, primary bg (crumpled paper)*/
  --hg-paper-warm:     #FAF9F8;   /* lightest highlight                    */
  --hg-paper-deep:     #ECEDED;   /* panel inset / secondary surface       */
  --hg-paper-edge:     #D2D2D2;   /* light-grey divider / deep crease      */

  /* INK — the writing. Neutral charcoal, never warm. */
  --hg-ink:            #363636;   /* primary text + the brand's darkest UI */
  --hg-ink-2:          #535353;   /* secondary text                        */
  --hg-ink-3:          #7E7D7D;   /* tertiary / captions / footnotes       */
  --hg-ink-mute:       #9A9A9A;   /* disabled / placeholder                */

  /* RELIQUARY — the high-contrast inverse field. Charcoal-to-black, used
     for editorial portraits and "VISION" / "MOTION" moments. */
  --hg-reliquary:      #2B2B2B;   /* charcoal bg                           */
  --hg-reliquary-2:    #363636;   /* raised charcoal panel                 */
  --hg-reliquary-fg:   #ECEDED;   /* off-white text on charcoal            */

  /* ACCENT — there isn't one. The brand is MONOCHROME; contrast is the
     system. These legacy tokens are kept ONLY so older files don't break,
     and are mapped to ink. Do NOT introduce colour into UI — if you need a
     pop, it comes from a product photograph, never a fill. */
  --hg-red:            var(--hg-ink);
  --hg-red-deep:       #1F1F1F;
  --hg-red-soft:       rgba(54, 54, 54, 0.10);

  /* RELIC — silver / chrome iconography & ornaments (the lamb symbol). */
  --hg-silver:         #C9C9C9;
  --hg-silver-2:       #9A9A9A;
  --hg-silver-edge:    #5A5A5A;

  /* CRIMSON — legacy alias → charcoal. Photography only; not a UI colour. */
  --hg-crimson:        #363636;
  --hg-crimson-deep:   #1F1F1F;

  /* SEMANTIC — folded from the palette above. */
  --bg:                var(--hg-paper);
  --bg-deep:           var(--hg-paper-deep);
  --bg-inverse:        var(--hg-reliquary);

  --fg:                var(--hg-ink);
  --fg-2:              var(--hg-ink-2);
  --fg-3:              var(--hg-ink-3);
  --fg-mute:           var(--hg-ink-mute);
  --fg-inverse:        var(--hg-reliquary-fg);

  --accent:            var(--hg-ink);
  --accent-soft:       var(--hg-red-soft);
  --rule:              rgba(54, 54, 54, 0.55);
  --rule-soft:         rgba(54, 54, 54, 0.16);


  /* -- TYPE FAMILIES -----------------------------------------------------
     Per the mini brand guidelines (p.3):
       PRIMARY   = GT Figue Trial  — ALWAYS CAPITALISED.
       SECONDARY = Helvetica Neue.
     Supporting faces (from the moodboard's reference-book register) round
     out long-form + technical text. Each family has a job — don't cross them.

     1. EDITORIAL    — GT Figue. Headlines, statements, quotes. ALWAYS CAPS.
     2. IMPACT       — Helvetica Neue. UI headers, eyebrows, labels, buttons.
     3. SYSTEM       — typewriter mono. Data, numbers, captions, marginalia,
                       the "infrastructure / archive" register (see examples).
     4. ENCYCLOPEDIA — reference-book serif for long-form body / footnotes.
     5. BLACKLETTER  — the distressed wordmark only (substitute; see README).
     ---------------------------------------------------------------------- */

  --font-blackletter:  "UnifrakturCook", "Pirata One", "UnifrakturMaguntia", serif;
  --font-editorial:    "GT Figue", "Italiana", "Didot", "Times New Roman", serif;
  --font-impact:       "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-encyclopedia: "EB Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
  --font-system:       "JetBrains Mono", "Courier Prime", ui-monospace, "SF Mono", monospace;


  /* -- TYPE SCALE  --------------------------------------------------------
     Editorial / poster scale. Generous; this is a magazine more than an app. */

  --t-eyebrow:    11px;   /* SYSTEM, tracked, all-caps          */
  --t-caption:    13px;   /* SYSTEM or ENCYCLOPEDIA italic      */
  --t-footnote:   14px;   /* numbered-list / footnotes          */
  --t-body:       17px;   /* ENCYCLOPEDIA running body          */
  --t-lede:       22px;   /* opening / pull text                */
  --t-h3:         28px;
  --t-h2:         44px;
  --t-h1:         72px;
  --t-display:    128px;  /* IMPACT or BLACKLETTER posters      */
  --t-masthead:   200px;  /* cover / section markers            */


  /* -- LAYOUT TOKENS ------------------------------------------------------ */

  --radius-pill:   999px;  /* capsules — labels, scroll-down bars  */
  --radius-soft:   2px;    /* anything else; sharp. NO big radii.   */
  --radius-none:   0;

  --rule-hair:     0.5px;
  --rule-thin:     1px;
  --rule-thick:    2px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  --shadow-relic:  0 1px 0 rgba(255,255,255,0.5) inset,
                   0 -1px 0 rgba(0,0,0,0.08) inset,
                   0 12px 24px -16px rgba(20, 12, 6, 0.45);
  --shadow-paper:  0 1px 2px rgba(30, 22, 10, 0.08),
                   0 18px 40px -28px rgba(30, 22, 10, 0.25);
  --shadow-stamp:  0 0 0 1px var(--hg-ink) inset;  /* dry-stamped border    */
}


/* ===========================================================================
   SEMANTIC RULES — drop-in element styles. Use these directly when possible.
   =========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-encyclopedia);
  font-size: var(--t-body);
  line-height: 1.45;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Headings — H1/H2/H3 are GT Figue (PRIMARY, ALWAYS CAPITALISED); H4 and
   smaller UI headers are Helvetica Neue. Override with .hg-editorial /
   .hg-impact / .hg-blackletter as needed. */
h1, h2, h3 {
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.98;
  color: var(--fg);
  margin: 0;
  text-transform: uppercase;
}
h4 {
  font-family: var(--font-impact);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--fg);
  margin: 0;
  text-transform: uppercase;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.02; }
h4 { font-size: 20px; }

p { margin: 0 0 1em; max-width: 62ch; }
strong { font-weight: 600; }
em     { font-style: italic; }
small  { font-size: var(--t-caption); color: var(--fg-3); }

/* Links — underlined typewriter, no hover hop. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 120ms ease;
}
a:hover { opacity: 0.6; }

hr {
  border: 0;
  border-top: var(--rule-thin) solid var(--fg);
  margin: var(--space-6) 0;
}

/* Buttons — by default, a stamped capsule. Outlined, mono, all-caps.
   No fills. No shadows. The hover state is a 1px ink shift, not a glow. */
button, .hg-btn {
  font-family: var(--font-system);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: transparent;
  color: var(--fg);
  border: var(--rule-thin) solid var(--fg);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
button:hover, .hg-btn:hover {
  background: var(--fg);
  color: var(--hg-paper-warm);
}
button:active, .hg-btn:active { transform: translateY(0.5px); }


/* ===========================================================================
   UTILITY CLASSES — semantic names for the type roles above.
   =========================================================================== */

.hg-blackletter {
  font-family: var(--font-blackletter);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

.hg-editorial {
  font-family: var(--font-editorial);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.0;
  text-transform: uppercase;   /* GT Figue is ALWAYS capitalised */
}

.hg-encyclopedia {
  font-family: var(--font-encyclopedia);
  font-size: var(--t-body);
  line-height: 1.45;
}

.hg-system {
  font-family: var(--font-system);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-2);
}

.hg-impact {
  font-family: var(--font-impact);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.0;
}

/* The "filed-in-an-archive" pill — used for tags, year markers,
   "01"/"02" leaderboard numbers, scroll-down bars, capsule labels. */
.hg-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-system);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  border: var(--rule-thin) solid var(--fg);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg);
  line-height: 1;
}

/* Marginalia — small numbered footnotes set in a tight column.
   The brand's signature "i. ii. iii." product credits live here. */
.hg-footnotes {
  font-family: var(--font-encyclopedia);
  font-size: var(--t-footnote);
  line-height: 1.35;
  font-variant-numeric: oldstyle-nums;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: hgn;
}
.hg-footnotes li {
  display: block;
  padding-left: 1.8em;
  position: relative;
  margin-bottom: 2px;
}
.hg-footnotes li::before {
  content: counter(hgn, lower-roman) ".";
  counter-increment: hgn;
  position: absolute;
  left: 0;
  font-style: italic;
  color: var(--fg-3);
}

/* Red marginalia — used like a wet rubber stamp. Off-axis is OK. */
.hg-stamp {
  display: inline-block;
  font-family: var(--font-system);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--hg-red);
}

/* Paper-textured surface — apply to anything that wants to feel printed. */
.hg-paper {
  background:
    url("assets/textures/paper-cream.png") center / cover no-repeat,
    var(--hg-paper);
}
.hg-paper--inverse {
  background: var(--hg-reliquary);
  color: var(--hg-reliquary-fg);
}

/* Hairline rule — the encyclopedia's defining gesture. */
.hg-rule { border-top: var(--rule-thin) solid var(--fg); }
.hg-rule--hair { border-top: var(--rule-hair) solid var(--fg); }