/* Oliver Hayward Play Barn. Design preview. No build step required. */
:root { --ink:#153c48; --text:#49626a; --paper:#fffdf8; --yellow:#ffca51; --mint:#eaf2e9; --pink:#f9e8e6; --blue:#eaf1f5; --line:#dce5df; --serif:'Fraunces',Georgia,serif; --sans:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:130px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
body.dialog-open { overflow:hidden; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { color:inherit; cursor:pointer; }
a { color:inherit; text-underline-offset:4px; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #22777c; outline-offset:5px; }
img { display:block; width:100%; }
svg { display:block; }
button { border:0; }
[hidden] { display:none !important; }
.wrap { width:min(1180px,calc(100% - 104px)); margin-inline:auto; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { color:var(--ink); }
h1,h2 { font-family:var(--serif); font-weight:650; line-height:1.07; letter-spacing:-1.6px; }
h2 { font-size:clamp(32px,3.2vw,43px); }
h3 { font-family:var(--serif); font-size:25px; line-height:1.2; font-weight:600; letter-spacing:-.5px; }
.skip { position:absolute; z-index:20; top:-80px; left:20px; background:var(--ink); color:white; padding:12px 20px; }
.skip:focus { top:0; }
.preview-bar { padding:7px 28px; font-size:11px; letter-spacing:.04em; background:#edf1ed; color:#425b5d; display:flex; justify-content:center; gap:22px; align-items:center; }
.preview-bar button { background:none; font-size:11px; text-decoration:underline; text-underline-offset:3px; padding:0; }
.header { position:sticky; top:0; z-index:10; background:rgba(255,253,248,.96); backdrop-filter:blur(12px); }
.header-inner { min-height:106px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.brand-star { width:66px; height:66px; color:var(--yellow); transform:rotate(-9deg); flex-shrink:0; }
.brand strong { display:block; font-family:var(--serif); font-size:24px; line-height:1.2; font-weight:650; letter-spacing:-.7px; }
.brand small { display:block; font-size:10px; letter-spacing:.29em; font-weight:700; margin-top:4px; }
.nav { display:flex; align-items:center; gap:29px; font-size:13px; font-weight:600; }
.nav>a { text-decoration:none; padding-block:12px; }
.nav>a:hover { box-shadow:0 2px var(--yellow); }
.menu-toggle { display:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:29px; min-height:54px; padding:15px 23px; border-radius:8px; background:var(--yellow); color:#17323b; font-weight:700; font-size:14px; text-decoration:none; line-height:1.3;  }

.button span { font-size:22px; font-weight:400; line-height:1; }
.button.small { font-size:13px; min-height:46px; padding:13px 20px; gap:19px; }
.text-link { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-weight:600; font-size:13px; padding-block:8px; background:none; }
.text-link:hover { text-decoration:underline; }
.hero { display:grid; grid-template-columns:1.04fr 1fr; align-items:center; gap:64px; padding-block:47px 64px; }
.eyebrow { font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:#4a7171; margin-bottom:20px; }
h1 { font-size:clamp(50px,5.1vw,71px); line-height:1.055; letter-spacing:-2.3px; }
h1 span { color:#36766c; }
.hero-intro { color:var(--text); max-width:390px; font-size:16px; line-height:1.75; margin-top:24px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:29px; }
.hero-actions .text-link { font-size:12px; }
.hero-note { display:flex; align-items:center; gap:9px; color:#617573; margin-top:26px; font-size:11px; }
.dot { width:6px; height:6px; background:#75a99d; border-radius:50%; }
.hero-art { position:relative; padding:3px 0 14px 10px; }
.photo-frame { position:relative; border-radius:46% 46% 14px 14px; aspect-ratio:1.04; background:#d4e6da; isolation:isolate; }
.photo-frame:before { content:''; position:absolute; inset:7px -13px -13px 10px; border-radius:46% 46% 15px 15px; background:#e5eddf; z-index:-1; }
.hero-photo { height:100%; object-fit:cover; object-position:50% 57%; border-radius:inherit; }
.image-label { position:absolute; left:16px; bottom:12px; font-size:9px; line-height:1.5; letter-spacing:.03em; color:white; border-radius:4px; background:rgba(15,39,44,.72); padding:3px 7px; }
.floating-star { position:absolute; right:-29px; top:0; width:94px; height:94px; color:var(--yellow); transform:rotate(17deg); }
.art-line { position:absolute; width:39px; height:24px; border:2px solid #bd6c62; border-bottom:0; border-left:0; border-radius:0 100% 0 0; left:-22px; bottom:39px; transform:rotate(-40deg); }
.quick-facts { display:grid; grid-template-columns:1fr 1.12fr 1.17fr; border-block:1px solid var(--line); padding:24px 0; }
.quick-facts>div { display:flex; align-items:center; justify-content:center; gap:16px; font-size:11px; color:var(--text); }
.quick-facts>div:not(:last-child) { border-right:1px solid var(--line); }
.quick-facts strong { display:block; color:var(--ink); font-weight:600; font-size:13px; margin-top:2px; }
.quick-facts svg { width:26px; height:26px; fill:none; stroke:#4d7c6d; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.fact-icon { color:#4d7c6d; font-size:29px; line-height:1; }
.section { padding-block:81px 69px; }
.section-heading { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; margin-bottom:32px; }
.section-heading .eyebrow { margin-bottom:12px; }
.section-heading>p { color:var(--text); font-size:13px; padding-bottom:3px; }
.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.activity { padding:29px 27px 20px; border-radius:12px; display:flex; flex-direction:column; }
.play-card { background:var(--mint); }
.music-card { background:var(--pink); }
.party-card { background:var(--blue); }
.activity-symbol { width:43px; height:43px; margin-bottom:23px; }
.activity-symbol svg { width:100%; height:100%; stroke:#477e65; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.music-card .activity-symbol svg { stroke:#b86e71; }
.party-card .activity-symbol svg { stroke:#508399; }
.card-kicker { font-size:9px; font-weight:650; margin-bottom:12px; color:#526b67; }
.activity h3 { margin-bottom:12px; font-size:25px; }
.activity>p:not(.card-kicker) { color:var(--text); font-size:13px; line-height:1.75; }
.card-bottom { margin-top:auto; padding-top:22px; }
.price { font-size:26px; font-family:var(--serif); line-height:1.3; }
.price span { font:11px var(--sans); color:var(--text); margin-left:3px; }
.card-detail { font-size:10px; min-height:45px; padding:10px 0 13px; color:var(--text); }
.price-details { min-height:45px; font-size:11px; }
summary { cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
.price-details summary { padding:10px 0 13px; display:flex; align-items:center; gap:15px; font-size:10px; }
summary>span { font-size:19px; line-height:1; font-weight:400; transition:transform .15s; }
details[open]>summary>span { transform:rotate(45deg); }
dl { margin:0 0 16px; }
dl>div { display:flex; justify-content:space-between; gap:10px; margin:7px 0; }
dd { margin:0; font-weight:650; }
.card-link { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; padding:16px 0 1px; border-top:1px solid rgba(31,68,67,.18); text-align:left; background:none; font-weight:700; font-size:12px; }
.card-link>span { font-size:22px; font-weight:400; }
.card-link:hover { text-decoration:underline; text-underline-offset:4px; }
.section-footnote { color:#697b78; font-size:10px; margin-top:21px; text-align:center; }
.visit-section { background:#f2f5ef; padding-block:70px; }
.visit-grid { display:grid; grid-template-columns:1fr 1fr; gap:76px; align-items:center; }
.visit-image { position:relative; padding-bottom:92px; }
.visit-photo-crop { width:100%; height:345px; overflow:hidden; border-radius:12px; }
.visit-photo-crop>img { width:100%; height:100%; object-fit:cover; object-position:35% center; }
.visit-image .image-label { bottom:105px; }
.visit-caption { position:absolute; bottom:0; right:-17px; left:56px; min-height:122px; background:var(--paper); border-radius:10px; display:flex; align-items:center; gap:22px; padding:23px 28px; font-family:var(--serif); font-size:22px; line-height:1.35; }
.visit-caption strong { font-weight:600; }
.small-star { width:64px; height:64px; color:var(--yellow); transform:rotate(-11deg); }
.visit-copy .eyebrow { margin-bottom:15px; }
.visit-copy>p:not(.eyebrow) { margin:20px 0; color:var(--text); font-size:14px; line-height:1.8; }
.facility-tags { display:flex; flex-wrap:wrap; gap:7px 18px; font-size:11px; font-weight:650; margin-bottom:27px; }
.facility-tags span:before { content:'✓'; font-weight:400; padding-right:6px; color:#49765b; }
.faq { border-top:1px solid #cedbcf; }
.faq details { border-bottom:1px solid #cedbcf; }
.faq summary { padding:17px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; font-weight:650; }
.faq details p { color:var(--text); padding:0 16px 16px 0; font-size:12px; }
.faq .text-link { margin-bottom:14px; }
.contact-section { padding-block:75px 82px; display:grid; grid-template-columns:1fr 1.16fr; align-items:center; gap:80px; }
.contact-section .eyebrow { margin-bottom:13px; }
.contact-section .button { margin-top:25px; min-width:159px; }
.contact-details { display:grid; grid-template-columns:1fr 1.1fr; gap:35px; }
.contact-details h3 { font:700 12px var(--sans); margin-bottom:15px; }
.contact-details p,.contact-details a { font-size:12px; line-height:1.9; }
.contact-details p { color:var(--text); }
.contact-details a { display:block; text-decoration:none; }
.contact-details a:hover { text-decoration:underline; }
.contact-details .text-link { font-weight:650; padding:8px 0 0; }
.email-link { overflow-wrap:anywhere; }
.contact-hours { margin-top:18px; }
.footer { background:var(--ink); color:#e1ece7; padding:34px 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.footer-brand strong { color:#fffdf8; font-size:20px; }
.footer-brand .brand-star { width:48px; height:48px; }
.footer-brand small { font-size:8px; }
.footer p { font-size:11px; color:#d0deda; }
.footer button { padding:8px 0; background:none; color:#d0deda; font-size:10px; text-align:right; }
.footer button:hover { text-decoration:underline; }
.dialog { border:0; padding:30px; border-radius:16px; width:min(570px,calc(100% - 36px)); max-height:90dvh; overflow-y:auto; color:var(--ink); background:var(--paper); box-shadow:0 24px 100px #102f4444; }
.dialog::backdrop { background:rgba(10,38,45,.55); backdrop-filter:blur(5px); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; gap:16px; }
.dialog-top .eyebrow { margin:0; }
.close-dialog:not(.button) { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:50%; background:#eaf0e9; font-size:25px; line-height:1; }
.dialog h2 { font-size:37px; letter-spacing:-1.1px; margin-bottom:20px; }
.prose { font-size:13px; color:var(--text); }
.prose p { margin-bottom:18px; }
.prose strong { color:var(--ink); }
.prose ul { padding-left:18px; margin-bottom:20px; }
.prose li { margin:9px 0; }
.prose summary { padding:7px 0 14px; color:var(--ink); text-decoration:underline; }
.prose+.button { margin-top:18px; }
.detail-box { padding:19px 21px; border-radius:9px; background:var(--mint); margin:16px 0 20px; }
.detail-box p { margin-bottom:15px; font-size:13px; }
.detail-box p:last-child { margin-bottom:0; }
.demo-note { font-size:11px; line-height:1.65; color:#546a70; background:#eef1f4; padding:12px 15px; border-radius:7px; margin-bottom:21px; }
.field-label { display:block; font-size:12px; font-weight:700; margin:17px 0 7px; }
input,select { width:100%; min-width:0; border:1px solid #c6d5cc; border-radius:6px; background:white; color:var(--ink); min-height:46px; padding:10px 12px; font-size:14px; }
.date-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.date-row:has(#party-time-wrap[hidden]) { grid-template-columns:1fr; }
.field-help { font-size:10px; line-height:1.7; color:#627572; margin:7px 0 12px; }
fieldset { border:0; padding:0; margin:22px 0 0; min-width:0; }
legend { padding:0; font-size:14px; font-weight:700; }
.ticket-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid #e1e9e1; }
.ticket-row label { display:block; font-size:12px; }
.ticket-row strong { display:block; font-weight:600; }
.ticket-row label>span { color:#69817b; font-size:11px; }
.stepper { display:flex; align-items:center; border:1px solid #cedacd; border-radius:7px; overflow:hidden; flex-shrink:0; }
.stepper button { width:34px; height:40px; padding:0; background:#edf3e9; font-size:19px; }
.stepper button:disabled { opacity:.35; cursor:default; }
.stepper input { min-height:40px; height:40px; padding:0; width:36px; text-align:center; border:0; border-radius:0; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.booking-total { margin:22px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:650; }
.booking-total output { font:600 30px var(--serif); }
.full-width { width:100%; }
.form-note { font-size:10px; text-align:center; margin:13px 0 0; color:#677f76; }
.booking-error { background:#fbe6de; color:#872f25; border:1px solid #d99787; padding:12px; border-radius:6px; margin-top:18px; font-size:12px; }
.review-star { display:block; color:var(--yellow); width:65px; height:65px; margin:18px auto; }
#booking-review h3 { text-align:center; }
#review-details { overflow-wrap:anywhere; }
#review-details dl { font-size:13px; }
#review-details dd { text-align:right; max-width:65%; }
.review-buttons { display:flex; flex-wrap:wrap; gap:20px; align-items:center; }
.noscript-note { background:#ffe9bc; padding:18px; text-align:center; }
@media(min-width:1400px) { .hero { padding-top:63px; padding-bottom:74px; }.hero-art { max-width:520px; }.hero-intro { font-size:17px; } }
@media(max-width:1090px) { .wrap { width:calc(100% - 64px); }.header-inner { min-height:95px; }.nav { gap:20px; }.brand strong { font-size:22px; }.brand-star { width:57px; height:57px; }.hero { gap:37px; padding-top:40px; }h1 { font-size:54px; }.hero-actions { gap:12px; }.hero-actions .text-link { font-size:11px; }.activity { padding-inline:21px; }.activity h3 { font-size:23px; }.visit-grid { gap:48px; }.visit-photo-crop { height:320px; }.visit-caption { left:22px; padding:20px; font-size:20px; }.contact-section { gap:45px; grid-template-columns:.9fr 1.2fr; }.contact-details { gap:22px; } }
@media(max-width:820px) { .header-inner { min-height:86px; }.nav { gap:15px; }.nav>a { font-size:11px; }.nav .button { font-size:11px; padding:12px 14px; gap:11px; }.brand strong { font-size:19px; }.brand-star { width:49px; height:49px; }.brand small { font-size:8px; }.hero { gap:30px; }h1 { font-size:46px; }.hero-intro { font-size:14px; }.hero-actions { gap:10px; }.hero-actions .button { font-size:12px; gap:16px; }.floating-star { width:70px; height:70px; right:-18px; }.quick-facts>div { gap:10px; font-size:10px; }.quick-facts strong { font-size:11px; }.activity-grid { gap:13px; }.activity { padding:24px 18px 17px; }.activity h3 { font-size:21px; }.card-kicker { min-height:26px; font-size:9px; }.price { font-size:24px; }.price span { display:block; margin:4px 0 0; }.card-detail { min-height:57px; }.price-details { min-height:57px; }.card-link { font-size:11px; }.visit-grid { gap:34px; }.visit-caption { font-size:18px; left:17px; right:0; gap:14px; }.visit-copy h2 { font-size:32px; }.visit-copy>p:not(.eyebrow) { font-size:13px; }.facility-tags { font-size:10px; gap:6px 10px; }.contact-section { gap:40px; grid-template-columns:.85fr 1.2fr; }.contact-details { grid-template-columns:1fr; gap:25px; }.contact-hours { margin-top:10px; }.footer p { display:none; } }
@media(max-width:640px) { html { scroll-padding-top:100px; }.wrap { width:calc(100% - 40px); }.preview-bar { justify-content:space-between; padding:6px 20px; font-size:9px; gap:6px; }.preview-bar button { font-size:9px; }.header-inner { min-height:81px; }.brand-star { width:47px; height:47px; }.brand { gap:7px; }.brand strong { font-size:20px; }.brand small { font-size:8px; margin-top:4px; }.menu-toggle { display:flex; align-items:center; gap:8px; padding:12px 0 12px 12px; background:none; font-size:12px; font-weight:650; }.menu-toggle svg { width:19px; height:19px; fill:none; stroke:var(--ink); stroke-width:1.6; }.nav { display:none; position:absolute; top:81px; left:0; right:0; background:var(--paper); padding:16px 20px 23px; border-bottom:1px solid var(--line); box-shadow:0 18px 25px #183b3d0a; }.nav.open { display:flex; flex-direction:column; align-items:stretch; gap:7px; }.nav>a { padding:12px 4px; font-size:14px; }.nav .button { font-size:14px; min-height:48px; }.hero { grid-template-columns:1fr; gap:32px; padding-block:25px 34px; }.hero-copy { padding-inline:3px; }.eyebrow { font-size:9px; margin-bottom:15px; }h1 { font-size:clamp(43px,10.5vw,60px); letter-spacing:-1.5px; }.hero-intro { font-size:14px; line-height:1.75; margin-top:20px; max-width:340px; }.hero-actions { margin-top:22px; gap:16px; }.hero-actions .button { font-size:12px; gap:18px; min-height:50px; padding:14px 17px; }.hero-actions .text-link { font-size:10px; gap:7px; }.hero-note { margin-top:19px; font-size:10px; }.hero-art { padding:0 10px 12px 3px; margin-inline:4px 5px; }.photo-frame { aspect-ratio:1.29; border-radius:42% 42% 12px 12px; }.photo-frame:before { border-radius:42% 42% 12px 12px; inset:7px -8px -8px 7px; }.hero-photo { object-position:50% 56%; }.floating-star { top:3px; right:-7px; width:64px; height:64px; }.art-line { display:none; }.quick-facts { gap:0; grid-template-columns:1fr 1.1fr; padding:18px 0; }.quick-facts>div { justify-content:flex-start; padding:0 8px; gap:10px; }.quick-facts>div:first-child { padding-left:2px; }.quick-facts>div:nth-child(2) { padding-left:19px; border-right:0; }.quick-facts>div:last-child { display:none; }.quick-facts svg { width:21px; height:21px; flex-shrink:0; }.quick-facts strong { font-size:10px; }.quick-facts>div { font-size:9px; }.section { padding-block:45px 40px; }.section-heading { display:block; margin-bottom:24px; }.section-heading>p { margin-top:15px; font-size:12px; }.desktop-only { display:none; }h2 { font-size:34px; letter-spacing:-1px; }.activity-grid { grid-template-columns:1fr; gap:16px; }.activity { padding:25px 25px 20px; display:grid; grid-template-columns:1fr 45px; column-gap:16px; }.activity-symbol { grid-column:2; grid-row:1/4; width:42px; height:42px; margin-bottom:0; }.card-kicker { grid-column:1; font-size:9px; min-height:0; margin-bottom:10px; }.activity h3 { grid-column:1; font-size:26px; margin-bottom:10px; }.activity>p:not(.card-kicker) { grid-column:1/-1; font-size:13px; }.card-bottom { grid-column:1/-1; padding-top:18px; }.price { font-size:25px; }.price span { display:inline; font-size:11px; margin-left:5px; }.card-detail,.price-details { min-height:42px; font-size:11px; }.price-details summary { font-size:11px; }.card-link { padding-top:15px; font-size:12px; }.section-footnote { text-align:left; line-height:1.7; font-size:10px; }.visit-section { padding-block:40px; }.visit-grid { grid-template-columns:1fr; gap:32px; }.visit-image { padding-bottom:65px; }.visit-photo-crop { height:225px; }.visit-caption { min-height:100px; left:55px; padding:17px 23px; font-size:21px; right:0; gap:16px; }.small-star { width:54px; height:54px; }.visit-image .image-label { bottom:78px; left:11px; font-size:8px; }.visit-copy h2 { font-size:35px; }.visit-copy>p:not(.eyebrow) { font-size:13px; }.facility-tags { font-size:11px; margin-bottom:23px; }.faq summary { font-size:12px; min-height:55px; }.contact-section { padding-block:43px; grid-template-columns:1fr; gap:33px; }.contact-section h2 br { display:none; }.contact-section h2 { font-size:34px; }.contact-section .button { margin-top:21px; }.contact-details { grid-template-columns:1fr 1fr; gap:20px; }.contact-details p,.contact-details a { font-size:11px; }.contact-details h3 { font-size:12px; margin-bottom:10px; }.footer { padding:27px 0; }.footer-inner { flex-direction:column; align-items:flex-start; gap:16px; }.footer button { padding:0; font-size:10px; }.footer-brand strong { font-size:21px; }.dialog { width:calc(100% - 22px); padding:22px; max-height:94dvh; border-radius:13px; }.dialog h2 { font-size:32px; }.dialog-top { margin-bottom:15px; }.dialog-top .eyebrow { font-size:9px; }.ticket-row strong { font-size:11px; }.ticket-row label>span { font-size:10px; }.stepper button { width:32px; height:38px; }.stepper input { width:29px; height:38px; min-height:38px; }.dialog .button { font-size:12px; min-height:49px; padding:13px 16px; gap:16px; }.date-row { gap:10px; }.date-row select { font-size:12px; padding-inline:6px; }.dialog input[type=date] { font-size:14px; }.detail-box { padding:15px; }.review-buttons { gap:12px; }.dialog .text-link { font-size:12px; } }


/* Keep the illustration notice clear of the overlapping caption. */
.visit-image .image-label { top:12px; bottom:auto; }


/* Interaction polish, version hover-1.
   No autoplay. Mouse hover and keyboard focus only; nothing depends on hover.
   Motion is opt-in through the visitor's system preference. */
.photo-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.hero-photo,
.visit-photo-crop > img {
  transform-origin: center center;
}

.motion-arrow {
  display: inline-block;
  flex-shrink: 0;
}

.header .brand-star {
  transform-origin: 50% 55%;
}

/* Static emphasis also works for visitors who prefer reduced motion. */
.activity:focus-within {
  box-shadow: 0 14px 30px rgba(21, 60, 72, 0.10);
}

.button:focus-visible {
  background-color: #ffd771;
  box-shadow: 0 7px 16px rgba(21, 60, 72, 0.10);
}

:is(.text-link, .card-link):focus-visible {
  color: #2d6b60;
}

@media (hover: hover) and (pointer: fine) {
  .activity:hover {
    box-shadow: 0 14px 30px rgba(21, 60, 72, 0.10);
  }

  .button:hover {
    background-color: #ffd771;
    box-shadow: 0 7px 16px rgba(21, 60, 72, 0.10);
  }

  :is(.text-link, .card-link):hover {
    color: #2d6b60;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .activity {
    transition: transform 240ms ease, box-shadow 240ms ease;
  }

  .hero-photo,
  .visit-photo-crop > img {
    transition: transform 420ms cubic-bezier(0.2, 0.65, 0.35, 1);
  }

  .button {
    transition:
      background-color 220ms ease,
      color 220ms ease,
      transform 220ms ease,
      box-shadow 220ms ease;
  }

  .text-link,
  .card-link {
    transition: color 220ms ease;
  }

  .motion-arrow {
    transition: transform 220ms ease;
  }

  /* Keyboard users get equivalent feedback when tabbing through the page. */
  .activity:has(:focus-visible) {
    transform: translateY(-5px);
  }

  .button:focus-visible {
    transform: translateY(-1px);
  }

  :is(.button, .text-link, .card-link):focus-visible > .motion-arrow {
    transform: translateX(4px);
  }

  .text-link:focus-visible > .motion-arrow-down {
    transform: translateY(3px);
  }

  .header .brand:focus-visible .brand-star {
    animation: playbarn-star-wiggle 680ms ease-in-out 1;
  }

  @media (hover: hover) and (pointer: fine) {
    .activity:hover {
      transform: translateY(-5px);
    }

    .photo-frame:hover .hero-photo,
    .visit-photo-crop:hover > img {
      transform: scale(1.035);
    }

    .button:hover {
      transform: translateY(-1px);
    }

    :is(.button, .text-link, .card-link):hover > .motion-arrow {
      transform: translateX(4px);
    }

    .text-link:hover > .motion-arrow-down {
      transform: translateY(3px);
    }

    .header .brand:hover .brand-star {
      animation: playbarn-star-wiggle 680ms ease-in-out 1;
    }
  }
}

/* Start and finish at the logo's original tilt. Only the header star moves. */
@keyframes playbarn-star-wiggle {
  0%, 100% { transform: rotate(-9deg) scale(1); }
  20% { transform: rotate(-16deg) scale(1.02); }
  40% { transform: rotate(-3deg) scale(1.03); }
  60% { transform: rotate(-13deg) scale(1.02); }
  80% { transform: rotate(-7deg) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}