/* ====================================================================
   AURIELLE — Tokens
   Eleven-stage temple architecture. Four registers.
   Open wing: EXSILIUM (universal-descent register, sweet → blood).
   ==================================================================== */

/*
 * FONT SUBSTITUTIONS (flag for founder)
 *   Brand spec:   display = Canela (Commercial Type, paid)
 *                 body    = EB Garamond (open source)
 *   Substitute:   display = Italiana (Google Fonts, free)
 *                 body    = EB Garamond (Google Fonts, free)
 *   Italiana is a high-contrast didone-adjacent serif close in spirit to
 *   Canela's display weights; swap the @font-face once the licensed
 *   Canela files are dropped into fonts/.
 */
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

:root {

  /* ============================================================
     UNIVERSAL-DESCENT REGISTER (Exsilium, Fractura, Bivium)
     Two colours only. No gold. No warmth beyond ivory.
     ============================================================ */

  --aurielle-deep-ink:  #0B0E1A;   /* near blue-black — temple ground */
  --aurielle-ivory:     #F4EFE6;   /* warm off-white — temple surface */

  /* ============================================================
     EXSILIUM WING — sweet-to-blood gradient
     The wing's argument: depth does not require dark. The
     descent inside Exsilium is into deeper warmth — pink at
     the threshold, red at the final chamber.
     ============================================================ */

  --exsilium-pink-soft:   #F2D5CC;   /* threshold · La Discesa garment */
  --exsilium-pink:        #E5A9A0;   /* L'Origine · the entering dress */
  --exsilium-pink-bruise: #C97F76;   /* mid-transition */
  --exsilium-red-warm:    #A33A33;   /* Cortile · the new dress, courtyard */
  --exsilium-red-deep:    #7A1F1C;   /* Giardino · night-worn red */
  --exsilium-red-blood:   #5A1212;   /* Acque · shed red, bath water */

  /* ============================================================
     POST-BIFURCATION REGISTERS (sealed at launch; tokens present
     so future wings can opt in without re-architecting)
     ============================================================ */

  /* Shadow path — Negatio · Persona · Extinctio */
  --shadow-ash:    #1A1A1E;
  --shadow-grey:   #4A4A52;
  --shadow-bone:   #8E8B85;

  /* Rebirth path — Oblivio · Abyssus · Speculum · Metamorphosis · Renatus */
  --rebirth-gold:        #C9A453;   /* Renaissance gold */
  --rebirth-gold-deep:   #8E6C1F;   /* gold type on ivory */
  --rebirth-gold-light:  #E2C879;   /* leaf highlight */
  --rebirth-coral:       #D9A48F;
  --rebirth-rose-pearl:  #EAD9D6;
  --rebirth-azure:       #2C4A7B;

  /* ============================================================
     SEMANTIC SURFACES (default to universal-descent register)
     ============================================================ */

  --bg:           var(--aurielle-ivory);
  --bg-deep:      #ECE3D3;
  --bg-temple:    var(--aurielle-deep-ink);   /* threshold / chambers / closing */
  --surface:      #FBF7EF;
  --surface-temple: #11141F;

  /* Semantic foregrounds */
  --fg1:          #1A1B22;   /* primary text on ivory */
  --fg2:          #51525C;   /* secondary */
  --fg3:          #8B8B92;   /* tertiary, captions */
  --fg-on-ink:    #F1ECDF;
  --fg-on-ink-2:  #B5B0A2;

  /* Hairlines — both registers */
  --hairline:     #D9D2C2;
  --hairline-soft:#E8DECF;
  --hairline-ink: #2C2E38;

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */

  --font-display: 'Italiana', 'Canela', 'Cormorant SC', serif;
  --font-serif:   'EB Garamond', 'Garamond', 'Adobe Garamond Pro', Georgia, serif;
  --font-sans:    'Jost', 'Futura', 'Nunito Sans', system-ui, sans-serif;

  /* ============================================================
     TYPE SCALE — editorial. Inscriptions run smaller than UX
     headlines might suggest; the inscription does not shout.
     ============================================================ */

  --t-display:    clamp(56px, 8vw, 112px);
  --t-h1:         clamp(40px, 5.4vw, 72px);
  --t-h2:         clamp(28px, 3.6vw, 48px);
  --t-h3:         22px;
  --t-eyebrow:    11px;
  --t-lead:       21px;
  --t-body:       18px;
  --t-meta:       13px;
  --t-caption:    12px;

  /* Bilingual subtitle ratio — the English never competes */
  --subtitle-scale: 0.70;

  --lh-tight:     1.05;
  --lh-display:   1.12;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  --tracking-display: 0.18em;   /* Italiana / Canela small-caps look */
  --tracking-eyebrow: 0.32em;
  --tracking-button:  0.20em;

  /* ============================================================
     SPACING — generous; the temple is felt as continuous fall
     ============================================================ */

  --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;
  --space-12: 256px;

  /* ============================================================
     RADII — couture prefers crisp edges
     ============================================================ */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — whisper-light. The temple uses almost none.
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(11,14,26,.05);
  --shadow-2: 0 8px 24px -12px rgba(11,14,26,.14), 0 2px 6px -2px rgba(11,14,26,.05);
  --shadow-3: 0 24px 60px -28px rgba(11,14,26,.24), 0 6px 12px -6px rgba(11,14,26,.06);

  /* ============================================================
     MOTION — silk easing. 6fps illustrations breathe.
     ============================================================ */
  --ease-couture: cubic-bezier(.2,.6,.2,1);
  --ease-silk:    cubic-bezier(.4,0,.2,1);
  --t-fast:   180ms;
  --t-base:   320ms;
  --t-slow:   620ms;
  --t-fall:  1800ms;   /* threshold → floor plan crossfade */

  /* ============================================================
     MATERIAL · vellum noise pattern.
     A very fine fractal-noise SVG, encoded inline, painted over
     the ivory grounds at multiply-blend so the surface reads as
     dry pigment on paper rather than flat colour. The colour
     matrix biases toward a warm tan so the noise reinforces the
     ivory cast instead of greying it. Used by wing threshold,
     ivory chamber bodies, and ivory interstices.
     ============================================================ */
  --vellum-noise:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.24 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ====================================================================
   TYPOGRAPHIC PATTERNS
   .a-inscription is the canonical chamber/threshold pattern:
       Italian primary (serif italic, larger)
       English subtitle (italic, 70% size, lighter)
   ==================================================================== */

.a-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
}

.a-h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  color: var(--fg1);
  text-wrap: balance;
}

.a-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg1);
}

.a-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--fg1);
}

.a-eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.a-body, p.a-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  text-wrap: pretty;
}

.a-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  color: var(--fg2);
}

.a-caption {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
}

.a-button-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}

/* ----- THE INSCRIPTION ----------------------------------------------
   The temple's voice. Italian primary, English subtitle.
   Use on thresholds, chamber inscriptions, the closing screen.
   -------------------------------------------------------------------- */

.a-inscription {
  display: grid;
  gap: 14px;
  text-wrap: balance;
}
.a-inscription .it {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.25;
  color: var(--fg1);
  letter-spacing: 0.005em;
}
.a-inscription .en {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(clamp(28px, 3.6vw, 44px) * var(--subtitle-scale));
  line-height: 1.35;
  color: var(--fg2);
  letter-spacing: 0.005em;
}

/* Inverted, for use on the temple's deep-ink ground */
.a-inscription--ink .it { color: var(--fg-on-ink); }
.a-inscription--ink .en { color: var(--fg-on-ink-2); }

/* ----- Hairline rule with optional centre glyph -------------------- */

.a-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg3);
}
.a-rule::before,
.a-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.a-rule .glyph {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.4em;
}
.a-rule--ink::before, .a-rule--ink::after { background: var(--hairline-ink); }
.a-rule--ink { color: var(--fg-on-ink-2); }

/* ----- Asterism · the second ornamental device --------------------
   Three small dots arranged as a downward-pointing triangle. Used
   sparingly as a section closer or page mark, alongside the hairline
   rule, so the temple has a vocabulary of two ornaments rather than
   one repeated tic.
   ----------------------------------------------------------------- */

.a-asterism {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  gap: 5px 12px;
  align-items: center;
  justify-items: center;
  color: var(--fg3);
}
.a-asterism > span {
  width: 3.5px; height: 3.5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.7;
}
.a-asterism > span:nth-child(1) { grid-column: 1; grid-row: 1; }
.a-asterism > span:nth-child(2) { grid-column: 3; grid-row: 1; }
.a-asterism > span:nth-child(3) { grid-column: 2; grid-row: 2; }
.a-asterism--ink { color: var(--fg-on-ink-2); }
.a-asterism--ink > span { opacity: 0.8; }