/* CacheCalendar.com: one column, phone first, the same look as the approved mockup. */
html{scrollbar-gutter:stable}   /* the page never shifts sideways when a short day has no scroll bar (Lan, Oct. 30, 2026) */
:root{
  --bg:#f3f6f4; --card:#ffffff; --fg:#1d2a26; --muted:#5d6e68; --line:#d5ded9;
  --accent:#2f6b57; --accent-soft:#e1eee8; --weekend:#e2ece7; --title:#7a5512; --bad:#a3352b; --bad-soft:#f7e4e1;
  --display:"Fraunces",Georgia,serif; --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121916; --card:#1b2420; --fg:#e6eee9; --muted:#9db0a8; --line:#2f3d37;
  --accent:#7cc4a8; --accent-soft:#22362e; --weekend:#2b4037; --title:#e9c47e; --bad:#f0a49a; --bad-soft:#3a2220; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 var(--body)}
a{color:var(--accent)}
.wrap{max-width:760px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right)) 64px max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:28px}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.brand{font:700 28px/1.1 var(--display);white-space:nowrap;color:var(--fg);text-decoration:none}
.brand span{color:var(--accent)}
/* Chip In (Lan, Oct. 19, 2026): a real button, gold so posting still reads first. */
.handle{color:var(--title)}
.chip{display:inline-block;border:2px solid var(--title);color:var(--title);border-radius:8px;padding:8px 18px;font-weight:700;text-decoration:none;white-space:nowrap}
.chip:hover,.chip[aria-current="page"]{background:var(--title);color:var(--card)}
.chip-top{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 12px}
.chip-top img{flex:none;margin:-4px 0}
.chip-card{display:flex;align-items:center;gap:24px;margin:36px 0 8px;padding:24px 28px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.chip-card h2{margin:0 0 8px;font:600 24px/1.25 var(--display);color:var(--title)}
.chip-card p{margin:0 0 16px;text-wrap:pretty}
.chip-card img{flex:none}
@media (max-width:560px){.chip-card{flex-direction:column;text-align:center}}
.post{display:inline-block;background:var(--accent);color:var(--card);border-radius:8px;padding:10px 18px;font-weight:600;text-decoration:none}
h1{font:600 30px/1.2 var(--display);margin:0;text-wrap:balance}
.lede{font-size:19px;margin:0;text-wrap:pretty}
.form-page{display:flex;flex-direction:column;gap:20px}
form{display:flex;flex-direction:column;gap:24px}
fieldset{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 18px 22px;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
legend{font:600 20px var(--display);padding:0 6px}
label{font-weight:600;margin-top:10px}
.hint{font-weight:400;color:var(--muted);font-size:15px;margin:0}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
[aria-invalid="true"]{border-color:var(--bad)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.row label{display:block;margin-bottom:8px}
.check{display:flex;align-items:center;gap:10px;font-weight:400}
.check input{width:auto}
.err{color:var(--bad);margin:2px 0 0;font-size:15px;text-wrap:pretty}
.notice{border-radius:10px;padding:12px 16px;margin:0;text-wrap:pretty}
.notice.bad{background:var(--bad-soft);color:var(--fg);border-left:4px solid var(--bad)}
.submit{background:var(--accent);color:var(--card);border:0;border-radius:10px;padding:14px 22px;font:700 18px var(--body);cursor:pointer;align-self:flex-start}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.foot{color:var(--muted);font-size:15px;border-top:1px solid var(--line);padding-top:18px}

/* The banner: full page width, cropped to the mountains. */
.banner{position:relative;height:clamp(180px,28vw,340px);overflow:hidden;background:#3a2a40}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,14,28,.05) 30%,rgba(20,14,28,.55))}
.banner-inner{position:relative;z-index:1;height:100%;max-width:760px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left));
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding-bottom:20px}
.banner-name{font:700 clamp(30px,6vw,56px)/1.05 var(--display);color:#fff;text-decoration:none;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.banner-tag{margin:0;color:#fff;font-size:clamp(16px,2.2vw,20px);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.top{justify-content:flex-end}
.banner img.crop-low{object-position:50% 55%}
.banner img.crop-mid{object-position:50% 40%}
/* Wide monitors (Lan, Oct. 26, 2026): the photos are about 1,700px wide, so past 1,600px stretching them blurs
   and crops the tower. Keep the photo at its own width, centered, and fade its edges into the page. */
@media (min-width:1600px){
  .banner{height:420px;background:var(--bg)}
  .banner img{left:50%;width:1600px;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
            mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
  .banner::after{left:50%;width:1600px;transform:translateX(-50%)}
}

/* Step 2: the month calendar and the day list. */
.cal-page{display:flex;flex-direction:column;gap:32px}
.month{display:flex;flex-direction:column;gap:14px}
.month-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.month-head h1{text-align:center}
.nav{font:600 30px/1 var(--display);text-decoration:none;color:var(--accent);padding:4px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dow{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.day{background:var(--card);border:1px solid var(--line);border-radius:8px;min-height:68px;padding:6px;display:flex;flex-direction:column;gap:4px;
  color:var(--fg);text-decoration:none;font-weight:600}
.day.empty{visibility:hidden}
.day.past{color:var(--muted);border-color:transparent;background:transparent}
.day.today .n{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.day:hover{border-color:var(--accent)}
.day:focus-visible,.nav:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.day.picked:focus-visible{outline-color:var(--fg)}
.day.picked{background:var(--accent);border-color:var(--accent);color:var(--card);opacity:1}
.count{font-size:12px;color:var(--accent);font-weight:600;line-height:1.2}
.holiday{font-size:11px;color:var(--muted);font-style:italic;line-height:1.2}
.day.picked .holiday{color:var(--card)}
.holiday-line{margin:-4px 0 12px;color:var(--muted);font-style:italic}
.day.picked .count,.day.picked .n{color:var(--card)}
.list{display:flex;flex-direction:column;gap:16px;scroll-margin-top:12px}
.list h2{font:600 26px/1.2 var(--display);margin:0}
.ev{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.ev h3{margin:0;font-size:20px;line-height:1.3}
.ev p{margin:0;text-wrap:pretty}
.meta,.host,.addr{color:var(--muted);font-size:15px}
.empty-day{color:var(--muted)}
@media (max-width:480px){.day{min-height:54px;padding:4px}.count{font-size:11px}}

/* Step 4: My events. */
.top{gap:18px;align-items:center}
.mine{font-weight:600;text-decoration:none}
.notice.good{background:var(--accent-soft);border-left:4px solid var(--accent)}
.status{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.status-review{color:var(--muted)}
.status-rejected,.status-canceled{color:var(--bad)}
.why{background:var(--bad-soft);border-radius:8px;padding:10px 14px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.btn{display:inline-block;border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:9px 16px;font-weight:600;text-decoration:none}
.btn.quiet{border-color:var(--line);color:var(--muted)}
.submit.danger{background:var(--bad)}
.mine[aria-current="page"]{color:var(--fg);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* Step 5: accessibility pass. */
.skip{position:absolute;left:-10000px;top:8px;z-index:10;background:var(--card);color:var(--fg);padding:10px 16px;border-radius:8px}
.skip:focus{left:16px}
.nav.off{visibility:hidden}
.ev h3 a{color:var(--fg);text-decoration:none}
.ev h3 a:hover{text-decoration:underline}
.event-page{display:flex;flex-direction:column;gap:14px}
.event-page .facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0}
.event-page dt{color:var(--muted);font-weight:600}
.event-page dd{margin:0;min-width:0}

/* Saturdays and Sundays carry a slight tint (Lan, Oct. 17, 2026). Picked and past days keep their own look. */
.day.weekend{background:var(--weekend)}
.dow.weekend{color:var(--accent)}
.day.weekend.past{background:transparent}
.day.weekend.picked{background:var(--accent)}
.label{font-weight:600;margin-top:10px}
.current-flyer{display:flex;gap:14px;align-items:center;margin:4px 0}
.current-flyer img{border-radius:6px;border:1px solid var(--line)}

/* Flyers: the 8 x 10 thumbnail in the day list, the link, and the panel. */
/* The day's list as an accordion (Lan, Oct. 19, 2026): one line per event, three chevrons to open it. */
.ev details>summary{list-style:none;display:flex;align-items:center;gap:16px;cursor:pointer;margin:-18px -20px;padding:18px 20px;border-radius:10px}
.ev details>summary::-webkit-details-marker{display:none}
.ev details[open]>summary{margin-bottom:0;padding-bottom:12px}
.ev summary:hover .ev-name{text-decoration:underline}
.ev summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ev-line{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px}
.ev-name{font:600 20px/1.3 var(--display);color:var(--title);margin:0}   /* wheat gold in dark, deep bronze in light (Lan, Oct. 19, 2026) */
.ev-town{color:var(--muted);font-size:15px;white-space:nowrap}
.chev{flex:none;stroke:var(--accent);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.ev details[open] .chev{transform:rotate(180deg)}
.ev-mini{flex:none;width:52px;height:68px;object-fit:cover;object-position:top;border-radius:5px;border:1px solid var(--line)}
.ev details[open] .ev-mini{display:none}   /* open, the full thumbnail below takes over */
.ev-panel{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.ev-panel.has-thumb{flex-direction:row;gap:18px;align-items:flex-start}
.ev.has-thumb{flex-direction:row;gap:16px;align-items:flex-start}
.ev-body{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.thumb{flex:none;width:96px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.thumb img{display:block;width:100%;height:auto}
.more{font-weight:700}
.flyer-panel{border:0;border-radius:12px;padding:16px;background:var(--card);color:var(--fg);max-height:92vh;overflow:auto;width:min(92vw,440px)}
.flyer-panel.size-8x10{width:min(92vw,640px)}
.flyer-panel::backdrop{background:rgba(12,18,16,.7)}
.flyer-panel img{display:block;max-width:100%;max-height:calc(92vh - 120px);width:auto;height:auto;border-radius:6px;margin:12px auto}
.flyer-bar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.flyer-close{background:var(--accent);color:var(--card);border:0;border-radius:8px;padding:8px 16px;font:600 15px var(--body);cursor:pointer}
.flyer-full{display:block;max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.flyer-full.size-5x7{width:420px}
.flyer-full.size-8x10{width:640px}
@media (max-width:480px){.thumb{width:72px}}

/* Support page and its quiet asks. */
.qr-box{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px}
.qr-box img{background:#fff;padding:8px;border-radius:8px;max-width:100%;height:auto}
/* Venmo's own wordmark, unaltered, always blue (Lan, Oct. 19, 2026, knowing its rules say white on dark). */
.venmo-logo{display:block;margin:4px 0 6px}
.qr-box .venmo-logo img{background:none;padding:0;border-radius:0;display:block}
.support-ask{background:var(--accent-soft);border-radius:8px;padding:10px 14px}
.preview-mail{border:2px dashed var(--accent);border-radius:10px;padding:14px 18px;background:var(--card);overflow-wrap:anywhere}

.intro{margin:0;color:var(--muted);text-wrap:pretty}

/* "Submit & Chip In", beside "Submit for Free" (Lan, Oct. 19, 2026). Same size as the main button, outlined so posting stays first. */
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form-actions .submit{align-self:auto}
.donate{display:inline-block;background:none;cursor:pointer;border:2px solid var(--accent);color:var(--accent);border-radius:10px;padding:12px 26px;font:700 18px var(--body);text-decoration:none}
.donate:hover{background:var(--accent-soft)}
.form-actions .hint{flex-basis:100%}

/* The town filter above the calendar (Lan: "filters for the calendar, and we need an ALL button"). */
.town-filter{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:4px 0 10px}
.town-filter select{flex:none;width:260px;max-width:100%;height:auto}
.btn.on{background:var(--accent);color:var(--card);border-color:var(--accent)}
.town-name{display:block;font:600 16px var(--body);color:var(--accent);letter-spacing:.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:480px){.town-filter select{width:100%}}

/* Help people find it: the ask to mention CacheCalendar.com. */
.spread{background:var(--accent-soft);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.spread h2{font:600 20px var(--display);margin:0}
.spread p{margin:0;text-wrap:pretty}
.share-link{font-weight:600;overflow-wrap:anywhere;background:var(--card);border-radius:6px;padding:8px 10px}

/* Flyer guidelines. */
.flyer-tips{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.flyer-tips summary{cursor:pointer;font-weight:600;color:var(--accent)}
.flyer-tips ul{margin:10px 0 2px;padding-left:20px;display:flex;flex-direction:column;gap:6px}


/* Terms and privacy. */
.legal{gap:22px}   /* one blank line between paragraphs, not two (Lan, Oct. 27, 2026) */
.legal > p{margin:0}
.legal p,.legal li{max-width:44rem;text-wrap:pretty}
.legal ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}

/* Preview strip (CV-012). */
.preview-strip{margin:0;background:#b9852f;color:#1d2a26;text-align:center;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));font-size:15px}

/* Repeating and multi-day events (CV-015). */
.more-dates{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px}
.more-dates label{margin-top:12px}
.more-dates summary{cursor:pointer;font-weight:600;color:var(--accent)}
.schedule{color:var(--accent);font-weight:600;font-size:15px}
.report-link{margin-top:8px}

/* The Share button (Lan, Oct. 26, 2026). */
.ev-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.share{display:inline-flex;align-items:center;gap:6px;font:600 16px/1 var(--body);color:var(--accent);background:none;border:1px solid var(--accent);border-radius:8px;padding:8px 14px;cursor:pointer}
.share:hover{background:var(--accent-soft)}
.share.done{border-color:var(--title);color:var(--title)}
.about-photo{display:block;width:100%;max-width:640px;height:auto;border-radius:10px;border:1px solid var(--line)}
.about-quote{margin:0;padding:4px 0 4px 20px;border-left:3px solid var(--accent)}
.about-quote p{margin:0 0 6px}
/* A small reminder that a phone can be turned sideways, shown only on a phone held upright (Lan, Oct. 30, 2026). */
.turn-hint{display:none}
@media (max-width:560px) and (orientation:portrait){
  .turn-hint{display:inline-flex;align-items:center;align-self:center;margin-right:auto;color:var(--muted)}
  .turn-hint svg{width:30px;height:30px}
  .turn-hint .ph{fill:currentColor}
  .turn-hint .arc{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
}