/* Styles every generated page: 155 event pages and 108 venue hubs.

   One file, so the whole long tail follows the homepage's design system rather
   than sitting in the old grey-dashboard look a visitor arrives at from search.
   Tokens and rules are kept in step with the homepage deliberately: same bone
   and ink, same flare, same hard borders and 2px offset shadows, same rule that
   flare carries black text and small flare text uses the darkened token. */
:root{
  color-scheme:light dark;
  --bone:#F4F1EB; --card:#FFFFFF; --sunk:#E8E3DA;
  --ink:#100F0E; --ink-2:#54504A;
  --line:#DCD6CB; --hard:#100F0E;
  --flare:#FF3B14; --on-flare:#100F0E; --flare-text:#C42D0B;
  --volt:#1B2CFF; --on-volt:#FFFFFF;
}
@media(prefers-color-scheme:dark){:root{
  --bone:#0C0C0D; --card:#18181B; --sunk:#212126;
  --ink:#F7F4EE; --ink-2:#A8A29A;
  --line:#2C2C31; --hard:#F7F4EE;
  --flare:#FF5C33; --on-flare:#0C0C0D; --flare-text:#FF5C33;
  --volt:#8296FF; --on-volt:#0C0C0D;
}}

*{box-sizing:border-box}
body{margin:0;background:var(--bone);color:var(--ink);font-size:17px;line-height:1.5;
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--volt);outline-offset:2px;border-radius:4px}

.bar{border-bottom:2px solid var(--hard);padding:13px 24px;background:var(--bone)}
.mark{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:800;
  font-size:21px;letter-spacing:-.045em;text-decoration:none;display:inline-flex;
  align-items:center;gap:9px}
/* The clock at 10:00, drawn in CSS so the generated pages need no inline SVG. */
.mark::before{content:"";width:20px;height:20px;flex:none;border:2.5px solid var(--ink);
  border-radius:50%;position:relative}
.mark .tld{color:var(--flare-text)}

main{max-width:760px;margin:0 auto;padding:32px 24px 10px}
h1,h2,h3{margin:0;font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-weight:800;letter-spacing:-.035em;line-height:1.02}
h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:-.045em;margin:16px 0 0;text-wrap:balance}
h2{font-size:26px;margin:44px 0 12px}

.crumbs{font-size:13px;font-weight:600;color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}

/* The answer is the point of the page, so it is the biggest thing after the
   question and it never sits behind a subscribe wall. */
.answer{font-size:20px;font-weight:600;line-height:1.4;margin:20px 0 0;max-width:58ch;
  border-left:5px solid var(--flare);padding-left:20px}
.verified{font-size:13px;font-weight:600;color:var(--ink-2);margin:16px 0 0}
.verified a{font-weight:700}

p{max-width:62ch;font-weight:500}
.note{font-size:14px;color:var(--ink-2);margin-top:14px}

table{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);padding:0 14px 9px 0;border-bottom:3px solid var(--hard)}
td{padding:12px 14px 12px 0;border-bottom:2px solid var(--line);vertical-align:top;font-weight:500}
td:first-child{font-weight:700}

.sub{background:var(--card);border:2px solid var(--hard);border-radius:20px;
  box-shadow:0 5px 0 var(--hard);padding:24px;margin:48px 0 12px}
.sub h2{margin-top:0;font-size:25px}
.sub p{font-size:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--flare);
  color:var(--on-flare);text-decoration:none;padding:13px 26px;border:2px solid var(--hard);
  border-radius:999px;font-weight:700;font-size:16px;min-height:52px;
  box-shadow:0 2px 0 var(--hard);cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(1px);box-shadow:0 1px 0 var(--hard)}
.btn[disabled]{opacity:.6;cursor:default;transform:none}

/* The ask on a drop page. Wraps to two rows on a phone, where the field and the
   button each take the full width rather than being squeezed side by side. */
/* On a touch screen a 15px-tall text link is a coin toss. Padding the small
   ones out to 44px costs nothing on a phone, where there is vertical room, and
   is skipped on a mouse, where it would space the breadcrumbs oddly. */
@media(pointer:coarse){
  .crumbs a,.verified a{display:inline-block;padding:13px 0;line-height:18px}
  .crumbs,.verified{line-height:1}
  .mark{display:inline-flex;align-items:center;min-height:44px}
  .hub a{padding:17px 0}
}

/* Available to a screen reader, invisible on the page. The signup field's
   label uses it, and without the class the label just printed above the box. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sub-form{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 10px}
.sub-form input{flex:1 1 240px;min-width:0;font:inherit;font-size:16px;padding:14px 18px;
  border:2px solid var(--hard);border-radius:999px;background:var(--bone);color:var(--ink);
  box-shadow:0 2px 0 var(--hard);min-height:52px}
.sub-form input:focus-visible{outline:3px solid var(--volt);outline-offset:2px}
.sub-form .btn{flex:0 0 auto}
@media(max-width:520px){ .sub-form input,.sub-form .btn{flex:1 1 100%} }
.sub-note{font-size:13.5px;color:var(--ink-2);margin:0}

.hub{list-style:none;padding:0;margin:26px 0 0}
.hub li{padding:0;border-bottom:2px solid var(--line)}
.hub a{display:block;padding:14px 0;font-weight:700;font-size:17px;text-decoration:none;
  letter-spacing:-.02em}
.hub a:hover{color:var(--flare-text)}
.hub span{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-top:3px;
  letter-spacing:0}

footer{background:var(--ink);color:var(--bone);margin-top:52px;padding:34px 24px 48px;
  font-size:14px;font-weight:500}
footer > *{max-width:760px;margin-left:auto;margin-right:auto}
footer a{font-weight:700}

/* Slice navigation on the calendar hub: by month, by category. */
.slices{list-style:none;padding:0;margin:14px 0 30px;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.slices li{border-bottom:2px solid var(--line)}
.slices a{display:block;padding:12px 0;font-weight:700;text-decoration:none;
  color:inherit}
.slices a:hover{color:var(--flare-text)}
.slices span{font-size:13px;font-weight:600;color:var(--ink-2);margin-left:6px}
@media(pointer:coarse){.slices a{padding:15px 0}}

/* Up-links at the foot of an event page: category, venue, full calendar. */
.more{display:flex;flex-wrap:wrap;gap:10px 18px;margin:34px 0 0;padding-top:22px;
  border-top:2px solid var(--line)}
.more a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid var(--line);padding:2px 0}
.more a:hover{color:var(--ink);border-color:var(--ink)}
@media(pointer:coarse){.more a{padding:10px 0}}

/* The act-now row under the answer, added 24 September 2026.
   Until then the page stated a date and offered nothing to do with it: the one
   page with real traffic had 205 impressions, no clicks and a single available
   action, subscribing to a weekly email about other events, two days before its
   own sale. This asks for no email address, so it sits alongside the form
   rather than competing with it. */
.act-now{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:18px 0 0}
.btn-cal{display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--bone);border:2px solid var(--hard);
  border-radius:999px;padding:11px 20px;min-height:46px;font-size:15px;
  font-weight:700;text-decoration:none;box-shadow:0 2px 0 var(--hard)}
.btn-cal:hover{transform:translateY(1px);box-shadow:0 1px 0 var(--hard)}
.cal-alt{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid var(--line)}
.cal-alt:hover{color:var(--ink);border-bottom-color:var(--flare)}

/* Breadth shown rather than claimed. The aside said "museums, theatres,
   festivals and sport" and listed none of them, while the form underneath it
   has always subscribed to every category and every region. */
.breadth{margin:20px 0 0;padding-top:16px;border-top:2px solid var(--line)}
.breadth-h{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700;margin:0 0 10px}
.breadth ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.breadth li{display:flex;justify-content:space-between;gap:14px;font-size:15px}
.breadth a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--line)}
.breadth a:hover{border-bottom-color:var(--flare)}
.breadth span{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}