:root{
  --max-width:1100px;
  --bg:#0f1720;
  --header-bg: rgba(22,28,34,0.96);
  --muted:#9aa4ad;
  --accent:#c6a76e; /* golden */
  --soft:#eef1f3;
  --glass-bg: rgba(255,255,255,0.035);
  --glass-border: rgba(255,255,255,0.10);
  --container-pad:20px;
  --safe-gutter: calc(var(--container-pad) + env(safe-area-inset-left, 0px));
  --header-height: 72px; /* used to offset hero content from fixed header */
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}

/* Layout container */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-pad);
  box-sizing:border-box;
}

/* Header (fixed) */
.site-header{
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:90;
  height:var(--header-height);
  background:var(--header-bg);
  border-bottom:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0;
  gap:12px;
  box-sizing:border-box;
}

/* Brand - ensure safe padding on phones and small devices */
.brand, .site-title{
  color:var(--soft);
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.6px;
  font-size:17px;
  font-family: "Libre Baskerville", serif;
  display:inline-block;
  padding-left: calc(12px + env(safe-area-inset-left, 0px)); /* extra safe area */
  padding-right: 12px;
}

/* Navigation */
.top-nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav-link{
  color:var(--muted);
  text-decoration:none;
  font-size:15px;
  padding:6px 8px;
  font-family: "Montserrat", sans-serif;
  line-height:1;
}
.nav-link:visited{ color: var(--muted); }
.nav-link:hover,
.nav-link:active{ color: var(--soft); }

/* NAV toggle (mobile) */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:8px;
  margin-left:8px;
  color:var(--soft);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

/* HERO */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding: calc(var(--header-height) + 20px) 0 0 0; /* push content below fixed header */
  margin-top:0;
  box-sizing:border-box;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:url('assets/images/hero.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.06);
  filter:contrast(0.92) saturate(0.92);
  will-change:transform;
  z-index:0;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,10,12,0.20), rgba(6,10,12,0.75));
  z-index:1;
}
.hero-inner{
  position:relative;
  z-index:2;
  padding:48px 0 72px; /* tightened top padding; hero padding-top already set on .hero */
  display:flex;
  flex-direction:column;
  gap:40px;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

/* Big headline / statement — REVERTED to original requested sizing */
.statement,
.hero .headline,
.hero h1 {
  font-family: "Libre Caslon Text", serif;
  font-weight:400;
  letter-spacing:-0.15px;
  line-height:1.08;
  color:var(--soft);
  margin:0;
  padding:0 18px;
  font-size:48px;               
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto; 
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  box-sizing:border-box;
}

/* Tablet / small laptop */
@media (max-width:1100px){
  .statement { font-size:40px; max-width:66ch; }
}

/* Tablet / mobile */
@media (max-width:900px){
  /* match the same selector used elsewhere so it overrides */
  .hero .statement,
  .hero .headline,
  .hero h1,
  .statement {
    font-size: 32px; /* scales but never too large */
    line-height: 1.12;
    max-width: 32ch;
    padding: 0 14px;
  }

  .hero-inner{ padding:28px 0; gap:28px; }
  .hero{ padding-top: calc(var(--header-height) + 12px); min-height: 70svh; }
}

/* Tiny phones */
@media (max-width:420px){
  body{ font-size:15px; }
  .statement{ font-size:20px; padding:0 12px; max-width:34ch; }
  .brand { font-size:16px; padding-left: calc(8px + env(safe-area-inset-left, 0px)); }
}

/* Statement animation (unchanged) */
.statement{
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 1.0s ease-out forwards 0.18s;
}
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* CTAs */
.hero-ctas{ display:flex; gap:22px; margin-top:28px; flex-wrap:wrap; justify-content:center; }
.cta-simple{
  font-family:"Montserrat", sans-serif;
  font-size:16px;
  font-weight:400;
  letter-spacing:0.3px;
  padding:12px 22px;
  text-decoration:none;
  color:var(--soft);
  border:1px solid rgba(255,255,255,0.25);
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  box-sizing:border-box;
}
.cta-simple:hover{ border-color: rgba(255,255,255,0.45) }

/* ABOUT section */
.about-section {
  position: relative;
  min-height: 90vh;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 100px 0;
  overflow: hidden;
  box-sizing:border-box;
}
.about-bg{ position:absolute; inset:0; background-image: url('assets/images/about-bg.jpg'); background-size:cover; background-position:center; z-index:0; transform: scale(1.05); filter: contrast(0.92) saturate(0.92); }
.about-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,10,12,0.55), rgba(6,10,12,0.75)); z-index:1; }
.about-inner{ position:relative; z-index:2; display:flex; gap:48px; align-items:flex-start; box-sizing:border-box; padding:0 18px; }
.about-photo img{ width:340px; height:auto; border-radius:6px; object-fit:cover; border:1px solid rgba(255,255,255,0.06); }
.about-bio{ max-width:600px; font-size:16px; line-height:1.55; color:var(--soft); font-family:"Montserrat", sans-serif; }
.about-title{ font-family:"Libre Baskerville", serif; font-size:22px; margin:0 0 16px 0; font-weight:700; }

/* BIO LEAD size (if you use .bio-lead class) */
.bio-lead {
  font-size:16px;
  line-height:1.55;
  margin:0 0 12px 0;
  max-width:80ch;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
  box-sizing:border-box;
}

/* responsive about */
@media (max-width:900px) {
  .about-inner{ flex-direction:column; align-items:center; text-align:center; padding:24px; }
  .about-photo img{ width:260px; }
  .about-section{ min-height: auto; padding: 48px 0; } /* ensures the text remains visible on small screens */
  .header-inner, .site-header .container { padding-inline: 16px; }
  .brand, .site-title { margin-left:0; padding-left: 4px; }
}

/* Concert page layout */
.concert-intro{
  display:flex;
  gap:40px;
  align-items:flex-start;
  margin-bottom:40px;
  box-sizing:border-box;
}
.concert-text{ display:flex; flex-direction:column; gap:22px; flex:1 1 0; min-width:0; }
.concert-text .concert-statement{ margin:0; max-width:none; line-height:1.56; }
.concert-image{ width:420px; flex:0 0 420px; }
.concert-image img{ width:100%; height:auto; display:block; border-radius:2px; object-fit:cover; border:1px solid rgba(255,255,255,0.05); }

@media (max-width:900px){
  .concert-intro{ flex-direction:column; }
  .concert-image{ width:100%; flex:0 0 auto; }
}

/* Video game layout*/ 
.media-audio.horizontal{ display:flex; align-items:center; justify-content:center; gap:40px; width:100%; max-width:900px; margin:0 auto;}
.audio-block{ flex:1; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.audio-block audio{ width:100%; max-width:420px; }
.artwork-wrap{ flex:0 0 280px; aspect-ratio:68/100; overflow:hidden; border-radius:0px; border:1px solid rgba(255,255,255,0.05); background:#000; }
.artwork-wrap img{ width:100%; height:100%; object-fit:cover; }

@media (max-width:900px){
  .media-audio.horizontal{ flex-direction:column-reverse; /* artwork on top, audio below */ gap:20px;}
  .audio-block{ align-items:center; text-align:center; }
  .artwork-wrap{ width:100%; max-width:320px; }
}

/* HOME WORKS / Film Music Concert vertical centering
   - on phone, stack vertically and center (so Film/Concert align middle vertically)
*/
.home-works,
.works-row,
.sections-row,
.home-cta-row {
  display:flex;
  align-items:center;    /* vertical centering */
  justify-content:center;/* horizontal centering */
  gap:28px;
  box-sizing:border-box;
}

/* individual work item: center content vertically within each block */
.work-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:200px; /* tweak as needed */
  padding:18px;
  box-sizing:border-box;
}

/* stack film & concert vertically on small screens AND center them */
@media (max-width:900px){
  .home-works, .works-row, .sections-row {
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .work-item { width:100%; max-width:520px; margin: 10px 0; } /* spacing between stacked items */
}

/* ensure long labels inside each work block can wrap */
.work-item *{ max-width:100%; overflow-wrap:anywhere; word-break:break-word; }

/* CONTACT / email wrapping & accent color */
.contact-email,
a.contact-email {
  display:inline-block;
  max-width:100%;
  word-break:break-word;
  overflow-wrap:anywhere;
  hyphens:auto;
  font-family:"Montserrat", sans-serif;
  color:var(--accent); /* golden color for gmail */
  text-decoration:none;
  padding:6px 10px;
  box-sizing:border-box;
}

/* ensure link hover has subtle effect */
a.contact-email:hover { text-decoration:underline; color: #e0c287; }

/* Touch targets / minimum tap sizes */
a.nav-link, .cta-simple, .contact-email {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
}

/* Responsive nav dropdown (mobile) */
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .top-nav{
    position:absolute;
    right:12px;
    top:calc(var(--header-height) + 8px);
    background:var(--header-bg);
    border:1px solid rgba(255,255,255,0.04);
    padding:12px;
    display:none;
    flex-direction:column;
    gap:8px;
    min-width:200px;
    z-index:100;
    box-shadow: 0 8px 26px rgba(0,0,0,0.45);
    border-radius:2px;
  }
  .top-nav.show{ display:flex; }
  .top-nav .nav-link{ padding:10px 14px; font-size:16px; display:block; min-height:44px; }
  .header-inner{ display:flex; align-items:center; gap:12px; justify-content:space-between; padding-inline:16px; }
}

/* Images / media responsiveness */
img, iframe, video, embed, object { max-width:100%; height:auto; display:block; }
.video-wrap{ aspect-ratio:16/9; width:100%; max-width:100%; }

/* Footer */
.site-footer{ padding:28px 0; border-top:1px solid rgba(255,255,255,0.3); color:var(--muted); font-size:14px; text-align:center; }

/* Utility: prevent overflow on narrow columns */
.min-width-0 { min-width:0; }

/* Small optimization: group frequently used transitions */
button, a, input { transition: color .12s ease, background .12s ease, border-color .12s ease; }

/* Accessibility: focus outlines
   - clicking/tapping will NOT show a border (as you requested),
   - keyboard users still receive :focus-visible styles for accessibility.
*/
:focus { outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }

/* Hide focus ring for clicks/taps but keep for keyboard navigation */
:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }

/* Visible keyboard focus (recommended to keep) */
:focus-visible {
  outline: 3px solid rgba(198,167,110,0.18);
  outline-offset: 3px;
}

/* Remove native focus outlines on buttons/links (clicks/taps) */
button, a, .cta-simple { -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/* Extra safeguard if big display classes exist */
.big-hero { font-size: clamp(2rem, 11vw, 6rem); line-height:1; word-break:break-word; }