/* ============================================
   ARCHULETA — BRAND TOKENS · V2
   Palette anchored on the existing peak mark:
   navy + brushed steel + bone. Ember is a rare CTA accent.
   ============================================ */
:root{
  /* Palette */
  --midnight:   #08131F;  /* deeper than the reference, for monolithic depth */
  --navy:       #0E2238;  /* the body navy from the mark photo */
  --navy-soft:  #16314E;  /* one step up — for layered cards */
  --steel-1:    #E8ECEF;  /* highlight steel */
  --steel-2:    #B9C2CC;  /* mid steel */
  --steel-3:    #6B7785;  /* shadow steel */
  --bone:       #F5F3EE;
  --paper:      #FFFFFF;
  --ember:      #C6512E;  /* rare CTA accent only */

  --line:        rgba(232,236,239,.14);
  --line-strong: rgba(232,236,239,.30);
}

/* Box-sizing reset — every panel's height should be inclusive of padding so
   fixed-size artboards (IG 1080×1080, etc.) actually fit their specs. */
*, *::before, *::after { box-sizing: border-box; }

/* Typography */
.t-display       { font-family: "Anton","Oswald","Bebas Neue","Helvetica Neue",sans-serif; font-weight:400; letter-spacing:.005em; }
.t-display-tight { font-family: "Anton",sans-serif; letter-spacing:-.01em; }
.t-body          { font-family: "Inter","Helvetica Neue",system-ui,sans-serif; font-weight:400; }
.t-bold          { font-family: "Inter",system-ui,sans-serif; font-weight:800; letter-spacing:-.01em; }
.t-mono          { font-family: "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace; font-weight:500; }

.uc   { text-transform: uppercase; }
.tnum { font-variant-numeric: tabular-nums; }

/* Surfaces */
.bg-midnight { background: var(--midnight); color: var(--bone); }
.bg-navy     { background: var(--navy);     color: var(--bone); }
.bg-bone     { background: var(--bone);     color: var(--midnight); }
.bg-steel    { background: var(--steel-2);  color: var(--midnight); }

/* Reset — zero out default UA margins on text elements inside designed surfaces
   so panels don't overflow their declared artboard heights. */
.bg-midnight h1, .bg-midnight h2, .bg-midnight h3, .bg-midnight h4, .bg-midnight p,
.bg-navy h1,     .bg-navy h2,     .bg-navy h3,     .bg-navy h4,     .bg-navy p,
.bg-bone h1,     .bg-bone h2,     .bg-bone h3,     .bg-bone h4,     .bg-bone p,
.bg-steel h1,    .bg-steel h2,    .bg-steel h3,    .bg-steel h4,    .bg-steel p,
.atmosphere h1,  .atmosphere h2,  .atmosphere h3,  .atmosphere h4,  .atmosphere p {
  margin: 0;
}
.bg-midnight ul, .bg-navy ul, .bg-bone ul, .bg-steel ul, .atmosphere ul,
.bg-midnight ol, .bg-navy ol, .bg-bone ol, .bg-steel ol, .atmosphere ol {
  margin: 0; padding: 0;
}

/* Atmosphere: deep navy gradient + film grain on dark surfaces */
.atmosphere {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.04) 0%, transparent 55%),
    radial-gradient(60% 50% at 20% 100%, rgba(20,40,70,.55) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--midnight) 100%);
}
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px),
    radial-gradient(rgba(255,255,255,.018) 1px, transparent 1.2px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: screen;
}

/* Topographic contour pattern — used as a watermark on hero panels */
.topo {
  background-image:
    repeating-radial-gradient(circle at 50% 120%, transparent 0 38px, rgba(232,236,239,.05) 38px 39px),
    repeating-radial-gradient(circle at 50% 120%, transparent 0 78px, rgba(232,236,239,.04) 78px 79px),
    repeating-radial-gradient(circle at 50% 120%, transparent 0 128px, rgba(232,236,239,.035) 128px 129px);
}