/* Keep Cottage Lake Open: site styles.
   Colors: Sailor blue #0F3F80, deep blue #0B2A55, gold #F5C518, paper #F3F1EA */

*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:#F3F1EA}
a{color:#1F63C4}a:hover{color:#0F3F80}
input,select,textarea,button{font:inherit}
html{scroll-behavior:smooth;scroll-padding-top:96px}
img{max-width:100%}
:focus-visible{outline:3px solid #1F63C4;outline-offset:2px}

.lift{transition:translate .25s ease,box-shadow .25s ease}
.lift:hover{translate:0 -6px;box-shadow:0 16px 32px rgba(15,63,128,.18)}

/* Hidden field that only bots fill in */
.hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}

/* QR code: always black on white, whatever dark-mode setting the visitor uses */
:root{color-scheme:light}
.qr{position:relative;background:#FFFFFF !important;forced-color-adjust:none;-webkit-filter:none !important;filter:none !important}
.qr-img{display:block;width:124px;height:124px;image-rendering:pixelated;background:#FFFFFF !important;forced-color-adjust:none;-webkit-filter:none !important;filter:none !important;mix-blend-mode:normal !important}
.qr-logo{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#FFFFFF !important;display:flex;align-items:center;justify-content:center;forced-color-adjust:none}
.qr-logo img{width:24px;height:23px;object-fit:contain;filter:none !important}

/* Form messages */
.form-error{margin:0;padding:12px 14px;border-radius:8px;background:#FDECEC;color:#8A1C1C;font-size:15px;font-weight:700}
.form-error:empty{display:none}
button[disabled]{opacity:.6;cursor:wait !important}
.turnstile-box{min-height:65px}

/* Story filters */
.chip{padding:10px 16px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;border:2px solid #0F3F80;background:#FFFFFF;color:#0F3F80}
.chip[aria-pressed="true"]{background:#0F3F80;color:#FFFFFF}

/* Story cards */
.story{margin:0;flex:0 0 min(360px,82vw);scroll-snap-align:start;border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:16px;min-height:260px}
.story blockquote{margin:0;font-size:18px;color:#1A2233;flex:1;white-space:pre-line;overflow-wrap:anywhere}
.story figcaption{font-size:15px;display:flex;align-items:center;gap:10px}
.story .initial{width:32px;height:32px;border-radius:50%;background:#0F3F80;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.story .role{color:#3D4A5E}
.story:nth-child(4n+1){background:#FFFFFF}
.story:nth-child(4n+2){background:#E3EAF5}
.story:nth-child(4n+3){background:#FDF1C7}
.story:nth-child(4n+4){background:#DCE7F3}

/* Scroll-driven motion (Chrome, Edge, Safari 26+). Others simply show the page without motion. */
.scroll-progress{display:none}
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
.scroll-progress{display:block;position:fixed;top:0;left:0;right:0;height:5px;background:#F5C518;transform-origin:0 50%;z-index:60;animation:cl-grow linear both;animation-timeline:scroll(root)}
.hdr{animation:cl-hdr linear both;animation-timeline:scroll(root);animation-range:0 140px}
.hero-par{animation:cl-par linear both;animation-timeline:scroll(root);animation-range:0 700px}
.hero-float{animation:cl-float linear both;animation-timeline:scroll(root);animation-range:0 700px}
.drift{animation:cl-drift linear both;animation-timeline:scroll(root);animation-range:0 1000px}
.rv{animation:cl-up linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
.rv-l{animation:cl-left linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
.rv-r{animation:cl-right linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
.rv-s{animation:cl-scale linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.spin-in{animation:cl-spin linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.d1{animation-range:entry 6% cover 34%}
.d2{animation-range:entry 12% cover 40%}
.d3{animation-range:entry 18% cover 46%}
.d4{animation-range:entry 24% cover 52%}
}
}

/* Phones */
@media (max-width: 720px){
.nav-link{display:none}
.hdr-in{padding:10px 16px !important;flex-wrap:nowrap !important;gap:10px !important}
.hdr nav a:last-child{padding:9px 12px !important;font-size:15px;white-space:nowrap}
.brand-logo{width:46px !important;height:44px !important}
.brand-name{font-size:19px !important}
section{padding-left:16px !important;padding-right:16px !important}
section.sec{padding-top:56px !important;padding-bottom:56px !important}
section#top{padding-top:28px !important;padding-bottom:48px !important}
section#help{padding-bottom:56px !important}
.letter{padding:24px !important}
.form-card{padding:20px !important}
}

@keyframes cl-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cl-hdr{from{box-shadow:0 0 0 rgba(15,63,128,0)}to{background:#FFFFFF;box-shadow:0 8px 24px rgba(15,63,128,.14)}}
@keyframes cl-par{to{transform:translateY(-90px);opacity:.25}}
@keyframes cl-float{to{transform:translateY(-40px)}}
@keyframes cl-drift{from{transform:translateX(-5vw) rotate(-6deg)}to{transform:translateX(70vw) rotate(6deg)}}
@keyframes cl-up{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes cl-left{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes cl-right{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:none}}
@keyframes cl-scale{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes cl-spin{from{opacity:0;transform:rotate(-120deg) scale(.5)}to{opacity:1;transform:none}}