:root {
  color-scheme: dark;
  --ink: #111416;
  --paper: #f3f0e8;
  --muted: #afb4b4;
  --acid: #d9ff37;
  --line: rgba(243, 240, 232, .18);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--paper); font-family: Arial, Helvetica, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 79% 50%, rgba(52, 69, 71, .25), transparent 42%), repeating-linear-gradient(0deg, transparent 0 54px, rgba(255,255,255,.012) 55px 56px); }
a { color: inherit; }
.page-shell { width: min(100%, 1720px); min-height: 100svh; margin: auto; padding: 0 clamp(24px, 5.3vw, 92px); display: grid; grid-template-rows: auto 1fr auto; }
.site-header, .site-footer { display: flex; justify-content: space-between; align-items: center; }
.site-header { min-height: 104px; border-bottom: 1px solid var(--line); }
.wordmark { color: var(--paper); text-decoration: none; font-size: 28px; line-height: 1; font-weight: 900; letter-spacing: -.13em; }
.wordmark:focus-visible { outline: 2px solid var(--acid); outline-offset: 9px; }
.wordmark-dot { color: var(--acid); }
.header-note, .site-footer, .eyebrow, .coming-soon, figcaption, .vertical-mark { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.header-note { display: flex; gap: 16px; color: var(--muted); }
.header-note span { color: var(--acid); }
.hero { min-height: min(790px, calc(100svh - 172px)); position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr); align-items: center; gap: 5%; padding: 54px 32px 54px 0; }
.hero-copy { position: relative; z-index: 2; margin-top: -12px; }
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--acid); margin-bottom: 36px; }
.status-dot { height: 8px; width: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 7px rgba(217,255,55,.09); animation: pulse 2.8s ease-in-out infinite; }
h1 { margin: 0 0 30px; font-size: clamp(76px, 9.6vw, 170px); font-weight: 900; line-height: .76; letter-spacing: -.105em; }
h1 > span { display: block; }
.outline-word { color: transparent; -webkit-text-stroke: 2px var(--paper); margin-top: 10px; }
.period { color: var(--acid); -webkit-text-stroke: 0; }
.intro { max-width: 470px; margin: 44px 0 49px; color: #c5c9c6; font-size: clamp(17px, 1.65vw, 22px); line-height: 1.5; letter-spacing: -.015em; }
.coming-soon { display: flex; align-items: center; gap: 17px; color: var(--paper); }
.coming-line { display: inline-block; width: 49px; height: 2px; background: var(--acid); transform-origin: left; animation: line-grow 1.2s cubic-bezier(.2,.8,.2,1) both .5s; }
.photo-stage { position: relative; width: min(100%, 470px); justify-self: end; margin: 0; transform: rotate(2.4deg); }
.photo-frame { position: relative; z-index: 1; height: clamp(520px, 75vh, 690px); overflow: hidden; background: #2b3030; box-shadow: 28px 35px 68px rgba(0,0,0,.38); }
.photo-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,15,16,.1) 0%, transparent 52%, rgba(10,15,16,.22) 100%); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.9) contrast(1.05); animation: portrait-drift 13s ease-in-out infinite alternate; }
.photo-sheen { position: absolute; z-index: 2; inset: -30%; pointer-events: none; background: linear-gradient(112deg, transparent 43%, rgba(255,255,255,.19) 50%, transparent 57%); transform: translateX(-140%); animation: sheen 8s ease-in-out infinite 1.5s; mix-blend-mode: screen; }
figcaption { display: flex; justify-content: space-between; padding-top: 20px; color: var(--muted); transform: rotate(-2.4deg); }
figcaption span:first-child { color: var(--acid); }
.orbit { position: absolute; z-index: 0; border: 1px solid rgba(217,255,55,.48); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 174px; height: 174px; top: -53px; right: -53px; animation: orbit-float 7s ease-in-out infinite; }
.orbit-two { width: 47px; height: 47px; bottom: 72px; left: -39px; background: var(--acid); box-shadow: 0 0 55px rgba(217,255,55,.18); animation: orbit-float 5s ease-in-out infinite reverse; }
.vertical-mark { position: absolute; right: 0; top: 50%; color: var(--muted); writing-mode: vertical-rl; transform: translateY(-50%); }
.site-footer { min-height: 68px; border-top: 1px solid var(--line); color: #9fa6a4; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(217,255,55,0); } }
@keyframes line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stage-enter { from { opacity: 0; transform: translateY(35px) rotate(5deg); } to { opacity: 1; transform: translateY(0) rotate(2.4deg); } }
@keyframes portrait-drift { from { transform: scale(1.01) translate3d(-.5%, 0, 0); } to { transform: scale(1.04) translate3d(.5%, 0, 0); } }
@keyframes sheen { 0%, 42%, 100% { transform: translateX(-140%); } 57% { transform: translateX(140%); } }
@keyframes orbit-float { 50% { transform: translateY(18px) rotate(8deg); } }
@media (max-width: 850px) {
  .page-shell { padding: 0 24px; }
  .site-header { min-height: 78px; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding: 62px 0 58px; gap: 47px; }
  .hero-copy { margin: 0; }
  h1 { font-size: clamp(76px, 15vw, 122px); }
  .intro { margin: 33px 0 33px; }
  .photo-stage { width: min(85%, 520px); justify-self: center; }
  .photo-frame { height: min(74vh, 640px); }
  .vertical-mark { display: none; }
}
@media (max-width: 480px) {
  .page-shell { padding: 0 18px; }
  .site-header { min-height: 68px; }
  .wordmark { font-size: 25px; }
  .header-note { font-size: 9px; gap: 8px; letter-spacing: .08em; }
  .hero { padding: 47px 0 55px; gap: 48px; }
  .eyebrow { margin-bottom: 29px; font-size: 10px; }
  h1 { font-size: clamp(68px, 18vw, 90px); margin-bottom: 0; }
  .outline-word { -webkit-text-stroke-width: 1.5px; }
  .intro { font-size: 16px; line-height: 1.55; margin: 33px 0 30px; }
  .photo-stage { width: calc(100% - 23px); margin-right: 12px; }
  .photo-frame { height: clamp(410px, 117vw, 570px); }
  .orbit-one { width: 110px; height: 110px; top: -28px; right: -26px; }
  .orbit-two { width: 28px; height: 28px; bottom: 72px; left: -21px; }
  figcaption { font-size: 8px; gap: 12px; letter-spacing: .11em; }
  .site-footer { font-size: 9px; gap: 14px; letter-spacing: .09em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}