/* The Tunbridge Wells List — site styles. Mobile first, no framework.
   Accent: Kent flag red #c8102e (fills, rules, header, panel, buttons) on a light cream page; text in red uses the
   darker #a50d26 so it passes AA everywhere. Buttons use the site font (Libre Baskerville).
   Contrast (WCAG 2.x): cream #f3e7d6 on #c8102e 4.82:1 (AA); cream on #a50d26 hover 6.41:1; #a50d26 on page #fffdf9 7.70:1 (AAA);
   #a50d26 on cream #f3e7d6 6.41:1 and on #eddbc3 5.78:1; #5c0a17 on WhatsApp green 7.01:1; muted #4a4339 on page 9.60:1. */
:root{--page:#fffdf9;--cream:#eddbc3;--cream-text:#f3e7d6;--red:#c8102e;--red-text:#a50d26;--red-hover:#a50d26;--red-deep:#5c0a17;--ink:#111;--muted:#4a4339;--line:#c8102e;--wa:#25D366;--wa-hover:#1fbf5a;--serif:'Libre Baskerville',Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.65}
a{color:var(--red-text)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:640px;margin:0 auto;padding:0 18px;display:block}
:focus-visible{outline:3px solid #b8860b;outline-offset:2px}

.masthead{background:var(--red);color:var(--cream-text)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.masthead a{color:var(--cream-text)}
.masthead .wrap{gap:12px}
.brand{font-weight:700;font-size:19px;text-decoration:none;white-space:nowrap}
.masthead nav{display:flex;gap:14px;flex-shrink:0;white-space:nowrap}
.masthead nav a{font-size:15px}
@media (max-width:359px){.brand{font-size:17px}.masthead nav{gap:10px}.masthead nav a{font-size:14px}}

main{padding:24px 0 48px}
h1{font-size:30px;line-height:1.25;margin:8px 0 14px;color:var(--red-text)}
h2{font-size:24px;line-height:1.3;margin:44px 0 8px;padding-bottom:8px;border-bottom:3px solid var(--line);color:var(--red-text)}
h3{font-size:21px;line-height:1.35;margin:0 0 12px;color:var(--red-text)}
h3 a{text-decoration:none}
h3 a:hover,h3 a:focus{text-decoration:underline}
.kicker{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.kicker a{color:var(--muted)}
.lede{font-size:18px}

.event{margin:36px 0 0}
.event p{margin:0 0 12px}
.card{margin:0 0 18px;border-radius:8px;overflow:hidden;background:var(--cream)}
/* Event images from the organiser's page: shown whole (never cropped), with a small credit underneath. */
.photo{background:none;border-radius:0;overflow:visible}
.photo img{width:100%;border-radius:8px;background:var(--cream)}
.credit{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
.credit a{color:var(--muted)}

.btn{display:block;text-align:center;font-family:var(--serif);font-weight:700;text-decoration:none;border-radius:8px;line-height:1.3}
.btn-primary{margin:22px 0 0;padding:13px 18px;background:var(--red);color:var(--cream-text);border:2px solid var(--red);font-size:16px}
.btn-primary:hover,.btn-primary:focus{background:var(--red-hover);border-color:var(--red-hover)}
.btn-share{margin:12px 0 0;padding:16px 20px;background:var(--wa);color:var(--red-deep);font-size:18px}
.btn-share:hover,.btn-share:focus{background:var(--wa-hover)}

.home{padding-top:22px}
/* Homepage: a small about line, then one big red panel linking to this week's List. */
.about{font-size:15px;color:var(--muted);margin:0 0 14px;text-align:center}
.hero{background:var(--red);color:var(--cream-text);border-radius:10px;padding:28px 20px;margin:0;text-align:center}
.hero h1{color:var(--cream-text);font-size:32px;margin:4px 0 10px}
.hero-week{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0}
.hero-sub{font-size:18px;margin:0 0 22px}
.btn-hero{padding:16px 20px;font-size:18px;background:var(--cream-text);color:var(--red-text);border:2px solid var(--cream-text)}
.btn-hero:hover,.btn-hero:focus{background:var(--cream);border-color:var(--cream)}
.btn-inline{display:inline-block;padding-left:28px;padding-right:28px}
.back{margin:28px 0 0}

/* Book ahead: a compact diary list, no cards or share buttons (the event pages keep both). */
.diary-list{list-style:none;margin:6px 0 0;padding:0}
.diary-item{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid #d9cbb5}
.diary-item:first-child{border-top:0}
.diary-date{flex:0 0 64px;margin:2px 0 0;padding:6px 0 7px;text-align:center;background:var(--cream);color:var(--red-text);border-radius:6px;line-height:1.1}
.diary-date span{display:block}
.dd-day,.dd-mon{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.dd-num{font-size:24px;font-weight:700;margin:3px 0 2px}
.diary-body{min-width:0}
.diary-name{font-size:17px;line-height:1.4;margin:0 0 3px}
.diary-meta{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.diary-link{display:inline-block;margin:6px 0 0;font-size:15px;font-weight:700}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
footer{border-top:3px solid var(--red);padding:20px 0;font-size:14px;color:var(--muted)}
footer p{margin:0 0 6px}

@media (min-width:700px){
  body{font-size:18px}
  h1{font-size:36px}
  .hero{padding:44px 40px}
  .hero h1{font-size:42px}
  .btn-hero{display:inline-block;min-width:340px}
  .narrow{max-width:680px}
  .brand{font-size:20px}
  .masthead nav{gap:18px}
  .diary-item{gap:22px}
  .diary-name{font-size:18px}
}
/* Laptop and up: card on the left (about 380px), text on the right. */
@media (min-width:760px){
  .wrap{max-width:1000px;padding:0 28px}
  .wrap.narrow{max-width:720px}
  .lede{max-width:720px}
  .event.has-card{display:grid;grid-template-columns:380px minmax(0,1fr);grid-template-areas:"card head" "card text";grid-template-rows:auto 1fr;column-gap:36px;align-items:start}
  .event.has-card .event-head{grid-area:head}
  .event.has-card .card{grid-area:card;margin:0}
  .event.has-card .event-text{grid-area:text}
  .event:not(.has-card){max-width:620px}
  .event-text .btn{max-width:420px}
  .event{margin-top:48px}
  .back,.diary{max-width:720px}
}