/* Self-hosted Latin subsets from Google Fonts; OFL licenses are beside them. */
@font-face { font-family: Anton; src: url("assets/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Orbitron; src: url("assets/Orbitron-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("assets/EBGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --ink: #0e0f0e; --paper: #f3e9d9; --ember: #ed6f22; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ember); outline-offset: 6px; }
/* Fine film grain over the whole page, as in the approved concept. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero { position: relative; isolation: isolate; min-height: max(680px, calc(100svh - 98px)); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* Overlays are editable CSS; the photograph contains no baked-in fade or type. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,12,11,.94) 0%, rgba(11,12,11,.93) 26%, rgba(11,12,11,.6) 35%, rgba(11,12,11,.28) 43%, rgba(11,12,11,.16) 52%, rgba(11,12,11,.14) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(14,15,14,.35) 9%, transparent 22%);
}
.masthead { display: flex; justify-content: space-between; align-items: center; padding: 34px 3.6vw 30px; gap: 20px; }
.wordmark { font: 700 25px/1 Orbitron, "Arial Black", sans-serif; letter-spacing: .36em; text-decoration: none; }
.launch { display: flex; align-items: center; gap: 22px; font: 400 11px/1.4 "Helvetica Neue", Arial, sans-serif; letter-spacing: .48em; text-transform: uppercase; }
.launch span { width: 8px; height: 8px; background: var(--ember); border-radius: 50%; }
.hero-copy { padding: clamp(46px, 5.1vw, 80px) 3.6vw 72px; }
h1 {
  margin: 0; font: 400 clamp(90px, 11.5vw, 190px)/.942 Anton, Impact, sans-serif; letter-spacing: -.035em; margin-left: -.04em;
  transform: scaleY(1.1); transform-origin: 0 0; margin-bottom: .19em;
  /* Ink texture: ivory type printed through the same grain. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .91 0 0 0 0 .85 0 0 0 -1.6 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--paper);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.description { font: 400 clamp(22px, 2.28vw, 36px)/1.2 "EB Garamond", Georgia, serif; letter-spacing: .04em; margin: 40px 0 0; opacity: .92; }
.creed { margin: 140px 0 0; font: 400 11.5px/1.6 "Helvetica Neue", Arial, sans-serif; letter-spacing: .4em; text-transform: uppercase; opacity: .88; }
.creed::before { content: ""; display: block; width: 75px; height: 3px; margin-bottom: 28px; background: var(--ember); }
footer { border-top: 1px solid #ffffff5c; min-height: 98px; padding: 24px 3.6vw; display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 400 19px/1.6 "EB Garamond", Georgia, serif; letter-spacing: .03em; background: var(--ink); }
footer > span { opacity: .9; }
footer a { letter-spacing: 0; text-decoration: none; }
footer .address { text-decoration: underline 1px; text-underline-offset: 4px; }
footer .arrow { color: var(--ember); margin-left: 12px; }
@media (max-width: 700px) {
  .hero { min-height: auto; }
  .masthead { padding: 25px 24px; }
  .wordmark { font-size: 18px; }
  .launch { font-size: 9px; letter-spacing: .2em; gap: 9px; }
  .hero-photo { top: 70px; bottom: auto; height: 390px; }
  .hero-photo img { object-position: 76% 38%; }
  .hero::after { top: 70px; height: 395px; bottom: auto; background: linear-gradient(0deg, var(--ink) 0%, rgba(14,15,14,.75) 13%, transparent 43%, transparent 88%, var(--ink) 100%); }
  .hero-copy { position: relative; padding: 320px 24px 40px; }
  h1 { font-size: clamp(66px, 17vw, 116px); }
  .description { font-size: clamp(20px, 5.2vw, 28px); margin-top: 20px; }
  .creed { margin-top: 38px; font-size: 9px; }
  .creed::before { margin-bottom: 20px; width: 55px; }
  footer { padding: 23px 24px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 16px; }
  footer a { min-height: 44px; display: inline-flex; align-items: center; }
}