:root {
  color-scheme: dark;
  --background: #111111;
  --text: #eeede7;
  --muted: #96968f;
  --line: #34342f;
  --accent: #ff593d;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button[hidden] { display: none; }
::selection { color: var(--background); background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }

.page {
  width: min(100% - 96px, 1440px);
  margin-inline: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 104px;
  border-bottom: 1px solid var(--line);
}

.wordmark { font-size: 28px; font-weight: 800; letter-spacing: -1.5px; }
.wordmark span { color: var(--accent); }
.header-link { font-size: 14px; }
.header-link span { display: inline-block; margin-left: 16px; color: var(--accent); font-size: 22px; }
.header-link:hover { color: var(--accent); }

.hero { padding: 38px 0 43px; }
.hero-caption, .hero-bottom, .section-caption, .footer { display: flex; justify-content: space-between; align-items: center; }
.eyebrow, .section-caption h2 { margin: 0; font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow { color: var(--muted); }
.sound-mark { display: flex; align-items: center; gap: 4px; height: 20px; }
.sound-mark i { width: 3px; height: 6px; background: var(--accent); }
.sound-mark i:nth-child(2), .sound-mark i:nth-child(6) { height: 12px; }
.sound-mark i:nth-child(3), .sound-mark i:nth-child(5) { height: 20px; }
.sound-mark i:nth-child(4) { height: 14px; }

.title-frame { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0 30px; }
h1 {
  margin: 0 0 0 -0.012em;
  font-family: Impact, "Arial Narrow", "Arial Black", sans-serif;
  font-size: clamp(80px, 19.6vw, 300px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
}
.title-asterisk { color: var(--accent); font-family: Arial, sans-serif; font-size: clamp(70px, 11vw, 160px); line-height: 1; margin-top: -8%; }
.hero-bottom p { margin: 0; font-size: 18px; line-height: 1.55; }

.contacts { scroll-margin-top: 24px; }
.section-caption { border-top: 1px solid var(--line); padding: 24px 0; }
.section-caption h2 { color: var(--muted); }
.handle { color: var(--muted); font-size: 13px; }
.socials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.social-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 112px; padding: 22px 28px; transition: background-color .2s, color .2s; }
.social-link:first-child { padding-left: 0; }
.social-link:last-child { padding-right: 0; }
.social-link + .social-link { border-left: 1px solid var(--line); }
.social-name { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.04em; }
.link-arrow { font-size: 30px; color: var(--accent); transition: transform .2s; }
.social-link:hover { color: var(--accent); background: #ffffff03; }
.social-link:hover .link-arrow { transform: translate(3px, -3px); }
.social-link:focus-visible { outline-offset: -4px; }

.email-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: center; padding: 28px 0; }
.email-label { color: var(--muted); font-size: 14px; margin: 0; }
.email-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.email-item a { font-size: 16px; text-underline-offset: 5px; }
.email-item a:hover { color: var(--accent); text-decoration: underline; }
.copy-button { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; transition: color .2s, background .2s; }
.copy-button svg { width: 19px; height: 19px; }
.copy-button:hover, .copy-button.is-copied { background: #ffffff0a; color: var(--accent); }
.footer { padding: 24px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

.toast { position: fixed; z-index: 10; bottom: 24px; left: 50%; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 14px 20px; border: 1px solid var(--line); background: var(--text); color: var(--background); font-size: 14px; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 14px 20px; background: var(--text); color: var(--background); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

@media (min-width: 1600px) {
  .hero { padding-top: 48px; }
  .title-frame { padding-block: 35px; }
}

@media (max-width: 1100px) {
  .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-link:nth-child(odd) { padding-left: 0; border-left: 0; }
  .social-link:nth-child(even) { padding-right: 0; }
  .social-link:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .page { width: calc(100% - 48px); }
  .header { min-height: 88px; }
  .hero { padding-top: 30px; }
  h1 { font-size: 18.667vw; }
  .title-frame { gap: 12px; padding-block: 35px; }
  .social-link { padding: 24px 18px; min-height: 100px; }
  .email-row { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .email-label { grid-column: 1 / -1; margin-bottom: 4px; }
}

@media (max-width: 560px) {
  .page { width: calc(100% - 40px); }
  .header { min-height: 80px; }
  .wordmark { font-size: 26px; }
  .header-link { font-size: 13px; }
  .header-link span { margin-left: 8px; }
  .hero { padding: 28px 0 32px; }
  .eyebrow { font-size: 12px; }
  .title-frame { gap: 8px; padding: 35px 0 28px; }
  h1 { font-size: 18.2vw; }
  .title-asterisk { font-size: 12vw; }
  .hero-bottom p { font-size: 16px; line-height: 1.6; }
  .section-caption { padding-block: 21px; }
  .socials { grid-template-columns: 1fr; }
  .social-link, .social-link:first-child, .social-link:last-child { padding: 20px 0; min-height: 80px; }
  .social-link + .social-link { border-left: 0; border-top: 1px solid var(--line); }
  .social-name { font-size: 26px; }
  .link-arrow { font-size: 28px; }
  .email-row { grid-template-columns: 1fr; padding-block: 24px; gap: 8px; }
  .email-label { margin-bottom: 10px; }
  .email-item { justify-content: space-between; }
  .footer { padding-block: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}