@font-face { font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./assets/fonts/roboto-latin-variable.woff2') format('woff2'); }
:root { color-scheme: dark; --bg: #101010; --bg-glow: #161210; --orange: #d75f00; font-family: Roboto, Arial, sans-serif; font-synthesis: none; color: #dedede; background: var(--bg); }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 53% 48%, var(--bg-glow), var(--bg) 75%); }
p { margin: 0; }
.page { position: relative; isolation: isolate; height: 100svh; min-height: 360px; padding: 0 5.5%; overflow: hidden; display: flex; flex-direction: column; }
.motion { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 11%; min-height: 70px; border-bottom: 1px solid #252626; }
.brand { color: #fff; }
.brand > span { font-size: clamp(21px, 2vw, 32px); font-weight: 900; letter-spacing: -.015em; }
.status { display: flex; align-items: center; gap: 11px; font-size: 11px; letter-spacing: .2em; font-weight: 700; white-space: nowrap; }
.status > span { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; }
.hero { position: absolute; top: 48%; left: 5.5%; right: 5.5%; transform: translateY(-50%); text-align: center; }
h1 { margin: 0; font: 900 clamp(24px, 6.1vw, 140px)/1 Roboto, Arial, sans-serif; white-space: nowrap; letter-spacing: -.015em; }
.word { display: inline-flex; align-items: baseline; }
.period { display: inline-block; width: .14em; height: .14em; margin-left: .035em; background: currentColor; }
h1 .accent { color: var(--orange); }
.lit { background-color: #dedede; background-clip: text; -webkit-background-clip: text; color: transparent; }
.period.lit { background-clip: border-box; -webkit-background-clip: border-box; }
.footer { margin-top: auto; height: 9.6%; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-top: 1px solid #262626; color: #aaa; }
.contact { padding: 6px 12px; border: 0; background: transparent; color: #f4f4f2; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-decoration: none; text-underline-offset: 4px; cursor: pointer; }
.contact:hover { color: var(--orange); text-decoration: underline; }
.contact:focus-visible { outline: 1px solid var(--orange); outline-offset: 3px; }
.footer small { font-size: 12px; font-weight: 400; letter-spacing: .015em; }
.contact-fallback { font-size: 13px; user-select: all; }
#contact-dialog { width: min(400px, calc(100% - 40px)); max-height: calc(100svh - 32px); padding: 22px 24px 32px; border: 1px solid #2c2c2c; border-radius: 5px; background: #141414; color: #f4f4f4; box-shadow: 0 16px 48px #0005; }
#contact-dialog::backdrop { background: #0009; }
#contact-title { margin: 0 32px 16px 0; font-size: 13px; font-weight: 700; letter-spacing: .025em; }
.contact-row { display: flex; align-items: center; gap: 12px; }
#contact-email { flex: 1; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font: 500 clamp(14px, 3.8vw, 18px)/1.4 Roboto, Arial, sans-serif; }
.copy-email { flex: 0 0 56px; min-height: 32px; padding: 6px; border: 1px solid #363636; border-radius: 4px; background: transparent; color: var(--orange); font: 500 12px Roboto, Arial, sans-serif; cursor: pointer; }
.copy-email:hover { border-color: var(--orange); background: #ffffff05; }
.copy-email:disabled { cursor: wait; opacity: .75; }
.contact-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #999; font: 400 20px Roboto, Arial, sans-serif; cursor: pointer; }
.contact-close:hover { color: #fff; background: #ffffff0a; }
#contact-dialog :focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.copy-status:not(.copy-error) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.copy-error { position: absolute; bottom: 8px; left: 24px; right: 24px; color: #bbb; font-size: 11px; line-height: 1.4; }
@media (max-width: 480px) {
  #contact-dialog { padding: 22px 20px 36px; }
  .contact-row { gap: 10px; }
  .copy-email { flex-basis: 52px; }
  .copy-error { left: 20px; right: 20px; }
}
/* Keep the quiet composition; the first Tab exposes an explicit motion control. */
.motion-toggle { position: fixed; top: 12px; left: 50%; z-index: 20; transform: translate(-50%, -200%); padding: 10px 16px; border: 1px solid var(--orange); background: var(--bg); color: #fff; font: 500 14px Roboto, Arial, sans-serif; cursor: pointer; }
.motion-toggle:focus { transform: translate(-50%, 0); outline: 2px solid #fff; outline-offset: 3px; }
.intro { display: none; position: fixed; inset: 0; z-index: 10; background: #0a0a0a; pointer-events: none; }
html[data-intro="play"] .intro { display: grid; place-items: center; animation: intro-out 1.25s ease forwards; }
.intro-brand { display: flex; flex-direction: column; align-items: center; width: 230px; }
.intro-brand > span { font-size: 21px; letter-spacing: .23em; font-weight: 800; margin: 12px 0 26px; }
.intro-track { width: 100%; height: 2px; background: #282828; overflow: hidden; }
.intro-track i { display: block; width: 100%; height: 100%; background: var(--orange); transform-origin: left; animation: intro-line .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes intro-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-out { 0%, 65% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@media (max-width: 760px) {
  .page { padding: 0 6%; }
  .header { gap: 8px; }
  .brand > span { font-size: 22px; }
  .status { font-size: 9px; letter-spacing: .12em; gap: 6px; }
  .status > span { width: 5px; height: 5px; }
  .hero { left: 6%; right: 6%; }
  h1 { font-size: 8.1vw; }
  .footer small { font-size: 11px; }
}
@media (max-width: 360px) { .brand > span { font-size: 20px; } .status { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { html[data-intro="play"] .intro { display: none; animation: none; } .intro-track i { animation: none; } }
@media (forced-colors: active) { .lit { color: CanvasText; background: none !important; } .period, .period.lit { background: CanvasText !important; } .motion { display: none; } }