/* 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://use.typekit.net/pwm8hjb.css');
@font-face {
font-family: "Bandeins Strange";
src: url("/fonts/BandeinsStrange-VF.ttf") format("truetype-variations");
font-weight: 300 700;
font-stretch: 100% 800%;
font-style: normal;
font-display: swap;
}
:root {
--font: "inter-variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
--fs: 17px;
--fs-cat: 24px;
--fs-day: 48px;
--fs-section: 32px;
--lh: 1.5;
--paper: #ffffff;
--ink: #111111;
--hover: #f4f4f4;
/* Artist link colour and hover highlight. Deep mint reads as "link"
while staying easily readable; bright spring-green highlights on
hover, matching the link text's hue. */
--link-accent: #1d6a3a;
--link-highlight: #7eed9c;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #0e0e0e;
--ink: #ececec;
--hover: #1a1a1a;
--link-accent: #7eed9c;
--link-highlight: #1d4a2a;
}
}
/* Explicit overrides via the toggle (data-theme on ). */
html[data-theme="light"] {
--paper: #ffffff;
--ink: #111111;
--hover: #f4f4f4;
--link-accent: #1d6a3a;
--link-highlight: #7eed9c;
}
html[data-theme="dark"] {
--paper: #0e0e0e;
--ink: #ececec;
--hover: #1a1a1a;
--link-accent: #7eed9c;
--link-highlight: #1d4a2a;
}
/* Theme toggle + jump-to-today now live inside the side panel
(.panel-chip rules cover their styling). The legacy single-week
digest still has a top-right ◐ via #theme-toggle if it's wired up,
styled here as a minimal pill. */
body.digest:not(.digest--multi) .theme-toggle {
position: fixed;
top: 16px;
right: 16px;
z-index: 10;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--ink);
font: inherit;
font-size: 14px;
width: 26px;
height: 26px;
line-height: 1;
cursor: pointer;
padding: 0;
}
body.digest:not(.digest--multi) .theme-toggle:hover { background: var(--hover); }
@media (min-width: 720px) {
body.digest:not(.digest--multi) .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; overflow-x: hidden; }
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: 600; }
p { margin-top: 0; margin-bottom: 12px; }
/* ─── shared masthead ─── */
.masthead {
margin-bottom: 32px;
}
.masthead p {
margin: 0;
}
.masthead .masthead-line {
display: flex;
align-items: baseline;
gap: 0.7em;
flex-wrap: wrap;
}
.masthead .brand {
font-family: "Bandeins Strange", var(--font);
font-weight: 700;
font-stretch: 800%;
letter-spacing: -0.02em;
font-size: 1.4em;
color: inherit;
text-decoration: none;
}
.masthead .brand-tagline {
font-weight: 800;
font-size: 1.4em;
text-transform: none;
letter-spacing: 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; }
/* Category filter — chip row above the listings. Empty by default;
click a chip to narrow to one taxonomy group. "clear" appears only
when a filter is active. JS in theme.js toggles body[data-cat-filter]
and the active chip's .is-active class. */
/* Side-panel menu: tiny "menu" trigger top-right; click opens a slide-
in panel that holds the filter, jump-to-today, and theme toggle.
Reader gets a clutter-free page; controls are one click away. */
body.digest .panel-toggle {
position: fixed;
top: 16px;
right: 16px;
z-index: 30;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--ink);
font: inherit;
font-size: 11px;
text-transform: lowercase;
letter-spacing: 0.04em;
font-weight: 600;
padding: 4px 10px;
cursor: pointer;
}
body.digest .panel-toggle:hover { background: var(--ink); color: var(--paper); }
body.digest[data-cat-filter] .panel-toggle::after {
content: "•";
margin-left: 4px;
color: var(--accent, currentColor);
}
body.digest .panel-scrim {
position: fixed;
inset: 0;
z-index: 28;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
body.digest.is-panel-open .panel-scrim {
opacity: 1;
pointer-events: auto;
}
body.digest .side-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 29;
width: 280px;
max-width: 80vw;
background: var(--paper);
border-left: 1px solid var(--ink);
padding: 56px 24px 32px;
transform: translateX(100%);
transition: transform 200ms ease;
overflow-y: auto;
}
body.digest.is-panel-open .side-panel { transform: translateX(0); }
body.digest .panel-close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font: inherit;
font-size: 24px;
line-height: 1;
color: var(--ink);
cursor: pointer;
padding: 4px 8px;
}
body.digest .panel-close:hover { color: var(--accent, var(--ink)); }
body.digest .panel-section + .panel-section { margin-top: 28px; }
body.digest .panel-heading {
margin: 0 0 10px;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.55;
font-weight: 600;
}
body.digest .panel-chip {
display: block;
width: 100%;
text-align: left;
appearance: none;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--ink);
font: inherit;
font-size: 14px;
text-transform: lowercase;
letter-spacing: 0.01em;
padding: 8px 12px;
cursor: pointer;
text-decoration: none;
}
body.digest .panel-chip + .panel-chip { margin-top: 6px; }
body.digest .panel-chip:hover { background: var(--hover); }
body.digest .panel-chip.is-active {
background: var(--ink);
color: var(--paper);
}
body.digest .panel-chip.is-current {
opacity: 0.4;
cursor: default;
pointer-events: none;
}
/* While a filter is active, hide event lines that don't match. Day
sections with no surviving events collapse entirely (uses :has(),
supported in all evergreen browsers). Same for empty weeks /
festivals / opportunities. */
body.digest[data-cat-filter="community events"] li[data-cat-group]:not([data-cat-group="community events"]),
body.digest[data-cat-filter="music"] li[data-cat-group]:not([data-cat-group="music"]),
body.digest[data-cat-filter="on display"] li[data-cat-group]:not([data-cat-group="on display"]),
body.digest[data-cat-filter="on stage"] li[data-cat-group]:not([data-cat-group="on stage"]),
body.digest[data-cat-filter="on screen"] li[data-cat-group]:not([data-cat-group="on screen"]) {
display: none;
}
body.digest[data-cat-filter="community events"] section.day:not(:has(li[data-cat-group="community events"])),
body.digest[data-cat-filter="community events"] section.week:not(:has(li[data-cat-group="community events"])),
body.digest[data-cat-filter="community events"] section.festivals:not(:has(li[data-cat-group="community events"])),
body.digest[data-cat-filter="community events"] details.opportunities:not(:has(li[data-cat-group="community events"])),
body.digest[data-cat-filter="music"] section.day:not(:has(li[data-cat-group="music"])),
body.digest[data-cat-filter="music"] section.week:not(:has(li[data-cat-group="music"])),
body.digest[data-cat-filter="music"] section.festivals:not(:has(li[data-cat-group="music"])),
body.digest[data-cat-filter="music"] details.opportunities:not(:has(li[data-cat-group="music"])),
body.digest[data-cat-filter="on display"] section.day:not(:has(li[data-cat-group="on display"])),
body.digest[data-cat-filter="on display"] section.week:not(:has(li[data-cat-group="on display"])),
body.digest[data-cat-filter="on display"] section.festivals:not(:has(li[data-cat-group="on display"])),
body.digest[data-cat-filter="on display"] details.opportunities:not(:has(li[data-cat-group="on display"])),
body.digest[data-cat-filter="on stage"] section.day:not(:has(li[data-cat-group="on stage"])),
body.digest[data-cat-filter="on stage"] section.week:not(:has(li[data-cat-group="on stage"])),
body.digest[data-cat-filter="on stage"] section.festivals:not(:has(li[data-cat-group="on stage"])),
body.digest[data-cat-filter="on stage"] details.opportunities:not(:has(li[data-cat-group="on stage"])),
body.digest[data-cat-filter="on screen"] section.day:not(:has(li[data-cat-group="on screen"])),
body.digest[data-cat-filter="on screen"] section.week:not(:has(li[data-cat-group="on screen"])),
body.digest[data-cat-filter="on screen"] section.festivals:not(:has(li[data-cat-group="on screen"])),
body.digest[data-cat-filter="on screen"] details.opportunities:not(:has(li[data-cat-group="on screen"])) {
display: none;
}
/* ─── trailing line actions: .via, +cal, delete, report ─────
Default opacity: 0 on devices that have hover (desktop/laptop) —
the line reads as plain text until the reader hovers it. On touch
devices the actions stay always visible so they're reachable. */
.via,
.event-del,
.event-report {
font-size: 0.7em;
font-weight: 500;
font-style: italic;
opacity: 0.55;
}
.via { margin-left: 0.7em; }
.via a { color: inherit; }
.cal { margin-left: 0.35em; }
.event-del, .event-report {
appearance: none;
background: none;
border: 0;
padding: 0;
margin-left: 0.35em;
color: inherit;
cursor: pointer;
font-family: inherit;
}
.event-del:hover, .event-report:hover { opacity: 0.95; text-decoration: underline; }
.event-del.is-armed {
font-style: normal;
opacity: 1;
color: #d33;
text-decoration: underline;
}
@media (hover: hover) {
ul.events > li .via,
ul.events > li .cal,
ul.events > li .event-del,
ul.events > li .event-report {
opacity: 0;
transition: opacity 130ms ease;
}
ul.events > li:hover .via,
ul.events > li:hover .cal,
ul.events > li:hover .event-del,
ul.events > li:hover .event-report,
ul.events > li:focus-within .via,
ul.events > li:focus-within .cal,
ul.events > li:focus-within .event-del,
ul.events > li:focus-within .event-report {
opacity: 0.55;
}
/* Stay visible while the cal dropdown is open OR delete is armed,
even after the cursor wanders off the row. */
ul.events > li .cal[open],
ul.events > li .event-del.is-armed {
opacity: 1;
}
}
/* Artist links inside event lines: Bandeins Strange at default width,
smooth-stretch to 800% on hover for a tactile typographic effect.
Stays in the warm link accent colour. Direct-child selector keeps
the via-chip handle unstyled. */
body.digest .events li > a {
color: var(--link-accent);
text-decoration: none;
}
body.digest .events li > a strong {
color: var(--link-accent);
}
body.digest .events li > a:hover {
background: var(--link-highlight);
}
/* ──────────────────────────────────────────────────
* 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;
}
/* First week's first day collapses leading margins so the page opens
right into the first date instead of a tall blank. */
body.digest--multi .week:first-of-type { margin-top: 0; }
body.digest--multi .week:first-of-type .day:first-of-type { margin-top: 0; }
body.digest--multi .week:first-of-type .day:first-of-type .day-header { margin-top: 12px; }
body.digest--multi .week:first-of-type .week-separator { margin-top: 0; }
/* Past days fade — the reader's eye should land on today and what's ahead. */
body.digest section.day.past {
opacity: 0.45;
}
body.digest section.day.past .day-header {
/* Sticky header still uses --paper background; tint the text to match
the muted body so the heading reads as past. */
color: color-mix(in srgb, var(--ink) 50%, transparent);
border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
/* Multi-week home page: each week is its own section, with a quiet
date-range divider above it. Past weeks fade like past days. */
body.digest .week + .week {
margin-top: 56px;
}
body.digest .week--past {
opacity: 0.5;
}
body.digest .week--past .day-header {
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
body.digest .week-separator {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 8px;
color: var(--ink);
opacity: 0.65;
font-size: 0.95em;
letter-spacing: 0.02em;
}
body.digest .week-separator::before,
body.digest .week-separator::after {
content: "";
flex: 1;
height: 1px;
background: currentColor;
opacity: 0.4;
}
body.digest .week-separator span {
white-space: nowrap;
}
/* 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: 800;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1;
margin-top: 24px;
margin-bottom: 14px;
/* Stick to the top of the viewport while the day's section is in
view; the next day's header pushes this one out as it arrives.
On multi-week pages the filter chips sit above and stick at top:0;
the day header tucks in beneath them. */
position: sticky;
top: 0;
background: var(--paper);
z-index: 5;
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ink);
}
body.digest--multi .day-header { top: 0; }
/* Reserve room for the sticky day-header so scrollIntoView lands the
day's first event below it, not beneath it. ~50px = day-header
height (font 32px + padding 8+8 + 1 border). */
body.digest--multi section.day,
body.digest--multi section.week { scroll-margin-top: 56px; }
body.digest .day-header .date {
font-weight: 800;
margin-left: 10px;
}
/* Event list — each li is one wrap-around line. Inter-event gap
tightened to ~one line-break worth so the day reads as a list,
not a stack of cards. */
body.digest ul.events li {
margin-bottom: 28px;
line-height: 1.65;
position: relative;
}
/* Stretched-link pattern — invisible fills the li so a click
anywhere on the row goes to the source. Sits above plain text but
below band links / +cal / delete / report (which use z:2). */
body.digest ul.events li > .event-cover {
position: absolute;
inset: 0;
z-index: 1;
background: transparent;
/* hide the link's default underline / colour for the screen-
reader-only label inside */
text-indent: -9999px;
overflow: hidden;
}
body.digest ul.events li:hover > .event-cover {
background: color-mix(in srgb, var(--ink) 4%, transparent);
}
/* Lift every interactive child above the cover so band links + the
trailing action chips win their own clicks. */
body.digest ul.events li a:not(.event-cover),
body.digest ul.events li details,
body.digest ul.events li button {
position: relative;
z-index: 2;
}
body.digest ul.events li a strong,
body.digest ul.events li > strong {
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
}
body.digest ul.events li .paren {
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
/* 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;
font-style: italic;
opacity: 0.45;
}
/* Per-event "+ cal" dropdown — Google Calendar / .ics options. Native
; menu pops absolute on open. Chip matches the .via link
styling — plain text, no stroke. */
body.digest .cal {
display: inline-block;
position: relative;
margin-left: 0.35em;
vertical-align: baseline;
}
body.digest .cal > summary {
cursor: pointer;
list-style: none;
display: inline;
font-size: 0.7em;
font-weight: 500;
font-style: italic;
opacity: 0.55;
color: inherit;
user-select: none;
}
body.digest .cal > summary::-webkit-details-marker { display: none; }
body.digest .cal > summary::marker { content: ""; }
body.digest .cal:hover > summary { opacity: 0.85; }
body.digest .cal[open] > summary { opacity: 1; }
body.digest .cal-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 20;
background: var(--paper);
border: 1px solid var(--ink);
min-width: 180px;
font-size: 0.9em;
letter-spacing: 0;
text-transform: none;
font-weight: 400;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
body.digest .cal-menu a {
display: block;
padding: 7px 12px;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
body.digest .cal-menu a + a {
border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}
body.digest .cal-menu a:hover {
background: var(--hover);
}
/* 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: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1;
margin-bottom: 12px;
}
/* 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: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4em;
font-size: var(--fs-section);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0;
line-height: 1;
margin-bottom: 12px;
}
body.digest .section-header .section-range {
letter-spacing: 0;
}
/* Collapsible Opportunities — JS-free */
body.digest details.opportunities,
body.digest details.festivals-upcoming {
/* Collapsed by default. */
}
body.digest details.opportunities summary.section-header,
body.digest details.festivals-upcoming 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,
body.digest details.festivals-upcoming summary.section-header::-webkit-details-marker { display: none; }
body.digest details.opportunities summary.section-header::after,
body.digest details.festivals-upcoming 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,
body.digest details.festivals-upcoming[open] summary.section-header::after {
content: '−';
}
body.digest details.opportunities .dis-count,
body.digest details.festivals-upcoming .dis-count {
font-size: var(--fs);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
margin-left: 8px;
}
body.digest details.opportunities ul.events,
body.digest details.festivals-upcoming ul.events {
margin-top: 16px;
}
/* Sub-header inside an already-visible festivals section — quieter than
the top-level Festivals title above it. */
body.digest details.festivals-upcoming summary.section-header--sub {
font-size: var(--fs);
text-transform: none;
letter-spacing: 0.01em;
margin-top: 16px;
font-weight: 600;
opacity: 0.75;
}
/* Kicker styling — used by .presenter, .title-kicker, .group. Match
the event title's weight + tracking exactly so "Presenter: Title"
reads as one continuous phrase. */
body.digest .presenter,
body.digest .title-kicker,
body.digest .group {
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
}
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: 18px;
--fs-cat: 30px;
--fs-day: 60px;
--fs-section: 44px;
}
}
/* ───────── Submit page (/submit) ─────────
Public form anyone can fill in to propose an event. Same paper
typography as the digest. */
body.digest--submit .submit {
margin-top: 24px;
}
body.digest--submit h1 {
font-size: 28px;
font-weight: 700;
margin: 0 0 8px;
line-height: 1.1;
}
body.digest--submit .submit-intro {
margin: 0 0 28px;
opacity: 0.7;
font-size: 15px;
}
body.digest--submit .submit-guide-link {
border-bottom: 1px dotted currentColor;
margin-left: 4px;
}
body.digest--submit .submit-error {
background: rgba(220, 60, 60, 0.12);
border: 1px solid rgba(220, 60, 60, 0.5);
padding: 10px 14px;
margin: 0 0 20px;
font-size: 0.95em;
}
body.digest--submit .submit-form .field {
display: block;
margin: 0 0 20px;
}
body.digest--submit .submit-form .field-label {
display: block;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.55;
margin-bottom: 3px;
font-weight: 500;
}
body.digest--submit .submit-form .field-label em {
font-style: normal;
font-weight: 400;
opacity: 0.85;
text-transform: none;
letter-spacing: 0;
margin-left: 6px;
font-size: 0.95em;
}
body.digest--submit .submit-form .field-input {
width: 100%;
font: inherit;
font-size: 16px;
padding: 6px 0;
background: transparent;
color: var(--ink);
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
border-radius: 0;
transition: border-color 120ms ease;
}
body.digest--submit .submit-form .field-input::placeholder {
color: color-mix(in srgb, var(--ink) 35%, transparent);
}
body.digest--submit .submit-form .field-input:focus {
outline: none;
border-bottom-color: var(--ink);
}
body.digest--submit .submit-form select.field-input { cursor: pointer; padding: 6px 0; }
body.digest--submit .submit-form textarea.field-input { resize: vertical; line-height: 1.45; }
body.digest--submit .submit-form .field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 480px) {
body.digest--submit .submit-form .field-row { grid-template-columns: 1fr; gap: 0; }
}
/* Optional-extras disclosure — quiet, tucked under the main fields. */
body.digest--submit .submit-more {
margin: 0 0 24px;
}
body.digest--submit .submit-more > summary {
cursor: pointer;
list-style: none;
font-size: 13px;
opacity: 0.55;
padding: 4px 0;
border-bottom: 1px dotted color-mix(in srgb, var(--ink) 30%, transparent);
}
body.digest--submit .submit-more > summary::-webkit-details-marker { display: none; }
body.digest--submit .submit-more > summary::before {
content: '+ ';
font-weight: 700;
margin-right: 2px;
}
body.digest--submit .submit-more[open] > summary { opacity: 0.75; }
body.digest--submit .submit-more[open] > summary::before { content: '− '; }
body.digest--submit .submit-more-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
padding-top: 16px;
}
@media (max-width: 480px) {
body.digest--submit .submit-more-grid { grid-template-columns: 1fr; }
}
/* Contact field — visually quieter; it's optional and editor-only. */
body.digest--submit .submit-contact {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
body.digest--submit .submit-form .hp-field {
/* Honeypot — visually + AT-hidden, but still parseable by bots. */
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
body.digest--submit .submit-btn {
font: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 12px 24px;
background: var(--ink);
color: var(--paper);
border: 1px solid var(--ink);
cursor: pointer;
margin-top: 8px;
}
body.digest--submit .submit-btn:hover { opacity: 0.85; }
body.digest--submit .submit-done {
margin-top: 64px;
}
body.digest--submit .submit-done .back-link {
display: inline-block;
margin-top: 8px;
font-weight: 600;
}
/* Submit-page guide block: collapsible "what we list / what we don't" panel
above the form. Two-column inside on wide viewports. */
body.digest--submit .submit-guide {
margin: 0 0 28px;
border: 1px solid var(--ink);
padding: 12px 16px;
}
body.digest--submit .submit-guide > summary {
cursor: pointer;
list-style: none;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
position: relative;
padding-right: 24px;
}
body.digest--submit .submit-guide > summary::-webkit-details-marker { display: none; }
body.digest--submit .submit-guide > summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
}
body.digest--submit .submit-guide[open] > summary::after { content: '−'; }
body.digest--submit .submit-guide-cols {
display: grid;
grid-template-columns: 1fr;
gap: 16px 32px;
margin-top: 14px;
}
@media (min-width: 600px) {
body.digest--submit .submit-guide-cols { grid-template-columns: 1fr 1fr; }
}
body.digest--submit .submit-guide-cols h3 {
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 6px;
opacity: 0.7;
}
body.digest--submit .submit-guide-cols ul {
margin: 0;
padding-left: 0;
list-style: none;
}
body.digest--submit .submit-guide-cols li {
font-size: 14px;
line-height: 1.5;
padding: 1px 0;
opacity: 0.85;
}