/* yat — public.css
* Server-rendered. Mobile-first. No JS.
*
* Two sizes. Hierarchy by SIZE first, then WEIGHT. Never color.
* — body (16/17px)
* — day-header (22/24px) — the only loud thing
*
* Stable markup (do not change):
* body.index .weeks > li > a .weeks .count
* body.digest .week .masthead .brand
* section.day .day-header ul.events > li > a
* section.ongoing .ongoing-header section.ongoing-group .group-header
* .group (inline group prefix)
* shared: .empty footer a
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
--font: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
--fs: 16px;
--fs-cat: 18px;
--fs-day: 22px;
--lh: 1.5;
--paper: #ffffff;
--ink: #111111;
--hover: #f4f4f4;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #0e0e0e;
--ink: #ececec;
--hover: #1a1a1a;
}
}
/* Explicit overrides via the toggle (data-theme on ). */
html[data-theme="light"] {
--paper: #ffffff;
--ink: #111111;
--hover: #f4f4f4;
}
html[data-theme="dark"] {
--paper: #0e0e0e;
--ink: #ececec;
--hover: #1a1a1a;
}
/* Theme toggle — fixed in the upper right. */
.theme-toggle {
position: fixed;
top: 16px;
right: 16px;
z-index: 10;
background: transparent;
color: var(--ink);
border: 1px solid var(--ink);
font: inherit;
font-size: 16px;
width: 32px;
height: 32px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.theme-toggle:hover { background: var(--hover); }
@media (min-width: 720px) {
.theme-toggle { top: 24px; right: 24px; }
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--paper); color: var(--ink);
font-family: var(--font); font-size: var(--fs); font-weight: 400;
line-height: var(--lh);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { padding: 32px 24px 96px; }
body > * { max-width: 720px; margin-left: auto; margin-right: auto; }
a { color: inherit; text-decoration: none; }
a:hover { background: var(--hover); }
/* `margin-block` only — never `margin: 0`, which would override the
`margin-left/right: auto` centering from `body > *`. */
ul { list-style: none; padding: 0; margin-block: 0; }
strong, b { font-weight: 700; }
p { margin-top: 0; margin-bottom: 12px; }
/* ─── shared masthead ─── */
.masthead {
padding-bottom: 16px;
margin-bottom: 24px;
border-bottom: 1px solid var(--ink);
}
.masthead p {
margin: 0;
}
/* ─── shared footer + empty ─── */
.empty {
padding: 48px 0;
text-align: center;
}
footer {
margin-top: 56px;
padding-top: 16px;
border-top: 1px solid var(--ink);
}
footer p { margin: 0; }
footer a { font-weight: 700; }
/* ──────────────────────────────────────────────────
* INDEX (body.index) — list of published weeks
* One line per week: bold week label, regular count, comma-separated.
* ────────────────────────────────────────────────── */
body.index .weeks li {
margin-bottom: 12px;
line-height: 1.55;
}
body.index .weeks a {
display: inline;
padding: 0;
margin: 0;
}
body.index .weeks .label { font-weight: 700; }
body.index .weeks .count { font-weight: 400; }
/* ──────────────────────────────────────────────────
* DIGEST (body.digest) — one week's events
* Day header on its own line, then events as wrap-around lines:
* TITLE, details, time, $price, venue.
* ────────────────────────────────────────────────── */
body.digest section.day {
margin-top: 40px;
}
/* Day header — uppercase, bold, with a typewriter-style underscore rule.
ASCII-email feel rendered in Manrope. */
body.digest .day-header {
display: block;
font-size: var(--fs-day);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ink);
}
body.digest .day-header .date {
font-weight: 700;
margin-left: 10px;
}
/* Event list — each li is one wrap-around line with breathing room. */
body.digest ul.events li {
margin-bottom: 28px;
line-height: 1.65;
}
body.digest ul.events li a strong,
body.digest ul.events li > strong {
/* Manrope tops out at 800; a hair of text-stroke gives a heavier
visual weight at the same family. */
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.01em;
-webkit-text-stroke: 0.4px currentColor;
}
/* Parenthetical/bracketed phrases inside titles stay in natural case. */
body.digest ul.events li .paren {
text-transform: none;
letter-spacing: 0;
font-weight: 700;
}
/* Inline group prefix — same size & color, regular weight (titles are bold). */
body.digest .group {
font-weight: 400;
margin-right: 2px;
}
/* Empty day — mark the rhythm of the week without shouting. */
body.digest .day.empty-day .no-events {
margin: 0 0 0 0;
font-style: italic;
}
/* Within-day category subgroups — quiet header, smaller than day-header. */
body.digest .day-group {
margin-top: 20px;
}
body.digest .day-group:first-of-type {
margin-top: 0;
}
body.digest .cat-header {
display: block;
font-size: var(--fs-cat);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 12px;
-webkit-text-stroke: 0.4px currentColor;
}
/* Festivals + Opportunities — same shape as a day section, different label. */
body.digest section.festivals,
body.digest section.opportunities,
body.digest details.opportunities,
body.digest details.festivals {
margin-top: 40px;
}
body.digest .section-header {
display: block;
font-size: var(--fs-day);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ink);
}
/* Collapsible Opportunities — JS-free */
body.digest details.opportunities {
/* Collapsed by default. */
}
body.digest details.opportunities summary.section-header {
cursor: pointer;
list-style: none; /* hide default disclosure triangle */
position: relative;
padding-right: 32px; /* space for our own indicator */
}
body.digest details.opportunities summary.section-header::-webkit-details-marker { display: none; }
body.digest details.opportunities summary.section-header::after {
content: '+';
position: absolute;
right: 0;
top: 0;
font-weight: 800;
font-size: var(--fs-day);
}
body.digest details.opportunities[open] summary.section-header::after {
content: '−';
}
body.digest details.opportunities .dis-count {
font-size: var(--fs);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
margin-left: 8px;
}
body.digest details.opportunities ul.events {
margin-top: 16px;
}
/* Kicker styling — used by .presenter, .title-kicker, .group. All
render uppercase to set up the leading colon-separated phrase as a
classifier, like newspaper listings. */
body.digest .presenter,
body.digest .title-kicker,
body.digest .group {
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
-webkit-text-stroke: 0.4px currentColor;
}
body.digest .group { margin-right: 0; }
/* Verbatim quotes are italic; editor-written descriptions are regular type. */
body.digest em { font-style: italic; }
/* ─── Duplicate detection markers ─── */
.dup-badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: #b85a00;
margin-right: 6px;
letter-spacing: 0.04em;
}
@media (prefers-color-scheme: dark) {
.dup-badge { color: #ff9b3d; }
}
html[data-theme="dark"] .dup-badge { color: #ff9b3d; }
html[data-theme="light"] .dup-badge { color: #b85a00; }
li.dup { opacity: 0.85; }
.dup-notice {
margin: 16px 0 0;
padding: 10px 12px;
border: 1px solid currentColor;
color: #b85a00;
font-size: var(--fs);
}
html[data-theme="dark"] .dup-notice { color: #ff9b3d; }
/* ─── Admin overlay (visible only when ?admin=1 / localStorage flag) ─── */
.admin-only { display: none; }
html[data-admin] .admin-only { display: block; }
.admin-bar {
position: sticky;
top: 0;
z-index: 20;
background: var(--ink);
color: var(--paper);
padding: 8px 16px;
display: flex;
align-items: center;
gap: 16px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: -32px -24px 24px;
max-width: none !important;
}
@media (min-width: 720px) {
.admin-bar { margin: -56px -32px 24px; }
}
.admin-bar a {
color: var(--paper);
font-weight: 700;
}
.admin-bar button {
margin-left: auto;
background: transparent;
color: var(--paper);
border: 1px solid var(--paper);
font: inherit;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
cursor: pointer;
}
.admin-ctrl {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: 8px;
white-space: nowrap;
}
.admin-ctrl a {
color: inherit;
opacity: 0.6;
font-weight: 600;
margin-left: 4px;
}
.admin-ctrl a:hover { opacity: 1; }
.admin-ctrl a.armed {
color: #b85a00;
opacity: 1;
font-weight: 700;
}
html[data-theme="dark"] .admin-ctrl a.armed { color: #ff9b3d; }
/* ─── wider screens: keep the typographic rhythm, don't sprawl ─── */
@media (min-width: 720px) {
body { padding: 56px 32px 96px; }
:root {
--fs: 17px;
--fs-cat: 20px;
--fs-day: 24px;
}
}