/*
Theme Name: The Late Edition
Theme URI: https://thelateedition.co.uk
Template: astra
Description: London evening digest. Astra child theme that replaces every template with its own: dated-events content model (event + opening post types), living Tonight / This Weekend / This Week pages, /guides/ annual pages, Event and ItemList schema, noindex rules for thin archives, comments off. Astra's own stylesheet is dequeued on purpose; the identity here is entirely its own.
Author: The Late Edition
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: lateedition
*/

/* ---- Tokens ------------------------------------------------------------ */
:root{
  --paper:#FBFAF7;--paper-2:#FFFFFF;--ink:#121212;--ink-soft:#55534E;--line:#DDDAD3;--rule:#121212;
  --red:#B80F1E;--red-deep:#7E0A14;--red-soft:#F7E6E7;--focus:#1F6FEB;
  --font-display:"Frank Ruhl Libre",Georgia,"Times New Roman",serif;
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --measure:66ch;--container:1180px;
  /* The headline column. Set to land on the same right edge as the 66ch body
     measure, so headline, standfirst and body copy all share one column. It is
     in rem rather than ch because ch is measured in the element's own font,
     and at the headline's size that would come out enormous. */
  /* Headline and standfirst share this: they are one block and should end on
     the same edge. 46rem is where a typical two-clause headline stops
     wrapping to a third line, measured rather than guessed. */
  --measure-head:46rem;
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2rem;--s5:3rem;--s6:4.5rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--font-body);font-variant-numeric:tabular-nums;overflow-x:hidden;overflow-x:clip}
/* Greedy wrapping, deliberately. `balance` evens the line lengths, which on a
   two-line heading leaves both lines at about 60% of the measure and reads as
   a layout fault rather than as typography. Safari also drops `pretty`, so
   anything relying on it is inconsistent between browsers. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0 0 .4em;text-wrap:wrap}
h1{font-size:clamp(2rem,4.6vw,3.2rem)}h2{font-size:clamp(1.5rem,2.8vw,2rem)}h3{font-size:clamp(1.2rem,2vw,1.45rem)}
p{margin:0 0 var(--s2)}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s3)}
.measure{max-width:var(--measure)}
.eyebrow{font:700 .74rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Masthead ---------------------------------------------------------- */
.masthead{border-bottom:3px double var(--rule);background:var(--paper)}
.masthead__top{display:flex;justify-content:space-between;gap:var(--s2);font:600 .74rem/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:.55rem 0;border-bottom:1px solid var(--line)}
.masthead__brand{text-align:center;padding:1.1rem 0 .7rem}
.wordmark{font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,6vw,3.9rem);letter-spacing:-.025em;line-height:1;text-decoration:none;color:var(--ink);display:inline-block}
.wordmark em{font-style:normal;color:var(--red)}
.wordmark:hover{color:var(--ink)}
.masthead__tag{margin:.35rem 0 0;font:italic 400 .87rem/1.4 var(--font-display);color:var(--ink-soft)}
/* The same line in the footer, sized on its own so the blurb below it, which is
   a plain paragraph of the same size, is left where it is. */
.site-footer__tag{font-size:.82rem}
.section-nav{display:flex;justify-content:center;flex-wrap:nowrap;overflow-x:auto;border-top:1px solid var(--rule);scrollbar-width:none}
.section-nav::-webkit-scrollbar{display:none}
.section-nav a{flex:0 0 auto;padding:.7rem .95rem;font:700 .78rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-top:3px solid transparent;border-bottom:3px solid transparent;margin-bottom:-1px}
.section-nav a:hover,.section-nav a[aria-current="page"]{color:var(--red);border-bottom-color:var(--red)}
.section-nav ul{display:contents;list-style:none;margin:0;padding:0}

/* ---- Page furniture ---------------------------------------------------- */
.dateline{display:flex;flex-wrap:wrap;gap:.4rem var(--s2);align-items:baseline;font:600 .78rem/1.5 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s2)}
.dateline b{color:var(--red)}
.page-head{padding:var(--s5) 0 var(--s3);border-bottom:1px solid var(--line)}
/* On an archive the next block brings its own heavier rule, so the hairline
   under the header lands 32px above it and reads as a stray line. Drop it
   there and keep it where the header is followed by prose. Standalone
   :has() rules, so a browser without support simply keeps the old look. */
.page-head:has(+ .day){border-bottom:0;padding-bottom:0}
.page-head:has(+ .section){border-bottom:0;padding-bottom:0}
.page-head:has(+ .termlinks){border-bottom:0;padding-bottom:0}
/* Same again for the Journal clusters, which are new. The page head rule and
   the section head rule each draw their own line, and stacked they read as a
   double rule with a gap in it. */
.page-head:has(+ .cluster){border-bottom:0;padding-bottom:0}
.page-head h1,
.page-head .standfirst{max-width:var(--measure-head)}
.page-head .standfirst{font:400 1.2rem/1.5 var(--font-display);color:var(--ink-soft);margin:0}
/* A venue or area archive prints its address and area in a second dateline
   under the standfirst. Both had zero margin on the facing edge, so they
   sat flush against each other. */
/* The second dateline on a term archive is the address and area. Smaller than
   the first one, which is the section label, so it reads as a caption. */
.page-head .standfirst + .dateline,
.page-head .dateline + .dateline{font-size:.68rem;letter-spacing:.05em;color:var(--ink-soft)}
/* Address left, area hard right, so the line reads as a caption with a label
   rather than two facts running into each other. */
.page-head .standfirst + .dateline span:last-child,
.page-head .dateline + .dateline span:last-child{margin-left:auto;text-align:right;font-size:.78rem;color:var(--ink)}
.page-head .standfirst + .dateline{margin-top:var(--s2)}
.page-head .dateline + .dateline{margin-top:var(--s1)}
.intro{max-width:var(--measure);padding:var(--s3) 0 0}
.intro>*+*{margin-top:var(--s2)}
.updated{font-size:.85rem;color:var(--ink-soft);margin:var(--s2) 0 0}
.notice{border:1px solid var(--line);background:var(--paper-2);padding:var(--s2) var(--s3);max-width:var(--measure);margin:var(--s3) 0}

/* ---- Day groups + event rows ------------------------------------------- */
.day{border-top:2px solid var(--rule);margin-top:var(--s4)}
.day__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:.65rem 0 .35rem}
.day__head h2{margin:0;font-size:1.5rem}
.day__date{font:600 .76rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.events{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}




.event__title a{text-decoration:none}
.event__title a:hover{color:var(--red)}





.flag{display:inline-block;font:700 .68rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.flag--sold{color:var(--ink-soft)}


/* ---- Front page -------------------------------------------------------- */
.lead{padding:var(--s4) 0 0;display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:960px){.lead{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s5)}}
.lead__hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem);font-weight:900}
.lead__hero .standfirst{font:400 1.25rem/1.5 var(--font-display);color:var(--ink-soft);max-width:44ch}
.lead__hero img{aspect-ratio:3/2;object-fit:cover;width:100%;margin-top:var(--s3)}
.lead__side{border-left:1px solid var(--line);padding-left:var(--s4)}
@media(max-width:959px){.lead__side{border-left:0;padding-left:0;border-top:2px solid var(--rule);padding-top:var(--s2)}}


.section{padding:var(--s5) 0 0}
.section__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);border-top:2px solid var(--rule);padding-top:.6rem;margin-bottom:var(--s2)}
.section__head h2{margin:0}
.section__head a{font:700 .76rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.cols{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:900px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cards{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:block;text-decoration:none;color:var(--ink);background:var(--paper-2);border:1px solid var(--line)}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%;background:var(--line)}
.card__body{padding:var(--s2) var(--s3) var(--s3)}
/* Same as the listing headline: greedy wrapping, so the title fills. */
.card__body h3{margin:.3rem 0 .35rem;font-size:1.25rem;line-height:1.2;text-wrap:wrap}
.card__body p{margin:0;color:var(--ink-soft);font-size:.92rem}
.card:hover h3{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s2) 0 0}
.chip{border:1px solid var(--ink);padding:.45rem .9rem;font:700 .74rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--paper-2)}
.chip:hover,.chip[aria-current="page"]{background:var(--ink);color:var(--paper)}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s3) 0;margin-top:var(--s5);font-size:.95rem;color:var(--ink-soft)}
.strip p{margin:0 auto;max-width:var(--measure);text-align:center;text-wrap:wrap}

/* ---- Single event ------------------------------------------------------ */
/* The four things a reader came for, on a wash so the glass has something to
   work against. Blur where the browser has it, plain where it does not. */
.facts{list-style:none;margin:var(--s3) 0;padding:.6rem;display:grid;gap:.5rem;
  grid-template-columns:1fr;border-radius:4px;
  background:linear-gradient(135deg,var(--red-soft) 0%,var(--paper) 48%,#EFEBE3 100%)}
@media(min-width:560px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));padding:.7rem;gap:.6rem}}
@media(min-width:980px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts li{display:flex;flex-direction:column;gap:.28rem;padding:.85rem .9rem;border-radius:3px;
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 18px rgba(18,18,18,.07);
  font-size:.92rem;line-height:1.45}
.facts li b{font:700 .66rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.facts li span{color:var(--ink);overflow-wrap:break-word}
/* The street line is reference, not reading: a size down, muted, and small
   enough to stay on one line on a phone. */
.facts__addr{display:block;font-size:.78rem;line-height:1.35;color:var(--ink-soft)}

/* The address line under a venue heading, where it wraps away from the area
   below it on a narrow screen. Smaller, less tracking, and both lines starting
   at the same edge once they are no longer sharing one. */
@media(max-width:560px){
  .page-head .standfirst + .dateline,
  .page-head .dateline + .dateline{font-size:.62rem;letter-spacing:.03em}
  /* The area stays hard right, as it does on a wide screen. */
  .page-head .standfirst + .dateline span:last-child,
  .page-head .dateline + .dateline span:last-child{margin-left:auto;text-align:right;font-size:.72rem}
}
@media(max-width:559px){.facts__addr{font-size:.72rem}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .facts li{background:rgba(255,255,255,.93)}
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .facts{background:linear-gradient(135deg,var(--red-soft) 0%,var(--paper-2) 55%,#211F1A 100%)}
  :root:not([data-theme="light"]) .facts li{background:rgba(27,26,22,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.3)}
}
:root[data-theme="dark"] .facts{background:linear-gradient(135deg,var(--red-soft) 0%,var(--paper-2) 55%,#211F1A 100%)}
:root[data-theme="dark"] .facts li{background:rgba(27,26,22,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 18px rgba(0,0,0,.3)}
@media(max-width:559px){
  .facts{padding:.45rem;gap:.4rem}
  .facts li{padding:.6rem .7rem;font-size:.88rem;gap:.2rem}
  .facts li b{font-size:.62rem}
}
@media print{.facts{background:none;padding:0}.facts li{background:none;box-shadow:none;border-bottom:1px solid #bbb}}
.btn,.btn-outline{display:inline-block;font:700 .78rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.9rem 1.5rem;border:1px solid var(--ink);transition:background .15s,color .15s}
.btn{background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:var(--s2)}
.prose h2{margin-top:var(--s4)}
.related{border-top:2px solid var(--rule);margin-top:var(--s5);padding-top:var(--s2)}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin:var(--s4) 0}
.pagination .page-numbers{border:1px solid var(--line);padding:.5rem .8rem;text-decoration:none;font:600 .85rem var(--font-body)}
.pagination .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- Footer ------------------------------------------------------------ */
/* 4.5rem of air before the footer reads as a hole on a phone, where the
   viewport is short. Generous on a wide screen, tighter on a narrow one. */
.site-footer{margin-top:var(--s5);border-top:3px double var(--rule);font-size:.92rem;color:var(--ink-soft)}
@media(min-width:960px){.site-footer{margin-top:var(--s6)}}
@media(max-width:640px){.site-footer{margin-top:var(--s4)}}
.site-footer__grid{display:grid;gap:var(--s4);grid-template-columns:1fr;padding:var(--s4) 0}
/* Two across on a phone: four link lists stacked one per row made the footer
   longer than the page above it. The masthead blurb is prose, not a list, so it
   keeps the full width above them. */
@media(max-width:699px){
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s2)}
  .site-footer__grid > .site-footer__col:first-child{grid-column:1 / -1}
}
@media(min-width:700px){.site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The masthead blurb sits above four equal columns of links rather than beside
   one very long one. */
@media(min-width:1000px){.site-footer__grid{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))}}
.site-footer h4{position:relative;font:700 .845rem/1 var(--font-body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin:0 0 var(--s2);padding-bottom:.55rem}
/* A red rule under each column head that fades out to the right, so it reads as
   a flourish rather than a border. Drawn as a gradient because a border cannot
   fade. */
.site-footer h4::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(to right,var(--red),color-mix(in srgb,var(--red) 20%,transparent) 55%,transparent)}
/* Nothing under a footer link at rest: twenty five rules stacked in a column
   read as noise. On hover the red underline appears, and :active carries it to
   a phone, where there is no hover to have. */
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover,.site-footer a:active,.site-footer a:focus-visible{
  color:var(--red);text-decoration:underline;text-decoration-thickness:.06em;
  text-underline-offset:.16em;text-decoration-color:var(--red)}
/* The wordmark gets the same fading rule as the column heads beside it, drawn
   as a gradient rather than an underline so it can fade out to the right. */
.site-footer .wordmark{position:relative;text-decoration:none;padding-bottom:.4rem}
.site-footer .wordmark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(to right,var(--red),color-mix(in srgb,var(--red) 20%,transparent) 55%,transparent)}
.site-footer .wordmark:hover,.site-footer .wordmark:active,
.site-footer .wordmark:focus-visible{color:var(--red);text-decoration:none}
.site-footer__col a{display:block;padding:.15rem 0}
/* The footer wordmark keeps its own size. What it does not keep is the link
   padding from .site-footer__col a, which was adding fourteen pixels and
   pushing everything under it below the first link in every other column. At
   1.9rem with line-height 1 and no padding its box is 30.4px, against 29.5px
   for a column heading plus its margin, so the two rows start level. */
.site-footer .wordmark{font-size:1.9rem;line-height:1;display:block;
  padding:0;margin:0}
.site-footer__legal{border-top:1px solid var(--line);padding:var(--s2) 0;font-size:.82rem}
/* The paragraph kept a bottom margin inside an already padded bar, which
   pushed the line off centre by fifteen pixels. */
.site-footer__legal p{margin:0}
.sponsor{border:1px solid var(--line);border-left:3px solid var(--red);background:var(--paper-2);padding:var(--s2) var(--s3);margin:var(--s4) 0;max-width:var(--measure)}
.sponsor__label{font:700 .7rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep);margin:0 0 .4rem}

/* ---- Newsletter -------------------------------------------------------- */
.newsletter{display:grid;gap:var(--s3);grid-template-columns:1fr;align-items:center;border-top:3px double var(--rule);border-bottom:1px solid var(--rule);padding:var(--s4) 0;margin-top:var(--s5)}
@media(min-width:760px){.newsletter{grid-template-columns:minmax(0,1fr) auto;gap:var(--s5)}}
.newsletter h2{margin:.35rem 0 .4rem;font-size:clamp(1.5rem,2.6vw,2rem)}
.newsletter p:last-child{margin:0;max-width:52ch;color:var(--ink-soft)}
.newsletter .btn{justify-self:start}

/* ---- Seasonal edition -------------------------------------------------- */
.edition__hero{margin:var(--s3) 0 0}
.edition__hero img{aspect-ratio:3/1.4;object-fit:cover;width:100%}
.faq .section__head{margin-bottom:0}
.faq__item{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq__item summary{cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:1.2rem;line-height:1.3;list-style:none;display:flex;justify-content:space-between;gap:var(--s2)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--red);font-family:var(--font-body);font-weight:700;flex:0 0 auto}
.faq__item[open] summary::after{content:"−"}
.faq__item p{margin:.6rem 0 0;max-width:var(--measure);color:var(--ink)}
.diary{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.diary__item{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:var(--s2);
  padding:.7rem .5rem;margin:0 -.5rem;border-bottom:1px solid var(--line);align-items:baseline;
  transition:background .16s ease;-webkit-tap-highlight-color:transparent}
/* The row already answered a mouse by turning the name red and answered a
   finger with nothing at all. A tint under it does both. */
.diary__item:hover{background:var(--paper-2)}
.diary__item:active{background:var(--red-soft)}
.diary__when{font:700 .76rem/1.6 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.diary__item a{font-family:var(--font-display);font-size:1.2rem;font-weight:700;text-decoration:none}
.diary__item a:hover{color:var(--red)}
.diary__item:active a{color:var(--red)}
@media(max-width:560px){.diary__item{grid-template-columns:1fr;gap:.15rem}}

/* ---- About / editor ---------------------------------------------------- */
.editor{padding:var(--s5) 0 0}
/* Pretty wrapping so a single word cannot be left alone on the last line. The
   width comes from --measure-head, shared with the headline above it. */
.page-head .standfirst{text-wrap:pretty}
/* A credential, not an article, so it is set at interface scale and built from
   two plain flex rows: a head with the avatar and the identity beside it, then
   the bio and the action beneath. No grid areas and no display:contents, both
   of which put the name at the wrong end of the card on a phone. */
.editor__card{max-width:46rem;padding:var(--s3);border:1px solid var(--line);
  border-radius:3px;background:var(--paper-2)}
.editor__head{display:flex;align-items:center;gap:.85rem;min-width:0}
.editor__photo,.editor__monogram{width:64px;height:64px;border-radius:999px;flex:0 0 auto}
.editor__photo{object-fit:cover;border:1px solid var(--line);filter:grayscale(1) contrast(1.05)}
.editor__monogram{display:grid;place-items:center;background:var(--ink);color:var(--paper);
  font:600 1.5rem/1 var(--font-display);-webkit-user-select:none;user-select:none}
.editor__id{display:flex;flex-direction:column;gap:.16rem;min-width:0}
.editor__role{font:600 .62rem/1 var(--font-body);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft)}
.editor__name{font-size:1.02rem;margin:0;line-height:1.2;letter-spacing:.005em}
.editor__bio{margin:.8rem 0 0;font-size:.86rem;line-height:1.6;
  color:var(--ink-soft,var(--ink));max-width:54ch;text-wrap:pretty}
.editor__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:.8rem 0 0}
.editor__cta{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;
  border:1px solid var(--ink);border-radius:999px;font:600 .78rem/1 var(--font-body);
  text-decoration:none;color:var(--ink);transition:background .15s ease,color .15s ease}
.editor__cta:hover{background:var(--ink);color:var(--paper)}
.editor__links{font-size:.78rem}
@media(max-width:560px){
  .editor__card{padding:var(--s2)}
  .editor__head{gap:.7rem}
  .editor__photo,.editor__monogram{width:48px;height:48px}
  .editor__monogram{font-size:1.15rem}
  .editor__name{font-size:.98rem}
  .editor__bio{font-size:.82rem;line-height:1.55;margin-top:.7rem}
  .editor__actions{margin-top:.7rem}
}
.editor__links a{margin-right:var(--s2);font:600 .85rem var(--font-body)}

/* ---- Mobile and WebKit ------------------------------------------------- *
 * iOS Safari and Chrome on Android. Fixes here are ordered: stop the page
 * scrolling sideways, make everything tappable, then the platform quirks.
 * ----------------------------------------------------------------------- */

/* 1. Nothing may scroll the page sideways. The section nav is a deliberate
      horizontal strip and clips itself; everything else must wrap. */
html{overflow-x:hidden;overflow-x:clip}
.section__head{flex-wrap:wrap}
.section__head h2{flex:1 1 auto;min-width:0}
.section__head a,.section__head .day__date{flex:0 1 auto;min-width:0}
@media(max-width:600px){
  /* "Fri 4 to Sun 6 September: full edition" cannot sit on one line at 375px */
  .section__head{align-items:baseline;gap:.15rem var(--s2)}
  .section__head a,.section__head .day__date{white-space:normal;flex-basis:100%}
  .day__head{flex-wrap:wrap;gap:.1rem var(--s2)}
}

/* 2. Tap targets. WCAG asks for 44px; the nav was 38 and inline links less. */
.section-nav a{min-height:44px;display:flex;align-items:center}
.section__head a{padding:.5rem 0;line-height:1.4}
.editor__links a,.site-footer__col a{padding-block:.45rem}
.event__title a{display:inline-block;padding-block:.1rem}
.faq__item summary{min-height:44px;align-items:center;padding-block:.25rem}
.chip{min-height:44px;display:inline-flex;align-items:center}

/* 3. The nav strip: momentum scrolling on iOS, snap, and a fade so it is
      visible that there is more to the right. */
.section-nav{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;position:relative}
.section-nav>.container{scroll-snap-align:start}
.section-nav a{scroll-snap-align:center}
@media(max-width:760px){
  .section-nav{justify-content:flex-start;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .section-nav>.container{justify-content:flex-start!important;padding-inline:var(--s2)}
}

/* 4. WebKit specifics.
      - text-size-adjust stops iOS inflating body copy in landscape
      - tap-highlight replaces the default blue flash with our own red
      - notched iPhones need the safe area added to the gutters */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary{-webkit-tap-highlight-color:rgba(184,15,30,.18)}
.container{
  padding-inline:calc(var(--s3) + env(safe-area-inset-left)) calc(var(--s3) + env(safe-area-inset-right));
}
/* iOS zooms the page when a field's text is under 16px. None here yet, but
   any future search or sign-up box inherits this. */
input,select,textarea{font-size:max(16px,1rem);font-family:inherit}

/* 5. Small-phone sizing. 375px minus 48px of gutter left the measure tight. */
@media(max-width:430px){
  :root{--s3:1.15rem}
  /* the date and "Evening edition" were wrapping onto three lines */
  .masthead__top{font-size:.66rem;letter-spacing:.04em;gap:.5rem;padding:.45rem 0}
  .masthead__brand{padding:.85rem 0 .6rem}
  .masthead__tag{font-size:.88rem}
  body{font-size:1.02rem}
  .event{gap:.2rem}
  .event__time{font-size:.9rem}
  .event__price{font-size:.72rem;padding:.35rem .5rem}
  .lead__side{padding-top:var(--s2)}
  .editor__card{grid-template-columns:1fr}
  .faq__item summary{font-size:1.08rem}
  .newsletter{padding:var(--s3) 0}
}

/* 6. Long unbroken strings (venue URLs, hashtags) must not widen the page. */
/* break-word, not anywhere: a word only breaks when it would otherwise
   overflow, rather than at any character the line happens to end on. */
.event__meta,.event__note,.prose,.intro,.standfirst,.card__body{overflow-wrap:break-word}

@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media print{.section-nav,.site-footer,.btn,.btn-outline{display:none}}

/* ========================================================================= *
 * REFINEMENT LAYER
 * Typographic discipline, a unified image treatment, an evening mode, and a
 * print stylesheet. Appended last on purpose: it tunes what is above without
 * undoing the mobile rules.
 * ========================================================================= */

/* --- 1. Numerals -------------------------------------------------------- *
 * Tabular figures are right for times and prices, where columns must line up.
 * In running prose they look mechanical, so they are switched back off there. */
body{font-variant-numeric:proportional-nums}
.event__time,.event__price,.day__date,.dateline,.diary__when,
.masthead__top,.facts,.updated{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* --- 2. Type ------------------------------------------------------------ *
 * Large display type needs negative tracking; small caps need positive.
 * Optical sizing where the face supports it. */
h1,h2,.wordmark{font-optical-sizing:auto}
h1{letter-spacing:-.021em;line-height:1.06}
h2{letter-spacing:-.014em}
h3{letter-spacing:-.008em}
.standfirst{letter-spacing:-.004em;text-wrap:wrap}
.eyebrow,.flag,.diary__when,.day__date,.section__head a{font-feature-settings:"case" 1}
/* `pretty` shortens earlier lines to tidy the last one, and Safari ignores
   it entirely, so paragraphs wrapped differently per browser. Greedy. */
p,li{text-wrap:wrap}
.prose p,.intro p{hyphens:auto;-webkit-hyphens:auto}
/* Quotes and the opening bracket hang into the margin on supporting browsers */
.prose,.intro{hanging-punctuation:first last}

/* Links: a considered underline rather than the browser default */
.prose a,.intro a,.event__note a,.strip a,.facts li a{
  text-decoration:underline;text-decoration-thickness:.06em;
  text-underline-offset:.16em;text-decoration-color:color-mix(in srgb,var(--red) 45%,transparent)}
.prose a:hover,.intro a:hover,.strip a:hover,.facts li a:hover{text-decoration-color:var(--red)}

::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:1px}

/* --- 3. Images ---------------------------------------------------------- *
 * Listings photography comes from dozens of venues at wildly different
 * quality. A single restrained treatment makes the page look art-directed
 * rather than scraped. */
.lead__hero img,.card img,.edition__hero img,article figure img{
  filter:saturate(.86) contrast(1.04);
  background:var(--line)}
.card img{transition:filter .25s ease}
.card:hover img{filter:saturate(1) contrast(1.02)}
figure{margin:0}
figcaption{font:400 .84rem/1.5 var(--font-body);color:var(--ink-soft);padding-top:.5rem;
  border-bottom:1px solid var(--line);padding-bottom:.7rem}

/* --- 4. The lead ---------------------------------------------------------*/
.lead__hero h1{text-wrap:wrap}
.lead__hero .standfirst{max-width:38ch}

/* --- 5. Event rows ------------------------------------------------------ *
 * The price was a heavy chip. Quieter and more typographic reads better and
 * stops it competing with the title. */
.event__price{background:transparent;border:0;border-top:2px solid var(--ink);
  border-radius:0;padding:.3rem 0 0;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);min-width:4.5rem;text-align:right}
.event__price.is-free{background:transparent;color:var(--red-deep);border-top-color:var(--red)}
.event__price.is-late{border-top-color:var(--ink-soft);color:var(--ink-soft)}
@media(max-width:640px){
  .event__price{text-align:left;border-top:0;border-left:2px solid var(--ink);
    padding:.05rem 0 .05rem .55rem;min-width:0}
  .event__price.is-free{border-left-color:var(--red)}
  .event__price.is-late{border-left-color:var(--ink-soft)}
}
.event{transition:box-shadow .18s ease}
.event:hover{box-shadow:0 2px 14px rgba(18,18,18,.09)}
.event__time{font-feature-settings:"tnum" 1;letter-spacing:-.01em}

/* --- 6. Evening mode ---------------------------------------------------- *
 * An evening paper that turns dark after dark. Follows the reader's system
 * setting; there is no toggle to maintain and nothing to get out of sync. */
:root{color-scheme:light}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --paper:#141310;--paper-2:#1B1A16;--ink:#F2EFE7;--ink-soft:#A29C90;
    --line:#332F28;--rule:#F2EFE7;
    --red:#F0665F;--red-deep:#FF9A93;--red-soft:#2A1614;--focus:#7FB0FF;
  }
  /* Newsprint white on black is glaring; a touch less contrast reads better */
  body{font-weight:400}
  .lead__hero img,.card img,.edition__hero img,article figure img{
    filter:saturate(.8) contrast(.98) brightness(.88)}
  .card:hover img{filter:saturate(.95) contrast(1) brightness(.95)}
  .btn{background:var(--ink);color:var(--paper)}
  .btn:hover{background:var(--red);color:#14130F}
  .chip:hover,.chip[aria-current="page"]{background:var(--ink);color:var(--paper)}
  ::selection{background:var(--red);color:#14130F}
  .event:hover{box-shadow:0 2px 12px rgba(18,18,18,.14)}
}

/* --- 7. Print ----------------------------------------------------------- *
 * People print what is on. This is a listings paper, so it should print like
 * one: black on white, URLs spelled out, nothing orphaned. */
@media print{
  @page{margin:15mm}
  :root{--paper:#fff;--paper-2:#fff;--ink:#000;--ink-soft:#333;--line:#bbb;--rule:#000;--red:#000;--red-deep:#000}
  body{font-size:10.5pt;line-height:1.4;background:#fff;color:#000}
  .section-nav,.site-footer,.btn,.btn-outline,.newsletter,.chips,.strip,.sponsor{display:none!important}
  .masthead{border-bottom:2px solid #000}
  .wordmark{font-size:26pt}
  .masthead__tag{display:none}
  a{color:#000;text-decoration:none}
  /* Spell out the venue link so a printed page is still useful */
  .event__title a::after{content:" (" attr(href) ")";font:400 7.5pt var(--font-body);color:#444;word-break:break-all}
  .lead__hero img,.card img,.edition__hero img{display:none}
  .day,.section{break-inside:auto}
  .event,.card,.diary__item,.faq__item{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  .event__price{border:0;padding:0}
}

/* --- 8. Nav track ------------------------------------------------------- *
 * The section nav scrolls sideways on narrow screens. Its inner track used to
 * carry inline `overflow-x:auto`, which makes a browser treat the vertical
 * axis as scrollable too: one pixel of overflow rendered a stray up/down
 * scrollbar at the end of the strip. Scrolling is defined here instead, on one
 * element, with the vertical axis locked and the scrollbar hidden in every
 * engine. */
.section-nav{overflow:visible}
.section-nav__track{
  display:flex;justify-content:center;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.section-nav__track::-webkit-scrollbar{display:none;width:0;height:0}
@media(max-width:760px){.section-nav__track{justify-content:flex-start}}

/* --- 9. Nav cannot wrap, ever ------------------------------------------- *
 * Seen on iPhone with a stale cached stylesheet: without the track rules the
 * links fell back to inline text and broke mid-phrase ("THIS / WEEK"). These
 * make each link one unbreakable unit whatever else loads or fails to. */
.section-nav a,.section-nav__track a{white-space:nowrap;flex:0 0 auto}
.section-nav__track,.section-nav>.container{flex-wrap:nowrap}
.section-nav ul{display:contents}

/* --- 10. Headings scale with the screen --------------------------------- *
 * Fixed rem minimums let a long H1 outgrow a small phone. Tie the floor to
 * the viewport instead, and let a word break rather than push the page. */
h1{font-size:clamp(1.75rem,8vw,3.2rem);overflow-wrap:break-word}
.lead__hero h1{font-size:clamp(1.9rem,9vw,3.6rem)}
h2{overflow-wrap:break-word}
.wordmark{font-size:clamp(2rem,10vw,3.9rem)}

/* Listing card ---------------------------------------------------------- */
/* The card ground. No outline: the white against the paper and the gap between
   cards do the separating, and a line round each as well made the page look
   ruled. */
.event{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:var(--s3);
  padding:var(--s3);border:0;border-radius:3px;
  background:var(--paper-2);align-items:start}
.event--nothumb{grid-template-columns:1fr}
.event__thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);border-radius:2px}
.event__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.event:hover .event__thumb img{transform:scale(1.03)}
.event__body{min-width:0}
.event__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin:0 0 .28rem}
.event__kicker:empty{display:none}
.event__badge{font:700 .68rem/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;padding:.35rem .45rem .29rem;border:1px solid var(--line);border-radius:2px;background:var(--paper-2);color:var(--ink)}
.event__badge.is-free{background:var(--red-soft);border-color:transparent;color:var(--red-deep)}
.event__badge.is-late{border-color:var(--ink)}
.event__badge.is-warn{border-color:var(--red);color:var(--red-deep)}
.event__badge.is-sold{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* No text-wrap:balance here. Balance evens the line lengths, which on a two
   line headline leaves both lines short and the card looking narrow. A
   listing headline should fill its measure. */
/* Plain greedy wrapping. Not `balance`, which evens line lengths and leaves
   them all short; not `pretty` either, which optimises the LAST line and so
   pulls words down, leaving the first line at 56% of the measure on titles
   like "Open air swimming at Hampstead Ponds". A listing headline should fill
   its width and let the last line fall where it may. */
.event__title{font-family:var(--font-display);font-size:1.3rem;line-height:1.18;margin:0 0 .2rem;text-wrap:wrap}
/* Normal inline flow, not flex: the separator is attached to the END of the
   time, so when the line wraps the dot stays put rather than dangling at the
   start of the venue line. */
.event__meta{margin:.22rem 0 0;color:var(--ink-soft);font-size:.9rem;line-height:1.45;
  display:flex;align-items:baseline;min-width:0;white-space:nowrap}
.event__meta .event__when:not(:only-child)::after{content:"\00A0\00B7";color:var(--line);font-weight:400}
/* The venue reads a size below the time, which is what the eye goes to, and it
   is the half that gives way when the line will not fit. */
.event__where{margin-left:.34rem;font-size:.86em;letter-spacing:.002em;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.event__when{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.event__where a{color:var(--ink-soft);text-decoration-color:var(--line);text-underline-offset:2px}
.event__where a:hover{color:var(--red)}
.event__runs{margin:.3rem 0 0;font:600 .7rem/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
/* No reading measure here: a note is a sentence or two and should share the
   card's right edge with the title above it. */
.event__note{margin:.42rem 0 0;color:var(--ink);line-height:1.55}

/* The front-page sidebar is a narrow column: text only. */
.lead__side .event__thumb{display:none}
.lead__side .events .event{grid-template-columns:1fr}
.lead__side .event__note{display:none}

@media(max-width:640px){
  .event__kicker,.event__title{padding-right:2.4rem}
  /* A picture beside the text leaves about 200px for a headline, which wraps
     every two words. Full width above it instead. */
  .event{grid-template-columns:1fr;gap:.55rem;padding:.8rem;overflow:hidden}
  /* Full bleed. The card's .8rem padding was leaving a border of paper on all
     three sides of the picture, so the wrapper is pulled back out by exactly
     that much and the picture meets the card's own edges. */
  .event__media{margin:-.8rem -.8rem 0}
  .event__thumb{aspect-ratio:16/9;width:100%;
    border-width:0 0 1px;border-radius:3px 3px 0 0}
  .event__title{font-size:1.2rem;line-height:1.22}
  .event__meta{font-size:.85rem}
  .event__note{font-size:.95rem}
  .event__badge{font-size:.64rem;padding:.31rem .4rem .25rem}
}

/* Guides index ---------------------------------------------------------- */
.diary__thumb{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;align-self:start}
.diary__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.diary__item{grid-template-columns:9rem minmax(0,1fr);align-items:start}
.diary__item:has(.diary__thumb){grid-template-columns:9rem 8rem minmax(0,1fr)}
@media(max-width:560px){
  /* Split on purpose. A comma-separated rule is discarded entirely by any
     browser that cannot parse one of its selectors, so grouping a plain
     selector with a :has() one would lose the single-column mobile layout
     on Safari below 15.4. Kept apart, the plain rule always applies. */
  .diary__item{grid-template-columns:1fr;row-gap:.4rem}
  .diary__item:has(.diary__thumb){grid-template-columns:1fr;row-gap:.4rem}
  .diary__when{grid-column:1;grid-row:1}
  .diary__thumb{grid-column:1;grid-row:2;width:100%;aspect-ratio:16/9}
  .diary__item > :last-child{grid-column:1;grid-row:3}
  .diary__item:not(:has(.diary__thumb)) > :last-child{grid-row:2}
}

/* Term archives --------------------------------------------------------- */
.term-prose{max-width:var(--measure);margin-top:var(--s3)}
.term-prose p{margin:0 0 .9em;font-size:1rem;line-height:1.62;color:var(--ink)}
.term-prose h2{font-size:1.12rem;line-height:1.25;margin:1.5em 0 .4em;letter-spacing:0}
.term-prose h2:first-child{margin-top:0}
.termlinks__list{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:0;max-width:var(--measure)}
.termlinks__list a{font:600 .82rem/1 var(--font-body);text-decoration:none;padding:.42rem .6rem;border:1px solid var(--line);border-radius:2px;background:var(--paper-2);color:var(--ink)}
.termlinks__list a:hover{border-color:var(--ink);color:var(--red)}

/* Breadcrumbs ----------------------------------------------------------- */
.crumbs{border-bottom:1px solid var(--line);background:var(--paper)}
/* One line, always. A trail that stacks over three rows on a phone reads as a
   list, not as a path, so the last crumb shrinks and takes an ellipsis while
   the ancestors keep their full labels. */
.crumbs ol{display:flex;flex-wrap:nowrap;align-items:center;gap:.15rem .45rem;list-style:none;margin:0;padding:.55rem 0;
  font:600 .74rem/1.5 var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden}
.crumbs li{display:flex;align-items:center;gap:.45rem;flex:0 0 auto;min-width:0}
.crumbs li:last-child{flex:0 1 auto;min-width:0}
.crumbs li+li::before{content:"\002F";color:var(--line);font-weight:400}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--red);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* What is on right now --------------------------------------------------- */
.nownext__intro{margin:0 0 var(--s3)}
.nownext__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;list-style:none;margin:0 0 var(--s3);padding:0}
@media(min-width:620px){.nownext__stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nownext__stats a{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .9rem;border:1px solid var(--line);
  border-radius:2px;background:var(--paper-2);text-decoration:none;color:var(--ink)}
.nownext__stats a:hover{border-color:var(--ink)}
.nownext__stats b{font:700 1.55rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.nownext__stats span{font:600 .72rem/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.nownext__stats a:hover span{color:var(--red)}
.nownext__sub{font-size:1.05rem;margin:0 0 .5rem;letter-spacing:0}
.nownext__events{margin:0 0 var(--s3)}
.nownext__areas{margin:0}
.termlinks__list a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Browse by kind / by area ----------------------------------------------- */
.browse__intro{margin:0 0 var(--s3)}
.browse{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);grid-template-columns:1fr}
@media(min-width:620px){.browse{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.browse{grid-template-columns:repeat(3,minmax(0,1fr))}}
.browse__item{border:1px solid var(--line);background:var(--paper-2);padding:.85rem 1rem;border-radius:2px}
.browse__item:hover{border-color:var(--ink)}
.browse__link{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;text-decoration:none}
.browse__name{font-family:var(--font-display);font-weight:700;font-size:1.08rem;line-height:1.2}
.browse__count{font:700 .78rem/1 var(--font-body);letter-spacing:.06em;color:var(--red);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.browse__item:hover .browse__name{color:var(--red)}
.browse__desc{margin:.3rem 0 0;font-size:.88rem;line-height:1.45;color:var(--ink-soft)}
.browse--when{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){.browse--when{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.browse--when{grid-template-columns:repeat(6,minmax(0,1fr))}}
.browse--when .browse__name{font-size:.98rem}

/* Compact masthead + mobile drawer --------------------------------------- */
.masthead__menu{display:none}
.tle-drawer{display:none}
@media(max-width:760px){
  /* The masthead was eating most of the first screen before a single listing. */
  .masthead__brand{padding:.55rem 0 .5rem}
  .wordmark{font-size:clamp(1.6rem,7.5vw,2.2rem)}
  /* Kept on a phone, at a size that does not push the listings down. */
  .masthead__tag{display:block;margin:.15rem 0 0;font-size:.74rem;line-height:1.35}
  .masthead__top{padding:.4rem 0;align-items:center;gap:.5rem}
  .masthead__ed{display:none}
  .section-nav{display:none}
  .masthead__menu{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;background:none;border:1px solid var(--line);
    border-radius:2px;padding:.3rem .55rem;font:700 .72rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink);cursor:pointer}
  .masthead__menu:hover{border-color:var(--ink)}

  .tle-drawer{display:block;position:fixed;inset:0;z-index:9999;background:rgba(18,18,18,.45)}
  .tle-drawer[hidden]{display:none}
  .tle-drawer__sheet{position:absolute;inset:0 0 0 auto;width:min(88vw,380px);background:var(--paper);
    display:flex;flex-direction:column;box-shadow:-8px 0 28px rgba(0,0,0,.18)}
  .tle-drawer__bar{display:flex;align-items:center;justify-content:space-between;padding:.7rem var(--s3);
    border-bottom:1px solid var(--line)}
  .tle-drawer__title{font:700 .76rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
  .tle-drawer__close{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:999px;
    background:var(--paper-2);color:var(--ink);cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease}
  .tle-drawer__close:hover,.tle-drawer__close:focus-visible{background:var(--paper);border-color:var(--ink-soft)}
  .tle-drawer__close:active{background:var(--line);border-color:var(--ink-soft)}
  /* contain stops a flick inside the sheet chaining to the page behind. */
  .tle-drawer__body{overflow-y:auto;overscroll-behavior:contain;padding:var(--s2) var(--s3) var(--s4);-webkit-overflow-scrolling:touch}
  .tle-drawer{overscroll-behavior:contain;touch-action:none}
  .tle-drawer__sheet{touch-action:pan-y}
  .tle-drawer__head{margin:var(--s2) 0 .4rem;font:700 .7rem/1 var(--font-body);letter-spacing:.1em;
    text-transform:uppercase;color:var(--red)}
  .tle-drawer__list{list-style:none;margin:0;padding:0}
  .tle-drawer__list a{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
    padding:.62rem 0;border-bottom:1px solid var(--line);text-decoration:none;
    font-family:var(--font-display);font-size:1.05rem;font-weight:700}
  .tle-drawer__list a span{font:600 .74rem/1 var(--font-body);color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .tle-drawer__list--split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.9rem}
  .tle-drawer__list--split a{font-family:var(--font-body);font-size:.82rem;font-weight:600;
    line-height:1.2;padding:.5rem 0;gap:.4rem;align-items:center;white-space:nowrap;min-width:0}
  .tle-drawer__list--split a span{font-size:.7rem;flex:0 0 auto}
  .tle-drawer__more{margin:.7rem 0 0}
  .tle-drawer__more a{font:700 .76rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
}

/* Browse cards ------------------------------------------------------------ */
.browse__item{padding:0;overflow:hidden;transition:border-color .2s ease,box-shadow .25s ease}
.browse__item:hover{border-color:var(--ink);box-shadow:0 6px 22px rgba(18,18,18,.10)}
.browse__link{display:block;position:relative;text-decoration:none;color:var(--ink)}
.browse__media{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
.browse__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.browse__item:hover .browse__media img{transform:scale(1.05)}
/* The scrim carries the type, so a bright photograph cannot swallow it. */
.browse__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,0) 34%,rgba(10,10,11,.34) 60%,rgba(10,10,11,.80) 100%)}
.has-img .browse__label{position:absolute;left:0;right:0;bottom:0;padding:.75rem .9rem;z-index:1;
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.has-img .browse__name{color:var(--paper);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.has-img .browse__count{color:var(--paper);background:var(--red);padding:.2rem .42rem;border-radius:2px}
.browse__label{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;padding:.8rem 1rem}
.browse__name{font-family:var(--font-display);font-weight:700;font-size:1.12rem;line-height:1.18;letter-spacing:-.005em}
.browse__count{font:700 .74rem/1 var(--font-body);letter-spacing:.06em;color:var(--red);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.browse__desc{margin:0;padding:.55rem 1rem .9rem;font-size:.88rem;line-height:1.45;color:var(--ink-soft)}
/* The when tiles have no photograph, so they need their own vertical rhythm
   and a minimum height, otherwise a one-word label makes a squat box next to
   a two-word one. */
.browse--when .browse__item{background:var(--paper-2)}
.browse--when .browse__link{display:flex;height:100%}
.browse--when .browse__label{padding:.85rem .95rem;width:100%;align-items:center;min-height:3.4rem}
.browse--when .browse__name{font-size:1rem}
.browse--when .browse__count{font-size:1.05rem;font-family:var(--font-display);letter-spacing:0}

/* Masthead ticker --------------------------------------------------------- */
/* Grid stacking, not absolute positioning: every line sits in the same cell,
   so the box sizes itself to the longest one. A fixed min-width clipped
   "127 listings, all checked" halfway through. */
.ticker{display:inline-grid;vertical-align:bottom}
.ticker__item{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(.3em);
  transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.ticker__item.is-on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .ticker__item{transition:none}
}

/* Planner ----------------------------------------------------------------- */
.plan__results{margin-top:var(--s3)}
.plan__empty{margin-top:var(--s3);color:var(--ink-soft)}

/* Near me ----------------------------------------------------------------- */
.nearme__go{cursor:pointer;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nearme__go:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
.nearme [data-nearme-clear]{cursor:pointer}
.nearme__results{margin-top:var(--s3)}
.nearme__miles{display:inline-block;font:700 .7rem/1 var(--font-body);letter-spacing:.06em;
  background:var(--ink);color:var(--paper);padding:.3rem .45rem;border-radius:2px;font-variant-numeric:tabular-nums}
.nearme__fallback{margin-top:var(--s2);color:var(--ink-soft)}

/* Front page hero --------------------------------------------------------- */
.hero{position:relative;isolation:isolate;margin-bottom:var(--s3)}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink)}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.34) 0%,rgba(10,10,11,.52) 45%,rgba(10,10,11,.86) 100%)}
.hero__inner{padding-top:var(--s6);padding-bottom:var(--s5);max-width:var(--container)}
.hero__eyebrow{margin:0 0 .5rem;font:700 .74rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.hero__title{margin:0 0 .5rem;color:var(--paper);font-size:clamp(2rem,5.4vw,3.5rem);font-weight:900;
  letter-spacing:-.02em;line-height:1.05;max-width:18ch;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero__lede{margin:0 0 var(--s3);color:rgba(251,250,247,.9);font:400 1.08rem/1.55 var(--font-display);max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.hero__btn{display:inline-block;padding:.72rem 1.05rem;border:1px solid rgba(251,250,247,.55);color:var(--paper);
  text-decoration:none;font:700 .76rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;border-radius:2px;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.hero__btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero__btn--primary{background:var(--red);border-color:var(--red);color:var(--paper)}
.hero__btn--primary:hover{background:var(--red-deep);border-color:var(--red-deep);color:var(--paper)}
@media(max-width:640px){
  .hero__inner{padding-top:var(--s4);padding-bottom:var(--s4)}
  .hero__lede{font-size:1rem}
  .hero__btn{padding:.62rem .85rem;font-size:.72rem}
}

/* The bar already draws a rule; the first day heading drew a second one. */
[data-plan-results] .day:first-child{border-top:0;margin-top:var(--s3)}
/* The pager sits under the grid, centred, with the section's own space below. */
.plan__moredays{margin:var(--s3) 0 0;text-align:center}
.plan .plan__moredays:last-child{margin-bottom:0}

/* Result cards: one column on a phone, three on a wide screen. */
.plan__grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);grid-template-columns:1fr}
@media(min-width:640px){.plan__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.plan__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{border:1px solid var(--line);background:var(--paper-2);border-radius:2px;overflow:hidden;
  transition:border-color .2s ease,box-shadow .25s ease}
.pcard:hover{border-color:var(--ink);box-shadow:0 6px 22px rgba(18,18,18,.10)}
.pcard__link{display:block;text-decoration:none;color:var(--ink);height:100%}
.pcard__media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pcard:hover .pcard__media img{transform:scale(1.04)}
.pcard__body{display:block;padding:.75rem .9rem .9rem}
.pcard__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin-bottom:.3rem}
.pcard__title{display:block;font-family:var(--font-display);font-weight:700;font-size:1.06rem;line-height:1.2;
  text-wrap:wrap;margin-bottom:.25rem}
.pcard:hover .pcard__title{color:var(--red)}
.pcard__meta{display:block;font-size:.85rem;color:var(--ink-soft);line-height:1.45}
.pcard__meta b{color:var(--ink);font-variant-numeric:tabular-nums}
/* Same on the cards the script builds: the venue follows the time and the
   separator, so everything after the bold is the venue. */
.pcard__meta{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__meta b{font-size:1.02em}

/* Planner facets ----------------------------------------------------------
   A row of dropdowns rather than a wall of pills. Three take one answer and two
   take any number, which is the difference between the radios and checkboxes
   inside and needs no label to explain. */
.facets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s2)}
.facet{position:relative}
.facet__toggle{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.5rem .8rem;border:1px solid var(--line);border-radius:2px;background:var(--paper-2);
  color:var(--ink);cursor:pointer;font:600 .84rem/1 var(--font-body);
  transition:border-color .18s ease,background .18s ease}
.facet__toggle:hover{border-color:var(--ink)}
.facet.is-open .facet__toggle{border-color:var(--ink)}
.facet.is-set .facet__toggle{border-color:var(--red);background:var(--red-soft);color:var(--red-deep)}
.facet__count{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;
  padding:0 .25rem;border-radius:999px;background:var(--red);color:var(--paper);
  font:700 .66rem/1 var(--font-body)}
/* An author display beats the browser's own [hidden] rule. Anything in the
   theme that is hidden by attribute and styled with a display needs this. */
[hidden]{display:none !important}
.facet__chev{width:15px;height:15px;flex:0 0 auto;transition:transform .18s ease}
.facet.is-open .facet__chev{transform:rotate(180deg)}

.facet__panel{position:absolute;z-index:20;top:calc(100% + .35rem);left:0;min-width:15rem;max-width:min(21rem,92vw);
  border:1px solid var(--ink);border-radius:2px;background:var(--paper-2);
  box-shadow:0 10px 30px rgba(18,18,18,.14);padding:.5rem}
.facet__panel[hidden]{display:none}
.facet__search{padding:.15rem .15rem .45rem}
.facet__search input{width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:2px;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:400;line-height:1.4;font-size:max(16px,1rem)}
.facet__search input:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--ink)}
.facet__list{list-style:none;margin:0;padding:0;max-height:17rem;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.facet__opt{display:flex;align-items:center;gap:.55rem;padding:.42rem .45rem;border-radius:2px;cursor:pointer;
  font:500 .86rem/1.3 var(--font-body);color:var(--ink)}
.facet__opt:hover{background:var(--paper)}
.facet__opt input{flex:0 0 auto;width:16px;height:16px;accent-color:var(--red);margin:0}
.facet__opt-name{flex:1 1 auto;min-width:0}
.facet__opt-count{flex:0 0 auto;font:600 .72rem/1 var(--font-body);color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.facet__locate{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .8rem;
  border:1px solid var(--ink);border-radius:2px;background:var(--paper-2);color:var(--ink);cursor:pointer;
  font:700 .78rem/1 var(--font-body);letter-spacing:.04em}
.facet__locate svg{width:16px;height:16px;flex:0 0 auto}
.facet__locate:hover{background:var(--paper)}
.facet__locate.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.facet__locate[disabled]{opacity:.6;cursor:progress}
.pcard__miles{display:inline-flex;align-items:center;padding:.28rem .4rem;border-radius:2px;
  background:var(--ink);color:var(--paper);font:700 .66rem/1 var(--font-body);letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
.nearme__note{margin:var(--s2) 0 0;max-width:var(--measure);color:var(--ink-soft);font-size:.95rem}

@media(max-width:640px){
  .facet__locate{flex:1 1 100%;justify-content:center}
  .facets{gap:.4rem}
  .facet{flex:1 1 calc(50% - .2rem)}
  /* Budget is the odd one out of five, so it takes the whole last row. Once
     the distance facet joins there are six and they pair evenly again. */
  .facets:not(.is-located) .facet[data-facet="cost"]{flex-basis:100%}
  .facets:not(.is-located) .facet[data-facet="cost"] .facet__panel{left:0;right:auto;min-width:100%}
  .facet__toggle{width:100%;justify-content:space-between;font-size:.8rem;padding:.5rem .6rem}
  .facet__panel{left:0;right:auto;min-width:min(19rem,88vw)}
}

/* The count and the choices so far, kept in view while the results scroll. */
.plan__bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;
  margin-top:var(--s2);padding:.7rem 0;background:var(--paper);border-bottom:2px solid var(--rule)}
.plan__count{margin:0;font:700 .78rem/1.3 var(--font-body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.plan__tokens{display:flex;flex-wrap:wrap;gap:.35rem;flex:1 1 10rem}
.plan__acts{display:flex;align-items:center;gap:.9rem;margin-left:auto}
.token{display:inline-flex;align-items:center;gap:.25rem;padding:.28rem .4rem .28rem .6rem;
  border:1px solid var(--line);border-radius:999px;background:var(--paper-2);
  font:500 .76rem/1 var(--font-body);color:var(--ink)}
.token button{appearance:none;background:none;border:0;cursor:pointer;color:var(--ink-soft);
  font:400 1.05rem/1 var(--font-body);padding:0 .2rem;border-radius:999px}
.token button:hover{color:var(--red)}
@media(max-width:640px){
  .plan__panel{padding:0 .8rem}
  .plan__acts{margin-left:0}
  .tag{font-size:.8rem;padding:.4rem .7rem}
  /* Wrapping a joined track leaves ragged holes at the end of each row. Two
     even columns divides cleanly for all three of these controls: six, four
     and two. */
  .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;justify-self:stretch}
  .seg__btn{justify-content:center;text-align:center;padding:.55rem .5rem;font-size:.67rem;
    box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
  .seg__btn.is-on{box-shadow:1px 0 0 var(--ink),0 1px 0 var(--ink)}
}

/* Safari had no aspect-ratio until 15. An <img> carries its own dimensions and
   copes, but these are empty containers and would come out with no height, so
   the picture would simply not be there. Nothing inside this block reaches a
   browser that has the property. */
@supports not (aspect-ratio: 3 / 2) {
  .pcard__media,.browse__media{position:relative;height:0;padding-bottom:66.7%}
  .event__thumb,.diary__thumb{position:relative;height:0;padding-bottom:75%}
  .pcard__media > img,.browse__media > img,.event__thumb > img,.diary__thumb > img{
    position:absolute;top:0;left:0;width:100%;height:100%}
}

/* Saving, and the canvas that holds it -------------------------------------
   The list lives in the reader's browser, so everything here is drawn by the
   script and this is only how it looks. */
.save{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.35rem .6rem;
  border:1px solid var(--line);border-radius:999px;background:var(--paper-2);color:var(--ink-soft);
  cursor:pointer;font:600 .74rem/1 var(--font-body);letter-spacing:.04em;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.save svg{width:15px;height:15px;flex:0 0 auto}
.save:hover{border-color:var(--ink);color:var(--ink)}
.save.is-on{border-color:var(--red);color:var(--red-deep);background:var(--red-soft)}
.save.is-on svg{fill:currentColor}
.save--compact{position:absolute;top:.3rem;right:.3rem;z-index:2;width:34px;height:34px;
  min-height:0;padding:0;justify-content:center;border-radius:999px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(18,18,18,.1)}
.save--compact.is-on{background:var(--red-soft)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .save--compact{background:var(--paper-2)}
}
.save--compact .save__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.event{position:relative}
/* The picture's wrapper. The bookmark is in the row's corner, not on here. */
.event__media{position:relative;display:block;align-self:start;min-width:0}
/* One column for everything a listing says. 41rem is about seventy five
   characters at this size, which reads; the card can be wider than its text and
   usually should be. The bookmark sits outside this, in the card's own corner. */
.event__body{max-width:41rem}
/* Keep the corner clear for the bookmark, on every row: it sits in the corner
   whether or not the row has a picture. */
.event__kicker,.event__title{padding-right:2.7rem}
.page-head .save{margin-top:.2rem}

.masthead__saved{display:inline-flex;align-items:center;gap:.3rem;margin-left:.9rem;
  text-decoration:none;color:var(--ink-soft);font:600 .72rem/1 var(--font-body);letter-spacing:.08em;
  text-transform:uppercase}
.masthead__saved svg{width:13px;height:13px;flex:0 0 auto}
.masthead__saved:hover{color:var(--red)}
.masthead__saved-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.05rem;
  height:1.05rem;padding:0 .22rem;border-radius:999px;background:var(--red);color:var(--paper);
  font:700 .62rem/1 var(--font-body);letter-spacing:0}
@media(max-width:760px){.masthead__saved span:not(.masthead__saved-n){display:none}
  .masthead__saved{margin-left:auto}}

.canvas{margin-top:var(--s3)}
.canvas--empty{border-top:1px solid var(--line);padding-top:var(--s3)}
.canvas__lede{max-width:var(--measure);color:var(--ink-soft);font:400 1.05rem/1.55 var(--font-display)}
.canvas__acts{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:var(--s3) 0 0}
.canvas__clear{background:none;border:0;padding:.4rem 0;cursor:pointer;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;font:600 .8rem/1 var(--font-body)}
.canvas__clear:hover{color:var(--red)}
.canvas__undo{font:600 .8rem/1.4 var(--font-body);color:var(--red)}
.canvas__undo button{background:none;border:0;padding:0;cursor:pointer;color:var(--red);
  text-decoration:underline;font:inherit}

.stats{display:grid;gap:var(--s2);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{border:1px solid var(--line);border-top:3px solid var(--ink);background:var(--paper-2);
  padding:var(--s2) var(--s2) calc(var(--s2) - .2rem);display:flex;flex-direction:column;gap:.15rem}
.stat:first-child{border-top-color:var(--red)}
.stat__n{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,4vw,2.3rem);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__label{font:700 .7rem/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.stat__note{font:400 .76rem/1.35 var(--font-body);color:var(--ink-soft)}

.pcard{position:relative}
/* A card is one big link, so the bookmark cannot live inside it. The holder
   carries both and the grid treats the holder as the card. */
.card-holder{position:relative;display:flex;min-width:0}
.card-holder > .card{flex:1 1 auto;min-width:0}
.card-holder > .save--compact{top:.5rem;right:.5rem}
/* In a diary line it sits with the text rather than over a picture. */
.diary__item .save--compact{position:static;width:28px;height:28px;margin-right:.4rem;
  vertical-align:middle;box-shadow:none}

/* Cards sit their bookmark a touch further in than a listing row does, because
   a card is all picture and the corner is busier. */
.pcard .save--compact{top:.5rem;right:.5rem}
.pcard__drop{position:absolute;top:.45rem;right:.45rem;z-index:2;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:999px;background:var(--paper-2);color:var(--ink-soft);cursor:pointer;
  font:400 1.1rem/1 var(--font-body)}
.pcard__drop:hover{border-color:var(--red);color:var(--red)}
[data-saved] .pcard .save--compact{display:none}
.pcard.is-past{opacity:.62}
.pcard__past{display:inline-flex;align-items:center;padding:.28rem .4rem;border-radius:2px;
  background:var(--ink);color:var(--paper);font:700 .64rem/1 var(--font-body);letter-spacing:.06em;
  text-transform:uppercase}

/* The action row ---------------------------------------------------------- */
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--s3) 0 0;align-items:center}
.actions--bulk{margin:var(--s3) 0 0}
.act{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .85rem;
  border:1px solid var(--line);border-radius:2px;background:var(--paper-2);color:var(--ink);
  text-decoration:none;cursor:pointer;font:600 .78rem/1 var(--font-body);
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.act svg{width:16px;height:16px;flex:0 0 auto}
.act:hover{border-color:var(--ink);background:var(--paper)}
.act--quiet{border-color:transparent;background:none;color:var(--ink-soft);min-height:36px;padding:.4rem .55rem}
.act--quiet:hover{color:var(--ink);background:var(--paper)}
.act--quiet.is-on{border-color:var(--red);color:var(--red-deep);background:var(--red-soft)}
.actions__sort{display:inline-flex;gap:.2rem;margin-left:auto;border:1px solid var(--line);
  border-radius:2px;padding:.15rem}
.actions .save{min-height:44px;border-radius:2px;padding:.5rem .85rem;color:var(--ink);
  font-size:.78rem;letter-spacing:0}
.actions .save svg{width:16px;height:16px}
.book{margin:var(--s3) 0 0}
@media(max-width:560px){
  .actions{gap:.4rem}
  .act{flex:1 1 calc(50% - .2rem);justify-content:center;padding:.5rem .5rem;font-size:.74rem}
  .actions .save{flex:1 1 calc(50% - .2rem);justify-content:center}
  .actions__sort{flex:1 1 100%;margin-left:0;justify-content:center}
  .act--quiet{flex:1 1 auto}
}
@media print{.actions,.save,.pcard__drop{display:none !important}}

/* What other people are looking at ---------------------------------------- */
.popular__list{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:1fr}
@media(min-width:700px){.popular__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem var(--s3)}}
.popular__row{display:grid;grid-template-columns:1.6rem 4.5rem minmax(0,1fr);gap:.7rem;
  align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line)}
.popular__row:not(:has(.popular__thumb)){grid-template-columns:1.6rem minmax(0,1fr)}
.popular__rank{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--line);
  text-align:center;font-variant-numeric:tabular-nums}
.popular__row:nth-child(-n+3) .popular__rank{color:var(--red)}
.popular__thumb{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--paper-2)}
.popular__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.popular__body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.popular__title{font-family:var(--font-display);font-weight:700;font-size:.98rem;line-height:1.25;
  text-decoration:none;color:var(--ink);text-wrap:wrap}
.popular__title:hover{color:var(--red)}
.popular__meta{display:flex;flex-wrap:wrap;gap:.15rem .5rem;font:400 .78rem/1.35 var(--font-body);
  color:var(--ink-soft)}
.popular__views{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* The note that says where a save went ------------------------------------ */
.toast{position:fixed;left:50%;bottom:1rem;z-index:9998;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:.75rem;max-width:min(30rem,calc(100vw - 1.5rem));
  width:max-content;padding:.7rem .85rem;border:1px solid var(--ink);border-radius:3px;background:var(--ink);
  color:var(--paper);box-shadow:0 12px 34px rgba(18,18,18,.28);
  font:600 .84rem/1.3 var(--font-body);opacity:0;pointer-events:none;
  transition:transform .28s ease,opacity .28s ease}
.toast.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast__text{flex:1 1 auto;min-width:0}
.toast__go{flex:0 0 auto;color:var(--paper);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap}
.toast__go:hover{color:#fff}
.toast__close{flex:0 0 auto;background:none;border:0;padding:0 .1rem;cursor:pointer;
  color:rgba(251,250,247,.75);font:400 1.15rem/1 var(--font-body)}
.toast__close:hover{color:var(--paper)}
@media(max-width:560px){
  .toast{bottom:.7rem;width:max-content;max-width:calc(100vw - 1.4rem);
    padding:.7rem .8rem;gap:.6rem}
}
@media(prefers-reduced-motion:reduce){.toast{transition:opacity .2s ease}}
@media print{.toast{display:none !important}}

/* The answer, first ------------------------------------------------------- */
.answer{margin:var(--s3) 0 0;padding:var(--s3);border-left:3px solid var(--red);
  background:var(--paper-2);border-radius:0 3px 3px 0;max-width:var(--measure-head)}
.answer__short{margin:0;font:400 1.15rem/1.5 var(--font-display);color:var(--ink);text-wrap:wrap}
@media(max-width:560px){
  .answer{padding:var(--s2);border-left-width:2px}
  .answer__short{font-size:1.05rem}
}

/* Questions people ask ---------------------------------------------------- */
.qlist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.qlist__item{padding:.7rem var(--s2);border-radius:3px;background:var(--paper-2);
  transition:box-shadow .18s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
.qlist__item:hover{box-shadow:0 2px 14px rgba(18,18,18,.09)}
.qlist__item:active{box-shadow:0 1px 6px rgba(18,18,18,.14);transform:translateY(1px)}
.qlist__item:active a{color:var(--red)}
.qlist__item a{font-weight:600}
.qlist__item .small{display:block;margin-top:.15rem;max-width:41rem}
@media(prefers-reduced-motion:reduce){.qlist__item:active{transform:none}}

/* A date we have inferred, said plainly ----------------------------------- */
.datenote{margin:.5rem 0 0;padding:.5rem .7rem;border-left:3px solid var(--line);
  background:var(--paper-2);border-radius:0 3px 3px 0;font-size:.86rem;
  color:var(--ink-2,var(--ink));max-width:41rem}
.datenote b{color:var(--ink)}

/* The bookmark on a phone ------------------------------------------------- */
/* This has to live after the base .save--compact rule above, not up in the
   card block with the rest of the mobile sizing. Same specificity, so the last
   one wins, and up there it lost silently: every phone was getting the desktop
   inset and the button sat a third of the way into the card. */
@media(max-width:640px){
  /* Hard into the corner. The card's own padding is .8rem, so this sits the
     bookmark outside the text block entirely rather than merely beside it. */
  /* And a little more clearance on the two lines that pass under it, so a long
     headline cannot creep back into the corner on a narrow phone. */
  .event__kicker,.event__title{padding-right:2.7rem}
}

/* The legal bar, one row ------------------------------------------------- */
.site-footer__legal-row{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.6rem var(--s3)}
.site-footer__copy{margin:0}
.site-footer__legal-nav{display:flex;flex-wrap:wrap;gap:.4rem var(--s2)}
.site-footer__legal-nav a{padding:.2rem 0}
.site-footer__smallprint{margin:0;color:var(--ink-soft);font-size:.94em}
@media(max-width:760px){
  .site-footer__legal-row{justify-content:flex-start}
  .site-footer__smallprint{width:100%}
}

/* Sitemap ---------------------------------------------------------------- */
.sitemap__block{margin:var(--s5) 0 0;padding:var(--s3) 0 0;border-top:2px solid var(--ink)}
.sitemap__block > h2{margin:0 0 var(--s2);font-size:1.5rem}
.sitemap__sub{margin:0 0 var(--s3)}
.sitemap__sub h3{margin:0 0 .3rem;font-size:1.02rem}
.sitemap__count{margin-left:.35rem;padding:.1rem .34rem;border-radius:2px;
  background:var(--paper-2);font:600 .68rem/1.5 var(--font-body);color:var(--ink-soft);
  vertical-align:middle}
.sitemap__note{margin:0 0 .6rem;color:var(--ink-soft);font-size:.88rem;max-width:var(--measure)}
.sitemap__list{list-style:none;margin:0;padding:0;
  display:grid;gap:.1rem var(--s3);grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.sitemap__list a{display:block;padding:.28rem 0;text-decoration:none}
.sitemap__list a:hover{color:var(--red);text-decoration:underline}

/* Link to us ------------------------------------------------------------- */
.linkus__preview{padding:var(--s2);border:1px solid var(--line);background:var(--paper-2);
  border-radius:3px;max-width:var(--measure)}
.linkus__label{display:block;margin:.7rem 0 .25rem;font:600 .68rem/1 var(--font-body);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.linkus__code{display:block;width:100%;max-width:var(--measure);padding:.6rem .7rem;
  border:1px solid var(--line);border-radius:3px;background:var(--paper);
  font:400 .82rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink);resize:vertical}
.linkus__code:focus{outline:2px solid var(--red);outline-offset:1px}

/* Journal clusters -------------------------------------------------------- */
.cluster{margin:var(--s5) 0 0}
.cluster .section__head h2{margin:0}
.cluster .section__head h2 a{text-decoration:none;color:inherit}
.cluster .section__head h2 a:hover{color:var(--red)}
.cluster__note{margin:0 0 var(--s3);max-width:var(--measure);color:var(--ink-soft);
  font-size:.92rem;line-height:1.55;text-wrap:pretty}

/* The tail of a Journal piece --------------------------------------------- */
.posttail{margin-top:var(--s4)}
/* The byline is small print, not a section, so the first block after it does
   not need a full section break above. 3rem left it looking adrift. */
.updated + .posttail{margin-top:var(--s3)}
.posttail__note{margin:0 0 var(--s2);max-width:var(--measure);color:var(--ink-soft);
  font-size:.92rem;line-height:1.55;text-wrap:pretty}
.posttail__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.posttail__links a{display:inline-flex;align-items:center;padding:.42rem .8rem;
  border:1px solid var(--line);border-radius:999px;text-decoration:none;
  font:600 .82rem/1 var(--font-body);color:var(--ink);
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.posttail__links a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* The lead picture on a post -------------------------------------------- */
/* It carried a top margin and no bottom one, so the first paragraph started
   flush against the bottom of the photograph. */
.post__lead{margin:var(--s3) 0 var(--s3)}
.post__lead img{display:block;width:100%;height:auto}