@charset "UTF-8";
:root { color-scheme: dark; --paper: #eeece5; --accent: #fa532b; --black: #090909; }
* { box-sizing: border-box; }
html { background: var(--black); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--black); color: var(--paper); font-family: Arial, Helvetica, sans-serif; overflow-x: clip; }
body::after { content: ""; position: fixed; inset: 0; z-index: 8; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, #0006 100%); }
::selection { background: var(--accent); color: var(--black); }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
.masthead, .fixed-footer { position: fixed; left: 3.2vw; right: 3.2vw; display: flex; align-items: center; justify-content: space-between; z-index: 20; }
.masthead { top: 29px; justify-content: flex-end; pointer-events: none; }
.monogram { font-size: 29px; font-weight: 900; letter-spacing: -3px; text-decoration: none; color: var(--paper); }
.monogram > span:first-child { color: var(--accent); margin: 0 3px; font-weight: 400; }
.brand-dot { font-size: 10px; letter-spacing: 0; vertical-align: top; margin: 3px 0 0 6px; display: inline-block; }
.edition, .motion-toggle, .fixed-footer, .edge-mark, .frame-label, .eyebrow { font-family: "Courier New", monospace; font-size: 10px; letter-spacing: 1.6px; font-weight: 400; }
.edition { line-height: 1.7; margin: 0 auto 0 34px; }
.edition span { color: #98958e; font-size: 8px; letter-spacing: 1.25px; }
.motion-toggle { background: #090909ad; color: var(--paper); border: 1px solid #ffffff30; padding: 11px 13px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 9px; pointer-events: auto; }
.motion-state { color: var(--accent); }
.motion-toggle i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.motion-toggle[aria-pressed="false"] i { background: #777; }
.collage { position: fixed; inset: 0; overflow: hidden; isolation: isolate; }
.ambient-word { position: absolute; top: 67vh; left: 22vw; color: #131313; font-size: 26vw; font-weight: 900; letter-spacing: -.08em; transform: rotate(-13deg); }
.frame { position: absolute; top: 0; left: 0; margin: 0; will-change: transform; }
.frame-media { width: 100%; height: 100%; overflow: hidden; background: #171613; box-shadow: 0 15px 65px #0008; }
.frame img, .frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame img { filter: brightness(.76) saturate(.77); }
.frame.noir img { filter: brightness(.82) contrast(1.08); }
.frame.detail img { filter: brightness(.65) saturate(.7); }
.frame.video-frame video { filter: brightness(.75) saturate(.72); }
.frame-label { display: flex; justify-content: space-between; padding-top: 9px; color: #aaa49b; font-size: 8px; letter-spacing: 1.2px; }
.frame-label span:first-child { color: var(--accent); }
.frame::before { content: "+"; position: absolute; color: var(--accent); top: -15px; left: -12px; font: 14px monospace; }
.frame.video-frame::after { content: "↕ SCROLL-CONTROLLED"; position: absolute; top: 12px; left: 12px; padding: 6px 8px; background: #090909ba; color: var(--paper); font: 8px "Courier New", monospace; letter-spacing: 1px; }
.title-lockup { position: fixed; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; pointer-events: none; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 17px; font-size: 9px; letter-spacing: 3.3px; margin: 0 0 19px; text-shadow: 0 1px 12px #000; }
.eyebrow span { display: block; width: 24px; height: 1px; background: var(--accent); }
h1 { margin: 0; font-family: Impact, "Arial Black", "Helvetica Neue", sans-serif; font-stretch: condensed; font-size: clamp(68px, 13.9vw, 255px); line-height: .96; letter-spacing: -.015em; word-spacing: .025em; font-weight: 400; white-space: nowrap; text-shadow: 0 3px 38px #0002; }
.coming-soon { display: inline-flex; align-items: center; position: relative; margin: 23px 0 0; color: var(--accent); font-size: clamp(12px, 1.2vw, 20px); font-weight: 700; letter-spacing: .57em; padding-left: .57em; }
.asterisk { position: absolute; left: calc(100% + 15px); font-size: 24px; letter-spacing: 0; font-weight: 400; }
.social-links { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; margin-top: 13px; }
.social-links a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--paper); opacity: .65; pointer-events: auto; transition: opacity 180ms ease; }
.social-links a:hover, .social-links a:focus-visible { opacity: 1; }
.social-links svg { width: 18px; height: 18px; }
.fixed-footer { bottom: 27px; font-size: 9px; align-items: flex-end; }
.fixed-footer p { margin: 0; }
.scroll-cue { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; white-space: nowrap; }
.arrow { color: var(--accent); font: 26px Arial, sans-serif; }
.footer-note { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; line-height: 1.65; color: #a5a29c; font-size: 8px; }
.fixed-footer .coordinates { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.slash { margin: 0 10px; color: var(--accent); }
.edge-mark { position: fixed; top: 50%; z-index: 9; writing-mode: vertical-rl; font-size: 8px; color: #87837d; letter-spacing: 2px; }
.edge-mark-left { left: 23px; transform: translateY(-50%) rotate(180deg); }
.edge-mark-right { right: 23px; transform: translateY(-50%); }
.scroll-space { height: 1000000px; pointer-events: none; }
.no-js { position: fixed; bottom: 100px; width: 100%; text-align: center; }
@media (min-aspect-ratio: 2/1) { h1 { font-size: 12vw; } }
@media (max-width: 650px) {
  .masthead { top: 22px; left: 22px; right: 22px; }
  .monogram { font-size: 26px; }
  .edition { display: none; }
  .motion-toggle { font-size: 8px; padding: 9px 10px; gap: 7px; }
  h1 { font-size: 15.1vw; letter-spacing: -.025em; }
  .eyebrow { font-size: 7px; letter-spacing: 2px; margin-bottom: 17px; gap: 11px; }
  .eyebrow span { width: 13px; }
  .coming-soon { font-size: 10px; letter-spacing: .48em; margin-top: 19px; }
  .asterisk { font-size: 19px; left: calc(100% + 10px); }
  .fixed-footer { left: 22px; right: 22px; bottom: 23px; font-size: 8px; }
  .footer-note, .edge-mark { display: none; }
  .fixed-footer .coordinates { font-size: 9px; }
  .frame-label { font-size: 7px; }
  .ambient-word { top: 73vh; font-size: 40vw; left: 1vw; }
}
@media (prefers-reduced-motion: reduce) { .frame { will-change: auto; } }