/* hard fixes */
#currentSection .current-title {
  font-size:clamp(38px,5vw,52px)!important;
  line-height:1.15!important;
  margin:10px 0 25px!important
}
.viewer .arrow {
  opacity:0!important;
  visibility:hidden;
  pointer-events:none!important;
  transition:opacity .18s ease,visibility .18s ease!important
}
.viewer:hover .arrow,.viewer.controls-visible .arrow,.viewer .arrow:focus-visible {
  opacity:1!important;
  visibility:visible;
  pointer-events:auto!important
}
.viewer img,.lightbox img {
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none
}
.contact-share-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 58px;
  gap:10px
}
.contact-share-row .contact-web {
  min-width:0
}
.share-button {
  border:0;
  border-radius:18px;
  background:#ffffff10;
  color:#d6b47a;
  display:grid;
  place-items:center;
  cursor:pointer
}
.share-button svg {
  display:block;
  width:22px;
  height:22px;
  fill:currentColor
}
.share-button:hover {
  background:#ffffff18;
  transform:translateY(-2px)
}
@media(max-width:800px) {
  header {
    height:82px!important
  }
  header .wrap {
    position:relative!important
  }
  .logo {
    width:auto!important;
    max-width:min(72vw,340px)!important;
    max-height:58px!important
  }
  .menu-toggle {
    display:block!important;
    flex:0 0 44px
  }
  main {
    padding-top:82px!important
  }
  header nav {
    position:absolute!important;
    display:none!important;
    top:82px;
    left:-14px;
    right:-14px;
    z-index:50;
    flex-direction:column!important;
    gap:0!important;
    padding:8px 18px 16px;
    background:#fffffff8;
    border-bottom:1px solid #0001;
    box-shadow:0 12px 22px #0002
  }
  header nav.open {
    display:flex!important
  }
  header nav a {
    display:block;
    padding:12px 4px;
    border-bottom:1px solid #31463812
  }
}
@media(hover:none) {
  .viewer .arrow {
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important
  }
  .viewer.controls-visible .arrow {
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important
  }
}
/* Caption swipes together with its image */
.viewer-track {
  align-items:stretch
}
.viewer-slide {
  position:relative;
  flex:0 0 50%;
  width:50%;
  height:100%;
  overflow:hidden
}
.viewer-slide .viewer-img {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  transition:none!important
}
.viewer-slide .slide-caption {
  z-index:2
}
/* Aktuell Bilddarstellung: kein Bildrahmen / kein Platzhalter */
.noticepic {
  display:block!important;
  background:none!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important
}
.noticepic img {
  display:block!important;
  width:100%!important;
  height:auto!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  border-radius:16px!important
}
.noticebox.no-image {
  display:block!important;
  grid-template-columns:none!important
}
.noticebox.no-image>div {
  width:100%!important;
  max-width:none!important
}
.noticebox.no-image .noticepic {
  display:none!important
}
@media(max-width:639px) {
  .noticebox {
    padding:18px!important;
    gap:16px!important
  }
  .noticebox.no-image {
    padding:18px!important
  }
  .noticepic {
    background:none!important;
    border:0!important;
    padding:0!important
  }
  .noticepic img {
    border-radius:14px!important
  }
}
/* Mobile Hero: Haupttitel darf nicht abgeschnitten werden */
@media(max-width:639px) {
  .hero {
    overflow:hidden
  }
  .hero-copy {
    max-width:100%!important;
    padding-right:12px!important
  }
  .hero h1 {
    font-size:clamp(43px,13.2vw,56px)!important;
    line-height:.92!important;
    letter-spacing:-.025em!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important
  }
  .hero h1 span {
    font-size:clamp(31px,9vw,42px)!important;
    line-height:1!important
  }
}
@media(max-width:410px) {
  .hero h1 {
    font-size:clamp(40px,12.5vw,51px)!important
  }
}

/* Navigation and section spacing */
html {
  scroll-padding-top: 15px;
}
#aktuellAnchor,
#aboutAnchor,
#photosAnchor,
#musicAnchor,
#contactAnchor {
  scroll-margin-top: 107px;
}
#band.section,
#fotos.section,
#kontakt.section {
  padding-top: 30px;
  padding-bottom: 30px;
}
@media (max-width: 639px) {
  html {
    scroll-padding-top: 12px;
  }
  #aktuellAnchor,
  #aboutAnchor,
  #photosAnchor,
  #contactAnchor {
    scroll-margin-top: 94px;
  }
  #band.section,
  #fotos.section,
  #kontakt.section {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* Music previews */
.music-section{background:#f1eadc}.music-list{display:grid;gap:14px;max-width:860px;margin-top:24px}.music-card{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,420px);gap:24px;align-items:center;padding:18px 22px;background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(36,49,40,.08)}.music-card h3{margin:0;color:var(--green);font-family:Georgia,serif;font-size:22px}.music-card p{margin:5px 0 0;color:#667}.music-card audio{width:100%}@media(max-width:639px){.music-card{grid-template-columns:1fr;gap:12px;padding:16px}.music-card audio{width:100%}}

/* Audio samples inside Des san mia */
.band-music{margin-top:34px;padding-top:28px;border-top:1px solid rgba(49,70,56,.16)}.band-music>.eyebrow{margin-bottom:6px}.band-music>h2{margin:0 0 20px;color:var(--green);font-family:Georgia,serif;font-size:clamp(30px,4vw,44px)}.band-music .music-list{margin-top:0;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}.band-music .music-card{grid-template-columns:1fr;gap:12px;padding:16px 18px}.band-music .music-card h3{font-size:20px}.band-music .music-card audio{width:100%}@media(max-width:760px){.band-music{margin-top:26px;padding-top:22px}.band-music .music-list{grid-template-columns:1fr}}

/* Final audio subsection cosmetics */
.band-music{border-top:0!important;padding-top:0!important}.band-music>h2{margin-top:0!important}

/* 2026-11-06 final About layout */
#band>.wrap>.section-title{margin:10px 0 32px}
#band .about-main-final{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,58px);align-items:center}
#band .about-main-final .drawing{margin:0}
#band .about-performance-final{font-size:15px;line-height:1.7}
#band .about-performance-final p{margin:0 0 16px}
#band .about-repertoire-final{width:100%;max-width:none;margin:24px 0 32px;line-height:1.7}
#band .member-grid{margin-top:0}
#band .about-origin-final{margin:clamp(36px,5vw,52px) 0 0}
#band .about-origin-final h3{margin:0 0 8px;color:var(--green);font-family:Georgia,serif;font-size:clamp(28px,3.7vw,40px)}
#band .about-origin-final p{margin:0;line-height:1.7}
#band .press-clipping-final{box-sizing:border-box;width:min(780px,calc(100% - 30px));margin:24px auto 34px;padding:23px 34px;color:#302a22;background:linear-gradient(96deg,#eee4cf 0%,#f8f1e3 50%,#eadfc8 100%);border:1px solid rgba(75,57,35,.25);box-shadow:0 10px 22px rgba(50,38,23,.13);transform:rotate(-.6deg);font-family:Georgia,"Times New Roman",serif;font-size:12px;line-height:1.5;font-weight:400}
#band .press-clipping-final p{margin:0 0 .7em;font-weight:400;text-align:justify;hyphens:auto}
#band .press-clipping-final p:last-child{margin-bottom:0}
#band .press-masthead-final{text-align:center}
#band .press-masthead-final>span{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
#band .press-masthead-final h3{margin:0;color:#29251f;font-family:Georgia,"Times New Roman",serif;font-size:31px;font-weight:400;line-height:1.05}
#band .press-masthead-final small{display:block;margin-top:5px;font:400 8px/1.2 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
#band .press-rule-final{height:4px;margin:10px 0 13px;border-top:3px double #50483d;border-bottom:1px solid #50483d}
@media(max-width:800px){#band .about-main-final{grid-template-columns:1fr;gap:22px}#band .about-performance-final{font-size:16px}#band .press-clipping-final{width:calc(100% - 10px);padding:21px 18px;font-size:12px;transform:rotate(-.2deg)}}

/* Zeitungsausschnitt wie klassische Lokalzeitung */
#band .press-clipping-final{
  position:relative;
  width:min(820px,calc(100% - 26px));
  margin:30px auto 42px;
  padding:30px 34px 34px;
  overflow:hidden;
  color:#393733;
  background:
    repeating-linear-gradient(0deg,rgba(45,42,37,.018) 0,rgba(45,42,37,.018) 1px,transparent 1px,transparent 3px),
    radial-gradient(circle at 18% 27%,rgba(55,52,47,.04) 0 1px,transparent 1.5px) 0 0/11px 13px,
    #e9e7e1;
  border:0;
  border-radius:1px;
  box-shadow:0 8px 19px rgba(40,36,30,.16);
  transform:rotate(-.55deg);
  font-family:Georgia,"Times New Roman",serif;
  font-size:12px;
  line-height:1.42;
}
#band .press-clipping-final::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:7px;
  background:linear-gradient(180deg,#d4d1ca 0,#efede7 65%,transparent 100%);
  clip-path:polygon(0 35%,3% 12%,7% 38%,11% 8%,16% 30%,21% 5%,26% 34%,31% 10%,37% 32%,42% 5%,48% 35%,54% 9%,60% 31%,66% 4%,72% 34%,79% 8%,85% 32%,91% 5%,96% 29%,100% 12%,100% 100%,0 100%);
}
#band .press-masthead-final{
  padding:7px 0 9px;
  text-align:left;
  border-bottom:1px solid #77736c;
}
#band .press-masthead-final>span,
#band .press-masthead-final small{display:none}
#band .press-masthead-final h3{
  margin:0;
  color:#282724;
  font-family:"Times New Roman",Georgia,serif;
  font-size:clamp(34px,5vw,50px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.045em;
}
#band .press-rule-final{display:none}
#band .press-clipping-final::after{
  content:"Die Heubodenmusi geigt auf";
  display:block;
  margin:17px 0 10px;
  padding-bottom:5px;
  border-bottom:1px solid rgba(65,62,57,.35);
  color:#44413c;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(22px,3vw,30px);
  font-weight:700;
  line-height:1.05;
}
#band .press-clipping-final p{
  margin:0 0 .75em;
  color:#403e39;
  font-weight:400!important;
  text-align:justify;
  hyphens:auto;
  column-count:3;
  column-gap:20px;
  column-rule:1px solid rgba(60,57,52,.12);
}
#band .press-clipping-final p:last-child{margin-bottom:0}
@media(max-width:800px){
  #band .press-clipping-final{width:calc(100% - 8px);padding:26px 21px 28px;font-size:12px;transform:rotate(-.2deg)}
  #band .press-masthead-final h3{font-size:clamp(31px,8vw,43px)}
  #band .press-clipping-final::after{font-size:24px}
  #band .press-clipping-final p{column-count:2;column-gap:17px}
}
@media(max-width:520px){
  #band .press-clipping-final p{column-count:1;column-rule:0}
}

/* Gainfarner Morgenpost als fertiges Bild */
#band .press-clipping-final {
  width: min(980px, 100%);
  aspect-ratio: 3 / 2;
  margin: 30px auto 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background: transparent url("../images/site/gainfarner_morgenpost.png") center / contain no-repeat;
  overflow: visible;
}
#band .press-clipping-final::before,
#band .press-clipping-final::after,
#band .press-clipping-final > * {
  display: none !important;
}
@media (max-width: 800px) {
  #band .press-clipping-final {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 24px auto 32px;
    padding: 0;
  }
}

/* FINAL about layout. These selectors intentionally override older experimental rules. */
#band > .wrap > .member-grid{margin-top:0!important;margin-bottom:clamp(34px,5vw,56px)!important}
#band .about-story-final{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr)!important;gap:clamp(30px,5vw,60px)!important;align-items:center!important}
#band .about-story-copy-final{line-height:1.7!important}
#band .about-story-copy-final h3{margin:0 0 16px!important;color:var(--green)!important;font-family:Georgia,serif!important;font-size:clamp(28px,3.7vw,40px)!important;line-height:1.1!important}
#band .about-story-copy-final p{margin:0 0 15px!important}
#band .about-story-copy-final p:last-child{margin-bottom:0!important}
#band .about-story-drawing-final{margin:0!important}
#band .about-story-drawing-final img{display:block!important;width:100%!important;height:auto!important}
#band button.press-clipping-final{display:block!important;width:min(980px,100%)!important;aspect-ratio:auto!important;margin:clamp(36px,6vw,64px) auto 42px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;cursor:zoom-in!important;appearance:none!important;overflow:visible!important}
#band button.press-clipping-final::before,#band button.press-clipping-final::after{display:none!important}
#band button.press-clipping-final>img{display:block!important;width:100%!important;height:auto!important;pointer-events:none!important}
#band button.press-clipping-final:focus-visible{outline:3px solid var(--yellow)!important;outline-offset:5px!important}
img{-webkit-user-drag:none!important;-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}
#lightbox #lbImg{max-width:96vw!important;max-height:94vh!important;object-fit:contain!important;-webkit-touch-callout:none!important}
@media(max-width:800px){#band .about-story-final{grid-template-columns:1fr!important;gap:24px!important}#band .about-story-copy-final{font-size:16px!important}#band .about-story-drawing-final{width:min(100%,620px)!important;justify-self:center!important}#band button.press-clipping-final{width:100%!important;margin:36px auto 32px!important}}

/* Unified Rock Salt wordmark in navigation bar */
header .nav-wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--green);
  font-family: "Rock Salt", cursive;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
  text-decoration: none;
  white-space: nowrap;
}
header .nav-wordmark:hover,
header .nav-wordmark:focus-visible {
  color: var(--brown);
}
header .nav-wordmark:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 5px;
}
@media (max-width: 639px) {
  header .nav-wordmark {
    font-size: clamp(18px, 6vw, 23px);
  }
}

/* Final unified Rock Salt typography: navbar + hero */
.hero h1 {
  font-family: "Rock Salt", cursive !important;
  font-size: clamp(48px, 7vw, 86px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: .95 !important;
  letter-spacing: -.025em !important;
}
.hero h1 em {
  display: block !important;
  margin-top: 10px !important;
  font-family: "Rock Salt", cursive !important;
  font-size: clamp(19px, 2.5vw, 31px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}
@media (max-width: 639px) {
  .hero h1 { font-size: clamp(42px, 12vw, 60px) !important; }
  .hero h1 em { font-size: clamp(17px, 5vw, 24px) !important; margin-top: 7px !important; }
}

/* Comparison override: Caveat */
header .nav-wordmark,
.hero h1,
.hero h1 em { font-family: "Caveat", cursive !important; }

/* Caveat larger + stronger */
header .nav-wordmark {
  font-family: "Caveat", cursive !important;
  font-size: clamp(25px, 2.5vw, 32px) !important;
  font-weight: 600 !important;
}
.hero h1 {
  font-family: "Caveat", cursive !important;
  font-size: clamp(58px, 8vw, 100px) !important;
  font-weight: 600 !important;
  line-height: .9 !important;
  letter-spacing: -.02em !important;
}
.hero h1 em {
  font-family: "Caveat", cursive !important;
  font-size: clamp(24px, 3vw, 37px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  margin-top: 9px !important;
}
@media(max-width:639px) {
  header .nav-wordmark { font-size: clamp(23px, 7vw, 29px) !important; }
  .hero h1 { font-size: clamp(50px, 14vw, 72px) !important; }
  .hero h1 em { font-size: clamp(21px, 6vw, 29px) !important; }
}

/* Cleaner hero: wordmark only, positioned lower */
.hero .hero-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  padding-top: clamp(170px, 24vh, 260px);
  padding-bottom: clamp(42px, 7vh, 78px);
}
.hero .hero-font-title,
.hero h1 {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}
@media (max-width: 639px) {
  .hero .hero-content {
    padding-top: clamp(150px, 25vh, 220px);
    padding-bottom: 34px;
  }
}

/* Caveat hero slightly larger */
.hero h1 {
  font-size: clamp(66px, 9vw, 112px) !important;
}
.hero h1 em {
  font-size: clamp(27px, 3.4vw, 42px) !important;
  margin-top: 10px !important;
}
@media (max-width: 639px) {
  .hero h1 {
    font-size: clamp(56px, 15vw, 80px) !important;
  }
  .hero h1 em {
    font-size: clamp(23px, 6.5vw, 32px) !important;
  }
}

/* Larger desktop wordmark; more compact mobile hero */
.hero h1 {
  font-size: clamp(72px, 9.7vw, 122px) !important;
}
.hero h1 em {
  font-size: clamp(29px, 3.6vw, 45px) !important;
}
.hero .hero-die,
.hero .hero-name {
  font: inherit;
  color: inherit;
}
@media (max-width: 639px) {
  .hero {
    min-height: 350px !important;
    height: 350px !important;
  }
  .hero > img {
    height: 350px !important;
    object-fit: cover !important;
    object-position: center 43% !important;
  }
  .hero .hero-content {
    min-height: 350px !important;
    height: 350px !important;
    padding-top: 110px !important;
    padding-bottom: 25px !important;
  }
  .hero h1 {
    font-size: clamp(61px, 17vw, 84px) !important;
    line-height: .77 !important;
  }
  .hero .hero-die {
    display: block !important;
    margin-bottom: .12em;
  }
  .hero .hero-name {
    display: block !important;
  }
  .hero h1 em {
    font-size: clamp(23px, 6.5vw, 31px) !important;
    line-height: 1.05 !important;
    margin-top: 13px !important;
    white-space: nowrap;
  }
}
@media (max-width: 410px) {
  .hero {
    min-height: 330px !important;
    height: 330px !important;
  }
  .hero > img,
  .hero .hero-content {
    height: 330px !important;
    min-height: 330px !important;
  }
  .hero h1 {
    font-size: clamp(58px, 16.5vw, 70px) !important;
  }
  .hero h1 em {
    font-size: clamp(20px, 5.8vw, 25px) !important;
  }
}

/* Hero fine tuning: desktop lower, mobile shorter */
@media (min-width: 640px) {
  .hero .hero-content {
    padding-bottom: clamp(22px, 3.5vh, 42px) !important;
  }
}
@media (max-width: 639px) {
  .hero,
  .hero > img,
  .hero .hero-content {
    height: 285px !important;
    min-height: 285px !important;
  }
  .hero > img {
    object-fit: cover !important;
    object-position: center 43% !important;
  }
  .hero .hero-content {
    padding-top: 72px !important;
    padding-bottom: 18px !important;
  }
}
@media (max-width: 410px) {
  .hero,
  .hero > img,
  .hero .hero-content {
    height: 270px !important;
    min-height: 270px !important;
  }
  .hero .hero-content {
    padding-top: 62px !important;
    padding-bottom: 16px !important;
  }
}

/* Mobile hero typography: visibly larger without increasing hero height */
@media (max-width: 639px) {
  .hero h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: 78px !important;
    line-height: .72 !important;
  }
  .hero h1 .hero-die,
  .hero h1 .hero-name {
    display: block !important;
    font: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
  .hero h1 .hero-die {
    margin-bottom: .10em !important;
  }
  .hero h1 em {
    display: block !important;
    font-size: 28px !important;
    line-height: 1 !important;
    margin-top: 14px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 410px) {
  .hero h1 {
    font-size: 72px !important;
  }
  .hero h1 em {
    font-size: 25px !important;
  }
}
@media (max-width: 365px) {
  .hero h1 {
    font-size: 65px !important;
  }
  .hero h1 em {
    font-size: 22px !important;
  }
}

/* iPhone landscape: prevent horizontal overflow and keep Aktuell cards readable */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.wrap,
.current-entries,
.noticebox,
.noticebox > *,
.noticebox > div {
  min-width: 0;
  max-width: 100%;
}

.noticebox h2,
.noticebox p,
.noticebox a {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* An iPhone 16 landscape viewport is wider than the normal mobile breakpoint,
   but too narrow for two Aktuell cards with image and text side by side. */
@media (max-width: 932px) and (orientation: landscape) {
  .current-entries.multi {
    grid-template-columns: 1fr !important;
  }

  .noticebox {
    grid-template-columns: minmax(190px, 38%) minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .noticebox h2 {
    font-size: clamp(25px, 4vw, 34px);
    line-height: 1.08;
  }

  .noticebox p {
    margin: 10px 0;
  }
}

@media (max-width: 700px) and (orientation: landscape) {
  .noticebox {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile Fotoviewer: caption as true overlay on the photo, no permanent grey strip */
@media (max-width: 800px) {
  .viewer-stage {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .viewer-slide .viewer-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .viewer-slide .slide-caption {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    box-sizing: border-box;
    padding: 72px 20px 18px !important;
    background: linear-gradient(
      to bottom,
      rgba(30, 30, 30, 0) 0%,
      rgba(30, 30, 30, 0.16) 35%,
      rgba(30, 30, 30, 0.72) 100%
    ) !important;
  }

  .viewer-slide .slide-caption small,
  .viewer-slide .slide-caption h3 {
    position: relative;
    z-index: 1;
  }

  .viewer-slide .slide-caption h3 {
    margin: 4px 0 0 !important;
    font-size: clamp(25px, 7vw, 38px);
    line-height: 1.05;
  }
}
@media (max-width: 639px) {
  .viewer-img {
    min-height: 0 !important;
  }
}

/* FINAL portrait viewer fix: round only the image stage, overlay shade on the photo */
@media (max-width: 639px) and (orientation: portrait) {
  .viewer {
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .viewer-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    background: #222 !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }

  .viewer-track,
  .viewer-slide {
    height: 100% !important;
  }

  .viewer-slide {
    overflow: hidden !important;
    border-radius: 28px !important;
  }

  .viewer-slide .viewer-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 28px !important;
  }

  .viewer-slide .slide-caption {
    position: absolute !important;
    z-index: 3 !important;
    inset: auto 0 0 0 !important;
    min-height: 58% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 90px 20px 18px !important;
    border-radius: 0 0 28px 28px !important;
    background: linear-gradient(
      to bottom,
      rgba(24, 26, 24, 0) 0%,
      rgba(24, 26, 24, .08) 22%,
      rgba(24, 26, 24, .42) 58%,
      rgba(24, 26, 24, .82) 100%
    ) !important;
    color: #fff !important;
    pointer-events: none !important;
  }

  .viewer-slide .slide-caption small,
  .viewer-slide .slide-caption h3 {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important;
  }

  .thumbs {
    margin-top: 14px !important;
  }
}

/* Unified viewer frame: the same element clips image + shade + caption. */
.viewer-slide .photo-frame {
  box-sizing: border-box;
}

@media (max-width: 800px) {
  .viewer-slide .photo-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 28px;
  }

  .viewer-slide .photo-frame .viewer-img {
    border-radius: 0 !important;
  }
}

@media (min-width: 801px) {
  .viewer {
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .viewer-stage,
  .viewer-slide {
    border-radius: 0 !important;
  }

  .viewer-slide .photo-frame {
    --frame-w: 100%;
    --frame-h: 100%;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: var(--frame-w);
    height: var(--frame-h);
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: 28px;
    background: #222;
  }

  .viewer-slide .photo-frame .viewer-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: fill !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  .viewer-slide .photo-frame .slide-caption {
    position: absolute !important;
    z-index: 2 !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transform: none !important;
    padding: 62px 28px 22px !important;
    background: linear-gradient(
      to bottom,
      rgba(30,30,30,0) 0%,
      rgba(30,30,30,.12) 35%,
      rgba(30,30,30,.62) 100%
    ) !important;
    border-radius: 0 !important;
  }
}

/* Mobile portrait orientation: keep pillarbox area neutral and shade only behind text. */
@media (max-width: 639px) and (orientation: portrait) {
  .viewer-slide .photo-frame {
    background: #eae4d8 !important;
  }

  .viewer-slide .photo-frame .slide-caption {
    min-height: 0 !important;
    padding: 52px 20px 17px !important;
    background: linear-gradient(
      to bottom,
      rgba(20,22,20,0) 0%,
      rgba(20,22,20,.05) 28%,
      rgba(20,22,20,.22) 58%,
      rgba(20,22,20,.56) 100%
    ) !important;
  }
}

/* Mobile portrait-photo polish: hide empty top corner arcs by matching the page background. */
@media (max-width: 639px) and (orientation: portrait) {
  .viewer-slide .photo-frame {
    background: #eae4d8 !important;
    box-shadow: none !important;
  }

  .viewer-stage,
  .viewer-slide {
    background: #eae4d8 !important;
  }
}

/* Viewer polish: preserve the proven mobile layout and remove desktop edge artifact. */
@media (min-width: 801px) {
  .viewer-slide .photo-frame {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .viewer-slide .photo-frame .viewer-img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 639px) and (orientation: portrait) {
  .viewer-stage,
  .viewer-slide,
  .viewer-slide .photo-frame {
    background: #eae4d8 !important;
  }
  .viewer-slide .photo-frame {
    inset: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
  }
  .viewer-slide .photo-frame .viewer-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  .viewer-slide .photo-frame .slide-caption {
    min-height: 0 !important;
    padding: 52px 20px 17px !important;
    background: linear-gradient(to bottom,rgba(20,22,20,0) 0%,rgba(20,22,20,.05) 28%,rgba(20,22,20,.22) 58%,rgba(20,22,20,.56) 100%) !important;
  }
}