:root {
  --bg: #f2f1f1;
  --text: #111;
  --accent-yellow: #ffb300;
  --accent-yellow-shadow: #f59e00;
  --accent-pink: #ff0077;
  --accent-pink-alt: #ff2e5f;
  /* size variables for quick adjustments */
  --credits-img-width: 200px; /* creditsImageSizeNote: change this to scale the left credits image and its grid column */
  --credits-btn-height: 50px; /* imdbButtonNote: change this to scale the height of the button PNGs */
  --credits-btn-gap: 0.0rem; /* imdbButtonSpacingNote: vertical gap between stacked button images */
  --credits-btn-width: 160px; /* imdbButtonWidthNote: fixed visual width of each button container */
  --footer-lift: 0.6rem; /* footerLiftNote: increase this to raise the footer up toward the content */
  --footer-bottom: 15px; /* footerBottomNote: distance from bottom for fixed footer */
  --footer-space: 60px; /* footerSpaceNote: reserved vertical space so content doesn't underlap the fixed footer */
  --radius: 26px;
  --transition: 160ms cubic-bezier(.33,.7,.3,1);
  /* SECTION: HERO / NAME spacing
     --hero-credits-gap controls vertical space between the hero (name/profile) and the credits/buttons section.
     Change this single value to tighten or widen the gap. Example: 0.5rem (closer) or 2rem (further).
  */
  --hero-credits-gap: 0.5rem; /* change this to close/open gap between the name block and the credits area */
  /* SECTION: HEADER MARGIN ADJUSTMENT
     --header-top-margin controls the top margin of the header/hero section.
     Increase this to push content down and prevent footer from being covered.
  */
  --header-top-margin: 0rem; /* headerMarginNote: adjust this to control header position and overall vertical spacing */
  /* SECTION: SITE TOP OFFSET
     --site-top-offset pushes all content down from the top of the viewport.
     Useful for ensuring nothing is cut off at the top on mobile.
  */
  --site-top-offset: 3rem; /* siteTopOffsetNote: increase to push page content down from top */
  /* SECTION: FOOTER POSITION
     --footer-right-offset controls horizontal position of footer text from the right edge.
     Increase to move text further left, decrease to move closer to right edge.
  */
  --footer-right-offset: 10rem; /* footerRightOffsetNote: adjust horizontal position of footer text from right edge */
  /* SECTION: COPYRIGHT YEAR SPACING
     --copyright-top-spacing controls vertical space above the copyright year text (below Mini Bio).
     Increase to move text lower, decrease to move it higher.
  */
  --copyright-top-spacing: 12.0rem; /* copyrightSpacingNote: adjust vertical position of copyright year below Mini Bio */
}

* { 
  box-sizing: border-box; 
}

/* Prevent scrolling - single page mobile-first layout */
html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #000;
  color: #fff;
  overflow: hidden;
}

/* Button spacing controlled by --credits-btn-gap in the .credits-right rule below */
.skip-link { 
  position: absolute; 
  left: -999px; 
  top: 0; 
  background: #fff; 
  color: #000; 
  padding: .5rem 1rem; 
  z-index: 100; 
}

.skip-link:focus { 
  left: 0; 
}

.site { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  height: 100%; 
  /* Center content vertically on the page */
  justify-content: center;
  padding-top: var(--site-top-offset);
  padding-right: 0.9rem;
  padding-left: 0.9rem;
  padding-bottom: var(--footer-space);
  max-width: 720px; 
  margin: 0 auto;
  overflow: hidden;
}

.hero { 
  text-align: center;
  margin-top: var(--header-top-margin);
}

.profile-img { 
  width: 120px; 
  height: 120px; 
  border-radius: 50%; 
  object-fit: cover; 
  display: block; 
  margin: 0 auto 0.9rem; 
  box-shadow: 0 4px 10px rgba(0,0,0,.12); 
}

.name { 
  font-family: 'Anton', sans-serif; 
  /* compact mobile-first hero size so the whole page can fit on a phone screen */
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  line-height: 1; 
  /* SECTION: NAME
     The vertical gap between the name block and the credits/buttons is centrally
     controlled by --hero-credits-gap. We set the name's bottom margin to zero and
     apply the spacing as margin-top on the .credits block to avoid competing margins
     and make the single variable effective across the layout. */
  margin: 0 0 0;
  letter-spacing: .5px; 
}

/* inline profile image used between the two name words */
.profile-img-inline {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin: 0 .45rem;
}

.section-title { 
  font: 700 0.95rem/1 'Inter', sans-serif; 
  letter-spacing: .08em; 
  text-transform: uppercase; 
  margin: 0 0 1rem; /* tighter for mobile-first */
  text-align: center; 
}

.credits { 
  /* SECTION: CREDITS & BUTTONS
     This block contains the credits image and the stacked button images.
     --hero-credits-gap (defined in :root) now controls the vertical space ABOVE
     the credits area via margin-top. Change that value to tighten/loosen the gap.
  */
  width: 100%; 
  margin-top: var(--hero-credits-gap);
  margin-bottom: 0;
}

/* Credits area uses images: left credits image + right stacked image-buttons (textual credits removed). */
.credits-grid {
  display: grid;
  /* small two-column layout: left image + right stacked buttons but compact */
  grid-template-columns: var(--credits-img-width) 1fr;
  gap: .6rem;
  align-items: start;
  max-width: calc(var(--credits-img-width) + 220px);
  margin: 0 auto;
  padding: 0 0.25rem;
}

.credits-left img, .credits-right img { display: block; max-width:100%; height:auto; }

.credits-left { display:flex; flex-direction:column; gap:.4rem; align-items:center; }

.credits-right { display:flex; flex-direction:column; gap:var(--credits-btn-gap); align-items:center; }

/* Button container: width controlled by --credits-btn-width, height auto-sized to image.
   Button image height controlled by --credits-btn-height. Gap between buttons controlled by --credits-btn-gap. */
.credits-right .btn-img {
  display: block;
  width: var(--credits-btn-width);
  margin: 0 auto;
}
.credits-right .btn-img img {
  display: block;
  width: 100%;
  height: var(--credits-btn-height);
  object-fit: contain;
  border-radius: 12px;
}
.credits-left img { width:var(--credits-img-width); height:auto; display:block; }

/* Using images for credits; textual title/network rules are not used in this design. */
.credit span {
  white-space: normal; /* legacy selector — no textual credits in template */
}

.credit span:first-child {
  /* no-op: textual credits removed — kept selector for compatibility in case text exists */
  display: inline;
}

/* removed small-screen grid override so mobile-first styles below control behaviour */

/* Mobile-first: base styles target phones (stacked credits, centered, no truncation) */
.credits-grid {
  /* keep compact font and spacing on mobile */
  gap: .45rem;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: .4px;
  max-width: calc(var(--credits-img-width) + 220px); /* mobile-friendly width; scales with --credits-img-width */
  margin: 0 auto;
  padding: 0 0.5rem;
}

/* CTA buttons (mobile-first) */
.cta-group {
  /* Mobile-first: fixed bottom action bar like a native app */
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 12px);
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  padding: .65rem 1rem calc(env(safe-area-inset-bottom,12px) + 8px);
  z-index: 60;
  pointer-events: auto;
}

.btn { 
  font: 700 1.05rem/1 'Inter', sans-serif; 
  text-decoration: none; 
  padding: .65rem 2rem; 
  border-radius: 999px; 
  position: relative; 
  transition: var(--transition); 
  display: inline-flex; 
  justify-content: center; 
  min-width: 140px; 
  letter-spacing: .5px; 
  color: #111; 
}

.btn:focus-visible { 
  outline: 3px solid #111; 
  outline-offset: 3px; 
}

.btn.imdb { 
  background: linear-gradient(135deg, var(--accent-yellow) 0%, var(--accent-yellow-shadow) 75%); 
  color: #111; 
  box-shadow: 0 4px 12px rgba(0,0,0,.25); 
}

.btn.instagram { 
  background: linear-gradient(90deg, var(--accent-pink) 0%, var(--accent-pink-alt) 100%); 
  color: #fff; 
  box-shadow: 0 4px 12px rgba(0,0,0,.25); 
}

.btn:hover, 
.btn:focus { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 16px rgba(0,0,0,.32); 
}

.btn:active { 
  transform: translateY(0); 
  box-shadow: 0 3px 8px rgba(0,0,0,.25); 
}

.credit {
  display: flex;
  flex-direction: row; /* title and year on a single line for mobile */
  justify-content: space-between; /* keep title left and year right */
  gap: 1rem;
  text-transform: none; /* keep capitalization natural on mobile */
  padding: .35rem 0;
  align-items: center;
}

.credit span {
  white-space: normal; /* allow wrapping; never truncate */
  word-break: break-word;
  text-align: center;
  line-height: 1.2;
}

/* Mobile-specific credit presentation: Title above year, subtle divider */

.credit span:first-child {
  font-weight: 600;
  text-align: left;
  flex: 1 1 auto;
}

.credit span:nth-child(2) {
  color: var(--text);
  text-align: right;
  flex: 0 0 auto;
  margin-left: 1rem;
}

.credit span:nth-child(3) {
  display: none; /* hide network on small phones to keep layout clean like the screenshot */
}

/* Force representation lines to stack on mobile */
.representation span {
  display: block;
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* outer overlay: soft grey tint */
  background: rgba(128, 128, 128, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
}

.modal-inner {
  /* wrapper — stack header + body vertically; constrain height so it doesn't extend under footer */
  display: flex;
  flex-direction: column;
  max-width: 800px;
  width: calc(100% - 6vw);
  max-height: calc(100vh - calc(var(--footer-bottom) + 48px));
  /* allow the close button to visually overlap the corner by permitting overflow */
  overflow: visible;
  border-radius: 12px;
  background: transparent;
  position: relative;
  z-index: 1;
}

.modal-header {
  /* translucent/blurred backdrop so the title never blends into busy imagery */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.58));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  flex: 0 0 auto;
  color: #fff;
  position: relative;
  z-index: 1001; /* keep header above the scrollable body */
}

.modal-header .section-title {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(1rem, 3.2vw, 1.25rem);
  color: #fff;
  text-shadow: 0 4px 14px rgba(0,0,0,0.65);
  line-height: 1;
}

.modal-body {
  background: #000;
  width: 100%;
  /* body becomes the scrollable area inside the modal */
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  color: #fff;
  padding: 1.25rem;
}

.modal-body iframe { width:100%; height:100%; border:0; display:block; }

.modal-loading { display:block; padding:1.2rem; text-align:center; color:#fff; }

/* mini-bio placed under the last credit button */
.mini-bio-link {
  display: block;
  margin-top: 0.6rem;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}
.mini-bio-link:hover { color: var(--accent-yellow); }

.copyright-year {
  display: block;
  margin-top: var(--copyright-top-spacing);
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: #fff;
}

.modal-fallback { display:inline-block; margin-top:.6rem; padding:.4rem .6rem; background:#111;color:#fff;border-radius:6px; text-decoration:none; }

/* CTA fixed bar visuals */
.cta-group { background: rgba(255,255,255,0.02); backdrop-filter: blur(8px); }

.bio-link-container {
    text-align: center;
    margin-top: 2rem;
}

.bio-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}

.bio-link:hover {
    color: var(--accent-yellow);
}

.modal-close {
  position: absolute;
  /* place the close button overlapping the top-right corner of the modal-inner */
  top: 0px;
  right: 0px;
  z-index: 1002;
  /* make the close button visible and easy to tap on mobile */
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.25) inset;
}

/* Slightly larger touch target on very small screens */
@media (max-width: 420px) {
  .modal-close { width: 56px; height: 56px; top: -20px; right: -20px; }
}
 

@media (max-width: 519px) {
  .modal-close {
    /* slightly larger on small screens for easier tapping */
    top: 0px;
    right: 10px;
    width: 48px;
    height: 48px;
    font-size: 22px;
    background: rgba(255,255,255,0.08);
  }
}

/* prevent content from being hidden under the fixed CTA on small screens */
@media (max-width: 519px) {
  .site {
      padding-bottom: calc(var(--footer-space) + env(safe-area-inset-bottom, 12px));
    }
}

/* Desktop: keep same compact sizing as mobile so everything fits on one screen */
@media (min-width: 520px) {
  /* No size changes - maintain mobile-first compact layout */
}

.footer {
  display: none;
}

.representation { 
  font-style: normal; 
  text-transform: uppercase; 
  margin-bottom: 1.2rem; 
  display: flex; 
  flex-direction: column; 
  gap: .2rem; 
}

.dark-mode { 
  --bg: #121212; 
  --text: #fff; 
  background: var(--bg); 
  color: var(--text); 
}

.dark-mode .btn.imdb { 
  color: #111; 
}

.dark-mode .btn.instagram { 
  color: #fff; 
}

.about-section {
    width: 100%;
    margin-bottom: clamp(2.5rem, 8vh, 6rem);
    padding: 0 1rem;
}

.about-content {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #e0e0e0;
}

.about-content p {
    margin-bottom: 1.2rem;
}