/* ==========================================================================
   Pavel Kachnov — pianist
   ========================================================================== */



/* ===== Local fonts (SIL OFL 1.1, see assets/fonts/OFL.txt) ===== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  /*font-display: swap;*/
  font-display: block;
  
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  /*font-display: swap;*/
  font-display: block;
  
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-300italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  /*font-display: swap;*/
  font-display: block;
  
  src: url('../fonts/cormorant-sc-v19-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  /*font-display: swap;*/
  font-display: block;
  
  src: url('../fonts/eb-garamond-v33-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  /*font-display: swap;*/
  font-display: block;
  
  src: url('../fonts/eb-garamond-v33-latin_latin-ext-italic.woff2') format('woff2');
}





*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-gutter: stable; }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg:          #070707;
  --bg-raise:    #0e0e0e;
  --ivory:       #f2ece0;
  --ivory-soft:  rgba(242, 236, 224, .72);
  --ivory-dim:   rgba(242, 236, 224, .48);
  --ivory-faint: rgba(242, 236, 224, .12);
  --hairline:    rgba(242, 236, 224, .10);
  --gold:        #c4a46b;
  --gold-dim:    rgba(196, 164, 107, .35);
  --gold-faint:  rgba(196, 164, 107, .12);

  --display: 'Cormorant Garamond', Georgia, serif;
  --body:    'EB Garamond', Georgia, serif;
  --label:   'Cormorant SC', Georgia, serif;

  --ease: cubic-bezier(.22, 1, .36, 1);

  --pad-x:    9vw;  
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

::selection { background: var(--gold-dim); color: var(--ivory); }

/* Heads */
h1, h2, h3 { font-family: var(--display); font-weight: 300; line-height: 1.15; }

/* Service signature: sections, superheadings, small marks */
.eyebrow {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Heads internal pages
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  gap: 2rem;
  padding: 0 var(--pad-x);
  background: rgba(7, 7, 7, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

/* On the main page, the header lies on top of the poster: without a backing and without a line */
.site-header--home {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  opacity: 0;
  animation: fadeIn .9s ease 1.6s forwards;
}
.site-header--home::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(7,7,7,.85) 0%, rgba(7,7,7,.45) 60%, transparent 100%);
  pointer-events: none;
}

.site-header__name {
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { margin-left: auto; }

.site-nav__list {
  display: flex; align-items: center;
  gap: 1.9rem;
  list-style: none;
}

.site-nav__link {
  position: relative;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory);
  text-decoration: none;
  transition: color .3s;
}
.site-nav__link::after {
  content: '';
  position: absolute; left: 0; bottom: -5px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .4s var(--ease);
}
.site-nav__link:hover { color: var(--gold); }
.site-nav__link:hover::after { width: 100%; }

.site-nav__link[aria-current="page"] {
  color: var(--gold);
}
.site-nav__link[aria-current="page"]::after { width: 100%; }

/* Separator before language switch */
.site-nav__lang {
  padding-left: 1.9rem;
  border-left: 1px solid var(--hairline);
}

/* Menu button - visible only on narrow screens */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 110;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none; border: 0;
  color: var(--ivory);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 26px; height: 2px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .2s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Indentation under fixed header */
.page-body { padding-top: var(--header-h); }

/* --------------------------------------------------------------------------
   5. Sections and typography of content pages
   -------------------------------------------------------------------------- */
.section {
  padding: 8vh var(--pad-x);
  position: relative; z-index: 2;
}
.section--tight { padding-top: 4vh; }

.wrap       { max-width: 1180px; margin: 0 auto; }
.wrap--text { max-width: 68ch;  margin: 0 auto; }

.page-title {
  font-size: clamp(40px, 6vw, 88px);
  font-style: italic;
  margin: 1.2rem 0 0;
}

.page-title + .page-lede {
  margin-top: 1.6rem;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ivory-soft);
  max-width: 60ch;
}

.rule {
  width: clamp(80px, 15vw, 240px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 2.4rem 0;
}

.section h2 {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 1.4rem;
}
.section h3 {
  font-size: clamp(19px, 1.8vw, 23px);
  margin-bottom: .5rem;
}
.section p { color: var(--ivory-soft); }
.section p + p { margin-top: 1.1rem; }

/* Link in the text */
.section a:not(.button):not(.card) {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
  transition: border-color .3s;
}
.section a:not(.button):not(.card):hover { border-color: var(--gold); }

/* Button */
.button {
  display: inline-flex; align-items: center; gap: .8rem;
  min-height: 46px;
  padding: .6rem 1.6rem;
  font-family: var(--label);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid var(--gold-dim);
  background: transparent;
  transition: background .35s, border-color .35s, color .35s;
}
.button:hover {
  background: var(--gold-faint);
  border-color: var(--gold);
  color: var(--ivory);
}

/* Quote - large, for reviews of performances */
.pullquote {
  border-left: 1px solid var(--gold-dim);
  padding-left: clamp(1.2rem, 3vw, 2.4rem);
  margin: 3rem 0;
}
.pullquote blockquote {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 38px);
  font-style: italic;
  line-height: 1.35;
  color: var(--ivory);
}
.pullquote figcaption {
  margin-top: 1.2rem;
  font-family: var(--label);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ivory-dim);
}

/* Identifier: Awards, Milestones, Facts */
.facts { list-style: none; }
.facts li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
}
.facts li:last-child { border-bottom: 1px solid var(--hairline); }
.facts dt, .facts .facts__key {
  font-family: var(--label);
  font-size: 12px; letter-spacing: .18em;
  color: var(--gold);
  padding-top: .35rem;
}
.facts dd, .facts .facts__val { color: var(--ivory-soft); }

/* --------------------------------------------------------------------------
   6. "Basement"
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative; z-index: 2;
  padding: 6vh var(--pad-x) 5vh;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 1.8rem;
  flex-wrap: wrap;
}
.site-footer a {
  font-family: var(--label);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  position: relative;
}
.site-footer a::after {
  content: '';
  position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px; background: var(--gold);
  transition: width .4s var(--ease);
}
.site-footer a:hover::after { width: 100%; }

.site-footer__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-dim);
}
.site-footer__badge { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.site-footer__badge img { height: 22px; opacity: .45; }
.site-footer__badge span {
  font-family: var(--label);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory-dim);
}

/* --------------------------------------------------------------------------
   7. Main page
   -------------------------------------------------------------------------- */
.home { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; position: relative; }

.home::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 15% 80%, rgba(196,164,107,.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 55% 20%, rgba(196,164,107,.03) 0%, transparent 60%);
}

.home__main {
  grid-column: 1; grid-row: 1;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 12vh 6vw 6vh var(--pad-x);
}

.home__eyebrow {
  margin-bottom: 3rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease) .3s forwards;
}

.home__name { display: block; font-family: var(--display); font-weight: 300; line-height: .88; letter-spacing: -.01em; font-size: clamp(52px, 7.5vw, 130px); }
.home__name--first { font-style: italic; opacity: 0; transform: translateY(40px); animation: slideFade 1.1s var(--ease) .5s forwards; }
.home__name--last  { padding-left: .18em; opacity: 0; transform: translateY(40px); animation: slideFade 1.1s var(--ease) .7s forwards; }

.home__rule {
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 2.2rem 0 2.2rem .06em;
  animation: expandLine 1.2s var(--ease) 1s forwards;
}
@keyframes expandLine { to { width: clamp(80px, 15vw, 240px) } }

.home__descriptor {
  font-family: var(--label);
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: .3em;
  color: var(--ivory-dim);
  padding-left: .08em;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.1s forwards;
}

/* Block of the nearest concert */
.home__next {
  margin-top: 4vh;
  border-left: 1px solid var(--gold-dim);
  padding-left: 1.5rem;
  max-width: 460px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.3s forwards;
}
.home__next[hidden] { display: none; }
.home__next .eyebrow { display: block; margin-bottom: .7rem; }
.home__next-date {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  font-style: italic;
  color: var(--ivory);
}
.home__next-venue { color: var(--ivory-dim); font-size: 16px; line-height: 1.6; }
.home__next-link {
  display: inline-block; margin-top: .8rem;
  font-family: var(--label); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
}

/* Bottom line of the main page: menu + contacts */
.home__bottom {
  grid-column: 1; grid-row: 2;
  z-index: 2;
  padding: 4vh 6vw 4vh var(--pad-x);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 1.5s forwards;
}

.home__contacts { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.home__contacts {
  flex-wrap: nowrap;
  gap: 1.6rem;
}

.home__contacts a {
  position: relative;
  font-family: var(--label);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.home__contacts a::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px; background: var(--gold);
  transition: width .4s var(--ease);
}
.home__contacts a:hover::after { width: 100%; }
.home__contacts img { height: 22px; opacity: .45; margin-left: auto; }

/* Photo column */
.home__photo { grid-column: 2; grid-row: 1 / 3; position: relative; overflow: hidden; }
.home__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: 0;
  animation: fadeIn 1.4s ease .6s forwards;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 12%, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 12%, #000 30%);
}
.home__photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 12%, transparent 85%, var(--bg) 100%);
}
.home__photo-label {
  position: absolute; right: 2rem; top: 50%;
  transform: translateY(-50%) rotate(90deg); transform-origin: center;
  font-family: var(--label); font-size: 10px; letter-spacing: .4em;
  color: rgba(242,236,224,.2); white-space: nowrap; z-index: 2;
  opacity: 0; animation: fadeIn 1s ease 2s forwards;
}

.staff {
  position: fixed; bottom: 10vh; left: 0;
  width: 45%; display: flex; flex-direction: column; gap: 9px;
  padding-left: var(--pad-x);
  z-index: 1; pointer-events: none;
  opacity: 0; animation: fadeIn 2s ease 1.8s forwards;
}
.staff span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,236,224,.04) 20%, rgba(242,236,224,.04) 80%, transparent);
}

.watermark {
  position: fixed; right: 48%; bottom: -3vh;
  font-family: var(--display); font-size: clamp(100px, 16vw, 280px);
  font-weight: 300; color: rgba(196,164,107,.03);
  pointer-events: none; z-index: 1; line-height: 1; user-select: none;
}

/* --------------------------------------------------------------------------
   8. Animations
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes slideFade {
  from { opacity: 0; transform: translateY(40px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes fadeIn { to { opacity: 1 } }

/* --------------------------------------------------------------------------
   9. Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  :root { --pad-x: 7vw; }

  .site-nav__list { gap: 1.3rem; }
  .site-nav__link { font-size: 13px; letter-spacing: .12em; }
  .site-nav__lang { padding-left: 1.3rem; }
}

@media (max-width: 860px) {
  /* The menu moves to a full-screen panel */
  .nav-toggle { display: flex; }


    .site-header {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--bg);
    }


  .site-nav {
    position: fixed; inset: 0;
    z-index: 105;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s;
    margin-left: 0;
  }
  body.nav-open .site-nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  .site-nav__list { flex-direction: column; gap: 2rem; text-align: center; }
  .site-nav__link { font-size: 20px; letter-spacing: .2em; color: var(--ivory); }
  .site-nav__lang { padding-left: 0; border-left: 0; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }

  /* Home: photo above, text below */
  .home { grid-template-columns: 1fr; grid-template-rows: auto auto auto;
  
  }

  .home__photo { grid-column: 1; grid-row: 1; height: 78vw; min-height: 340px; max-height: 600px; }
  .home__photo img {
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 15%);
  }
  
  
  

  
  
  
  
  
  
  
  .home__photo::after { background: linear-gradient(to bottom, var(--bg) 0%, transparent 18%); }
  .home__photo-label { display: none; }
  .home__main   { grid-column: 1; grid-row: 2; padding: 4vw var(--pad-x); justify-content: flex-start; }
  .home__bottom { grid-column: 1; grid-row: 3; padding: 2vh var(--pad-x) 8vw; }
  .home__eyebrow { margin-bottom: 1.8rem; }
  .home__name { font-size: clamp(52px, 13vw, 96px); }
  .home__next { max-width: 100%; }




    /*.home__photo img {*/
    /*    object-position: center top;*/
    /*}*/





  .staff, .watermark { display: none; }

  .facts li { grid-template-columns: 1fr; gap: .35rem; }
  .facts dt, .facts .facts__key { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   10. Phone
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  body { font-size: 17px; }




  .section { padding: 6vh var(--pad-x); }

  .home__contacts { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .home__contacts img { margin-left: 0; margin-top: .6rem; }
  .home__photo { height: 85vw; min-height: 300px; }

  .site-footer { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .site-footer__dot { display: none; }
  .site-footer__badge { margin-left: 0; margin-top: .6rem; }

  .pullquote { margin: 2rem 0; }
}

@media (max-width: 390px) {
  .home__name { font-size: 42px; }
}

/* --------------------------------------------------------------------------
   11. Accessibility: Disable animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .home__rule { width: clamp(80px, 15vw, 240px); }
}