/* LU SINS — cinematic poster. Mobile first, no runtime dependencies. */
:root {
  color-scheme: dark;
  --black: #030608;
  --white: #faf7f0;
  --gold: #dfb477;
  --muted: #ded8cc;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--white); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: var(--black); }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: clip; }
.hero-art { position: absolute; inset: 0; z-index: -2; animation: reveal 1.2s ease-out both; }
.hero-art picture { display: block; width: 100%; height: 100%; margin-inline: auto; }
.hero-art img { display: block; width: 100%; height: auto; }
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #03060808 0%, #03060800 35%, #03060815 45%, #03060899 55%, #030608eb 70%, #030608fa 88%, #030608 100%); }
.masthead { position: absolute; top: 0; left: 0; right: 0; padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.monogram { font: bold 29px/1 Georgia, 'Times New Roman', serif; letter-spacing: -2px; text-shadow: 0 2px 12px #000; }
.monogram span { display: inline-block; margin-left: 4px; vertical-align: top; font-size: 15px; color: var(--gold); letter-spacing: 0; }
.hero-content { width: 100%; margin-top: auto; padding: 79vw max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); text-align: center; animation: arrive .9s .1s ease-out both; }
h1 { position: relative; width: max-content; margin: 0 auto; font: bold clamp(62px, 20vw, 110px)/.85 Georgia, 'Times New Roman', serif; letter-spacing: -.065em; text-shadow: 0 3px 30px #0009; }
.title-star { position: absolute; top: -.02em; right: -.62em; color: var(--gold); font: normal .3em/1 Georgia, serif; letter-spacing: 0; }
.tagline { display: grid; gap: 3px; margin: 8px 0 18px; color: var(--gold); font: 13px/1.35 Georgia, 'Times New Roman', serif; letter-spacing: .23em; text-shadow: 0 2px 8px #000; }
.tagline span:last-child { color: var(--gold); }
.socials { display: grid; gap: 10px; width: min(100%, 75vw); margin-inline: auto; text-align: left; }
.social { display: flex; align-items: center; gap: 18px; min-height: 44px; padding: 10px 17px; border: 1px solid #b38c55; border-radius: 7px; background: #03060899; color: var(--white); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.social svg { flex: 0 0 20px; width: 20px; height: 20px; }
.social .arrow { flex-shrink: 0; margin-left: auto; color: var(--gold); font-size: 21px; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.social.primary { border-color: var(--gold); box-shadow: 0 0 18px #dfb4770a; }

.social:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; box-shadow: 0 0 24px #d9bc8133; }
.social:active { transform: translateY(1px); }
.bio { padding: 15px max(24px, env(safe-area-inset-right)) 27px max(24px, env(safe-area-inset-left)); text-align: center; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 75vw; margin: 0 auto 10px; color: var(--gold); font-size: 16px; }
.ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: #8c78514d; }
.ornament::after { transform: rotate(180deg); }
.bio h2 { margin: 0 0 8px; color: var(--gold); font: 11px/1.6 Georgia, 'Times New Roman', serif; letter-spacing: .23em; }
.bio p { max-width: 75vw; margin: 0 auto; color: var(--muted); font: 12px/1.45 Georgia, 'Times New Roman', serif; }
footer { padding: 0 max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); color: #a59e90; text-align: center; font-size: 8px; letter-spacing: .19em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.monogram span, .ornament span { transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .social:hover { transform: translateY(-2px); border-color: var(--gold); background: #191713; box-shadow: 0 5px 25px #d9bc8112; }
  .social.primary:hover { background: #211c14; border-color: #ecd7ad; box-shadow: 0 5px 30px #d9bc811a; }
  .social:hover .arrow { transform: translate(2px, -2px); }
  .monogram:hover span, .bio:hover .ornament span { transform: rotate(12deg); }
}
@media (max-width: 390px) {
  .socials, .ornament, .bio p { width: 100%; max-width: 342px; }
  .social { gap: 12px; padding-inline: 13px; font-size: 9px; letter-spacing: .075em; }
  .tagline { font-size: 11px; }
}
@media (min-width: 700px) {
  .hero { min-height: 900px; }
  .masthead { padding: max(30px, env(safe-area-inset-top)) 42px 0; }
  .monogram { font-size: 34px; }
  .hero-content { padding-top: 750px; padding-bottom: 0; }
  h1 { font-size: clamp(110px, 11vw, 150px); }
  .tagline { margin: 20px 0 28px; font-size: 16px; }
  .socials { width: 420px; }
  .social { min-height: 56px; font-size: 11px; padding-inline: 23px; }
  .hero-art picture { width: min(100%, 1200px); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
  .hero-art img { height: 1100px; object-fit: cover; object-position: center top; }
  .hero-art::after { background: linear-gradient(180deg, #03060808, #03060800 32%, #03060875 57%, #030608ed 85%, #030608); }
  .bio { padding-top: 25px; padding-bottom: 38px; }
  .ornament { max-width: 420px; margin-bottom: 20px; }
  .bio h2 { font-size: 13px; }
  .bio p { max-width: 510px; font-size: 16px; line-height: 1.65; }
  footer { padding-bottom: 32px; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .social:hover, .social:active, .social:hover .arrow, .monogram:hover span, .bio:hover .ornament span { transform: none; }
}

/* Footer-only additions: the approved landing composition is unchanged. */
.legal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 3px; margin: 0 auto 12px; font-size: 11px; letter-spacing: .015em; line-height: 1.4; }
.legal-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 5px; color: #c6a674; text-decoration: none; text-underline-offset: 4px; }
.legal-separator { color: #8c7851; }
.legal-nav a:hover, .legal-nav a[aria-current="page"] { color: var(--white); text-decoration: underline; }
.legal-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }