/* =========================================================
   Simone Brazzini — portfolio site
   Fonts: Cormorant Garamond (display) + EB Garamond (body)
   substituted for Squarespace's Adobe Garamond Pro (Typekit).
   ========================================================= */

:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --muted:#4a4a4a;
  --line:#e6e6e6;
  --max:1200px;
  --pad:5vw;
  --serif:"EB Garamond", "Cormorant Garamond", Georgia, serif;
  --display:"Cormorant Garamond", "EB Garamond", Georgia, serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
a:hover{opacity:.65;}
img{max-width:100%;display:block;}

h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.1;}

.container{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* ---------- Header ---------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px var(--pad);
}
.site-header.solid{position:sticky;background:var(--bg);border-bottom:1px solid var(--line);}
.logo{font-family:var(--display);font-size:30px;font-weight:500;letter-spacing:1px;}

.nav{display:flex;align-items:center;gap:26px;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-links > li{position:relative;}
.nav-links a{font-family:var(--display);font-size:21px;padding:4px 0;}
.nav-links .active{border-bottom:1px solid currentColor;}

/* dropdowns */
.has-menu > a::after{content:"";}
.submenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--bg);border:1px solid var(--line);
  min-width:210px;padding:10px 0;list-style:none;margin:0;
  opacity:0;visibility:hidden;transition:.18s ease;box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.has-menu:hover .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.submenu li a{display:block;padding:8px 22px;font-size:18px;white-space:nowrap;}

/* social icons */
.social{display:flex;align-items:center;gap:16px;}
.social a{display:inline-flex;}
.social svg{width:19px;height:19px;fill:currentColor;}

/* header over dark hero */
.hero-page .site-header{color:#fff;}
.hero-page .submenu{color:var(--fg);}

/* mobile toggle */
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;color:inherit;}
.menu-toggle svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.5;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
/* readability scrim: darkens the centre behind the title/tagline */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 52%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.05) 30%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.45));}
.hero-inner{position:relative;z-index:2;text-align:center;color:#fff;padding:0 20px;
  text-shadow:0 2px 5px rgba(0,0,0,.55), 0 4px 30px rgba(0,0,0,.55);}
.hero-inner h1{font-size:clamp(44px,7vw,78px);}
.hero-inner .tagline{font-family:var(--display);font-size:clamp(21px,2.5vw,27px);font-weight:500;
  margin-top:10px;letter-spacing:.4px;}

/* ---------- Sections ---------- */
.section{padding:90px 0;}
.page-top{padding-top:150px;}
.section-title{font-size:clamp(34px,4.5vw,44px);margin-bottom:8px;}

/* About: two column */
.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start;}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;}
.about-cols p{margin:0 0 1em;}
.about-cols em, .about-cols i{font-style:italic;}

/* ---------- Reels ---------- */
.reel{max-width:960px;margin:0 auto 70px;}
.reel:last-child{margin-bottom:0;}
.reel .frame{position:relative;padding-bottom:56.25%;height:0;background:#000;}
.reel .frame iframe,.reel .frame video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.reel .caption{font-family:var(--display);font-size:22px;margin-top:14px;}
.reel .desc{color:var(--muted);font-size:18px;margin-top:4px;}
.placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#bbb;background:#111;text-align:center;padding:20px;font-family:var(--display);font-size:19px;}

/* ---------- Galleries ---------- */
.gallery{columns:3;column-gap:14px;}
.gallery img{width:100%;margin:0 0 14px;cursor:zoom-in;break-inside:avoid;background:#f2f2f2;}
.gallery.two{columns:2;max-width:960px;margin:0 auto;}

/* resume image */
.resume-wrap{max-width:850px;margin:0 auto;text-align:center;}
.resume-wrap img{border:1px solid var(--line);margin-bottom:18px;}
.btn{display:inline-block;font-family:var(--display);font-size:19px;border:1px solid var(--fg);
  padding:11px 26px;transition:.18s;}
.btn:hover{background:var(--fg);color:#fff;opacity:1;}

/* ---------- Audio ---------- */
.audio-item{max-width:720px;margin:0 auto 40px;text-align:center;}
.audio-item h3{font-size:26px;margin-bottom:14px;}
.audio-item audio{width:100%;}

/* ---------- Contact ---------- */
.contact-wrap{max-width:640px;margin:0 auto;}
.contact-form{display:grid;gap:18px;margin-top:26px;}
.contact-form label{display:block;font-family:var(--display);font-size:18px;margin-bottom:6px;}
.contact-form input,.contact-form textarea{
  width:100%;font-family:var(--serif);font-size:17px;padding:12px 14px;
  border:1px solid #cfcfcf;background:#fff;color:var(--fg);}
.contact-form textarea{min-height:150px;resize:vertical;}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:200;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:92vh;object-fit:contain;cursor:zoom-out;}
.lightbox .lb-close,.lightbox .lb-nav{position:absolute;color:#fff;background:none;border:0;cursor:pointer;font-size:34px;font-family:var(--display);}
.lb-close{top:20px;right:30px;}
.lb-nav{top:50%;transform:translateY(-50%);font-size:48px;padding:20px;}
.lb-prev{left:14px;} .lb-next{right:14px;}

/* ---------- Footer ---------- */
.site-footer{padding:60px 0 70px;text-align:center;}
.site-footer .social{justify-content:center;gap:22px;margin-bottom:14px;}
.site-footer svg{width:22px;height:22px;}
.site-footer svg.imdb{width:auto;} /* keep IMDb wordmark aspect ratio */
.site-footer .copy{color:var(--muted);font-size:15px;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:18px;}
  .about-cols{grid-template-columns:1fr;}
  .gallery{columns:2;}
}
@media(max-width:640px){
  body{font-size:18px;}
  .menu-toggle{display:inline-flex;}
  .nav{gap:14px;}
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:74vw;max-width:320px;
    background:var(--bg);color:var(--fg);flex-direction:column;align-items:flex-start;
    padding:90px 30px;gap:20px;transform:translateX(100%);transition:.28s ease;
    box-shadow:-10px 0 40px rgba(0,0,0,.15);overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:6px 0 6px 16px;min-width:0;}
  .has-menu:hover .submenu{transform:none;}
  .site-header .social{display:none;}
  .gallery,.gallery.two{columns:1;}
  .contact-form .row2{grid-template-columns:1fr;}
  .hero-page .nav-links{color:var(--fg);}
}