@font-face {
  font-family: Inter;
  src: url('assets/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --carbon: #191919;
  --ink: #1d2933;
  --steel: #526d87;
  --petrol: #244b5a;
  --alloy: #e2ecf0;
  --gutter: clamp(28px, 4.5vw, 88px);
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font: 400 18px/1.5 Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
p, h1 { margin: 0; }
.skip-link {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 700px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
.hero-art,
.hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-art { z-index: -1; }
.hero-art img { max-width: none; object-fit: cover; object-position: center; }
.masthead {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 44px var(--gutter) 0;
}
.brand-lockup { width: 300px; height: auto; flex: none; }
.statement {
  position: absolute;
  top: 32%;
  right: var(--gutter);
  left: var(--gutter);
}
.status {
  color: var(--alloy);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
h1 {
  margin-top: 48px;
  color: var(--white);
  font: 400 clamp(60px, 5.35vw, 80px)/1.06 Optima, Georgia, serif;
  letter-spacing: -.022em;
}
h1 > span { display: block; }
h1 .phrase { white-space: nowrap; }

@media (max-width: 960px) and (orientation: portrait), (max-width: 760px) {
  :root { --gutter: 26px; }
  .hero { min-height: 760px; }
  .masthead { padding-top: 30px; }
  .brand-lockup { width: 210px; }
  .statement { top: 56%; }
  .status { font-size: 12px; }
  h1 {
    margin-top: 37px;
    font-size: clamp(37px, 11vw, 48px);
    line-height: 1.095;
    letter-spacing: -.012em;
  }
  h1 > span { display: inline; }
}

@media (max-width: 380px) {
  :root { --gutter: 20px; }
  .brand-lockup { width: 190px; }
  h1 { font-size: 37px; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-lockup { animation: logo-fade 2s ease-in-out both; }
  @keyframes logo-fade { from { opacity: 0; } to { opacity: 1; } }
  .hero-art img { animation: arrive 1800ms cubic-bezier(.2,.65,.2,1) both; }
  .statement { animation: reveal 1050ms 120ms ease-out both; }
  @keyframes arrive { from { opacity: .7; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
  @keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}