:root { --cream: #e8dcc8; --bg: #252b29; --line-y: 52%; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); }
body { color: var(--cream); font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; background: linear-gradient(110deg,#232825 0%,#2e332e 65%,#252b29 100%); }
.visual { position: absolute; inset: 0 0 0 42%; overflow: hidden; z-index: 0; background: #303834; }
.corridor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(26,31,29,.34),rgba(26,31,29,0) 23%); pointer-events: none; }
.grain { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .033; 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='.55'/%3E%3C/svg%3E"); }
.masthead { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: clamp(24px,3.6vw,60px) clamp(25px,5.1vw,92px); }
.brand { font-size: 19px; letter-spacing: .26em; font-weight: 500; }
.header-right { display: flex; align-items: center; gap: 30px; }
.prototype { font-size: 12px; letter-spacing: .22em; opacity: .7; }
.language { border: 1px solid rgba(232,220,200,.5); color: var(--cream); background: transparent; padding: 7px 12px; cursor: pointer; letter-spacing: .16em; }
.language:hover, .language:focus-visible { background: rgba(232,220,200,.15); }
/* This line is positioned from the heading's measured mid-height by script.js. */
.design-rule { position: absolute; top: var(--line-y); left: 0; right: 0; height: 1px; background: rgba(232,220,200,.43); pointer-events: none; z-index: 1; }
.title-block { position: absolute; z-index: 2; left: clamp(25px,8vw,142px); top: 51%; transform: translateY(-48%); max-width: min(88vw,980px); }
.eyebrow { font-size: clamp(13px,1.25vw,18px); letter-spacing: .38em; font-weight: 400; }
.director { font-size: clamp(18px,2.15vw,30px); letter-spacing: .24em; margin: 4px 0 clamp(30px,5vh,66px); font-weight: 400; }
.title-block h1 { display: block; width: max-content; font-size: clamp(83px,12.7vw,240px); font-weight: 400; font-family: "League Gothic", Impact, "Arial Narrow", sans-serif; line-height: .94; letter-spacing: .23em; margin: 0; white-space: nowrap; transform: scaleX(.94); transform-origin: left center; text-shadow: 0 2px 12px rgba(0,0,0,.07); }
.subline { margin-top: clamp(22px,4vw,52px); font-size: clamp(13px,1.1vw,17px); letter-spacing: .29em; }
.footer { position: absolute; z-index: 4; left: clamp(25px,5.1vw,92px); right: clamp(25px,5.1vw,92px); bottom: clamp(22px,3.7vw,54px); display: flex; justify-content: space-between; align-items: end; gap: 20px; font-size: 13px; letter-spacing: .19em; }
.footer p { margin: 0; }
.footer strong { font-weight: 500; margin-left: 8px; }
.footer a { border-bottom: 1px solid rgba(232,220,200,.5); padding-bottom: 5px; }
.footer a:hover { border-bottom-color: var(--cream); }
@media(max-width:850px) {
  .visual { inset: 0; }
  .corridor { object-position: 46% 50%; filter: brightness(.78) saturate(.9); }
  .visual::after { background: linear-gradient(180deg,rgba(12,16,15,.44),rgba(14,17,16,.29) 38%,rgba(14,17,16,.06) 68%,rgba(13,17,16,.52)); }
  .masthead { padding: 27px 25px; }
  .prototype { display: none; }
  .header-right { gap: 0; }
  .title-block { left: 7.5%; right: 5%; top: 35%; transform: translateY(-40%); max-width: none; }
  .eyebrow { font-size: 12px; }
  .director { font-size: 21px; margin: 4px 0 30px; }
  .title-block h1 { font-size: clamp(65px,17.8vw,132px); letter-spacing: .17em; transform: scaleX(.95); }
  .subline { font-size: 13px; margin-top: 26px; }
  .footer { left: 25px; right: 25px; bottom: 24px; font-size: 11px; }
}
@media(max-width:420px) {
  .title-block h1 { font-size: 17.5vw; letter-spacing: .14em; }
  .director { font-size: 19px; }
  .brand { font-size: 16px; }
  .footer strong { display: block; margin: 4px 0 0; }
}
@media(prefers-reduced-motion:no-preference) {
  .title-block { animation: appear .9s ease-out both; }
  @keyframes appear { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
}