/* Shared choreography, with quiet defaults and immediate native navigation. */
.title-row{display:block;overflow:clip;padding:.07em .04em .1em;margin:-.07em -.04em -.1em}
.title-line{display:block;transform-origin:left bottom}
.hero h1 .title-row,.hero h1 .title-line{color:inherit}
.motion-pending:not(:focus-within){opacity:0}
.menu-dialog{overflow-y:auto;overscroll-behavior:contain}
.menu-dialog::backdrop{animation:menu-shade-in .22s ease both}
.menu-dialog[data-closing]::backdrop{animation:menu-shade-out .24s cubic-bezier(.4,0,.2,1) both}
.menu-links a{display:flex;align-items:center;justify-content:space-between;gap:20px}
.menu-links a::after{content:'↗';font-family:Body,sans-serif;font-size:23px;opacity:0;translate:-8px 5px;transition:opacity .2s,translate .2s}
.menu-links a:hover::after,.menu-links a:focus-visible::after{opacity:1;translate:0 0}
.menu-links a[aria-current=page]::after{opacity:1;color:#b73e20}
@keyframes menu-shade-in{from{background:#142e3100}to{background:#142e31aa}}
@keyframes menu-shade-out{from{background:#142e31aa}to{background:#142e3100}}
@media(hover:hover) and (pointer:fine){
 .big-story,.archery,.hut,.history-photos a{overflow:hidden}
 .big-story>img,.archery>img,.hut>img,.history-photos img,.section-portrait>img,.page-mast figure>img{transition:scale .75s cubic-bezier(.22,1,.36,1)}
 .big-story:hover>img,.archery:hover>img,.hut:hover>img,.history-photos a:hover img{scale:1.045}
 .crew{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,translate .35s}
 .crew:hover{translate:0 -5px;box-shadow:0 16px 30px #142e3115}
 .text-link{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size .25s}
 .text-link:hover{background-size:100% 1px}
}
.enquiry-result:not([hidden]){animation:content-arrive .4s cubic-bezier(.22,1,.36,1)}
details[open]>:not(summary){animation:content-arrive .28s ease-out}
@keyframes content-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
/* The navigation has its own steady snapshot, outside the content fade. */
.site-header{view-transition-name:site-navigation}
@view-transition{navigation:auto}
::view-transition-group(site-navigation){animation:none;z-index:1}
::view-transition-old(site-navigation){animation:none;display:none}
::view-transition-new(site-navigation){animation:none;opacity:1;mix-blend-mode:normal}
::view-transition-old(root){animation:page-out .14s ease both}
::view-transition-new(root){animation:page-in .22s ease both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .motion-pending{opacity:1!important}
 .menu-dialog::backdrop,.enquiry-result:not([hidden]),details[open]>:not(summary){animation:none}
 @view-transition{navigation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* First-paint entrances are independent of script download and execution. */
@media(prefers-reduced-motion:no-preference){
 .title-line{animation:title-arrive .78s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(80ms + var(--line-index,0)*85ms)}
 :is(.hero,.page-mast,.section-page,.album-mast) :is(.eyebrow,.section-logo,.intro,.hero-top,.section-back),.page-mast>div>p,.section-page>p,.section-page>.button,.album-intro>p,.album-jump{animation:lead-arrive .62s cubic-bezier(.22,1,.36,1) .14s backwards}
 .hero-photo img{animation:hero-photo-arrive 1.25s cubic-bezier(.22,1,.36,1) backwards}
 .page-mast figure,.section-page figure,.album-cover-photo{animation:portrait-arrive .9s cubic-bezier(.22,1,.36,1) .13s backwards}
 .album-small-photo{animation:album-photo-arrive .95s cubic-bezier(.22,1,.36,1) .25s backwards}
 .photo-note,.album-side-note{animation:note-arrive .75s cubic-bezier(.22,1,.36,1) .45s backwards}
 .roundel,.album-stamp{animation:stamp-arrive .72s cubic-bezier(.22,1,.36,1) .35s backwards}
}
@keyframes title-arrive{from{translate:0 105%;opacity:.25;rotate:2deg}to{translate:0 0;opacity:1;rotate:0deg}}
@keyframes lead-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes hero-photo-arrive{from{scale:1.055;opacity:.65}to{scale:1;opacity:1}}
@keyframes portrait-arrive{from{opacity:0;translate:0 25px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes album-photo-arrive{from{opacity:0;translate:0 24px;rotate:-8deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes note-arrive{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes stamp-arrive{from{opacity:0;scale:.72;rotate:-15deg}to{opacity:1;scale:1;rotate:0deg}}
/* Reveal photographs only after download and decode, not on a page-load timer. */
.image-reveals :is(.page-mast figure,.section-page figure,.album-cover-photo,.album-small-photo){animation:none}
.image-reveals .page-mast figure{background:#ece6d6}
.image-reveals [data-reveal-image]:not(.is-image-ready):not(.is-image-error){opacity:0;animation:none}
.image-reveals [data-reveal-image].is-image-error{opacity:1;animation:none}
.image-reveals [data-reveal-image].is-image-ready{animation:ready-photo .65s cubic-bezier(.22,1,.36,1) both}
.image-reveals .hero-photo [data-reveal-image].is-image-ready{animation-duration:.9s}
@keyframes ready-photo{from{opacity:0;scale:1.025}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.image-reveals [data-reveal-image].is-image-ready{animation:none}}

/* A pen-like reveal preserves the original linework, including dashed details. */
@media(prefers-reduced-motion:no-preference){
 .drawing-reveals .drawn-art .draw-stroke{stroke-dashoffset:1;opacity:0}
 .drawing-reveals .drawn-art.draw-in .draw-stroke{animation:ink-trace var(--ink-duration,1000ms) cubic-bezier(.4,0,.2,1) var(--ink-delay,0ms) both}
}
@keyframes ink-trace{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}

.history-narrative:has(>.history-compass)::before{display:none}
.history-compass{position:absolute;right:5%;top:25px;width:115px;height:115px;opacity:.5;transform:rotate(-12deg);pointer-events:none}
@media(max-width:700px){.history-compass{width:70px;height:70px;top:25px;right:15px;opacity:.4}}

/* Restore the underlying menu icon while the opaque panel slides away. */
.mobilemenu[data-menu-closing] :is(.rope-top,.rope-bottom){transform:none}
.mobilemenu[data-menu-closing] .rope-middle{opacity:1}

/* Hero chart waves retain their background placement while tracing as vectors. */
.page-mast:not(.with-photo),.section-page{background-image:none;isolation:isolate}
.hero-wave-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.hero-waves{position:absolute;width:650px;height:406.25px;max-width:none;right:-50px;top:-130px}
.section-page .hero-waves{right:auto;left:calc(95% - 617.5px);top:calc(20% - 81.25px)}
.hero-waves .draw-stroke{--ink-duration:1600ms!important}
@media(max-width:700px){.page-mast .hero-waves{width:440px;height:275px;left:80px;right:auto;top:-55px}}

.album-mast{isolation:isolate}
.album-mast::before{display:none}
.album-mast .hero-wave-layer{inset:-60px -100px auto auto;width:540px;height:540px;opacity:.7}
.album-mast .hero-waves{width:864px;height:540px;left:-162px;right:auto;top:0}

/* Badge labels explain the invitation and stay readable on small screens. */
.hero .roundel{width:194px;height:194px;background:#b73e20;color:#fff6df;gap:10px;padding:23px;transform:rotate(7deg)}
.roundel>.stamp-kicker,.roundel>.stamp-caption{font-size:13px;font-weight:700;letter-spacing:.055em;line-height:1.25}
.roundel>.stamp-caption{font-size:15px}
.roundel .stamp-caption b{font-size:16px;font-weight:700}
.roundel .stamp-title{font-size:34px}
.photo-layout .badge{width:142px;height:142px;padding:18px;gap:7px}
.badge>.stamp-kicker,.badge>.stamp-caption{font-size:10px;font-weight:700;letter-spacing:.025em;line-height:1.25}
.badge .stamp-title{font-size:30px}
.album-collage .album-stamp{width:140px;height:140px;gap:7px;padding:18px}
.album-collage .album-stamp>span{font-size:10px;font-weight:700;letter-spacing:.025em;line-height:1.25;white-space:nowrap}
.album-collage .album-stamp>strong{font-size:28px;line-height:.95}
@media(max-width:700px){
 .hero .roundel{width:140px;height:140px;right:22px;padding:17px;gap:7px}
 .roundel>.stamp-kicker{font-size:11px}
 .roundel>.stamp-caption{font-size:13px}
 .roundel .stamp-title{font-size:25px}
 .photo-layout .badge{width:132px;height:132px;padding:15px;gap:6px}
 .album-collage .album-stamp{width:132px;height:132px;gap:6px;padding:15px}
 .album-collage{margin-bottom:30px}
}
@media(min-width:701px) and (max-width:1100px){.hero .roundel{width:168px;height:168px;padding:20px;gap:8px}.roundel .stamp-title{font-size:30px}}
.album-collage .album-drawn-arrow{left:170px}
@media(max-width:700px){.album-collage .album-drawn-arrow{left:164px;width:65px}}

/* Keep the toggle anchored while only the menu surface moves. */
.menu-dialog{padding:0;background:transparent;overflow:hidden}
.menu-surface{padding:var(--toggle-top,28px) 28px 28px;background:#f2eddf;min-height:100%;height:100%;overflow-y:auto;overscroll-behavior:contain}
.menu-surface .menu-head{height:var(--toggle-height,48px);padding-right:calc(var(--toggle-width,94px) + 14px)}
.menu-surface>p{font-size:10px;letter-spacing:.05em;margin-top:30px}
.menu-dialog>.menu-close{position:fixed;top:var(--toggle-top,16px);right:var(--toggle-right,20px);width:var(--toggle-width,94px);height:var(--toggle-height,48px);z-index:2;letter-spacing:normal}
.menu-dialog[open]>.menu-close .menu-rope{animation:none}

.menu-dialog>.menu-close{padding-right:calc(var(--toggle-icon-right,14px) + 31px)}
.menu-dialog>.menu-close .menu-rope{position:absolute;right:var(--toggle-icon-right,14px)}

/* A continuous ribbon on mobile, with an identical second lap for a clean seam. */
.ticker{position:relative}
.ticker-track,.ticker-group{display:flex;align-items:center;width:100%}
.ticker-group{justify-content:space-around;flex-shrink:0}
.ticker-copy,.ticker-toggle{display:none}
.ticker-group>b:last-child{display:none}
@media(max-width:700px){
 .ticker{padding:0;gap:0;overflow-x:auto;scrollbar-width:none}
 .ticker-track{width:max-content;flex:none}
 .ticker-group{width:auto;justify-content:flex-start;gap:24px;padding:0 4px 0 20px}
 .ticker-group>b:last-child{display:block}
 .ticker-toggle{position:absolute;right:0;top:0;height:58px;width:44px;border:0;border-left:1px solid #183d3e22;background:#e6ec9b;color:#183d3e;font:700 16px Body,sans-serif;box-shadow:-12px 0 14px #e6ec9b;cursor:pointer;z-index:1}
 .ticker-play{display:none;font-size:12px}
 .ticker-toggle[aria-pressed=true] .ticker-pause{display:none}
 .ticker-toggle[aria-pressed=true] .ticker-play{display:inline}
 .ticker-toggle:focus-visible{outline:2px solid #183d3e;outline-offset:-5px}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .ticker.ribbon-ready{overflow:hidden}
 .ribbon-ready .ticker-copy{display:flex}
 .ribbon-ready .ticker-toggle{display:block}
 .ribbon-ready .ticker-track{animation:ribbon-travel 26s linear infinite;animation-play-state:paused}
 .ribbon-running .ticker-track{animation-play-state:running}
}
@keyframes ribbon-travel{to{transform:translateX(-50%)}}

/* Circular labels need clearance from the curved border, not just the box edge. */
.hero .roundel{gap:6px}
.photo-layout .badge,.album-collage .album-stamp{gap:3px}
.badge .stamp-title{font-size:27px}
.badge>.stamp-caption{font-size:8.5px;letter-spacing:0}
.album-collage .album-stamp>strong{font-size:26px}
.album-collage .album-stamp>span:last-child{font-size:8.5px;letter-spacing:0}
@media(max-width:700px){
 .hero .roundel{gap:4px}
 .roundel>.stamp-kicker{font-size:10px}
 .roundel>.stamp-caption{font-size:11px}
 .roundel .stamp-caption b{font-size:12px}
 .badge .stamp-title{font-size:25px}
 .album-collage .album-stamp>strong{font-size:24px}
}

.roundel .stamp-title{font-size:32px}
@media(min-width:701px) and (max-width:1100px){.roundel .stamp-title{font-size:28px}}
@media(max-width:700px){
 .roundel .stamp-title{font-size:23px}
 .badge>.stamp-caption,.album-collage .album-stamp>span:last-child{font-size:8px}
}

/* A tactile invitation: lift the badge, then let the arrow lead. */
.hero .roundel{transition:transform .5s cubic-bezier(.22,1,.36,1),background .3s,box-shadow .5s;box-shadow:0 4px 12px #142e3118}
.hero .roundel .stamp-caption b{display:inline-block;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.hero .roundel:focus-visible{outline:2px solid #fff6df;outline-offset:5px;background:#a93418;box-shadow:0 0 0 8px #183d3e}
@media(hover:hover) and (pointer:fine){
 .hero .roundel:hover{transform:translateY(-7px) rotate(-4deg) scale(1.045);background:#ca4523;box-shadow:0 18px 32px #142e3140,0 4px 0 #8e2d1b}
 .hero .roundel:hover .stamp-caption b{transform:translate(3px,-3px)}
}
.hero .roundel:active{transform:translateY(1px) rotate(3deg) scale(.98);box-shadow:0 2px 6px #142e3130;transition-duration:.12s}
@media(prefers-reduced-motion:reduce){
 .hero .roundel:hover,.hero .roundel:active{transform:rotate(7deg)}
 .hero .roundel:hover .stamp-caption b{transform:none}
}
