/* Events, September 2026 - the whole section.

   events.html's own rules, in the mock's order: the hero and the finder
   strip over it, the three panels of tiles, the date line and the map, the
   cards, the month bands, the year as it comes round, the traveller's dates
   as rows, and one event with its date plate. Covers /events and
   /events/{slug}.

   Left out: the chrome (the shared sheet's and the shared components'), the
   ground and the type (the shared sheet's), and the mock's own black strips,
   which name the screens inside it and are not the design.

   Built by scratchpad/design-2026/build-events-2026.py - do not edit by
   hand.                                                                  */
button,input{font:inherit;color:inherit;background:none;border:0}
.h2 em,h1 em,h2 em,h3 em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em;letter-spacing:0}
.band{padding:clamp(56px,9vh,110px) 0}
.btn.quiet:hover{background:var(--ink);color:var(--paper)}
/* the hero and the strip, as on the site */
.hero{position:relative;height:clamp(420px,56vh,640px);overflow:hidden;background:var(--forest);color:#fff}
.hero.short{height:clamp(200px,26vh,300px)}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,24,20,.35),rgba(20,24,20,.7))}
.hero .in{position:absolute;left:0;right:0;bottom:clamp(96px,14vh,140px)}
.hero .kick{color:rgba(255,255,255,.7)}
.hero.short .in{display:none}
.hh{font-family:var(--face);font-weight:400;font-size:min(clamp(40px,5.6vw,84px), 28px + (clamp(40px,5.6vw,84px) - 28px) * 0.6);line-height:1;letter-spacing:-.012em;max-width:13ch;color:#fff}
.hh em{font-family:var(--script);font-style:italic;font-weight:500;font-size:1.12em}
.finder-wrap{position:relative;z-index:6;margin-top:-64px}
.finder{max-width:1400px;margin:0 auto;padding:0 var(--edge)}
.finder .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;background:var(--paper);box-shadow:0 30px 80px rgba(65,64,66,.22);padding:0;border:0;gap:0}
.finder .f{display:flex;flex-direction:column;justify-content:center;gap:5px;height:88px;padding:0 clamp(18px,2vw,28px);text-align:left;transition:background .25s}
.finder .f:hover,.finder .f.open{background:var(--stone)}
.finder .f small{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75)}
.finder .f b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(17px,1.4vw,20px);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finder .go{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:150px;height:88px;padding:0 clamp(22px,2.4vw,40px);background:var(--forest);color:var(--paper);font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;transition:background .22s}
.finder .go:hover{background:var(--moss)}
.finder .go i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--on-forest-55)}
@media(max-width:900px){.finder .row{grid-template-columns:1fr 1fr}.finder .go{grid-column:1/-1;flex-direction:row;gap:14px;height:64px}}
[hidden]{display:none!important}
.panel .in-p{position:relative}
.day[hidden],.pick[hidden],.dot[hidden]{display:none}
.finder .f .x{display:none}
.finder .f.set small::after{content:" · change";letter-spacing:.1em;text-transform:none;font-family:var(--serif);font-style:italic;font-size:12px;color:var(--ink-55)}
.words .dates .btn{min-height:36px;padding:0 14px;margin-left:8px}
/* the panels: tiles, no words of explanation */
.panel{max-width:1400px;margin:0 auto;padding:0 var(--edge)}
.panel .in-p{background:var(--paper);box-shadow:0 30px 80px rgba(65,64,66,.22);border-top:1px solid var(--stone-2);padding:clamp(20px,2.6vw,32px)}
.where-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.tiles{display:grid;gap:10px}
.tiles.regions{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.kinds{grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles.months{grid-template-columns:repeat(6,minmax(0,1fr))}
.tiles .tile{position:relative;display:flex;flex-direction:column;background:var(--stone);color:var(--ink);padding:14px;min-height:96px;border:1px solid transparent;text-align:left;transition:background .25s,color .25s}
.tiles .tile:hover{border-color:var(--ink)}
.tiles .tile.on{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.tiles .tile img,.tiles .tile .ph{width:calc(100% + 28px);margin:-14px -14px 12px;aspect-ratio:1337/1080;object-fit:cover;background:var(--stone-2);display:block;max-height:110px}
.tiles .tile b{font-family:var(--face);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.1}
.tiles .tile span{margin-top:4px;font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.35;color:var(--ink-75)}
.tiles .tile.on span{color:var(--on-forest)}
.tiles .tile i{margin-top:auto;padding-top:6px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--ink-55)}
.tiles .tile.on i{color:var(--on-forest-55)}
.tiles .tile.any{justify-content:center;background:var(--paper);border-color:var(--ink)}
.tiles .tile.any.on{background:var(--forest);border-color:var(--forest)}
.tiles .tile.month{min-height:120px}
.tiles .tile.month b{font-size:clamp(19px,1.7vw,24px)}
.words{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(18px,2.4vw,34px)}
.words button{font-family:var(--face);font-size:min(clamp(20px,2vw,28px), 28px + (clamp(20px,2vw,28px) - 28px) * 0.6);line-height:1.15;color:var(--ink-35);transition:color .25s;padding:2px 0}
.words .on{color:var(--ink)}
.words button:hover{color:var(--ink-75)}
.words.small{margin-top:14px;padding-top:14px;border-top:1px solid var(--stone-2)}
.words.small button{font-size:clamp(18px,1.6vw,22px)}
.words .dates{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-75)}
.words .dates input{width:8.4em;border-bottom:1px solid var(--ink);padding:2px 0;font-family:var(--serif);font-style:normal;font-size:17px;color:var(--ink)}
@media(max-width:1000px){.where-grid{grid-template-columns:1fr}.map{max-width:260px}.tiles.regions,.tiles.kinds{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.months{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.tiles.regions,.tiles.kinds,.tiles.months{grid-template-columns:1fr 1fr}}
/* the date line, with the map small beside it */
.top{padding:clamp(40px,6vh,64px) 0 0}
.top .in{display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,4vw,60px);flex-wrap:wrap;padding-bottom:clamp(24px,4vh,40px);border-bottom:1px solid var(--stone-2)}
.top .date{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,22px);color:var(--ink)}
.top .date b{font-weight:400;font-style:normal;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--forest);margin-right:12px}
.top .map{display:flex;align-items:center;gap:18px}
.top .map .scot{width:110px;height:auto;flex:0 0 auto}
.top .map .cap{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink-75);max-width:14ch}
.scot path{fill:var(--stone)}
.scot .dot circle{fill:var(--forest);stroke:var(--paper);stroke-width:1.5}
.panel .map .scot{width:100%;height:auto;max-width:260px}
/* the cards */
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vh,40px) clamp(16px,2vw,28px)}
.pick{display:flex;flex-direction:column;min-width:0}
.pick .ph{display:block;aspect-ratio:var(--wide);overflow:hidden;background:var(--stone-2)}
.pick .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.pick .ph:hover img{transform:scale(1.035)}
.pick .tx{display:flex;flex-direction:column;flex:1;padding-top:14px}
.pick .k{display:block;margin-bottom:8px;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.pick h3{font-family:var(--face);font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.15;text-wrap:balance}
.pick h3 a:hover{color:var(--moss)}
.pick p{margin-top:8px;font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--ink-75)}
.pick .kind{display:block;margin-top:auto;padding-top:12px;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-55)}
@media(max-width:1100px){.picks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.picks{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.picks{grid-template-columns:1fr}}
.day{padding:clamp(40px,6vh,64px) 0}
.day:nth-of-type(even){background:var(--stone)}
.day .head{margin-bottom:clamp(20px,3vh,28px)}
.day .h2{font-size:min(clamp(26px,2.4vw,34px), 28px + (clamp(26px,2.4vw,34px) - 28px) * 0.6)}
/* the year as it comes round */
.yr{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px clamp(20px,3vw,48px);padding:22px 0;border-top:1px solid var(--stone-2)}
.yr h3{font-family:var(--face);font-weight:400;font-size:min(clamp(24px,2.2vw,32px), 28px + (clamp(24px,2.2vw,32px) - 28px) * 0.6);line-height:1.1}
.yr .names{display:flex;flex-wrap:wrap;gap:8px clamp(18px,2.4vw,34px);align-items:baseline}
.yr .names a{font-family:var(--face);font-size:clamp(18px,1.5vw,21px);line-height:1.3;color:var(--ink-75)}
.yr .names a:hover{color:var(--ink)}
.yr .names a span{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-55);margin-left:8px}
@media(max-width:700px){.yr{grid-template-columns:1fr;gap:8px}}
/* the traveller's dates: rows by day */
.rows{columns:2;column-gap:clamp(28px,4vw,72px)}
.rows.one{columns:1}
.row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px;break-inside:avoid;padding:12px 0;border-top:1px solid var(--stone-2)}
.row .d{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);padding-top:6px}
.row .t{font-family:var(--face);font-size:clamp(18px,1.5vw,21px);line-height:1.15}
.row .r{grid-column:2;font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-55)}
.row:hover .t{color:var(--moss)}
.stayday{margin-top:clamp(28px,4vh,44px)}
.stayday .h2{font-size:min(clamp(24px,2.2vw,32px), 28px + (clamp(24px,2.2vw,32px) - 28px) * 0.6);margin-bottom:6px}
.stayday .h2 em{font-size:1em}
.stayday .rows{max-width:60rem}
.none{font-style:italic;color:var(--ink-55);padding:12px 0;border-top:1px solid var(--stone-2)}
@media(max-width:900px){.rows{columns:1}}
/* one event */
.event .top-s{padding:clamp(40px,6vh,64px) 0 0}
.event .top-s .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,60px);align-items:end}
.event h1{font-family:var(--face);font-weight:400;font-size:min(clamp(34px,4.2vw,60px), 28px + (clamp(34px,4.2vw,60px) - 28px) * 0.6);line-height:1.04;letter-spacing:-.01em;max-width:18ch;text-wrap:balance}
.event .meta{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-75)}
.event .plate-d{border:1px solid var(--ink);padding:18px 22px;min-width:150px;text-align:center}
.event .plate-d b{display:block;font-family:var(--face);font-weight:400;font-size:min(clamp(40px,4vw,56px), 28px + (clamp(40px,4vw,56px) - 28px) * 0.6);line-height:1;letter-spacing:-.01em}
.event .plate-d span{display:block;margin-top:8px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-75)}
.event .plate{max-width:calc(var(--col) + 18rem);margin:clamp(32px,5vh,48px) auto 0;padding:0 var(--edge)}
.event .plate img{width:100%;aspect-ratio:var(--wide);object-fit:cover;background:var(--stone-2)}
.col{max-width:var(--col);margin:0 auto;padding:clamp(40px,6vh,64px) clamp(20px,5vw,24px) 0}
.col p{font-family:var(--serif);font-size:clamp(19px,1.55vw,22px);line-height:1.72;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4;text-wrap:pretty}
.col p + p{margin-top:24px}
.col .btns{margin-top:28px}
.facts{margin-top:32px;border-top:1px solid var(--stone-2)}
.facts div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--stone-2)}
.facts span:first-child{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);padding-top:5px}
.facts span+span{font-family:var(--serif);font-size:16.5px}
.event .mapline{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center;margin-top:24px}
.event .mapline .scot{width:120px;height:auto}
.event .mapline p{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-75)}
@media(max-width:700px){.event .top-s .in{grid-template-columns:1fr}.event .plate-d{display:inline-block}}
@media(max-width:560px){.btns .btn{flex:1 1 100%}}

/* ---- what app.css says about the maps, undone ----

   Measured on the mock: its svg is inline, and app.css's reset makes every
   svg a block. And .facts is a name app.css uses too - it lays its own out
   as a grid - and this sheet never says a display for it, so the 2023 rule
   was the only one there. The mock computes block.                        */
.scot{display:inline}
.facts{display:block}

/* ---- the hero goes under the bar, as it does on every other page ----

   events.html draws its own bar with a stone ground, so a hero below it is
   right in the mock. The site wears the September bar instead: glass over the
   opening photograph, and use-glass-bar makes it glass whenever a hero has
   height - without checking the hero is under it. Here it was not, so the
   Shell words sat on the page's own near-white ground at **1.08 to 1** and
   the mark disappeared.

   `_landing.css` pulls every other hero up with exactly this. See
   docs/decisions.md.                                                     */
.hero{margin-top:calc(-1*var(--bar))}

/* ---- the strip on a phone, which the mock does not survive ----

   .finder .f is a grid item whose b is nowrap with an ellipsis, and a grid
   item will not shrink below its content unless it is told it may: the mock
   scrolls sideways by 173 pixels at 375. One property, and the ellipsis it
   already asks for does the rest. See docs/decisions.md.                 */
.finder .f{min-width:0}

/* ---- whose photograph it is ----

   An event's photograph from Google Maps must say who took it (Jack, 23
   September). events.html has no caption on its plate; the event mock
   (hidden-scotland-event-redesign) does, and these are its two rules,
   unchanged.                                                               */
.plate figcaption{padding:10px 2px 0;text-align:right}
.plate figcaption span{font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-55)}

/* ---- THE EVENTS PAGE, A DAY AT A TIME (events-days-css.py) ---- */
.evn-page{--evn-cols:3;--evn-ground:var(--paper);--edge:clamp(16px,3vw,48px);--stone:#E4DED9;--oat:#F2EEE6;--moss:#414042;--bracken:#682114;--ink-75:rgba(65,64,66,.75);--ink-55:rgba(65,64,66,.55);--rule:rgba(65,64,66,.12)}
.evn-page .evn-at{font:600 13px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-75);margin:0}
.evn-page /* the hero: our film, .evn-page the words at its foot */
.evn-hero{position:relative;height:var(--evn-hero,64vh);min-height:380px;overflow:hidden;background:var(--ink)}
.evn-page .evn-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.evn-page .evn-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,14,.7),rgba(8,10,14,.08) 62%)}
.evn-page .evn-hero-in{position:absolute;z-index:2;left:0;right:0;bottom:96px;max-width:1400px;margin:0 auto;padding:0 var(--edge);color:#fff}
.evn-page .evn-hero-in .evn-at{color:rgba(255,255,255,.85)}
.evn-page .evn-hero-h{margin:12px 0 0;font:400 min(clamp(44px,6vw,92px), 28px + (clamp(44px,6vw,92px) - 28px) * 0.6)/.98 var(--face);letter-spacing:-.015em}
.evn-page .evn-credit{position:absolute;z-index:2;right:var(--edge);bottom:84px;font:500 11px var(--sans);color:rgba(255,255,255,.6)}
.evn-page .evn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.evn-page .evn-popt{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:76px;padding:18px 22px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid rgba(65,64,66,.08);color:var(--ink);font:400 19px/1.2 var(--face);transition:background .2s,border-color .2s}
.evn-page .evn-popt b{font-weight:400}
.evn-page .evn-popt span{font:italic 400 14px/1.3 var(--serif);color:var(--ink-55)}
.evn-page .evn-popt:hover{background:var(--oat);border-color:rgba(65,64,66,.16)}
.evn-page .evn-popt.on{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.evn-page .evn-popt.on span{color:rgba(251,249,246,.7)}
.evn-page .evn-popt.on b::after{content:'  \2713';font:600 14px var(--sans)}
.evn-page .evn-when{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,3vw,48px);align-items:start}
.evn-page .evn-quick{grid-template-columns:1fr 1fr}
.evn-page .evn-cals{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.evn-page .cal .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.evn-page .cal .mh h3{margin:0;font:400 24px/1 var(--face)}
.evn-page .cal .mh h3 span{margin-left:8px;font:italic 400 16px var(--serif);color:var(--ink-55)}
.evn-page .cal .sq{display:flex;gap:6px}
.evn-page .cal .sq button{width:40px;height:40px;border:1px solid var(--rule);background:none;cursor:pointer;display:grid;place-items:center}
.evn-page .cal .sq button:hover{background:var(--paper)}
.evn-page .cal .sq button:disabled{opacity:.25;cursor:default}
.evn-page .cal .sq svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.evn-page .cal .dow, .evn-page .cal .days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.evn-page .cal .dow{margin-bottom:6px}
.evn-page .cal .dow span{text-align:center;font:600 11px var(--sans);letter-spacing:.12em;color:var(--ink-55)}
.evn-page .cal .days button{aspect-ratio:1;font:400 15px var(--serif);border:0;cursor:pointer;padding:0;background:var(--stone);color:var(--ink)}
.evn-page .cal .days button:hover{background:#fff}
.evn-page .cal .days .pad{visibility:hidden}
.evn-page .cal .days .past{background:transparent;color:var(--ink-55);cursor:default}
.evn-page .cal .days .today{box-shadow:inset 0 0 0 1px var(--ink)}
.evn-page .cal .days .in{background:#C08C3D;color:#FBF9F6}
.evn-page .cal .days .from, .evn-page .cal .days .to{background:#C08C3D;color:#FBF9F6}
.evn-page .evn-cal-go{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--rule);padding-top:18px}
.evn-page .evn-cal-go span{font:italic 400 17px var(--serif);color:var(--ink-75)}
.evn-page .evn-cal-go .go{display:inline-flex;align-items:center;height:52px;padding:0 30px;border:0;background:var(--forest);color:var(--paper);font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.evn-page .evn-cal-go .go:hover{background:var(--moss)}
.evn-page .evn-cal-go .go:disabled{opacity:.4;cursor:default}
.evn-page /* the days */
.evn-stage{background:var(--evn-ground);padding:56px 0 100px}
.evn-page .evn-in{max-width:1400px;margin:0 auto;padding:0 var(--edge)}
.evn-page .evn-day{margin-top:56px}
.evn-page .evn-day:first-child{margin-top:0}
.evn-page .evn-day-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:20px}
.evn-page .evn-day-h h2{margin:0;font:400 min(clamp(34px,3.4vw,52px), 28px + (clamp(34px,3.4vw,52px) - 28px) * 0.6)/1 var(--face)}
.evn-page .evn-day-h span{font:italic 400 18px var(--serif);color:var(--ink-75)}
.evn-page .evn-cards{display:grid;grid-template-columns:repeat(var(--evn-cols),minmax(0,1fr));gap:14px}
.evn-page .evn-more{margin-top:16px;font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 3px;cursor:pointer}
.evn-page /* the featured, .evn-page as Jack liked them: a photograph beside the words, .evn-page on forest */
.evn-feat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);background:var(--forest);color:#fff;text-decoration:none;margin-bottom:14px}
.evn-page .evn-feat img{display:block;width:100%;height:100%;min-height:300px;object-fit:cover}
.evn-page .evn-feat > div{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.evn-page .evn-feat .evn-at{color:#C08C3D}
.evn-page .evn-feat h3{margin:0;font:400 min(clamp(28px,2.6vw,40px), 28px + (clamp(28px,2.6vw,40px) - 28px) * 0.6)/1.08 var(--face)}
.evn-page .evn-feat p{margin:0;color:rgba(255,255,255,.82)}
.evn-page .evn-feat .evn-place{color:rgba(255,255,255,.7)}
.evn-page .evn-cards .evn-feat{grid-column:span 2;margin:0}
.evn-page /* every card */
.evn-card{background:#fff;border:1px solid var(--rule);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.evn-page .evn-card:hover{border-color:var(--ink)}
.evn-page .evn-card h3{margin:0;font:400 22px/1.18 var(--face)}
.evn-page .evn-card .evn-s{margin:0;font-size:15px;line-height:1.5;color:var(--ink-75)}
.evn-page .evn-place{font:600 11px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-75)}
.evn-page .evn-kind{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bracken)}
.evn-page .evn-time{font:400 min(34px, 28px + (34px - 28px) * 0.6)/1 var(--face);font-variant-numeric:tabular-nums}
.evn-page /* C1 time first */
.c1 .evn-card{padding:22px;gap:10px}
.evn-page .c1 .evn-card .evn-place{margin-top:auto;padding-top:10px}
.evn-page /* C2 ticket */
.c2 .evn-card{flex-direction:row}
.evn-page .c2 .evn-stub{flex:0 0 92px;border-right:1px dashed var(--rule);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 8px;text-align:center}
.evn-page .c2 .evn-stub b{font:400 30px/1 var(--face)}
.evn-page .c2 .evn-stub i{font:600 10px/1.2 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-75)}
.evn-page .c2 .evn-body{padding:18px 20px;display:flex;flex-direction:column;gap:7px;min-width:0}
.evn-page /* C3 title first */
.c3 .evn-card{padding:24px;gap:8px}
.evn-page .c3 .evn-card h3{font-size:26px}
.evn-page .c3 .evn-town{font:italic 400 17px var(--serif);color:var(--ink-75)}
.evn-page .c3 .evn-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px}
.evn-page /* C4 wide */
.c4 .evn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.evn-page .c4 .evn-card{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,.7fr);gap:18px;padding:20px;align-items:start}
.evn-page .c4 .evn-time{font-size:24px}
.evn-page .c4 .evn-right{display:flex;flex-direction:column;gap:8px;text-align:right}
.evn-page .c4 .evn-cards .evn-feat{grid-column:1 / -1}
.evn-page .evn-empty{color:var(--ink-75);font-style:italic}
.evn-page .evn-later{margin-top:48px;padding:16px 28px;border:0;background:var(--forest);color:var(--paper);font:600 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.evn-page .evn-later:hover{background:var(--moss)}

/* the finder strip with Search as its first field; its panel boxes and the calendar's Those days */
.evn-page .evn-finder .finder .row{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) auto}
.evn-page .evn-finder .finder .f{border:0;border-right:1px solid rgba(65,64,66,.12);background:none;cursor:pointer;font:inherit;color:inherit;min-width:0}
.evn-page .evn-finder .finder .f input{border:0;background:none;padding:0;width:100%;outline:none;font:italic 400 clamp(17px,1.4vw,20px)/1.2 var(--serif);color:var(--ink)}
.evn-page .evn-finder .finder .f input::placeholder{color:rgba(65,64,66,.55)}
.evn-page .evn-finder .finder .go{border:0;cursor:pointer}
.evn-page .evn-finder .panels{max-width:1400px;margin:0 auto;padding:0 var(--edge,clamp(16px,3vw,48px));position:relative}
.evn-page .evn-finder .panel{position:static;display:block;padding:clamp(28px,3vw,44px);background:var(--paper);box-shadow:0 30px 60px rgba(65,64,66,.14);border-top:1px solid rgba(65,64,66,.12)}
/* the hero sits under the site bar, as every hero on the site does, so the bar is glass over the film */
.evn-page .evn-hero{margin-top:calc(-1 * var(--bar, 76px))}
/* the calendar's arrows: the one not wanted on this month stays hidden, and the arrow is drawn in ink */
.evn-page .cal .sq button[hidden]{display:none}
.evn-page .cal .sq button svg{display:block;width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.evn-page .evn-stage{transition:opacity .2s}
.evn-page .evn-stage.busy{opacity:.55}
.evn-page .evn-pager{display:flex;gap:12px;margin-top:48px}
.evn-page .evn-later.quiet{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.evn-page .evn-later.quiet:hover{background:var(--ink);color:var(--paper)}
.evn-page .evn-card h3,.evn-page .evn-feat h3{text-wrap:balance}
/* the card, K8 "Even rows" (Jack's pick for the news, 3 October, and "yes" for the events): when or where and what as
   one grey line of small capitals, the headline, one paragraph; nothing ever cut short. The news page's own builder
   adds its three lines of headline room after this; an event's name is shorter, so two. */
.evn-page .evn-in:not([data-tr]) .evn-card{padding:26px;gap:12px}
.evn-page .evn-in:not([data-tr]) .evn-card .evn-right{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px}
.evn-page .evn-in:not([data-tr]) .evn-card .evn-time{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.evn-page .evn-in:not([data-tr]) .evn-card .evn-kind{line-height:1.3;color:var(--ink-55)}
.evn-page .evn-in:not([data-tr]) .evn-card .evn-kind::before{content:'\00B7  '}
.evn-page .evn-in:not([data-tr]) .evn-card h3{font-size:22px;line-height:1.2;min-height:calc(2 * 1.2em)}
.evn-page .evn-in:not([data-tr]) .evn-card .evn-s{font-size:15px;line-height:1.55}
.evn-page .evn-in:not([data-tr]) .evn-card .evn-place{color:var(--ink-55)}
@media (max-width:900px){.evn-page .evn-when, .evn-page .evn-cals{grid-template-columns:1fr}}
@media (max-width:1000px){.evn-page .evn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.evn-page .evn-cards, .evn-page .c4 .evn-cards{grid-template-columns:1fr}.evn-page .evn-cards .evn-feat{grid-column:auto}.evn-page .evn-feat{grid-template-columns:1fr}.evn-page .c4 .evn-card{grid-template-columns:56px minmax(0,1fr)}.evn-page .c4 .evn-right{grid-column:2;text-align:left}}
@media (max-width:1000px){.evn-page .evn-finder .finder .row{grid-template-columns:1fr 1fr}.evn-page .evn-finder .finder .go{grid-column:1/-1}}
@media (max-width:640px){.evn-page .evn-in:not([data-tr]) .evn-card h3{min-height:0}}
/* ---- end: the events page, a day at a time ---- */