@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  --yellow: #f4c400;
  --yellow-bright: #ffda22;
  --black: #060606;
  --ink: #111111;
  --paper: #f4f1e9;
  --muted: rgba(244, 241, 233, 0.62);
  --hairline: rgba(244, 241, 233, 0.2);
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--mono);
  overflow-x: hidden;
}

.hero {
  isolation: isolate;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--black);
}

.hero__image,
.hero__noise,
.hero__grid { position: absolute; inset: 0; pointer-events: none; }

.hero__image {
  z-index: -4;
  filter: saturate(.88) contrast(1.1);
  transform: scale(1.03);
  animation: drift-pan 16s ease-in-out infinite alternate;
}

.hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,6,6,.98) 0%, rgba(6,6,6,.87) 27%, rgba(6,6,6,.35) 59%, rgba(6,6,6,.72) 100%),
    linear-gradient(0deg, rgba(6,6,6,.92) 0%, rgba(6,6,6,.08) 44%, rgba(6,6,6,.82) 100%);
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__photo--alternate {
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

.hero__image.is-alternate .hero__photo--alternate {
  opacity: 1;
}

.hero__noise {
  z-index: -2;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.hero__grid {
  z-index: -1;
  opacity: .17;
  background-image: linear-gradient(90deg, transparent 49.9%, rgba(244,241,233,.22) 50%, transparent 50.1%), linear-gradient(0deg, transparent 49.9%, rgba(244,241,233,.13) 50%, transparent 50.1%);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 76%);
}

@keyframes drift-pan {
  from { transform: scale(1.03) translate3d(-1.1%, 0, 0); }
  to { transform: scale(1.08) translate3d(1.1%, -1%, 0); }
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(22px, 4.2vw, 58px) clamp(22px, 5.5vw, 92px);
}

.wordmark { display: inline-flex; align-items: center; width: 154px; text-decoration: none; color: var(--paper); }
.brand-logo { display: block; width: 154px; height: 46px; object-fit: contain; object-position: center; }
.wordmark__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 40px;
  color: var(--black);
  background: var(--yellow);
  clip-path: polygon(15% 0,100% 0,85% 100%,0 100%);
  font: 800 25px/1 var(--display);
  font-style: italic;
  letter-spacing: -3px;
  transform: skewX(-10deg);
}
.wordmark__name { font: 800 18px/.72 var(--display); font-style: italic; letter-spacing: .5px; }
.wordmark__name span, .footer-mark span { color: var(--yellow); }
.topbar__status { color: var(--muted); font-size: 9px; letter-spacing: .2em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(244,196,0,.12); animation: blink 1.7s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: .38; } 50% { opacity: 1; } }

.hero__content { position: relative; z-index: 1; width: min(700px, 84vw); margin: clamp(55px, 10vh, 120px) 0 0 clamp(22px, 12vw, 198px); }
.eyebrow { display: flex; align-items: center; gap: 13px; color: var(--yellow); font-size: 10px; letter-spacing: .24em; font-weight: 700; }
.eyebrow__line { width: 44px; height: 2px; background: var(--yellow); }

h1 { position: relative; margin: 22px 0 12px -7px; font: 900 clamp(58px, 10vw, 145px)/.78 var(--display); font-style: italic; letter-spacing: -.08em; text-transform: uppercase; color: var(--paper); border-color: #0b0b09; text-shadow: 8px 12px 0 rgba(0,0,0,.46); }
h1 em { color: var(--yellow); font-style: normal; }
.h1-slash { position: absolute; top: 5%; right: 3%; color: rgba(244,241,233,.16); font: 700 clamp(26px, 4vw, 56px)/1 var(--mono); letter-spacing: -.1em; }
.intro { max-width: 390px; margin: 33px 0 0; padding-left: 5px; border-left: 2px solid var(--yellow); color: var(--muted); font-size: 11px; line-height: 1.9; letter-spacing: .04em; }

.hero__meta { display: flex; align-items: center; gap: 24px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.location { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 430px; }
.location__pin { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; color: var(--black); background: var(--yellow); font: 700 19px/1 Arial, sans-serif; }
.location__details { min-width: 0; }
.location__address { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.7; letter-spacing: .02em; overflow-wrap: anywhere; }
.location small, .location strong { display: block; }
.location small { margin-bottom: 6px; color: var(--muted); font-size: 7px; letter-spacing: .23em; }
.location strong { font-size: 10px; letter-spacing: .1em; }
.meta-rule { flex-shrink: 0; width: 1px; height: 31px; background: var(--hairline); }
.meta-copy { flex-shrink: 0; color: var(--yellow); font-size: 9px; line-height: 1.45; letter-spacing: .18em; }
.meta-copy span { color: var(--muted); }

.hero__side-label { position: absolute; z-index: 2; color: var(--muted); font-size: 8px; line-height: 1.7; letter-spacing: .2em; writing-mode: vertical-rl; }
.hero__side-label--left { left: clamp(10px, 2.4vw, 40px); bottom: 146px; transform: rotate(180deg); }
.hero__side-label--right { right: clamp(10px, 2.4vw, 40px); top: 44%; color: var(--yellow); }
.hero__corner { position: absolute; z-index: 2; width: 34px; height: 34px; border-color: var(--yellow); border-style: solid; opacity: .75; }
.corner--tl { left: clamp(22px, 5.5vw, 92px); top: 23%; border-width: 2px 0 0 2px; }
.corner--br { right: clamp(22px, 5.5vw, 92px); bottom: 18%; border-width: 0 2px 2px 0; }

.hero__footer { position: absolute; z-index: 2; right: clamp(22px, 5.5vw, 92px); bottom: clamp(22px, 4.2vw, 58px); left: clamp(22px, 5.5vw, 92px); display: flex; justify-content: space-between; align-items: end; padding-top: 14px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 8px; letter-spacing: .18em; }
.footer-logo { display: block; width: 120px; height: 30px; object-fit: contain; object-position: center; }
.footer-copy { text-align: center; }
.footer-year { color: var(--yellow); }

@media (max-width: 700px) {
  .hero { min-height: 100svh; }
  .hero__photo { object-position: center; }
  .topbar { padding-top: 24px; }
  .topbar__status { font-size: 7px; letter-spacing: .12em; }
  .wordmark { width: 122px; }
  .brand-logo { width: 122px; height: 36px; }
  .hero__content { margin-top: 24vh; margin-left: 17vw; width: 73vw; }
  .eyebrow { font-size: 8px; letter-spacing: .15em; }
  .eyebrow__line { width: 26px; }
  h1 { margin-top: 19px; font-size: clamp(58px, 15vw, 92px); letter-spacing: -.08em; }
  .h1-slash { right: -1%; top: 0; }
  .intro { margin-top: 27px; font-size: 9px; line-height: 1.75; }
  .hero__meta { display: block; margin-top: 30px; }
  .meta-rule { display: none; }
  .meta-copy { margin-top: 16px; font-size: 8px; }
  .hero__side-label--right { top: 47%; }
  .hero__side-label--left { bottom: 120px; }
  .hero__corner { width: 24px; height: 24px; }
  .hero__footer { font-size: 6px; letter-spacing: .1em; }
  .footer-logo { width: 93px; height: 25px; }
  .footer-copy { display: none; }
}

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