/* Next Great American Base · shared tokens, base, header, menu and footer. Created 2026-11-10 (PT) · Version 1.
   Loaded first by the site and by the brand guidelines, so both pages stand on one set of tokens (NGAB kit colours:
   the mark's four cool tones, gold only as light and on the one action; Archivo Expanded for names and headings). */
:root {
  --bg: #070a10; --panel: #0b111b; --surface: #0e1b33; --ink: #e3e8ee; --muted: #aebaca; --dim: #7d8da4; --ridge: #52637c;
  --nose: #eef2f6; --accent: #e0ad4c; --hot: #ffd89a; --on-accent: #070a10; --paper: #f4f6f9;
  --m: 24px; --gap: 24px; --col: calc((100vw - 2 * var(--m) - 11 * var(--gap)) / 12); --bar: 72px;
  --t-body: 18px; --t-small: 15px; --t-lead: clamp(20px, 1.6vw, 26px); --t-h3: clamp(26px, 2.5vw, 40px);
  --t-h2: clamp(40px, 4.6vw, 80px); --t-pin: clamp(34px, 3.4vw, 56px);
  --arrive: cubic-bezier(0.16, 1, 0.3, 1);
  /* the cut: a corner taken off at the mark's leading-edge angle (18.4 across for 23.6 down) */
  --cut: 14px; --cuty: 18px;
  color-scheme: dark;
}
@media (max-width: 900px) {
  :root { --m: 16px; --gap: 12px; --bar: 60px; --t-h2: 34px; --t-h3: 24px; --t-pin: 30px; --t-lead: 18px; --t-body: 17px; --cut: 10px; --cuty: 13px; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Archivo', system-ui, sans-serif; font-stretch: 100%; font-weight: 400; font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-stretch: 125%; font-weight: 500; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: .96; letter-spacing: -0.025em; }
h3 { font-size: var(--t-h3); line-height: 1.08; }
/* one display treatment: wide Archivo in sentence case, and under each section title a short line of the core's light
   that draws in as the title arrives */
h2, .lit { position: relative; padding-bottom: .36em; }
h2::after, .lit::after { content: ''; position: absolute; left: 0; bottom: 0; width: clamp(44px, 5.2vw, 88px); height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--arrive) .3s; } /* taste-skill-ignore: the title's light-line, drawn on arrival; not a rule between blocks */
html:not(.js) h2::after, html:not(.js) .lit::after, .in h2::after, h2.in::after, .in .lit::after, .lit.in::after, .on > h2::after, .on > .lit::after, .arrive h2::after, .arrive .lit::after, .cover h2::after, .primary-line h2::after { transform: none; }
.foot-col h2, h2.st { padding-bottom: 0; } .foot-col h2::after, h2.st::after { display: none; }
@media (prefers-reduced-motion: reduce) { h2::after, .lit::after { transition: none; transform: none; } }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* every panel, tile and control on both pages takes the cut on its top-right and bottom-left corners */
.cut, .btn, .foot-top, .menu-foot figure { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }
/* the step line: a hairline that climbs once at the same angle, where one section hands over to the next */
.step { position: relative; }
.step::before { content: ''; position: absolute; left: var(--m); right: var(--m); top: 0; height: 19px; background: var(--ridge); pointer-events: none; clip-path: polygon(0 18px, calc(24% - 14px) 18px, 24% 0, 100% 0, 100% 1px, calc(24% + .6px) 1px, calc(24% - 13.4px) 19px, 0 19px); } /* taste-skill-ignore: section break drawn at the mark's angle */
/* the ridge: the mark's trailing edge, used once where a page comes to rest */
.ridge { display: block; width: 108px; height: 14px; background: var(--ridge); clip-path: polygon(10.1% 0, 89.9% 0, 100% 100%, 78% 50.7%, 67% 77.9%, 50% 15.7%, 33% 77.9%, 22% 50.7%, 0 100%); }
.btn { display: inline-flex; align-items: center; min-height: 48px; font: inherit; font-size: var(--t-small); font-weight: 600; letter-spacing: .01em; text-decoration: none; color: var(--on-accent); background: var(--accent); border: 0; padding: 12px 26px; border-radius: 0; white-space: nowrap; cursor: pointer; --cut: 10px; --cuty: 13px;
  transition: background-color .3s, transform .4s var(--arrive); }
.btn:hover { background: var(--hot); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -6px; }

/* ── the header: the lockup, where you are, the other page, the one action ── */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--bar); display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 40px; padding: 0 var(--m);
  transition: transform .6s var(--arrive), background-color .4s; }
.bar::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity .4s; } /* taste-skill-ignore: reading progress, not a rule */
.bar.solid { background: var(--bg); }
.bar.solid::after { opacity: 1; }
.bar.away { transform: translateY(-101%); }
.bar-home { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nose); font-size: var(--t-small); font-weight: 500; white-space: nowrap; }
/* the header shows just the mark out of the kit's square icon, so it sits on the name's line */
.bar-mark { display: block; width: 42px; height: 27px; overflow: hidden; flex: none; }
.bar-mark img { display: block; width: 62px; height: 62px; max-width: none; margin: -17.6px 0 0 -10px; }
.bar-home > span:last-child { line-height: 1; }
.bar-nav { display: flex; gap: clamp(14px, 2vw, 32px); justify-content: center; min-width: 0; }
.bar-nav a, .bar-alt { font-size: var(--t-small); text-decoration: none; color: var(--muted); white-space: nowrap; padding: 8px 0; transition: color .25s; }
.bar-nav a:hover, .bar-nav a.on, .bar-alt:hover { color: var(--nose); }
.bar-nav a.on { font-weight: 600; }
.bar-side { display: flex; align-items: center; gap: 24px; }
.bar .btn { min-height: 44px; padding: 8px 20px; }
.bar-menu { display: none; font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--nose); background: var(--surface); border: 0; min-height: 44px; padding: 0 18px; cursor: pointer; --cut: 9px; --cuty: 11.5px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); }

.menu { position: fixed; inset: 0; z-index: 39; background: var(--bg); display: flex; flex-direction: column; padding: calc(var(--bar) + 12px) var(--m) 24px; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.menu.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-links { display: grid; }
.menu-links a { font-stretch: 125%; font-weight: 500; letter-spacing: -0.015em; font-size: 28px; line-height: 1.1; padding: 10px 0; text-decoration: none; color: var(--nose); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--arrive), transform .6s var(--arrive); transition-delay: calc(var(--i, 0) * 35ms + 80ms); }
.menu.open .menu-links a { opacity: 1; transform: none; }
.menu-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 14px; }
.menu-foot .btn { text-align: center; }
.menu-foot a:not(.btn) { color: var(--muted); font-size: var(--t-body); text-underline-offset: 4px; }
.menu-foot figure { margin: 0 0 6px; aspect-ratio: 16 / 7; overflow: hidden; }
.menu-foot .btn { justify-content: center; }
.menu-foot figure img { width: 100%; height: 100%; object-fit: cover; }
body.menu-open { overflow: hidden; }

@media (max-width: 1100px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar-nav, .bar-side { display: none; }
  .bar-menu { display: block; }
}
@media (min-width: 1101px) { .menu { display: none; } }

/* ── the footer: the last frame of the film, the ways on, the name ── */
.foot { position: relative; z-index: 1; min-height: 100svh; overflow: hidden; color: var(--nose); display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding: 56px var(--m) 28px; }
.foot-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.foot::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(7, 10, 16, .82) 0%, rgba(7, 10, 16, .25) 46%, rgba(7, 10, 16, .1) 62%, rgba(7, 10, 16, .78) 100%); } /* taste-skill-ignore: scrim under words on a film frame */
.foot > *:not(.foot-still) { position: relative; z-index: 2; }
/* the ways on, in one cut panel on the film; the mark stands at its head */
.foot-top { align-self: flex-end; width: min(100%, calc(8 * var(--col) + 7 * var(--gap))); background: var(--panel); padding: 34px 36px 38px; display: grid; grid-template-columns: 124px repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: start; --cut: 22px; --cuty: 28px; }
.foot-id { display: grid; justify-items: start; }
.foot-id img, .foot-id .dg-foot { width: 92px; height: auto; margin: 0; position: static; }
.foot-id p { font-size: var(--t-lead); line-height: 1.35; max-width: 22ch; }
.foot-col { display: grid; gap: 2px; align-content: start; }
.foot-col h2 { font-size: var(--t-small); font-weight: 600; line-height: 1.6; letter-spacing: .01em; color: var(--nose); margin-bottom: 8px; }
.foot-col a { font-size: var(--t-body); line-height: 1.3; color: var(--ink); text-decoration: none; padding: 5px 0; transition: color .25s; }
.foot-col a:hover { color: var(--hot); }
.foot-low { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.foot-name { margin: 0; font-stretch: 125%; font-weight: 500; text-transform: uppercase; line-height: .86; white-space: nowrap; font-size: 5.9vw; transform-origin: 0 100%; }
.foot-legal { display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; flex-wrap: wrap; font-size: var(--t-small); color: var(--ink); }
.foot-legal p { max-width: 70ch; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--surface); color: var(--nose); font-weight: 600; text-decoration: none; white-space: nowrap; --cut: 9px; --cuty: 11.5px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cuty), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cuty))); transition: background-color .25s, color .25s; }
.foot-legal a:hover { background: var(--accent); color: var(--on-accent); }
@media (max-width: 900px) {
  .foot { padding-top: 40px; gap: 48px; }
  .foot-top { width: 100%; grid-template-columns: 1fr 1fr; padding: 24px 22px 28px; --cut: 14px; --cuty: 18px; }
  .foot-id { grid-column: 1 / -1; } .foot-id img, .foot-id .dg-foot { width: 72px; }
  .foot-col a { padding: 8px 0; }
  .foot-name { white-space: normal; } .foot-name span { display: block; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .bar, .menu, .menu-links a { transition: none; } }