:root{
  --bg:#0a0a0a;
  --fg:#f4f3f1;
  --muted:#a8a39b;
  /* mobile/tablet chrome */
  --navH: 56px;                 /* mobile nav height offset */
  --gutter: clamp(12px, 3.5vw, 24px); /* symmetric side padding on small screens */
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.75;
  overflow:hidden; /* #snap handles scrolling */
}

/* neutralize link blue */
a, a:visited { color: inherit; text-decoration: none; }
.read-link, .inline { border-bottom:1px solid transparent; }
.read-link:hover, .inline:hover { border-bottom-color:#fff; }

/* SNAP CONTAINER */
#snap{
  height:100svh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
}
.slide{
  position:relative;
  height:100%;
  width:100vw;
  scroll-snap-align:start;
}
.inner{
  position:absolute; inset:0;
  display:grid; align-content:center; justify-items:start;
  padding:6rem clamp(1.25rem, 4vw, 4rem);
}

/* Nav */
.section-nav{
  position:fixed; right:2rem; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.85rem; z-index:50;
}
.section-nav a{
  color:#9b9892; letter-spacing:.12em; text-transform:uppercase; font-size:.82rem;
}
.section-nav a.active{color:#fff; font-weight:600}
@media (max-width:900px){
  .section-nav{
    right:auto; left:0; top:0; transform:none;
    flex-direction:row; gap:1.1rem; padding:.75rem 1rem;
    background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .inner{ padding:5rem 1.1rem 3rem; }
}

/* =========================
   HERO: poster + video sync
   ========================= */

/* Container */
.hero .video-wrap{
  position:absolute; inset:0; overflow:hidden; z-index:-1;
}

/* Poster as a pseudo-element so we can size it exactly like the video */
.hero .video-wrap::before{
  content:"";
  position:absolute;
  inset:0;                    /* desktop/tablet base: cover whole hero */
  background:url("hero-poster.png") center/cover no-repeat;
  opacity:1;                  /* stays visible under the video */
  pointer-events:none;
  transition:opacity .35s ease;
}

/* Video hidden until truly playing (JS will add .is-playing) */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;       /* prevent native UI */
}
.hero-video.is-playing{ opacity:1; }

/* Mobile crop/height + vertical centering (APPLIES TO BOTH POSTER + VIDEO) */
@media (max-width: 900px){
  .hero .video-wrap{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  }

  /* Make the poster match the video’s size/orientation exactly */
  .hero .video-wrap::before{
    top:50%; left:0; right:0; bottom:auto;
    height:52vh;                      /* same as video */
    transform:translateY(-50%);
    background-position:left center;  /* left-biased crop */
    background-size:cover;
  }

  .hero-video{
    top:50%; transform:translateY(-50%);
    height:52vh;            /* tweak to taste (48–56vh usually looks good) */
    width:100%;
    object-position:left center; /* show leftmost ~60% */
  }
}

/* On very tall phones, trim a touch more */
@media (max-width: 900px) and (min-height: 820px){
  .hero .video-wrap::before{ height:48vh; }
  .hero-video{ height:48vh; }
}

.overlay{
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.38) 70%,
    rgba(0,0,0,.50) 100%
  );
  z-index:1; pointer-events:none;
}

/* Lockup */
.lockup{
  position:absolute;
  left:clamp(1.25rem,4vw,4rem);
  bottom:clamp(1.25rem,4vw,4rem);
}
.lockup h1{
  margin:0;
  font-family:"Notable", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(40px, 5.2vw, 96px);
  line-height:0.5;
  letter-spacing:.01em;
}
.lockup h1 span{ display:block; }
.lockup h1 .tight{ margin-top:-0.16em; }
.tag{
  margin-top:1rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.04em;
}

/* ==== NAV RAIL spacing ==== */
:root { --nav-rail: clamp(18rem, 22vw, 30rem); }

#about .inner,
#read .inner {
  padding-right: var(--nav-rail) !important;
}

@media (max-width: 900px) {
  #about .inner,
  #read .inner {
    padding-right: clamp(1.25rem, 4vw, 4rem) !important;
  }
}

/* =================
   ABOUT (2-column)
   ================= */
#about .about-grid{
  max-width:min(1100px, 86vw);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem 4rem;
}

#about .about-heading{
  margin:0 0 .6rem;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  font-size:clamp(17px, 1.7vw, 22px);
}

#about .about-col p{
  margin:0 0 1.2rem;
  font-size:clamp(13px, 1.2vw, 16.5px);
  line-height:1.8;
  overflow-wrap:anywhere;
  hyphens:auto;
}

@media (max-width: 900px){
  #about .about-grid{
    grid-template-columns:1fr;
    gap:1.25rem;
  }
  #about .about-col p{
    margin:0 0 1rem;
    font-size:clamp(14px, 1.6vw, 18px);
    line-height:1.85;
  }
}

@media (min-width: 901px) and (max-height: 800px){
  #about .about-heading{ font-size:clamp(16px, 1.5vw, 20px); }
  #about .about-col p{ font-size:clamp(12px, 1.1vw, 15px); line-height:1.75; }
  #about .inner{ padding-top:4.5rem; padding-bottom:4.5rem; }
}


/* ============ 
   MEDIA (Listen) 
   ============ */

/* Desktop (unchanged): true 50/50 split */
#media .media-grid{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  height:100%;
}
.cell{ position:relative; width:100%; height:100%; min-height:0; overflow:hidden; }
.cell > iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; border:0;
}
.cell.video{ background:#000; }

/* Spotify fills the bottom half, centered with a desktop max width */
.cell.music.centered{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.cell.music.centered > iframe{
  height: calc(100% - 2rem);
  width: min(1000px, 90vw);
  border-radius:12px;
  margin:auto;
  inset:auto;
}

/* --- Tablet 600–900px: offset for nav, stack evenly, Spotify full-width with symmetric gutter --- */
@media (min-width:600px) and (max-width:900px){
  #media .media-grid{
    /* Start below the fixed top nav and fill the remainder */
    inset: var(--navH) 0 0 0;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    height:calc(100% - var(--navH));
  }
  .cell.music.centered{
    padding: var(--gutter);
    justify-content:center; align-items:center;
  }
  .cell.music.centered > iframe{
    width:100%;
    height: calc(100% - (2 * var(--gutter)));
    border-radius:12px;
  }
}

/* --- Mobile ≤599px: offset for nav, give Spotify real room, symmetric gutter --- */
@media (max-width:599px){
  #media .media-grid{
    inset: var(--navH) 0 0 0;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,0.3fr) minmax(0,0.3fr) minmax(0,0.4fr);
    height:calc(100% - var(--navH));
  }
  .cell.music.centered{
    padding: var(--gutter);
    justify-content:center; align-items:center;
  }
  .cell.music.centered > iframe{
    width:100%;
    height: calc(100% - (2 * var(--gutter)));
    border-radius:12px;
  }
}

/* =====
   READ
   ===== */
#read .read-wrap{max-width:min(900px,86vw)}
#read .read-list{display:flex; flex-direction:column; gap:1rem}
#read .read-title{
  font-family:"Space Grotesk",sans-serif; font-weight:700;
  font-size:clamp(28px,4.2vw,52px);
  margin:0 0 1rem;
}
#read .read-item{
  font-size:clamp(14px, 1.35vw, 18px);
  line-height:1.85;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.read-link {
  color:#d7d4ce;
  border-bottom:1px solid #555;
  transition:color .2s, border-color .2s;
}
.read-link:hover {
  color:#fff;
  border-bottom-color:#fff;
}

/* =========
   CONTACT
   ========= */
#contact {
  position: relative;
  background: #000;
  overflow: hidden;
}
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("headshot.jpeg") center/cover no-repeat;
  opacity: 0.5;
  z-index: 0;
}
#contact .contact-wrap {
  position: relative;
  z-index: 1;
  max-width: min(540px, 86vw);
  text-align: left;
  margin-left: clamp(3rem, 12vw, 12rem);
}
#contact .contact-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 60px);
  margin: 0 0 1.1rem;
  color: var(--fg);
}
#contact .email {
  margin: 0 0 1.8rem;
  color: #d7d4ce;
}
#contact .contact-buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 1.5rem;
}
#contact .btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
#contact .btn:hover { background:#fff; color:#000; }
@media (max-width: 600px) {
  #contact .contact-buttons { flex-direction: column; align-items: flex-start; }
  #contact .btn { width: 100%; max-width: 240px; text-align: center; }
}

/* =======
   MOBILE overflow safety (general)
   ======= */
@media (max-width: 900px){
  .inner{ align-content:start; overflow:auto; }
  #contact .inner{ align-content:center; }
}

@media (min-width: 901px) and (max-height: 740px){
  .inner{ padding-top:4.5rem; padding-bottom:4.5rem; }
}