/* Mabel's scrapbook: shared styling, then contained desktop layout. */
:root {
  --purple: #75418b;
  --purple-soft: #d2abe8;
  --paper: #fff9eb;
  --paper-warm: #efe4f4;
  --muted: #536257;
  --syrup: #c57b26;
  --syrup-dark: #884716;
  --cream: #fff9eb;
}

/* Preserve the complete supplied portrait and photographer watermark. */
.illustrated-panel.performance-photo img { object-position: center; object-fit: contain; background: #10291d; }
@media (max-width:1099px) {
  .mobile-photo.performance-photo img { aspect-ratio: 1365 / 2047; object-fit: contain; }
}

body {
  background-color: var(--paper);
  background-image: linear-gradient(90deg, #889b7810 1px, transparent 1px), linear-gradient(#889b7810 1px, transparent 1px);
  background-size: 24px 24px;
}
:focus-visible { outline: 3px solid #a966c6; outline-offset: 5px; }
.brand-name { font-family: Georgia, serif; font-weight: 700; font-size: 1.16rem; }
.brand-mark { background: #e7d2ef; color: #244b37; border: 1px solid #784c87; box-shadow: 2px 2px 0 #b99ac3; }
.button { border-radius: 12px; min-height: 46px; border: 1px solid #244c37; box-shadow: 3px 4px 0 #173d2b; }
.button:hover { transform: translate(-1px,-2px); box-shadow: 4px 6px 0 #173d2b; }
.button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #173d2b; }
.button-primary { background: #dfc2ed; color: #35243e; border-color: #513160; }
.button-primary:hover { background: #ecd9f5; box-shadow: 4px 6px 0 #173d2b; }
.button-light { background: #fff3d5; color: #244c37; }
.button-ghost { background: #fff9eb; }
.eyebrow { color: #70427c; letter-spacing: .16em; }
.eyebrow.light { color: #f6dda3; }
.handwritten { font-family: "Segoe Print", "Bradley Hand", cursive; font-size: clamp(1.1rem,1.7vw,1.6rem); color: #e7c9f0; transform: rotate(-3deg); margin: 25px 0 0; }
.hero-panel .display-title em, .stage-intro h1 em, .mobile-page-hero h1 em { color: #dbb4ec; text-shadow: 2px 3px 0 #5a3969; }
.title-spark { position: absolute; right: 0; top: 8%; font-size: .5em; color: #f4cf80; }
.illustrated-panel { position: relative; margin: 0; padding: 12px 12px 45px; background: #fffaf0; border: 1px solid #74886d; border-radius: 4px; box-shadow: 5px 6px 0 #34533d20; }
.illustrated-panel img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #25442f30; border-radius: 2px; }
.illustrated-panel figcaption { position: absolute; bottom: 12px; left: 16px; right: 16px; font-family: "Segoe Print", cursive; font-size: 1rem; color: #4c3855; display: flex; justify-content: space-between; }
.art-sticker { position: absolute; right: 18px; top: 20px; padding: 15px 20px; background: #e8c8f2; color: #4d2f5e; border: 3px double #865c95; border-radius: 50%; transform: rotate(12deg); font-family: "Segoe Print", cursive; font-weight: bold; line-height: 1.3; text-align: center; box-shadow: 3px 3px 0 #4b255733; }
.quick-card, .mobile-link-card { border: 1px solid #527258; border-radius: 5px 20px 5px 20px; box-shadow: 3px 4px 0 #52725838; background: #e4edda; }
.quick-card:nth-child(2), .mobile-link-card:nth-child(2) { background: #eadbf1; border-color: #9265a2; }
.quick-card:nth-child(3), .mobile-link-card:nth-child(3) { background: #f8e9ce; border-color: #b58a4a; }
.quick-card:nth-child(4) { background: #eadbf1; border-color: #9265a2; }
.quick-card .quick-number { color: #574064; font-size: .64rem; letter-spacing: .13em; }
.quick-number::before { content: "✦ "; color: #7b548b; }
.quick-card strong { font-size: 1.45rem; }
.quick-card strong span { color: #764b89; }
.quick-card:hover { background: #fff9eb; transform: translateY(-4px) rotate(0); border-color: #75418b; }
.hero-tag { border-radius: 4px; background: #fff9eb0a; border: 1px dashed #b8c997; color: #ebeedc; font-size: .62rem; }
.card-label { color: #75418b; }
.act-card, .info-card, .epk-card, .mobile-info-card { background: #fffbf1; border: 1px solid #aeb7a1; border-radius: 8px 22px 8px 22px; box-shadow: 3px 3px 0 #6b826016; }
.act-art, .photo-placeholder, .placeholder-strip { border: 1px dashed #87987d; background: repeating-linear-gradient(135deg, #d9e6d4 0 14px, #e7eee0 14px 28px); color: #354c3c; }
.placeholder-kicker { opacity: 1; color: #566348; }
.act-card:nth-child(2) .act-art { background: repeating-linear-gradient(135deg, #e2d2ed 0 14px, #ece3f2 14px 28px); }
.act-card:nth-child(3) .act-art { background: repeating-linear-gradient(135deg, #f1e1bd 0 14px, #f7edda 14px 28px); }
.placeholder-strip strong { color: #34533e; }
.tab-button { border: 1px solid #b4a0bd; border-radius: 9px 9px 3px 3px; color: #51445a; background: #f5ecf7; }
.tab-button.is-active, .tab-button[aria-selected="true"] { background: #dcc3e9; color: #392748; border-color: #90619f; box-shadow: 0 3px 0 #90619f; }
.tab-button:hover { background: #ead7f1; }
.field input, .field select, .field textarea { background: #fffdf6; border-color: #99aa90; border-radius: 8px; }
.form-status { color: #62436e; }
@media (min-width:1100px) {
  body { overflow: hidden; }
  .site-footer { display: none; }
  .site-header {
    position: fixed; inset: 0 0 auto; width: 100%; height: 82px; min-height: 82px;
    display: flex; flex-direction: row; align-items: center; gap: 22px; padding: 12px 30px;
    background: #fff8e9; color: #254934; border: 0; border-bottom: 1px solid #a2ad8f; box-shadow: 0 3px 0 #65794d15;
  }
  .brand { flex: 0 0 auto; }
  .menu-toggle { display: none; }
  .site-nav { flex: 1; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin: 0; }
  .site-nav a { min-height: 42px; padding: 0 15px; color: #405440; border-radius: 8px; font-size: .84rem; }
  .site-nav a:hover, .site-nav a:focus-visible { background: #e7d7ec; color: #4a3157; transform: rotate(-2deg); }
  .site-nav a.active, .site-nav a[aria-current="page"] { background: #e7d7ec; color: #4a3157; border: 1px solid #b48cbd; }
  .site-nav a.active::before, .site-nav a[aria-current="page"]::before { display: none; }
  .site-nav .nav-cta { margin: 0 0 0 10px; background: #2d5f42; color: #fff8e9; border: 1px solid #173a26; box-shadow: 2px 3px 0 #b3bfa1; }
  .site-nav .nav-cta:hover { background: #214d34; color: white; }
  .rail-social { flex: 0 0 auto; margin: 0; padding: 0; border: 0; text-align: right; color: #68735c; font-size: .65rem; max-width: 215px; }
  .rail-social a { margin-top: 3px; color: #70447f; }
  .viewport-main { margin-left: 0; height: 100dvh; min-height: 0; padding: 115px 32px 24px; overflow: hidden; }
  .stage-frame { width: min(100%,1480px); height: 100%; margin-inline:auto; }
  .home-desktop { min-height: 0; grid-template-rows: minmax(0,1fr); grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap: 26px; }
  .hero-panel, .stage-intro { background: #204f37; border: 1px solid #0d3520; border-radius: 80px 12px 80px 12px; box-shadow: 6px 6px 0 #bcc6a7; }
  .hero-panel { min-height: 0; overflow-y: auto; padding: clamp(30px,3.5vw,58px); gap: 20px; }
  .hero-panel::after, .stage-intro::after { inset: 13px; width: auto; height: auto; border: 1px dashed #b7c79870; border-radius: 68px 5px 68px 5px; pointer-events: none; }
  .hero-panel .display-title { font-size: clamp(5.2rem,min(8.4vw,17vh),9rem); line-height: .83; letter-spacing: -.065em; }
  .hero-panel .hero-lede { color: #e3ead7; font: 1.05rem/1.65 system-ui,sans-serif; max-width: 460px; margin: 0 0 25px; }
  .hero-panel .eyebrow { font-size: .59rem; margin-bottom: 28px; }
  .home-stack { min-height: 0; gap: 22px; grid-template-rows: minmax(0,1fr) auto; }
  .portrait-panel { transform: rotate(1.2deg); min-height: 0; }
  .quick-grid { gap: 12px; padding: 0 3px 4px; }
  .quick-grid > .quick-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quick-card { min-height: 108px; padding: 17px 20px; }
  .quick-card:nth-child(1) { transform: rotate(-1deg); }
  .quick-card:nth-child(4) { transform: rotate(.8deg); }
  .quick-card:hover { transform: translateY(-3px) rotate(0); }
  .detail-stage, .booking-stage { grid-template-columns: minmax(0,.75fr) minmax(0,1.45fr); gap: 24px; }
  .stage-intro { padding: clamp(28px,3vw,48px); gap: 25px; overflow: auto; }
  .stage-intro h1 { font-size: clamp(3rem,5.3vw,5.8rem); line-height: .92; }
  .stage-intro .stage-lede { color: #e0e8d6; line-height: 1.7; }
  .stage-kicker { color: #c9d4b6; }
  .stage-workspace, .booking-workspace { background: #fffaf0; border: 1px solid #8d9f80; border-radius: 14px; box-shadow: 5px 5px 0 #c6b0d340; }
  .stage-workspace { padding: 17px; gap: 8px; }
  .tabbar { padding: 0 8px 10px; border-bottom: 1px dashed #b1a0b7; }
  .tab-panels { min-height: 0; }
  .tab-panel { padding: 22px 10px 10px; }
  .panel-heading { align-items: start; flex-direction: column; gap: 12px; }
  .panel-heading h2, .content-block h2 { font-size: clamp(2rem,2.6vw,3rem); }
  .booking-workspace { padding: 28px; }
}
@media (min-width:1100px) and (max-height:760px) {
  .viewport-main { padding-top: 105px; padding-bottom: 15px; }
  .hero-panel { padding: 30px 38px; gap: 12px; }
  .hero-panel .display-title { font-size: min(7.4vw,16vh); }
  .hero-panel .eyebrow { margin-bottom: 18px; }
  .handwritten { margin-top: 15px; font-size: 1.15rem; }
  .hero-panel .hero-lede { font-size: .92rem; line-height: 1.5; margin-bottom: 16px; }
  .hero-tag { padding: 6px 8px; }
  .quick-card { min-height: 85px; padding: 12px 16px; }
  .quick-card strong { font-size: 1.2rem; }
  .home-stack { gap: 16px; }
}
@media (max-width:1099px) {
  .site-header { background: #204f37; border-bottom: 2px solid #dab7e9; }
  .site-nav { visibility: hidden; }
  .site-nav.open { visibility: visible; }
  .site-nav .nav-cta { background: #dab7e9; color: #382543; }
  .mobile-hero { background: transparent; padding-top: 48px; }
  .mobile-hero h1 { line-height: .85; color: #214d35; }
  .mobile-hero h1 em { color: #89559f; text-shadow: 2px 2px 0 #e3c9ea; }
  .mobile-hero .handwritten { color: #794a89; margin: 24px 0; font-size: 1.1rem; }
  .mobile-lede { color: #475b46; font-family: inherit; font-size: 1.05rem; line-height: 1.7; }
  .mobile-photo.illustrated-panel { min-height: 0; height: auto; margin-top: 36px; transform: rotate(-1deg); }
  .mobile-photo img { aspect-ratio: 3/2; height: auto; }
  .mobile-page-hero { background: #204f37; border-bottom: 4px double #c7a9d6; }
  .mobile-page-hero h1 { font-size: clamp(3.2rem,12vw,6rem); line-height: .95; }
  .mobile-page-hero .mobile-lede { color: #e0e8d6; }
  .mobile-link-card { padding: 24px; }
  .mobile-section.alt { background: #ece2f0; }
  .mobile-section.dark { background: #204f37; }
  .site-footer { background: #e1e9d6; border-top: 3px double #879a78; }
  .site-footer .brand-name { color: #244b37; }
  .mobile-section.dark .placeholder-kicker { color: #354c3c; }
}
@media (min-width:1100px) and (max-height:570px) {
  .hero-panel { overflow-y:auto; }
  .hero-tags { margin-top: 12px; }
}

/* Let the portrait determine its frame; links sit beneath the introduction. */
@media (min-width: 1100px) {
  .home-desktop {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: 22px;
    max-width: 1320px;
    margin-inline: auto;
  }
  .home-stack { display: contents; }
  .home-desktop .hero-panel { grid-column: 1; grid-row: 1; }
  .home-desktop .quick-grid { grid-column: 1; grid-row: 2; }
  .home-desktop .portrait-panel {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: calc((100dvh - 204px) * 1365 / 2047 + 26px);
    max-width: 480px;
    height: auto;
    transform: rotate(1deg);
  }
  .home-desktop .performance-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1365 / 2047;
    background: transparent;
  }
  .home-desktop .hero-panel { padding: clamp(28px, 3vw, 46px); gap: 18px; }
  .home-desktop .display-title { font-size: clamp(4.8rem, min(7.6vw, 14vh), 8rem); }
  .home-desktop .hero-lede { margin-bottom: 18px; }
  .home-desktop .quick-card { min-height: 86px; padding: 13px 18px; }
}