/* ============================================
   Gleb Koroleff — pianist website
   Palette (light, cool): paper #F4F5F6, ink #16191D, accent #3E6485,
                     stone #6B6F73, navy #1F3A52
   Type: Bodoni Moda (display) / Inter (body, ui)
   ============================================ */

:root{
  --paper: #F4F5F6;
  --paper-rgb: 244,245,246;
  --paper-dim: #E7EAEC;
  --ink: #16191D;
  --ink-soft: #20242A;
  --ivory: #F7F8F9;
  --ivory-dim: #C7CDD3;
  --brass: #3E6485;
  --brass-soft: #5E7F9A;
  --stone: #6B6F73;
  --wine: #1F3A52;

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --max: 1120px;
  --edge: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}

::selection{ background:var(--brass); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* ---------- layout helpers ---------- */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}

.hairline{
  border:none;
  border-top:1px solid rgba(62,100,133,0.35);
  margin:0;
}

.eyebrow{
  font-family:var(--sans);
  font-size:0.8rem;
  letter-spacing:0.02em;
  color:var(--brass);
  margin:0 0 0.6em;
}

/* ---------- nav ---------- */
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:32px var(--edge) 0;
}

.site-nav .brand{
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:500;
  color:var(--ivory);
  text-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.site-nav ul{
  list-style:none;
  display:flex;
  gap:36px;
  margin:0;
  padding:0;
}

.site-nav a{
  font-size:0.86rem;
  letter-spacing:0.01em;
  color:var(--ivory-dim);
  text-shadow:0 1px 6px rgba(0,0,0,0.4);
  transition:color .15s ease;
}
.site-nav a:hover{
  color:var(--brass);
}

.nav-toggle{ display:none; }

@media (max-width:720px){
  .site-nav ul{
    position:fixed;
    inset:0 0 0 auto;
    width:min(78vw,320px);
    height:100vh;
    background:var(--ink-soft);
    flex-direction:column;
    justify-content:center;
    gap:0;
    padding:0;
    transform:translateX(100%);
    transition:transform .35s ease;
  }
  .site-nav ul li{ border-bottom:1px solid rgba(247,248,249,0.12); width:100%; }
  .site-nav a{ display:block; color:var(--ivory); padding:18px 40px; text-shadow:none; }
  .site-nav a:hover{ color:var(--brass); }
  .nav-toggle:checked ~ ul{ transform:translateX(0); }
  .nav-burger{
    display:block;
    width:26px; height:18px;
    position:relative;
    cursor:pointer;
    z-index:60;
    margin-top:2px;
  }
  .nav-burger span, .nav-burger::before, .nav-burger::after{
    content:"";
    display:block;
    height:1.5px;
    width:100%;
    background:var(--ivory);
    position:absolute;
    left:0;
  }
  .nav-burger::before{ top:0; }
  .nav-burger span{ top:8px; }
  .nav-burger::after{ top:16px; }
}
@media (min-width:721px){
  .nav-burger{ display:none; }
}

/* ---------- hero: fixed behind everything, content rides over it on scroll ---------- */
.hero{
  position:fixed;
  top:0; left:0; right:0;
  height:100vh;
  z-index:0;
  background:#000;
}

.hero img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;
  opacity:0.82;
}

.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,18,15,0.95) 0%, rgba(20,18,15,0.15) 55%, rgba(20,18,15,0.35) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
  padding:0 var(--edge) 72px;
  width:100%;
  animation:hero-rise .9s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes hero-rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.hero-content .eyebrow{ font-size:0.95rem; }

.hero-content h1{
  font-size:clamp(2.6rem, 8vw, 6rem);
  color:var(--ivory);
  line-height:0.98;
}

/* ---------- parallax: hero stays fixed behind, every block rides over it,
   fading from transparent (just arriving) to ~92% opaque (settled), then
   back to transparent as it leaves — see the script at the end of the body.
   Applies at every screen size. ---------- */
.scroll-content{
  position:relative;
  z-index:1;
  margin-top:100vh;
  background:transparent;
}
/* every section gets the same margin, so every gap between blocks collapses
   to the same visible size — the fixed photo shows through completely there;
   only the .reveal-panel inside carries a tinted background, and its opacity
   is animated by JS as it scrolls through the viewport */
.scroll-content > section{
  margin:18vh 0;
  padding:0;
  background:transparent;
}
.reveal-panel{
  background:rgba(var(--paper-rgb), var(--reveal, 0));
  transition:background-color .1s linear;
}
/* title strip glued to the top of Gallery / Video — same tinted panel, no gap below */
.section-bar{
  padding:22px var(--edge);
  margin-bottom:0;
  background:rgba(var(--paper-rgb), var(--reveal, 0));
  transition:background-color .1s linear;
}
.section-bar h2{
  font-size:clamp(1.3rem, 2.4vw, 1.8rem);
  color:var(--ink);
}
.interlude-panel{
  padding:36px 26px;
  background:rgba(var(--paper-rgb), 0.45);
}
/* the quote sits directly against About — no gap between them */
.interlude{ margin-bottom:0; }
.interlude + .bio-split{ margin-top:0; }

/* ---------- splash gate (index.html) ---------- */
.splash{
  position:relative;
  min-height:100vh;
  display:block;
  background:#000;
  overflow:hidden;
}
.splash img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  opacity:0.75;
}
.splash::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,18,15,0.55) 0%, rgba(20,18,15,0.05) 30%, rgba(20,18,15,0.1) 70%, rgba(20,18,15,0.5) 100%);
}
.splash-link{
  position:absolute;
  z-index:2;
  top:38%;
  left:30%;
  transform:translate(-50%, -50%);
  text-align:left;
  animation:splash-rise 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes splash-rise{
  from{ opacity:0; transform:translate(-50%, calc(-50% + 18px)); }
  to{ opacity:1; transform:translate(-50%, -50%); }
}
.splash-link .eyebrow{
  justify-content:flex-start;
  display:flex;
  font-size:0.95rem;
  margin-bottom:0.8em;
}
.splash-link h1{
  font-size:clamp(2.2rem, 6vw, 4.2rem);
  color:var(--ivory);
  line-height:0.95;
  transition:color .3s ease, letter-spacing .3s ease;
}
.splash-link:hover h1{
  color:var(--brass);
  letter-spacing:0.01em;
}

/* ---------- interlude (transition between hero and biography) ---------- */
.interlude{
  text-align:center;
}
.interlude-rule{
  max-width:180px;
  margin:0 auto 40px;
}
.interlude p{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.25rem, 2.4vw, 1.85rem);
  color:var(--ink);
  max-width:700px;
  margin:0 auto;
  line-height:1.55;
}
.interlude p ~ .interlude-rule{ margin:40px auto 0; }

/* ---------- section shell ---------- */
section{ padding:110px 0; }
.section-head{ margin-bottom:56px; max-width:640px; }
.section-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); }

/* ---------- programme (news list) ---------- */
.programme{ list-style:none; margin:0; padding:0; }
.programme li{
  display:grid;
  grid-template-columns: 24px 1fr;
  align-items:start;
  gap:28px;
  padding:34px 0;
  border-top:1px solid rgba(62,100,133,0.3);
  transition:padding-left .25s ease;
}
.programme li:last-child{ border-bottom:1px solid rgba(62,100,133,0.3); }
.programme li:hover{ padding-left:14px; }
.programme .prog-dot{
  display:block;
  width:7px; height:7px;
  margin-top:10px;
  border-radius:50%;
  background:rgba(62,100,133,0.4);
  transition:background .25s ease;
}
.programme li:hover .prog-dot{ background:var(--brass); }
.programme h3{
  font-size:1.25rem;
  font-weight:500;
  color:var(--ink);
}
@media (max-width:600px){
  .programme li{ grid-template-columns:16px 1fr; gap:16px; }
}

/* ---------- gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:30vw;          /* normal photos ~square, portraits span 2 rows, wide ones 2 columns */
  grid-auto-flow:dense;
  gap:6px;
}
.gallery-grid img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
  filter:grayscale(35%);
}
.gallery-grid a:nth-child(1),
.gallery-grid a:nth-child(3),
.gallery-grid a:nth-child(8){ grid-row:span 2; }      /* the three portrait photos */
.gallery-grid a:nth-child(2),
.gallery-grid a:nth-child(5){ grid-column:span 2; }   /* the two wide photos */
.gallery-grid a{ position:relative; overflow:hidden; display:block; }
.gallery-grid a:hover img{ transform:scale(1.045); filter:grayscale(0%); }
.gallery-index{
  position:absolute;
  left:14px; bottom:14px;
  font-family:var(--serif);
  font-size:0.85rem;
  color:var(--ivory);
  opacity:0;
  /* note: sits on the photo thumbnails, not the page background — stays light with shadow for legibility */
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
}
.gallery-grid a:hover .gallery-index{ opacity:1; transform:translateY(0); }
.gallery-grid a::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,18,15,0.45) 0%, rgba(20,18,15,0) 35%);
  opacity:0;
  transition:opacity .25s ease;
}
.gallery-grid a:hover::after{ opacity:1; }



/* ---------- video ---------- */
.video-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
  padding:0 0 60px;
}
@media (max-width:720px){
  .video-grid{ grid-template-columns:1fr; }
}
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--ink);
}
.video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ---------- contact ---------- */

.contact-block + .contact-block{ margin-top:36px; }
.contact-block h4{
  font-family:var(--sans);
  font-size:0.8rem;
  color:var(--brass);
  letter-spacing:0.02em;
  margin-bottom:10px;
}
.contact-block p{ color:var(--stone); margin:0 0 4px; }
.contact-block a:hover{ color:var(--brass); }

.social-row{ display:flex; gap:18px; margin-top:28px; }
.social-row a{
  width:38px; height:38px;
  border:1px solid var(--brass);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem;
  color:var(--brass);
  transition:background .2s ease, color .2s ease;
}
.social-row a:hover{ background:var(--brass); color:var(--paper); }

form.contact-form{ display:flex; flex-direction:column; gap:18px; }
.contact-form label{
  font-size:0.8rem;
  color:var(--stone);
  display:block;
  margin-bottom:6px;
}
.contact-form input, .contact-form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(62,100,133,0.4);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  padding:10px 2px;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none;
  border-bottom-color:var(--brass);
}
.contact-form textarea{ resize:vertical; min-height:96px; }
.contact-form button{
  align-self:flex-start;
  margin-top:8px;
  background:none;
  border:1px solid var(--brass);
  color:var(--brass);
  font-family:var(--sans);
  font-size:0.95rem;
  padding:12px 28px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.contact-form button:hover{ background:var(--brass); color:var(--ink); }

/* ---------- footer: small, dark print — stays out of the way ---------- */
footer{
  position:relative;
  z-index:1;
  padding:30px var(--edge);
  background:var(--ink);
  font-size:0.76rem;
  color:var(--ivory-dim);
  text-align:center;
}
footer .wrap{
  max-width:520px;
  margin:0 auto;
}
footer p{ color:var(--ivory); }
footer .credits{ margin-bottom:12px; line-height:1.8; }
footer .credits a{ color:var(--ivory-dim); border-bottom:1px solid rgba(247,248,249,0.25); }
footer .credits a:hover{ color:var(--brass); border-color:var(--brass); }

/* ---------- biography page: full-screen photo + scrolling text panel ---------- */
.bio-split{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.bio-split .bio-photo{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:75% center;
}
.bio-panel{
  position:absolute;
  top:0; left:0;
  bottom:0;
  width:min(52%, 680px);
  background:linear-gradient(to right, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.98) 72%, rgba(255,255,255,0) 100%);
  color:var(--ink);
  overflow-y:auto;
  padding:170px 100px 80px 56px;
}
.bio-panel .eyebrow{ color:var(--brass-soft); }
.bio-panel h1{
  font-size:clamp(2rem,3.4vw,2.8rem);
  color:var(--ink);
  margin-bottom:0.7em;
}
.bio-panel p{
  color:#3B372E;
  font-size:1.02rem;
  max-width:52ch;
}
.bio-panel p + p{ margin-top:1.2em; }

/* mirrored variant: photo's empty space (and the panel) sit on the right */
.bio-split.panel-right .bio-photo{ object-position:25% center; }
.bio-split.panel-right .bio-panel{
  left:auto;
  right:0;
  padding:170px 56px 80px 100px;
  background:linear-gradient(to left, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.98) 72%, rgba(255,255,255,0) 100%);
}

/* News / Contact panels reuse the same look, just without the biography-specific type scale */
.bio-panel h2{
  font-size:clamp(1.7rem,2.8vw,2.3rem);
  color:var(--ink);
  margin-bottom:0.2em;
}
.bio-panel .section-head{ margin-bottom:40px; }
.bio-panel .programme li{ border-top-color:rgba(62,100,133,0.2); }
.bio-panel .programme li:last-child{ border-bottom-color:rgba(62,100,133,0.2); }
.bio-panel .programme h3{ color:var(--ink); font-size:1.1rem; }
.bio-panel .contact-block p{ color:#3B372E; }
.bio-panel .contact-form input,
.bio-panel .contact-form textarea{ color:var(--ink); }

.more-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  padding-bottom:4px;
  border-bottom:1px solid var(--wine);
  color:var(--wine);
  font-size:0.95rem;
  transition:gap .2s ease;
}
.more-link:hover{ gap:16px; }

.downloads{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:44px;
}
.downloads a{
  border:1px solid var(--wine);
  color:var(--wine);
  padding:12px 24px;
  font-size:0.92rem;
  transition:background .2s ease, color .2s ease;
}
.downloads a:hover{ background:var(--wine); color:var(--ivory); }

.back-link{
  display:inline-block;
  margin-top:56px;
  color:var(--brass-soft);
  font-size:0.9rem;
  border-bottom:1px solid var(--brass-soft);
  padding-bottom:2px;
}
.back-link:hover{ color:var(--wine); border-color:var(--wine); }

@media (max-width:860px){
  /* phones, like the old Wix site: the whole photo spans the screen width and the
     small text lies on its empty side, on the same horizontal band as the figure.
     The photo is pinned while a longer text scrolls past it.
     Tune: object-position (where the figure sits horizontally) and --photo-h (band height). */
  .bio-split{
    --photo-h:118vw;
    height:auto;
    overflow:visible;          /* sticky needs this */
    display:grid;
    grid-template-columns:1fr;
  }
  .bio-split .bio-photo{
    grid-area:1 / 1;
    position:sticky;
    top:10vh;
    align-self:start;
    width:100%;
    height:var(--photo-h);
    object-fit:cover;
    object-position:calc(82% + 20vw) center;   /* figure moved 20% to the right */
  }
  .bio-split.panel-right .bio-photo{ object-position:calc(18% - 37.5vw) center; }   /* contact: 37.5% to the left in total */
  /* biography (About block + the Biography page): 45% in total */
  #about.bio-split .bio-photo,
  .site-nav + .bio-split .bio-photo{ object-position:calc(82% + 45vw) center; }
  .bio-panel,
  .bio-split.panel-right .bio-panel{
    grid-area:1 / 1;
    position:relative;
    inset:auto;
    z-index:1;
    width:62%;
    min-height:var(--photo-h);
    height:auto;
    overflow:visible;
    padding:26px 52px 36px 14px;
    justify-self:start;
    background:linear-gradient(to right, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.84) 55%, rgba(255,255,255,0) 100%);
  }
  .bio-split.panel-right .bio-panel{
    justify-self:end;
    padding:26px 14px 36px 52px;
    background:linear-gradient(to left, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.84) 55%, rgba(255,255,255,0) 100%);
  }
  .bio-panel p{ font-size:0.8rem; line-height:1.5; }
  .bio-panel p + p{ margin-top:0.9em; }
  .bio-panel h1{ font-size:1.25rem; margin-bottom:0.5em; }
  .bio-panel h2{ font-size:1.25rem; }
  .bio-panel .section-head{ margin-bottom:18px; }
  .bio-panel .programme li{ padding:14px 0; gap:12px; grid-template-columns:12px 1fr; }
  .bio-panel .programme h3{ font-size:0.85rem; line-height:1.4; }
  .contact-block p, .contact-block h4{ font-size:0.8rem; }
  .downloads a{ padding:9px 14px; font-size:0.78rem; }
  /* on the home page the photo is exactly as tall as the text beside it, so the whole
     figure is always in frame (top to toe); the width is what gets cropped */
  .scroll-content .bio-split{ overflow:hidden; }
  .scroll-content .bio-split .bio-photo{
    position:absolute;
    inset:0;
    top:0;
    width:100%;
    height:100%;
    align-self:auto;
  }
  /* biography page: the section starts at the very top, under the fixed menu */
  .site-nav + .bio-split .bio-panel{ padding-top:84px; }
}

/* ---------- mobile-hero-crop: on a narrow phone screen, slide the visible strip of the
   wide photo onto the face (an eye, nose and ear in frame). Adjust the first
   percentage: higher = further right, lower = further left. ---------- */
@media (max-width:720px){
  .hero img{ object-position:62% 22%; }
}

/* ---------- headroom above the head (About, Contact, Biography page) ----------
   The photos have almost no air above the head, so the picture is pushed down a
   little and its top edge fades into the backdrop colour sampled from the photo. */
#about.bio-split{ background:#e6e7ea; }
#contact.bio-split{ background:#dee0df; }
#news.bio-split{ background:#e0e0de; }
#about .bio-photo,
#contact .bio-photo{
  top:7%;
  height:93%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 5vw);
          mask-image:linear-gradient(to bottom, transparent 0, #000 5vw);
}
@media (min-width:861px){
  .site-nav + .bio-split{ background:#e6e7ea; }
  /* Desktop: the photo is scaled to the block's height so the whole figure, head to
     shoes, is always in frame. It sits against the side opposite the text; its outer
     edges fade into the backdrop colour, so the sides of a wide screen show no seam. */
  #about .bio-photo,
  .site-nav + .bio-split .bio-photo{
    left:auto; right:0;
    top:7%; height:93%;
    width:auto; max-width:100%;
    object-fit:cover;
    object-position:100% 0%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 5vw), linear-gradient(to right, transparent 0, #000 9vw);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to bottom, transparent 0, #000 5vw), linear-gradient(to right, transparent 0, #000 9vw);
            mask-composite:intersect;
  }
  #contact .bio-photo{
    left:0; right:auto;
    top:7%; height:93%;
    width:auto; max-width:100%;
    object-fit:cover;
    object-position:0% 0%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 5vw), linear-gradient(to left, transparent 0, #000 9vw);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to bottom, transparent 0, #000 5vw), linear-gradient(to left, transparent 0, #000 9vw);
            mask-composite:intersect;
  }
  .site-nav + .bio-split .bio-photo{ top:7%; }
}

/* ---------- News: softer, narrower fade, and the picture moved 20% to the right ---------- */
#news .bio-panel{
  width:min(46%, 600px);
  padding-right:90px;
  background:linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0) 100%);
}
@media (min-width:861px){
  #news .bio-photo{
    left:auto; right:0;
    width:auto; max-width:100%;
    height:100%;
    object-fit:cover;
    object-position:100% 50%;
    transform:translateX(10%);     /* 10% to the right of its natural place */
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9vw);
            mask-image:linear-gradient(to right, transparent 0, #000 9vw);
  }
}
@media (max-width:860px){
  #news.bio-split .bio-photo{ object-position:calc(82% + 40vw) center; }
  #news .bio-panel{
    width:62%;
    padding-right:52px;
    background:linear-gradient(to right, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0) 100%);
  }
}

/* ---------- splash page: keep the whole figure in frame, shoes included ----------
   Computer: the photo is pinned to the bottom, so only empty backdrop at the top can be
   cropped. Phone: the photo is shown a little smaller and centred on you, so you are not
   cut off at the sides; the strip above it is filled with the photo's own backdrop colour. */
.splash img{ object-position:center 100%; }
@media (max-width:720px){
  .splash{ background:#a2a5a4; }
  .splash img{
    inset:auto;
    bottom:0;
    top:auto; right:auto;
    left:calc(50% - 54.5vh);
    width:auto; max-width:none;
    height:80vh;
    object-fit:cover;
    object-position:50% 50%;
  }
}