/* Base: reset, the type roles (Plesner's measured scale via tokens.css), links, buttons, forms, entrance states. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: #fff; color: var(--navy); font: 400 var(--fs-body)/var(--lh-body) var(--font); letter-spacing: 0.025em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.menu-open body { overflow: hidden; }
img, picture { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.wrap { width: 100%; padding-inline: var(--gutter); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { display: inline-block; padding: 12px 18px; min-height: 24px; min-width: 24px; }
.skip:not(:focus) { position: absolute; left: 8px; top: -80px; }
.skip:focus { position: fixed; z-index: 100; top: 8px; left: 8px; min-height: 24px; min-width: 24px; padding: 12px 18px; background: #fff; color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.on-navy :focus-visible, .head :focus-visible, .menu :focus-visible, .foot :focus-visible, .hero-text :focus-visible, .contact :focus-visible, .door--navy :focus-visible, .rev--navy :focus-visible { outline-color: var(--gold); }

/* type roles */
.t-h1 { font-weight: 200; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.05em; }
.t-h2 { font-weight: 200; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.025em; }
.t-h3 { font-weight: 200; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 0.011em; }
.t-lead { font-weight: 300; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: 0.0174em; }
.t-body { font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.025em; }
.label { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; letter-spacing: 0.05em; }

/* the small underlined link (13 / 600, underline set 6 px below) */
.link-small { display: inline-block; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; letter-spacing: 0.05em; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.link-small--plain { font-weight: 400; border-bottom-color: transparent; padding-block: 2px; min-height: 24px; }
.link-small:hover, .link-small--plain:hover { border-bottom-color: currentColor; }

/* buttons: no radius, no shadow */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 1px solid currentColor; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; background: transparent; transition: background-color 0.2s, color 0.2s; }
.btn--cta { background: #fff; color: var(--navy); border-color: #fff; }
.btn--cta:hover { background: var(--mist); border-color: var(--mist); }
.btn--ghost { color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* forms (on a dark ground: the contact band) */
.contact-form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; letter-spacing: 0.05em; }
.field input, .field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--hair-light); border-radius: 0; background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 300; font-size: 16px; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: #ffb4a6; }
.field__err { color: #ffb4a6; font-size: var(--fs-small); line-height: var(--lh-small); }
.form-note { padding: 14px 16px; border: 1px solid var(--hair-light); font-size: var(--fs-small); line-height: var(--lh-small); }
.form-noscript { font-size: var(--fs-small); }

/* entrances (assets/js/motion.js). Hidden only when motion is allowed; noscript.css and a 3 s failsafe show everything otherwise. */
@keyframes anim-failsafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  [data-anim] { opacity: 0; transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0); animation: anim-failsafe 0.01s 3s forwards; }
  [data-anim="x"] { --ax: max(-40px, calc(3px - var(--gutter))); }   /* -40 px, but never further left than 3 px inside the screen edge: below about 860 px the gutter is under 43 px, and words set straight on the page (hero A, the title strips) would start the slide off-screen (FX-Z, gate row element-offscreen-closed) */
  [data-anim="y"] { --ay: 40px; }
  [data-anim="y14"] { --ay: 14px; }
  [data-anim="y20"] { --ay: 20px; }
  [data-anim].is-in { opacity: 1; transform: none; animation: none; transition: opacity 0.44s var(--ease-out) var(--delay, 0s), transform 0.44s var(--ease-out) var(--delay, 0s); }
}