/* ==========================================================================
   HORIZON STUDIO — globals.css
   Paste into app/globals.css. Token set per BUILD BRIEF Part 2.
   Loaded AFTER the Horizon design-system token files so the brief's
   values win where the names collide (--ink-*, --paper).

   NOTE ON --hz-w: fluid type is sized against --hz-w, which is 100vw — the
   real viewport. Production configuration: the in-design 390 viewport toggle
   has been removed and the mobile art direction is driven by real media
   queries (see the RESPONSIVE section at the foot of this file), so the
   layout adapts to whatever device it is actually being viewed on.
   ========================================================================== */

:root {
  --hz-w: 100vw;

  /* ---- 2.1 Colour ------------------------------------------------ */
  --ink-900: #0B0C0E;   /* deepest — hero vignettes, footer floor      */
  --ink-800: #101216;   /* page background, default                   */
  --ink-700: #16181C;   /* section background, alternate              */
  --ink-600: #1C1F24;   /* elevated surface, cards                    */
  --ink-500: #24282E;   /* raised card, hover state                   */

  --paper:      #F2F2F0;
  --paper-dim:  #B4B8BE;  /* body copy — lifted from #A8ACB2 to clear 4.5:1 on --ink-800 */
  --paper-mute: #7C8288;  /* labels, metadata, disabled                */

  --line-100: rgba(242,242,240,0.08);
  --line-200: rgba(242,242,240,0.16);
  --line-300: rgba(242,242,240,0.28);

  --signal: #C9A227;
  --slate:  #2A3742;

  /* ---- 2.2 Type -------------------------------------------------- */
  --font-display: "Alliance No.2", "Neue Haas Grotesk Display Pro", "Geist Sans", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: var(--font-display);

  --fs-display-xl: clamp(3.5rem, calc(var(--hz-w) * 0.17),  19rem);
  --fs-display-lg: clamp(3rem,   calc(var(--hz-w) * 0.10),   9rem);
  --fs-h1:         clamp(2.5rem, calc(var(--hz-w) * 0.065),  5.5rem);
  --fs-h2:         clamp(1.875rem, calc(var(--hz-w) * 0.042), 3.5rem);
  --fs-h3:         clamp(1.25rem, calc(var(--hz-w) * 0.020), 1.75rem);
  --fs-body-lg:    clamp(1.0625rem, calc(var(--hz-w) * 0.012), 1.3125rem);
  --fs-body:       1rem;
  --fs-body-sm:    0.875rem;
  --fs-label:      0.6875rem;
  --fs-counter:    0.75rem;
  --fs-spec:       0.8125rem;

  /* ---- 2.3 Grid & space ------------------------------------------ */
  --container: 1680px;
  --gutter: 24px;
  --pm: clamp(20px, calc(var(--hz-w) * 0.028), 40px);      /* page margin  */
  --section-y: clamp(88px, calc(var(--hz-w) * 0.11), 200px);
  --break-y: clamp(56px, calc(var(--hz-w) * 0.06), 88px);
  --radius: 2px;

  /* art-direction switches (see the RESPONSIVE section at the foot of the file) */
  --hz-frame: 100%;        /* max width of fixed chrome                  */
  --hz-frame-full: 100%;   /* full frame width — fixed overlays, grain    */
  --hz-bar-h: 64px;        /* 3.1 instrument bar height                  */
  --hz-only-desktop: flex; /* elements that exist only on desktop        */
  --hz-only-mobile: none;  /* elements that exist only on mobile         */
  --hz-cols-2: 1fr 1px 1fr;/* two-up splits collapse to one column       */
  --hz-grid-2: 1fr 1fr;
  --hz-grid-4: repeat(4, 1fr);
  --hz-grid-3: repeat(3, 1fr);
  /* divided cell strips: the divider must follow the column count, so it is a
     token, never hard-coded inline. Row-stacked cells swap to a top hairline. */
  --hz-cell-div: 1px solid var(--line-100);  /* inline divider, desktop      */
  --hz-cell-div-b: 0;                        /* block divider, mobile stack  */
  --hz-cell-pis: 24px;                       /* indent past the divider      */
  --hz-cell-pis-sm: 20px;                    /* tighter spec strips          */
  --hz-cell-pbs: 22px;
  /* divided strips always fully stack — a 2-up wrap would leave row 2 with a
     divider in column 1. Card grids keep --hz-grid-* and may wrap. */
  --hz-strip-4: repeat(4, 1fr);
  --hz-strip-3: repeat(3, 1fr);
  --hz-seats: repeat(4, 1fr);    /* /command roster grid                   */
  --hz-apex: 5fr 7fr;            /* /command apex: portrait + record       */
  --hz-apex-div: 1px solid var(--line-100);  /* gutter rule — only when 2-up */
  --hz-apex-pis: clamp(0px, 3vw, 56px);
  --hz-apex-pbs: 0px;
  --hz-doctrine: 1fr 1px 1fr 1px 1fr;
  --hz-strip-5: repeat(5, 1fr);
  /* gap-as-hairline strips: dividers fall out of the grid at ANY column count,
     so a 2x2 wrap gets its vertical AND horizontal rules for free. The negative
     inline margin pulls the outer cell padding back to the page margin. */
  --hz-cell-gap: 24px;
  --hz-gate-min: 1px;
  --hz-eng: 4fr 8fr;      /* /engines row: portrait image 4 of 12 cols */
  --hz-eng-r: 8fr 4fr;
  --hz-order-a: 0;
  --hz-order-b: 0;
  --hz-hero-88: 88vh;
  --hz-spec-2: 130px 1fr;   /* SVS spec table: label column + value    */
  --hz-split: 8fr 2fr;      /* the 20/80 block, mirroring the content  */
  --hz-cross: 220px 1fr;    /* cross-link card                          */
  --hz-sys: 7fr 5fr;        /* /platform: system image 7 of 12 cols     */
  --hz-sys-r: 5fr 7fr;
  --hz-material: 60vh;
  --hz-pillar: 44px 260px 1fr;   /* Four Pillars row: index · name · body */
  --hz-pillar-body: auto;        /* stacked: body spans the whole row      */
  --hz-contact: 130px 1fr;       /* contact list: label · value            */
  --hz-loc: 5fr 7fr;             /* location page: portrait image + spec   */
  --hz-loc-r: 7fr 5fr;
  --hz-clause: 44px 300px 1fr;   /* privacy clause: index · heading · body  */
  --hz-clause-body: auto;
  --hz-tab-wrap: nowrap;
  --hz-panel: 5fr 7fr;
  --hz-panel-r: 7fr 5fr;
  --hz-flip: row;
  --hz-bleed: 82vh;        /* full-bleed break height                    */

  /* ---- 2.4 Motion ------------------------------------------------ */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --dur-micro: 200ms;
  --dur-short: 420ms;
  --dur-base:  680ms;
  --dur-long:  980ms;
  --dur-hero: 1400ms;

  --stagger-tight: 45ms;
  --stagger-base:  70ms;
  --stagger-loose: 110ms;
}

/* ==========================================================================
   RESPONSIVE
   Driven entirely by the real viewport — no toggle, no stored preference.

   The switch sits at 1023px because that is where the instrument bar runs
   out of room: its contents (logo 52px + brand chip 193px + spacer 66px +
   nav 528px + year block 72px, plus two page margins) need ~1000px of
   intrinsic width. At or below 1023px the bar collapses to the hamburger
   and the page takes the mobile art direction.

   Note what is deliberately NOT here: --hz-frame and --hz-frame-full stay
   at 100%. In the design tool they were pinned to 350px/390px to draw the
   phone frame inside a desktop window. On a real phone the viewport IS the
   frame, so pinning them would strand the header and the menu overlay at
   390px on a 430px handset.
   ========================================================================== */
@media (max-width: 1023px) {
  :root {
    --fs-display-xl: clamp(3.5rem, calc(var(--hz-w) * 0.22), 6rem);
    --section-y: 88px;
    --pm: 20px;
    --hz-bar-h: 56px;
    --hz-only-desktop: none;
    --hz-only-mobile: flex;
    --hz-cols-2: 1fr;
    --hz-grid-2: 1fr;
    --hz-grid-4: repeat(2, 1fr);
    --hz-grid-3: 1fr;
    --hz-cell-div: 0;
    --hz-cell-div-b: 1px solid var(--line-100);
    --hz-cell-pis: 0px;
    --hz-cell-pis-sm: 0px;
    --hz-cell-pbs: 18px;
    --hz-strip-4: 1fr;
    --hz-strip-3: 1fr;
    --hz-apex: 1fr;
    --hz-apex-div: 0;
    --hz-apex-pis: 0px;
    --hz-apex-pbs: 28px;
    --hz-doctrine: 1fr;
    --hz-cell-gap: 16px;
    --hz-gate-min: 238px;
    --hz-eng: 1fr;
    --hz-eng-r: 1fr;
    --hz-order-a: 2;        /* stacked: image always on top */
    --hz-order-b: 1;
    --hz-hero-88: 62vh;
    --hz-spec-2: 1fr;
    --hz-split: 1fr;
    --hz-cross: 1fr;
    --hz-sys: 1fr;
    --hz-sys-r: 1fr;
    --hz-material: 46vh;
    --hz-pillar: 30px 1fr;
    --hz-pillar-body: 1 / -1;
    --hz-contact: 1fr;
    --hz-loc: 1fr;
    --hz-loc-r: 1fr;
    --hz-clause: 30px 1fr;
    --hz-clause-body: 1 / -1;
    --hz-tab-wrap: nowrap;
    --hz-panel: 1fr;
    --hz-panel-r: 1fr;
    --hz-flip: column;
    --hz-bleed: 62vh;
  }
}

/* Card grids step down with the width available to them rather than jumping
   straight to one column, so tablets use their space. Ordered widest to
   narrowest — equal specificity, so the last matching rule wins. */
@media (max-width: 1279px) { :root { --hz-seats: repeat(3, 1fr); } }
@media (max-width: 1023px) { :root { --hz-seats: repeat(2, 1fr); --hz-strip-5: repeat(2, 1fr); } }
@media (max-width: 639px)  { :root { --hz-seats: 1fr; --hz-strip-5: 1fr; } }

/* ---- resets ------------------------------------------------------ */
* { box-sizing: border-box; }
html { background: var(--ink-800); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink-800);
  color: var(--paper-dim);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: var(--paper); text-decoration: none; }
a:hover { color: var(--paper); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--ink-900); }
[data-hz-strip]::-webkit-scrollbar { display: none; }

/* ---- 8. focus --------------------------------------------------- */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---- keyframes --------------------------------------------------- */
@keyframes hz-cue {            /* hero scroll cue segment            */
  0%   { transform: translateY(-100%); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(400%); opacity: 0; }
}
@keyframes hz-pulse-ring {     /* active roadmap node                */
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.18); }
}

/* ---- 18. reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
    transition-property: opacity !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}