.skbt-page { --skbt-ink: #2c301f; --skbt-olive: #42462f; --skbt-gold: #a26222; --skbt-cream: #f5f3eb; --skbt-sand: #e7ddca; color: var(--skbt-ink); padding: 0 0 64px; }
.skbt-page *, .skbt-page *::before, .skbt-page *::after { box-sizing: border-box; }
.skbt { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
.skbt-review { max-width: 1328px; margin: 0 auto; padding: 18px 0 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-size: 11px; color: #6b6e62; letter-spacing: .035em; }
.skbt-review-dot { width: 5px; height: 5px; border-radius: 50%; background: #a26222; }
.skbt-intro { text-align: center; padding: 20px 20px 32px; }
.skbt-eyebrow { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 15px; font: 700 11px/1.4 var(--font-family-base, sans-serif); text-transform: uppercase; letter-spacing: .16em; color: #84531e; }
.skbt-eyebrow > span { display: block; width: 35px; height: 1px; background: #bb9660; }
.skbt-intro h2 { font: 400 clamp(48px, 4.8vw, 72px)/1.04 var(--font-family-heading, Georgia, serif); letter-spacing: -.025em; margin: 0 0 17px; color: var(--skbt-ink); }
.skbt-mobile-break { display: none; }
.skbt-lede { font-size: 17px; line-height: 1.5; margin: 0; color: #646658; }
.skbt-gallery { width: 100%; }
.skbt-stage { position: relative; aspect-ratio: 1.93; border-radius: 12px; background: #e8dfcc; isolation: isolate; touch-action: pan-y; }
.skbt-panel { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; }
.skbt-panel[hidden] { display: none !important; }
.skbt-picture { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; }
.skbt-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; border-radius: 12px; }
.skbt-panel--chapters .skbt-photo, .skbt-panel--photos .skbt-photo { object-position: 50% 50%; }
.skbt-note { position: absolute; pointer-events: none; display: flex; flex-direction: column; align-items: center; font: 600 clamp(15px, 1.35vw, 21px)/1.25 var(--font-family-base, sans-serif); text-align: center; color: #38402a; text-shadow: 0 1px 12px #f4ead366; }
.skbt-note svg { width: 78px; height: 57px; margin-top: 9px; overflow: visible; }
.skbt-note--one { left: 5.5%; top: 16%; }
.skbt-note--two { right: 5%; top: 15%; }
.skbt-note--one svg { transform: rotate(14deg); }
.skbt-note--two svg { transform: rotate(-12deg); }
.skbt-panel--chapters .skbt-note--one, .skbt-panel--photos .skbt-note--one { left: 4.5%; top: 10%; }
.skbt-panel--chapters .skbt-note--two, .skbt-panel--photos .skbt-note--two { right: 4%; top: 12%; }
.skbt-panel--recordings .skbt-note--one { left: 5%; top: 12%; }
.skbt-panel--recordings .skbt-note--two { right: 4.5%; top: 12%; }
.skbt-panel--recordings .skbt-note--two span { padding: 4px 8px; border-radius: 8px; background: #f4ead3f2; }
.skbt-tabs { position: absolute; z-index: 2; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; padding: 7px; white-space: nowrap; border: 1px solid #ffffffd6; background: #fffdfaf7; border-radius: 999px; box-shadow: 0 4px 24px #2c301f09; }
.skbt-tab { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; min-height: 47px; border: 0; border-radius: 999px; background: transparent; color: var(--skbt-olive); font: 600 13px/1.3 var(--font-family-base,sans-serif); cursor: pointer; transition: background .18s ease, color .18s ease; }
.skbt-tab-number { opacity: .6; font-size: 10px; font-variant-numeric: tabular-nums; }
.skbt-tab[aria-selected="true"] { background: var(--skbt-olive); color: #fffefa; }
.skbt-tab:hover:not([aria-selected="true"]) { background: #eeece3; }
.skbt-page :is(button,a,[tabindex]):focus-visible { outline: 2px solid #9d5e1c; outline-offset: 4px; }
.skbt-noscript { text-align: center; }
@media (min-width: 1600px) { .skbt { max-width: 1560px; } .skbt-stage { aspect-ratio: 1.96; } }
@media (max-width: 1199px) { .skbt { padding-inline: 32px; } .skbt-review { padding-inline: 32px; } .skbt-stage { aspect-ratio: 1.65; } .skbt-tab { padding-inline: 13px; font-size: 12px; } .skbt-tab-number { display: none; } .skbt-note { font-size: 17px; } .skbt-note--one { left: 4%; } .skbt-note--two { right: 3%; } .skbt-note svg { width: 64px; height: 46px; } }
@media (max-width: 767px) {
    .skbt-page { padding-bottom: 40px; }
    .skbt { padding: 0 16px; }
    .skbt-review { justify-content: center; padding: 13px 16px 0; font-size: 10px; }
    .skbt-intro { padding: 25px 8px 26px; }
    .skbt-eyebrow { font-size: 9px; letter-spacing: .15em; gap: 10px; margin-bottom: 13px; }
    .skbt-eyebrow > span { width: 22px; }
    .skbt-intro h2 { font-size: clamp(41px, 11.9vw, 58px); line-height: .99; letter-spacing: -.02em; margin-bottom: 16px; }
    .skbt-mobile-break { display: block; }
    .skbt-lede { max-width: 310px; margin: 0 auto; font-size: 14px; line-height: 1.55; }
    .skbt-stage { aspect-ratio: auto; height: auto; padding-bottom: 116px; background: transparent; touch-action: auto; }
    .skbt-panel { position: relative; aspect-ratio: 4 / 4.75; width: 100%; border-radius: 12px; background: #e8dfcc; touch-action: pan-y; }
    .skbt-photo { position: absolute; inset: 0; object-position: 47% 50%; }
    .skbt-panel--chapters .skbt-photo { object-position: 49% 50%; }
    .skbt-panel--photos .skbt-photo { object-position: 50% 50%; }
    .skbt-panel--recordings .skbt-photo { object-position: 49% 50%; }
    .skbt-note { font-size: 13px; line-height: 1.25; }
    .skbt-note svg { width: 46px; height: 34px; margin-top: 5px; }
    .skbt-note--one, .skbt-panel--chapters .skbt-note--one, .skbt-panel--photos .skbt-note--one, .skbt-panel--recordings .skbt-note--one { top: 6%; left: 5%; align-items: flex-start; text-align: left; }
    .skbt-note--two, .skbt-panel--chapters .skbt-note--two, .skbt-panel--photos .skbt-note--two, .skbt-panel--recordings .skbt-note--two { display: none; }
    .skbt-note--one svg { transform: rotate(-8deg); margin-left: 7px; }
    .skbt-tabs { bottom: 0; left: 0; right: 0; width: 100%; height: 104px; transform: none; border-radius: 12px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: #f1efe7; border: 1px solid #eae6da; box-shadow: none; white-space: normal; }
    .skbt-tab { font-size: 11.5px; line-height: 1.25; padding: 9px 6px; min-height: 44px; border-radius: 8px; gap: 7px; }
    .skbt-tab-number { display: inline; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .skbt-page *, .skbt-page *::before, .skbt-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
