/* Ariana CMS 1.68.10 integration and responsive refinements. */ :root{--display:Newsreader,Georgia,serif;--body:Manrope,Arial,sans-serif} body{font-family:var(--body);font-size:1rem}button,input,textarea,select{font:inherit}p{overflow-wrap:anywhere}img{max-width:100%}a{overflow-wrap:anywhere}[hidden]{display:none!important}main{min-height:60vh} .site-header{gap:1.5rem;justify-content:space-between}.site-logo{max-width:190px;max-height:48px;object-fit:contain}.site-header .nav-list{display:flex;gap:clamp(16px,2.2vw,36px);list-style:none;padding:0;margin:0;align-items:center}.site-header .nav-list a{font-size:.875rem}.nav-item{position:relative}.nav-item.is-current>a{border-bottom:1px solid currentColor}.dropdown{display:none;position:absolute;inset-block-start:100%;inset-inline-start:0;min-width:200px;background:var(--paper);color:var(--forest);padding:18px;list-style:none;box-shadow:0 12px 30px #173e3320}.has-dropdown:hover>.dropdown,.has-dropdown:focus-within>.dropdown{display:block}.dropdown a{display:block;padding-block:10px}.site-footer nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px 28px}.site-footer nav{max-width:600px}.site-footer nav a{font-size:.875rem}.inner-page .site-header{position:sticky;inset-block-start:0;color:var(--forest);background:var(--paper)} .page-intro{padding:90px var(--gutter) 70px;background:var(--cream);border-bottom:1px solid var(--line)}.page-intro h1{font:400 clamp(3.4rem,6.5vw,6.5rem)/1.06 var(--display);max-width:1000px;letter-spacing:-.035em;margin:25px 0}.page-intro>p:last-child{max-width:620px;line-height:1.8}.page-intro+.section{padding-top:65px}.inner-page .heritage-stage{top:120px}.support-promise{font:400 clamp(3rem,5vw,5.5rem)/1.1 var(--display)!important;letter-spacing:-.02em!important}.support-number>p{max-width:360px;line-height:1.8}.event-row{text-decoration:none;color:inherit}.event-date span{font-size:.75rem}.events-note{font-size:.875rem}.film-screen video{display:block;width:100%;height:100%;max-height:70svh;object-fit:contain;background:#10291f}.film-modal-copy details{padding-block:20px}.film-modal-copy details p{white-space:pre-line}.hero h1{max-width:750px} .native-form{display:grid;gap:9px;margin-block:24px}.native-form>label{font-size:.875rem;font-weight:600;margin-block-start:12px}.native-form input:not([type=checkbox]),.native-form select,.native-form textarea,.ariana-contact input:not([type=checkbox]),.ariana-contact select,.ariana-contact textarea{box-sizing:border-box;inline-size:100%;min-inline-size:0;border:1px solid #879d91;border-radius:2px;background:var(--paper);color:var(--forest);padding:13px;min-height:48px;font-size:1rem}.native-form .checkbox-label{display:flex;align-items:flex-start;gap:12px;line-height:1.6;font-weight:400}.native-form input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;accent-color:var(--forest);margin-top:3px}.native-form .button{margin-top:15px}.native-form input[type=file]{max-width:100%;font-size:.875rem}.form-privacy,.form-unavailable{font-size:.875rem;line-height:1.8}.form-privacy a{text-decoration:underline}.field-error{color:#922f21;font-size:.875rem}.field-error:empty{display:none}.form-error,.ariana-contact__error,.ariana-contact__error--summary{background:#fff0e9;color:#812e20;padding:16px;border-inline-start:3px solid #ad472d}.form-success,.ariana-contact__sent{background:#e4ecdc;color:#1a4935;padding:18px}.native-form [aria-invalid=true],.ariana-contact__field--invalid input{border-color:#ad472d}.ariana-contact__row{display:grid;gap:18px}.ariana-contact__field{margin-block:18px}.ariana-contact__field label{display:block;margin-block-end:8px}.ariana-contact__submit{background:var(--forest);color:white;padding:16px 24px;border:0;cursor:pointer} .journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.journal-card{border-bottom:1px solid var(--line);padding-bottom:30px;min-width:0}.journal-card img{width:100%;height:auto;aspect-ratio:1.55;object-fit:cover}.journal-card time{display:block;font-size:.875rem;margin-top:20px}.journal-card h2,.journal-card h3{font:400 2rem/1.15 var(--display);margin:18px 0}.journal-card p{font-size:1rem;line-height:1.7}.search-form{max-width:650px;margin-bottom:45px}.search-form label{display:block;margin-bottom:12px}.search-form>div{display:flex;gap:10px}.search-form input{min-width:0;flex:1;padding:12px;border:1px solid #879d91;background:var(--paper)}.pagination,nav[role=navigation]{margin-block:35px}.pagination a,.pagination span{display:inline-flex;padding:12px;min-width:44px;justify-content:center}.author-avatar{border-radius:50%;object-fit:cover}.journal-empty{font-size:1.0625rem;line-height:1.8;max-width:620px} .article-shell{max-width:1280px;margin:auto;padding:65px var(--gutter)}.article-heading{max-width:900px;margin-bottom:40px}.article-heading h1{font:400 clamp(3rem,5vw,5.5rem)/1.1 var(--display);letter-spacing:-.03em;margin:25px 0}.article-heading>p{font-size:1.125rem;line-height:1.8}.article-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:.875rem}.article-cover{width:100%;height:auto;max-height:650px;object-fit:cover}.article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:50px}.article-layout:has(.toc-wrap){grid-template-columns:240px minmax(0,1fr)}.toc-wrap{position:sticky;top:120px;align-self:start;font-size:.875rem;line-height:1.8}.toc-wrap ul{padding-inline-start:18px}.article-body{font-size:1.0625rem;line-height:1.9;min-width:0}.article-body.narrow{max-width:900px;margin:auto}.article-body h2{font:400 2.5rem/1.15 var(--display);margin:48px 0 20px}.article-body h3{font:400 2rem/1.2 var(--display);margin:32px 0 16px}.article-body h4{font-size:1.2rem}.article-body a{text-decoration:underline;text-underline-offset:3px}.article-body ul,.article-body ol{padding-inline-start:26px}.article-body blockquote{border-inline-start:3px solid #879d91;padding:18px 24px;margin:30px 0;background:var(--cream);font-family:var(--display);font-size:1.5rem}.article-body pre{max-width:100%;overflow-x:auto;background:#163d32;color:#f9f8ef;padding:20px;font-size:.875rem}.article-body code{overflow-wrap:anywhere}.article-body img,.article-body video{height:auto;max-width:100%}.ariana-figure{margin:35px 0}.ariana-figure figcaption{font-size:.875rem;color:#52665b}.ariana-table{max-width:100%;overflow-x:auto}.article-body table{border-collapse:collapse;width:100%;font-size:.9375rem}.article-body th,.article-body td{padding:14px;border-bottom:1px solid var(--line);text-align:start}.article-body th{background:var(--cream)}.ariana-faq details{border-block-end:1px solid var(--line);padding:18px 0}.ariana-faq summary{font-weight:600;cursor:pointer}.ariana-author-box{padding:28px;background:var(--cream);margin-block:40px}.ariana-author-box__avatar{width:72px;height:72px;border-radius:50%;object-fit:cover}.ariana-author-box .ariana-author-box__name{font-size:1.75rem;margin:18px 0 8px}.ariana-author-box__role{font-size:.875rem}.ariana-author-box__bio{font-size:1rem}.ariana-summary{padding:24px;background:var(--cream);border-inline-start:3px solid #879d91;margin-bottom:30px}.ariana-summary__title{font-weight:600;font-size:1.125rem}.ariana-summary__text,.ariana-summary__list{font-size:1rem}.ariana-podcast-player{padding:20px;border:1px solid var(--line);margin-block:25px}.ariana-podcast-player audio{width:100%;max-width:100%}.ariana-podcast-player__label{font-weight:600}.ariana-podcast-player__duration{font-size:.875rem}.article-tags,.adjacent-posts{display:flex;flex-wrap:wrap;gap:18px;margin-block:30px}.native-fallback{padding:24px;line-height:1.8} .community-dialog{max-height:90svh;max-width:min(720px,94vw);overflow:auto;overscroll-behavior:contain}.dialog-close{min-width:44px;min-height:44px}.memory-upload-label{min-height:44px}.memory-photo-help,.memory-sharing-intro,.memory-helper,.demo-note,.preview-label{font-size:.8125rem;line-height:1.7}.memory-message-presets button{min-height:40px}.memory-photo-tools input[type=range]{min-height:44px}.chip{min-height:44px}.heritage-stage small{font-size:.8125rem}.hero .eyebrow{font-size:.8125rem}.heritage-chapter{opacity:1}.hero-film .film-kicker{font-size:.75rem}.hero-film .film-note{font-size:.8125rem}.park-journey a{min-width:26px;min-height:26px}.park-journey a span{font-size:.8125rem}.project-page-content article{min-width:0}.project-page-content table{width:100%;font-size:.9375rem}.project-page-content td{overflow-wrap:anywhere}.project-breadcrumb{font-size:.875rem} @media(max-width:1000px){.site-header .nav-list{gap:14px}.site-header .nav-list a{font-size:.8125rem}.park-wordmark-name{font-size:23px}.article-layout:has(.toc-wrap){grid-template-columns:minmax(0,1fr)}.toc-wrap{position:static}.journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.projects-section .project-card{position:static!important}} @media(max-width:900px){.site-header .nav-list{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%}.site-header .nav-list a{font:400 1.7rem/1.4 var(--display);display:block;padding:6px 0}.dropdown{position:static;padding:0 0 0 20px;box-shadow:none;display:block!important;background:transparent}.site-header .dropdown a{font-size:1.15rem}.site-header nav{max-height:calc(100svh - 94px);overflow-y:auto}.hero h1{max-width:680px}.page-intro{padding-block:60px 45px}.heritage-journey{grid-template-columns:1fr}.heritage-stage{position:static}.heritage-chapters{margin-top:30px}.hero-content{padding-top:155px}.memory-grid{min-width:0}.project-page-intro>div{min-width:0}} @media(max-width:640px){.page-intro h1{font-size:3.15rem}.page-intro{padding:50px 6vw 40px}.site-header .site-logo{max-width:175px;max-height:42px}.site-header{gap:12px}.park-wordmark-name{font-size:22px}.journal-grid{grid-template-columns:minmax(0,1fr)}.article-shell{padding-top:40px}.article-heading h1{font-size:2.8rem}.article-body h2{font-size:2rem}.article-body h3{font-size:1.7rem}.search-form>div{flex-wrap:wrap}.search-form input{flex-basis:60%}.hero h1{font-size:clamp(3.6rem,16vw,6rem);max-width:500px;letter-spacing:-.035em}.hero{min-height:790px;height:auto}.hero-content{min-height:660px}.hero-actions{gap:15px}.hero-actions>a:last-child{font-size:.875rem}.hero-description{font-size:1.0625rem}.hero-film{bottom:65px}.hero-bottom{font-size:.75rem}.footer-top{gap:25px}.footer-top .park-wordmark-name{font-size:25px}.footer-top p{font-size:1.7rem}.footer-middle nav ul{flex-direction:column;gap:15px}.site-footer .footer-bottom{gap:20px}.memory-section h2{font-size:2.9rem}.memory-photo-actions{flex-direction:column}.memory-product-controls,.memory-export-options{grid-template-columns:minmax(0,1fr)}.memory-download-actions{flex-direction:column}.memory-message-presets{display:flex;flex-wrap:wrap}.community-dialog-body{padding:30px 22px}.community-dialog h2{font-size:2.5rem}.native-form .button{white-space:normal}.native-form label{font-size:1rem}.event-info strong{font-size:1.7rem}.event-row{gap:16px}.event-date{min-width:42px}.project-page-content table{font-size:.8125rem}.funding-entry{flex-wrap:wrap}.project-page-intro h1{font-size:2.8rem}} @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}.heritage-picture img{transition:none}.projects-section .project-card,.heritage-stage{position:static!important}} @media print{.site-header,.site-footer,.park-journey,dialog{display:none!important}.article-shell{padding:0}.article-layout{display:block!important}.article-body{color:#000}.toc-wrap{display:none}.reveal{opacity:1!important;transform:none!important}} .no-js .site-header nav{display:block;position:static}.no-js .site-header{flex-wrap:wrap;height:auto;padding-block:20px}.no-js .menu-toggle{display:none}.no-js [data-open-support],.no-js [data-submit-idea],.no-js [data-partner-enquiry],.no-js [data-vote]{display:none}.no-js body[data-page="support"] #native-support,.no-js body[data-page="future"] #native-idea,.no-js body[data-page="partners"] #native-partnership,.no-js body[data-page^="projects/"] #native-project_support{display:block;position:static;max-width:760px;max-height:none;margin:30px auto;border:1px solid var(--line)}.no-js dialog .dialog-close{display:none}.no-js .reveal{opacity:1;transform:none} .memory-upload-label{min-width:0;max-width:100%}.memory-upload-label input[type=file]{width:100%;min-width:0;max-width:100%;font-size:.875rem} /* ========================================================================== 1.0.3 — UI audit fixes. Appended after main.css in every document, so equal-specificity rules here win. Each block records the defect it corrects. ========================================================================== */ /* --- 1. Native form controls --------------------------------------------- main.css gave selects a border, padding and background but never removed the native appearance, so macOS/iOS/Android drew their own control on top: grey chrome dropdowns in the middle of the park palette (My Place, the project sort control, every dialog). Same for date, file and range inputs. */ select, .sort-label select, .memory-editor select, .memory-product-controls select, .memory-photo-tools select, .community-dialog select{ -webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23173e33' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px; padding-inline-end:38px;min-height:48px;border-radius:2px;cursor:pointer; text-overflow:ellipsis; } select:focus-visible{outline:2px solid var(--forest);outline-offset:2px} .sort-label select{border:1px solid #bdcbbc} input[type=date],input[type=time],input[type=datetime-local],input[type=number]{ -webkit-appearance:none;appearance:none; background:var(--paper);border:1px solid #bdcbbc;border-radius:2px; padding:11px 12px;min-height:48px;color:var(--ink); } input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;padding:4px;filter:grayscale(1)} input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1} input[type=file]{font-size:.8125rem;color:var(--muted);max-width:100%} input[type=file]::file-selector-button, .memory-upload-label input::file-selector-button, .community-dialog input[type=file]::file-selector-button{ font:600 .8125rem/1 var(--body);background:var(--forest);color:var(--paper); border:0;border-radius:2px;padding:13px 16px;margin:0 12px 0 0;cursor:pointer;min-height:44px; transition:background .2s; } input[type=file]::file-selector-button:hover, .memory-upload-label input::file-selector-button:hover{background:#0f2c24} input[type=file]:focus-visible::file-selector-button{outline:2px solid var(--forest);outline-offset:2px} input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;width:100%;min-height:44px;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#cdd6c4} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--forest);border:2px solid var(--paper);box-shadow:0 1px 4px #173e3340} input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#cdd6c4} input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--forest);border:2px solid var(--paper)} input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--forest);outline-offset:2px} input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--forest);outline-offset:2px} /* details: the browser's default ▶ marker sat next to the design's own type. */ details>summary{list-style:none;cursor:pointer} details>summary::-webkit-details-marker{display:none} .partner-more summary,.park-essentials summary,.ariana-faq summary{min-height:44px;display:flex;align-items:center;gap:10px} .partner-more summary{text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start} .partner-more summary::after{content:'+';margin-inline-start:auto;font-weight:600;font-size:1.05rem;line-height:1;padding-inline-start:14px} .partner-more[open]>summary::after{content:'–'} /* --- 2. My Place studio --------------------------------------------------- The two-column studio only collapsed at 640px, so from 641–1100px the editor column was ~280px wide: the two paired fields truncated their own values and the four artwork buttons wrapped 3 + 1. */ @media(max-width:1100px){ .memory-studio{grid-template-columns:1fr} .memory-editor{border-right:0;border-bottom:1px solid #d6d8ca} .memory-pair,.memory-product-controls,.memory-export-options{grid-template-columns:1fr} .memory-export-options{gap:0} } .memory-preview .memory-designs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px} .memory-designs button{flex:none;min-width:0;width:100%} @media(max-width:1250px){.memory-preview .memory-designs{grid-template-columns:repeat(2,minmax(0,1fr))}} /* --- 3. Map: the info panel covered OpenStreetMap's attribution ----------- .map-place-info is absolutely positioned inside the map at bottom:35px, which on every width below ~900px sat on top of the scale bar and the "© OpenStreetMap contributors" line — attribution the tile licence requires to stay visible. Below 900px the panel now flows under the map; above it, it clears the controls. */ .map-place-info{bottom:46px} @media(max-width:900px){ .map-layout{min-height:0} .map-canvas-wrap{display:flex;flex-direction:column;min-height:0} .map-canvas-wrap #interactive-map{position:relative;inset:auto;height:420px;flex:0 0 auto} .map-canvas-wrap .map-place-info{position:static;width:auto;max-height:none;box-shadow:none;border-top:3px solid var(--forest);border-bottom:1px solid var(--line);bottom:auto;left:auto} .map-canvas-wrap .map-fallback{position:static;inset:auto;margin:0} } /* The place list scrolls inside a fixed height with no affordance that it does, and on a phone it was a nested scroller that clipped a row in half. Below 900px the list simply runs its full length; on desktop it keeps the fixed height and gets a visible scrollbar. */ .map-sidebar{scrollbar-width:thin;scrollbar-color:#bcc7b4 transparent;overscroll-behavior:contain} @media(max-width:900px){.map-sidebar{max-height:none;overflow:visible}} .map-sidebar::-webkit-scrollbar{width:8px} .map-sidebar::-webkit-scrollbar-thumb{background:#bcc7b4;border-radius:4px} .map-sidebar::-webkit-scrollbar-track{background:transparent} /* --- 4. Pointer target sizes --------------------------------------------- WCAG 2.2 AA "Target Size (Minimum)" asks for 24×24 CSS px. The section-rail dots were 9×9, and the header nav links 39px tall. The rail keeps its 9px dot; only the hit area grows. */ .park-journey{padding:10px 6px;gap:2px} .park-journey a{width:26px;height:26px;background:transparent;border:0;border-radius:50%} .park-journey a::after{content:'';position:absolute;inset:8px;border-radius:50%;background:#cad2be;outline:2px solid var(--paper);transition:background .2s} .park-journey a:hover::after{background:#8fa382} .park-journey a[aria-current=location]{background:transparent;box-shadow:none} .park-journey a[aria-current=location]::after{background:var(--forest);outline-color:#b3c697} .park-journey a span{right:35px;top:1px} .park-journey a:focus-visible{outline:2px solid var(--forest);outline-offset:1px} .site-header nav a{padding-block:13px} .site-header nav a:after{bottom:7px} /* Standalone call-to-action links that sat at 19–21px tall. Prose links are left alone — WCAG exempts links inside a sentence. */ .project-card-actions>a,.brand-grid article>a,.partner-more a:not(summary), .map-caption a,.why-bottom a,.heritage-chapters>a,.project-bottom a, .memory-story-strip a,.events-note+a,.shop-footer a{ min-height:44px;display:inline-flex;align-items:center; } /* --- 5. Text that fell below the 12px floor ------------------------------- */ .product-image>span{font-size:.6875rem} .memory-preview-top span{font-size:.6875rem} .logo-placeholder span{font-size:.6875rem} .film-top .image-tag{font-size:.6875rem} .park-wordmark-our{font-size:.6875rem} .hero-bottom a{font-size:.75rem} /* --- 6. Event rows ------------------------------------------------------- align-items:center against a three-line info block dropped the big numeral to the optical middle of the row and let it overflow its 37px column. */ @media(max-width:640px){ .event-row{align-items:flex-start} .event-date{min-width:46px} .event-date strong{font-size:2.375rem} } /* --- 7. Odds and ends ----------------------------------------------------- */ /* The "A COMMUNITY VISION" chip crowded the eyebrow once the row wrapped. */ @media(max-width:640px){.future-top{gap:14px}.future-top .outlined-tag{margin-inline-start:0}} /* Contact page fallback copy while enquiries are closed. */ .contact-closed{display:grid;gap:14px;max-width:640px} .contact-closed .contact-closed-actions{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:6px} .contact-closed .contact-closed-actions a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px} /* --- 8. Second audit pass ------------------------------------------------ What the geometry sweep still flagged after the fixes above. */ /* Targets under the 24px floor that the selectors in §4 did not reach: the partner card's button (a