:root {
  --background: #151817;
  --foreground: #f7f3e9;
  --accent: #ebb940;
  --muted: #c5cac5;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--background); }

body { color: var(--foreground); font-family: Arial, Helvetica, sans-serif; }

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 50%, #202421 0, var(--background) 64%);
}

.grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 11vw 11vw;
}

.sun {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 51%;
  width: min(35vw, 630px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  box-shadow: 0 0 0 18px rgba(235,185,64,.07), 0 30px 80px rgba(0,0,0,.3);
}

.portrait {
  position: absolute;
  z-index: 2;
  inset: 8px 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.portrait img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 92vw;
  object-fit: contain;
  filter: saturate(.9) contrast(1.03) drop-shadow(0 24px 30px rgba(0,0,0,.35));
}

.identity { position: absolute; z-index: 4; }
.identityFirst { left: 4vw; top: 36%; }
.identityLast { right: 4vw; top: 43%; text-align: right; }

.eyebrow {
  margin: 0 0 28px;
  font: 700 clamp(9px, .8vw, 14px)/1.45 "Courier New", monospace;
  letter-spacing: .16em;
}

.identity h1, .identity h2 {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(68px, 8.5vw, 160px);
  font-weight: 650;
  line-height: .78;
  letter-spacing: -.085em;
}

.identity h2 { color: var(--accent); text-shadow: 0 6px 26px rgba(21,24,23,.85); }

.statement {
  position: absolute;
  z-index: 5;
  left: 4vw;
  top: 65%;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  color: var(--muted);
  font-size: clamp(12px, 1.05vw, 20px);
  line-height: 1.8;
}

.statement span { width: 76px; height: 1px; margin-top: 14px; flex: none; background: var(--accent); }

.status {
  position: absolute;
  z-index: 5;
  left: 4vw;
  bottom: 26px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #909791;
  font: 700 8px/1 "Courier New", monospace;
  letter-spacing: .15em;
}

.status span { width: 34px; height: 1px; background: var(--accent); }

@media (max-width: 700px) {
  .hero { min-height: 0; }
  .grid { background-size: 28vw 28vw; }
  .sun { top: 49%; width: 76vw; }
  .portrait { inset: 8px 0 36px; }
  .portrait img { height: 100%; max-width: 94vw; }

  .identity { left: 5vw; right: 5vw; }
  .identityFirst { top: 55%; }
  .identityLast { top: 66%; text-align: right; }
  .eyebrow { margin-bottom: 10px; font-size: 7px; }
  .identityLast .eyebrow { position: absolute; right: 0; bottom: calc(100% + 7px); margin: 0; }
  .identity h1, .identity h2 { font-size: clamp(49px, 15vw, 68px); line-height: .88; }

  .statement {
    left: 6vw;
    top: auto;
    bottom: 8vh;
    gap: 12px;
    font-size: clamp(8px, 2.45vw, 11px);
    line-height: 1.55;
  }
  .statement span { width: 28px; margin-top: 6px; }
  .status { left: 6vw; bottom: 13px; font-size: 6px; gap: 9px; }
  .status span { width: 24px; }
}

@media (max-height: 650px) and (min-width: 701px) {
  .identityFirst { top: 34%; }
  .identityLast { top: 42%; }
  .statement { top: 67%; }
  .identity h1, .identity h2 { font-size: clamp(58px, 7vw, 112px); }
}