:root {
  color-scheme: dark;
  --ink: #0b0c0d;
  --paper: #f4f0e9;
  --silver: #d7cbbb;
  --scene-x: 0px;
  --scene-y: 0px;
  --logo-x: 0deg;
  --logo-y: 0deg;
  --light-x: 60%;
  --light-y: 40%;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--paper); }
button, a { -webkit-tap-highlight-color: transparent; }
.scene { position: relative; isolation: isolate; min-height: max(600px, 100vh); min-height: max(600px, 100svh); overflow: hidden; }
/* Paint order: photograph / atmospheric light / shade / identity / motion control. */
.landscape, .camera, .photograph, .cloud-pass, .clouds, .atmosphere, .shade { position: absolute; inset: 0; pointer-events: none; }
.landscape { inset: -40px; transform: translate3d(var(--scene-x), var(--scene-y), 0); }
.camera { transform-origin: 82% 48%; }
.photograph { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cloud-pass {
  background: url("assets/capitol-background.png") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 33% 44% at 46% 38%, #000 12%, transparent 85%);
  mask-image: radial-gradient(ellipse 33% 44% at 46% 38%, #000 12%, transparent 85%);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: .19;
  transform: translate3d(-14px, 4px, 0) scale(1.04);
}
.clouds { width: 100%; height: 100%; }
html[data-clouds="ready"] .cloud-pass { visibility: hidden; }
.atmosphere {
  inset: -15%; opacity: .1;
  background: radial-gradient(ellipse 40% 16% at 58% 35%, #ac9a80, transparent 80%), radial-gradient(ellipse 32% 12% at 32% 58%, #8e8b87, transparent 80%);
  mix-blend-mode: screen;
}
.shade { background: linear-gradient(90deg, #080a0b20, transparent 76%), linear-gradient(0deg, #080a0b65, transparent 22%); }
.shade::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 32% 42% at var(--light-x) var(--light-y), #e2e7ec12, transparent 85%); opacity: 0; transition: opacity .6s ease; }
html[data-pointer="active"] .shade::after { opacity: 1; }
.identity {
  position: absolute; left: 37.5%; top: 48%; transform: translate(-50%, -50%);
  width: clamp(270px, 24vw, 410px); text-align: center; mix-blend-mode: screen;
}
.brand { margin: 0; font-size: 1rem; line-height: 1; }
.brand img { display: block; width: 100%; height: auto; opacity: .97; transform: perspective(1000px) rotateX(var(--logo-x)) rotateY(var(--logo-y)); }
.wordmark { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; color: #f4f0e9; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .22em; line-height: 1.3; }
.descriptor { font-size: 9px; letter-spacing: .42em; }
.contact-wrap { margin-top: clamp(34px, 5.8vh, 65px); }
.contact {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 230px; min-height: 76px;
  padding: 14px 10px 6px; color: var(--paper); text-decoration: none;
}
.contact-label { font-size: 13px; font-weight: 400; letter-spacing: .58em; text-indent: .58em; text-transform: uppercase; transition: transform .4s ease; }
.contact:hover .contact-label, .contact:focus-visible .contact-label { transform: translateY(-4px) scale(1.08); }
.contact-rule { width: 48px; height: 1px; background: var(--silver); margin-top: 19px; transform-origin: center; transition: transform .5s ease; }
.email { margin-top: 16px; font-size: 12px; letter-spacing: .055em; color: var(--silver); opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.contact:hover .contact-rule, .contact:focus-visible .contact-rule { transform: scaleX(1.7); }
.contact:hover .email, .contact:focus-visible .email { opacity: 1; transform: none; }
.contact:active { color: #fff; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--silver); outline-offset: 8px; border-radius: 2px; }
.motion-toggle {
  position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 12px 4px; border: 0; background: transparent; color: #bebbb5;
  font: inherit; font-size: 11px; letter-spacing: .04em; cursor: pointer;
}
.motion-toggle:hover { color: var(--paper); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="running"] .camera { animation: camera-drift 22s ease-in-out -5s infinite alternate; }
  html[data-motion="running"] .cloud-pass { animation: cloud-drift 20s linear -5s infinite alternate; }
  html[data-motion="running"] .atmosphere { animation: atmosphere-drift 12s ease-in-out -3s infinite alternate; }
  .brand { animation: arrive 1.8s cubic-bezier(.16, 1, .3, 1) both; }
  .contact-wrap { animation: arrive 1.8s .15s cubic-bezier(.16, 1, .3, 1) both; }
  /* Pausing retains each animation's current frame instead of snapping to the start. */
  html[data-motion="paused"] .camera { animation: camera-drift 22s ease-in-out -5s infinite alternate paused; }
  html[data-motion="paused"] .cloud-pass { animation: cloud-drift 20s linear -5s infinite alternate paused; }
  html[data-motion="paused"] .atmosphere { animation: atmosphere-drift 12s ease-in-out -3s infinite alternate paused; }
}
@keyframes arrive { from { opacity: .25; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes camera-drift { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes cloud-drift { from { transform: translate3d(-55px, 12px, 0) scale(1.08); opacity: .1; } to { transform: translate3d(35px, 0, 0) scale(1.08); opacity: .16; } }
@keyframes atmosphere-drift { from { transform: translate3d(-5%, 0, 0); opacity: .025; } to { transform: translate3d(4%, -1%, 0); opacity: .06; } }
@media (max-width: 700px) {
  /* Keep the identity above the architecture, even with Safari's toolbar open. */
  .scene { min-height: max(560px, 100vh); min-height: max(560px, 100svh); }
  .landscape { inset: 340px -24px -24px; inset: clamp(300px, 44svh, 410px) -24px -24px; transform: none; overflow: hidden; }
  .landscape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0c0d, transparent 28%); }
  .camera { transform-origin: 82% 65%; }
  .photograph { object-position: 100% center; }
  .cloud-pass { background-position: 100% center; opacity: .12; -webkit-mask-image: linear-gradient(#000, transparent 65%); mask-image: linear-gradient(#000, transparent 65%); }
  .shade { background: linear-gradient(180deg, #0b0c0d 0%, #0b0c0d 29%, #0b0c0df5 35%, #0b0c0d80 49%, #0b0c0d08 65%, #080a0b80 100%); }
  .identity { left: 50%; top: max(24px, env(safe-area-inset-top)); width: 260px; max-width: calc(100% - 40px); transform: translateX(-50%); }
  .brand img { width: 180px; width: clamp(148px, 24svh, 204px); margin-inline: auto; transform: none; }
  .wordmark { font-size: 11px; gap: 8px; margin-top: 16px; }
  .contact-wrap { margin-top: 14px; }
  .contact { padding-top: 10px; }
  .contact-rule { margin-top: 13px; }
  .email { margin-top: 12px; color: var(--paper); opacity: 1; transform: none; }
  .motion-toggle { right: max(20px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (hover: none) { .email { opacity: 1; transform: none; } }
@media (min-width: 701px) and (max-height: 650px) {
  .scene { min-height: max(390px, 100vh); min-height: max(390px, 100svh); }
  .identity { top: 48%; width: clamp(210px, 42vh, 290px); }
  .wordmark { margin-top: 10px; font-size: 10px; gap: 6px; }
  .contact-wrap { margin-top: 20px; }
}
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  .scene { min-height: max(340px, 100vh); min-height: max(340px, 100svh); }
  .landscape { inset: -24px -24px -24px 36%; transform: none; }
  .photograph { object-position: 85% center; }
  .cloud-pass { background-position: 85% center; }
  .shade { background: linear-gradient(90deg, #0b0c0d 0%, #0b0c0df5 34%, #0b0c0d80 49%, #080a0b10 74%), linear-gradient(0deg, #080a0b80, transparent 30%); }
  .identity { left: 23%; top: 50%; width: 260px; max-width: 42%; transform: translate(-50%, -50%); }
  .brand img { width: 140px; width: clamp(120px, 37svh, 160px); margin-inline: auto; transform: none; }
  .wordmark { margin-top: 10px; font-size: 10px; gap: 6px; }
  .contact-wrap { margin-top: 10px; }
  .contact { min-width: 0; width: 100%; padding: 10px 0 6px; }
  .contact-label { font-size: 11px; }
  .contact-rule { margin-top: 10px; }
  .email { margin-top: 10px; color: var(--paper); opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .landscape { transform: none; }
  .brand img { transform: none; }
  .shade::after { display: none; }
  .clouds { display: none; }
  .email { transform: none; }
}