/* ATLAS WORLDS — BASE */
/* ============================================================
   ATLAS WORLDS — studio vitrine
   Direction: atlas mythologique / editorial
   Palette: midnight, ivory, brass, royal blue, crimson
   Type: Cinzel (display) · Cormorant Garamond (body serif) · JetBrains Mono
   ============================================================ */

:root {
  /* Core palette */
  --ink:        #e8e3d5;                 /* ivory marble */
  --ink-dim:    #b8b0a0;
  --ink-mute:   #8a8475;
  --ink-faint:  #5a5448;

  --bg:         #0b0e17;                 /* midnight obsidian */
  --bg-deep:    #05070d;
  --bg-panel:   #10131e;
  --bg-rise:    #161a28;

  --brass:      #c9a14a;                 /* gold */
  --brass-hi:   #e8c878;
  --brass-lo:   #8a6a2c;
  --brass-deep: #4a3614;

  --royal:      #2d4fa3;                 /* crystal blue from logo */
  --royal-hi:   #4d72c8;
  --royal-deep: #0e1a3a;

  --crimson:    #a83226;                 /* crest red */
  --crimson-hi: #d14a38;

  /* French tricolor — editorial muted */
  --tri-bleu:   #1e3a6e;
  --tri-blanc:  #ecebe4;
  --tri-rouge:  #a83226;

  --marble:     #ecebe4;
  --rule:       rgba(201, 161, 74, 0.22);
  --rule-s:     rgba(201, 161, 74, 0.45);
  --rule-ivory: rgba(232, 227, 213, 0.12);

  /* Type */
  --serif:      'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --display:    'Cinzel', 'Trajan Pro', serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --page-max:   1380px;
  --gutter:     clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: clip;
  max-width: 100vw;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Parchment / starfield texture overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(45, 79, 163, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 110%, rgba(201, 161, 74, 0.08), transparent 50%),
    radial-gradient(1px 1px at 12% 30%,  rgba(232,227,213,.35), transparent 50%),
    radial-gradient(1px 1px at 80% 20%,  rgba(232,227,213,.22), transparent 50%),
    radial-gradient(1px 1px at 40% 70%,  rgba(232,227,213,.2),  transparent 50%),
    radial-gradient(1px 1px at 65% 85%,  rgba(232,227,213,.3),  transparent 50%),
    radial-gradient(1px 1px at 90% 55%,  rgba(201,161,74,.35),  transparent 50%);
}

/* Grain */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.8'/></svg>");
  mix-blend-mode: overlay;
}

/* Selection */
::selection { background: var(--brass); color: var(--bg-deep); }

/* ===================== UTIL ===================== */

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 10; }

a { color: inherit; text-decoration: none; }

.rule-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 30%, var(--brass) 70%, transparent);
  opacity: 0.45;
}
.rule-gold.thick {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}