/* Base: resets, themed browser surfaces, layout primitives. Section styles live in site.css. */
* { margin: 0; padding: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { color-scheme: light; background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
body {
  background: var(--paper);
  color: var(--text-2);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, svg { display: block; max-width: 100%; }
/* sprite icons take the text colour; stroked icons keep their fill="none" */
svg:not([fill]) { fill: currentColor; }
img { height: auto; object-fit: cover; -webkit-user-drag: none; user-select: none; }
ul, ol { list-style: none; }
/* the hidden attribute always wins, so a held item (a card, a person, a notice) stays out even where a component sets display */
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--text-1); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
p { max-width: var(--measure); text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gold); color: var(--deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }
:focus:not(:focus-visible) { outline: none; }
input, textarea, select, button { font: inherit; color: inherit; letter-spacing: inherit; }
input, textarea, select { caret-color: var(--accent); accent-color: var(--accent); }
/* autofill keeps the field's own fill */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--text-1); caret-color: var(--accent); box-shadow: inset 0 0 0 100px var(--field-bg); }
button { cursor: pointer; background: none; border: 0; }
@supports (scrollbar-color: auto) { html { scrollbar-color: rgb(16 44 76 / 0.28) var(--paper); scrollbar-width: thin; } }

.font-display { font-family: var(--font-display); }
.font-text { font-family: var(--font-text); }

/* layout primitives: one frame, one margin */
.wrap { width: min(100% - 2 * var(--margin), var(--frame)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 300; padding: 12px 16px; background: var(--gold); color: var(--deep); font-size: var(--fs-small); font-weight: 500; transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out); }
.skip-link:focus-visible { transform: none; }
[id] { scroll-margin-top: var(--nav-h); }

/* the one action: widely tracked capitals in an outline, a crest-navy hairline on the page and a gold hairline on navy (Josh, 2026-10-13: "they should still be the outlines"). On hover the
   colour rises from the bottom and the label turns white; on leave it drains out through the top. The right padding gives back the last letter's tracking. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 calc(32px - 0.2em) 0 32px;
  border: 1px solid var(--action-line); border-radius: 0; background-color: transparent; color: var(--action);
  font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--dur-lux) var(--ease-lux), border-color var(--dur-lux) var(--ease-lux);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--action); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--dur-lux) var(--ease-lux); }
.btn--sm { min-height: 44px; padding: 0 calc(22px - 0.2em) 0 22px; }
/* small phones: a long label ("Start a partnership conversation") wraps inside the frame instead of running past it */
@media (max-width: 479px) { .btn { max-width: 100%; padding-block: 0.85rem; line-height: 1.5; white-space: normal; text-align: center; } }
.btn:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--on-action); border-color: var(--action); }
  .btn:hover::before { transform: scaleY(1); transform-origin: 50% 100%; }
}

/* secondary actions: the same tracked capitals in the text colour, with a gold hairline after the label that lengthens on hover */
.action {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-align: left;
  font-family: var(--font-text); font-size: var(--fs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-1);
}
.action::after { content: ""; flex: none; width: 48px; height: 1px; background-color: var(--accent); transform: scaleX(0.5); transform-origin: 0 50%; transition: transform var(--dur-lux) var(--ease-lux); }
@media (hover: hover) and (pointer: fine) { .action:hover::after { transform: scaleX(1); } }

/* secondary links: sentence case, a hairline underline that firms up and drops on hover */
.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-text); font-size: var(--fs-small); font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; color: var(--text-1);
  text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); text-underline-offset: 0.5em;
  transition: text-decoration-color var(--dur-2) var(--ease-out), text-underline-offset var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: var(--text-1); text-underline-offset: 0.7em; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* native scrolling (no smooth-scroll library): the drawer and the dialogs hold the page still; the reserved gutter keeps
   the page from shifting when the scrollbar goes. No rubber-band at the ends, so scrolling up past the hero never shows
   the night behind the film (Josh, 2026-10-09) */
html { scrollbar-gutter: stable; overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
html.menu-open, html.dialog-open { overflow: hidden; }