/* Plus Jakarta Sans, self-hosted. Licence: fonts/OFL.txt */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Design tokens (Cadencia handoff) ===== */
:root{
  --bg:#E7E1D6;
  --panel:#F6F5F2;
  --surface:#FFFFFF;
  --ink:#151515;
  --ink-2:#3E3B36;
  --muted:#6E6A63;
  --meta:#4F4B45;
  --chip:#E3DCCF;
  --chip-hover:#D8D0C1;
  --soft:#EFECE6;
  --accent:#F2560B;
  --accent-ink:#B23E05;
  --bike-light:#F2CDB3; --bike:#E3A982;
  --run-light:#C9D8E8;  --run:#A9C0DA;
  --trail-light:#F0E2B6; --trail:#E2C97E;
  --tri-light:#DDD3E8;  --tri:#C3B1D6;
  --roll-light:#D5E0D0; --roll:#B2C7AB;
  --r-panel:36px; --r-card:24px; --r-chip:10px; --r-pill:999px;
  --shadow-panel:0 30px 60px rgba(107,90,58,.12);
  --shadow-card-hover:0 16px 36px rgba(107,90,58,.14);
  --font:"Plus Jakarta Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font)}
a{color:var(--ink)}a:hover{color:var(--accent-ink)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{position:relative;min-height:100vh;overflow:hidden;padding:28px 16px 48px}
.arcs{position:absolute;left:50%;top:0;transform:translateX(-50%);pointer-events:none}
.panel{position:relative;max-width:1240px;margin:0 auto;background:var(--panel);border-radius:var(--r-panel);padding:32px clamp(18px,4vw,48px) 48px;display:flex;flex-direction:column;gap:36px;box-shadow:var(--shadow-panel)}

/* Header */
.header{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.logo{font-size:24px;font-weight:800;letter-spacing:-.5px;text-decoration:none;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo b{color:var(--accent)}
.search{flex:1 1 300px;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 20px;background:var(--surface);border-radius:var(--r-pill)}
.search:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 16px var(--font);color:var(--ink)}
.search-gap{flex:1 1 0}
.nav{display:flex;gap:22px;font-weight:600;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
/* When the header wraps (tablets), the language switch keeps to the right
   edge instead of trailing the links; in one row the search absorbs the
   free space, so the margin does nothing on the desktop. */
.langs{display:flex;gap:2px;padding:4px;margin-left:auto;background:var(--surface);border-radius:var(--r-pill)}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-block:-2px;padding:0 10px;border-radius:var(--r-pill);color:var(--muted);font-weight:700;font-size:13px;letter-spacing:1px;text-decoration:none}
.lang[aria-current=true],.lang[aria-current=true]:hover{background:var(--ink);color:#fff}
/* Below the width where the header fits in one row — phones and tablets
   held upright — it is three rows: logo with the language switch opposite,
   the search field, the links centred. Only the visual order changes; the
   markup and the tab order stay logo, search, links, switch. */
@media (max-width:900px){
  .header{gap:16px}
  .logo{order:1}
  .langs{order:2}
  .search{order:3;flex-basis:100%}
  .search-gap{display:none}
  .nav{order:4;flex-basis:100%;justify-content:center;gap:32px}
}
/* Three links on one row down to a 360px phone. */
@media (max-width:420px){
  .nav{gap:4px 14px}
}

h1{margin:0;font-size:clamp(38px,5vw,64px);line-height:1.05;font-weight:800;letter-spacing:-2px;overflow-wrap:anywhere}

/* Filters */
.filters{display:flex;flex-direction:column;gap:12px}
.row-wrap{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:0 20px;border-radius:var(--r-chip);border:0;background:var(--chip);color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip:hover{background:var(--chip-hover)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.chip .n{font-size:12px;font-weight:700;opacity:.7}
.cities{display:flex;flex-wrap:wrap;gap:4px 22px}
.city{min-height:44px;padding:0 4px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:600;font-size:15px;cursor:pointer}
.city[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
/* The other towns: reads as one more city in the row, with a small chevron. Underlined like a pressed city once a town is chosen. */
.cities select{min-height:44px;max-width:100%;padding:0 22px 0 4px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236E6A63' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center;color:var(--muted);font:600 15px var(--font);text-overflow:ellipsis;cursor:pointer;appearance:none}
.cities select.chosen{color:var(--ink);border-bottom-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23151515' stroke-width='2'/%3E%3C/svg%3E")}
.cities option{color:var(--ink)}

/* List */
.list{display:flex;flex-direction:column;gap:36px}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.list-head h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-1px}
/* 44px tap target; the negative margins keep the row as tall as the heading */
.subscribe{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;margin-block:-10px;font-weight:700;font-size:16px;text-decoration:none}
.subscribe:hover{color:var(--ink);text-decoration:underline}
.muted{font-weight:600;color:var(--muted)}
.group{display:flex;flex-direction:column;gap:14px}
.group-head{display:flex;align-items:baseline;gap:12px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.group-head h2,.group-head h3{margin:0;font-size:26px;font-weight:800;letter-spacing:-.5px}
.empty{padding:40px;border-radius:var(--r-card);background:var(--soft);text-align:center;font-weight:600;color:var(--muted)}
/* the only call to action when there are no events: a 44px tap target */
.empty a{display:inline-flex;align-items:center;min-height:44px}

/* Event card — structure: [date block] [body] [action] */
.card{position:relative;display:flex;flex-wrap:wrap;background:var(--surface);border-radius:var(--r-card);overflow:hidden;transition:box-shadow .2s,transform .2s;scroll-margin-top:16px}
.card:hover,.card:target{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.date{flex:0 0 104px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 0}
.date .wd,.date .mon{font-size:13px;line-height:16px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.date .day{font-size:48px;font-weight:800;line-height:1;letter-spacing:-1.5px}
/* as tall as the weekday, day and month lines, so the block keeps its height when it stands alone on a phone */
.date .month-only{display:flex;align-items:center;min-height:calc(16px + 48px + 16px);font-size:34px;font-weight:800;line-height:1;letter-spacing:-.5px;text-transform:uppercase}
.date .until{margin-top:4px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.body{flex:999 1 340px;min-width:0;padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding-right:48px}
.tag{padding:4px 12px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--soft)}
/* Outlined label: who can take part, unconfirmed date. The inset border keeps the size of the other tags. */
.tag.t-note{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px currentColor}
/* forced colours drop box shadows; an outline survives */
@media (forced-colors:active){.tag.t-note{outline:1px solid CanvasText;outline-offset:-1px}}
.card h3,.card h4{margin:0;font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.5px;overflow-wrap:anywhere}
/* The name leads to the page of the event or the ride; it reads as a heading until hovered. */
.card h3 a,.card h4 a{color:inherit;text-decoration:none}
.card h3 a:hover,.card h4 a:hover{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.city-line{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--meta);overflow-wrap:anywhere}
.desc{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:640px;white-space:pre-line;overflow-wrap:anywhere}
.links{display:flex;flex-wrap:wrap;gap:6px 20px}
.lnk{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:-8px;padding-top:8px;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(21,21,21,.2)}
.lnk:hover{border-bottom-color:var(--accent-ink)}
.action{flex:1 0 200px;display:flex;align-items:flex-end;justify-content:flex-end;padding:20px 24px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--accent);color:var(--ink)}
.btn-ghost{background:var(--chip);color:var(--ink)}
.btn-ghost:hover{background:var(--chip-hover);color:var(--ink)}
/* Add-to-calendar: hidden until hover/focus; always visible on touch and once added */
.addcal{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .15s,transform .15s}
.card:hover .addcal,.card:focus-within .addcal,.addcal[aria-pressed=true]{opacity:1;transform:scale(1)}
.addcal:hover,.addcal[aria-pressed=true]{background:var(--ink);color:#fff}
.addcal .i-check{display:none}
.addcal[aria-pressed=true] .i-check{display:block}
.addcal[aria-pressed=true] .i-plus{display:none}
@media (hover:none){.addcal{opacity:1;transform:none}}

/* Sport tints */
.t-bike{background:var(--bike-light)}.t-run{background:var(--run-light)}.t-trail{background:var(--trail-light)}.t-tri{background:var(--tri-light)}.t-roll{background:var(--roll-light)}
.d-bike{background:var(--bike)}.d-run{background:var(--run)}.d-trail{background:var(--trail)}.d-tri{background:var(--tri)}.d-roll{background:var(--roll)}

/* Guide page */
.guide{display:flex;flex-direction:column;gap:24px;max-width:820px}
.guide-actions{display:flex;flex-wrap:wrap;gap:12px}
.prose{font-size:16px;line-height:1.6;color:var(--ink-2)}
.prose h2{margin:32px 0 12px;font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.prose p,.prose ul,.prose ol{margin:0 0 14px}
.prose li{margin-bottom:6px}
.prose a{font-weight:700}
.prose code{padding:2px 6px;border-radius:6px;background:var(--soft);font-size:.9em}
.prose pre{overflow-x:auto}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;margin:0 0 14px;font-size:14px}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--chip);text-align:left;vertical-align:top}
.prose th{font-weight:800;color:var(--ink);white-space:nowrap}

/* Rides page: the cards of the calendar, with days of the week where a
   calendar card has its date. */
.rides-head{display:flex;flex-direction:column;gap:16px;max-width:820px}
.lead{margin:0;font-size:18px;line-height:1.5;font-weight:500;color:var(--ink-2)}
.date .wkd{font-size:30px;font-weight:800;line-height:1.12;letter-spacing:-.5px;text-transform:uppercase}
.date .nth{font-size:13px;line-height:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.date .at{margin-top:8px;font-size:14px;line-height:16px;font-weight:700;letter-spacing:.5px}
/* four days or more: two columns of smaller names */
.date.many{flex-direction:row;flex-wrap:wrap;align-content:center;gap:2px 10px;padding:18px 12px}
.date.many .wkd{font-size:17px;line-height:1.3;letter-spacing:0}
.date.many .at{flex-basis:100%;text-align:center}
.when-line{font-size:15px;font-weight:700}
.rides-add{margin:0}
.rides-add a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* Page of one event or one ride: a large card — [date block] [body]. */
.single{display:flex;flex-direction:column;gap:20px}
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none}
.back:hover{text-decoration:underline}
.single-card{display:flex;flex-wrap:wrap;background:var(--surface);border-radius:var(--r-card);overflow:hidden}
.single-card .date{flex:0 0 168px;padding:32px 0}
.single-card .date .wd,.single-card .date .mon,.single-card .date .nth{font-size:16px;line-height:20px}
.single-card .date .day{font-size:76px;letter-spacing:-2.5px}
.single-card .date .month-only{min-height:0;font-size:46px}
.single-card .date .until{font-size:13px}
.date .yr{margin-top:6px;font-size:14px;line-height:16px;font-weight:700;letter-spacing:1.5px}
/* a ride: the days of the week where an event has its date */
.single-card .date .wkd{font-size:44px;line-height:1.2;letter-spacing:-1px}
.single-card .date .at{margin-top:12px;font-size:18px;line-height:20px}
.single-card .date.many{gap:4px 14px;padding:32px 16px}
.single-card .date.many .wkd{font-size:24px;letter-spacing:0}
.single-card .body{flex:999 1 340px;padding:32px clamp(20px,3vw,40px);gap:14px}
.single-card .tags{padding-right:0}
.single h1{font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-1.2px}
.single .when-line{margin:0;font-size:18px}
.single .city-line{font-size:15px}
.single .desc{font-size:17px;max-width:720px}
.ride-note{margin:0;font-size:14px;line-height:1.5;font-weight:600;color:var(--muted)}
.single-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.single-actions .btn{border:0;font-family:inherit;cursor:pointer}
/* On a phone the date block is a strip across the top of the card. Both
   days of an event of several days leave no room for the year in it; the
   line under the name gives the year. */
@media (max-width:640px){
  .single-card .date,.single-card .date.many{flex:1 0 100%;flex-flow:row wrap;align-items:baseline;gap:2px 10px;padding:16px 14px}
  .single-card .date .day{font-size:44px;letter-spacing:-1.5px}
  .single-card .date .month-only{font-size:30px}
  .single-card .date .until,.date .yr,.single-card .date .at{margin-top:0}
  .single-card .date.multi .yr{display:none}
  .single-card .date .wkd{font-size:26px;letter-spacing:-.5px}
  .single-card .date.many .wkd{font-size:17px}
  .single-card .date .at,.single-card .date.many .at{flex-basis:auto;font-size:16px}
  .single-card .body{padding:22px 20px 26px}
}

/* Footer */
.footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;padding-top:20px;border-top:2px solid var(--ink);font-size:14px;font-weight:600;color:var(--muted)}
.footer a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}