/* ============================================================
   AURELIA AIR × FIDEM — concept microsite
   base: tokens, reset, type, primitives
   Fictional carrier. No real airline is referenced.
   ============================================================ */

:root{
  /* ---- Aurelia Air (the emotional brand) ---- */
  --ng-cream:#F5F4DF;
  --ng-cream-2:#EDEBD4;
  --ng-ink:#0E1620;
  --ng-ink-2:#141E2A;
  --ng-ink-3:#1B2733;
  /* Accent system. Southwest-adjacent by direction, deliberately not Southwest's own
     values and carrying none of its marks. Blue carries the accent, red carries status,
     gold only ever reads as a light source inside photography — never as UI chrome,
     because --fd-ember is the single orange in the system and must stay Fidem's alone. */
  --ng-blue:#2F4BA8;       /* accent on light grounds */
  --ng-blue-lit:#5C7CE0;   /* accent on dark grounds — kickers, the flight-path line */
  --ng-red:#C8262F;        /* live / boarding status, primary CTA */
  --ng-gold:#F2B325;       /* runway lights, sunset glints, path glow. Not chrome. */
  --ng-silver:#C9CCD1;     /* hairlines, secondary chrome */

  /* Deprecated aliases. The palette moved off teal; these keep existing call sites in
     site.css / cards.css / site.js resolving until they are migrated to the names above. */
  --ng-teal:var(--ng-blue);
  --ng-teal-lit:var(--ng-blue-lit);

  --ng-khaki:#ABAB9C;
  --ng-mute:#6B7076;
  --ng-mute-lit:#9AA6AE;

  /* ---- Fidem (the enabling brand; late act only) ---- */
  /* Official Fidem PowerPoint brand guide, 2026-08-21. */
  --fd-navy:#171D21;
  --fd-navy-deep:#171D21;
  --fd-navy-light:#16387C;
  --fd-ember:#E08B3F;
  --fd-ember-soft:#EFDFCC;
  --fd-ink:#484A4F;
  --fd-muted:#8C9199;
  --fd-line:#8C9199;

  --disp:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mont:'Montserrat','Switzer',Helvetica,Arial,sans-serif;

  --gut: clamp(20px, 4.2vw, 72px);
  --maxw: 1560px;
  --rail-h: 54px;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  background:var(--ng-ink);
  color:var(--ng-cream);
  font-family:var(--disp);
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100%}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
svg{display:block}
::selection{background:var(--ng-teal-lit);color:var(--ng-ink)}

/* ---------------- type scale ---------------- */
.d1{font-size:clamp(46px,8.6vw,148px);font-weight:300;letter-spacing:-.042em;line-height:.93}
.d2{font-size:clamp(34px,5.6vw,84px);font-weight:300;letter-spacing:-.026em;line-height:1.07;word-spacing:.01em}
.d3{font-size:clamp(26px,3.5vw,52px);font-weight:300;letter-spacing:-.022em;line-height:1.1}
.d4{font-size:clamp(21px,2.3vw,34px);font-weight:400;letter-spacing:-.02em;line-height:1.16}
.lead{font-size:clamp(16px,1.35vw,21px);font-weight:400;letter-spacing:-.011em;line-height:1.5;max-width:56ch}
.body{font-size:clamp(14.5px,1.05vw,17px);letter-spacing:-.008em;line-height:1.62;max-width:62ch}
.small{font-size:13.5px;letter-spacing:-.004em;line-height:1.55}
.kicker{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ng-teal-lit);display:block;
}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mute{color:var(--ng-mute-lit)}
.on-cream .mute{color:var(--ng-mute)}
.on-cream .kicker{color:var(--ng-teal)}

/* ---------------- layout ---------------- */
.sec{position:relative;padding:clamp(84px,11vh,150px) var(--gut);isolation:isolate}
.sec--flush{padding-left:0;padding-right:0}
.wrap{max-width:var(--maxw);margin:0 auto;width:100%}
.grid{display:grid;gap:clamp(24px,3vw,56px)}
.on-cream{background:var(--ng-cream);color:var(--ng-ink)}
.on-ink{background:var(--ng-ink);color:var(--ng-cream)}

/* full bleed media */
.bleed{position:absolute;inset:0;overflow:hidden;z-index:-2}
.bleed img{width:100%;height:100%;object-fit:cover;will-change:transform}
.scrim{position:absolute;inset:0;z-index:-1}
.scrim--bottom{background:linear-gradient(to top,rgba(14,22,32,.94) 0%,rgba(14,22,32,.55) 34%,rgba(14,22,32,.12) 68%,rgba(14,22,32,.3) 100%)}
.scrim--left{background:linear-gradient(100deg,rgba(14,22,32,.92) 0%,rgba(14,22,32,.62) 40%,rgba(14,22,32,.12) 78%)}
.scrim--soft{background:linear-gradient(180deg,rgba(14,22,32,.5),rgba(14,22,32,.2) 40%,rgba(14,22,32,.8))}

/* ---------------- controls ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid currentColor;border-radius:999px;
  padding:14px 26px;font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--ng-cream);background:transparent;
  transition:background .5s var(--e-out), color .5s var(--e-out), border-color .5s var(--e-out);
  min-height:48px;
}
.btn .dot{width:6px;height:6px;border-radius:50%;background:var(--ng-teal-lit);flex:none}
.btn:active{background:var(--ng-cream);color:var(--ng-ink)}
.on-cream .btn{color:var(--ng-teal)}
.on-cream .btn .dot{background:var(--ng-teal)}
.on-cream .btn:active{background:var(--ng-teal);color:var(--ng-cream)}
.btn--solid{background:var(--ng-cream);color:var(--ng-ink);border-color:var(--ng-cream)}
.btn--solid:active{opacity:.8}

.tag{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(245,244,223,.26);
  border-radius:999px;padding:7px 14px;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.on-cream .tag{border-color:rgba(14,22,32,.2)}

.hair{height:1px;background:rgba(245,244,223,.16);border:0}
.on-cream .hair{background:rgba(14,22,32,.14)}

/* focus visibility for keyboard users */
:focus-visible{outline:2px solid var(--ng-teal-lit);outline-offset:3px;border-radius:4px}

/* ---------------- reveal primitives ---------------- */
.rv{opacity:0;transform:translate3d(0,26px,0)}
.rv.in{opacity:1;transform:none;transition:opacity 1s var(--e-out), transform 1.1s var(--e-out)}
.rv-d1.in{transition-delay:.08s}.rv-d2.in{transition-delay:.16s}
.rv-d3.in{transition-delay:.24s}.rv-d4.in{transition-delay:.32s}
.rv-d5.in{transition-delay:.4s}.rv-d6.in{transition-delay:.48s}

/* line-mask reveal for display type */
.lines .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.lines .ln > span{display:block;transform:translate3d(0,105%,0);transition:transform 1.15s var(--e-out)}
.lines.in .ln > span{transform:none}
.lines.in .ln:nth-child(2) > span{transition-delay:.09s}
.lines.in .ln:nth-child(3) > span{transition-delay:.18s}
.lines.in .ln:nth-child(4) > span{transition-delay:.27s}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none}
  .lines .ln > span{transform:none}
  *{animation-duration:.001s !important;transition-duration:.12s !important}
}