/* Tom Cruise Heidecker — tomcruiseheidecker.com
   Palette and type follow the key art: sunset gold on a dark, warm, dusty
   ground, a condensed display face, and a brush script for the tagline. */

:root {
  --ink:       #0f0b06;
  --ink-2:     #171008;
  --ink-3:     #21170c;
  --cream:     #f3e7d3;
  --cream-dim: #c9b79c;
  --muted:     #97876f;
  --gold:      #d99a3d;
  --gold-lit:  #eab967;
  --rule:      rgba(217, 154, 61, .28);
  --maxw:      1180px;
  --pad:       clamp(1.25rem, 5vw, 3rem);
  --display:   "Bebas Neue", "Oswald", Impact, sans-serif;
  --script:    "Kaushan Script", "Brush Script MT", cursive;
  --body:      "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .25vw, 1.1rem);
  line-height: 1.7;
  overflow-x: hidden;
}

/* height:auto is load-bearing: the HTML carries width/height attributes so the
   browser reserves the right box before the image arrives (no layout shift).
   Without this reset the attribute height survives while CSS shrinks the width,
   and the picture is squeezed horizontally. Rules below that genuinely want a
   fixed height are more specific and still win. */
img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-lit); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { color: var(--cream); }

:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Fine film grain over the whole page, so the flat areas match the photography. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- headings */

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .92; margin: 0; letter-spacing: .012em; }

.eyebrow {
  font-family: var(--body);
  font-size: .75rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1rem;
}

.script { font-family: var(--script); color: var(--gold-lit); font-size: 1.35em; line-height: 1.5; }

/* A hairline with a star, echoing the rules in the key art. */
.starrule {
  display: flex; align-items: center; gap: .9rem;
  color: var(--gold); font-size: .8rem;
}
.starrule::before, .starrule::after { content: ""; height: 1px; background: var(--rule); flex: 1; }
.starrule.left::before { display: none; }

/* ---------------------------------------------------------------- buttons  */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-weight: 700; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.7rem; border: 1px solid var(--gold); border-radius: 2px;
  color: var(--ink); background: var(--gold);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--gold-lit); border-color: var(--gold-lit); color: var(--ink); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--cream); }
.btn.ghost:hover { background: rgba(217,154,61,.14); color: var(--cream); }
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* ---------------------------------------------------------------- nav      */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem var(--pad);
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(15, 11, 6, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}
.nav__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--cream); margin-right: auto; }
.nav__brand img { width: 38px; height: 38px; border-radius: 50%; }
.nav__brand b { font-family: var(--display); font-size: 1.25rem; letter-spacing: .06em; font-weight: 400; }
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a {
  color: var(--cream); text-decoration: none;
  font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.nav__links a:hover { color: var(--gold-lit); }
.nav__cta { padding: .65rem 1.2rem; font-size: .72rem; }

.nav__burger {
  display: none; background: none; border: 0; cursor: pointer; padding: .5rem;
  width: 44px; height: 44px;
}
.nav__burger span { display: block; height: 2px; background: var(--cream); margin: 5px 0; transition: transform .25s, opacity .25s; }
.nav.open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__burger { display: block; }
  .nav { flex-wrap: wrap; }
  .nav__links {
    flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav.open { background: rgba(15,11,6,.97); backdrop-filter: blur(10px); }
  .nav.open .nav__links { max-height: 24rem; padding: .5rem 0 1rem; }
  .nav__links a, .nav__links .btn { width: 100%; padding: .85rem 0; }
  .nav__links .btn { justify-content: flex-start; background: none; border: 0; color: var(--gold-lit); padding-left: 0; }
}

/* ---------------------------------------------------------------- hero     */

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 8rem 0 clamp(3rem, 8vh, 6rem);
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 28%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(15,11,6,.78) 32%, rgba(15,11,6,.25) 62%, rgba(15,11,6,.55) 100%),
    linear-gradient(to right, rgba(15,11,6,.88) 0%, rgba(15,11,6,.4) 45%, transparent 75%);
}
.hero__inner { max-width: 44rem; }
.hero h1 {
  font-size: clamp(3.1rem, 11.5vw, 8.2rem);
  text-transform: uppercase;
  margin: .3rem 0 .1rem;
  text-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.hero h1 span { display: block; }
.hero .script { font-size: clamp(1.5rem, 4.6vw, 2.6rem); margin: .2rem 0 1.6rem; }
.hero__single {
  display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .7rem 1.15rem; margin-bottom: 2rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gold-lit); background: rgba(15,11,6,.5);
}
.hero__single em { font-style: normal; color: var(--cream); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  color: var(--muted); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.hero__scroll::after { content: ""; width: 1px; height: 26px; background: linear-gradient(var(--rule), transparent); animation: drip 2.2s ease-in-out infinite; }
@keyframes drip { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* ---------------------------------------------------------------- sections */

section { position: relative; padding: clamp(4.5rem, 11vh, 8rem) 0; }
.band-2 { background: var(--ink-2); }
.band-3 { background: var(--ink-3); }
.band-2, .band-3 { border-block: 1px solid rgba(217,154,61,.13); }

.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.sec-head h2 { font-size: clamp(2.3rem, 6.4vw, 4.2rem); text-transform: uppercase; }
.sec-head p { color: var(--cream-dim); margin: 1.1rem 0 0; }

/* ---------------------------------------------------------------- single   */

.single { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .single { grid-template-columns: 1fr; } }

.single__art { position: relative; }
.single__art img { width: 100%; border-radius: 3px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.single__art::after {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); border-radius: 3px; pointer-events: none;
}
.single h2 { font-size: clamp(2.4rem, 6.6vw, 4.4rem); text-transform: uppercase; margin-bottom: .4rem; }
.single__meta { color: var(--muted); font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 1.4rem; }
.single__lyric {
  font-family: var(--script); color: var(--gold-lit);
  font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.5;
  border-left: 2px solid var(--rule); padding-left: 1.2rem; margin: 0 0 1.6rem;
}
.streams { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

/* ---------------------------------------------------------------- about    */

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about__fig { order: -1; } }

.about__fig img { width: 100%; border-radius: 3px; filter: saturate(1.05); }
.about__fig figcaption { font-family: var(--script); color: var(--gold); font-size: 1.15rem; margin-top: .9rem; }
.about p { color: var(--cream-dim); }
.about p.lead { color: var(--cream); font-size: 1.15em; }
.about .af { color: var(--cream); }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem; margin-top: 3.5rem; }
.pillar { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.pillar b { display: block; font-family: var(--display); font-size: 1.9rem; color: var(--gold-lit); letter-spacing: .04em; font-weight: 400; }
.pillar span { color: var(--muted); font-size: .95rem; }

/* ---------------------------------------------------------------- clips    */

.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.clip {
  position: relative; margin: 0; overflow: hidden; border-radius: 3px;
  border: 1px solid rgba(217,154,61,.18); background: #000; cursor: pointer;
}
.clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.clip[data-square] video { aspect-ratio: 1 / 1; }
.clip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -60px 60px -40px rgba(15,11,6,.9);
}
.clip__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(15,11,6,.35); transition: opacity .25s ease; z-index: 2;
}
.clip.playing .clip__play { opacity: 0; }
.clip__play span {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(15,11,6,.6);
  display: grid; place-items: center;
}
.clip__play svg { width: 18px; height: 18px; fill: var(--gold-lit); margin-left: 3px; }

/* ---------------------------------------------------------------- video    */

.videoband { margin: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); }

/* A real <button>, so it is keyboard reachable and announced as a control. */
.facade {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; border-block: 1px solid var(--rule); background: #000;
  cursor: pointer; overflow: hidden;
}
.facade img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .6s ease, opacity .4s ease; opacity: .85;
}
.facade:hover img, .facade:focus-visible img { transform: scale(1.03); opacity: 1; }

.facade__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--gold); background: rgba(15, 11, 6, .55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: background .25s ease, transform .25s ease;
}
.facade:hover .facade__play { background: rgba(217, 154, 61, .9); transform: translate(-50%, -50%) scale(1.06); }
.facade__play svg { width: 38%; height: 38%; fill: var(--gold-lit); margin-left: 8%; }
.facade:hover .facade__play svg { fill: var(--ink); }

.facade__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.25rem 1.1rem;
  font-family: var(--body); font-size: .74rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--cream);
  background: linear-gradient(to top, rgba(15, 11, 6, .92), transparent);
}

/* The injected iframe replaces the button and inherits the same box. */
.videoband iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-block: 1px solid var(--rule); }

/* The Short sits below the clips: supporting material, not a second headline. */
.shortblock {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2.5rem, 6vw, 3.5rem); border-top: 1px solid var(--rule);
}
@media (max-width: 700px) { .shortblock { grid-template-columns: 1fr; justify-items: start; } }

.facade--short { max-width: 280px; border: 1px solid var(--rule); border-radius: 3px; }
.facade--short img { aspect-ratio: 9 / 16; }
.facade--short .facade__play { width: clamp(52px, 12vw, 64px); }
.shortblock__vid, .shortblock iframe { max-width: 280px; }
.shortblock iframe { aspect-ratio: 9 / 16; width: 100%; border: 1px solid var(--rule); border-radius: 3px; display: block; }

.shortblock__txt h3 { font-size: clamp(1.7rem, 4.4vw, 2.4rem); text-transform: uppercase; margin-bottom: .7rem; }
.shortblock__txt p { color: var(--cream-dim); margin: 0 0 1.5rem; }

.clips-head { font-size: clamp(1.5rem, 3.6vw, 2.1rem); text-transform: uppercase; color: var(--cream); }
.clips-sub { color: var(--muted); margin: .4rem 0 1.8rem; font-size: .95rem; }

/* ---------------------------------------------------------------- volg     */

.volg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .volg { grid-template-columns: 1fr; } }

.socials { display: flex; flex-direction: column; gap: 0; }
.social {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem .25rem; border-bottom: 1px solid rgba(217,154,61,.16);
  text-decoration: none; color: var(--cream);
  transition: padding-left .2s ease, color .2s ease;
}
.social:first-child { border-top: 1px solid rgba(217,154,61,.16); }
.social:hover { padding-left: 1rem; color: var(--gold-lit); }
.social svg { width: 20px; height: 20px; fill: var(--gold); flex: none; }
.social b { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; }
.social span { color: var(--muted); font-size: .82rem; margin-left: auto; }

.booking { border: 1px solid var(--rule); border-radius: 3px; padding: clamp(1.6rem, 4vw, 2.4rem); background: rgba(15,11,6,.4); }
.booking h3 { font-size: 1.9rem; text-transform: uppercase; margin-bottom: .6rem; }
.booking p { color: var(--cream-dim); margin: 0 0 1.4rem; }
.booking a.mail {
  font-family: var(--display); font-size: clamp(1.25rem, 3.2vw, 1.85rem);
  letter-spacing: .04em; word-break: break-word; text-decoration: none; color: var(--gold-lit);
}
.booking a.mail:hover { color: var(--cream); }

/* ---------------------------------------------------------------- footer   */

footer { padding: 3rem 0 3.5rem; border-top: 1px solid rgba(217,154,61,.16); background: var(--ink); }
.foot { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; }
.foot img { width: 46px; height: 46px; border-radius: 50%; }
.foot p { margin: 0; color: var(--muted); font-size: .82rem; }
.foot .script { font-size: 1.3rem; }

/* ---------------------------------------------------------------- reveal   */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll::after { animation: none; }
}