/* ============================================================ Mobile Styles — KC Jones (COMPREHENSIVE) Loaded after page , targets all .dc.html pages ============================================================ */ /* Mobile menu control is progressively enhanced below. */ [data-kc-menu-toggle], [data-kc-header-actions] { display: none; } /* Interior pages: reclaim the vertical air left by the removed hero eyebrows. Keep the homepage hero untouched and leave the artwork/parchment overlap intact. */ @media (min-width: 761px) { body:not([data-kc-page="home"]) #top > div > section:first-of-type { min-height: clamp(420px, 36vw, 460px) !important; } body:not([data-kc-page="home"]) #top > div > section:first-of-type > header[data-kc-header] { padding-top: 4px !important; padding-bottom: 0 !important; row-gap: 4px !important; } body:not([data-kc-page="home"]) #top > div > section:first-of-type > div[style*="z-index: 8"] { padding-top: 8px !important; padding-bottom: 44px !important; } /* Raise only the interior hero artwork so the eyes clear the parchment edge. The parchment, copy, and homepage hero geometry remain untouched. */ body:not([data-kc-page="home"]) #top > div > section:first-of-type > div:first-child > image-slot { transform: translateY(-42px) !important; } } @media (max-width: 900px) { #top > div { box-shadow: 0 0 0 2px #9a7c37, 0 0 0 3px #c9a24c, 0 8px 30px rgba(0,0,0,0.55) !important; } } @media (max-width: 760px) { /* ── Outer page shell ── */ #top { padding: 6px !important; } #top > div { box-shadow: 0 0 0 1px #9a7c37, 0 0 0 2px #c9a24c, 0 4px 16px rgba(0,0,0,0.5) !important; } /* ── HEADER: force single column flex ── */ [data-kc-header] { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding: 4px 10px !important; gap: 3px !important; grid-template-columns: unset !important; grid-template-rows: unset !important; position: relative !important; z-index: 60 !important; } /* Real mobile menu control. The old layout merely left the Home desktop link visible while the rest of the nav wrapped out of sight. */ [data-kc-menu-toggle] { display: flex !important; position: fixed !important; top: auto !important; right: 10px !important; bottom: 10px !important; z-index: 70 !important; width: 56px !important; height: 48px !important; padding: 7px 8px 5px !important; margin: 0 !important; flex-direction: column !important; justify-content: center !important; gap: 4px !important; background: linear-gradient(145deg, #f1dfb4 0%, #dfc28c 56%, #c7a66f 100%) !important; border: 1px solid #704925 !important; border-radius: 4px !important; box-shadow: 0 3px 0 rgba(71,43,20,0.45), 0 5px 12px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,247,214,0.62), inset 0 0 12px rgba(112,73,37,0.16) !important; clip-path: polygon(0 7%, 8% 2%, 17% 5%, 28% 1%, 41% 4%, 55% 1%, 69% 4%, 83% 1%, 100% 7%, 97% 93%, 88% 98%, 75% 95%, 61% 99%, 47% 96%, 33% 100%, 18% 96%, 3% 100%); pointer-events: auto !important; cursor: pointer !important; } [data-kc-menu-toggle] span { display: block !important; width: 100% !important; height: 2px !important; border-radius: 1px !important; background: #4e301c !important; box-shadow: 0 1px 0 rgba(255,238,183,0.45) !important; transition: transform 160ms ease, opacity 160ms ease !important; } [data-kc-menu-toggle]::after { content: "MORE" !important; display: block !important; margin-top: 2px !important; color: #4e301c !important; font: 700 8px/1 'Cinzel', serif !important; letter-spacing: 0.1em !important; } [data-kc-header][data-kc-nav-open="true"] [data-kc-menu-toggle] span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; } [data-kc-header][data-kc-nav-open="true"] [data-kc-menu-toggle] span:nth-child(2) { opacity: 0 !important; } [data-kc-header][data-kc-nav-open="true"] [data-kc-menu-toggle] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; } /* Compact Home CTAs live in the header on mobile. */ [data-kc-header-actions] { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; margin: 1px 0 0 !important; padding: 0 8px !important; pointer-events: auto !important; } [data-kc-header-cta] { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 30px !important; padding: 6px 10px !important; border: 1px solid rgba(201,162,76,0.72) !important; border-radius: 999px !important; font-family: 'Cinzel', serif !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: 0.07em !important; line-height: 1.1 !important; color: #f8eed8 !important; text-transform: uppercase !important; white-space: nowrap !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important; } [data-kc-header-cta="theatre"] { background: linear-gradient(180deg, rgba(164,48,52,0.9), rgba(102,22,26,0.86)) !important; } [data-kc-header-cta="works"] { background: linear-gradient(180deg, rgba(54,111,139,0.9), rgba(22,61,84,0.88)) !important; } /* Logo mark */ [data-kc-mark] { grid-column: unset !important; grid-row: unset !important; justify-self: unset !important; align-self: center !important; padding: 4px 8px 2px !important; margin: 0 !important; display: block !important; position: relative !important; z-index: 65 !important; width: 100% !important; max-width: 100% !important; } [data-kc-mark] > span:first-child { font-size: 22px !important; line-height: 1 !important; } [data-kc-mark] > span:last-child { justify-content: center !important; } /* App-style mobile dock: primary links stay at the bottom; More opens upward. */ body { padding-bottom: 72px !important; } [data-kc-nav] { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 50 !important; display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important; gap: 2px !important; width: auto !important; max-width: none !important; height: 64px !important; max-height: 64px !important; overflow: hidden !important; padding: 8px 70px 8px 8px !important; background: linear-gradient(145deg, #f1dfb4 0%, #dfc28c 58%, #c7a66f 100%) !important; border: 1px solid #704925 !important; border-radius: 0 !important; box-shadow: 0 -4px 16px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,247,214,0.62), inset 0 0 18px rgba(112,73,37,0.14) !important; clip-path: polygon(0 4%, 9% 1%, 20% 3%, 34% 0, 49% 3%, 64% 0, 79% 3%, 91% 1%, 100% 4%, 100% 100%, 0 100%); opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; transition: height 180ms ease, max-height 180ms ease, padding 180ms ease, transform 180ms ease !important; } [data-kc-nav] a { display: flex !important; flex: 1 1 0 !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; box-sizing: border-box !important; padding: 8px 4px !important; border: 1px solid rgba(112,73,37,0.38) !important; border-radius: 3px !important; background: rgba(255,242,203,0.3) !important; color: #4e301c !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.07em !important; line-height: 1 !important; text-align: center !important; text-shadow: 0 1px 0 rgba(255,244,202,0.65) !important; } [data-kc-nav] a:nth-child(n + 5) { display: none !important; } [data-kc-header][data-kc-nav-open="true"] [data-kc-nav] { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; height: auto !important; max-height: calc(100dvh - 8px) !important; overflow-y: auto !important; padding: 14px 10px 76px !important; clip-path: polygon(0 2%, 10% 0, 23% 2%, 38% 0, 54% 2%, 70% 0, 86% 2%, 100% 0, 98% 97%, 87% 100%, 72% 98%, 57% 100%, 42% 98%, 27% 100%, 12% 98%, 2% 100%); } [data-kc-header][data-kc-nav-open="true"] [data-kc-nav] a { flex: 0 0 auto !important; width: 100% !important; min-height: 35px !important; padding: 8px 10px !important; font-size: 11px !important; } [data-kc-header][data-kc-nav-open="true"] [data-kc-nav] a:nth-child(n + 5) { display: flex !important; } [data-kc-menu-toggle]::after { content: "MORE" !important; } [data-kc-header][data-kc-nav-open="true"] [data-kc-menu-toggle]::after { content: "CLOSE" !important; } [data-kc-nav] a:hover, [data-kc-nav] a:focus-visible { background: rgba(255,247,216,0.72) !important; color: #351f12 !important; } /* Atelier buttons: hide on mobile (they consume too much header space) */ [data-kc-atelier] { display: none !important; } /* ── HERO SECTION ── */ /* Keep the media frame independent from the amount of hero copy. The old rules unset the desktop min-height and let the image fill a tall, content-driven mobile section, which makes a 3:1 banner crop violently. */ section[style*="min-height"]:has(> header[data-kc-header]) { position: relative !important; min-height: clamp(360px, 92vw, 480px) !important; height: auto !important; overflow: hidden !important; } section[style*="min-height"]:has(> header[data-kc-header]) > div:first-child { position: absolute !important; inset: 0 0 auto 0 !important; width: 100% !important; height: clamp(280px, 78vw, 420px) !important; min-height: 0 !important; max-height: 420px !important; overflow: hidden !important; } section[style*="min-height"]:has(> header[data-kc-header]) > div:first-child > image-slot, section[style*="min-height"]:has(> header[data-kc-header]) > div:first-child image-slot { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; } /* Header/body content must flow below the controlled media frame. */ section[style*="min-height"]:has(> header[data-kc-header]) > div[style*="display: flex"] { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 8px !important; padding: 8px 14px 18px !important; } section[style*="min-height"]:has(> header[data-kc-header]) > div[style*="display: flex"] > div:first-child { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-top: 8px !important; } section[style*="min-height"]:has(> header[data-kc-header]) > div[style*="display: flex"] > aside { display: none !important; margin: 0 !important; } section[style*="min-height"]:has(> header[data-kc-header]) > div[style*="display: flex"] h1 { max-width: 100% !important; font-size: clamp(30px, 8.2vw, 46px) !important; line-height: 0.98 !important; letter-spacing: -0.01em !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } section[style*="min-height"]:has(> header[data-kc-header]) > div[style*="display: flex"] > div:first-child a { min-height: 34px !important; padding: 7px 11px !important; font-size: 10px !important; letter-spacing: 0.08em !important; } /* Mobile does not need the desktop CTA row in the hero body: its compact copy now lives in the header, which lets the parchment cover the old gap. */ section[style*="min-height"]:has(> header[data-kc-header]) > div[style*="display: flex"] > div:first-child > div[style*="gap: 15px"] { display: none !important; } section[style*="min-height"]:has(> header[data-kc-header]) > div[style*="display: flex"] > div:first-child h1 + div { display: none !important; } section[style*="min-height"]:has(> header[data-kc-header]) [data-kc-tagline] { display: block !important; max-width: 100% !important; margin: 8px 0 16px !important; padding: 4px 9px 5px !important; font-size: 11px !important; line-height: 1.15 !important; letter-spacing: 0.04em !important; text-align: left !important; white-space: normal !important; } /* Do not scale or hide every descendant. Only constrain the known decorative layers that are positioned inside the hero media frame. */ section[style*="overflow: hidden"] > div[style*="position: absolute"][style*="transform: scale"] { transform: scale(1) !important; transform-origin: center top !important; } /* The parchment body uses a desktop overlap to frame the hero. On mobile that overlap lands on the CTA buttons, so let the sections meet normally. */ main[style*="margin-top"] { margin-top: -84px !important; padding: 10px 10px 16px !important; border-width: 56px 18px 55px !important; border-image-width: 56px 18px 55px !important; background-color: transparent !important; background-clip: border-box !important; z-index: 8 !important; } main[style*="background-image: url('./images/header/site-header.png')"] { background-image: none !important; } section + div[style*="padding: 44px"] h2, div[style*="padding: 44px 20px"] h2 { font-size: 18px !important; white-space: normal !important; word-break: break-word !important; } /* ── PRODUCTION / REPERTOIRE CARDS: 240px grid → 1 column ── */ /* This is the #1 cause of horizontal overflow */ article, article[style*="grid-template-columns: 240px"] { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; gap: 12px !important; padding: 20px 0 !important; } /* Image inside article */ article > div:first-child { width: 100% !important; max-width: 100% !important; } article > div:first-child > image-slot, article > div:first-child > img, article > div:first-child > div { width: 100% !important; max-width: 100% !important; aspect-ratio: 16/9 !important; object-fit: cover !important; } /* Text stack inside article */ article > div:last-child { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Section dividers & ornaments */ div[style*="display: flex; align-items: center; gap: 14px"] { gap: 8px !important; padding: 0 10px !important; } /* ── GRIDS: multi-column → 1 column ── */ [style*="grid-template-columns: repeat"] { grid-template-columns: 1fr !important; } [style*="repeat(auto-fit"], [style*="repeat(auto-fill"] { grid-template-columns: 1fr !important; } /* Keep the parchment's actual content column centered. The border-image frame is intentionally wide, but its child content must not inherit a desktop-width grid on a phone. */ main > div[style*="grid-template-columns: repeat(auto-fit, minmax(352px"] { width: 100% !important; max-width: none !important; margin-inline: auto !important; padding: 16px 0 28px !important; transform: none !important; } /* Home repertoire: two centered, capped cards instead of giant full-width circles created by the generic one-column mobile rule above. */ [data-kc-repertoire] > div:first-child { margin-bottom: 16px !important; } [data-kc-repertoire-items] { width: min(100%, 300px) !important; max-width: 300px !important; margin-left: auto !important; margin-right: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: center !important; justify-items: center !important; gap: 16px 16px !important; } [data-kc-repertoire-items] > a { width: min(100%, 132px) !important; max-width: 132px !important; margin: 0 auto !important; } [data-kc-repertoire-items] > a > div:first-child { width: 100% !important; max-width: 88px !important; margin-inline: auto !important; } [data-kc-repertoire-items] > a > div:nth-child(2) { width: 104% !important; margin-left: -2% !important; margin-top: -10px !important; padding: 4px 2px !important; } [data-kc-repertoire-items] > a > div:nth-child(2) span { font-size: 10px !important; letter-spacing: 0.04em !important; } /* Workbench card: collapse the desktop split layout on mobile so the heading is compact, centered, and not trapped in a narrow left column. */ [data-kc-workbench] { grid-template-columns: 1fr !important; min-height: 0 !important; width: 100% !important; margin-inline: auto !important; } [data-kc-workbench] > div[style*="padding: 26px"] { padding: 18px 14px 16px !important; text-align: center !important; } [data-kc-workbench] > div[style*="padding: 26px"] p, [data-kc-workbench] > div[style*="padding: 26px"] h2 { max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } [data-kc-workbench] > div[style*="padding: 26px"] h2 { font-size: 20px !important; line-height: 1.06 !important; margin-bottom: 10px !important; } [data-kc-workbench] > div[style*="padding: 26px"] p { font-size: 13px !important; line-height: 1.35 !important; margin-bottom: 14px !important; } [data-kc-workbench] > div[style*="padding: 26px"] a { padding: 8px 12px !important; font-size: 9px !important; } [data-kc-workbench] > div[style*="min-width: 0"] { min-height: 170px !important; height: 170px !important; } /* Hero 3-col grid → 1 col */ div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr)"] { grid-template-columns: 1fr !important; gap: 10px !important; padding: 0 12px !important; } /* ── OTHER MOBILE PAGES: compact content rhythm ── */ body[data-kc-page="about"] main image-slot { width: min(100%, 260px) !important; height: 325px !important; margin-inline: auto !important; } body[data-kc-page="works"] main [style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 14px !important; width: min(100%, 320px) !important; max-width: 320px !important; margin-inline: auto !important; } body[data-kc-page="works"] main #works-panel figure { min-width: 0 !important; } body[data-kc-page="works"] main #works-panel figure > div { padding: 5px !important; } body[data-kc-page="works"] main #works-panel figure > div > div[style*="aspect-ratio"] { aspect-ratio: auto !important; height: 154px !important; } body[data-kc-page="works"] main #works-panel figure figcaption { padding: 7px 1px 0 !important; } body[data-kc-page="works"] main #works-panel figure h3 { margin-bottom: 3px !important; font-size: 13px !important; line-height: 1.12 !important; } body[data-kc-page="works"] main #works-panel figure p { font-size: 11px !important; line-height: 1.2 !important; } body[data-kc-page="works"] main #works-panel figure p[style*="letter-spacing"] { margin-top: 3px !important; font-size: 9px !important; } body[data-kc-page="works"] main [role="tablist"] { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; justify-content: stretch !important; gap: 5px !important; margin: 0 auto 14px !important; padding: 0 !important; width: min(100%, 320px) !important; max-width: 320px !important; overflow: visible !important; } body[data-kc-page="works"] main [role="tablist"] button, body[data-kc-page="works"] main [role="tablist"] > a { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 26px !important; padding: 5px 2px !important; font-size: 7.5px !important; letter-spacing: 0.045em !important; line-height: 1.05 !important; white-space: nowrap !important; } /* Long page copy must stay inside the approved hero overlap. Keep the parchment/header relationship stable by reducing text density instead of allowing wrapped copy to grow the hero indefinitely. */ body[data-kc-page] section[style*="min-height"] > div[style*="padding: 34px"] { padding: 22px 14px 58px !important; } body[data-kc-page] section[style*="min-height"] > div[style*="padding: 34px"] > p:first-of-type { margin-bottom: 8px !important; padding: 5px 10px !important; font-size: 10px !important; line-height: 1.05 !important; } body[data-kc-page] section[style*="min-height"] > div[style*="padding: 34px"] h1 { max-width: 100% !important; font-size: clamp(30px, 7.4vw, 38px) !important; line-height: 0.96 !important; letter-spacing: -0.015em !important; } body[data-kc-page] section[style*="min-height"] > div[style*="padding: 34px"] h1 + div { margin: 12px 0 10px !important; } body[data-kc-page] section[style*="min-height"] > div[style*="padding: 34px"] h1 ~ p:last-child { max-width: 100% !important; margin: 0 !important; font-size: clamp(14px, 3.8vw, 17px) !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } /* Two-line italic metadata is enough on a phone; avoid card rows growing because a medium/location string wraps into a miniature essay. */ body[data-kc-page] main p[style*="font-style: italic"] { font-size: clamp(11px, 3.2vw, 14px) !important; line-height: 1.22 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } body[data-kc-page] main h2 { max-width: 100% !important; font-size: clamp(17px, 5vw, 22px) !important; line-height: 1.05 !important; white-space: normal !important; } body[data-kc-page="theatre"] main article { display: grid !important; grid-template-columns: 92px minmax(0, 1fr) !important; gap: 14px !important; align-items: center !important; padding: 16px 0 !important; min-height: 0 !important; } body[data-kc-page="theatre"] main article > div:first-child { width: 92px !important; height: 92px !important; min-width: 92px !important; max-width: 92px !important; aspect-ratio: 1 / 1 !important; padding: 5px !important; margin: 0 !important; } body[data-kc-page="theatre"] main article > div:first-child > div, body[data-kc-page="theatre"] main article > div:first-child image-slot { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; } body[data-kc-page="theatre"] main article > div:last-child { min-width: 0 !important; } body[data-kc-page="theatre"] main article h3 { margin-bottom: 6px !important; font-size: 17px !important; line-height: 1.08 !important; } body[data-kc-page="theatre"] main article p { margin-bottom: 8px !important; font-size: 13px !important; line-height: 1.35 !important; } body[data-kc-page="miniatures"] main article[style*="background-color"][style*="grid-template-columns"] { display: grid !important; grid-template-columns: 100px minmax(0, 1fr) !important; gap: 0 !important; align-items: stretch !important; margin-bottom: 14px !important; padding: 0 !important; } body[data-kc-page="miniatures"] main article > div:first-child { width: 100px !important; min-width: 100px !important; height: 100px !important; min-height: 100px !important; padding: 4px !important; align-self: start !important; } body[data-kc-page="miniatures"] main article > div:first-child > div, body[data-kc-page="miniatures"] main article > div:first-child image-slot { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; } body[data-kc-page="miniatures"] main article > div:last-child { min-width: 0 !important; padding: 12px 10px !important; } body[data-kc-page="miniatures"] main article h3 { margin-bottom: 5px !important; font-size: 15px !important; line-height: 1.08 !important; } body[data-kc-page="miniatures"] main article > div:last-child > p:not([style*="letter-spacing"]) { margin-bottom: 8px !important; font-size: 12px !important; line-height: 1.28 !important; } body[data-kc-page="miniatures"] main article dl { grid-template-columns: 72px minmax(0, 1fr) !important; gap: 3px 6px !important; margin-bottom: 10px !important; font-size: 11px !important; } body[data-kc-page="miniatures"] main article dl dt { padding-right: 5px !important; } body[data-kc-page="miniatures"] main article a { padding: 6px 10px !important; font-size: 8px !important; } body[data-kc-page="shows"] main article { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) 74px !important; gap: 10px !important; align-items: start !important; padding: 14px 0 !important; min-height: 0 !important; } body[data-kc-page="shows"] main article > div:first-child { min-width: 46px !important; width: 46px !important; } body[data-kc-page="shows"] main article > div:first-child > div:first-child { font-size: 25px !important; } body[data-kc-page="shows"] main article > div:nth-child(2) { min-width: 0 !important; } body[data-kc-page="shows"] main article h3 { margin-bottom: 4px !important; font-size: 16px !important; line-height: 1.08 !important; } body[data-kc-page="shows"] main article p { margin-bottom: 8px !important; font-size: 12px !important; line-height: 1.32 !important; } body[data-kc-page="shows"] main article > div:last-child { width: 74px !important; min-width: 74px !important; height: 96px !important; padding: 3px !important; } body[data-kc-page="shows"] main article > div:last-child > div, body[data-kc-page="shows"] main article > div:last-child image-slot { width: 100% !important; height: 100% !important; } body[data-kc-page="shows"] main section:last-of-type { padding-top: 22px !important; } body[data-kc-page="shows"] main section:last-of-type > div:first-child { margin-bottom: 12px !important; } body[data-kc-page="shows"] main section:last-of-type li { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 3px 8px !important; padding: 8px 0 !important; } body[data-kc-page="shows"] main section:last-of-type li > span:first-child { grid-row: 1 / span 2 !important; font-size: 9px !important; } body[data-kc-page="shows"] main section:last-of-type li > span:nth-child(2) { font-size: 13px !important; line-height: 1.1 !important; } body[data-kc-page="shows"] main section:last-of-type li > span:last-child { grid-column: 2 !important; font-size: 11px !important; line-height: 1.15 !important; } /* About: profile first, metadata second. */ body[data-kc-page="about"] main > section[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 16px !important; padding-top: 18px !important; } body[data-kc-page="about"] main > section[style*="grid-template-columns"] > div:first-child { width: min(100%, 190px) !important; margin-inline: auto !important; } body[data-kc-page="about"] main > section[style*="grid-template-columns"] > div:first-child > div { padding: 6px !important; } body[data-kc-page="about"] main > section[style*="grid-template-columns"] > div:first-child image-slot { width: 100% !important; height: 238px !important; } body[data-kc-page="about"] main > section[style*="grid-template-columns"] h2 { margin-bottom: 10px !important; font-size: 20px !important; } body[data-kc-page="about"] main > section[style*="grid-template-columns"] > div:last-child > p { margin-bottom: 10px !important; font-size: 13.5px !important; line-height: 1.38 !important; } body[data-kc-page="about"] main > section[style*="grid-template-columns"] dl { grid-template-columns: 62px minmax(0, 1fr) !important; gap: 5px 8px !important; margin-bottom: 16px !important; padding-top: 12px !important; font-size: 12px !important; } /* Contact: make the form a short, calm sequence of fields. */ body[data-kc-page="contact"] main #contact-form { padding-top: 16px !important; } body[data-kc-page="contact"] main #contact-form > div { padding: 18px 14px !important; } body[data-kc-page="contact"] main #contact-form h3 { font-size: 20px !important; } body[data-kc-page="contact"] main #contact-form > div > p { margin-bottom: 14px !important; font-size: 13px !important; line-height: 1.3 !important; } body[data-kc-page="contact"] main #contact-form form { gap: 12px !important; padding: 0 !important; } body[data-kc-page="contact"] main #contact-form form > div:first-child { gap: 10px !important; } body[data-kc-page="contact"] main #contact-form label span { margin-bottom: 4px !important; font-size: 9px !important; } body[data-kc-page="contact"] main #contact-form textarea { min-height: 120px !important; } body[data-kc-page="contact"] main > section[style*="grid-template-columns"] { padding-top: 16px !important; gap: 16px !important; } body[data-kc-page="contact"] main > section[style*="grid-template-columns"] > div:first-child { padding: 16px 14px !important; } body[data-kc-page="contact"] main > section[style*="grid-template-columns"] h2 { font-size: 20px !important; } body[data-kc-page="journal"] main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 14px !important; padding: 18px 0 !important; } body[data-kc-page="journal"] main image-slot { width: 100% !important; height: 180px !important; } body[data-kc-page="contact"] main section[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 18px !important; padding: 18px 0 !important; } body[data-kc-page="contact"] main image-slot { width: 100% !important; height: 180px !important; } /* ── FOOTER ── */ footer > div:not([class]) { grid-template-columns: 1fr !important; text-align: center !important; padding: 0 12px !important; gap: 16px !important; } footer > div:not([class]) > div:first-child { order: -1 !important; } footer nav { flex-direction: column !important; align-items: center !important; gap: 6px !important; } footer nav a { font-size: 10px !important; } /* ── CONTACT FORM ── */ form { max-width: 100% !important; padding: 0 10px !important; } input[type="text"], input[type="email"], textarea, select { font-size: 16px !important; padding: 10px 12px !important; width: 100% !important; } /* ── ABOUT PAGE: portrait + text stack ── */ main > div[style*="1fr 1fr"] { grid-template-columns: 1fr !important; } /* ── MINIATURES GALLERY: 280px grid → 1 col ── */ main > div[style*="280px"] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; } /* ── SHOW/EVENT CARDS ── */ main article { padding: 12px !important; margin-bottom: 12px !important; } /* ── THEATRE BANNER DECORATIONS: hide heavy absolute elements ── */ section[style*="min-height: clamp"] > div[style*="position: absolute"][style*="inset: 0"] { /* Keep gradients but kill oversized decorations */ transform: none !important; } /* ── MAX WIDTH CONTAINERS: let them breathe ── */ [style*="max-width: 320px"] { max-width: 100% !important; } [style*="max-width: 480px"] { max-width: 100% !important; } [style*="max-width: 520px"] { max-width: 100% !important; } [style*="max-width: 560px"] { max-width: 100% !important; } [style*="max-width: 640px"] { max-width: 100% !important; } /* ── HOME PAGE HERO BUTTONS: shrink Etsy/Instagram ── */ section + div a[href*="etsy"], section + div a[href*="instagram"] { width: 80px !important; height: 50px !important; font-size: 7px !important; } /* ── PAGE OVERFLOW PROTECTION ── */ /* Keep overflow containment at the page boundary. Applying max-width and overflow rules to every descendant was hiding the offending element and clipping legitimate hero/content layers. */ html, body { overflow-x: hidden !important; } } @media (max-width: 400px) { [data-kc-mark] > span:first-child { font-size: 18px !important; } [data-kc-nav] a { font-size: 8px !important; padding: 4px 6px !important; } article > div:last-child p { font-size: 12px !important; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }