*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:#000;color:#777;font-family:"Arial Narrow","Liberation Sans Narrow","Nimbus Sans Narrow",Arial,sans-serif;font-stretch:condensed}a{color:inherit;text-decoration:none}.inner-page{background:#000 url("images/conductor_BG.jpg") no-repeat top left;min-height:100vh;position:relative}

/* Main navigation: real HTML, but positioned and proportioned like the original sprites. */
.main-nav{position:absolute;left:34px;top:342px;z-index:998;height:49px}.main-nav ul{display:flex;list-style:none;margin:0;padding:0;height:49px}.main-nav li{height:49px;flex:0 0 auto}.main-nav a{display:block;height:49px;padding-top:20px;font-size:16px;line-height:14px;font-weight:400;letter-spacing:0;color:#fff;white-space:nowrap;background:transparent;text-shadow:0 0 1px rgba(255,255,255,.16)}.main-nav a:hover,.main-nav .active a{color:#f00}
/* The original sprite navigation used a small white pointer that grows out of the
   white panel below the selected section. Recreate it with CSS so it remains
   crisp and correctly positioned at every resolution. */
.main-nav li{position:relative}
.main-nav li.active::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #fff;pointer-events:none;z-index:1002}
/* Original German sprite widths and optical left offsets. */
.nav-de .start{width:42px}.nav-de .start a{padding-left:1px}.nav-de .bio{width:40px}.nav-de .bio a{padding-left:10px}.nav-de .schedule{width:68px}.nav-de .schedule a{padding-left:3px}.nav-de .media{width:56px}.nav-de .media a{padding-left:3px}.nav-de .links{width:53px}.nav-de .links a{padding-left:2px}.nav-de .contact{width:58px}.nav-de .contact a{padding-left:1px}.nav-de .legal{width:89px}.nav-de .legal a{padding-left:6px}.nav-de .privacy{width:84px}.nav-de .privacy a{padding-left:1px}
/* Original English sprite widths and optical offsets. */
.nav-en .start{width:42px}.nav-en .start a{padding-left:1px}.nav-en .bio{width:40px}.nav-en .bio a{padding-left:10px}.nav-en .schedule{width:77px}.nav-en .schedule a{padding-left:8px}.nav-en .media{width:64px}.nav-en .media a{padding-left:8px}.nav-en .links{width:49px}.nav-en .links a{padding-left:10px}.nav-en .contact{width:69px}.nav-en .contact a{padding-left:11px}.nav-en .legal{width:88px}.nav-en .legal a{padding-left:3px}.nav-en .privacy{width:98px}.nav-en .privacy a{padding-left:1px}

/* White top cap under schedule years, matching the original 700px content panel. */
.page-schedule:before{content:"";position:absolute;left:0;top:391px;width:700px;height:53px;background:#fff;border-radius:0 20px 0 0;z-index:110}
.year-nav{position:absolute;left:34px;top:391px;z-index:998;height:49px;display:flex;align-items:flex-start;overflow:hidden;white-space:nowrap}.year-nav a{display:block;height:49px;padding-top:20px;font-size:15px;line-height:14px;font-weight:400;color:#c8c8c8;background:transparent}.year-nav a:hover{color:#777}.year-nav a.active{color:#222;font-weight:700}
/* Reproduce the deliberately compressed year spacing from the old CSS. */
.year-nav a:nth-child(1){width:42px;margin-right:-10px;padding-left:1px}.year-nav a:nth-child(2){width:53px;margin-right:-10px;padding-left:11px}.year-nav a:nth-child(3){width:49px;margin-right:-8px;padding-left:9px}.year-nav a:nth-child(4){width:49px;margin-right:-10px;padding-left:9px}.year-nav a:nth-child(5){width:53px;margin-right:-10px;padding-left:11px}.year-nav a:nth-child(6){width:53px;margin-right:-9px;padding-left:11px}.year-nav a:nth-child(7){width:53px;margin-right:-10px;padding-left:11px}.year-nav a:nth-child(8){width:53px;margin-right:-10px;padding-left:11px}.year-nav a:nth-child(9){width:53px;margin-right:-10px;padding-left:11px}.year-nav a:nth-child(10){width:48px;margin-right:-9px;padding-left:8px}.year-nav a:nth-child(11){width:48px;margin-right:-6px;padding-left:8px}.year-nav a:nth-child(12){width:48px;margin-right:-6px;padding-left:8px}.year-nav a:nth-child(13){width:48px;margin-right:-4px;padding-left:8px}.year-nav a:nth-child(14){width:48px;margin-right:-6px;padding-left:8px}.year-nav a:nth-child(15){width:48px;margin-right:-6px;padding-left:8px}

.language-switch{position:absolute;right:18px;top:14px;z-index:999;font-size:13px;line-height:14px;text-transform:none;letter-spacing:0;color:#fff;white-space:nowrap}.language-switch a{padding:0 3px}.language-switch a.active{font-weight:700}.language-switch a:hover{color:#f00}.language-switch span{color:#fff;opacity:1}
.signature{position:absolute;right:0;top:293px;width:276px;height:98px;overflow:hidden;z-index:900}.signature img{display:block;width:276px;height:196px}

/* General inner page content. */
.content{position:relative;top:391px;left:0;width:642px;min-height:700px;background:#fff;padding:34px 36px 80px;color:#777;font-size:15px;line-height:1.45;letter-spacing:0;border-radius:0 20px 0 0}.content.narrow{width:510px}.content h1{font-size:15px;font-weight:700;color:#333;margin:0 0 25px}.content h2{font-size:15px;font-weight:700;color:#333;margin:26px 0 8px}.content p{margin:0 0 17px}.content em{font-style:italic}

/* Schedule geometry taken from the original 642px schedule artwork. */
.page-schedule .content.schedule-content{top:424px;width:700px;min-height:3900px;padding:0;border-radius:0;color:#777;background:#fff}.schedule-text{width:642px;padding-top:66px;padding-bottom:80px;font-size:15px;line-height:1}.schedule-text h2{height:43px;margin:0;padding:0 0 0 34px;font-size:16px;line-height:20px;font-weight:700;color:#333}.schedule-text .event+h2{margin-top:20px}.event{display:grid;grid-template-columns:109px 252px 1fr;margin-left:34px;width:558px;height:22px;align-items:start;border-bottom:1px solid #eee;font-size:15px;line-height:20px;color:#777}.event time{font-variant-numeric:tabular-nums;color:#777}.event-work,.event-venue{min-width:0;white-space:nowrap;overflow:visible}.event-work.event-wide{grid-column:2 / 4}.continuation{margin-top:0}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 32px}.contact-grid h2{margin-top:0}.contact-grid a{text-decoration:underline;text-underline-offset:2px}.link-list{display:grid;gap:7px;margin-top:20px}.link-list a:before{content:"> ";color:#333}.media-stack{position:relative;top:391px;left:0;width:642px;background:#fff;border-radius:0 20px 0 0;overflow:hidden}.media-stack img{display:block;width:642px;height:auto}.site-footer{position:fixed;right:18px;bottom:10px;color:rgba(255,255,255,.45);font-size:11px;letter-spacing:0;z-index:10}

.home{overflow:hidden;background:#000}.slideshow{position:fixed;inset:0;z-index:0;background:#000}.slide{position:absolute;inset:0;background-position:center center;background-size:cover;opacity:0;transition:opacity 1.2s ease}.slide.active{opacity:1}.home .main-nav{top:auto;bottom:0;left:34px}.home .signature{top:auto;bottom:0;height:98px}.home .language-switch{top:14px}.home .site-footer{display:none}

@media(max-width:850px){
  /* On small screens the navigation is part of the page flow rather than being
     tied to the viewport. This keeps it permanently attached to the white panel
     below it, even when the menu wraps to two rows. */
  .inner-page{background-position:25% 0;background-size:auto 285px;padding-top:245px;min-height:100vh}
  .main-nav{position:relative;left:0;top:auto;height:auto;min-height:40px;background:rgba(0,0,0,.76);padding:0 10px;z-index:998}
  .main-nav ul{height:auto;min-height:40px;flex-wrap:wrap;align-items:flex-end}
  .main-nav li{width:auto!important;height:40px}
  .main-nav a{height:40px;padding:13px 8px 0!important;font-size:15px;line-height:15px}
  .main-nav li.active::after{bottom:0;border-left-width:5px;border-right-width:5px;border-bottom-width:6px}
  .signature{position:absolute;top:196px;transform:scale(.62);transform-origin:right top}
  .language-switch{position:absolute;top:12px}

  /* Schedule pages insert their year row between the main menu and content.
     Pages without a subnavigation go straight from menu to content. */
  .page-schedule:before{display:none}
  .year-nav{position:relative;left:0;top:auto;width:100%;height:auto;min-height:40px;flex-wrap:wrap;background:#fff;padding:0 8px;overflow:visible}
  .year-nav a{width:auto!important;height:40px;margin:0!important;padding:13px 7px 0!important;font-size:14px;line-height:14px}
  .content,.content.narrow,.media-stack,.page-schedule .content.schedule-content{position:relative;left:0;top:0;width:min(100%,700px);min-height:0;margin:0}
  .content{padding:28px 24px 70px;border-radius:0 20px 0 0}
  .content.schedule-content{padding:0;border-radius:0;background:#fff}
  .schedule-text{width:100%;padding:28px 16px 70px}
  .schedule-text h2{padding-left:0}
  .event{margin-left:0;width:100%;grid-template-columns:40px minmax(130px,1fr) minmax(145px,1fr);height:auto;min-height:22px}
  .event-work,.event-venue{white-space:normal}
  .contact-grid{grid-template-columns:1fr}
  .media-stack{border-radius:0 20px 0 0}
  .media-stack img{width:100%}
  .site-footer{position:static;background:#fff;color:#aaa;padding:15px 24px}

  .home{padding-top:0}
  .home .main-nav{position:absolute;left:0;top:auto;bottom:0;padding:0 8px}
  .home .main-nav ul{flex-wrap:wrap}
  .home .signature{top:auto;bottom:0;transform:scale(.75)}
}
.cancelled{color:#f00;font-style:italic}
.links-copy p{max-width:450px;line-height:1.5;margin-bottom:22px}.contact-copy{padding-top:12px}.contact-copy .contact-grid{gap:30px 34px}.contact-copy h2{font-size:18px;letter-spacing:.03em;border-bottom:1px solid #ddd;padding-bottom:5px;margin-bottom:30px}.contact-copy .brand{font-size:28px;line-height:1;margin-bottom:25px;color:#111}.contact-copy .brand.meca{font-size:42px;font-family:Georgia,serif;font-weight:700}.contact-copy strong{color:#222;font-size:17px}.contact-copy p{line-height:1.5}
.schedule-note{margin:38px 0 0 34px;font-size:13px;line-height:18px;color:#999;font-style:italic}
@media(max-width:850px){.schedule-note{margin:30px 0 0}}

/* v6: typography inside white content panels. Navigation deliberately unchanged. */
.content,
.schedule-text,
.links-copy,
.contact-copy {
  font-size:14px;
  font-weight:400;
  color:#666666;
}
.content p,
.content li,
.content div,
.content span,
.schedule-text .event,
.schedule-text time,
.schedule-text .event-work,
.schedule-text .event-venue {
  font-size:14px;
  color:#666666;
}
.content h1,
.content h2,
.schedule-text h2 {
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  color:#000000;
}
.content h1 { margin:0 0 25px; }
.content h2 { margin:26px 0 8px; }
.content a { color:#333333; }
.content a:hover { color:#000000; }
.content strong { font-size:14px; color:#000000; font-weight:700; }

/* Contact page: use the supplied identity artwork rather than recreated text logos. */
.contact-copy { padding-top:34px; }
.contact-copy .contact-grid { gap:30px 34px; align-items:start; }
.contact-copy h2 {
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  color:#000000;
  letter-spacing:0;
  border-bottom:1px solid #ddd;
  padding-bottom:7px;
  margin:0 0 24px;
}
.contact-logo { height:90px; display:flex; align-items:flex-start; margin:0 0 18px; }
.contact-logo img { display:block; width:auto; max-width:100%; height:auto; }
.contact-logo-img img { width:210px; }
.contact-logo-meca img { width:190px; }
.contact-copy p { font-size:14px; line-height:1.5; color:#666666; margin:0; }
.contact-copy .brand { display:none; }

/* Keep the schedule visual hierarchy while respecting the 14px content rule. */
.schedule-text h2 { height:41px; line-height:20px; }
.event { font-size:14px; line-height:20px; color:#666666; }
.year-nav a { /* not content: preserve navigation styling */ }

@media(max-width:850px){
  .content,.schedule-text,.links-copy,.contact-copy,
  .content p,.content li,.content div,.content span,
  .content h1,.content h2,.schedule-text h2,.event {
    font-size:14px;
  }
  .contact-logo { height:auto; min-height:70px; }
  .contact-logo-img img { width:min(210px,100%); }
  .contact-logo-meca img { width:min(190px,100%); }
}


/* v7: archive refinements and mobile horizontal navigation. */
/* Every month's first concert gets the same rule as the subsequent rows. */
.schedule-text h2 + .event {
  border-top:1px solid #eee;
}
/* Give concert rows a little more vertical air while preserving the 14px type. */
.event {
  height:auto;
  min-height:0;
  padding-top:4px;
  padding-bottom:4px;
  align-items:start;
}

@media(max-width:850px){
  /* Keep both navigation strips on a single swipeable row. */
  .main-nav {
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .main-nav::-webkit-scrollbar,
  .year-nav::-webkit-scrollbar { display:none; }
  .main-nav ul {
    flex-wrap:nowrap;
    width:max-content;
    min-width:max-content;
  }
  .main-nav li {
    flex:0 0 auto;
  }
  .year-nav {
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .year-nav a {
    flex:0 0 auto;
  }
  .home .main-nav ul { flex-wrap:nowrap; }
}

/* v8: unified 640px content/footer system and natural text spacing. */
html, body, body *, body *::before, body *::after {
  letter-spacing: normal !important;
}

/* Site notice and privacy now live in the footer, so the main menu contains only
   the primary six sections. Keep the original optical widths for those items. */

/* All inner white panels share one total width and padding model. */
.content,
.content.narrow,
.media-stack,
.page-schedule .content.schedule-content {
  width:640px;
  max-width:640px;
  min-height:0;
  box-sizing:border-box;
}

/* Normal text pages: 36px top/left/right and 100px below the final content. */
.content,
.content.narrow {
  padding:36px 36px 100px;
}

/* Use margins rather than relative top offsets so the footer follows content
   naturally and never overlaps long or short pages. */
.content,
.media-stack {
  top:auto;
  margin-top:391px;
}
.page-schedule .content.schedule-content {
  top:auto;
  margin-top:424px;
  padding:0;
  background:#fff;
}

/* Schedule content sits inside the same 640px white panel with the same 36px
   horizontal inset and 100px bottom breathing room. */
.schedule-text {
  width:100%;
  padding:36px 36px 100px;
  box-sizing:border-box;
}
.schedule-text h2 {
  padding-left:0;
}
.event {
  margin-left:0;
  width:100%;
  grid-template-columns:90px 252px 1fr;
}
.schedule-note {
  margin-left:0;
}

/* The old schedule cap was wider than the content panel. Keep it aligned. */
.page-schedule:before {
  width:640px;
}

/* Image/media pages use the same 640px white panel and 36px inset. */
.media-stack {
  padding:36px 36px 100px;
  overflow:hidden;
}
.media-stack img {
  width:100%;
  height:auto;
}

/* Matching legal footer under every inner white panel. */
.site-footer {
  position:relative;
  right:auto;
  bottom:auto;
  z-index:10;
  width:640px;
  max-width:640px;
  box-sizing:border-box;
  margin:0;
  padding:0 36px 36px;
  background:#fff;
  color:#666666;
  font-size:14px;
}
.site-footer::before {
  content:"";
  display:block;
  border-top:1px solid #f0f0f0;
  margin:0 0 18px;
}
.footer-row {
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  font-size:14px;
  line-height:1.4;
}
.site-footer a { color:#333333; }
.site-footer a:hover,
.site-footer a.active { color:#000000; }
.footer-sep { color:#bdbdbd; }

/* The homepage has no white content panel; keep its existing full-image design.
   Legal links remain available in a compact unobtrusive footer. */
.home .site-footer {
  display:block;
  position:fixed;
  left:34px;
  right:auto;
  bottom:46px;
  width:auto;
  max-width:none;
  padding:0;
  background:transparent;
  color:rgba(255,255,255,.65);
  font-size:12px;
  z-index:999;
}
.home .site-footer::before { display:none; }
.home .site-footer a { color:rgba(255,255,255,.78); }
.home .site-footer a:hover { color:#fff; }
.home .footer-sep { color:rgba(255,255,255,.38); }
.home .footer-row { font-size:12px; }

@media(max-width:850px){
  .content,
  .content.narrow,
  .media-stack,
  .page-schedule .content.schedule-content,
  .site-footer {
    width:100%;
    max-width:640px;
  }
  .content,
  .content.narrow {
    margin-top:0;
    padding:36px 36px 100px;
  }
  .page-schedule .content.schedule-content,
  .media-stack {
    margin-top:0;
  }
  .schedule-text,
  .media-stack {
    padding:36px 36px 100px;
  }
  .site-footer {
    margin:0;
    padding:0 36px 36px;
  }
  .footer-row {
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .footer-row::-webkit-scrollbar { display:none; }
  .home .site-footer {
    width:auto;
    left:10px;
    bottom:42px;
  }
}

/* v9: lock navigation/content into one document-flow stack.
   This prevents the white panel from ever passing underneath the navigation. */
@media(min-width:851px){
  .inner-page{
    padding-top:342px;
  }
  .inner-page .main-nav{
    position:relative;
    left:34px;
    top:auto;
    width:max-content;
    height:49px;
    margin:0;
  }
  .inner-page .year-nav{
    position:relative;
    left:0;
    top:auto;
    width:640px;
    height:49px;
    margin:0;
    padding-left:34px;
    background:#fff;
    border-radius:0 20px 0 0;
    overflow:hidden;
  }
  .page-schedule::before{
    display:none;
  }
  .content,
  .content.narrow,
  .media-stack,
  .page-schedule .content.schedule-content{
    position:relative;
    left:0;
    top:auto;
    margin-top:0;
    min-height:100vh;
  }
  /* The year row itself is the top of the white schedule panel. */
  .page-schedule .content.schedule-content{
    border-radius:0;
  }
}

@media(max-width:850px){
  .inner-page{
    padding-top:245px;
  }
  .inner-page .main-nav,
  .inner-page .year-nav,
  .content,
  .content.narrow,
  .media-stack,
  .page-schedule .content.schedule-content{
    position:relative;
    top:auto;
    margin-top:0;
  }
  .content,
  .content.narrow,
  .media-stack,
  .page-schedule .content.schedule-content{
    min-height:100vh;
  }
  .year-nav{
    background:#fff;
  }
}

/* v10: mobile photographic cover + truly viewport-safe schedules. */
@media(max-width:850px){
  /* Give inner pages a real photographic cover region before navigation/content.
     Using a pseudo-element keeps the crop independent from the page height. */
  .inner-page{
    background:#000;
    padding-top:50vh;
    overflow-x:hidden;
  }
  .inner-page::before{
    content:"";
    display:block !important;
    position:absolute;
    left:0;
    top:0;
    width:100vw;
    height:50vh;
    background:url("images/conductor_BG.jpg") center center / cover no-repeat;
    border-radius:0;
    z-index:0;
    pointer-events:none;
  }
  .inner-page .main-nav,
  .inner-page .year-nav,
  .inner-page .content,
  .inner-page .media-stack,
  .inner-page .site-footer{
    z-index:2;
  }
  .inner-page .language-switch{z-index:3}
  .inner-page .signature{
    z-index:2;
    top:calc(50vh - 72px);
    right:0;
    transform:scale(.62);
    transform-origin:right top;
  }

  /* Every mobile white panel is exactly viewport width. */
  .content,
  .content.narrow,
  .media-stack,
  .page-schedule .content.schedule-content,
  .site-footer,
  .inner-page .year-nav{
    width:100vw;
    max-width:100vw;
  }

  /* Schedule table must never create horizontal page overflow. */
  .page-schedule .content.schedule-content{
    overflow:hidden;
  }
  .schedule-text{
    width:100%;
    max-width:100vw;
    padding:36px 20px 100px;
    overflow:hidden;
  }
  .event{
    width:100%;
    max-width:100%;
    grid-template-columns:34px minmax(0,.95fr) minmax(0,1.25fr);
    column-gap:8px;
  }
  .event time,
  .event-work,
  .event-venue{
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .schedule-note{max-width:100%;}
}

/* Subtle Ken Burns movement on the homepage slideshow. */
.home .slide{
  transform:scale(1.02);
  transform-origin:center center;
  will-change:transform,opacity;
}
.home .slide.active{
  animation:kenBurns 8.2s ease-out forwards;
}
@keyframes kenBurns{
  0%{transform:scale(1.02) translate3d(0,0,0)}
  100%{transform:scale(1.09) translate3d(-.6%,-.4%,0)}
}
@media(max-width:850px){
  .home .slide{
    background-position:center center;
    background-size:cover;
  }
}
@media(prefers-reduced-motion:reduce){
  .home .slide.active{animation:none;transform:scale(1.02)}
}

/* v11: consistent content-grid spacing and rebuilt media captions. */
:root{--panel-pad:36px}

/* White-panel descendants share one inset. The panel remains 640px total width. */
.content,
.content.narrow,
.schedule-text,
.media-stack{
  padding-left:var(--panel-pad);
  padding-right:var(--panel-pad);
}
.content,
.content.narrow,
.schedule-text,
.media-stack{
  padding-top:var(--panel-pad);
}
.site-footer{
  padding-left:var(--panel-pad);
  padding-right:var(--panel-pad);
}

/* Month name -> first rule: 12px, no oversized fixed heading block. */
.schedule-text h2{
  height:auto;
  min-height:0;
  margin:0;
  padding:0 0 12px;
  line-height:20px;
}
.schedule-text .event + h2{
  margin-top:28px;
}
.schedule-text h2 + .event{
  border-top:1px solid #eee;
}

/* Original image strips rebuilt as real photo + real text, 50/50 inside the panel. */
.media-stack.media-grid{
  display:block;
  padding-bottom:100px;
}
.media-item{
  display:grid;
  grid-template-columns:50% 50%;
  align-items:center;
  margin:0 0 12px;
  padding:0;
}
.media-item:last-child{margin-bottom:0}
.media-photo{
  width:100%;
  min-width:0;
}
.media-photo img{
  display:block;
  width:100%;
  height:auto;
}
.media-item figcaption{
  box-sizing:border-box;
  margin:0;
  padding:0 0 0 24px;
  color:#666666;
  font-size:14px;
  line-height:1.45;
  font-weight:400;
}

/* Tablet keeps the full 36px inset. */
@media (max-width:850px){
  .content,
  .content.narrow,
  .schedule-text,
  .media-stack{
    padding-left:36px;
    padding-right:36px;
  }
  .schedule-text{padding-top:36px}
  .site-footer{padding-left:36px;padding-right:36px}
}

/* Phones use the requested 24px inset everywhere. */
@media (max-width:600px){
  :root{--panel-pad:24px}
  .content,
  .content.narrow,
  .schedule-text,
  .media-stack{
    padding-left:24px;
    padding-right:24px;
  }
  .content,
  .content.narrow,
  .schedule-text,
  .media-stack{
    padding-top:24px;
  }
  .site-footer{padding-left:24px;padding-right:24px}
  .media-item figcaption{padding-left:16px}
}

/* v12: navigation rhythm, borderless media crops, mobile corners and 20% image zoom. */

/* Main and archive navigation use a simple, repeatable 16px rhythm. */
.inner-page .main-nav{
  width:640px;
  max-width:640px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.inner-page .main-nav::-webkit-scrollbar,
.inner-page .year-nav::-webkit-scrollbar{display:none}
.inner-page .main-nav ul{
  width:max-content;
  gap:16px;
  flex-wrap:nowrap;
}
.inner-page .main-nav li{
  width:auto !important;
  flex:0 0 auto;
}
.inner-page .main-nav a{
  padding-left:0 !important;
  padding-right:0 !important;
}
.inner-page .year-nav{
  width:640px;
  max-width:640px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  gap:16px;
}
.inner-page .year-nav a{
  width:auto !important;
  min-width:max-content;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  flex:0 0 auto;
}

/* Captions grow upward from the lower edge of the photograph. */
.media-item{
  align-items:end;
}
.media-photo{
  overflow:hidden;
  align-self:stretch;
}
.media-photo img{
  display:block;
  width:100%;
  height:auto;
  border:0;
}
.media-item figcaption{
  align-self:end;
  padding-top:0;
  padding-bottom:0;
}

/* Zoom the photographic header image by about 20% using CSS only. */
.inner-page{
  background-size:120% auto;
  background-position:center top;
}

@media(max-width:850px){
  .inner-page .main-nav,
  .inner-page .year-nav{
    width:100vw;
    max-width:100vw;
  }
  .inner-page .main-nav{
    padding-left:24px;
    padding-right:24px;
  }
  .inner-page .year-nav{
    padding-left:24px;
    padding-right:24px;
    gap:16px;
  }
  .inner-page .main-nav ul{gap:16px}

  /* On mobile the white panel starts square; the rounded cap is desktop-only. */
  .content,
  .content.narrow,
  .media-stack,
  .page-schedule .content.schedule-content,
  .inner-page .year-nav{
    border-radius:0 !important;
  }

  /* Same 20% close-up for the 50vh mobile cover, without changing its container. */
  .inner-page::before{
    background-position:center center;
    background-size:auto 120%;
  }
}

/* v13: final content/nav polish. */
/* Media captions: closer to the image on desktop; smaller on phones. */
.media-item figcaption{padding-left:12px}

/* Contact logos use the supplied artwork at one consistent optical height. */
.contact-logo{height:40px;min-height:40px;margin-bottom:18px;align-items:flex-start}
.contact-logo img,
.contact-logo-img img,
.contact-logo-meca img{height:40px;width:auto;max-width:100%;object-fit:contain}

/* Legal/privacy subheads are part of the content hierarchy, not grey body copy. */
.content .legal-subhead{font-size:14px;line-height:1.4;font-weight:700;color:#000}

/* Legal/privacy stay in the desktop nav; footer remains available everywhere. */
@media(max-width:850px){
  .main-nav li.legal,
  .main-nav li.privacy{display:none}

  /* Mobile signature/logo sits cleanly in the upper-left of the photographic cover. */
  .inner-page .signature,
  .home .signature{
    left:16px;
    right:auto;
    top:16px;
    bottom:auto;
    transform:scale(.62);
    transform-origin:left top;
  }
}

@media(max-width:600px){
  .media-item figcaption{font-size:10px;line-height:1.4;padding-left:12px}
}

/* v14: navigation sizing, year tone, schedule note spacing, mobile signature. */
/* Use one navigation type size and one 16px rhythm everywhere, including homepage. */
.main-nav ul{
  gap:16px;
  flex-wrap:nowrap;
  width:max-content;
}
.main-nav li{
  width:auto !important;
  flex:0 0 auto;
}
.main-nav a{
  font-size:15px;
  padding-left:0 !important;
  padding-right:0 !important;
}
.year-nav{
  gap:16px;
}
.year-nav a{
  font-size:15px;
  color:#BEBEBE;
  width:auto !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.year-nav a:hover{color:#777}
.year-nav a.active{color:#222;font-weight:700}

/* Keep the active pointer optically centered under the actual nav label. */
.main-nav li.active::after{
  left:50%;
  transform:translateX(-50%);
}

/* Status/date note follows the schedule with a precise 20px top inset. */
.schedule-note{
  margin:0;
  padding-top:20px;
}

@media(max-width:850px){
  /* The signature PNG contains transparent breathing room. Scale it up by 150%
     versus v13 and pull that built-in whitespace outside the viewport. */
  .inner-page .signature,
  .home .signature{
    left:-40px;
    right:auto;
    top:-40px;
    bottom:auto;
    transform:scale(.93);
    transform-origin:left top;
  }

  .main-nav a,
  .year-nav a{
    font-size:15px;
  }

  .main-nav ul,
  .inner-page .main-nav ul,
  .home .main-nav ul,
  .year-nav{
    gap:16px;
  }
}

/* v15: final positioning calibration. */
@media (min-width:851px){
  /* Inner-page photography stays pinned to the original canvas geometry. */
  .inner-page{
    background-position:0 0 !important;
    background-size:1984px auto !important;
  }

  /* Homepage navigation shares the same 34px left datum as inner pages. */
  .home .main-nav{
    left:34px !important;
  }
}

@media (max-width:850px){
  /* Shift the transparent signature artwork further into its intended optical position. */
  .inner-page .signature,
  .home .signature{
    left:-60px;
    top:-30px;
  }

  /* Homepage navigation uses the same mobile left inset as all inner-page navigation. */
  .home .main-nav{
    left:0 !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }
}

/* v16: mobile optical positioning refinements. */
@media (max-width:850px){
  /* Move the signature 40px right from v15 while keeping its vertical placement. */
  .inner-page .signature,
  .home .signature{
    left:-20px;
    top:-30px;
  }

  /* Lower the language switch by 10px on mobile only. */
  .inner-page .language-switch{
    top:22px;
  }
  .home .language-switch{
    top:24px;
  }
}

/* v17: biography paragraph rhythm — one clean blank line only */
body.page-bio .content p,
.content.bio-copy p { margin:0 0 14px; }
body.page-bio .content p:last-child,
.content.bio-copy p:last-child { margin-bottom:0; }

/* v18: mobile top readability gradient, logo nudge, and year-scroll affordance. */
.year-nav-wrap{
  position:relative;
  width:640px;
  max-width:640px;
  height:49px;
  margin:0;
  z-index:998;
}
.year-nav-wrap .year-nav{
  width:100%;
  max-width:100%;
}
.year-scroll-cue{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:100px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  box-sizing:border-box;
  padding-right:12px;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.92) 58%,#fff 78%);
  color:#333;
  font-size:18px;
  line-height:1;
  pointer-events:none;
  z-index:6;
  transition:opacity .2s ease;
}
.year-nav-wrap.at-end .year-scroll-cue{opacity:0}

@media(max-width:850px){
  /* 60px top readability veil behind the signature and language switch. */
  .inner-page::after,
  .home::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100vw;
    height:60px;
    background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 35%,rgba(0,0,0,0) 100%);
    z-index:1;
    pointer-events:none;
  }
  .inner-page .signature,
  .home .signature{
    left:-28px;
  }
  .inner-page .language-switch,
  .home .language-switch{
    z-index:4;
  }
  .inner-page .signature,
  .home .signature{
    z-index:4;
  }
  .year-nav-wrap{
    width:100vw;
    max-width:100vw;
    height:auto;
    min-height:40px;
  }
  .year-nav-wrap .year-nav{
    width:100vw;
    max-width:100vw;
  }
  .year-scroll-cue{
    min-height:40px;
  }
}

/* v19: year-scroll cue alignment and trailing breathing room. */
.year-scroll-cue{
  color:#BEBEBE;
  transform:translateY(-3px);
}

/* Keep the final archive year away from the right edge/fade on desktop. */
@media (min-width:851px){
  .year-nav::after{
    content:"";
    display:block;
    flex:0 0 24px;
    width:24px;
    height:1px;
  }
}

/* v20: keep the archive fade stationary, nudge only its arrow, and preserve the desktop corner. */
.year-scroll-cue{
  transform:none;
  font-size:0;
}
.year-scroll-cue::after{
  content:"\2192";
  display:block;
  color:#BEBEBE;
  font-size:18px;
  line-height:1;
  transform:translateY(-3px);
}

@media (min-width:851px){
  /* Leave the rounded top-right cap exposed; the cue still signals the overflowing years. */
  .year-scroll-cue{
    right:20px;
    width:100px;
    padding-right:0;
  }
}

/* v21: keep the year-scroll affordance visible on desktop. */
@media (min-width:851px){
  .year-nav-wrap .year-scroll-cue,
  .year-nav-wrap.at-end .year-scroll-cue{
    display:flex;
    opacity:1;
    visibility:visible;
  }
}