:root { color-scheme: dark; --paper: #f2efe6; --muted: #aaa7a2; --accent: #eaae7e; --bg: #141313; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--paper); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
a:hover { color: var(--accent); }
.page { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.portrait { position: absolute; z-index: -2; inset: 0 0 0 24%; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; filter: saturate(.4); }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(20,19,19,.75) 14%, rgba(20,19,19,.05) 55%), linear-gradient(0deg, var(--bg) 0%, rgba(20,19,19,.75) 10%, transparent 46%, rgba(20,19,19,.3) 100%); }
header { display: flex; align-items: center; justify-content: space-between; padding: 32px 4.4vw; gap: 24px; }
.wordmark { font-size: 33px; font-weight: 700; letter-spacing: -3px; }
.wordmark span { display: inline-block; font-size: 10px; letter-spacing: 0; vertical-align: top; padding: 6px 0 0 5px; }
.header-note { font-size: 10px; letter-spacing: .22em; margin-right: auto; margin-left: 30px; color: #c4c1bb; }
.social { font-size: 12px; display: flex; align-items: center; gap: 26px; padding: 10px 0; }
.social span { font-size: 23px; font-weight: 300; }
main { flex: 1; padding: clamp(55px, 8vh, 110px) 4.4vw 58px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 500; letter-spacing: .18em; margin-bottom: 27px; }
.line { width: 27px; height: 1px; background: var(--accent); }
h1 { margin: 0 0 26px -7px; font-size: clamp(88px, 10.4vw, 170px); line-height: .83; letter-spacing: -.075em; font-weight: 500; }
h1 > span { display: block; }
h1 > span + span { margin-top: 8px; }
.period { color: var(--accent); }
.genres { display: flex; gap: 15px; font-size: 12px; letter-spacing: .025em; color: #d3cfc8; }
.genres i { font-style: normal; color: #84766a; }
.coming-soon { margin-top: clamp(45px, 7vh, 90px); }
.status { display: flex; gap: 9px; align-items: center; font-size: 9px; letter-spacing: .17em; color: var(--accent); margin: 0 0 14px; }
.status > span { height: 5px; width: 5px; border-radius: 50%; background: currentColor; }
.message { font-size: 19px; line-height: 1.55; letter-spacing: -.015em; margin: 0 0 23px; }
.message > span { color: var(--muted); }
.contact { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; padding: 15px 20px; min-height: 50px; font-size: 12px; border: 1px solid #6c635a; border-radius: 2px; background: rgba(20,19,19,.3); }
.contact span { font-size: 22px; line-height: 1; }
.contact:hover { background: var(--paper); border-color: var(--paper); color: var(--bg); }
footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 4.4vw; border-top: 1px solid #ffffff25; padding: 24px 0; color: #aaa7a2; font-size: 9px; letter-spacing: .12em; }
footer a { display: flex; align-items: center; gap: 16px; min-height: 24px; }
footer a span { font-size: 17px; }
.footer-end { color: var(--paper); }
@media (min-width: 1600px) { main { padding-top: 12vh; } }
@media (max-width: 760px) {
  header { padding: 24px; }
  .header-note { display: none; }
  .wordmark { font-size: 29px; }
  .social { gap: 16px; }
  .portrait { inset: 75px 0 auto; height: 570px; }
  .portrait img { object-position: 58% 0; }
  .portrait::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(20,19,19,.15) 67%, rgba(20,19,19,.1) 80%, var(--bg) 100%), linear-gradient(90deg, rgba(20,19,19,.35), transparent 65%); }
  main { padding: 270px 24px 42px; }
  .eyebrow { font-size: 8px; letter-spacing: .13em; margin-bottom: 22px; gap: 9px; }
  .line { width: 20px; }
  h1 { font-size: clamp(64px, 15.4vw, 112px); margin-left: -3px; margin-bottom: 24px; }
  .genres { gap: 9px; font-size: 10px; }
  .coming-soon { margin-top: 40px; }
  .message { font-size: 18px; }
  footer { margin: 0 24px; padding: 19px 0; font-size: 8px; gap: 14px; flex-wrap: wrap; }
  footer a { font-size: 7px; letter-spacing: .08em; gap: 6px; }
  .footer-end { display: none; }
}
@media (max-width: 360px) { main { padding-top: 245px; } .genres { font-size: 9px; gap: 7px; } }