/* CyberAware public site — hand-authored, no build step.
   One family with the desk: the greys, the crimson and Poppins come from tokens.css, which
   also carries the dark ground. This file only says what the site's own pieces look like. */

:root {
	/* the site's older names, kept as aliases so every rule below still reads */
	--paper: var(--cr-page);
	--surface: var(--cr-card);
	--surface-2: var(--cr-card-2);
	--ink: var(--cr-ink);
	--muted: var(--cr-muted);
	--line: var(--cr-line);
	--line-soft: var(--cr-line-soft);
	--petrol: var(--cr-accent-text);   /* crimson as text and marks */
	--petrol-solid: var(--cr-accent-solid);   /* crimson as a ground under white text */
	--petrol-dark: var(--cr-accent-active);
	--petrol-soft: var(--cr-accent-soft);
	--amber: var(--cr-warn-text);
	--amber-soft: var(--cr-warn-soft);
	--ok: var(--cr-good-text);
	--danger: var(--cr-danger);
	--on-accent: var(--cr-on-accent);
	--font-display: var(--cr-font);
	--font-serif: var(--cr-font);
	/* running text is Inter rather than the display face everything else uses: Poppins is a
	   geometric drawn for headings and it tires over a paragraph, where Inter was drawn for exactly
	   this and holds its shape down at 15px */
	--font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-cyber: "Space Grotesk", "Poppins", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* arriving at a place on the page from another page lands there at once (csat_web.html) */
html.is-arriving { scroll-behavior: auto; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
}
img { max-width: 100%; }
a { color: var(--petrol); }
h1, h2, h3 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: pretty;
	color: var(--ink);
	margin: 0 0 .5rem;
}
h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; max-width: 65ch; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--cr-accent-solid); color: var(--on-accent); padding: .5rem 1rem; z-index: 99; }
.skip-link:focus { left: 0; }

/* header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-row { display: flex; align-items: center; gap: 1rem 1.5rem; min-height: 64px; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
@media (max-width: 700px) {
	.site-nav { order: 3; flex-basis: 100%; gap: .9rem; }
	.header-actions { margin-left: auto; }
}
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand-mark { width: 1.7em; height: 1.7em; object-fit: contain; vertical-align: -.34em; margin-right: .1em; filter: var(--brand-filter, none); }
.site-nav { display: flex; gap: 1.1rem; flex: 1; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .3rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: var(--amber); }
.header-actions { display: flex; gap: .6rem; }

/* buttons */
.btn { display: inline-block; padding: .62rem 1.2rem; border-radius: 4px; font-weight: 600; font-size: .93rem; text-decoration: none; border: 1px solid transparent; font-family: var(--font-body); }
.btn-solid { background: var(--petrol-solid); color: var(--on-accent); }
.btn-solid:hover { background: var(--petrol-dark); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--petrol); color: var(--petrol); }
.btn-amber { background: var(--cr-warn); color: #1a1b22; }
.btn-amber:hover { filter: brightness(.92); }
.btn-big { padding: .8rem 1.5rem; font-size: 1.05rem; }

/* hero — see "The dark room" at the foot of this file */
.hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.4rem; align-items: center; }
.hero-live {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding: .7rem 1.1rem .7rem .8rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	text-decoration: none;
	max-width: 100%;
	transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.hero-live:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.hl-tag { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .2rem .55rem; border-radius: 999px; background: var(--cr-accent-soft); color: var(--petrol); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hl-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-accent); animation: hero-pulse 2.4s ease-out infinite; }
.hl-text { display: grid; min-width: 0; }
.hl-text b { font-size: .96rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-text em { font-style: normal; font-size: .82rem; color: var(--muted); }
.hl-go { flex: none; color: var(--muted); transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.hero-live:hover .hl-go { transform: translateX(5px); color: var(--ink); }

.eyebrow { display: block; font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--petrol); margin-bottom: 1rem; }

/* sections */
.section { padding: 3.8rem 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.section-head .more { font-weight: 700; text-decoration: none; white-space: nowrap; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* cards */
/* `min(340px, 100%)`, never a bare 340px: `auto-fill`/`auto-fit` treat the minimum as a hard
   floor, so on a screen narrower than the track the row runs off the side of the page and the
   whole document scrolls sideways. `min()` lets the track collapse to the container instead. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 1.5rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
.card:hover { border-color: var(--petrol); }
.section-alt .card { background: var(--paper); }
.card-body { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--petrol); }
.card p { font-size: .93rem; color: var(--muted); margin: 0; }
.card .card-cta { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line-soft); font-weight: 600; font-size: .89rem; }
.card-img { aspect-ratio: 16/10; object-fit: cover; background: var(--line-soft); border-bottom: 1px solid var(--line); }
.card-strip { height: 4px; background: var(--petrol-solid); }
.card-strip.amber { background: var(--amber); }

/* pills & meta */
.pill { display: inline-block; padding: .3em .6em; border-radius: 3px; font-size: .69rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pill-active { background: var(--cr-good-soft); color: var(--ok); }
.pill-upcoming { background: var(--petrol-soft); color: var(--petrol); }
.pill-ended { background: var(--line); color: var(--ed-body); }
.pill-contest { background: var(--amber-soft); color: var(--amber); }
.meta-line { color: var(--muted); font-size: .9rem; }

/* campaign detail */
.detail-hero { background: var(--surface); border-bottom: 1px solid var(--line); padding: 3rem 0 2.6rem; }
.detail-hero .meta-line { color: var(--muted); }
.detail-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 800px) { .detail-cols { grid-template-columns: 1fr; } }
.rich-text { max-width: 68ch; }
.rich-text img { border-radius: 6px; }

.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.side-card h3 { margin-bottom: .7rem; }
.side-card.contest { border-top: 4px solid var(--amber); }

/* leaderboard */
.board { width: 100%; border-collapse: collapse; font-size: .95rem; }
.board th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.board td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.board tr:first-child td { font-weight: 700; }
.board .rank { color: var(--muted); width: 2.2rem; }
.board .pct { text-align: right; font-weight: 600; }

.prize-list { list-style: none; margin: 0; padding: 0; }
.prize-list li { display: flex; gap: .7rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.prize-list .prize-rank { font-family: var(--font-display); font-weight: 800; color: var(--amber); min-width: 1.6rem; }

/* CTA band */


/* news list */
.news-item { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 1.3rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.news-item time { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.news-item h3 { margin-bottom: .25rem; }
.news-item p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 600px) { .news-item { grid-template-columns: 1fr; gap: .2rem; } }

/* empty state */
.empty { border: 1.5px dashed var(--line); border-radius: 6px; padding: 2rem; text-align: center; color: var(--muted); }

/* footer */
/* ==========================================================================================
   The footer, and the ask inside it

   The page used to end on a crimson band and then a footer; they are one thing now, because the
   last thing a visitor sees should be a single closing move. The ask sits on the near-black with
   the same lit grid the hero uses, so the accent is on the button rather than the whole band —
   quieter and harder to ignore than a wall of colour.

   Under it, the columns, then the wordmark at full size cut off by the bottom of the page. It is
   set in the footer's own line colour and masked away downwards, so it reads as a watermark and
   never competes with the links above it.
   ========================================================================================== */

.site-footer { position: relative; background: var(--cr-footer-bg); color: var(--cr-footer-fg); margin-top: 0; overflow: hidden; }
body.page-dark .site-footer::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	/* it has to reach the bottom of the page: a gradient that stops mid-footer just moves the edge
	   somewhere else instead of removing it */
	background: linear-gradient(to bottom,
		transparent 0,
		color-mix(in srgb, var(--cr-ink) 4%, transparent) 42%,
		color-mix(in srgb, var(--cr-ink) 4%, transparent) 100%);
}

/* ---- the ask ---------------------------------------------------------------------------- */
.foot-cta { position: relative; isolation: isolate; padding: 7rem 0 5rem; border-bottom: 1px solid var(--cr-footer-line); }
.foot-cta .wrap { position: relative; z-index: 2; }
.foot-cta-grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(var(--cr-footer-line) 1px, transparent 1px), linear-gradient(90deg, var(--cr-footer-line) 1px, transparent 1px);
	background-size: 76px 76px;
	background-position: center;
	opacity: .55;
	-webkit-mask-image: radial-gradient(96% 118% at 24% 82%, #000 0%, rgba(0, 0, 0, .26) 46%, transparent 76%);
	mask-image: radial-gradient(96% 118% at 24% 82%, #000 0%, rgba(0, 0, 0, .26) 46%, transparent 76%);
}
.foot-cta-glow {
	position: absolute;
	z-index: 0;
	left: -14%;
	top: 0;
	width: 64vw;
	height: 64vw;
	max-width: 950px;
	max-height: 950px;
	border-radius: 50%;
	/* a suggestion of warmth rather than a light source: wide, weak and heavily blurred, so it
	   reads as the ground being slightly less black over here and never as a glow */
	background: radial-gradient(circle, rgba(225, 29, 72, .07), transparent 62%);
	filter: blur(46px);
}
.foot-cta .eyebrow { color: var(--petrol); margin-bottom: 1.1rem; }
.foot-cta h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; margin: 0; color: #fff; }
.foot-cta p { margin: 1.4rem 0 0; max-width: 52ch; font-size: 1.05rem; line-height: 1.6; color: var(--cr-footer-fg); }
.foot-cta-do { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.foot-cta .btn-solid { filter: drop-shadow(0 14px 28px rgba(225, 29, 72, .45)); }
.foot-cta .btn-ghost { background: rgba(255, 255, 255, .09); color: #fff; }
.foot-cta .btn-ghost:hover { background: rgba(255, 255, 255, .17); color: #fff; }
.foot-cta-note { display: block; margin-top: 1.3rem; font-size: .87rem; color: var(--cr-footer-muted); }

/* ---- the columns ------------------------------------------------------------------------- */
.foot-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 2.5rem; padding-top: 3.4rem; padding-bottom: 2.6rem; }
.foot-about .footer-brand { color: #fff; margin-bottom: .9rem; }
.footer-note { color: var(--cr-footer-muted); font-size: .93rem; line-height: 1.6; max-width: 34ch; margin: 0; }
.site-footer h3 { color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 1rem; }
.site-footer nav a { position: relative; display: block; width: fit-content; color: var(--cr-footer-fg); text-decoration: none; font-size: .93rem; padding: .22rem 0; transition: color .25s ease; }
.site-footer nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.site-footer nav a:hover { color: #fff; }
.site-footer nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- the line at the bottom -------------------------------------------------------------- */
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.3rem; padding-bottom: 1.4rem; border-top: 1px solid var(--cr-footer-line); }
.foot-legal { font-size: .85rem; color: var(--cr-footer-muted); }
.foot-top { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: var(--cr-footer-fg); text-decoration: none; transition: color .25s ease; }
.foot-top span { transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.foot-top:hover { color: #fff; }
.foot-top:hover span { transform: translateY(-3px); }

/* ---- the watermark ----------------------------------------------------------------------- */
.foot-mark {
	margin: .5rem 0 -.24em;
	font-size: clamp(4rem, 16.5vw, 17rem);
	font-weight: 700;
	line-height: .78;
	letter-spacing: -.055em;
	text-align: center;
	white-space: nowrap;
	color: var(--cr-footer-line);
	-webkit-mask-image: linear-gradient(to bottom, #000 8%, rgba(0, 0, 0, .25) 62%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 8%, rgba(0, 0, 0, .25) 62%, transparent 92%);
	pointer-events: none;
	user-select: none;
}

@media (max-width: 900px) {
	.foot-cta { padding: 3.6rem 0 3.4rem; }
	.foot-cta h2 br { display: none; }
	.foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.foot-about { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.foot-grid { grid-template-columns: 1fr; }
	.foot-base { justify-content: flex-start; }
}

/* certificate verification */
.verify-wrap { max-width: 740px; }
.verify-form { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem 1.5rem; }
.verify-label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .45rem; }
.verify-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.verify-input {
	flex: 1 1 18rem;
	font-family: "Courier New", monospace;
	font-size: 1.05rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .7rem .9rem;
	border: 1.5px solid var(--line);
	border-radius: 4px;
	background: var(--paper);
	color: var(--ink);
}
.verify-input:focus { outline: 2px solid var(--petrol); outline-offset: 1px; border-color: var(--petrol); }
.verify-help { font-size: .86rem; color: var(--muted); margin: .6rem 0 0; }

.verify-result { margin-top: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-left-width: 5px; border-radius: 6px; padding: 1.3rem 1.5rem; }
.verify-ok { border-left-color: var(--ok); }
.verify-warn { border-left-color: var(--amber); }
.verify-bad { border-left-color: var(--danger); }
.verify-headline { font-size: 1.25rem; margin-bottom: .3rem; }
.verify-ok .verify-headline { color: var(--ok); }
.verify-warn .verify-headline { color: var(--amber); }
.verify-bad .verify-headline { color: var(--danger); }
.verify-detail { color: var(--muted); font-size: .95rem; margin-bottom: 0; }

.verify-facts { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: .35rem 1.2rem; margin: 1.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
@media (max-width: 520px) { .verify-facts { grid-template-columns: 1fr; gap: 0 0; } .verify-facts dd { margin-bottom: .6rem; } }
.verify-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: .18rem; }
.verify-facts dd { margin: 0; font-weight: 600; }
.verify-number { font-family: "Courier New", monospace; font-weight: 400; letter-spacing: .03em; }

.verify-aside { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.verify-aside p { font-size: .92rem; color: var(--muted); }
.verify-aside-note { font-size: .86rem; }

/* account menu — the only place the public site admits the other surfaces exist.
   <details> rather than a script: the site ships no JavaScript and this need not change that. */
.account { position: relative; }
.account-trigger {
	display: flex; align-items: center; gap: .5rem;
	padding: .35rem .6rem .35rem .35rem;
	border: 1.5px solid var(--line); border-radius: 99px;
	cursor: pointer; list-style: none; user-select: none;
	font-weight: 600; font-size: .92rem;
}
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger:hover { border-color: var(--petrol); }
.account[open] .account-trigger { border-color: var(--petrol); }
.account-trigger:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.account-initials {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.7rem; height: 1.7rem; border-radius: 50%;
	background: var(--petrol-solid); color: var(--on-accent);
	font-family: var(--font-display); font-size: .78rem; font-weight: 700;
}
.account-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .account-name { display: none; } }
.account-caret { color: var(--muted); font-size: .7rem; }

.account-menu {
	position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
	min-width: 17rem;
	background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
	box-shadow: 0 10px 28px rgba(22, 36, 46, .16);
	padding: .4rem;
}
.account-item { display: block; padding: .5rem .6rem; border-radius: 4px; text-decoration: none; color: var(--ink); }
.account-item:hover, .account-item:focus-visible { background: var(--petrol-soft); }
.account-item-label { display: block; font-weight: 700; font-size: .92rem; }
.account-item-hint { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.account-signout { margin: .35rem 0 0; padding-top: .35rem; border-top: 1px solid var(--line); }
.account-signout button {
	width: 100%; text-align: left; padding: .5rem .6rem;
	background: none; border: 0; border-radius: 4px;
	font: inherit; font-weight: 600; font-size: .92rem; color: var(--ink); cursor: pointer;
}
.account-signout button:hover { background: var(--petrol-soft); }

.org-sector { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; }

/* the rule that decides the prizes, stated where the board is read */
.board-rule { font-size: .82rem; color: var(--muted); margin: .8rem 0 0; line-height: 1.45; }

/* ---- campaign media: the record a visitor comes back for -------------------------------- */

.media-h { margin: 2rem 0 .8rem; }

/* posts are cards: a taste on the campaign page, the rest on the post's own page */
.post-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 1.1rem;
	margin-top: 1rem;
}

.post-card {
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent, var(--petrol));
	border-radius: 10px;
	background: var(--surface);
	padding: .9rem 1.1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.post-card h3 { margin: 0; font-size: 1.05rem; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { text-decoration: underline; }
.post-card p { margin: 0; font-size: .92rem; color: var(--muted, var(--muted)); }
.post-card .meta-line { padding: 0; }

.post-more {
	margin-top: .5rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--accent, var(--petrol));
	text-decoration: none;
}
.post-more:hover { text-decoration: underline; }

/* the gallery: a wall of moments, each opening large in the lightbox */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: .6rem;
	margin-top: .4rem;
}

.gallery-tile {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	border: 1px solid var(--line);
}

.gallery-tile img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}

.gallery-tile:hover img,
.gallery-tile:focus-visible img { transform: scale(1.04); }
.gallery-tile:focus-visible { outline: 3px solid var(--accent, var(--petrol)); outline-offset: 2px; }

.gallery-name {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.1rem .7rem .5rem;
	font-size: .8rem;
	line-height: 1.3;
	color: var(--on-accent);
	background: linear-gradient(transparent, rgba(10, 20, 18, .78));
}

@media (prefers-reduced-motion: reduce) {
	.gallery-tile img { transition: none; }
}

/* videos keep their frames, side by side */
.video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 1.1rem;
	margin-top: .4rem;
}

.video-card { margin: 0; }
.video-card figcaption { padding-top: .5rem; font-size: .95rem; }
.video-card figcaption .meta-line { padding: 0; }
.video-card figcaption p { margin: .25rem 0 0; }

.media-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	/* a stage behind the iframe: a lazy or blocked embed must not read as a broken white card */
	background: #14231f;
}

.media-frame::before {
	content: "B6";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, .55);
	font-size: 2.2rem;
}

.media-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* the lightbox: the gallery's photos at full size, with the album's thread kept.
   The display rule would beat the hidden attribute, so hidden is said explicitly. */
.lightbox[hidden] { display: none; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(8, 15, 13, .92);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	padding: 1rem;
}

.lightbox figure {
	margin: 0;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	min-width: 0;
}

.lightbox img {
	max-width: 100%;
	max-height: 78vh;
	border-radius: 8px;
	object-fit: contain;
}

.lightbox figcaption { text-align: center; color: rgba(255, 255, 255, .85); }
.lightbox figcaption b { display: block; }
.lightbox figcaption .meta-line { color: #a8bcb8; display: inline-block; padding: 0 .4rem; }

.lightbox button {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: var(--on-accent);
	font: inherit;
	font-size: 1.4rem;
	line-height: 1;
	border-radius: 999px;
	width: 2.6rem;
	height: 2.6rem;
	cursor: pointer;
}

.lightbox button:hover,
.lightbox button:focus-visible { background: rgba(255, 255, 255, .22); }
.lightbox .lb-close { position: absolute; top: 1rem; right: 1rem; font-size: 1rem; }

/* a post on its own page */
.post-wrap { max-width: 46rem; }
.post-figure {
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--line);
	margin-bottom: 1.2rem;
}
.post-body { font-size: 1.02rem; }

.post-neighbours {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 2.2rem;
}

.post-step {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .7rem .9rem;
	text-decoration: none;
	color: inherit;
	background: var(--surface);
}
.post-step:hover { border-color: var(--accent, var(--petrol)); }
.post-step .meta-line { padding: 0; display: block; }
.post-step-next { text-align: right; }

/* ---- the campaign's face: hero, accent, arc and numbers ---------------------------------- */

/* each campaign may wear its own colour; everything below falls back to the site amber */
.camp-eyebrow { color: var(--camp, #ffd9a0); }
.campaign-hero .pill-active { background: var(--camp, #2e7d32); }
.campaign-hero.has-image {
	background-size: cover;
	background-position: center;
}

.hero-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
	color: #d6e4e6;
	font-size: .95rem;
	padding: .55rem .9rem;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 0;
}
.hero-countdown b { color: var(--camp, #ffd9a0); font-variant-numeric: tabular-nums; }

/* the arc: opens, courses, quiz, winners — and where we are on it */
.phase-steps {
	list-style: none;
	display: flex;
	gap: 0;
	margin: 1.6rem 0 0;
	padding: 0;
	max-width: 34rem;
}

.phase-steps li {
	flex: 1;
	position: relative;
	text-align: center;
	font-size: .8rem;
	color: #9db8b4;
	padding-top: 1.1rem;
}

.phase-steps li i {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .25);
	z-index: 1;
}

.phase-steps li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: rgba(255, 255, 255, .18);
}

.phase-steps li:first-child::before { display: none; }
.phase-steps li span { display: block; }
.phase-steps li .meta-line { padding: 0; font-size: .7rem; color: #7fa09b; }

.phase-steps .phase-done i,
.phase-steps .phase-done::before,
.phase-steps .phase-now::before { background: var(--camp, #ffd9a0); }
.phase-steps .phase-now i {
	background: var(--camp, #ffd9a0);
	box-shadow: 0 0 0 4px rgba(255, 217, 160, .25);
}
.phase-steps .phase-now { color: var(--on-accent); font-weight: 600; }

/* the numbers band: what the campaign amounts to, in figures a passer-by can read */
.stat-band {
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
}

.stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	padding: 1.1rem 0;
}

.stat b {
	display: block;
	font-size: 1.7rem;
	line-height: 1.15;
	color: var(--camp, var(--petrol));
	font-variant-numeric: tabular-nums;
}

.stat span { font-size: .82rem; color: var(--muted, var(--muted)); }

/* the board earns its drama: medal tints for the top three, a bar behind every score */
.board tr.board-top-1 td { background: var(--amber-soft); }
.board tr.board-top-2 td { background: var(--surface-2); }
.board tr.board-top-3 td { background: var(--surface-2); }

.board .pct { position: relative; }

.score-bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--line);
	overflow: hidden;
	margin-bottom: .2rem;
}

.score-bar i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: var(--camp, var(--petrol));
}

/* winners on a podium: second, first, third — the shape everyone already reads */
.podium {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: .5rem;
	align-items: end;
	margin: .8rem 0 .4rem;
	text-align: center;
}

.podium-place { display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; min-width: 0; }
.podium-place b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-place .meta-line { padding: 0; }
.podium-medal { font-size: 1.3rem; }

.podium-place i {
	display: block;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(#e9c46a, #d9a44a);
	margin-top: .3rem;
}

.podium-1 i { height: 3.4rem; }
.podium-2 i { height: 2.4rem; background: linear-gradient(#cfd8d5, #aebbb8); }
.podium-3 i { height: 1.7rem; background: linear-gradient(#d9a06b, #c47b4a); }

@media (max-width: 640px) {
	.stat-row { gap: 1.4rem; }
	.phase-steps li .meta-line { display: none; }
}

/* ---- the editorial campaign: paper, a display serif, and hairline records ----------------
   Scoped to the campaign pages by a body class, so the rest of the site keeps its own skin
   while this one is judged on its merits. The per-campaign accent still tints the identity
   marks (pill, tab underline, progress) but never carries text, because an accent chosen for
   warmth is rarely a colour text can be read in. */

/* the campaign pages were the theme's first draft; it belongs to the whole site now, and the
   editorial tokens sit at the root so any page can build a record, an article or a facts
   panel out of the same parts */
:root {
	--ed-paper: var(--paper);
	--ed-surface: var(--surface);
	--ed-ink: var(--ink);
	--ed-body: var(--cr-ink-2);
	--ed-muted: var(--muted);
	--ed-faint: var(--cr-faint);
	--ed-line: var(--line);
	--ed-line-soft: var(--line-soft);
	--ed-green: var(--petrol);
	--ed-green-deep: var(--petrol-dark);
	--ed-eyebrow: var(--petrol);
	--ed-serif: var(--font-serif);
}

body { color: var(--ed-body); }

body.campaign-page ::selection { background: #c9e3b8; color: var(--ed-ink); }
body.campaign-page .wrap { max-width: 1200px; }

.ed-crumb a,
.ed-prose a,
.ed-article-body a { color: var(--ed-green); }

body.campaign-page .ed-hero h1,
body.campaign-page .ed-h2,
body.campaign-page .ed-post h1 {
	font-family: var(--ed-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.06;
	color: var(--ed-ink);
	text-wrap: pretty;
}

.ed-eyebrow {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ed-eyebrow);
}

/* ---- hero: light, wide, with the campaign image beside the title */
.ed-hero {
	background: var(--ed-surface);
	border-bottom: 1px solid var(--ed-line);
}

.ed-crumb { padding-block: 1.6rem 0; font-size: .88rem; color: var(--ed-faint); }
.ed-crumb a { color: inherit; }
.ed-crumb a:hover { color: var(--ed-green); }

.ed-hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 4rem;
	align-items: center;
	/* block-only, so the `.wrap` gutter on this same element survives — see the note on .ev-body */
	padding-block: 2.2rem 3rem;
}

.ed-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); margin: 0; }
.ed-hero .ed-lede { font-size: 1.06rem; color: var(--ed-muted); max-width: 52ch; margin: 0; }
.ed-hero-head { display: flex; flex-direction: column; gap: 1.3rem; }
.ed-hero-tags { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ed-hero-tags .meta-line { padding: 0; color: var(--ed-faint); font-size: .86rem; }

.ed-pill {
	font-size: .69rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .38rem .7rem;
	border-radius: 3px;
	background: var(--ed-green);
	color: var(--paper);
}

.ed-pill-quiet { background: var(--ed-line-soft); color: var(--ed-faint); }

.ed-hero-figure {
	height: 340px;
	border-radius: 6px;
	border: 1px solid var(--ed-line);
	background: var(--ed-line-soft) center/cover no-repeat;
	/* a hero with no photograph should read as a page that has none, not as one whose picture
	   failed to arrive — the same gradient the cards fall back to. An inline background-image
	   still wins wherever there is one. */
	background-image: linear-gradient(145deg,
		color-mix(in srgb, var(--camp, var(--ed-green)) 16%, var(--ed-surface)),
		var(--ed-surface) 62%);
}

.ed-actions { display: flex; gap: .75rem; flex-wrap: wrap; padding-top: .4rem; align-items: center; }

.ed-btn {
	display: inline-block;
	border: 0;
	cursor: pointer;
	background: var(--cr-accent-solid);
	color: var(--on-accent);
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	padding: .82rem 1.5rem;
	border-radius: 4px;
	text-decoration: none;
}

.ed-btn:hover { background: var(--ed-green-deep); color: var(--on-accent); }

.ed-btn-quiet {
	background: transparent;
	color: var(--ed-green);
	border: 1px solid var(--line);
}

.ed-btn-quiet:hover { background: transparent; border-color: var(--ed-green); }

.ed-countdown {
	font-size: .9rem;
	color: var(--ed-muted);
	padding: .7rem 1.1rem;
	border: 1px solid var(--ed-line);
	border-radius: 999px;
}

.ed-countdown b { color: var(--ed-ink); font-variant-numeric: tabular-nums; }

/* the facts under the hero: label above, figure below, one hairline over each */
.ed-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	padding-block: 0 2.4rem;
}

.ed-fact { padding-top: 1.25rem; border-top: 1px solid var(--ed-line); }
.ed-fact .k { font-size: .78rem; color: var(--ed-faint); margin-bottom: .35rem; }
.ed-fact .v { font-size: 1rem; font-weight: 600; color: var(--ed-ink); }

.ed-meter { display: flex; align-items: center; gap: .6rem; }
.ed-meter .track { flex: 1; height: 5px; border-radius: 999px; background: var(--line); }
.ed-meter .track i { display: block; height: 5px; border-radius: 999px; background: var(--camp, var(--ed-green)); }

/* ---- the tab strip: real links, one URL per view */
.ed-tabs {
	background: var(--ed-surface);
	border-bottom: 1px solid var(--ed-line);
}

/* The strip is wider than a phone — seven sections plus the quiz — so it scrolls sideways. It
   already did, but silently: no scrollbar on touch, no edge to say there is more, and on the
   contest page the quiz's own tab is the last one, so you landed on a page whose tab was off the
   right of the screen. Hence the fade, and the script in event.html that scrolls the current tab
   into view. */
.ed-tabs { position: relative; }
.ed-tabs .wrap {
	display: flex;
	gap: 2rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-padding-inline: 1.25rem;
}
.ed-tabs .wrap::-webkit-scrollbar { display: none; }
/* the fade is a hint, never a target: it must not eat the tap meant for the tab beneath it */
.ed-tabs::after {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 2.25rem;
	pointer-events: none;
	background: linear-gradient(to right, transparent, var(--ed-surface));
}
@media (min-width: 1000px) { .ed-tabs::after { display: none; } }

.ed-tab {
	white-space: nowrap;
	padding: 1.15rem 0;
	font-size: .92rem;
	font-weight: 600;
	color: var(--ed-faint);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.ed-tab:hover { color: var(--ed-ink); }

@media (max-width: 700px) {
	.ed-tabs .wrap { gap: 1.35rem; }
	/* 44px is the smallest thing a thumb hits reliably; the old padding gave the link its height
	   from the text alone */
	.ed-tab { padding: .9rem 0; font-size: .86rem; min-height: 44px; display: flex; align-items: center; }
}
.ed-tab .n { font-weight: 500; color: var(--muted); }
.ed-tab[aria-current="page"] { color: var(--ed-ink); border-bottom-color: var(--camp, var(--ed-green)); }

/* padding-block only: these elements are also .wrap, and the shorthand would take its sides off */
.ed-panel { padding-block: 3.6rem 6rem; }
.ed-h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 .5rem; }
.ed-sub { font-size: .97rem; color: var(--ed-muted); margin: 0; max-width: 60ch; }
.ed-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.7rem; flex-wrap: wrap; }
.ed-panel-head .meta-line { padding: 0; color: var(--ed-faint); }

/* ---- overview: the writing, the figures it earned, and the arc down the side */
.ed-overview { display: grid; grid-template-columns: 1.45fr 1fr; gap: 4.5rem; }
.ed-prose { font-size: 1.08rem; line-height: 1.68; color: var(--ed-body); }
.ed-prose p { max-width: 62ch; }
.ed-prose :first-child { margin-top: 0; }

.ed-goals {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--ed-line);
	border: 1px solid var(--ed-line);
	border-radius: 6px;
	overflow: hidden;
	margin-top: 1.6rem;
}

.ed-goal { background: var(--ed-surface); padding: 1.5rem; }
.ed-goal .value { font-family: var(--ed-serif); font-size: 2rem; color: var(--ed-green); line-height: 1.1; }
.ed-goal .label { font-size: .87rem; color: var(--ed-muted); margin-top: .35rem; }

.ed-aside { display: flex; flex-direction: column; gap: 2.2rem; }
.ed-aside-h { margin-bottom: 1.1rem; }

.ed-phase { display: flex; gap: .85rem; align-items: flex-start; padding-bottom: 1rem; border-bottom: 1px solid var(--ed-line-soft); margin-bottom: 1rem; }
.ed-phase:last-child { border-bottom: 0; margin-bottom: 0; }
.ed-phase i { width: 8px; height: 8px; border-radius: 999px; margin-top: .45rem; flex: none; background: var(--line); }
.ed-phase.done i { background: var(--ed-green); }
.ed-phase.now i { background: var(--camp, var(--ed-green)); box-shadow: 0 0 0 4px rgba(27, 77, 52, .14); }
.ed-phase .name { font-size: .95rem; font-weight: 600; color: var(--ed-ink); }
.ed-phase .when { font-size: .85rem; color: var(--ed-faint); }

.ed-card {
	background: var(--ed-surface);
	border: 1px solid var(--ed-line);
	border-radius: 6px;
	padding: 1.5rem;
}

.ed-card h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.35rem; color: var(--ed-ink); margin: 0 0 .5rem; }

/* ---- the hairline record: rows on a grey grid, the pattern behind every list */
.ed-rows {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--ed-line);
	border: 1px solid var(--ed-line);
	border-radius: 6px;
	overflow: hidden;
}

.ed-row {
	background: var(--ed-surface);
	padding: 1.4rem 1.6rem;
	display: grid;
	gap: 1.8rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

a.ed-row:hover { background: var(--surface-2); }

.ed-row-article { grid-template-columns: 200px 1fr 140px; }
.ed-row-course { grid-template-columns: 44px 1fr 150px; }
/* the same record used for answers rather than things: the left column names what the answer is
   about, so a reader scanning for the one that concerns them reads labels, not prose */
.ed-row-note { grid-template-columns: 140px 1fr; }
.ed-row-note .k {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ed-eyebrow);
	align-self: start;
	padding-top: .2rem;
}
@media (max-width: 760px) {
	.ed-row-note { grid-template-columns: 1fr; gap: .5rem; }
}

.ed-thumb {
	height: 126px;
	border-radius: 4px;
	border: 1px solid var(--ed-line-soft);
	background: var(--ed-line-soft) center/cover no-repeat;
	/* same reasoning as the card figure: a post without a cover should look like a post without
	   one, not like a broken image well */
	background-image: linear-gradient(145deg,
		color-mix(in srgb, var(--camp, var(--ed-green)) 14%, var(--ed-surface)),
		var(--ed-surface) 66%);
}

.ed-row h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--ed-ink); margin: 0; }
.ed-row p { margin: 0; font-size: .93rem; color: var(--ed-muted); max-width: 60ch; }
.ed-row .ed-when { justify-self: end; text-align: right; display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--ed-faint); }
.ed-row .num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--muted); }
.ed-row .title { font-size: 1.05rem; font-weight: 600; color: var(--ed-ink); margin-bottom: .3rem; }
.ed-row .sub { font-size: .85rem; color: var(--ed-faint); }
.ed-row .go { justify-self: end; font-size: .87rem; font-weight: 600; color: var(--ed-green); }

/* ---- media: videos in a row, photos on a wall */
/* ---- the videos: one room, one player -------------------------------------------------------
   A grid of iframes loads a third party once per video the moment the page opens, for footage
   nobody has asked to watch. Nothing here is a player until it is clicked: the page draws the
   video itself from the still, and fetches the player on the click. One plays at a time — which
   is all anybody does with video — and the rest wait in a list beside it. */
.vid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.vid-alone { grid-template-columns: minmax(0, 1fr); }

.vid-stage { min-width: 0; }
.vid-screen, .vid-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ed-surface) center/cover no-repeat; }
.vid-screen {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	/* the still is a photograph of somebody's video: it takes the same grade the record's
	   photographs take, and comes up to full when the pointer is on it */
	filter: grayscale(.25) contrast(1.03) brightness(.86);
	transition: filter .35s ease;
}
.vid-screen:hover, .vid-screen:focus-visible { filter: none; outline: 0; }
/* the still is display:grid and the player display:block, and an author's display beats the
   hidden attribute — without this the player opens underneath the still instead of replacing it */
.vid-screen[hidden], .vid-frame[hidden] { display: none; }
.vid-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6, 8, 11, .5)); }
.vid-mark {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 4.4rem;
	height: 4.4rem;
	--cut: 12px;
	clip-path: var(--chamfer);
	background: var(--cr-accent);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
/* a triangle, drawn rather than typed: a glyph would carry a font's idea of a play button */
.vid-mark::before { content: ""; width: 0; height: 0; margin-left: .28rem; border-left: 1.15rem solid var(--cr-on-accent, #fff); border-top: .72rem solid transparent; border-bottom: .72rem solid transparent; }
.vid-screen:hover .vid-mark, .vid-screen:focus-visible .vid-mark { transform: scale(1.06); }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-say { padding-top: .9rem; }
.vid-say h3 { margin: 0 0 .2rem; font-size: 1.25rem; line-height: 1.25; color: var(--ed-ink); }
.vid-say .meta-line { padding: 0; color: var(--ed-faint); }

/* the rest of them, waiting */
.vid-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 34rem; overflow-y: auto; scrollbar-width: thin; }
.vid-item {
	display: grid;
	grid-template-columns: 6.6rem minmax(0, 1fr);
	gap: .85rem;
	width: 100%;
	padding: .5rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .25s ease;
}
.vid-item:hover { background: color-mix(in srgb, var(--cr-ink) 6%, transparent); }
.vid-item[aria-current="true"] { background: color-mix(in srgb, var(--cr-ink) 9%, transparent); }
.vid-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ed-surface) center/cover no-repeat;
	filter: grayscale(.4) brightness(.8);
	transition: filter .3s ease;
}
.vid-item:hover .vid-thumb, .vid-item[aria-current="true"] .vid-thumb { filter: none; }
/* the number is the one thing a still cannot say, and it is legible on any photograph */
.vid-thumb i { position: absolute; left: 0; bottom: 0; padding: .1rem .32rem; background: rgba(6, 8, 11, .72); color: #fff; font-family: var(--hb-mono, ui-monospace, monospace); font-size: .68rem; font-style: normal; }
.vid-item-say { min-width: 0; }
.vid-item-say b { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--ed-ink); }
.vid-item-say .meta-line { padding: 0; font-size: .8rem; color: var(--ed-faint); }
.vid-item[aria-current="true"] .vid-item-say b { color: var(--ed-ink); }

@media (max-width: 900px) {
	.vid { grid-template-columns: minmax(0, 1fr); }
	.vid-list { max-height: none; }
}

body.campaign-page .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
body.campaign-page .gallery-tile { border-color: var(--ed-line); border-radius: 6px; }

/* ---- contest: the offer, the terms, then who is winning */
.ed-contest {
	background: var(--ed-surface);
	border: 1px solid var(--ed-line);
	border-radius: 6px;
	padding: 2.1rem;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 3.5rem;
	align-items: start;
}

.ed-contest h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 2rem; line-height: 1.14; color: var(--ed-ink); margin: 0; }
.ed-contest-main { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.ed-contest-main p { margin: 0; font-size: 1.02rem; line-height: 1.62; color: var(--ed-body); }

.ed-terms { display: flex; flex-direction: column; }
.ed-term { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--ed-line-soft); }
.ed-term .k { font-size: .88rem; color: var(--ed-faint); }
.ed-term .v { font-size: .88rem; font-weight: 600; color: var(--ed-ink); text-align: right; }

body.campaign-page .board { width: 100%; }
body.campaign-page .board th { color: var(--ed-faint); }
body.campaign-page .prize-list { padding-left: 0; }

/* ---- the article, read the way an article should be */
.ed-post { max-width: 720px; margin: 0 auto; padding: 3rem 0 6rem; }
.ed-post h1 { font-size: clamp(2rem, 4.4vw, 3.35rem); margin: 0 0 1.4rem; }
.ed-post-tags { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.ed-post-tags .meta-line { padding: 0; color: var(--ed-faint); font-size: .86rem; }

.ed-deck {
	font-family: var(--ed-serif);
	font-size: 1.22rem;
	line-height: 1.52;
	color: var(--ed-body);
	margin: 0 0 1.9rem;
	max-width: none;
}

.ed-byline {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.1rem 0;
	border-top: 1px solid var(--ed-line);
	border-bottom: 1px solid var(--ed-line);
	margin-bottom: 2.2rem;
	font-size: .9rem;
	color: var(--ed-muted);
}

.ed-byline b { color: var(--ed-ink); }

.ed-lead-figure { margin: 0 0 2.4rem; }
.ed-lead-figure img { width: 100%; border-radius: 6px; border: 1px solid var(--ed-line); display: block; }
.ed-lead-figure figcaption { font-size: .85rem; color: var(--muted); margin-top: .75rem; }

.ed-article-body { font-size: 1.02rem; line-height: 1.7; color: var(--ed-body); max-width: none; }

/* the opening paragraph carries itself as the deck — the editorial device, taken from the
   writing that is already there rather than from a summary field nobody fills in */
.ed-article-body > p:first-child {
	font-family: var(--ed-serif);
	font-size: 1.2rem;
	line-height: 1.52;
	color: var(--ed-body);
	margin-bottom: 1.9rem;
}
.ed-article-body p { margin: 0 0 1.6rem; max-width: none; }
.ed-article-body h2, .ed-article-body h3 { font-family: var(--ed-serif); font-weight: 400; color: var(--ed-ink); margin: 2.2rem 0 .8rem; }
.ed-article-body blockquote {
	margin: 2.6rem 0;
	padding: 0 0 0 1.6rem;
	border-left: 2px solid var(--ed-green);
	font-family: var(--ed-serif);
	font-size: 1.3rem;
	line-height: 1.46;
	color: var(--ed-ink);
}
.ed-article-body img { border-radius: 6px; border: 1px solid var(--ed-line); max-width: 100%; height: auto; }
/* a photograph inside the writing, with the line that says what it is. The figure is allowed to
   run wider than the column: a picture set to the measure of the text reads as an attachment,
   and one that breaks the measure reads as part of the piece. */
.ed-article-body figure { margin: 2.6rem 0; }
.ed-article-body figure img { display: block; width: 100%; }
.ed-article-body figcaption {
	margin-top: .7rem;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--ed-faint);
}
@media (min-width: 1000px) {
	.ed-article-body figure { width: calc(100% + 8rem); margin-left: -4rem; margin-right: -4rem; }
	.ed-article-body figcaption { padding: 0 4rem; }
}

.ed-more { margin-top: 3.4rem; padding-top: 1.9rem; border-top: 1px solid var(--ed-line); }
.ed-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.2rem; }

.ed-more-card {
	background: var(--ed-surface);
	border: 1px solid var(--ed-line);
	border-radius: 6px;
	padding: 1.4rem;
	text-decoration: none;
	display: block;
}

.ed-more-card:hover { border-color: var(--ed-green); }
.ed-more-card .k { font-size: .78rem; color: var(--ed-faint); margin-bottom: .5rem; }
.ed-more-card .t { font-family: var(--ed-serif); font-size: 1.3rem; line-height: 1.24; color: var(--ed-ink); }

.ed-empty {
	background: var(--ed-surface);
	border: 1px dashed var(--ed-line);
	border-radius: 6px;
	padding: 3rem;
	text-align: center;
	color: var(--ed-faint);
}

@media (max-width: 900px) {
	.ed-hero-grid, .ed-overview, .ed-contest { grid-template-columns: 1fr; gap: 2.4rem; }
	.ed-hero-figure { height: 220px; }
	.ed-facts { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.ed-row-article { grid-template-columns: 120px 1fr; }
	.ed-row-article .ed-when { grid-column: 2; justify-self: start; text-align: left; flex-direction: row; gap: .8rem; }
	.ed-thumb { height: 90px; }
	.ed-more-grid { grid-template-columns: 1fr; }
}

/* ---- a campaign's own landing page ---------------------------------------------------------
   The overview leads rather than summarises: the arc, what it is, the track, the board as it
   stands, the days and the record, each ending in the door to its own tab. Sections are separated
   by a rule rather than boxed, so the page reads as one column of consecutive things and not as a
   dashboard of panels.

   The campaign's own accent runs through the marks here — the dot it has reached, the rules, the
   wash under the closing ask — and never through text, for the reason set out above: an accent
   picked for warmth is not a colour a sentence can be read in, and these are chosen per campaign
   by someone who is not looking at a contrast table. */

.cl-sec { padding: 3.2rem 0; border-top: 1px solid var(--ed-line-soft); }
.cl-sec:first-of-type { border-top: 0; padding-top: 0; }
.cl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.cl-head .ed-sub { margin: .45rem 0 0; max-width: 62ch; }
.cl-head-sub { margin-top: 2.4rem; align-items: baseline; }
.cl-h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.3rem; color: var(--ed-ink); margin: 0; }
.cl-more { flex: none; font-size: .9rem; font-weight: 600; color: var(--ed-green); text-decoration: none; white-space: nowrap; }
.cl-more:hover { text-decoration: underline; }

/* ---- about, with the numbers beside it ---------------------------------------------------- */
/* the copy is a few lines and the numbers are four: side by side leaves a column of nothing under
   whichever runs out first, so they stack and the numbers become a band across */
.cl-about .ed-prose { max-width: 68ch; }
/* as many columns as there are figures — two, three or four — so no empty cell trails the row */
.cl-about .ed-goals { margin-top: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }

/* ---- the board, as it actually stands ----------------------------------------------------- */
.cl-board { padding: 1.1rem 1.5rem 1.5rem; }

/* ---- the record: the photographs, dealt by the scroll --------------------------------------
   Every frame occupies the same box and is moved out of it. --d is how far a frame is from the one
   being read — 0 for that one, +1 for the next, -1 for the one just gone — and a single transform
   turns that number into a position: nothing at 0, up and to the left at -1, down and to the right
   at +1, shrinking either way. Three visual slots out of one variable, so they can never disagree.

   With no script the frames simply stack as a column of pictures, each a link to itself, and the
   track's height is ignored because nothing is sticky. */
/* the slots are placed against the whole stage, not against a column beside the text: the frame
   that has gone sits far out at the top left and the one still coming sits low and right, under the
   words, which is only possible if the words are a layer over the same box rather than a neighbour
   pushing it narrower */
.cl-shots { --frame-w: 42%; }
.cl-shots-track { position: relative; }
.cl-shots-stage { position: sticky; top: 0; height: 100vh; }
.cl-shots-frames {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	/* the picture takes nearly the whole screen: the header gets out of the way on the way down,
	   so the frame no longer has to be short enough to duck under it — only enough air is left top
	   and bottom to keep it from touching the edges */
	height: 92vh;
	transform: translateY(-50%);
}
.cl-frame {
	position: absolute;
	left: 50%;
	top: 0;
	width: var(--frame-w);
	height: 100%;
	margin: 0;
	/* centred by default; the script moves it from there. This has to come after the margin
	   shorthand above, which would otherwise reset it, and it multiplies by -0.5 rather than
	   dividing by -2, because calc() refuses to divide by a negative and drops the declaration. */
	margin-left: calc(var(--frame-w) * -0.5);
	border-radius: 4px;
	overflow: hidden;
	background: var(--ed-surface);
	/* transform, opacity and stacking are written per frame by the script: doing the same sum in
	   CSS needs abs() and round(), which are newer than this page can assume */
	will-change: transform, opacity;
}
.cl-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cl-shots-say {
	position: absolute;
	z-index: 12;
	right: 0;
	top: 50%;
	width: 27%;
	transform: translateY(-50%);
	transition: opacity .28s ease;
}
.cl-shots-n {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8rem;
	letter-spacing: .22em;
	color: var(--ed-faint);
	margin-bottom: .9rem;
}
.cl-shots-t {
	font-family: var(--ed-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.3rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--ed-ink);
	margin: 0;
	text-wrap: balance;
}
.cl-shots-d { margin: .8rem 0 0; color: var(--ed-muted); font-size: .98rem; line-height: 1.6; }
/* the way out is the one thing on this stage you are meant to press, so it is the page's primary
   button — and it takes its corner off the bottom left, leaning back towards the pictures it opens
   rather than forwards like every other button on the site */
.cl-shots-more {
	--cut: 14px;
	padding: .82rem 1.4rem;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	color: var(--on-accent);
	background: var(--cr-accent-solid);
	border: 0;
	border-radius: 0;
	clip-path: var(--chamfer-bl);
	cursor: pointer;
	transition: background .25s ease;
}
.cl-shots-more:hover { background: var(--cr-accent-active); }
/* the way out of the sequence, standing in the slot the next photograph would have taken */
.cl-frame-end {
	/* sized here rather than scaled by the script, so its label stays type instead of becoming a
	   smudge — the numbers are a thumbnail's, at full size */
	--end-h: 24%;
	width: calc(var(--frame-w) * 0.24);
	height: var(--end-h);
	/* the script's offsets move a centre, and every other cell's centre is the box's. This one is
	   shorter, so it has to be pulled onto that same line before the offset is applied. */
	top: calc(50% - var(--end-h) / 2);
	margin-left: calc(var(--frame-w) * -0.12);
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	overflow: visible;
}
.cl-frame-end .cl-shots-more { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }

/* Before the script runs, and forever without it — no script, a single photograph, a narrow
   screen, or a visitor who asked for stillness — the frames are a plain grid of pictures.
   Undoing the stage means undoing all of it: the offsets the script writes, but also the negative
   margin and the top offset that only make sense for something being positioned by its centre. */
.cl-shots:not([data-live]) .cl-shots-track { height: auto !important; }
.cl-shots:not([data-live]) .cl-shots-stage { position: static; height: auto; display: block; }
.cl-shots:not([data-live]) .cl-shots-frames { position: static; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; transform: none; }
.cl-shots:not([data-live]) .cl-frame {
	position: relative;
	left: 0;
	top: auto;
	width: 100%;
	height: auto;
	margin-left: 0;
	aspect-ratio: 4 / 3;
	/* a single photograph should not become a billboard just because it is on its own */
	max-width: 420px;
	transform: none;
	opacity: 1;
}
.cl-shots:not([data-live]) .cl-frame-end { aspect-ratio: auto; place-items: center start; padding: .4rem 0; }
.cl-shots:not([data-live]) .cl-shots-say { position: static; width: auto; margin: 1.4rem 0 0; transform: none; }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	/* a stage that deals one picture at a time needs width to deal them into, and a visitor who
	   asked for stillness should not have the page moving things under their scroll at all */
	.cl-shots .cl-shots-track { height: auto !important; }
	.cl-shots .cl-shots-stage { position: static; height: auto; display: block; }
	.cl-shots .cl-shots-frames { position: static; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; transform: none; }
	.cl-shots .cl-frame {
		position: relative;
		left: 0;
		top: auto;
		width: 100%;
		height: auto;
		margin-left: 0;
		aspect-ratio: 4 / 3;
	/* a single photograph should not become a billboard just because it is on its own */
	max-width: 420px;
		transform: none !important;
		opacity: 1 !important;
	}
	.cl-shots .cl-frame-end { aspect-ratio: auto; place-items: center start; padding: .4rem 0; }
	.cl-shots .cl-shots-say { position: static; width: auto; margin: 1.5rem 0 0; transform: none; }
}

/* ---- the closing ask ----------------------------------------------------------------------- */
.cl-join {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	margin: 3.4rem 0 0;
	padding: 2.6rem 2.4rem;
	border: 1px solid var(--ed-line);
	border-radius: 8px;
	background: var(--ed-surface);
}
/* the campaign's colour, as light rather than as a fill: it has to sit under white text */
.cl-join-wash {
	position: absolute;
	z-index: -1;
	right: -8%;
	top: -60%;
	width: 46%;
	height: 260%;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--camp, var(--ed-green)) 26%, transparent), transparent 68%);
	filter: blur(40px);
}
.cl-join-say { max-width: 54ch; min-width: 0; }
.cl-join-say .ed-h2 { margin-bottom: .5rem; }
.cl-join-say .ed-sub { margin: 0; }
.cl-join-do { display: flex; gap: .8rem; flex-wrap: wrap; }

@media (max-width: 900px) {
	.cl-about { grid-template-columns: 1fr; gap: 2rem; }
	.cl-join { padding: 2rem 1.5rem; }
}

/* ---- the campaign directory: the shelf the detail pages sit on -------------------------- */

body.campaign-page .ed-dir-hero h1,
body.campaign-page .ed-camp-card h3,
body.campaign-page .ed-mine-card h3 {
	font-family: var(--ed-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--ed-ink);
	text-wrap: pretty;
	margin: 0;
}

.ed-dir-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 4.5rem;
	align-items: end;
	padding: 4rem 0 2.4rem;
}

.ed-dir-hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); line-height: 1.04; }
.ed-dir-hero p { margin: 0; color: var(--ed-muted); max-width: 44ch; font-size: 1.02rem; }

/* the shelves, as links with their own addresses */
.ed-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 2.2rem 0 1.9rem;
	border-top: 1px solid var(--ed-line);
	flex-wrap: wrap;
}

.ed-filter-links { display: flex; gap: 1.9rem; flex-wrap: wrap; }

.ed-filter {
	font-size: .96rem;
	font-weight: 600;
	color: var(--ed-faint);
	text-decoration: none;
	padding-bottom: .5rem;
	border-bottom: 2px solid transparent;
}

.ed-filter:hover { color: var(--ed-ink); }
.ed-filter .n { font-weight: 500; color: var(--muted); }
.ed-filter[aria-current="page"] { color: var(--ed-ink); border-bottom-color: var(--ed-green); }
.ed-filters .meta-line { padding: 0; color: var(--ed-faint); }

/* the cards */
.ed-camp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 1.75rem;
	padding-bottom: 5rem;
}

.ed-camp-card {
	background: var(--ed-surface);
	border: 1px solid var(--ed-line);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.ed-camp-card:hover { border-color: var(--ed-green); }
.ed-camp-card:focus-visible { outline: 3px solid var(--ed-green); outline-offset: 2px; }

.ed-camp-figure {
	position: relative;
	height: 180px;
	background: var(--ed-line-soft) center/cover no-repeat;
	border-bottom: 1px solid var(--ed-line);
	/* a card whose event has no photograph should read as a card without one, not as one whose
	   photograph failed to load. An inline background-image still wins wherever there is one. */
	background-image: linear-gradient(145deg,
		color-mix(in srgb, var(--camp, var(--ed-green)) 16%, var(--ed-surface)),
		var(--ed-surface) 62%);
}

.ed-camp-figure .ed-pill { position: absolute; top: .9rem; left: .9rem; }

.ed-camp-flag {
	position: absolute;
	bottom: .9rem;
	left: .9rem;
	font-size: .72rem;
	font-weight: 600;
	padding: .3rem .6rem;
	border-radius: 3px;
	background: rgba(16, 40, 28, .78);
	color: var(--on-accent);
}

.ed-camp-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.ed-camp-type { font-size: .82rem; font-weight: 600; color: var(--ed-eyebrow); }
.ed-camp-card h3 { font-size: 1.55rem; line-height: 1.18; }
.ed-camp-card p { margin: 0; font-size: .93rem; color: var(--ed-muted); }

.ed-camp-foot {
	margin-top: auto;
	padding-top: 1.1rem;
	border-top: 1px solid var(--ed-line-soft);
	display: flex;
	flex-direction: column;
	gap: .55rem;
	font-size: .84rem;
	color: var(--ed-faint);
}

.ed-camp-counts { display: flex; flex-wrap: wrap; gap: .8rem; }
/* every card carries a figure now, photograph or not, so a shelf of them lines up rather than
   stepping down wherever a campaign has no picture */
.ed-camp-card .ed-camp-figure { min-height: 180px; }
.ed-camp-when { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.ed-camp-when b { color: var(--ed-ink); font-weight: 600; }

/* the reader's own campaigns, shelved under the same headings as the directory and wearing
   the same card — but never behind the filter, because a private campaign is listed nowhere
   else and one hidden behind an unclicked filter cannot be found at all */
.ed-mine-shelf { padding-bottom: 1.6rem; }

.ed-shelf-head {
	font-family: var(--ed-serif);
	font-weight: 400;
	font-size: 1.35rem;
	color: var(--ed-ink);
	margin: 0 0 .9rem;
}

.ed-shelf-head .n { font-family: var(--font-body); font-size: .85rem; color: var(--muted); }

.ed-camp-grid-tight { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1.4rem; }

/* the card is an <article> here rather than a link, because it carries a button of its own —
   an anchor may not contain another */
.ed-camp-card-mine { cursor: default; }
.ed-camp-card-mine:hover { border-color: var(--ed-line); }
.ed-camp-card-mine h3 a { color: inherit; text-decoration: none; }
.ed-camp-card-mine h3 a:hover { text-decoration: underline; }
.ed-camp-card-mine:focus-within { border-color: var(--ed-green); }
.ed-camp-card-mine .ed-camp-foot { gap: .9rem; }
.ed-camp-card-mine .ed-btn { padding: .5rem 1rem; font-size: .87rem; }

@media (max-width: 900px) {
	.ed-dir-hero { grid-template-columns: 1fr; gap: 1.6rem; padding: 2.6rem 0 1.8rem; }
	.ed-dir-hero p { max-width: none; }
}

/* ---- your campaigns: the signed-in reader's own commitments, private ones included ------- */

.pill-private {
	background: var(--amber-soft);
	color: #8a5a00;
}

.mine-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.mine-card {
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent, var(--petrol));
	border-radius: 10px;
	padding: .9rem 1rem;
	background: var(--surface);
}

.mine-card .mine-head {
	display: flex;
	gap: .4rem;
	margin-bottom: .35rem;
}

.mine-card h3 {
	margin: 0 0 .2rem;
	font-size: 1.02rem;
}

.mine-card h3 a {
	color: inherit;
	text-decoration: none;
}

.mine-card h3 a:hover {
	text-decoration: underline;
}

/* ---- records, sequences and facts, for the pages beyond campaigns ----------------------- */

/* the news shelf, as the same hairline record the campaign articles use */
.ed-row-news { grid-template-columns: 118px 1fr 130px; }
.ed-row-news .ed-when { justify-self: end; text-align: right; }
.ed-row-news time { font-size: .86rem; color: var(--ed-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
	.ed-row-news { grid-template-columns: 1fr; gap: .6rem; }
	.ed-row-news .ed-when { justify-self: start; text-align: left; }
}

/* a numbered sequence, drawn as steps rather than listed as bullets */
.steps {
	list-style: none;
	counter-reset: step;
	margin: 1.4rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
}

.steps li {
	counter-increment: step;
	background: var(--surface);
	padding: 1.4rem 1.6rem 1.4rem 4.4rem;
	position: relative;
}

.steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 1.6rem;
	top: 1.5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem;
	color: var(--muted);
}

.steps li h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.steps li p { margin: 0; color: var(--muted); font-size: .95rem; max-width: 68ch; }

/* a certificate reads as a record of facts, not as a card */
.verify-facts {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 0;
	margin: 1.4rem 0 0;
	border-top: 1px solid var(--line);
}

.verify-facts dt {
	padding: .85rem 1rem .85rem 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: .84rem;
	color: var(--ed-faint);
}

.verify-facts dd {
	margin: 0;
	padding: .85rem 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: .95rem;
	font-weight: 600;
	color: var(--ink);
}

@media (max-width: 620px) {
	.verify-facts { grid-template-columns: 1fr; }
	.verify-facts dt { padding-bottom: 0; border-bottom: 0; }
	.verify-facts dd { padding-top: .2rem; }
}

/* an article that carries its own intro already has a deck; the body's opening paragraph is
   then just a paragraph, or the reader meets two of them */
.ed-article-body.plain-lead > p:first-child {
	font-family: var(--font-body);
	font-size: 1.16rem;
	line-height: 1.72;
	color: var(--ed-body);
	margin-bottom: 1.6rem;
}

/* ---------- events: the seven sections, the registration form, the pass ---------- */
/* `padding-block`, not the four-value shorthand: this is the same element as `.wrap`, whose
   `padding: 0 1.25rem` is the gutter the whole site is set in. A shorthand here wins on source
   order and sets left and right to zero, which is why every section of an event page sat flush
   against both edges of a phone. */
.ev-body { padding-block: 2rem 3rem; }
.ev-grid { display: grid; gap: 2.4rem; grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 860px) { .ev-grid { grid-template-columns: minmax(0, 1fr); } }
/* A grid item defaults to `min-width: auto`, which means its automatic minimum is its min-content
   — and min-content walks all the way down to the leaderboard's `min-width: 30rem` table. That is
   how a table that scrolls inside its own box still made the column 480px wide on a 360px phone,
   and the whole page with it. `min-width: 0` lets the track shrink; the table keeps scrolling. */
.ev-grid > * { min-width: 0; }
.ev-narrow { max-width: 62ch; }
.ev-people { display: grid; gap: 1.4rem; }
.ev-people-tight { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* `minmax(0, 1fr)`, not `1fr`: a `1fr` track keeps its min-content width as an automatic floor, so
   beside a fixed 96/140px photo the card could not shrink below the longest line of the bio — which
   on a phone is wider than the screen, and dragged the whole speakers grid off the side of it. */
.ev-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.ev-person-keynote { grid-template-columns: 140px minmax(0, 1fr); padding: 1.2rem; border: 1px solid var(--ed-line); border-radius: 12px; }
/* under about a phone's width a photo beside text leaves too little for either, so they stack */
@media (max-width: 520px) {
	.ev-person, .ev-person-keynote { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
	.ev-person-photo { max-width: 128px; }
}
.ev-person h3 { margin: .1rem 0 .2rem; font-size: 1.15rem; }
.ev-person-keynote h3 { font-size: 1.45rem; }
.ev-person-photo { aspect-ratio: 1; border-radius: 10px; background: var(--line) center/cover no-repeat; }
.ev-talk { font-style: italic; margin: .35rem 0; }
.ev-tier { margin-bottom: 1.6rem; }
.ev-logos { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; }
.ev-logos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ev-logo { display: flex; flex-direction: column; gap: .35rem; min-width: 160px; padding: 1rem; border: 1px solid var(--ed-line); border-radius: 10px; text-decoration: none; color: inherit; background: var(--surface); }
.ev-logo img { max-height: 56px; max-width: 100%; object-fit: contain; align-self: flex-start; }
.ev-logo > span { font-weight: 700; font-size: 1.05rem; }
.ev-logo b em { font-style: normal; font-weight: 400; color: var(--ed-body); }
.ev-logo small { color: var(--ed-body); }
.ev-day { margin-bottom: 1.8rem; }
.ev-day h3 { margin: 0 0 .6rem; }
.ev-slots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ed-line); }
.ev-slot { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--ed-line); }
.ev-slot time { font-variant-numeric: tabular-nums; color: var(--ed-body); }
.ev-slot b { display: block; }
.ev-slot p { margin: .3rem 0 0; color: var(--ed-body); }
.ev-form { display: grid; gap: .9rem; max-width: 520px; }
.ev-form label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }
/* width: 100% with min-width: 0, or the field's intrinsic size becomes the grid column's floor —
   a two-up row of inputs then holds the whole form open at about 485px whatever it is inside */
.ev-form input { font: inherit; font-weight: 400; width: 100%; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ev-form input:focus { outline: 0; border-color: var(--ed-green, var(--petrol)); box-shadow: 0 0 0 3px var(--cr-field-ring); }
.ev-form-row { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ev-form-error { margin: 0; padding: .6rem .8rem; border-radius: 8px; background: var(--cr-danger-soft); color: var(--danger); }
.ev-done { padding: 1.2rem; border: 1px solid var(--ed-line); border-radius: 12px; max-width: 520px; }
.ev-grid .ed-facts { grid-template-columns: 1fr 1fr; gap: 1.2rem; padding-bottom: 0; }
.ev-grid .ed-fact .v { font-size: .95rem; }

/* the contest paper and board, and a signed-in person's passes */
.ev-mine { display: grid; gap: .6rem; }
.ev-mine-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; border: 1px solid var(--ed-line); border-radius: 10px; background: var(--surface); }
.ct-paper { max-width: 720px; }
.ct-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ed-line); font-weight: 600; }
.ct-clock { font-variant-numeric: tabular-nums; color: var(--danger); }
.ct-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.ct-q { padding: 1rem 1.1rem; border: 1px solid var(--ed-line); border-radius: 12px; background: var(--surface); }
.ct-q-text { font-weight: 600; margin-bottom: .2rem; overflow-wrap: anywhere; }
/* which category this one was drawn from, above the question rather than orphaned under it */
.ct-q-cat { font-size: .78rem; color: var(--ed-faint); margin-bottom: .35rem; }
.ct-opt {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .5rem .6rem;
	margin-top: .4rem;
	border: 1px solid var(--ed-line);
	border-radius: 8px;
	cursor: pointer;
	/* an option can be a URL, and a URL is one unbreakable word wide enough to push the whole
	   layout sideways on a phone */
	overflow-wrap: anywhere;
	transition: border-color .15s ease, background-color .15s ease;
}
.ct-opt:hover { border-color: var(--ed-green, var(--petrol)); }
/* the control is themed rather than replaced, so a browser without :has() still shows the choice */
.ct-opt input { margin: 0; flex: none; accent-color: var(--ed-green, var(--petrol)); }
/* ...and where :has() is understood, the whole row carries the answer, which is what you actually
   look at when checking what you picked */
.ct-opt:has(input:checked) {
	border-color: var(--ed-green, var(--petrol));
	background: color-mix(in srgb, var(--ed-green, var(--petrol)) 12%, transparent);
}
.ct-opt:has(input:disabled) { cursor: default; opacity: .85; }
.ct-input { font: inherit; width: 100%; margin-top: .5rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; }
.ct-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ct-table th { text-align: left; font-weight: 600; color: var(--ed-body); padding: .5rem .6rem; border-bottom: 1px solid var(--ed-line); }
.ct-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--ed-line); }
.ct-board-note { margin: .7rem 0 0; }
.ct-winners { display: grid; gap: .5rem; margin-bottom: 1rem; }
.ct-winner { display: flex; gap: .8rem; align-items: baseline; padding: .7rem .9rem; border: 2px solid var(--ed-green, var(--petrol)); border-radius: 10px; }
.ct-winner b { font-size: 1.2rem; }
.ct-winner em { margin-left: auto; font-style: normal; font-weight: 700; }
.ev-form[hidden], .ct-paper[hidden], .ev-done[hidden] { display: none; }
/* a question that is not the current one is not on the page at all */
.ct-q[hidden] { display: none; }
/* the height of the site header, which is sticky and sits over anything scrolled to the top */
.ct-paper { --ct-top: 73px; }
.ct-q, .ct-paper { scroll-margin-top: calc(var(--ct-top) + 1rem); }

/* ---- the paper, one question at a time -------------------------------------------------- */
/* how far through the paper you are. The clock says how long is left; this says how much is left,
   which is the other half of the same question and the one a six-question paper on a phone could
   not answer at all when it was one long scroll. */
.ct-prog { height: 4px; border-radius: 999px; background: var(--ed-line); overflow: hidden; }
.ct-prog-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ed-green, var(--petrol)); transition: width .25s ease; }
.ct-step { margin: .7rem 0 1rem; font-size: .84rem; font-weight: 600; color: var(--ed-faint); }
.ct-do { margin-top: 1.3rem; display: grid; gap: .55rem; justify-items: start; }

/* ---- the paper, once it is open, is the whole screen ------------------------------------- */
/* Starting the quiz is a change of place, not a change of section: from that moment the header,
   the tabs, the event's own page and the leaderboard are all things you cannot act on, and on a
   phone they were most of what was on screen. The paper takes the display, the clock sits at the
   top of it, and the button that continues sits at the bottom where a thumb already is. */
.ct-paper.is-full {
	position: fixed;
	inset: 0;
	/* over the sticky site header (40) and the closed menu sheet (39) */
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: none;
	margin: 0;
	padding: 1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
	background: var(--paper);
	overscroll-behavior: contain;
}
/* the paper is full-bleed, its contents are not: a question set across a desktop monitor is a
   question nobody can read */
.ct-paper.is-full > * { width: 100%; max-width: 640px; margin-inline: auto; flex: none; }
/* only the question scrolls — the clock above it and the button below it stay put */
/* The question sits in the middle of what is left, not pinned to the top with a hole under it.
   `safe center` is the whole point of the pair: a question taller than the space centres nowhere
   and starts at the top instead, where plain `center` would clip its first lines out of reach.
   Browsers that do not know the keyword keep `start`. */
.ct-paper.is-full > .ct-questions {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	align-content: start;
	align-content: safe center;
	padding-block: .8rem;
}
/* In the full-screen layer the question is not a card — the screen is the card. A border round it
   inside a border round each option was three nested boxes deep and read as packaging. */
.ct-paper.is-full .ct-q { border: 0; background: none; padding: 0; }
.ct-paper.is-full > .ct-do { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--ed-line); }
/* it is already at the top of its own layer; sticking it to the site header's height would push
   it down past a header that is no longer on screen */
.ct-paper.is-full .ct-head { position: static; top: auto; padding-top: 0; }
html.ct-locked, html.ct-locked body { overflow: hidden; }

@media (max-width: 700px) {
	.ct-paper.is-full > .ct-do { justify-items: stretch; }
	.ct-paper.is-full > .ct-do .ed-btn { width: 100%; min-height: 48px; }
}
/* said once, under the button that does it — not a dialog, which would cost a tap per question */
.ct-oneway { margin: 0; font-size: .78rem; color: var(--ed-faint); }

@media (prefers-reduced-motion: reduce) { .ct-prog-fill { transition: none; } }

@media (max-width: 700px) {
	/* a timed paper whose clock has scrolled off the top is a paper with no clock, so who you are,
	   how long is left and how far through you are ride down the screen with the question */
	.ct-head {
		position: sticky;
		top: var(--ct-top);
		z-index: 5;
		background: var(--paper);
		padding-top: .7rem;
		margin-inline: -.2rem;
		padding-inline: .2rem;
	}
	.ct-q, .ct-paper { scroll-margin-top: calc(var(--ct-top) + 5.5rem); }
	.ct-bar { flex-wrap: wrap; gap: .3rem .8rem; }
	.ct-q { padding: 1rem .9rem; }
	.ct-q-text { font-size: 1.12rem; line-height: 1.35; letter-spacing: -.01em; }
	/* a whole row is the target, not the 13px circle inside it */
	.ct-opt { min-height: 48px; padding: .85rem .8rem; margin-top: .5rem; font-size: 1rem; line-height: 1.35; }
	/* the control aligns to the first line of the label, not to the middle of a two-line one —
	   centring it is what made a wrapped option look knocked out of true */
	.ct-opt input { width: 20px; height: 20px; margin-top: .1em; }
	/* anything under 16px makes iOS zoom the page on focus, and it never zooms back out */
	.ct-input, .ct-door input { font-size: 16px; min-height: 48px; }
	.ct-do { justify-items: stretch; }
	.ct-do .ed-btn { width: 100%; min-height: 48px; }
	.ct-door-do { display: grid; gap: .5rem; }
	.ct-door-do .ed-btn { width: 100%; min-height: 48px; }
	/* Five columns will not fit a phone, and a table that scrolls sideways under your thumb is a
	   table you read half of. Each row becomes a block instead: who and what they scored on the
	   first line, where they are from and how long they took under it. */
	.ct-board { overflow-x: visible; }
	.ct-table { min-width: 0; }
	.ct-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.ct-table tr { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .05rem .7rem; padding: .65rem 0; border-bottom: 1px solid var(--ed-line); align-items: baseline; }
	.ct-table td { border: 0; padding: 0; }
	/* every cell placed by hand: left to auto-placement the score fell in beside the organization
	   and pushed the time onto a third line. Name and score are the line you read; organization
	   and time are the line under it. */
	.ct-table td[data-k="rank"]  { grid-area: 1 / 1 / 3 / 2; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ed-faint); }
	.ct-table td[data-k="name"]  { grid-area: 1 / 2 / 2 / 3; font-weight: 600; overflow-wrap: anywhere; }
	.ct-table td[data-k="score"] { grid-area: 1 / 3 / 2 / 4; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
	.ct-table td[data-k="org"]   { grid-area: 2 / 2 / 3 / 3; font-size: .8rem; color: var(--ed-faint); overflow-wrap: anywhere; }
	.ct-table td[data-k="time"]  { grid-area: 2 / 3 / 3 / 4; text-align: right; font-size: .8rem; color: var(--ed-faint); font-variant-numeric: tabular-nums; }
	.ct-winner { flex-wrap: wrap; gap: .3rem .8rem; }
}

/* ---- the gate pass, as the badge it becomes ------------------------------------------------
   A badge, not a receipt: it hangs from a lanyard, the day it belongs to is printed across the
   top of it, and the name of the person holding it is the biggest thing on the card. The white
   runs all the way round the printed panel, which is what keeps the dark head from dissolving
   into a dark page and what a printed badge is trimmed to. */
.ev-badge {
	width: min(360px, 100%);
	margin: 0 auto;
	padding: 9px;
	background: #fff;
	color: #111;
	--cut: 18px;
	clip-path: var(--chamfer);
	font-family: var(--font-body);
	line-height: 1.5;
	text-align: left;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.ev-badge h1, .ev-badge h2, .ev-badge h3 { color: #111; }

/* the head: the slot it hangs by, and which day this is */
.ev-badge-head { padding: .95rem 1.15rem 1.2rem; background: #0a0d10; color: #fff; }
.ev-badge-slot { width: 88px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .3); margin: 0 auto 1.05rem; }
.ev-badge-kind { font-size: .61rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.ev-badge-kind b { color: var(--cr-accent, #e11d48); font-weight: 700; }
.ev-badge-event, .ev-badge-head h1, .ev-badge-head h2, .ev-badge-head h3 { margin: .5rem 0 .3rem; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; color: #fff; }
.ev-badge-when { margin: 0; font-size: .76rem; color: rgba(255, 255, 255, .6); }

/* the holder, which is what a badge is for */
.ev-badge-who { padding: 1.2rem 1.15rem 1.15rem; }
.ev-badge-name { margin: 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.08; letter-spacing: -.01em; }
.ev-badge-org { margin: .35rem 0 0; font-size: .86rem; color: #666; }

/* the half the steward reads: the code is the thing being held up, so it sits in the middle of
   the card with its number under it, the way a ticket is presented rather than filed */
.ev-badge-code { display: grid; justify-items: center; text-align: center; gap: .75rem; padding: 1.35rem 1.15rem 1.2rem; border-top: 1px dashed #d5d5d5; }
/* The code is drawn as strokes one module wide. Displayed at anything other than its own size
   the browser anti-aliases those edges, the modules bleed into each other, and a camera sees
   grey porridge — the picture looked fine and would not scan. crispEdges keeps every module a
   hard square at whatever size it is asked for. */
.ev-badge-qr svg { width: 168px; height: 168px; display: block; shape-rendering: crispEdges; }
.ev-badge-no { font-family: var(--hb-mono, ui-monospace, "Courier New", monospace); font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; color: #111; }
.ev-badge-state { display: inline-block; margin-top: .5rem; padding: .22rem .5rem; border: 1px solid #111; font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #111; }
.ev-badge-note { margin: 0; padding: 0 1.4rem 1.25rem; font-size: .72rem; line-height: 1.5; color: #8c8c8c; text-align: center; }
.ev-badge-foot { padding: .8rem 1.15rem; border-top: 1px dashed #d5d5d5; font-size: .75rem; color: #666; }
.ev-badge-foot a { color: #111; }
/* through the gate: the code is spent, and the badge says so without becoming unreadable */
.ev-badge.is-used .ev-badge-state { border-color: #9a9a9a; color: #9a9a9a; }
.ev-badge.is-used .ev-badge-qr { opacity: .32; filter: grayscale(1); }
.ev-badge-small { width: 100%; }

/* what to do with it: take a copy, or print one */
.ev-badge-tools { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.ev-badge-tools .ed-btn { padding: .6rem 1.1rem; font-size: .87rem; }
.ev-badge-away { margin: .9rem 0 0; text-align: center; }

/* on paper it is the only thing on the page, on paper's own colour rather than the screen's */
@media print {
	html, body, body.page-dark { background: #fff; }
	.site-header, .site-footer, .ed-tabs, .ev-badge-tools, .ev-badge-away { display: none; }
	.ev-body { padding: 0; }
	.ev-badge { width: 340px; margin: 0 auto; }
}
/* ==========================================================================================
   `theme-month`: the awareness month landing page's colours, on a dark page

   Worn by every public page — the campaigns, the events and passes, the news, the organizations,
   verify and the door — while the Awareness Month page is the site's face, and not once it is
   switched back: they ask `month_theme` for it, which csat/navigation.py puts on every page's context. The design is the
   same dark one as the rest of `page-dark`; only the palette changes, to the harbour teal on cool
   grounds that the landing page wears (public/landing_month.css). Nothing but these tokens is
   restated: the site's own aliases (`--paper`, `--petrol`, the `--ed-` set) are declared on this
   same element by `page-dark` above and resolve against whatever it holds, so they follow.

   It is a class rather than a rule on `campaign-page`, so a page that should keep its own face
   simply does not ask for it.

   A campaign that carries its own accent colour still wins where `--camp` is used — that is the
   campaign's own mark, and this is the page around it.
   ========================================================================================== */
body.theme-month.page-dark {
	--cr-page: #0a151b;
	/* the crimson mark turned to the month's teal; the eye keeps its white and black */
	--brand-filter: hue-rotate(186deg) saturate(.95) brightness(1.08);
	--cr-card: #10212a;
	--cr-card-2: #152a35;
	--cr-line: #213845;
	--cr-line-soft: #182e39;

	--cr-ink: #e7f0f3;
	--cr-ink-2: #c0d0d7;
	--cr-muted: #8ea5b0;         /* 7.2:1 on the page */
	--cr-faint: #7f96a1;

	--cr-accent: #2dd4bf;
	--cr-accent-text: #5eead4;   /* 11:1 on the page */
	--cr-accent-solid: #2dd4bf;  /* the dark ink below on it: 9:1 */
	--cr-accent-hover: #5eead4;
	--cr-accent-active: #14b8a6;
	--cr-accent-soft: rgba(45, 212, 191, .16);
	--cr-accent-ink: #042f2b;
	--cr-on-accent: #042f2b;

	--cr-footer-fg: #c0d0d7;
	--cr-footer-muted: #8ea5b0;
	--cr-footer-line: #1d313c;

	--cr-field: #0b1a20;
	--cr-field-border: #2c4350;
	--cr-field-ring: rgba(45, 212, 191, .32);
}

/* `theme-ncsm`: the National Cyber Security Month's colours — its logo's blue, violet and coral
   on a deep indigo ground (public/landing_ncsm.css) — worn by the same pages the same way while
   that design is the site's face. The logo's own shield replaces the brand mark (csat_web.html),
   so the mark is drawn as it is rather than turned. */
body.theme-ncsm.page-dark {
	--cr-page: #0b0e24;
	--brand-filter: brightness(1.25) saturate(1.1);
	--cr-card: #131739;
	--cr-card-2: #191e46;
	--cr-line: #29305c;
	--cr-line-soft: #1d2349;

	--cr-ink: #eef0ff;
	--cr-ink-2: #c3c8e8;
	--cr-muted: #9ca3c9;         /* 7.4:1 on the page */
	--cr-faint: #8a91ba;

	/* the logo's first colour, lifted to read on the dark ground; another logo's through csat/brand.py */
	--cr-accent: var(--nc-accent-dk, #7aa8ff);
	--cr-accent-text: var(--nc-accent-dk-text, #8ab2ff);   /* 8.4:1 on the page */
	--cr-accent-solid: var(--nc-accent-dk, #7aa8ff);  /* the dark ink below on it: 8:1 */
	--cr-accent-hover: var(--nc-accent-dk-hover, #a2c2ff);
	--cr-accent-active: var(--nc-accent-dk-active, #5b8ff0);
	--cr-accent-soft: var(--nc-accent-dk-soft, rgba(122, 168, 255, .16));
	--cr-accent-ink: #0b1433;
	--cr-on-accent: #0b1433;

	--cr-footer-bg: #070919;
	--cr-footer-fg: #c3c8e8;
	--cr-footer-muted: #9ca3c9;
	--cr-footer-line: #232a5a;

	--cr-field: #0d1130;
	--cr-field-border: #343b6b;
	--cr-field-ring: var(--nc-accent-dk-ring, rgba(122, 168, 255, .32));
}

/* …and in light, like the month's own home page: every public page but the door opens on the
   home page's light ground, whatever the system says, and turns to the indigo above when the
   visitor switches to dark from the header, or when the month is set to open dark (csat/brand.py). The ink is the logo's
   indigo, the accent its first colour (csat/brand.py), the footer the night the home page ends on,
   and a faint wash of the logo's two ends lies across the top of each page. The pages' own dark
   layout rules (`page-dark`) read these tokens, so they follow without being restyled. The login
   page keeps the indigo: its globe is drawn for a dark ground. */
html:not([data-theme="dark"]):has(> body.theme-ncsm.campaign-page) { color-scheme: light; background: #f7f8fd; }
html:not([data-theme="dark"]) body.theme-ncsm.campaign-page.page-dark {
	color-scheme: light;
	--brand-filter: none;

	--cr-page: #f7f8fd;
	--cr-card: #ffffff;
	--cr-card-2: #eef1fa;
	--cr-line: #e1e5f1;
	--cr-line-soft: #ebeef7;

	--cr-ink: #10143a;
	--cr-ink-2: #2e3358;
	--cr-muted: #50577c;         /* 6.8:1 on the page */
	--cr-faint: #5b6286;         /* 5.8:1 */

	--cr-accent: var(--nc-accent, #2459c0);
	--cr-accent-text: var(--nc-accent, #2459c0);   /* 6:1 on the page */
	--cr-accent-solid: var(--nc-accent, #2459c0);  /* white on it: 6.4:1 */
	--cr-accent-hover: var(--nc-accent-hover, #1d4aa3);
	--cr-accent-active: var(--nc-accent-active, #183d87);
	--cr-accent-soft: var(--nc-accent-soft, #e3ebfb);
	--cr-accent-ink: #ffffff;
	--cr-on-accent: #ffffff;

	--cr-good: #1e7e34;
	--cr-good-text: #1b6f2e;
	--cr-good-soft: #e3f3e7;
	--cr-warn: #b7791f;
	--cr-warn-text: #8a5a0f;
	--cr-warn-soft: #fbf0d9;
	--cr-danger: #c0392b;
	--cr-danger-soft: #fbe6e3;

	--cr-footer-bg: #0c1030;
	--cr-footer-fg: #c3c8e8;
	--cr-footer-muted: #9ca3c9;
	--cr-footer-line: #20275a;

	--cr-field: #ffffff;
	--cr-field-border: #c9cfe3;
	--cr-field-ring: var(--nc-accent-ring, rgba(36, 89, 192, .28));

	background:
		radial-gradient(60rem 26rem at 88% -6rem, color-mix(in srgb, var(--nc-c3, #d8636f) 9%, transparent), transparent 70%),
		radial-gradient(56rem 28rem at 8% -8rem, color-mix(in srgb, var(--nc-c1, #2f6fd6) 11%, transparent), transparent 70%),
		var(--cr-page);
	background-repeat: no-repeat;
}
/* the dark face wears the same wash, fainter, over its indigo */
html[data-theme="dark"] body.theme-ncsm.campaign-page.page-dark {
	background:
		radial-gradient(60rem 26rem at 88% -6rem, color-mix(in srgb, var(--nc-c3, #d8636f) 12%, transparent), transparent 70%),
		radial-gradient(56rem 28rem at 8% -8rem, color-mix(in srgb, var(--nc-c1, #2f6fd6) 16%, transparent), transparent 70%),
		var(--cr-page);
	background-repeat: no-repeat;
}
html[data-theme="dark"] body.theme-ncsm.campaign-page .site-header,
html[data-theme="dark"] body.theme-ncsm.campaign-page .hero { background: transparent; }

/* a campaign's own accent gives way to the month's while the month is the site's face, so the
   campaign pages' tabs, bars and eyebrows are the same blue as everything round them */
body.theme-ncsm.campaign-page { --camp: var(--cr-accent); }
/* the header and the page heads sit on the wash rather than on a band of their own; the capsule
   is the light glass here, the dark glass on the dark face (below, with the header) */
html:not([data-theme="dark"]) body.theme-ncsm.campaign-page .site-header,
html:not([data-theme="dark"]) body.theme-ncsm.campaign-page .hero { background: transparent; }
html:not([data-theme="dark"]) body.theme-ncsm.campaign-page.palette-ncsm .header-row { background: linear-gradient(120deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .55)); }
/* photographs are shown in colour on a light page: the grey they wear on the dark one was to keep
   them from glaring */
html:not([data-theme="dark"]) body.theme-ncsm.campaign-page .ed-camp-figure { filter: none; }


/* ---------- the theme switch ---------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; font: inherit; }
.theme-toggle:hover { border-color: var(--petrol); color: var(--petrol); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .when-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .when-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .when-light { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .when-dark { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .when-light { display: none; }
}
/* images on the dark ground: a hair dimmer, so a white poster does not glare */
:root[data-theme="dark"] .ed-camp-figure, :root[data-theme="dark"] .ed-hero-figure { filter: brightness(.9); }
/* the footer is dark on both grounds, so its mark takes the dark ground's crimson */
.site-footer .brand-mark { opacity: .95; }
/* the tinted top rows of a board keep ink for every cell */
.board tr[class*="board-top"] td { color: var(--ink); }

/* ---------- the way in ----------
   A door, not a room: no header, no footer, nothing to navigate. The screen is split — the
   argument on the left with the sphere turning behind it, the form on the right — and below the
   width where two columns stop being two columns, the stage steps aside and the form has the
   page. Three panels in one card (log in, a new password, an account), chosen by the address's
   hash, so /login#signup and a password e-mail's link open on the right one. */
.lg-page { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 100vh; }

.lg-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	padding: 2.4rem 3rem 2.8rem;
	background: var(--paper);
	overflow: hidden;
}
/* the sphere and the sentence it makes are one object: the words stand in the middle of it, and
   the points behind them are put out by a well rather than a box, so the sphere still looks like
   it goes all the way through */
/* as big as the column will carry: the height budget is what actually binds on a laptop, so it
   is in the min() along with the width, and the sphere is allowed to sit a little proud of the
   stage's padding rather than being kept politely inside it */
.lg-orb-wrap { position: relative; width: min(760px, 116%, 76vh); aspect-ratio: 1; align-self: center; flex: none; }
.lg-orb { display: block; width: 100%; height: 100%; }
.lg-say {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	padding: 0 13%;
	text-align: center;
	/* the field belongs to the sphere: the words must not take the pointer off it */
	pointer-events: none;
}
.lg-say::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 78%;
	height: 54%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, var(--paper) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 44%, transparent 76%);
	filter: blur(7px);
}
.lg-say b, .lg-say span { position: relative; }
.lg-say b { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.7rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.lg-say span { font-size: .92rem; line-height: 1.6; color: var(--muted); }
.lg-foot-note { margin: 0; max-width: 46ch; font-size: .82rem; line-height: 1.6; color: var(--cr-faint, var(--muted)); }
.lg-brand {
	display: inline-flex;
	align-items: center;
	gap: .1em;
	align-self: flex-start;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -.01em;
	color: var(--ink);
	text-decoration: none;
}

.lg-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.4rem;
	padding: 3rem 3rem 2.4rem;
	background: var(--surface);
	border-left: 1px solid var(--line);
}
.lg-card { width: 100%; max-width: 24rem; margin: 0 auto; }
.lg-brand-small { display: none; margin-bottom: 2rem; font-size: 1.05rem; }
.lg-away { margin: 0; text-align: center; font-size: .86rem; }
.lg-away a { color: var(--muted); text-decoration: none; }
.lg-away a:hover { color: var(--ink); }

.login-panel h2 { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.login-sub { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0 0 1.6rem; }
.login-label { display: block; font-weight: 600; font-size: .84rem; margin: 0 0 .45rem; }
.login-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.login-label-row .login-link { font-size: .82rem; }
.login-input {
	width: 100%;
	font: inherit;
	font-size: .95rem;
	padding: .8rem .9rem;
	margin: 0 0 1.15rem;
	color: var(--ink);
	background: var(--cr-field, var(--paper));
	border: 1px solid var(--line);
	border-radius: 0;
}
.login-input::placeholder { color: var(--cr-faint, var(--muted)); }
.login-input:focus { outline: 0; border-color: var(--cr-accent); box-shadow: 0 0 0 3px var(--cr-field-ring); }
.login-pw { position: relative; }
.login-pw .login-input { padding-right: 4.6rem; }
.login-eye {
	position: absolute;
	top: .5rem;
	right: .5rem;
	padding: .35rem .6rem;
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	color: var(--muted);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.login-eye:hover { color: var(--ink); }
.login-submit { width: 100%; margin-top: .35rem; cursor: pointer; }
.login-submit[disabled] { opacity: .7; cursor: progress; }
.login-foot { margin: 1.5rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.55; color: var(--muted); text-align: center; }
.login-link { color: var(--cr-accent-text, var(--petrol)); font-weight: 600; text-decoration: none; }
.login-link:hover { text-decoration: underline; }
.login-back { display: inline-block; margin-bottom: 1.1rem; font-size: .86rem; }
.login-alert {
	margin: 0 0 1.1rem;
	padding: .75rem .9rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ink);
	background: var(--cr-danger-soft);
	border-left: 3px solid var(--danger);
}
.login-alert.ok { background: var(--cr-good-soft, var(--petrol-soft)); border-left-color: var(--ok); }
.login-alert[hidden], .login-panel[hidden] { display: none; }

@media (max-width: 900px) {
	/* below two columns the stage steps aside: a door does not need an argument beside it */
	.lg-page { grid-template-columns: 1fr; }
	.lg-stage { display: none; }
	.lg-panel { border-left: 0; padding: 2.4rem 1.25rem; justify-content: flex-start; }
	.lg-brand-small { display: inline-flex; }
}

/* ==========================================================================================
   Four habits, four at a time

   A tab set: the four habits are a list you can see the whole of, and the one you pick opens its
   detail beside a stage that shows its scene. Nothing here depends on scroll position — the shape
   this replaced spent four screens on four short ideas, and centred each of them in a box a screen
   tall, which put half a screen of nothing under the section's own heading and another gap between
   every pair.

   Each scene plays on a device. The frame is dark metal on both grounds, because a laptop is a
   laptop; the screen inside follows the site's theme, because that is what a screen does. Frames
   are sized in per-cent of their own box — an aspect-ratio keeps them in proportion — and screen
   contents in em off a font-size taken from the screen's own width, so a scene shrinks whole
   rather than losing its layout.

   Three things this section has to survive:
     · no JavaScript — every panel is open, and the four scenes sit in the flow, still complete;
     · reduced motion — every scene jumps to its end state, which is the state that says the
       thing (flagged, strong, patched, warned);
     · being off-screen — the stage is paused, not animating to nobody.
   ========================================================================================== */

.habits { position: relative; --hb-t: 9s; --hb-mono: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* the opening: heading and standfirst together, with weight, and the list starting right under
   them rather than half a screen down */
.habits .section-head { margin-bottom: .55rem; }
.habits .section-head h2 { font-size: clamp(1.8rem, 3.1vw, 2.5rem); line-height: 1.1; max-width: 20ch; }
.habits .hb-intro { color: var(--muted); max-width: 58ch; margin: 0 0 1.35rem; font-size: 1.02rem; }

.hb-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; }

/* No minimum height on a habit: it is exactly as tall as what is in it, so a closed one is a
   heading and a line and nothing else. Giving each of them room to be scrolled through was the
   thought behind a minimum, and it is the wrong trade — it buys the scroll a little more travel and
   pays for it with a pocket of empty space under every habit that is not open, which is the same
   hole the four-screen version had, just cut into four. The picker copes: the line finds whichever
   habit it is inside, and a compact list simply moves through them sooner. */

/* ---- the four, as a list ----------------------------------------------------------------
   Rules between them rather than a track down the side: with all four on the page the structure is
   the list itself, and a hairline per row says where one habit ends and the next starts without
   drawing a second thing to look at. */
.hb-list { border-top: 1px solid var(--line); }
.hb-item { border-bottom: 1px solid var(--line); }

.hb-item-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .15rem 1.15rem;
	width: 100%;
	padding: .9rem .2rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.hb-no { grid-row: span 2; font-family: var(--hb-mono); font-size: .84rem; letter-spacing: .14em; color: var(--cr-faint); padding-top: .5rem; transition: color .3s ease; }
.hb-verb { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; color: var(--muted); transition: color .3s ease; }
.hb-item-head .hb-lead { margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--cr-faint); transition: color .3s ease; }

.hb-item-head:hover .hb-verb, .hb-item-head:focus-visible .hb-verb { color: var(--ink); }
.hb-item.is-open .hb-no { color: var(--petrol); }
.hb-item.is-open .hb-verb { color: var(--ink); }
.hb-item.is-open .hb-item-head .hb-lead { color: var(--cr-ink-2); }

.hb-item-inner { --hb-indent: calc(1.15rem + 2.4ch); }
.hb-text { margin: 0 0 .9rem var(--hb-indent); font-size: 1.02rem; line-height: 1.55; color: var(--muted); max-width: 54ch; }
.hb-tell { display: flex; gap: .9rem; align-items: baseline; margin: 0 0 1.15rem var(--hb-indent); max-width: 44ch; padding-left: 1.1rem; border-left: 2px solid var(--amber); font-size: 1rem; line-height: 1.5; color: var(--cr-ink-2); }
.hb-tell span { flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--amber); }

/* ---- the runway, and what is held still on it --------------------------------------------
   The grid is pinned for the whole of the four: it arrives, stops, deals the habits out one after
   another as the runway scrolls past under it, and is let go once the fourth has had its turn. The
   runway's height is set by the script — it is what is pinned plus three turns, and only the
   browser knows the first of those.

   Part of the enhanced form. With no script there is no runway height, no sticky, and the grid is
   simply a grid: every panel open, every scene in the flow, the whole section readable in one pass.
   Sticky rather than fixed, so it releases itself at the foot of its own runway with nothing
   watching the scroll to tell it to. */
[data-hb-ready] .hb-pin-inner { position: sticky; top: var(--hb-pin-top, var(--hb-top, 104px)); }

/* ---- the stage --------------------------------------------------------------------------
   A fixed height, so switching habits never moves the page under the hand that switched them, and
   stuck under the site header so it is still there when the habit three rows down takes its turn.
   --hb-top is that header's height, measured by the script rather than assumed, because the bar
   grows when its nav wraps. */
/* The laptop's base is drawn wider than its lid on purpose (113%, pulled left), which is fine
   until the stage is as wide as a phone and the foot hangs 3px past the page. `clip`, not
   `hidden`: this section is sticky-pinned, and `hidden` would make it a scroll container and take
   the pinning with it. */
.hb-stage { position: relative; height: min(460px, 52vh); overflow-x: clip; }
.hb-sim { margin: 0 0 2.5rem; height: 520px; display: flex; align-items: center; justify-content: center; }
.hb-sim:last-child { margin-bottom: 0; }

/* everything from here is the enhanced form, and only exists once the script has run. Note which
   way round that is: the plain state is every panel open and every scene in the flow, and this is
   what closes them down to one — so nothing is ever behind a click that was never wired up. */
[data-hb-ready] .hb-item-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .42s cubic-bezier(.2, .7, .3, 1);
}
[data-hb-ready] .hb-item.is-open .hb-item-body { grid-template-rows: 1fr; }
/* Two things a 0fr row will not close over, both of them here. Its automatic minimum size is its
   min-content size, so it stops at the tallest line of the paragraph inside — hence min-height:0.
   And its own padding is not part of the row at all, so a padding-bottom on this box leaves the
   panel 24px tall with a clipped line showing — hence no padding here, and the indent and the space
   under the tell carried by the two paragraphs themselves. */
[data-hb-ready] .hb-item-inner { overflow: hidden; min-height: 0; }

[data-hb-ready] .hb-sim {
	position: absolute;
	inset: 0;
	height: auto;
	margin: 0;
	opacity: 0;
	transform: translateY(16px) scale(.985);
	transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}
[data-hb-ready] .hb-sim.is-on { opacity: 1; transform: none; }

/* A scene only animates while it is the one being shown. This needs !important: every animated
   element sets the `animation` shorthand, which resets animation-play-state to running, and the
   shorthand wins an equal-specificity tie by coming later in the file. The script also drives the
   same thing through the Web Animations API, which is what actually rewinds a scene to its first
   frame when it takes over; this rule is the floor under browsers that have no getAnimations. */
[data-hb-ready] .hb-sim:not(.is-on) * { animation-play-state: paused !important; }

@media (max-width: 900px) {
	/* Stacked, the stage goes above the list it belongs to — it has to be the thing that stays on
	   screen — and gives height back, since the header and a stage between them can eat the view. */
	.hb-grid { grid-template-columns: 1fr; gap: 1.4rem; }
	[data-hb-ready] .hb-stage-col { order: -1; }
	.hb-stage { height: min(320px, 38vh); }
	[data-hb-ready] .hb-item { min-height: 0; }
	.habits .hb-intro { font-size: 1rem; margin-bottom: 1.8rem; }
	.hb-verb { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
	.hb-item-head .hb-lead { font-size: .98rem; }
	.hb-text { font-size: 1rem; }
}

/* ---- the close: the four habits were the trailer --------------------------------------- */
.hb-close { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 1rem; text-align: center; }
.hb-close .eyebrow { margin-bottom: .9rem; }
.hb-close h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin: 0 0 1rem; }
.hb-close p { font-size: 1.1rem; line-height: 1.6; color: var(--muted); margin: 0 auto 2rem; }
.hb-close .btn { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7); }
.hb-close-note { display: block; margin-top: 1.1rem; font-size: .88rem; color: var(--cr-faint); }

/* it arrives once, on the way in, a line at a time */
[data-hb-ready] .hb-close > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1);
}
[data-hb-ready] .hb-close.is-in > * { opacity: 1; transform: none; }
[data-hb-ready] .hb-close.is-in > :nth-child(2) { transition-delay: .09s }
[data-hb-ready] .hb-close.is-in > :nth-child(3) { transition-delay: .18s }
[data-hb-ready] .hb-close.is-in > :nth-child(4) { transition-delay: .29s }
[data-hb-ready] .hb-close.is-in > :nth-child(5) { transition-delay: .38s }

/* ---- the devices ----------------------------------------------------------------------- */
.dev { max-width: 100%; }

/* a laptop: lid, camera, screen, and the base it folds onto */
.dev-pc { width: 100%; max-width: 700px; }
.pc-lid {
	position: relative;
	container-type: inline-size;
	padding: 2.5% 1.9% 3%;
	border-radius: 2.2% / 3.4%;
	background: linear-gradient(180deg, #474a54, #2c2e35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 26px 50px -30px rgba(0, 0, 0, .85);
}
.pc-cam { position: absolute; top: .95%; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #14151a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pc-screen {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 3px;
	background: var(--surface);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
	/* a screen's contents are sized off the screen, not off the page: em everywhere below, and
	   this one number carries the whole scene when the stage grows or shrinks. cqw is read from
	   the frame around it — an element is never its own container — with a px fallback */
	font-size: 13px;
	font-size: 2.32cqw;
}
.pc-base { position: relative; height: 12px; width: 113%; margin-left: -6.5%; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #565963, #34363d 55%, #212329); box-shadow: 0 14px 22px -16px rgba(0, 0, 0, .95); }
.pc-base span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15%; height: 4px; border-radius: 0 0 4px 4px; background: rgba(0, 0, 0, .38); }

/* a phone: island, screen, home bar, and the three keys down its sides */
.dev-phone { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.ph-body {
	position: relative;
	container-type: inline-size;
	height: 100%;
	aspect-ratio: 9 / 19;
	padding: 3.1%;
	border-radius: 14% / 6.6%;
	background: linear-gradient(150deg, #5c5f68, #24262c 42%, #3d4048);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 52px -28px rgba(0, 0, 0, .9);
}
.ph-screen {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12% / 5.6%;
	background: var(--surface);
	font-size: 11px;
	font-size: 4.3cqw;
}
.ph-island { position: absolute; z-index: 3; top: 1.75%; left: 50%; transform: translateX(-50%); width: 31%; height: 3.5%; border-radius: 999px; background: #0b0c0f; }
.ph-home { position: absolute; z-index: 3; bottom: 1.15%; left: 50%; transform: translateX(-50%); width: 34%; height: .5%; min-height: 3px; border-radius: 999px; background: var(--cr-ink); opacity: .35; }
.ph-key { position: absolute; width: 1.3%; min-width: 2px; border-radius: 999px; background: linear-gradient(180deg, #52555e, #2b2d33); }
.ph-vol-a { left: -1%; top: 20%; height: 6.5% }
.ph-vol-b { left: -1%; top: 28.5%; height: 6.5% }
.ph-pwr   { right: -1%; top: 25%; height: 10% }

.ph-status { flex: none; display: flex; align-items: center; gap: .42em; height: 3.15em; padding: 0 1.7em; color: var(--ink); }
.ph-status b { margin-right: auto; font-family: var(--hb-mono); font-size: .82em; font-weight: 700; }
.ph-i-sig { width: 1.15em } .ph-i-wifi { width: 1.05em } .ph-i-bat { width: 1.6em }
.ph-app { flex: none; display: flex; align-items: baseline; gap: .45em; padding: .1em 1.15em .7em; font-size: 1.15em; font-weight: 600; color: var(--ink); }
.ph-app span { color: var(--petrol); font-size: 1.25em; line-height: 1; }

/* the glass, on both devices */
.pc-screen::after, .ph-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(102deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 44%);
}

/* ---- the app window on the laptop's screen --------------------------------------------- */
.hb-win { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--surface); }
.hb-win-bar { flex: none; display: flex; align-items: center; gap: .8em; padding: .55em .95em; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hb-dots { display: flex; gap: .35em; }
.hb-dots i { display: block; width: .58em; height: .58em; border-radius: 50%; background: var(--line); }
.hb-dots i:nth-child(1) { background: #ff5f57 } .hb-dots i:nth-child(2) { background: #febc2e } .hb-dots i:nth-child(3) { background: #28c840 }

.sim-caption { position: relative; margin: .8em 0 0; font-size: .92em; min-height: 2.4em; }
.sim-caption span, .sim-caption b { position: absolute; left: 0; top: 0; right: 0; }
.sim-caption span { color: var(--muted); animation: hb-cap-out var(--hb-t) linear infinite both; }
.sim-caption b { color: var(--ok); font-weight: 600; opacity: 0; animation: hb-cap-in var(--hb-t) linear infinite both; }
/* the two lines sit on top of each other, so the swap must not overlap: the first is gone before
   the second starts, or the reader gets both at once and can read neither */
@keyframes hb-cap-out { 0%, 60% { opacity: 1 } 66%, 100% { opacity: 0 } }
@keyframes hb-cap-in  { 0%, 67% { opacity: 0 } 73%, 100% { opacity: 1 } }

/* ---- 01 Recognize · laptop: the name is not the address -------------------------------- */
.sim-mail-body { position: relative; flex: 1; padding: 1.15em 1.3em 2.6em; }
.sim-from { display: flex; align-items: flex-start; gap: .7em; }
.sim-avatar { flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--petrol-soft); color: var(--petrol); display: grid; place-items: center; font-size: .78em; font-weight: 700; }
.sim-from-txt { display: flex; flex-direction: column; min-width: 0; }
.sim-from-txt b { font-size: 1.05em; line-height: 1.3; }
.sim-addr {
	align-self: flex-start;
	margin-top: .35em;
	padding: .15em .45em;
	border: 1px solid var(--line);
	border-radius: .3em;
	background: var(--surface-2);
	font-family: var(--hb-mono);
	font-size: .82em;
	color: var(--muted);
	white-space: nowrap;
	animation: sim-addr var(--hb-t) linear infinite both;
}
.sim-addr em { font-style: normal; font-weight: 700; color: var(--cr-danger); }
.sim-flag { margin-left: auto; flex: none; padding: .3em .55em; border-radius: .25em; background: var(--cr-danger-soft); color: var(--cr-danger); font-size: .68em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; animation: sim-flag var(--hb-t) cubic-bezier(.2, 1.3, .4, 1) infinite both; }
.sim-subject { margin: 1em 0 .9em; font-size: 1.08em; font-weight: 600; color: var(--ink); }
.sim-line { display: block; height: .55em; border-radius: .3em; background: var(--line-soft); margin-bottom: .5em; }
.sim-line.w90 { width: 90% } .sim-line.w85 { width: 85% } .sim-line.w72 { width: 72% }
.sim-line.w58 { width: 58% } .sim-line.w40 { width: 40% }
.sim-btn { display: inline-block; margin-top: .8em; padding: .5em 1em; border-radius: .3em; background: var(--petrol-solid); color: var(--on-accent); font-size: .92em; font-weight: 600; animation: sim-btn var(--hb-t) linear infinite both; }
.sim-status { position: absolute; left: 0; right: 0; bottom: 0; padding: .4em 1.3em; background: var(--surface-2); border-top: 1px solid var(--line-soft); font-family: var(--hb-mono); font-size: .78em; color: var(--cr-danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: sim-status var(--hb-t) cubic-bezier(.2, .8, .3, 1) infinite both; }
.sim-cursor {
	position: absolute;
	width: 1em;
	height: 1.4em;
	background: var(--ink);
	clip-path: polygon(0 0, 0 100%, 26% 76%, 45% 100%, 62% 91%, 43% 65%, 78% 60%);
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
	animation: sim-cursor var(--hb-t) cubic-bezier(.5, 0, .3, 1) infinite both;
}
@keyframes sim-cursor {
	0%,  6%   { left: 74%; top: 78% }
	17%, 32%  { left: 32%; top: 15% }
	44%, 66%  { left: 24%; top: 70% }
	78%, 100% { left: 74%; top: 78% }
}
@keyframes sim-addr   { 0%, 15% { opacity: 0; transform: translateY(-5px) } 24%, 100% { opacity: 1; transform: none } }
@keyframes sim-status { 0%, 46% { opacity: 0; transform: translateY(100%) } 55%, 100% { opacity: 1; transform: none } }
@keyframes sim-btn    { 0%, 48% { box-shadow: 0 0 0 0 var(--cr-danger-soft) } 58%, 100% { box-shadow: 0 0 0 .25em var(--cr-danger-soft) } }
@keyframes sim-flag   { 0%, 72% { opacity: 0; transform: scale(.6) rotate(-8deg) } 82%, 100% { opacity: 1; transform: none } }

/* ---- 02 Protect · phone: eight characters, then four words, then the second step -------- */
.sim-lock-body { flex: 1; padding: .6em 1.2em 1.4em; display: flex; flex-direction: column; gap: .6em; }
.sim-signin { margin-top: auto; padding: .95em; border-radius: .5em; text-align: center; font-weight: 600; animation: sim-signin var(--hb-t) linear infinite both; }
@keyframes sim-signin { 0%, 90% { background: var(--line-soft); color: var(--muted) } 97%, 100% { background: var(--cr-accent-solid); color: var(--on-accent) } }
.sim-label { font-size: .74em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sim-field { display: flex; align-items: center; height: 3.3em; padding: 0 .7em; border: 1px solid var(--cr-field-border); border-radius: .45em; background: var(--cr-field); overflow: hidden; }
.sim-mask { height: .8em; background: radial-gradient(circle at .35em 50%, var(--cr-ink-2) .27em, transparent .31em) 0 0 / 1.05em .8em repeat-x; animation: sim-mask var(--hb-t) cubic-bezier(.3, .8, .4, 1) infinite both; }
.sim-caret { flex: none; width: 1.5px; height: 1.4em; margin-left: .15em; background: var(--petrol-solid); animation: sim-caret 1.05s steps(1, end) infinite both; }
.sim-meter { height: .45em; border-radius: .25em; background: var(--line-soft); overflow: hidden; }
.sim-meter i { display: block; height: 100%; border-radius: .25em; animation: sim-meter var(--hb-t) linear infinite both; }
.sim-verdict { position: relative; display: block; height: 1.4em; font-size: .95em; }
.sim-verdict b { position: absolute; left: 0; top: 0; font-weight: 600; }
.sim-verdict .v-weak { color: var(--cr-danger); animation: sim-weak var(--hb-t) linear infinite both; }
.sim-verdict .v-strong { color: var(--ok); animation: sim-strong var(--hb-t) linear infinite both; }
.sim-mfa { margin-top: .5em; padding-top: 1em; border-top: 1px dashed var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6em; animation: sim-mfa var(--hb-t) cubic-bezier(.2, .8, .3, 1) infinite both; }
.sim-mfa .sim-label { grid-column: 1 / -1; }
.sim-otp { display: flex; gap: .3em; }
.sim-otp i { width: 2.4em; height: 3em; display: grid; place-items: center; border: 1px solid var(--cr-field-border); border-radius: .35em; background: var(--cr-field); font-family: var(--hb-mono); font-style: normal; font-size: 1.05em; animation: sim-otp var(--hb-t) linear infinite both; }
.sim-otp i:nth-child(2) { animation-delay: .07s } .sim-otp i:nth-child(3) { animation-delay: .14s }
.sim-otp i:nth-child(4) { animation-delay: .21s } .sim-otp i:nth-child(5) { animation-delay: .28s }
.sim-otp i:nth-child(6) { animation-delay: .35s }
.sim-ok { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: var(--cr-good-soft); color: var(--ok); font-size: .95em; font-weight: 700; animation: sim-ok var(--hb-t) cubic-bezier(.2, 1.4, .4, 1) infinite both; }
@keyframes sim-mask   { 0% { width: 0 } 22%, 30% { width: 32% } 34% { width: 0 } 56%, 100% { width: 92% } }
@keyframes sim-meter  {
	0%       { width: 0;    background: var(--cr-danger) }
	22%, 32% { width: 24%;  background: var(--cr-danger) }
	34%      { width: 0;    background: var(--cr-warn) }
	56%,100% { width: 100%; background: var(--cr-good) }
}
@keyframes sim-weak   { 0%, 18% { opacity: 0 } 24%, 32% { opacity: 1 } 38%, 100% { opacity: 0 } }
@keyframes sim-strong { 0%, 54% { opacity: 0 } 62%, 100% { opacity: 1 } }
@keyframes sim-mfa    { 0%, 66% { opacity: 0; transform: translateY(10px) } 76%, 100% { opacity: 1; transform: none } }
@keyframes sim-otp    { 0%, 76% { color: transparent; border-color: var(--cr-field-border) } 84%, 100% { color: var(--ink); border-color: var(--cr-accent-solid) } }
@keyframes sim-ok     { 0%, 88% { opacity: 0; transform: scale(.5) } 96%, 100% { opacity: 1; transform: none } }
@keyframes sim-caret  { 0%, 49% { opacity: 0 } 50%, 100% { opacity: 1 } }

/* ---- 03 Update · phone: a published hole, then no hole --------------------------------- */
.sim-patch-body { flex: 1; padding: .5em 1.1em 1.4em; display: flex; flex-direction: column; gap: .6em; }
.sim-patch-body > .sim-caption:last-child { margin-top: auto; }
.sim-tally { margin: 0 0 .1em; min-height: 1.6em; font-size: .82em; }
.sim-dev { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6em; padding: .75em .85em; border: 1px solid var(--line); border-radius: .5em; overflow: hidden; }
.sim-dev-name { font-size: .98em; font-weight: 600; }
.sim-ver { display: flex; gap: .3em; font-family: var(--hb-mono); font-size: .8em; color: var(--muted); }
.sim-ver i { font-style: normal; }
.sim-ver .to { color: var(--ok); font-weight: 700; animation: sim-to var(--hb-t) linear infinite both; }
.sim-dot { width: .75em; height: .75em; border-radius: 50%; background: var(--cr-good); }
.sim-dev.is-stale { padding-bottom: 2.2em; animation: sim-stale var(--hb-t) linear infinite both; }
.sim-dev.is-stale .sim-dot { animation: sim-staledot var(--hb-t) linear infinite both; }
.sim-notes { position: absolute; left: .85em; right: .85em; bottom: .7em; height: 1em; font-family: var(--hb-mono); font-size: .72em; line-height: 1; }
.sim-notes i { position: absolute; left: 0; bottom: 0; font-style: normal; white-space: nowrap; }
.sim-hole { color: var(--cr-danger); animation: hb-cap-out var(--hb-t) linear infinite both; }
.sim-closed { color: var(--ok); animation: hb-cap-in var(--hb-t) linear infinite both; }
.sim-wall { position: absolute; right: .35em; top: .35em; bottom: .35em; width: 2px; border-radius: 2px; background: var(--cr-good); animation: sim-wall var(--hb-t) linear infinite both; }
.sim-knock { position: absolute; right: 0; top: 1.15em; width: 1.5em; height: 2px; border-radius: 2px; background: var(--cr-danger); animation: sim-knock var(--hb-t) linear infinite both; }
.sim-knock.k2 { top: 1.95em; animation-delay: .5s }
.sim-knock.k3 { top: 2.75em; animation-delay: 1s }
.sim-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-soft); }
.sim-bar i { display: block; height: 100%; background: var(--cr-good); animation: sim-bar var(--hb-t) cubic-bezier(.3, .8, .3, 1) infinite both; }
@keyframes sim-stale    { 0%, 56% { border-color: var(--cr-danger); background: var(--cr-danger-soft) } 68%, 100% { border-color: var(--cr-good); background: var(--cr-good-soft) } }
@keyframes sim-staledot { 0%, 56% { background: var(--cr-danger) } 68%, 100% { background: var(--cr-good) } }
@keyframes sim-to       { 0%, 58% { opacity: 0 } 68%, 100% { opacity: 1 } }
@keyframes sim-bar      { 0%, 46% { width: 0 } 64%, 100% { width: 100% } }
@keyframes sim-wall     { 0%, 62% { opacity: 0; transform: scaleY(.2) } 72%, 100% { opacity: 1; transform: none } }
@keyframes sim-knock {
	0%       { opacity: 0; transform: translateX(2.5em) }
	4%       { opacity: 1; transform: translateX(1.6em) }
	22%      { opacity: 1; transform: translateX(-20em) }   /* straight through */
	26%, 63% { opacity: 0; transform: translateX(-21em) }
	64%      { opacity: 0; transform: translateX(2.5em) }
	68%      { opacity: 1; transform: translateX(1.6em) }
	80%      { opacity: 1; transform: translateX(-1.1em) }  /* stopped at the closed door */
	88%,100% { opacity: 0; transform: translateX(.5em) }
}

/* ---- 04 Report · laptop: one report, eight people warned -------------------------------- */
/* people | the report going up | the desk — the arrow is a column of its own, so nothing has to
   be positioned by guesswork; only the second, blocked message sits in the left gutter. */
.sim-report-body { position: relative; flex: 1; padding: 1.6em 1.6em 1.4em; display: grid; grid-template-columns: auto auto auto; grid-template-rows: 1fr auto; justify-content: center; align-items: center; gap: 1.1em; }
.sim-report-body .sim-caption { grid-column: 1 / -1; align-self: end; text-align: center; }
.sim-people { position: relative; display: grid; grid-template-columns: repeat(3, 2.5em); gap: .6em; }
.sim-people i { position: relative; width: 2.5em; height: 2.5em; border-radius: .7em .7em .5em .5em; background: var(--line); animation: sim-warn var(--hb-t) linear infinite both; }
.sim-people i::before { content: ""; position: absolute; left: 50%; top: .4em; transform: translateX(-50%); width: .82em; height: .82em; border-radius: 50%; background: var(--surface); }
.sim-people i::after { content: ""; position: absolute; left: 50%; bottom: .32em; transform: translateX(-50%); width: 1.55em; height: .72em; border-radius: .8em .8em 0 0; background: var(--surface); }
.sim-people i:nth-child(2) { animation-delay: .09s } .sim-people i:nth-child(3) { animation-delay: .18s }
.sim-people i:nth-child(4) { animation-delay: .27s } .sim-people i:nth-child(5) { animation-delay: .36s }
.sim-people i:nth-child(6) { animation-delay: .45s } .sim-people i:nth-child(7) { animation-delay: .54s }
.sim-people i:nth-child(8) { animation-delay: .63s } .sim-people i:nth-child(9) { animation-delay: .72s }
.sim-people i.is-hit { animation-name: sim-hit; animation-delay: 0s }
.sim-desk { justify-self: start; display: grid; gap: .2em; padding: .8em 1em; border: 1px solid var(--line); border-radius: .6em; background: var(--surface-2); animation: sim-desk var(--hb-t) linear infinite both; }
.sim-desk span { font-size: .95em; font-weight: 600; }
.sim-desk b { font-family: var(--hb-mono); font-size: .8em; font-weight: 400; color: var(--ok); animation: sim-clock var(--hb-t) linear infinite both; }
.sim-up { width: 3.2em; height: 2px; background: var(--cr-good); position: relative; transform-origin: left; animation: sim-up var(--hb-t) cubic-bezier(.4, 0, .2, 1) infinite both; }
.sim-up::after { content: ""; position: absolute; right: -1px; top: -.24em; border: .3em solid transparent; border-left-color: var(--cr-good); }
.sim-env { position: absolute; z-index: 2; width: 1.9em; height: 1.3em; border-radius: .15em; background: var(--cr-danger); }
.sim-env::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; border-top: .62em solid rgba(255, 255, 255, .5); border-left: .95em solid transparent; border-right: .95em solid transparent; }
.sim-mailin { left: .3em; top: .6em; animation: sim-mailin var(--hb-t) cubic-bezier(.4, 0, .3, 1) infinite both; }
.sim-blocked { left: -2.9em; top: 44%; animation: sim-blocked var(--hb-t) linear infinite both; }
.sim-blocked::before { content: "✕"; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--surface); font-size: .85em; font-weight: 700; }
@keyframes sim-warn    { 0%, 64% { background: var(--line) } 74%, 100% { background: var(--cr-good) } }
@keyframes sim-hit     { 0%, 10% { background: var(--line) } 18%, 44% { background: var(--cr-danger) } 54%, 66% { background: var(--cr-warn) } 76%, 100% { background: var(--cr-good) } }
@keyframes sim-desk    { 0%, 52% { border-color: var(--line); box-shadow: 0 0 0 0 transparent } 62%, 100% { border-color: var(--cr-good); box-shadow: 0 0 0 3px var(--cr-good-soft) } }
@keyframes sim-clock   { 0%, 56% { opacity: 0 } 64%, 100% { opacity: 1 } }
@keyframes sim-up      { 0%, 44% { opacity: 0; transform: scaleX(0) } 46% { opacity: 1 } 58%, 100% { opacity: 1; transform: scaleX(1) } }
@keyframes sim-mailin  { 0% { opacity: 0; transform: translate(-2.2em, -1.3em) } 8%, 16% { opacity: 1; transform: none } 24%, 100% { opacity: 0; transform: none } }
@keyframes sim-blocked { 0%, 76% { opacity: 0; transform: translateX(-2em) } 84% { opacity: 1; transform: none } 92%, 100% { opacity: .5; transform: translateX(-.6em) } }

/* every scene's last frame is the frame that says the thing, so reduced motion is that frame */
@media (prefers-reduced-motion: reduce) {
	.hb-sim, .hb-sim * {
		animation-duration: 1ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		animation-fill-mode: forwards !important;
		transition: none !important;
	}
	[data-hb-ready] .hb-sim { transition: none !important; transform: none !important; }
	[data-hb-ready] .hb-item-body { transition: none !important; }
	[data-hb-ready] .hb-close > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================================
   Two ways in — one panel that changes its mind

   Individuals and organizations are two answers to one question, so this is one thing with a
   switch rather than two things side by side. Everything reads the mode off the section:
   [data-mode] carries the accent through --mo-accent, so a single set of rules comes out crimson
   for a person and amber for an organization, and the colour itself transitions on the flip.

   The figure is nine people all along. In "one" it folds eight of them away and grows the ninth
   inside a ring that draws closed; in "many" they come back and their bars fill — seven of nine
   to full, which is what the tally underneath says.

   With no JavaScript there is no switch to operate, so the section is the "Just me" panel plainly,
   nothing hidden and nothing overlapping.
   ========================================================================================== */

.ways {
	--mo-spring: cubic-bezier(.34, 1.56, .64, 1);
	--mo-accent: var(--petrol-solid);
	--mo-text: var(--petrol);
	--mo-on-accent: var(--on-accent);
}
.ways[data-mode="many"] {
	--mo-accent: var(--cr-warn);
	--mo-text: var(--amber);
	--mo-on-accent: #1a1b22;
}
.ways-intro { color: var(--muted); max-width: 56ch; margin: -.5rem 0 0; font-size: 1.05rem; }

/* ---- the switch ------------------------------------------------------------------------ */
.ways-switch {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: min(340px, 100%);
	margin: 2rem 0 2.8rem;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
}
.ws-thumb {
	position: absolute;
	z-index: 0;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: var(--mo-accent);
	box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .75);
	transition: transform .5s var(--mo-spring), background .45s ease;
}
.ways[data-mode="many"] .ws-thumb { transform: translateX(100%); }
.ws-tab {
	position: relative;
	z-index: 1;
	border: 0;
	background: none;
	border-radius: 999px;
	padding: .6rem .9rem;
	font: inherit;
	font-weight: 600;
	font-size: .96rem;
	color: var(--muted);
	cursor: pointer;
	transition: color .35s ease;
}
.ws-tab:hover { color: var(--ink); }
.ws-tab[aria-selected="true"] { color: var(--mo-on-accent); }
.ws-tab:focus-visible { outline: 2px solid var(--mo-text); outline-offset: 3px; }

/* once, on arrival: the thumb leans towards the other side and springs back, which is the only
   honest way to say "this moves" without moving what is being read */
.ways.is-in:not(.has-touched) .ws-thumb { animation: ws-nudge 1.15s var(--mo-spring) .9s 1; }
@keyframes ws-nudge { 0%, 100% { transform: translateX(0) } 45% { transform: translateX(26%) } }

/* ---- the panel and the figure ----------------------------------------------------------- */
.ways-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.ways-viz { display: grid; place-items: center; }
.ways-stack { position: relative; transition: height .45s cubic-bezier(.2, .7, .3, 1); }
.ways-panel { position: absolute; inset: 0 auto auto 0; width: 100%; max-width: 46ch; }
.ways-panel .eyebrow { color: var(--mo-text); margin-bottom: .7rem; }
.ways-panel h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 0 0 .8rem; }
.ways-panel > p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.5rem; }

.ways-list { list-style: none; margin: 0 0 1.9rem; padding: 0; display: grid; gap: .65rem; }
.ways-list li { position: relative; padding-left: 1.8rem; font-size: 1rem; color: var(--cr-ink-2); }
.ways-list li::before {
	content: "";
	position: absolute;
	left: .2rem;
	top: .42em;
	width: .64rem;
	height: .34rem;
	border-left: 2px solid var(--mo-accent);
	border-bottom: 2px solid var(--mo-accent);
	transform: rotate(-45deg);
}
.ways-cta { display: inline-block; font-weight: 700; font-size: 1.02rem; text-decoration: none; color: var(--mo-text); }
.ways-cta span { display: inline-block; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.ways-cta:hover span, .ways-cta:focus-visible span { transform: translateX(6px); }

.viz-stage { position: relative; width: min(330px, 62vw); aspect-ratio: 1; }
.viz-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.viz-ring circle {
	fill: none;
	stroke: var(--mo-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	opacity: .6;
	stroke-dasharray: 540;
	stroke-dashoffset: 540;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .3, 1), stroke .45s ease, opacity .5s ease;
}
.viz-grid { position: absolute; inset: 15%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; }
.viz-fig { position: relative; width: 52px; height: 52px; transition: opacity .4s ease, transform .6s var(--mo-spring); }
.viz-fig i { position: absolute; inset: 0; border-radius: 15px; background: var(--mo-accent); transition: background .45s ease; }
.viz-fig i::before { content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: background .45s ease; }
.viz-fig i::after  { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 30px; height: 14px; border-radius: 16px 16px 0 0; background: var(--surface); transition: background .45s ease; }
.viz-fig b { position: absolute; left: 1px; right: 1px; top: calc(100% + 7px); height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.viz-fig b s { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--mo-accent); transition: width .85s cubic-bezier(.2, .7, .3, 1), background .45s ease; }

.viz-cert, .viz-tally {
	position: absolute;
	left: 50%;
	bottom: -.4rem;
	transform: translate(-50%, 10px);
	white-space: nowrap;
	opacity: 0;
	font-size: .92rem;
	transition: opacity .4s ease, transform .5s var(--mo-spring);
}
.viz-cert { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--mo-text); }
.viz-cert em { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--mo-accent); color: var(--mo-on-accent); font-style: normal; font-size: .8rem; font-weight: 700; }
.viz-tally { color: var(--muted); }
.viz-tally b { color: var(--mo-text); font-size: 1.15rem; }

/* one: eight fold away and the ninth grows inside a closed ring */
.ways[data-mode="one"] .viz-fig:not(.is-hero) { opacity: 0; transform: scale(.25); }
.ways[data-mode="one"] .viz-fig.is-hero { transform: scale(1.85); }
.ways[data-mode="one"] .viz-ring circle { stroke-dashoffset: 0; }
.ways[data-mode="one"] .viz-cert { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }

/* many: they come back, and seven of nine fill */
.ways[data-mode="many"] .viz-ring circle { opacity: 0; }
.ways[data-mode="many"] .viz-fig b { opacity: 1; transition-delay: .25s; }
.ways[data-mode="many"] .viz-fig s { width: var(--w, 100%); transition-delay: .3s; }
.ways[data-mode="many"] .viz-tally { opacity: 1; transform: translate(-50%, 0); transition-delay: .4s; }
.viz-fig:nth-child(3) { --w: 62% } .viz-fig:nth-child(6) { --w: 38% }
.viz-fig:nth-child(2) { transition-delay: .04s } .viz-fig:nth-child(3) { transition-delay: .08s }
.viz-fig:nth-child(4) { transition-delay: .12s } .viz-fig:nth-child(6) { transition-delay: .16s }
.viz-fig:nth-child(7) { transition-delay: .2s }  .viz-fig:nth-child(8) { transition-delay: .24s }
.viz-fig:nth-child(9) { transition-delay: .28s }

/* ---- the arrival ------------------------------------------------------------------------ */
[data-ways-ready] .ways-panel { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .4s ease, transform .5s var(--mo-spring), visibility 0s .4s; }
[data-ways-ready] .ways-panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
[data-ways-ready] .ways-switch, [data-ways-ready] .ways-body { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
[data-ways-ready] .ways-body { transition-delay: .12s; }
[data-ways-ready].is-in .ways-switch, [data-ways-ready].is-in .ways-body { opacity: 1; transform: none; }
/* the figure holds its first frame until the section is actually being looked at */
[data-ways-ready]:not(.is-in) .viz-ring circle { stroke-dashoffset: 540; transition: none; }
[data-ways-ready]:not(.is-in) .viz-fig.is-hero { transform: scale(.25); transition: none; }

@media (max-width: 880px) {
	.ways-body { grid-template-columns: 1fr; gap: 2.6rem; justify-items: center; }
	.ways-stack { width: 100%; }
	.ways-panel { max-width: none; }
	.ways-viz { order: -1; }
	.viz-stage { width: min(280px, 76vw); }
}

@media (prefers-reduced-motion: reduce) {
	.ways *, [data-ways-ready] .ways-panel { transition: none !important; animation: none !important; }
	[data-ways-ready] .ways-switch, [data-ways-ready] .ways-body { opacity: 1 !important; transform: none !important; }
	[data-ways-ready]:not(.is-in) .viz-ring circle { stroke-dashoffset: 0; }
	[data-ways-ready]:not(.is-in) .viz-fig.is-hero { transform: scale(1.85); }
}

/* ==========================================================================================
   The landing page's own ground

   /home is a dark showcase for every visitor, whatever theme they carry, so the palette is
   redeclared on <body> rather than on :root. That is the whole trick: a custom property is
   substituted where it is declared, so site.css's aliases (--paper: var(--cr-page)) were already
   resolved against the light values up at :root and re-declaring only --cr-page would change
   nothing. Every tier is restated here — tokens, the site's aliases, the editorial ones — and
   because the nearest ancestor wins, body beats :root no matter what data-theme says.

   The scale is one family below #0a0d10: cards and bands lift by a few points rather than
   changing hue, and the muted tone still clears 7:1 on both the page and the card. The device
   frames in the habits section are their own metal greys and are left alone — that is the point
   of them.
   ========================================================================================== */

html:has(> body.page-dark) { color-scheme: dark; }

body.page-dark {
	color-scheme: dark;

	/* grounds */
	--cr-page: #0a0d10;
	--cr-card: #12161b;
	--cr-card-2: #1a1f26;
	--cr-line: #242c36;
	--cr-line-soft: #1a212a;

	/* ink — 17.7:1, 7.5:1 on the page; 7.1:1 for the muted tone on a card */
	--cr-ink: #f2f4f7;
	--cr-ink-2: #d3d8e0;
	--cr-muted: #99a1ad;
	--cr-faint: #8b93a0;

	--cr-accent: #f02857;
	--cr-accent-text: #ff8fa8;   /* 9.6:1 on the page */
	--cr-accent-solid: #e11d48;
	--cr-accent-hover: #f02857;
	--cr-accent-active: #be123c;
	--cr-accent-soft: rgba(240, 40, 87, .18);
	--cr-accent-ink: #ffffff;
	--cr-on-accent: #ffffff;

	--cr-good: #25a244;
	--cr-good-text: #7bd88f;
	--cr-good-soft: rgba(37, 162, 68, .2);
	--cr-warn: #fab219;
	--cr-warn-text: #fab219;     /* 10.6:1 on the page */
	--cr-warn-soft: rgba(250, 178, 25, .18);
	--cr-danger: #f57f7f;
	--cr-danger-soft: rgba(245, 127, 127, .18);

	--cr-footer-bg: var(--cr-page);
	--cr-footer-fg: #c3c9d2;
	--cr-footer-muted: #8b93a0;
	--cr-footer-line: #232a33;

	--cr-field: #0f1318;
	--cr-field-border: #2c3540;
	--cr-field-ring: rgba(240, 40, 87, .32);

	/* the site's own names, re-resolved against the values above */
	--paper: var(--cr-page);
	--surface: var(--cr-card);
	--surface-2: var(--cr-card-2);
	--ink: var(--cr-ink);
	--muted: var(--cr-muted);
	--line: var(--cr-line);
	--line-soft: var(--cr-line-soft);
	--petrol: var(--cr-accent-text);
	--petrol-solid: var(--cr-accent-solid);
	--petrol-dark: var(--cr-accent-active);
	--petrol-soft: var(--cr-accent-soft);
	--amber: var(--cr-warn-text);
	--amber-soft: var(--cr-warn-soft);
	--ok: var(--cr-good-text);
	--danger: var(--cr-danger);
	--on-accent: var(--cr-on-accent);

	/* and the editorial ones */
	--ed-paper: var(--paper);
	--ed-surface: var(--surface);
	--ed-ink: var(--ink);
	--ed-body: var(--cr-ink-2);
	--ed-muted: var(--muted);
	--ed-faint: var(--cr-faint);
	--ed-line: var(--line);
	--ed-line-soft: var(--line-soft);
	--ed-green: var(--petrol);
	--ed-green-deep: var(--petrol-dark);
	--ed-eyebrow: var(--petrol);
}

/* the header sits on the ground rather than above it — the hairline does the separating, which
   is what a near-black page wants instead of a second shade of dark */
body.page-dark .site-header { background: var(--paper); }
body.page-dark .hero { background: var(--paper); }
/* nothing to toggle on a page that has decided: the control would be a dead switch */
body.page-dark .theme-toggle { display: none; }

/* ==========================================================================================
   The header

   Transparent over the hero, condensed into a bar the moment the page moves. The links stop
   fitting somewhere around a tablet, so below that they leave the bar entirely and become a
   full-screen menu rather than wrapping the header onto three rows, which is what it used to do.
   ========================================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease,
		transform .4s cubic-bezier(.2, .7, .3, 1);
}
/* out of the way while you read forwards. A transform rather than a change of position, so the
   page below it never moves and the sticky things measured against it stay measured. */
.site-header.is-away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
	.site-header { transition: background .35s ease, border-color .35s ease; }
	.site-header.is-away { transform: none; }
}
.site-header.is-condensed {
	background: color-mix(in srgb, var(--paper) 82%, transparent);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom-color: var(--line);
}
/* `padding-block`, not `padding`: this is the `.wrap` element, and a shorthand zero here put the
   logo and the menu button hard against the two edges of the screen. */
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; flex-wrap: nowrap; padding-block: 0; }
/* the row may not wrap, so on a very narrow screen something has to give: the brand does, rather
   than the whole header pushing the page sideways */
@media (max-width: 380px) {
	.header-row { gap: .6rem; }
	.brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
	.header-actions { gap: .35rem; }
}
.site-nav { display: flex; gap: 1.6rem; flex: 1; justify-content: center; flex-wrap: nowrap; }
.site-nav a { position: relative; color: var(--cr-ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; padding: .3rem 0; border: 0; transition: color .25s ease; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: .6rem; }

.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; align-items: center; justify-content: center; color: var(--ink); }
.nav-toggle-bars { display: grid; gap: 5px; width: 17px; }
.nav-toggle-bars i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-menu {
	position: fixed;
	inset: 0;
	z-index: 39;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.4rem;
	padding: 6rem 2rem 3rem;
	background: var(--paper);
	opacity: 0;
	/* A closed menu that is only transparent is still a full-screen sheet over the whole page: it
	   is `position: fixed; inset: 0` at z-index 39, so on every viewport that shows the toggle it
	   was swallowing every tap and handing it to whichever of its own links happened to be under
	   the finger. That is what sent a tap on the contest's gate-pass field to the LMS. Opacity
	   alone never removes an element from hit-testing — visibility and pointer-events do. */
	visibility: hidden;
	pointer-events: none;
	/* visibility flips only once the fade has finished, so the menu still fades out rather than
	   vanishing; on the way in it flips immediately or there is nothing to fade */
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.site-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .3s ease, visibility 0s linear 0s;
}
.site-menu nav { display: grid; gap: .4rem; }
.site-menu nav a {
	font-size: clamp(1.8rem, 7vw, 2.8rem);
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--ink);
	text-decoration: none;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1), color .2s ease;
}
.site-menu.is-open nav a { opacity: 1; transform: none; }
.site-menu nav a:hover { color: var(--petrol); }
.site-menu nav a:nth-child(2) { transition-delay: .04s } .site-menu nav a:nth-child(3) { transition-delay: .08s }
.site-menu nav a:nth-child(4) { transition-delay: .12s } .site-menu nav a:nth-child(5) { transition-delay: .16s }
.site-menu nav a:nth-child(6) { transition-delay: .2s }
.site-menu-cta { display: flex; gap: .8rem; flex-wrap: wrap; }
html.has-menu { overflow: hidden; }

@media (max-width: 1080px) {
	.site-nav, .nav-login { display: none; }
	.nav-toggle { display: flex; }
	.header-row { justify-content: space-between; }
}
@media (min-width: 1081px) { .site-menu { display: none; } }

/* ==========================================================================================
   The hero

   Type first, product second, overlapping. The headline is set at display scale down the left of
   an asymmetric grid; the product sits in perspective on the right and is cut by the edge of the
   screen on purpose — a thing that runs off the frame reads as bigger than the frame. The bright
   certificate is the one light source on a near-black page, and everything else defers to it.

   The devices are the frames the habits section already draws, so the page is one kit rather than
   a set of tricks. The header floats over all of it, which is why the hero is a full 100svh and
   pads itself down past the bar.
   ========================================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--paper);
	margin-top: -72px;              /* the header floats; the hero starts under it */
	/* the foot of the hero is the stage: the copy is centred in whatever is left above it */
	padding: 7.5rem 0 clamp(21rem, 43vh, 28rem);
	min-height: 100vh;
	min-height: 100svh;
}
.hero-grid-lines {
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 76px 76px;
	background-position: center;
	opacity: .5;
	-webkit-mask-image: radial-gradient(118% 92% at 50% 30%, #000 0%, rgba(0, 0, 0, .35) 46%, transparent 78%);
	mask-image: radial-gradient(118% 92% at 50% 30%, #000 0%, rgba(0, 0, 0, .35) 46%, transparent 78%);
}
.hero-glow {
	position: absolute;
	z-index: 0;
	right: -10%;
	top: 6%;
	width: 70vw;
	height: 70vw;
	max-width: 1100px;
	max-height: 1100px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(225, 29, 72, .19), rgba(120, 60, 190, .1) 38%, transparent 68%);
	filter: blur(30px);
}
.hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: -18%;
	top: -12%;
	width: 62vw;
	height: 62vw;
	max-width: 900px;
	max-height: 900px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(120, 150, 210, .1), transparent 62%);
	filter: blur(26px);
}
/* ---- the horizon at the hero's foot ---------------------------------------------------------
   The crown of a sphere whose centre sits below its own canvas, so the bottom edge does the cutting
   and what is left is an arc. Masked away at both ends, because a canvas that simply stops reads as
   a rectangle and this has to read as something continuing past the frame. It is above the grid and
   the glow and under the grain and the marquee, which is what keeps it ground rather than object. */
.hero-orb {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	height: min(420px, 44vh);
	pointer-events: none;
	/* Only the last sliver at each side is faded: the arc is meant to leave the screen, not to be
	   tucked in at both ends. The script opens that fade out to nothing as the arc goes flat —
	   tucked ends are what a horizon wants, and a divider that stops short of both edges is a
	   dash. */
	--orb-fade: 7%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--orb-fade), #000 calc(100% - var(--orb-fade)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--orb-fade), #000 calc(100% - var(--orb-fade)), transparent);
}
.hero-orb canvas { display: block; position: relative; width: 100%; height: 100%; }

/* the light it throws: an ellipse sitting on the horizon and rising through it, wide and weak and
   heavily blurred, so it reads as the ground being warmer along that line and never as a lamp. It
   goes out as the arc goes flat, since nothing that flat is lighting anything */
.hero-orb-glow {
	position: absolute;
	left: 50%;
	bottom: -22%;
	opacity: var(--orb-glow, 1);
	width: min(1700px, 128vw);
	height: min(470px, 50vh);
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center,
		color-mix(in srgb, var(--cr-accent) 15%, transparent) 0%,
		color-mix(in srgb, var(--cr-accent) 6%, transparent) 32%,
		color-mix(in srgb, var(--cr-accent) 2%, transparent) 52%,
		transparent 68%);
	filter: blur(52px);
}
@media (max-width: 700px) {
	/* shallower, but never absent: the devices are standing on it */
	.hero-orb { height: min(280px, 32vh); }
	.hero-orb-glow { height: min(340px, 38vh); }
}

.hero-grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .42;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.hero-copy { position: relative; z-index: 3; width: 100%; text-align: center; }

.hero-flag { display: inline-flex; align-items: center; gap: .6rem; padding: .42rem .9rem .42rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--cr-ink-2); }
.hero-flag i { width: 7px; height: 7px; border-radius: 50%; background: var(--cr-accent); box-shadow: 0 0 0 0 rgba(240, 40, 87, .6); animation: hero-pulse 2.4s ease-out infinite; }
@keyframes hero-pulse { 70%, 100% { box-shadow: 0 0 0 9px rgba(240, 40, 87, 0) } }

.hero h1 {
	margin: 1.6rem 0 0;
	font-family: var(--font-cyber);
	font-weight: 600;
	font-size: clamp(2.5rem, 4.6vw, 4.8rem);
	line-height: 1.04;
	/* Space Grotesk sets tighter than Poppins on its own, so the negative tracking that suited the
	   old face would close it up; this is the same optical result, not the same number */
	letter-spacing: -.025em;
	/* wide enough that "Cyber security starts with" holds one line and the rotating word has the
	   next to itself — a centred headline broken across three lines has no shape */
	max-width: 28ch;
	margin-inline: auto;
}
/* the line arrives a word at a time, each one rising out of its own clipped box */
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-title .w > span, .hero-title .w.rot { display: inline-block; }
.hero-title .w:not(.rot) { animation: hero-word .9s cubic-bezier(.2, .8, .25, 1) both; }
.hero-title .w:nth-child(1) { animation-delay: .1s }
.hero-title .w:nth-child(2) { animation-delay: .17s }
.hero-title .w:nth-child(3) { animation-delay: .24s }
.hero-title .w:nth-child(4) { animation-delay: .31s }
@keyframes hero-word { from { transform: translateY(105%) } to { transform: none } }

/* and the last word keeps changing its mind */
.rot { position: relative; display: block; width: 100%; height: 1.02em; overflow: hidden; color: var(--petrol); animation: hero-word .9s cubic-bezier(.2, .8, .25, 1) .38s both; }
.rot-track { display: block; animation: rot 15s cubic-bezier(.7, 0, .2, 1) 1.6s infinite both; }
.rot-track b { display: block; height: 1.02em; line-height: 1.02em; font-weight: inherit; white-space: nowrap; }
@keyframes rot {
	0%,  18%  { transform: translateY(0) }
	25%, 43%  { transform: translateY(-1.02em) }
	50%, 68%  { transform: translateY(-2.04em) }
	75%, 93%  { transform: translateY(-3.06em) }
	100%      { transform: translateY(-4.08em) }
}
.hero-copy > p { margin: 1.9rem auto 0; color: var(--cr-ink-2); font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.55; max-width: 44ch; }
.hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.4rem; align-items: center; justify-content: center; }
.hero-live {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding: .7rem 1.1rem .7rem .8rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	text-decoration: none;
	max-width: 100%;
	transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.hero-live:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); }
.hl-tag { display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .2rem .55rem; border-radius: 999px; background: var(--cr-accent-soft); color: var(--petrol); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hl-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-accent); animation: hero-pulse 2.4s ease-out infinite; }
.hl-text { display: grid; min-width: 0; }
.hl-text b { font-size: .96rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-text em { font-style: normal; font-size: .82rem; color: var(--muted); }
.hl-go { flex: none; color: var(--muted); transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.hero-live:hover .hl-go { transform: translateX(5px); color: var(--ink); }
.hero .btn-ghost { border-color: rgba(255, 255, 255, .26); color: #fff; }
.hero .btn-ghost:hover { border-color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .07); color: #fff; }
.hero .btn-amber { box-shadow: 0 18px 40px -20px rgba(250, 178, 25, .85); }

/* ---- the product, standing on the horizon ------------------------------------------------ */
/* Anchored to the foot of the hero rather than placed in the flow, so however tall the headline
   wraps the devices keep their feet on the same line — which is the whole point of there being a
   floor. Their bottoms are level with each other and sit just above the arc's crown. */
.hero-stage {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: clamp(4rem, 8.5vh, 6rem);
	width: min(1060px, 94vw);
	height: clamp(15rem, 30vh, 19rem);
	transform: translateX(-50%);
	perspective: 1700px;
	--px: 0;
	--py: 0;
}
.hs-pc, .hs-ph { position: absolute; bottom: 0; transform-style: preserve-3d; }
.hs-pc {
	left: 50%;
	width: 41%;
	transform-origin: 50% 100%;
	transform: translateX(-56%) rotateY(calc(-8deg + var(--px) * 4deg)) rotateX(calc(5deg + var(--py) * -3deg));
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .82));
}
.hs-ph {
	right: 10%;
	bottom: -5%;
	height: 86%;
	transform-origin: 50% 100%;
	transform: rotateY(calc(-12deg + var(--px) * 7deg)) rotateX(calc(4deg + var(--py) * -4deg)) rotate(1.6deg);
	filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .86));
}

/* the pool of light each one is standing in */
.hero-stage::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -9%;
	width: 88%;
	height: 26%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--cr-accent) 32%, transparent), transparent 68%);
	filter: blur(28px);
}

/* lit from underneath: a crimson lip along the bottom edge of each chassis, and a little spilling
   out of it. The certificate is still the brightest thing on the page, but it is no longer the
   only lit one — which is what stops it reading as a lamp. */
.hs-pc .pc-lid {
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .08),
		inset 0 -9px 20px -11px rgba(240, 40, 87, .6),
		0 26px 50px -30px rgba(0, 0, 0, .85);
}
.hs-pc .pc-base { box-shadow: 0 14px 22px -16px rgba(0, 0, 0, .95), 0 7px 24px -6px rgba(240, 40, 87, .55); }
.hs-ph .ph-body {
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .14),
		inset 0 -11px 24px -13px rgba(240, 40, 87, .62),
		0 26px 52px -28px rgba(0, 0, 0, .9),
		0 10px 26px -8px rgba(240, 40, 87, .42);
}
.hs-pc .pc-screen { background: #ffffff; }

/* ---- the hero's two screens ------------------------------------------------------------------
   One argument in two halves, on one nine second clock: the laptop takes the bait, the phone does
   not. Everything here is keyed off [data-scene] on the stage, so the two devices cannot drift
   apart, and the script only ever says which of the three beats it is.

   The mail is white because the hero's composition needs a lit page standing on the floor — and
   because the moment that white goes out is the point the scene is making. */
.hz-mail, .hz-lock { position: absolute; inset: 0; font-size: 13px; font-size: 2.32cqw; }

.hz-mail { display: flex; flex-direction: column; background: #fbfbf8; color: #16181d; }
.hz-mail-bar { flex: none; display: flex; align-items: center; gap: .8em; padding: .55em .95em; background: #efefe9; border-bottom: 1px solid #e0e0d8; font-size: .74em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a7f8a; }
.hz-dots { display: flex; gap: .35em; }
.hz-dots i { display: block; width: .62em; height: .62em; border-radius: 50%; background: #d6d6cf; }
.hz-dots i:nth-child(1) { background: #ff5f57; } .hz-dots i:nth-child(2) { background: #febc2e; } .hz-dots i:nth-child(3) { background: #28c840; }
.hz-mail-body { position: relative; flex: 1; padding: 1.1em 1.3em 1.2em; }
.hz-from { display: flex; align-items: flex-start; gap: .7em; }
.hz-av { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #f3d9e0; color: #b91c1c; font-size: .8em; font-weight: 700; }
.hz-from-txt { display: flex; flex-direction: column; min-width: 0; }
.hz-from-txt b { font-size: 1.02em; line-height: 1.3; }
/* the name is not the address, and the address is the tell */
.hz-addr { font-family: var(--hb-mono, ui-monospace, monospace); font-size: .78em; color: #7a7f8a; }
.hz-addr em { font-style: normal; color: #b91c1c; text-decoration: underline wavy #b91c1c; text-underline-offset: .2em; }
.hz-subject { margin: .9em 0 .8em; font-size: 1.18em; font-weight: 600; line-height: 1.25; }
.hz-line { display: block; height: .52em; margin-bottom: .48em; border-radius: 2px; background: #e7e7e0; }
.hz-line.w92 { width: 92%; } .hz-line.w74 { width: 74%; } .hz-line.w86 { width: 86%; }
.hz-claim {
	display: inline-block;
	margin-top: 1em;
	padding: .72em 1.35em;
	--cut: .7em;
	clip-path: var(--chamfer);
	background: #b91c1c;
	color: #fff;
	font-size: .95em;
	font-weight: 600;
	cursor: pointer;
}
.hz-status { position: absolute; left: 0; bottom: 0; padding: .3em .9em; background: #efefe9; font-family: var(--hb-mono, ui-monospace, monospace); font-size: .72em; color: #7a7f8a; }
/* the pointer that takes the bait: it drifts onto the button over the beat and presses it */
.hz-cursor {
	position: absolute;
	left: 22%;
	top: 62%;
	width: 1.15em;
	height: 1.15em;
	background: #16181d;
	clip-path: polygon(0 0, 0 100%, 26% 76%, 45% 100%, 62% 91%, 43% 65%, 78% 60%);
	opacity: 0;
}

/* and what the button does */
.hz-lock {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: 1.2em;
	background: radial-gradient(120% 100% at 50% 0%, #2a0a12 0%, #0a0d10 62%);
	color: #fff;
	text-align: center;
	opacity: 0;
	pointer-events: none;
}
.hz-thief { width: 30%; max-width: 6.4em; }
.hz-hood { fill: #2b3038; }
.hz-shoulder { fill: #21252c; }
.hz-void { fill: #0a0d10; }
.hz-eye { fill: var(--cr-accent, #f02857); }
.hz-lock-say { font-size: 1.5em; font-weight: 600; letter-spacing: -.02em; }
.hz-lock-sub { font-family: var(--hb-mono, ui-monospace, monospace); font-size: .8em; color: #ff8ba6; }
.hz-lesson { margin: .5em 0 0; max-width: 26em; font-size: .95em; line-height: 1.5; color: #eceef2; opacity: 0; }
/* it is a demonstration, and says so on the screen it is playing on */
.hz-tag {
	position: absolute;
	right: .55em;
	bottom: .5em;
	padding: .25em .55em;
	background: rgba(10, 13, 16, .5);
	color: rgba(255, 255, 255, .7);
	font-size: 1.5cqw;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* the phone: the same attack, arriving in a hand that has had the ten minutes */
.hz-sms { flex: 1; display: flex; flex-direction: column; gap: .7em; padding: .9em 1em 1.2em; }
.hz-msg { align-self: flex-start; max-width: 94%; padding: .7em .85em; border-radius: 1.1em 1.1em 1.1em .25em; background: var(--surface-2); }
.hz-msg-who { display: block; font-size: .72em; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.hz-msg-who i { font-style: normal; font-weight: 400; }
.hz-msg p { margin: .35em 0 0; font-size: .84em; line-height: 1.5; }
.hz-msg em { font-style: normal; color: var(--cr-accent); text-decoration: underline; }
.hz-tell { display: flex; align-items: flex-start; gap: .5em; font-size: .78em; line-height: 1.45; color: var(--muted); opacity: 0; }
.hz-tell i { flex: none; width: .5em; height: .5em; margin-top: .5em; border-radius: 50%; background: var(--cr-accent); }
.hz-report { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .85em; text-align: center; background: var(--cr-good-soft, rgba(43, 168, 108, .16)); opacity: 0; }
.hz-report-mark { display: grid; place-items: center; width: 2em; height: 2em; margin-bottom: .3em; border-radius: 50%; background: var(--cr-good, #2ba86c); color: #06120c; font-size: .9em; font-weight: 700; }
.hz-report b { font-size: .9em; }
.hz-report span { font-size: .74em; color: var(--muted); }

/* ---- the three beats ------------------------------------------------------------------------ */
.hz-mail, .hz-lock, .hz-lesson, .hz-tell, .hz-report, .hz-cursor, .hz-msg { transition: opacity .45s ease; }

/* the bait: the pointer drifts onto the button over the beat */
[data-scene="lure"] .hz-cursor { opacity: 1; animation: hz-reach 3.2s cubic-bezier(.4, 0, .3, 1) both; }
[data-scene="lure"] .hz-msg { animation: hz-land .5s cubic-bezier(.2, .8, .3, 1) both; }
[data-scene="lure"] .hz-tell { opacity: 1; transition-delay: 1.5s; }

/* the lock: the brightest thing on the page goes out */
[data-scene="locked"] .hz-mail, [data-scene="learned"] .hz-mail { opacity: 0; }
[data-scene="locked"] .hz-lock, [data-scene="learned"] .hz-lock { opacity: 1; }
[data-scene="locked"] .hz-thief, [data-scene="learned"] .hz-thief { animation: hz-loom .6s cubic-bezier(.2, .9, .3, 1) both; }
[data-scene="locked"] .hz-tell, [data-scene="learned"] .hz-tell { opacity: 1; }
[data-scene="locked"] .hz-report, [data-scene="learned"] .hz-report { opacity: 1; transition-delay: .35s; }
[data-scene="locked"] .hz-msg, [data-scene="learned"] .hz-msg { opacity: .45; }

/* and the line that turns it into the reason the site exists. The screen is 250px tall: the
   lesson cannot be added to the lock, so the lock gets out of its way — the figure shrinks back,
   the ransom note goes quiet, and the sentence takes the middle. */
[data-scene="learned"] .hz-thief { width: 15%; opacity: .5; }
[data-scene="learned"] .hz-lock-say { font-size: 1em; opacity: .45; }
[data-scene="learned"] .hz-lock-sub { opacity: 0; }
[data-scene="learned"] .hz-lesson { opacity: 1; font-size: 1.12em; color: #fff; }
.hz-thief, .hz-lock-say, .hz-lock-sub { transition: width .5s ease, opacity .5s ease, font-size .5s ease; }

@keyframes hz-reach {
	0% { left: 22%; top: 62%; }
	62% { left: 30%; top: 80%; }
	78%, 100% { left: 31.5%; top: 82%; }
}
@keyframes hz-loom { from { opacity: 0; transform: translateY(.5em) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hz-land { from { opacity: 0; transform: translateY(.8em); } to { opacity: 1; transform: none; } }

/* ---- the four habits, running along the foot --------------------------------------------- */
.hero-marquee { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.1rem 0; border-top: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq 34s linear infinite; }
.mq-run { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; }
.mq-run em { font-style: normal; font-size: 1rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--cr-ink-2); white-space: nowrap; }
.mq-run i { font-style: normal; color: var(--cr-accent); font-size: .8rem; }
@keyframes mq { to { transform: translateX(-25%) } }

.hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: 4.4rem; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: none; place-items: center; color: var(--cr-faint); transform: translateX(-50%); transition: color .3s ease, border-color .3s ease; }
.hero-scroll:hover { color: var(--ink); border-color: var(--cr-ink-2); }
.hero-scroll i { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); animation: hero-bob 2.4s ease-in-out infinite; }
@keyframes hero-bob { 0%, 100% { transform: rotate(45deg) translate(-1px, -1px) } 50% { transform: rotate(45deg) translate(2px, 2px) } }

/* ---- the arrival ------------------------------------------------------------------------- */
.hero-copy > :not(h1), .hero-marquee { animation: hero-rise 1s cubic-bezier(.2, .75, .3, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .46s }
.hero-copy > :nth-child(3) { animation-delay: .56s }
.hero-stage { animation: hero-stand 1.5s cubic-bezier(.2, .75, .3, 1) .2s both; }
.hero-marquee { animation-delay: .8s }
.hero-scroll { animation: hero-rise-mid 1s cubic-bezier(.2, .75, .3, 1) .8s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@keyframes hero-rise-mid { from { opacity: 0; transform: translate(-50%, 20px) } to { opacity: 1; transform: translateX(-50%) } }
/* it stands up out of the horizon; translateX(-50%) has to be carried through both ends or the
   stage jumps half its own width when the animation lets go */
@keyframes hero-stand {
	from { opacity: 0; transform: translateX(-50%) translateY(46px) }
	to   { opacity: 1; transform: translateX(-50%) }
}

#habits { scroll-margin-top: 92px; }

@media (max-width: 1080px) {
	/* stacked, the product becomes a peek below the fold rather than a full device — which is
	   the right invitation to scroll on a phone anyway */
	.hero { margin-top: -72px; padding: 6.5rem 0 clamp(14rem, 33vh, 19rem); }
	.hero h1 { max-width: 100%; font-size: clamp(2.4rem, 9vw, 4rem); }
	.hero-copy > p { max-width: 42ch; }
	.hero-stage { width: 96vw; height: clamp(11rem, 24vh, 15rem); bottom: clamp(4rem, 8vh, 5.5rem); }
	.hs-pc { width: 56%; transform: translateX(-56%) rotateY(calc(-6deg + var(--px) * 3deg)) rotateX(calc(4deg + var(--py) * -2deg)); }
	.hs-ph { right: 4%; height: 90%; }
	.hero-scroll { display: none; }
}
@media (max-width: 620px) {
	.hero-stage { height: clamp(8.5rem, 20vh, 12rem); min-height: 0; bottom: 4.8rem; }
	.hs-pc { width: 70%; transform: translateX(-50%) rotateY(calc(-4deg + var(--px) * 2deg)) rotateX(calc(3deg + var(--py) * -2deg)); }
	.hs-ph { display: none; }
	.mq-run em { font-size: .82rem; letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-copy > *, .hero-title .w, .rot-track, .hero-marquee, .hero-flag i, .hl-tag i { animation: none !important; opacity: 1 !important; transform: none !important; }
	/* the stage is held in the centre by a transform, so it is the one thing here that cannot have
	   its transforms taken away wholesale — it keeps its place and loses only the movement */
	.hero-stage { animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
	.hero-scroll { transform: translateX(-50%) !important; }
	.mq-track { animation: none !important; }
	.site-menu nav a { transition: none !important; opacity: 1; transform: none; }
}

/* ==========================================================================================
   Square corners, cut buttons

   Nothing in the interface is rounded any more: cards, panels, fields, badges and menus all meet
   at right angles. A button then takes one bite out of its bottom-right corner, which is the whole
   signature — it reads as tooling rather than as a pill, and it only works because everything
   around it is square.

   The cut is a clip-path, which has two consequences worth knowing. A box-shadow is clipped away
   with the corner, so the amber button's glow became a drop-shadow filter, which is applied after
   clipping and therefore follows the cut silhouette. And an outline is clipped too, so focus is
   drawn as an inset ring instead, which lives inside the shape.

   Not everything is square. A phone is not square, a person is not square, and neither is a dot,
   a ring or a seal — those are pictures of real things, and the allow-list at the bottom keeps
   them exactly as they were.
   ========================================================================================== */

:root {
	--cut: 12px;
	--chamfer: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
	/* the same corner taken off the other end, for the few places that lean the other way */
	--chamfer-bl: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* ---- the cut --------------------------------------------------------------------------- */
.btn, .hero-live, .ws-thumb, .sim-btn, .sim-signin, .site-menu-cta .btn,
.ed-btn, .ev-modal, .ev-modal-x {
	border-radius: 0;
	clip-path: var(--chamfer);
}
.btn, .ed-btn { border: 0; }
/* the dialog is a card of the same family, so it takes the same bite — a bigger one, because the
   corner has to read at the size of a panel rather than a button */
.ev-modal { --cut: 22px; }
.ev-modal-x { --cut: 7px; }
.btn-big { --cut: 16px; }
.sim-btn, .sim-signin { --cut: .8em; }
.ws-thumb { --cut: 14px; }
.hero-live { --cut: 18px; }

/* an outlined button cannot keep its outline through a clip, so the secondary fills instead */
.btn-ghost { background: var(--cr-card-2); color: var(--ink); }
.btn-ghost:hover { background: var(--line); color: var(--ink); border: 0; }
.ed-btn-quiet { background: color-mix(in srgb, var(--cr-ink) 8%, transparent); border: 0; color: var(--ed-ink); }
.ed-btn-quiet:hover { background: color-mix(in srgb, var(--cr-ink) 14%, transparent); color: var(--ed-ink); }
.hero .btn-ghost, .site-menu .btn-ghost { background: rgba(255, 255, 255, .09); color: #fff; }
.hero .btn-ghost:hover, .site-menu .btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* a clipped outline is no outline; the ring goes inside */
.btn:focus-visible, .hero-live:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cr-ink); }
.btn-amber:focus-visible, .btn-solid:focus-visible { box-shadow: inset 0 0 0 2px #0a0d10; }

/* a shadow outside a clipped box is gone, so the glow becomes a filter */
.hero .btn-solid { box-shadow: none; filter: drop-shadow(0 14px 28px rgba(225, 29, 72, .45)); }
.hb-close .btn { box-shadow: none; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55)); }

/* ---- everything else meets at right angles ---------------------------------------------- */
.card, .card-img, .side-card, .verify-form, .verify-result, .empty, .pill,
.hero-flag, .hl-tag, .ways-switch, .theme-toggle, .nav-toggle, .account-trigger,
.account-menu, .account-item, .account-signout button, .rich-text img,
.sim-addr, .sim-flag, .sim-line, .sim-field, .sim-meter, .sim-meter i, .sim-dev, .sim-desk,
.sim-otp i, .sim-env, .sim-wall, .sim-knock, .sim-bar, .sim-bar i,
.hz-line, .hz-tag, .hb-tell, .ed-meter .track, .ed-meter .track i,
.ev-person-keynote, .ev-person-photo, .ev-logo, .ev-form input, .ev-form-error, .ev-done,
.ev-mine-row, .ct-q, .ct-opt, .ct-input, .ct-winner,
.ed-lead-figure img, .ed-article-body img, .verify-form input, .path-list li,
.hb-win, .hb-win-bar, .viz-fig b, .viz-fig b s, .sim-mask, .hero-marquee { border-radius: 0; }

/* ---- but a phone is not square, and neither is a person ---------------------------------- */
.pc-lid { border-radius: 2.2% / 3.4%; }
.pc-screen { border-radius: 3px; }
.pc-base { border-radius: 0 0 9px 9px; }
.pc-base span { border-radius: 0 0 4px 4px; }
.pc-cam { border-radius: 50%; }
.ph-body { border-radius: 14% / 6.6%; }
.ph-screen { border-radius: 12% / 5.6%; }
.ph-island, .ph-home, .ph-key { border-radius: 999px; }
.hb-dots i, .sim-avatar, .sim-dot, .sim-ok, .hz-av, .hz-dots i, .hz-report-mark, .hero-flag i, .hl-tag i,
.account-initials, .hb-no::before, .ed-phase i, .hz-tell i, .viz-fig i::before,
.pm-fig::before, .sim-people i::before, .sim-from-txt .sim-avatar { border-radius: 50%; }
.sim-people i { border-radius: .7em .7em .5em .5em; }
.sim-people i::after { border-radius: .8em .8em 0 0; }
.pm-fig { border-radius: .3em .3em .2em .2em; }
.pm-fig::after { border-radius: .35em .35em 0 0; }
.viz-fig i { border-radius: 15px; }
.viz-fig i::after { border-radius: .8em .8em 0 0; }

/* ==========================================================================================
   The join the horizon becomes

   The arc at the foot of the hero is pressed flat as the hero scrolls away, and it lands on this:
   the top rule of the section that comes next. The canvas fades its points out over it, so the
   handover is one thing becoming another rather than one thing replacing another — and everything
   that stays afterwards is a single line of the same colour every other divider on the site uses.

   Static, deliberately. The rule is not animated, not written by a script and not conditional on
   the flattening having happened: it is simply the border those two sections share, and the arc
   arrives at it. Nothing to keep in sync, and nothing to go wrong for anyone whose browser never
   ran the canvas at all.

   And the sphere carries on through it. Below the rule the same ball hangs from the same line as a
   ceiling, growing out of it as the one above finishes flattening into it, and holding at the top
   of the screen while the section is read. Neither canvas knows about the other: they are measured
   off the same edge, which is why they agree.
   ========================================================================================== */

/* Keyed on the arc being there rather than on the section's name or on its position in the running
   order — the hero closes its own <section> before its script, so a sibling selector reaching
   across that gap would be reaching past a <script> tag and quietly matching nothing.

   No top padding here: the arc's own box is this section's top padding, which is why it can sit at
   the very top edge, hard against the rule, without anything having to agree on a number. */
.section:has(> .section-orb) {
	position: relative;
	border-top: 1px solid var(--line);
	padding-top: 0;
}
/* the content rides over it — the only reason either of them needs a layer at all */
.section:has(> .section-orb) > .wrap { position: relative; z-index: 1; }

/* The hero's box, hung from the top edge instead of stood on the bottom one: same height, same side
   fade, so the arc inside it is the same arc.

   Sticky rather than parked, because this is the section's ground and not its masthead. It arrives
   with the section, holds at the top of the screen for as long as the section is being read — the
   chapters scroll over it, the way the hero's copy stands over its horizon — and is pushed off by
   the foot of the section when the section is done. Its own height stays in the flow, so it is also
   the room the heading needs; sticky reserves that space rather than collapsing it, which is what
   keeps the content where it was while the painted box goes on holding still.

   It sticks at the very top, not under the site header. That bar is opaque chrome and this is
   background: it belongs behind it, and it means the moment this stops travelling with the section
   and starts holding still happens out of sight, behind the bar, instead of as a visible snag. */
.section-orb {
	position: sticky;
	top: 0;
	z-index: 0;
	/* The hero's box, so the arc in it hangs as deep as the hero's stands tall — the same amount of
	   the same sphere, not a flatter copy of it.

	   The box is taller than the curve inside it, though, and this box is the gap between two
	   sections: left alone, the difference is dead space between the rule and the heading under it.
	   So the script measures what is left under the crown into --hb-arc-slack and the margin gives
	   exactly that much back. The arc is hero-deep and the join pays nothing for the part of the
	   box the arc does not use. */
	height: min(420px, 44vh);
	margin-bottom: calc(.9rem - var(--hb-arc-slack, 0px));
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.section-orb canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 700px) {
	/* shallower, in step with the hero's */
	.section-orb { height: min(280px, 32vh); margin-bottom: calc(.6rem - var(--hb-arc-slack, 0px)); }
}

/* ==========================================================================================
   Why awareness matters — the reach of one click

   A spinning sphere of points with the parts of an organization ranged around it. The accent is
   not painted on: it belongs to the limb of the sphere, so a point picks the colour up as it
   turns towards the edge, loses it crossing the middle, and finds it again on the far side.

   Everything but the sphere is markup. Each label runs a wire to a node on the sphere's edge,
   accent for the first stretch and hairline for the rest, and the outer wires reach further in
   than the middle one because a circle is narrower at the top and bottom than it is across.
   ========================================================================================== */

.reach { position: relative; overflow: hidden; }
.reach-eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding-bottom: .8rem; border-bottom: 1px dotted var(--line); font-size: .84rem; font-weight: 500; color: var(--muted); }
.reach-eyebrow i { width: 9px; height: 9px; background: var(--cr-accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

.reach-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-top: 2.2rem; }
.reach-head h2 { font-size: clamp(1.8rem, 3.4vw, 3.1rem); line-height: 1.12; letter-spacing: -.035em; margin: 0; }
.reach-mark { background: rgba(255, 255, 255, .1); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: .04em .16em; color: var(--cr-ink-2); }
.reach-head p { margin: .5rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .98rem; line-height: 1.65; }

/* ---- the ring of labels ------------------------------------------------------------------ */
.reach-stage { --globe: min(560px, 42vw); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; margin-top: 1rem; }
.reach-col { display: flex; flex-direction: column; justify-content: space-between; height: 74%; min-height: 260px; }
.reach-item { display: flex; align-items: center; }
.reach-col-right .reach-item { flex-direction: row-reverse; }

.reach-chip {
	flex: none;
	padding: .55rem .85rem;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .02);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--cr-ink-2);
	white-space: nowrap;
	transition: border-color .3s ease, color .3s ease;
}
/* the label brightens as its own beam leaves it */
.reach-chip { --go: calc(clamp(0, calc(var(--t, -9) / .03), 1) - clamp(0, calc((var(--t, -9) - .06) / .08), 1)); border-color: color-mix(in srgb, var(--cr-accent) calc(var(--go) * 70%), var(--line)); }
.reach-item:hover .reach-chip { border-color: var(--cr-accent); color: var(--ink); }

/* A trace rather than a rule: it leaves the label on the accent, runs a hairline, steps down a
   notch and carries on to the node — the same right-angled language as the cut on the buttons.
   The step is a single box with a diagonal drawn corner to corner by a gradient, which is the one
   way to get a 45° line that stays 45° at any size. */
.reach-wire { display: flex; align-items: stretch; flex: 1; height: 16px; }
.reach-col-right .reach-wire { flex-direction: row-reverse; }
.reach-col-right .rw-b { margin-right: 0; margin-left: -1px; }
.reach-col-right .rw-c { margin-left: 0; margin-right: -1px; }
.rw-a, .rw-b, .rw-c { align-self: flex-start; height: 1px; margin-top: 0; }
.rw-c { align-self: flex-end; margin-bottom: 0; }
.rw-a { flex: none; width: 42px; height: 2px; margin-top: -1px; }
.rw-b { flex: 1; margin-right: -1px; }
.rw-c { flex: none; width: 44px; margin-left: -1px; }

/* A beam of its own width running the trace, not a trace that fills up.

   --t is where the pulse is along the whole run, 0 at the label and 1 at the node, and it carries
   on to 1.35 so there is a breath before the next one leaves. Each piece knows which slice of that
   run it is, and turns --t into --pos: its own 0-to-1. The comet is three gradient stops hung off
   --pos, so when the pulse is elsewhere every stop sits outside the box and the piece is just a
   hairline. Nothing is clamped, which is the point — a clamped pulse parks at the edge instead of
   leaving. */
.rw-a, .rw-b, .rw-c {
	background:
		linear-gradient(90deg,
			transparent calc(var(--pos) * 100% - 34px),
			var(--cr-accent) calc(var(--pos) * 100% - 3px),
			transparent calc(var(--pos) * 100% + 3px)),
		var(--line);
}
.reach-col-right .rw-a, .reach-col-right .rw-b, .reach-col-right .rw-c {
	background:
		linear-gradient(270deg,
			transparent calc(var(--pos) * 100% - 34px),
			var(--cr-accent) calc(var(--pos) * 100% - 3px),
			transparent calc(var(--pos) * 100% + 3px)),
		var(--line);
}
.rw-a { --pos: calc(var(--t, -9) / .13); }
.rw-b { --pos: calc((var(--t, -9) - .13) / .68); }
.rw-c { --pos: calc((var(--t, -9) - .86) / .11); }

/* the corner and the node are too short to run a comet through, so they take the light as a
   window: up as the pulse arrives, down as it leaves */
.rw-step { position: relative; }
.rw-step::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: calc(clamp(0, calc((var(--t, -9) - .78) / .035), 1) - clamp(0, calc((var(--t, -9) - .855) / .035), 1));
	background: linear-gradient(to top right, transparent calc(50% - .7px), var(--cr-accent) calc(50% - .7px), var(--cr-accent) calc(50% + .7px), transparent calc(50% + .7px));
}
.reach-col-right .rw-step::after { background: linear-gradient(to top left, transparent calc(50% - .7px), var(--cr-accent) calc(50% - .7px), var(--cr-accent) calc(50% + .7px), transparent calc(50% + .7px)); }
.reach-item:last-child .rw-step::after { background: linear-gradient(to bottom right, transparent calc(50% - .7px), var(--cr-accent) calc(50% - .7px), var(--cr-accent) calc(50% + .7px), transparent calc(50% + .7px)); }
.reach-col-right .reach-item:last-child .rw-step::after { background: linear-gradient(to bottom left, transparent calc(50% - .7px), var(--cr-accent) calc(50% - .7px), var(--cr-accent) calc(50% + .7px), transparent calc(50% + .7px)); }
.rw-step {
	flex: none;
	width: 16px;
	background: linear-gradient(to top right, transparent calc(50% - .7px), var(--line) calc(50% - .7px), var(--line) calc(50% + .7px), transparent calc(50% + .7px));
}
.reach-col-right .rw-step { background: linear-gradient(to top left, transparent calc(50% - .7px), var(--line) calc(50% - .7px), var(--line) calc(50% + .7px), transparent calc(50% + .7px)); }
.rw-node {
	flex: none;
	align-self: flex-end;
	width: 7px;
	height: 7px;
	margin-bottom: -3px;
	border: 1px solid color-mix(in srgb, var(--cr-accent) calc(30% + var(--hit) * 70%), var(--cr-faint));
	background: color-mix(in srgb, var(--cr-accent) calc(22% + var(--hit) * 78%), transparent);
	--hit: calc(clamp(0, calc((var(--t, -9) - .95) / .04), 1) - clamp(0, calc((var(--t, -9) - 1.02) / .09), 1));
	box-shadow:
		0 0 0 calc(1px + var(--hit) * 4px) color-mix(in srgb, var(--cr-accent) calc(14% + var(--hit) * 26%), transparent),
		0 0 calc(6px + var(--hit) * 16px) calc(var(--hit) * 3px) var(--cr-accent);
}
/* the bottom trace steps up rather than down, so both outer nodes sit the same distance from the
   middle and one inset serves them both */
.reach-item:last-child .rw-a, .reach-item:last-child .rw-b { align-self: flex-end; margin-top: 0; margin-bottom: -1px; }
.reach-item:last-child .rw-c { align-self: flex-start; }
.reach-item:last-child .rw-node { align-self: flex-start; margin-bottom: 0; margin-top: -3px; }
.reach-item:last-child .rw-step { background: linear-gradient(to bottom right, transparent calc(50% - .7px), var(--line) calc(50% - .7px), var(--line) calc(50% + .7px), transparent calc(50% + .7px)); }
.reach-col-right .reach-item:last-child .rw-step { background: linear-gradient(to bottom left, transparent calc(50% - .7px), var(--line) calc(50% - .7px), var(--line) calc(50% + .7px), transparent calc(50% + .7px)); }

/* a circle is narrower at its top and bottom, so the outer wires reach further in before they
   land — one eighth of the sphere's width, which is where the edge is at that height. Every wire
   then goes 9px further still, so the node beds into the points instead of stopping short of them */
.reach-col-left .reach-wire { margin-right: -9px; }
.reach-col-right .reach-wire { margin-left: -9px; }
.reach-item:first-child .reach-wire, .reach-item:last-child .reach-wire { margin-right: calc(var(--globe) * -0.125 - 9px); }
.reach-col-right .reach-item:first-child .reach-wire, .reach-col-right .reach-item:last-child .reach-wire { margin-right: 0; margin-left: calc(var(--globe) * -0.125 - 9px); }

/* ---- the sphere -------------------------------------------------------------------------- */
.reach-globe { position: relative; width: var(--globe, min(560px, 42vw)); aspect-ratio: 1; }
.reach-globe canvas { display: block; width: 100%; height: 100%; }
.reach-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 0 12%; pointer-events: none; }
/* a well in the middle of the sphere: the points behind the sentence are put out, so the text
   reads without a box around it and the sphere still looks like it goes all the way through */
.reach-centre::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 74%;
	height: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, var(--paper) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 44%, transparent 76%);
	filter: blur(7px);
}
.reach-centre b, .reach-centre span { position: relative; }
.reach-centre b { font-size: clamp(1.1rem, 1.7vw, 1.55rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.reach-centre span { font-size: .95rem; color: var(--muted); }

@media (max-width: 1000px) {
	.reach-head { grid-template-columns: 1fr; gap: 1.4rem; }
	.reach-stage { grid-template-columns: 1fr; justify-items: center; gap: 2rem; margin-top: 2rem; }
	.reach-globe { width: min(420px, 78vw); order: -1; }
	.reach-col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .6rem; height: auto; min-height: 0; }
	.reach-wire { display: none; }
	.reach-item:first-child .reach-wire, .reach-item:last-child .reach-wire { margin: 0; }
}

/* ==========================================================================================
   Latest news — a record, in order

   The one section on this page whose subject is that things happened in a sequence, so it borrows
   the rail from the habits chapters and the node from the reach section's traces: a line down the
   left, a marker per entry. The rail fades out at its foot rather than stopping dead, the same way
   the habits rail does.

   A whole row is the target, through the stretched link on the title, so the accessible name stays
   the headline while the click area is the band. Everything answers :focus-within as well as
   :hover. With no cover image — which is every post in the demo data — the row simply closes up.
   ========================================================================================== */

.beats { list-style: none; margin: 2rem 0 0; padding: 0; background: linear-gradient(to bottom, var(--line) 0 calc(100% - 8vh), transparent) left / 1px 100% no-repeat; }

.beat {
	position: relative;
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr) auto;
	align-items: start;
	gap: 0 2rem;
	padding: 1.9rem 1.6rem 1.9rem 2.4rem;
	border-bottom: 1px solid var(--line-soft);
	transition: background .3s ease;
}
.beat:last-child { border-bottom: 0; }
.beat:hover, .beat:focus-within { background: color-mix(in srgb, var(--cr-ink) 4%, transparent); }

/* the accent rule runs across the top of whichever entry is being read */
.beat::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 2px;
	background: var(--cr-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.beat:hover::after, .beat:focus-within::after { transform: scaleX(1); }

/* the marker on the rail */
.beat::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 2.35rem;
	width: 9px;
	height: 9px;
	box-sizing: border-box;
	border: 1px solid var(--cr-faint);
	background: var(--paper);
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.beat:hover::before, .beat:focus-within::before {
	border-color: var(--cr-accent);
	background: var(--cr-accent);
	box-shadow: 0 0 0 4px var(--cr-accent-soft), 0 0 12px 1px var(--cr-accent);
}

.beat-when { display: flex; flex-direction: column; font-family: var(--hb-mono, ui-monospace, SFMono-Regular, Menlo, monospace); line-height: 1.25; }
.beat-when b { font-size: .95rem; font-weight: 500; color: var(--cr-ink-2); letter-spacing: .01em; }
.beat-when i { font-style: normal; font-size: .8rem; color: var(--cr-faint); }

.beat-kind { display: block; margin-bottom: .55rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); }
.beat-body h3 { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.25; letter-spacing: -.02em; }
.beat-link { color: var(--ink); text-decoration: none; transition: color .25s ease; }
.beat:hover .beat-link, .beat:focus-within .beat-link { color: var(--petrol); }
/* the row is the target; the link keeps the headline as its name */
.beat-link::after { content: ""; position: absolute; inset: 0; }
.beat-link:focus-visible { outline: none; }
.beat:focus-within { outline: 2px solid var(--petrol); outline-offset: -2px; }
.beat-body p { margin: .5rem 0 0; max-width: 62ch; font-size: .96rem; line-height: 1.6; color: var(--muted); }

.beat-shot { align-self: center; width: 108px; height: 72px; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .55; transition: filter .35s ease, opacity .35s ease; }
.beat:hover .beat-shot, .beat:focus-within .beat-shot { filter: none; opacity: 1; }

.beat-go {
	align-self: center;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	--cut: 9px;
	clip-path: var(--chamfer);
	background: color-mix(in srgb, var(--cr-ink) 7%, transparent);
	color: var(--cr-faint);
	font-size: 1rem;
	transition: background .3s ease, color .3s ease;
}
.beat-go span { display: block; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.beat:hover .beat-go, .beat:focus-within .beat-go { background: var(--cr-accent); color: var(--cr-on-accent); }
.beat:hover .beat-go span, .beat:focus-within .beat-go span { transform: translateX(3px); }

/* ---- the arrival ------------------------------------------------------------------------ */
[data-beats-ready] .beat { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1), background .3s ease; }
[data-beats-ready].is-in .beat { opacity: 1; transform: none; }
[data-beats-ready].is-in .beat:nth-child(2) { transition-delay: .09s }
[data-beats-ready].is-in .beat:nth-child(3) { transition-delay: .18s }
[data-beats-ready].is-in .beat:nth-child(4) { transition-delay: .27s }
[data-beats-ready].is-in .beat:nth-child(5) { transition-delay: .36s }

@media (max-width: 760px) {
	.beat { grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; padding: 1.5rem 0 1.5rem 1.6rem; }
	.beat-when { grid-column: 1 / -1; flex-direction: row; gap: .4rem; align-items: baseline; margin-bottom: .5rem; }
	.beat-shot { display: none; }
	.beat::before { top: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
	[data-beats-ready] .beat { opacity: 1 !important; transform: none !important; transition: none !important; }
	.beat::after, .beat-go, .beat-shot { transition: none !important; }
}

/* ==========================================================================================
   The campaign directory, in the landing page's language

   Same ground, same parts: the eyebrow with its diamond over a dotted rule, display type, square
   everything, a hairline card that answers with an accent rule across its top, and a marker in
   the corner carrying the cut every button on the site has.

   A campaign without a poster no longer reserves 180px of flat grey for one — the card simply
   starts at its type, and the status pill moves into the body where it can always be read.
   ========================================================================================== */

body.campaign-page.page-dark .wrap { max-width: 1280px; }

.ed-dir-hero { padding: 4.5rem 0 2.6rem; gap: 4rem; }
.ed-dir-hero .reach-eyebrow { margin-bottom: 1.6rem; }
body.page-dark .ed-dir-hero h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.04em; }
body.page-dark .ed-dir-hero p { color: var(--muted); font-size: 1.02rem; line-height: 1.65; padding-top: 1.4rem; border-top: 1px solid var(--line); }

/* ---- the directory's lead ------------------------------------------------------------------
   The campaign that is running, given the width to be read rather than skimmed. It is one link,
   so the whole row is the target and the button inside it is a label rather than a second thing
   to aim at. The picture holds a third of the row and stops being a picture on a narrow screen,
   where a photograph above two lines of type is just something to scroll past. */
.dir-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 0;
	margin: 0 0 3.2rem;
	border: 1px solid var(--ed-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--ed-surface);
	text-decoration: none;
	color: inherit;
	transition: border-color .3s ease;
}
.dir-lead:hover { border-color: var(--camp, var(--ed-green)); }
.dir-lead-figure {
	position: relative;
	min-height: 300px;
	background: var(--ed-line-soft) center/cover no-repeat;
	background-image: linear-gradient(145deg,
		color-mix(in srgb, var(--camp, var(--ed-green)) 18%, var(--ed-surface)),
		var(--ed-surface) 64%);
}
.dir-lead-body { padding: 2rem 2.2rem; display: flex; flex-direction: column; gap: .9rem; }
.dir-lead-body h2 {
	font-family: var(--ed-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--ed-ink);
	margin: 0;
}
.dir-lead-body > p { margin: 0; color: var(--ed-body); font-size: 1rem; line-height: 1.6; max-width: 54ch; }
.dir-lead-foot {
	margin-top: auto;
	padding-top: 1.2rem;
	border-top: 1px solid var(--ed-line-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	flex-wrap: wrap;
	font-size: .86rem;
	color: var(--ed-faint);
}
.dir-lead-foot .ed-camp-when { flex: 1; min-width: 0; gap: 1.2rem; justify-content: flex-start; }
.dir-lead .ed-camp-counts { font-size: .84rem; color: var(--ed-faint); }

/* one shelf under another, all of them on the page */
.dir-shelf { padding-bottom: 3rem; scroll-margin-top: 5rem; }
.dir-shelf:last-of-type { padding-bottom: 1rem; }

@media (max-width: 860px) {
	.dir-lead { grid-template-columns: 1fr; }
	.dir-lead-figure { min-height: 200px; }
	.dir-lead-body { padding: 1.5rem 1.4rem; }
	/* the date, the place and the way in stop competing for one line: side by side on a phone the
	   button held its width and the venue overflowed underneath it */
	.dir-lead-foot { flex-direction: column; align-items: stretch; gap: 1rem; }
	.dir-lead-foot .ed-camp-when { flex-wrap: wrap; gap: .35rem 1.2rem; }
	.dir-lead-foot .ed-btn { text-align: center; }
}

/* ---- the shelves ------------------------------------------------------------------------ */
body.page-dark .ed-filters { border-top-color: var(--line); padding: 1.6rem 0; }
body.page-dark .ed-filter-links { gap: .5rem; }
body.page-dark .ed-filter {
	padding: .55rem .95rem;
	border: 1px solid var(--line);
	border-bottom-width: 1px;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	--cut: 10px;
	clip-path: var(--chamfer);
	transition: background .25s ease, color .25s ease;
}
body.page-dark .ed-filter:hover { background: color-mix(in srgb, var(--cr-ink) 7%, transparent); color: var(--ink); }
body.page-dark .ed-filter .n { font-family: var(--hb-mono, ui-monospace, monospace); font-weight: 400; color: var(--cr-faint); margin-left: .3rem; }
body.page-dark .ed-filter[aria-current="page"] { background: var(--cr-accent); border-color: var(--cr-accent); color: var(--cr-on-accent); }
body.page-dark .ed-filter[aria-current="page"] .n { color: rgba(255, 255, 255, .75); }
body.page-dark .ed-filters .meta-line { font-family: var(--hb-mono, ui-monospace, monospace); font-size: .8rem; color: var(--cr-faint); }

/* ---- the cards -------------------------------------------------------------------------- */
body.page-dark .ed-camp-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 1.5rem; padding-bottom: 5.5rem; }

body.page-dark .ed-camp-card {
	position: relative;
	background: color-mix(in srgb, var(--cr-ink) 3%, transparent);
	border: 1px solid var(--line);
	border-radius: 0;
	transition: background .3s ease, border-color .3s ease, transform .16s var(--cr-ease);
}
@media (hover: hover) and (pointer: fine) {
	body.page-dark .ed-camp-card:hover { background: color-mix(in srgb, var(--cr-ink) 6%, transparent); border-color: color-mix(in srgb, var(--cr-accent) 45%, var(--line)); }
}
body.page-dark .ed-camp-card:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
/* the rule draws across whichever card is being considered */
body.page-dark .ed-camp-card::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: -1px;
	right: -1px;
	top: -1px;
	height: 2px;
	background: var(--cr-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
body.page-dark .ed-camp-card:focus-visible::before { transform: scaleX(1); }

body.page-dark .ed-camp-figure { height: 172px; border-bottom: 1px solid var(--line); border-radius: 0; filter: grayscale(.55) contrast(1.05); transition: filter .4s ease; }
/* only a pointer that can rest has a hover; on a phone a tap would leave the card stuck lit
   when you came back to the list */
@media (hover: hover) and (pointer: fine) {
	body.page-dark .ed-camp-card:hover::before { transform: scaleX(1); }
	body.page-dark .ed-camp-card:hover .ed-camp-figure { filter: none; }
}

body.page-dark .ed-camp-body { padding: 1.5rem 1.5rem 4rem; gap: .8rem; }
.ed-camp-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.page-dark .ed-camp-type { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); }
body.page-dark .ed-camp-card h3 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
body.page-dark .ed-camp-card p { color: var(--muted); font-size: .95rem; line-height: 1.6; }

body.page-dark .ed-camp-foot { border-top: 1px solid var(--line-soft); padding-top: 1rem; gap: .6rem; font-family: var(--hb-mono, ui-monospace, monospace); font-size: .76rem; color: var(--cr-faint); }
body.page-dark .ed-camp-counts { gap: .9rem; }
body.page-dark .ed-camp-when b { font-family: var(--font-body); font-size: .8rem; color: var(--cr-ink-2); }

/* the flag sits with the record now that the figure may not exist */
body.page-dark .ed-camp-flag {
	position: static;
	align-self: flex-start;
	padding: .28rem .55rem;
	border-radius: 0;
	background: var(--cr-warn-soft);
	color: var(--amber);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ---- the event directory ------------------------------------------------------------------
   An event card says two things a campaign card does not: which city it is in, and whether its
   door is still open. The city is the flag, which on this ground stands at the figure's top left;
   the door goes to the opposite corner rather than into the body, where a campaign title long
   enough to wrap would push the card's head onto two lines while its neighbour's stayed on one. */
.events-page .ed-camp-figure .ed-pill,
.events-page .dir-lead-figure .ed-pill { position: absolute; top: .9rem; right: .9rem; left: auto; }
.events-page .ed-camp-type { margin-bottom: .2rem; }

/* ---- the event's own front page ------------------------------------------------------------
   The overview was two paragraphs and a column of facts while the people, the programme and the
   hall sat behind tabs. It carries them now, each as much of itself as fits, with a way through
   to the room that holds the rest. */
.campaign-detail .ev-people:not(.ev-people-tight) { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.campaign-detail .ev-person-keynote { grid-template-columns: 96px minmax(0, 1fr); }
@media (max-width: 520px) { .campaign-detail .ev-person-keynote { grid-template-columns: minmax(0, 1fr); } }
/* a face that has not been supplied should read as one that has not, not as one that failed */
.ev-person-photo {
	background-image: linear-gradient(145deg,
		color-mix(in srgb, var(--camp, var(--ed-green)) 14%, var(--ed-surface)),
		var(--ed-surface) 62%);
}
/* on the overview these are a strip to be recognised, not links to be worked through */
.ev-logo-quiet { cursor: default; }
.ev-logo-quiet small { font-size: .78rem; color: var(--ed-faint); }
/* a form is 520px wide whatever the column is: sized to the page the fields sat at one end of a
   column twice their width, with the note that belongs beside them a screen away */
.event-page .ev-grid { grid-template-columns: minmax(0, 34rem) minmax(0, 21rem); gap: 4rem; }
@media (max-width: 900px) { .event-page .ev-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; } }
.event-page .ev-form { margin-top: 1.4rem; }

/* ---- registering, over the page you were already on ----------------------------------------
   Four fields and a code from a letter. A native <dialog> so the browser does the focus trap,
   the Escape key and the inert background; the backdrop is the dialog element itself, which is
   what makes a click on it a click outside the card. */
.ev-modal {
	width: min(30rem, calc(100vw - 2rem));
	max-height: calc(100vh - 3rem);
	padding: 0;
	/* a border cannot survive the clip either: the card stands on its own ground and its shadow
	   is a filter, which is applied after clipping and so follows the cut silhouette */
	border: 0;
	background: var(--ed-surface);
	color: var(--ed-ink);
	filter: drop-shadow(0 32px 60px rgba(0, 0, 0, .55));
	overflow: auto;
	overscroll-behavior: contain;
}
.ev-modal::backdrop { background: rgba(4, 6, 9, .6); backdrop-filter: blur(3px); }
.ev-modal[open] { animation: ev-modal-in .22s cubic-bezier(.2, .7, .3, 1); }
@keyframes ev-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .ev-modal[open] { animation: none; } }
.ev-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1.5rem 1.1rem;
	border-bottom: 1px solid var(--ed-line-soft);
}
.ev-modal-head h2 { margin: .35rem 0 .3rem; font-size: 1.35rem; line-height: 1.2; }
.ev-modal-head .meta-line { padding: 0; }
.ev-modal-x {
	flex: none;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: color-mix(in srgb, var(--cr-ink) 8%, transparent);
	color: var(--ed-faint);
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}
.ev-modal-x:hover { background: color-mix(in srgb, var(--cr-ink) 14%, transparent); color: var(--ed-ink); }
.ev-modal-body { padding: 1.3rem 1.5rem 1.6rem; }
.ev-modal-body .ed-sub { margin-bottom: 1.2rem; }
.ev-modal .ev-form { max-width: none; margin-top: 0; }
.ev-modal .ev-form .ed-btn { margin-top: .4rem; text-align: center; }
.ev-modal .ev-done { border: 0; padding: 0; max-width: none; }
.ev-modal .ev-done h3 { margin-top: 0; }
/* the other question, at the bottom of whichever one you are looking at */
.ev-modal-swap { margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--ed-line-soft); font-size: .9rem; color: var(--ed-faint); }
.ev-modal-swap button {
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--ed-green);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ev-modal-swap button:hover { color: var(--ed-ink); }
/* the pass, drawn where it was asked for. It keeps the ticket's black on white — that rule is
   about what happens when somebody prints it, and it is the same object here. */
.ev-badge-small { width: 100%; }
@media (max-width: 420px) {
	.ev-modal .ev-form-row { grid-template-columns: 1fr; }
}

.ed-camp-go {
	position: absolute;
	right: 1.2rem;
	bottom: 1.3rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	--cut: 8px;
	clip-path: var(--chamfer);
	background: color-mix(in srgb, var(--cr-ink) 8%, transparent);
	color: var(--cr-faint);
	transition: background .3s ease, color .3s ease;
}
.ed-camp-go span { display: block; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
@media (hover: hover) and (pointer: fine) {
	.ed-camp-card:hover .ed-camp-go { background: var(--cr-accent); color: var(--cr-on-accent); }
	.ed-camp-card:hover .ed-camp-go span { transform: translateX(3px); }
}

body.page-dark .ed-shelf-head { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
body.page-dark .ed-shelf-head .n { font-family: var(--hb-mono, ui-monospace, monospace); color: var(--cr-faint); }
body.page-dark .ed-pill { border-radius: 0; }

/* a shelf with one campaign on it lays that one out wide, rather than leaving two thirds of a
   three-column grid empty beside it; two share the width between them */
body.page-dark .ed-camp-grid-one { grid-template-columns: minmax(0, 1fr); }
body.page-dark .ed-camp-grid-one .ed-camp-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; }
body.page-dark .ed-camp-grid-one .ed-camp-figure { height: 100%; min-height: 290px; border-bottom: 0; border-right: 1px solid var(--line); }
body.page-dark .ed-camp-grid-one .ed-camp-body { padding: 2.2rem 2.4rem 4.4rem; gap: 1rem; }
body.page-dark .ed-camp-grid-one .ed-camp-card h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
body.page-dark .ed-camp-grid-one .ed-camp-card p { font-size: 1.02rem; max-width: 52ch; }
body.page-dark .ed-camp-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 860px) {
	body.page-dark .ed-camp-grid-one .ed-camp-card { grid-template-columns: 1fr; }
	body.page-dark .ed-camp-grid-one .ed-camp-figure { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
	body.page-dark .ed-camp-grid-two { grid-template-columns: 1fr; }
}

/* ---- the quiz door: one field, and the camera beside it ---------------------------------- */
.ct-door input { font-size: 1.15rem; }
.ct-door-do { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ct-cam { margin-top: .9rem; }
.ct-cam video {
	display: block;
	width: 100%;
	max-width: 22rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: #000;
}
.ct-cam .meta-line { padding: .5rem 0 0; }

/* ==========================================================================================
   The capsule header

   The Awareness Month's header, on every public page while the month is the site's face: the
   base template puts `header-capsule` on the body whenever `month_theme` is on, so the home page
   and the pages beneath it wear the same bar. A dark capsule floating over the top of the page —
   the logo, the links with a dot under each, and "Log in" at the end — dark in both themes, so
   it is always white on it. It condenses into darker glass once the page has moved, and steps
   out of the way on the way down like the standard header does (the script above the fold).
   ========================================================================================== */
/* The header is a dark capsule floating over the top of the picture: the logo, the links with a
   dot under each, and "Log in" at the end. It stays a capsule when the page moves, so the bar
   behind it is dropped rather than condensed, and it is dark in both themes, so it is always
   white on it. */
body.header-capsule .site-header {
	--ink: #fff;
	--cr-ink-2: rgba(255, 255, 255, .85);
	--line: rgba(255, 255, 255, .25);
	padding-top: 16px;
	background: transparent;
	border-bottom: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.header-capsule .header-row {
	max-width: min(1040px, calc(100% - 24px));
	min-height: 64px;
	padding: 0 .6rem 0 1.4rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(5, 13, 18, .32);
	box-shadow: 0 14px 36px -16px rgba(0, 0, 0, .5);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	transition: background-color .35s ease, border-color .35s ease;
}
/* glass over the picture; once it is over the page's light ground it darkens enough to keep the
   white links readable */
.header-capsule .site-header.is-condensed .header-row { background: rgba(5, 13, 18, .72); border-color: rgba(255, 255, 255, .08); }
.header-capsule .site-nav { justify-content: flex-end; gap: 1.9rem; margin-right: .8rem; }
.header-capsule .site-nav a { padding: .2rem 0 .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
/* the dot under each link opens into a short teal bar for the one pointed at or open */
.header-capsule .site-nav a::after {
	left: 50%;
	right: auto;
	bottom: 0;
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .7);
	transform: translateX(-50%);
	transition: width .3s var(--mo-ease), background-color .3s ease;
}
.header-capsule .site-nav a:hover::after,
.header-capsule .site-nav a[aria-current]::after { width: 18px; background: #2dd4bf; transform: translateX(-50%); }
.header-capsule .header-actions > .nav-login { padding: .6rem 1.3rem; border-radius: 999px; clip-path: none; background: #2dd4bf; color: #042f2b; }
.header-capsule .header-actions > .nav-login:hover { background: #5eead4; color: #042f2b; }
.header-capsule .nav-toggle { border-color: transparent; }
/* the capsule is dark whether or not the page has moved, so the account on it is white either way */
.header-capsule .account-trigger { border-color: rgba(255, 255, 255, .28); color: #fff; }
.header-capsule .account-trigger:hover,
.header-capsule .account[open] .account-trigger { border-color: rgba(255, 255, 255, .6); }
.header-capsule .account-caret { color: rgba(255, 255, 255, .7); }
.header-capsule .account-initials { background: #2dd4bf; color: #042f2b; }
/* the menu hangs off a capsule, so it is rounded and lifted like one rather than a square panel */
.header-capsule .account-menu { margin-top: .35rem; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }

/* site.css squares these off ("everything else meets at right angles"), which is the standard
   page's look, not this one's: here the header is a round bar and everything in it follows. */
.header-capsule .account-trigger { border-radius: 999px; }
.header-capsule .account-menu { border-radius: 16px; }
.header-capsule .account-item,
.header-capsule .account-signout button { border-radius: 8px; }
.header-capsule .nav-toggle { border-radius: 999px; }


.header-capsule .site-header .account-menu {
	--ink: var(--cr-ink);
	--cr-ink-2: var(--cr-ink-2);
	--muted: var(--cr-muted);
	--line: var(--cr-line);
	color: var(--cr-ink);
}

/* the National Cyber Security Month's capsule: frosted glass, light enough for the month's whole
   logo (csat_web.html), which was drawn for a light ground — so the links on it are the page's ink,
   and the accent is the logo's blue rather than the month's teal. The page shows through it,
   blurred; over the dark pages it is frosted more heavily, so it still reads as light glass. */
.palette-ncsm .site-header { --ink: #10143a; --cr-ink-2: #2e3358; --line: rgba(16, 20, 58, .14); }
.palette-ncsm .header-row {
	min-height: 54px;
	background: linear-gradient(120deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .28));
	border-color: rgba(255, 255, 255, .55);
	box-shadow: 0 10px 30px -16px rgba(16, 20, 58, .35), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(16, 20, 58, .05);
	backdrop-filter: blur(16px) saturate(1.8);
	-webkit-backdrop-filter: blur(16px) saturate(1.8);
}
.palette-ncsm .site-header.is-condensed .header-row { background: linear-gradient(120deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .45)); border-color: rgba(255, 255, 255, .55); }
.palette-ncsm .brand-logo { display: block; width: auto; height: 36px; }
/* one way in, as on the month's home page: "Log in" alone, since "Start learning" leads to the same door */
.palette-ncsm .header-actions > .btn-solid { display: none; }
/* the switch between the month's light face and its dark one, on every page that has both — the
   door has only its dark one. It sits on the capsule's light glass in either, so it is drawn in the
   capsule's ink rather than the page's. */
body.palette-ncsm.page-ncsm .theme-toggle,
body.palette-ncsm.campaign-page .theme-toggle { display: inline-flex; }
.palette-ncsm .theme-toggle { width: 2.1rem; height: 2.1rem; border-radius: 999px; border-color: rgba(16, 20, 58, .18); background: rgba(255, 255, 255, .6); color: #10143a; }
.palette-ncsm .theme-toggle:hover { border-color: var(--nc-accent, #2459c0); color: var(--nc-accent, #2459c0); }
.palette-ncsm .header-actions > .nav-login { white-space: nowrap; }
.palette-ncsm .site-nav a { color: #10143a; }
.palette-ncsm .site-nav a::after { background: rgba(16, 20, 58, .3); }
.palette-ncsm .site-nav a:hover::after,
.palette-ncsm .site-nav a[aria-current]::after { background: var(--nc-accent, #2459c0); }
.palette-ncsm .header-actions > .nav-login { background: var(--nc-accent, #2459c0); color: #fff; }
.palette-ncsm .header-actions > .nav-login:hover { background: var(--nc-accent-hover, #1d4aa3); color: #fff; }
.palette-ncsm .account-trigger { border-color: rgba(16, 20, 58, .2); color: #10143a; }
.palette-ncsm .account-trigger:hover,
.palette-ncsm .account[open] .account-trigger { border-color: rgba(16, 20, 58, .45); }
.palette-ncsm .account-caret { color: rgba(16, 20, 58, .6); }
.palette-ncsm .account-initials { background: var(--nc-accent, #2459c0); color: #fff; }
.palette-ncsm .nav-toggle { color: #10143a; }
/* …and on the month's dark face, dark glass: the page's indigo shows through it, the links are the
   dark face's ink, the active mark and "Log in" its lifted accent (csat/brand.py), and the logo —
   drawn for white, in the gradient's own mid-tones — is lifted a step so it reads on the glass.
   The rules above set the capsule's ink outright for the light glass, so each is restated here. */
html[data-theme="dark"] .palette-ncsm .site-header { --ink: #eef0ff; --cr-ink-2: #c3c8e8; --line: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .palette-ncsm .header-row {
	background: linear-gradient(120deg, rgba(24, 29, 70, .78), rgba(13, 17, 46, .68));
	border-color: rgba(255, 255, 255, .12);
	box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .2);
	backdrop-filter: blur(16px) saturate(1.5);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
}
html[data-theme="dark"] .palette-ncsm .site-header.is-condensed .header-row { background: linear-gradient(120deg, rgba(20, 25, 62, .9), rgba(12, 16, 44, .84)); border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .palette-ncsm .brand-logo { filter: brightness(1.35) saturate(1.15); }
html[data-theme="dark"] .palette-ncsm .site-nav a { color: #e6e9ff; }
html[data-theme="dark"] .palette-ncsm .site-nav a::after { background: rgba(255, 255, 255, .3); }
html[data-theme="dark"] .palette-ncsm .site-nav a:hover::after,
html[data-theme="dark"] .palette-ncsm .site-nav a[aria-current]::after { background: var(--nc-accent-dk, #7aa8ff); }
html[data-theme="dark"] .palette-ncsm .header-actions > .nav-login { background: var(--nc-accent-dk, #7aa8ff); color: #0b1433; }
html[data-theme="dark"] .palette-ncsm .header-actions > .nav-login:hover { background: var(--nc-accent-dk-hover, #a2c2ff); color: #0b1433; }
html[data-theme="dark"] .palette-ncsm .theme-toggle { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #eef0ff; }
html[data-theme="dark"] .palette-ncsm .theme-toggle:hover { border-color: var(--nc-accent-dk, #7aa8ff); color: var(--nc-accent-dk, #7aa8ff); }
html[data-theme="dark"] .palette-ncsm .account-trigger { border-color: rgba(255, 255, 255, .2); color: #eef0ff; }
html[data-theme="dark"] .palette-ncsm .account-trigger:hover,
html[data-theme="dark"] .palette-ncsm .account[open] .account-trigger { border-color: rgba(255, 255, 255, .45); }
html[data-theme="dark"] .palette-ncsm .account-caret { color: rgba(255, 255, 255, .6); }
html[data-theme="dark"] .palette-ncsm .account-initials { background: var(--nc-accent-dk, #7aa8ff); color: #0b1433; }
html[data-theme="dark"] .palette-ncsm .nav-toggle { color: #eef0ff; }

@media (max-width: 600px) {
	.palette-ncsm .header-row { min-height: 50px; }
	.palette-ncsm .brand-logo { height: 32px; }
}

@media (max-width: 600px) {
	body.header-capsule .site-header { padding-top: 8px; }
	.header-capsule .header-row { max-width: calc(100% - 16px); padding-left: 1rem; }
}

/* ==========================================================================================
   Competitions run elsewhere (www/competition.html, the campaign's Competitions tab)

   A card says what the competition is, where it stands and the one thing to do about it now; the
   page is the card at length — the essentials, the themes, the rules, how it is judged and what
   it pays, and the winners on top once they are decided.
   ========================================================================================== */
.cmp-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.cmp-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.3rem 1.35rem 1.4rem; border: 1px solid var(--ed-line); border-radius: 14px; background: var(--cr-card, var(--surface)); }
.cmp-card.is-open, .cmp-card.is-running { border-color: color-mix(in srgb, var(--ed-green) 55%, var(--ed-line)); }
.cmp-card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.cmp-kind { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ed-green); }
.cmp-card h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em; }
.cmp-card h3 a { color: var(--ed-ink); text-decoration: none; }
.cmp-card h3 a:hover { color: var(--ed-green); }
.cmp-card-line { margin: 0; color: var(--ed-body); line-height: 1.55; }
.cmp-card-terms { display: grid; gap: .35rem; margin: .2rem 0 0; }
.cmp-card-terms > div { display: flex; gap: .6rem; font-size: .9rem; }
.cmp-card-terms dt { min-width: 5.5rem; color: var(--ed-faint); }
.cmp-card-terms dd { margin: 0; color: var(--ed-ink); font-weight: 600; }
.cmp-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: auto; padding-top: .5rem; }
.cmp-more { font-weight: 600; font-size: .92rem; color: var(--ed-green); text-decoration: none; }
.cmp-more:hover { text-decoration: underline; }

.cmp-draft { margin-top: 1rem; padding: .7rem 1rem; border: 1px dashed var(--ed-line); border-radius: 10px; color: var(--ed-faint); font-size: .92rem; }
.cmp-cols { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.cmp-h3 { margin: 1.8rem 0 .6rem; font-size: 1rem; font-weight: 700; color: var(--ed-ink); }
.cmp-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; color: var(--ed-body); line-height: 1.55; }
.cmp-rules { max-width: 62ch; margin-top: 1rem; }
.cmp-themes { counter-reset: theme; list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.cmp-themes li { counter-increment: theme; display: flex; gap: .8rem; align-items: baseline; padding: .8rem 1rem; border: 1px solid var(--ed-line); border-radius: 10px; color: var(--ed-ink); }
.cmp-themes li::before { content: counter(theme); font-family: var(--font-display); font-weight: 800; color: var(--ed-green); }
.cmp-criteria { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.cmp-criterion-head { display: flex; justify-content: space-between; gap: 1rem; color: var(--ed-ink); }
.cmp-criterion-head span { font-variant-numeric: tabular-nums; color: var(--ed-green); font-weight: 700; }
.cmp-bar { display: block; height: 6px; margin-top: .45rem; border-radius: 999px; background: var(--ed-line-soft); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ed-green); }
.cmp-criteria p { margin: .4rem 0 0; font-size: .9rem; color: var(--ed-faint); }
.cmp-winners { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.cmp-winner { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px dashed var(--ed-line); }
.cmp-winner-say { display: grid; gap: .2rem; }
.cmp-winner-say b { color: var(--ed-ink); font-size: 1.05rem; }
.cmp-video, .cmp-video-frame { grid-column: 2; width: min(100%, 36rem); aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.cmp-video { display: grid; place-items: center; padding: 0; cursor: pointer; background: #0b1a20 center/cover no-repeat; }
.cmp-video:hover .vid-mark, .cmp-video:focus-visible .vid-mark { transform: scale(1.06); }

/* ==========================================================================================
   The showcase's sections (templates/includes/showcase/sections.html)

   Drawn on the Campaign Showcase home page and on a campaign's Agenda, Speakers, Sponsors and
   Gallery tabs, so they take the editorial tokens every dark public page carries — and the
   campaign's own colour, --sc-accent, where it has one.
   ========================================================================================== */
.sc-agenda, .sc-figures, .sc-speakers, .sc-sponsors, .sc-gallery, .sc-head, .sc-more, .sc-viewer {
	--sca: var(--sc-accent, var(--ed-green));
	--sca-soft: color-mix(in srgb, var(--sca) 16%, transparent);
	--sca-line: color-mix(in srgb, var(--sca) 45%, var(--ed-line));
	--sca-text: color-mix(in srgb, var(--sca) 58%, #fff);
	--sca-ink: var(--sc-accent-ink, #042f2b);
}
.sc-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.6rem; font-weight: 600; color: var(--sca-text); text-decoration: none; }
.sc-more span { transition: transform .25s ease; }
.sc-more:hover span { transform: translateX(3px); }
.ev-talk.ev-part { font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ed-green); }
.sc-none { padding: 1.4rem; border: 1px dashed var(--ed-line); border-radius: 14px; color: var(--ed-faint); }

/* a face in the programme: the photograph, or the initial on the accent */
.sc-face { flex: 0 0 auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sca-soft) center / cover no-repeat; color: var(--sca-text); font-weight: 700; box-shadow: 0 0 0 2px var(--cr-page, #0b0b12); }
.sc-face.is-small { width: 2rem; height: 2rem; font-size: .8rem; }

/* ---- the agenda: a row of weeks, then the one on screen ------------------------------------- */
.sc-weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); gap: .6rem; margin-bottom: 2rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.sc-week-tab { position: relative; display: grid; gap: .2rem; padding: .95rem 1.1rem 1rem; border: 1px solid var(--ed-line); border-radius: 14px; background: color-mix(in srgb, var(--ed-ink) 3%, transparent); color: var(--ed-body); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.sc-week-tab:hover { border-color: var(--sca-line); transform: translateY(-1px); }
.sc-week-tab[aria-selected="true"] { border-color: var(--sca); background: linear-gradient(160deg, var(--sca-soft), transparent 70%); }
.sc-week-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--sca); }
.sc-week-tab-n { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sca-text); }
.sc-week-tab-n i { padding: .05rem .4rem; border-radius: 999px; background: var(--sca); color: var(--sca-ink); font-style: normal; font-size: .62rem; letter-spacing: .06em; }
.sc-week-tab b { font-size: .98rem; line-height: 1.3; color: var(--ed-ink); }
.sc-week-tab-d { font-size: .8rem; color: var(--ed-faint); }
.sc-week + .sc-week { margin-top: 3rem; }
.sc-week-head { max-width: 46rem; margin-bottom: 1.4rem; }
.sc-week-label { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sca-text); }
.sc-week-head h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em; color: var(--ed-ink); }
.sc-week-line { margin: .5rem 0 0; color: var(--ed-body); line-height: 1.6; }

.sc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sc-item { position: relative; display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; padding: 1.3rem 1.4rem; border: 1px solid var(--ed-line); border-radius: 18px; background: color-mix(in srgb, var(--ed-ink) 2.5%, transparent); transition: border-color .2s ease, background-color .2s ease; }
.sc-item:hover { border-color: var(--sca-line); background: color-mix(in srgb, var(--sca) 5%, transparent); }
.sc-item-date { display: grid; justify-items: center; align-content: center; gap: .1rem; height: 4.4rem; border-radius: 14px; background: var(--sca-soft); color: var(--sca-text); }
.sc-item-date b { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.sc-item-date span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sc-item.is-competition .sc-item-date { background: color-mix(in srgb, var(--ed-ink) 6%, transparent); color: var(--ed-ink); }
.sc-item-body { display: grid; gap: .45rem; min-width: 0; }
.sc-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.sc-item-kind { padding: .15rem .6rem; border-radius: 999px; background: var(--sca-soft); color: var(--sca-text); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sc-item.is-competition .sc-item-kind { background: color-mix(in srgb, var(--ed-ink) 8%, transparent); color: var(--ed-ink); }
.sc-item-when { font-size: .86rem; color: var(--ed-faint); }
.sc-item h4 { margin: 0; font-size: 1.14rem; line-height: 1.35; }
.sc-item h4 a { color: var(--ed-ink); text-decoration: none; }
.sc-item h4 a:hover { color: var(--sca-text); }
.sc-item-line { margin: 0; color: var(--ed-body); font-size: .94rem; line-height: 1.55; }
.sc-item-go { align-self: center; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--ed-line); border-radius: 50%; color: var(--ed-body); text-decoration: none; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.sc-item:hover .sc-item-go { border-color: var(--sca); color: var(--sca-text); transform: translateX(2px); }

/* who is on stage: the leads each with a face, the panel in a row */
.sc-cast { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; margin-top: .45rem; padding-top: .9rem; border-top: 1px dashed var(--ed-line); }
.sc-cast-lead { display: flex; align-items: center; gap: .65rem; min-width: 0; max-width: 20rem; }
.sc-cast-lead span, .sc-cast-panel li span { display: grid; min-width: 0; }
.sc-cast em, .sc-cast-panel > em { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sca-text); }
.sc-cast b { font-size: .9rem; color: var(--ed-ink); }
.sc-cast small { font-size: .78rem; color: var(--ed-faint); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-cast-panel { flex: 1 1 100%; display: grid; gap: .5rem; }
.sc-cast-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem .9rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.sc-cast-panel li { display: flex; align-items: center; gap: .55rem; min-width: 0; }

/* ---- the numbers ----------------------------------------------------------------------------- */
.sc-figures { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.sc-figure { position: relative; display: grid; gap: .3rem; padding: 1.7rem 1.6rem 1.7rem; overflow: hidden; border: 1px solid var(--ed-line); border-radius: 20px; background: linear-gradient(170deg, var(--sca-soft), transparent 65%); text-align: left; }
.sc-figure::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sca) 35%, transparent), transparent 70%); }
.sc-figure b { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; color: var(--ed-ink); font-variant-numeric: tabular-nums; }
.sc-figure-label { font-weight: 600; color: var(--sca-text); }
.sc-figure-note { font-size: .88rem; color: var(--ed-faint); }

/* ---- speakers -------------------------------------------------------------------------------- */
.sc-speakers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); }
.sc-speaker { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ed-line); border-radius: 20px; background: color-mix(in srgb, var(--ed-ink) 2.5%, transparent); transition: border-color .2s ease, transform .25s ease; }
.sc-speaker:hover { border-color: var(--sca-line); transform: translateY(-3px); }
.sc-speaker-photo { position: relative; aspect-ratio: 4 / 3.4; background: var(--sca-soft) center 22% / cover no-repeat; }
.sc-speaker-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, color-mix(in srgb, var(--cr-page, #0b0b12) 85%, transparent)); }
.sc-speaker-photo span { display: grid; place-items: center; height: 100%; font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--sca-text); }
/* no photograph: a short band with the initial, rather than a tall empty frame */
.sc-speaker-photo:not([style]) { aspect-ratio: auto; height: 5.5rem; background: linear-gradient(135deg, var(--sca-soft), transparent 80%); }
.sc-speaker-photo:not([style]) span { justify-content: start; padding-left: 1.15rem; font-size: 2rem; }
.sc-speaker-photo:not([style]) + .sc-speaker-say { margin-top: 0; }
.sc-speaker-say { position: relative; display: grid; gap: .25rem; padding: 0 1.15rem 1.2rem; margin-top: -1.1rem; }
.sc-speaker-roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .2rem; }
.sc-speaker-roles span { padding: .15rem .55rem; border-radius: 999px; background: var(--sca); color: var(--sca-ink); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sc-speaker b { font-size: 1.05rem; line-height: 1.3; color: var(--ed-ink); }
.sc-speaker-role { font-size: .88rem; font-weight: 600; color: var(--ed-body); }
.sc-speaker-org { font-size: .84rem; color: var(--ed-faint); line-height: 1.4; }
.sc-speaker-talk { margin-top: .35rem; font-size: .82rem; line-height: 1.45; }
.sc-speaker-talk a { color: var(--sca-text); text-decoration: none; }
.sc-speaker-talk a:hover { text-decoration: underline; }
.sc-speaker.is-keynote { border-color: var(--sca-line); }

/* ---- sponsors: a row a tier, the plate larger the higher the tier ----------------------------- */
.sc-sponsors { display: grid; gap: 2.2rem; }
.sc-tier-name { max-width: none; display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-faint); }
.sc-tier-name::after { content: ""; flex: 1; height: 1px; background: var(--ed-line); }
.sc-tier-platinum .sc-tier-name span { color: var(--sca-text); }
.sc-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.sc-plate { display: flex; align-items: center; gap: 1rem; min-height: 5.5rem; padding: .9rem 1.4rem .9rem .9rem; border: 1px solid var(--ed-line); border-radius: 18px; background: color-mix(in srgb, var(--ed-ink) 3%, transparent); color: var(--ed-ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
a.sc-plate:hover { border-color: var(--sca-line); transform: translateY(-2px); }
.sc-plate img { width: 4rem; height: 4rem; padding: .35rem; border-radius: 12px; background: #fff; object-fit: contain; }
.sc-plate span { max-width: 16rem; font-weight: 600; line-height: 1.3; }
.sc-tier-platinum .sc-plate { min-height: 7rem; padding-right: 1.8rem; border-color: var(--sca-line); background: linear-gradient(160deg, var(--sca-soft), transparent 70%); }
.sc-tier-platinum .sc-plate img { width: 5.5rem; height: 5.5rem; }
.sc-tier-platinum .sc-plate span { font-size: 1.15rem; }

/* ---- the gallery ----------------------------------------------------------------------------- */
.sc-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; }
.sc-filter { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem; border: 1px solid var(--ed-line); border-radius: 999px; background: transparent; color: var(--ed-body); font: inherit; font-size: .88rem; cursor: pointer; }
.sc-filter i { font-style: normal; font-size: .76rem; color: var(--ed-faint); }
.sc-filter[aria-pressed="true"] { border-color: var(--sca); background: var(--sca-soft); color: var(--ed-ink); }
.sc-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); grid-auto-flow: dense; }
.sc-photos li:first-child { grid-column: span 2; grid-row: span 2; }
.sc-photos a { position: relative; display: block; height: 100%; min-height: 12rem; overflow: hidden; border-radius: 16px; background: var(--ed-line-soft); }
.sc-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.sc-photos a:hover img { transform: scale(1.05); }
.sc-photo-say { position: absolute; inset: auto 0 0 0; display: grid; gap: .2rem; padding: 2.5rem 1rem .9rem; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: .88rem; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.sc-photos a:hover .sc-photo-say, .sc-photos a:focus-visible .sc-photo-say { opacity: 1; transform: none; }
.sc-photo-say i { font-style: normal; font-size: .74rem; color: rgba(255, 255, 255, .75); }
@media (max-width: 640px) { .sc-photos li:first-child { grid-column: auto; grid-row: auto; } }

/* the viewer: one photograph at a time, over everything */
.sc-viewer { width: min(92vw, 70rem); max-height: 92vh; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.sc-viewer::backdrop { background: rgba(4, 4, 10, .88); backdrop-filter: blur(4px); }
.sc-viewer figure { margin: 0; display: grid; gap: .8rem; justify-items: center; }
.sc-viewer img { max-width: 100%; max-height: 80vh; border-radius: 14px; object-fit: contain; }
.sc-viewer figcaption { text-align: center; color: rgba(255, 255, 255, .85); }
.sc-viewer button { position: absolute; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.5rem; cursor: pointer; }
.sc-viewer button:hover { background: rgba(255, 255, 255, .18); }
.sc-viewer-x { top: -3.4rem; right: 0; }
.sc-viewer-prev { left: -3.6rem; top: 45%; }
.sc-viewer-next { right: -3.6rem; top: 45%; }
@media (max-width: 900px) { .sc-viewer-prev { left: .5rem; } .sc-viewer-next { right: .5rem; } }

@media (max-width: 640px) {
	.sc-item { grid-template-columns: 3.4rem minmax(0, 1fr); padding: 1.1rem; gap: .9rem; }
	.sc-item-date { height: 3.4rem; }
	.sc-item-date b { font-size: 1.25rem; }
	.sc-item-go { display: none; }
}

/* the header's More, while the showcase's menu has the bar */
.nav-more { position: relative; }
.nav-more summary { list-style: none; cursor: pointer; color: inherit; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " \25BE"; font-size: .75em; opacity: .7; }
.nav-more-menu { position: absolute; right: 0; top: calc(100% + .9rem); z-index: 50; display: grid; min-width: 13rem; padding: .4rem; border: 1px solid var(--cr-line); border-radius: 14px; background: var(--cr-card); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
.site-nav .nav-more-menu a { padding: .55rem .8rem; border-radius: 8px; color: var(--cr-ink); text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 500; }
.site-nav .nav-more-menu a::after { display: none; }
.site-nav .nav-more-menu a:hover { background: var(--cr-card-2); }
.header-capsule .nav-more summary { padding: .2rem 0 .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.site-menu-h { margin-top: .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================================
   One competition's page (www/competition.html), every class `cx-`

   A banner with the campaign's photograph fading into the page and a card of the prizes and the
   dates beside the title; the way from entries to winners; the podium; then the story beside the
   facts, which stay in view. Everything is the page's own tokens, so it reads in each design and
   in light and dark; where the month's look is on (theme-ncsm), the gradient and the four colours
   along it are the logo's (csat/brand.py), and elsewhere they are steps of the page's accent.
   ========================================================================================== */
.cx {
	--cx-g1: var(--nc-c1, var(--cr-accent));
	--cx-g2: var(--nc-c2, color-mix(in srgb, var(--cr-accent) 60%, var(--cr-ink)));
	--cx-g3: var(--nc-c3, var(--cr-accent-text));
	--cx-grad: linear-gradient(90deg, var(--cx-g1), var(--cx-g2) 50%, var(--cx-g3));
	--cx-w1: var(--cr-accent-text);
	--cx-w2: color-mix(in srgb, var(--cr-accent-text) 78%, var(--cr-ink));
	--cx-w3: color-mix(in srgb, var(--cr-accent-text) 60%, var(--cr-ink));
	--cx-w4: color-mix(in srgb, var(--cr-accent-text) 45%, var(--cr-ink));
	--cx-card: var(--cr-card, var(--surface));
	--cx-radius: 18px;
	--cx-gold: linear-gradient(145deg, #f3c653, #c8901c);
	--cx-silver: linear-gradient(145deg, #dfe5ec, #97a3b2);
	--cx-bronze: linear-gradient(145deg, #e4a877, #a9642f);
}
body.theme-ncsm .cx { --cx-w1: var(--nc-w1-lt, #2f6fd6); --cx-w2: var(--nc-w2-lt, #5b63c3); --cx-w3: var(--nc-w3-lt, #8a5fa3); --cx-w4: var(--nc-w4-lt, #c04656); }
html[data-theme="dark"] body.theme-ncsm .cx { --cx-w1: var(--nc-w1-dk, #7aa8ff); --cx-w2: var(--nc-w2-dk, #9aa2f2); --cx-w3: var(--nc-w3-dk, #c39ae0); --cx-w4: var(--nc-w4-dk, #ff95a0); }

.cx h1, .cx h2 { font-family: var(--font-display); color: var(--ink); }
.cx-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-size: .8rem; font-weight: 600; color: var(--petrol); }
.cx-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cx-link { font-size: .85rem; font-weight: 600; color: var(--petrol); text-decoration: none; }
.cx-link:hover { text-decoration: underline; }

/* ---- buttons ---- */
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .78rem 1.35rem; border: 1px solid transparent; border-radius: 999px; background: var(--cr-accent-solid); color: var(--cr-on-accent); font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--cr-accent) 80%, transparent); }
.cx-btn:hover { background: var(--cr-accent-hover); color: var(--cr-on-accent); transform: translateY(-1px); }
.cx-btn-quiet { background: color-mix(in srgb, var(--cx-card) 70%, transparent); border-color: var(--line); color: var(--ink); box-shadow: none; }
.cx-btn-quiet:hover { background: var(--cx-card); border-color: color-mix(in srgb, var(--cr-accent) 50%, var(--line)); color: var(--ink); }

/* ---- the banner ---- */
.cx-hero { position: relative; overflow: hidden; padding: 1.4rem 0 2.6rem; isolation: isolate; }
.cx-hero-bg { position: absolute; inset: 0 0 0 38%; z-index: -2; background: center / cover no-repeat; opacity: .5; filter: saturate(.85); }
.cx-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, var(--paper) 38%, color-mix(in srgb, var(--paper) 55%, transparent) 70%, color-mix(in srgb, var(--paper) 25%, transparent)),
		linear-gradient(0deg, var(--paper) 2%, transparent 45%),
		radial-gradient(40rem 22rem at 12% 0%, color-mix(in srgb, var(--cx-g1) 12%, transparent), transparent 70%);
}
.cx-crumb { font-size: .85rem; color: var(--muted); }
.cx-crumb a { color: var(--muted); text-decoration: none; }
.cx-crumb a:hover { color: var(--petrol); }
.cx-crumb span { margin: 0 .35rem; opacity: .6; }
.cx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 25rem); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.cx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cx-kind { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .85rem .3rem .3rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--cx-card) 80%, transparent); font-size: .82rem; font-weight: 600; color: var(--ink); }
.cx-kind-icon { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--cx-grad); color: #fff; }
.cx-kind-icon svg { width: 1.05rem; height: 1.05rem; }
.cx-state { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--cr-ink-2); }
.cx-state.is-open, .cx-state.is-running { background: color-mix(in srgb, var(--cr-good) 16%, transparent); color: var(--cr-good-text); }
.cx-state.is-open::before, .cx-state.is-running::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: cx-pulse 2s infinite; }
.cx-state.is-results { background: color-mix(in srgb, #d4a017 18%, transparent); color: color-mix(in srgb, #9a6a00 80%, var(--ink)); }
@keyframes cx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cx-hero h1 { margin: 1.1rem 0 .9rem; max-width: 16ch; font-size: clamp(2.3rem, 5.2vw, 4.2rem); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; }
.cx-lede { max-width: 44ch; margin: 0; font-size: 1.12rem; line-height: 1.6; color: var(--cr-ink-2); }
.cx-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }
.cx-note { max-width: 52ch; margin: 1rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }

/* the card beside the title: the prizes' sum, and the dates that matter */
.cx-glance { position: relative; overflow: hidden; padding: 1.6rem 1.6rem 1.3rem; border: 1px solid var(--line); border-radius: var(--cx-radius); background: color-mix(in srgb, var(--cx-card) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--cx-g1) 55%, transparent); }
.cx-glance::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--cx-grad); }
.cx-pool { display: grid; gap: .2rem; padding-bottom: 1.1rem; margin-bottom: .6rem; border-bottom: 1px dashed var(--line); }
.cx-pool-k { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cx-pool-v { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; background: var(--cx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-pool-v.is-words { font-size: 1.5rem; }
.cx-pool-say { font-size: .84rem; color: var(--muted); }
.cx-glance-facts { display: grid; margin: 0; }
.cx-glance-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.cx-glance-facts > div:last-child { border-bottom: 0; }
.cx-glance-facts dt { color: var(--muted); }
.cx-glance-facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }

/* from entries to winners */
.cx-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: clamp(2.2rem, 4vw, 3rem) 0 0; padding: 1.2rem 1.4rem; list-style: none; border: 1px solid var(--line); border-radius: var(--cx-radius); background: color-mix(in srgb, var(--cx-card) 75%, transparent); }
.cx-step { position: relative; display: flex; align-items: center; gap: .8rem; padding-right: 1rem; }
.cx-step:not(:last-child)::after { content: ""; flex: 1; height: 2px; min-width: 1.5rem; border-radius: 2px; background: var(--line); }
.cx-step.is-done:not(:last-child)::after { background: var(--cx-grad); }
.cx-step-dot { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--line); background: var(--cx-card); font-size: .85rem; font-weight: 700; color: var(--muted); }
.cx-step-dot svg { width: 1rem; height: 1rem; stroke-width: 2.6; }
.cx-step.is-done .cx-step-dot { border-color: transparent; background: var(--cr-accent-solid); color: var(--cr-on-accent); }
.cx-step.is-now .cx-step-dot { border-color: var(--cr-accent); background: var(--cr-accent-solid); color: var(--cr-on-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cr-accent) 20%, transparent); }
.cx-step.is-soon .cx-step-dot { border: 2px dashed var(--cr-accent); color: var(--petrol); }
.cx-step-say { display: grid; gap: .1rem; min-width: 0; white-space: nowrap; }
.cx-step-say b { font-size: .92rem; color: var(--ink); }
.cx-step-say span { font-size: .78rem; color: var(--muted); }
.cx-step.is-next .cx-step-say b { color: var(--muted); }

/* ---- the winners ---- */
.cx-results { padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--cx-card) 70%, transparent), transparent 70%); }
.cx-head { display: grid; gap: .2rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.cx-head h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.cx-head-say { max-width: 60ch; margin: .5rem 0 0; color: var(--muted); line-height: 1.6; }
.cx-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: end; margin: 0; padding: 0; list-style: none; }
.cx-place { --medal: var(--cx-bronze); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--cx-radius); background: var(--cx-card); box-shadow: 0 22px 50px -38px rgba(0, 0, 0, .45); }
.cx-place::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--medal); z-index: 1; }
/* first in the middle and highest, second on its left a step lower, third on its right lower still */
.cx-place.is-1 { --medal: var(--cx-gold); order: 2; margin-bottom: 2.6rem; border-color: color-mix(in srgb, #d4a017 45%, var(--line)); box-shadow: 0 30px 60px -36px color-mix(in srgb, #d4a017 55%, transparent); }
.cx-place.is-2 { --medal: var(--cx-silver); order: 1; margin-bottom: 1.3rem; }
.cx-place.is-3 { order: 3; }
.cx-place-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1rem; align-items: center; padding: 1.4rem 1.4rem 1.5rem; }
.cx-place-say { display: grid; gap: .15rem; }
.cx-place-say b { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; color: var(--ink); }
.cx-place.is-1 .cx-place-say b { font-size: 1.3rem; }
.cx-place-say span { font-size: .85rem; color: var(--muted); }
.cx-place-prize { grid-column: 1 / -1; justify-self: start; margin-top: .4rem; padding: .35rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--cr-accent) 12%, transparent); font-weight: 700; font-size: .95rem; color: var(--petrol); }
.cx-place-score { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); }
.cx-place .cx-link { grid-column: 1 / -1; }
.cx-medal { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--medal, var(--cx-bronze)); color: #fff; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 6px 14px -6px rgba(0, 0, 0, .4); }
.cx-place.is-1 .cx-medal { width: 3.3rem; height: 3.3rem; font-size: 1.35rem; }
.cx-film { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #0b0e24 center / cover no-repeat; cursor: pointer; }
.cx-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .45), transparent 60%); }
.cx-film-play { position: relative; z-index: 1; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #10143a; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); transition: transform .2s ease; }
.cx-film-play svg { width: 1.3rem; height: 1.3rem; margin-left: 3px; }
.cx-film:hover .cx-film-play, .cx-film:focus-visible .cx-film-play { transform: scale(1.08); }
.cx-film-frame { display: block; }
.cx-runners { display: grid; gap: .4rem; max-width: 46rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.cx-runners li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: .8rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.cx-runner-rank { font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.cx-runners b { color: var(--ink); }
.cx-runners span { color: var(--muted); }
.cx-runners em { font-style: normal; font-weight: 600; color: var(--petrol); }

/* ---- the story, and the facts beside it ---- */
.cx-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cx-sec + .cx-sec { margin-top: clamp(2.8rem, 5vw, 3.8rem); padding-top: clamp(2.4rem, 4vw, 3.2rem); border-top: 1px solid var(--line); }
.cx-sec h2 { margin: 0 0 1.2rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.cx-prose { max-width: 64ch; color: var(--cr-ink-2); font-size: 1.02rem; line-height: 1.75; }
.cx-prose p { margin: 0 0 1rem; }
.cx-prose p:first-child { font-size: 1.12rem; color: var(--ink); }

.cx-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.cx-themes li { position: relative; display: grid; gap: .6rem; align-content: start; min-height: 7.5rem; padding: 1.2rem 1.3rem 1.3rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--cx-card); font-weight: 600; line-height: 1.4; color: var(--ink); transition: border-color .2s ease, transform .25s ease; }
.cx-themes li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cx-c); }
.cx-themes li::after { content: ""; position: absolute; right: -2.5rem; bottom: -2.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: color-mix(in srgb, var(--cx-c) 9%, transparent); }
.cx-themes li:hover { border-color: color-mix(in srgb, var(--cx-c) 45%, var(--line)); transform: translateY(-2px); }
.cx-theme-n { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--cx-c); }

.cx-rules { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.cx-rules li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .8rem; align-items: start; color: var(--cr-ink-2); line-height: 1.6; }
.cx-tick { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-top: -.05rem; border-radius: 50%; background: color-mix(in srgb, var(--cr-accent) 14%, transparent); color: var(--petrol); }
.cx-tick svg { width: .95rem; height: .95rem; stroke-width: 2.6; }

.cx-weights { display: flex; gap: 3px; height: 2.6rem; margin-bottom: 1.4rem; overflow: hidden; border-radius: 12px; }
.cx-weights i { display: grid; place-items: center; min-width: 0; background: var(--cx-c); color: #fff; font-style: normal; font-size: .78rem; font-weight: 700; transition: filter .2s ease; }
html[data-theme="dark"] body.theme-ncsm .cx-weights i { color: #0b1433; }
.cx-weights i:hover { filter: brightness(1.08); }
.cx-criteria { display: grid; margin: 0; padding: 0; list-style: none; }
.cx-criteria li { display: grid; grid-template-columns: .8rem minmax(0, 1fr) auto; gap: .9rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--line-soft); }
.cx-crit-dot { width: .7rem; height: .7rem; border-radius: 3px; background: var(--cx-c); transform: translateY(1px); }
.cx-criteria b { color: var(--ink); }
.cx-criteria p { margin: .25rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.cx-crit-w { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cx-c); }

.cx-side { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.cx-card { padding: 1.3rem 1.35rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cx-card); }
.cx .cx-card-h { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cx-card-icon { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: color-mix(in srgb, var(--cr-accent) 12%, transparent); color: var(--petrol); }
.cx-card-icon svg { width: 1rem; height: 1rem; }
.cx-prizes { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.cx-prizes li { --medal: var(--cx-bronze); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: center; }
.cx-prizes li.is-1 { --medal: var(--cx-gold); }
.cx-prizes li.is-2 { --medal: var(--cx-silver); }
.cx-prizes .cx-medal { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
.cx-prizes b { display: block; font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); }
.cx-prizes li.is-1 b { font-size: 1.3rem; }
.cx-prizes i { display: block; font-style: normal; font-size: .82rem; color: var(--muted); }
.cx-facts { display: grid; margin: 0; }
.cx-facts > div { display: grid; gap: .1rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); }
.cx-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cx-facts dt { font-size: .8rem; color: var(--muted); }
.cx-facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.cx-who { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.cx-who li { position: relative; padding-left: 1.1rem; font-size: .92rem; line-height: 1.5; color: var(--cr-ink-2); }
.cx-who li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-grad); }
.cx-side-btn { width: 100%; }
.cx-ask { display: flex; gap: .8rem; align-items: center; }
.cx-ask div { display: grid; gap: .1rem; font-size: .88rem; color: var(--muted); }
.cx-ask b { color: var(--ink); font-size: .95rem; }
.cx-ask a { color: var(--petrol); font-weight: 600; word-break: break-all; }

.cx-more { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(4rem, 7vw, 5.5rem); border-top: 1px solid var(--line); }

/* the national quiz's tab on a campaign's page (www/campaign.html): the competition page's shapes */
.cx-quiz { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.cx-quiz-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(19rem, 24rem); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cx-quiz-main h2 { margin: 1rem 0 .8rem; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
.cx-quiz .cx-pool .cx-prizes { margin-top: .7rem; }
.cx-quiz-sec { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.cx-quiz .cx-quiz-h { margin: 0 0 1.4rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.cx-quiz .board-rule { max-width: 70ch; margin: 1.4rem 0 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
.cx-board { display: grid; gap: .5rem; max-width: 52rem; margin: 0; padding: 0; list-style: none; }
.cx-board li { --medal: var(--cx-bronze); display: grid; grid-template-columns: 2.6rem minmax(8rem, 14rem) minmax(0, 1fr) 3.6rem; gap: 1rem; align-items: center; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--cx-card); }
.cx-board li.is-1 { --medal: var(--cx-gold); border-color: color-mix(in srgb, #d4a017 40%, var(--line)); }
.cx-board li.is-2 { --medal: var(--cx-silver); }
.cx-board-rank { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.cx-board .cx-medal { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
.cx-board-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-board-bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.cx-board-bar i { display: block; height: 100%; border-radius: inherit; background: var(--cx-grad); }
.cx-board-pct { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
/* the quiz open to everyone (templates/includes/campaign_quiz_play.html): the door is a card of its own */
.cx-take { margin-top: clamp(2.4rem, 5vw, 3.4rem); scroll-margin-top: 6rem; }
.cx-door { position: relative; overflow: hidden; display: grid; gap: 1.4rem; max-width: 52rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--cx-radius); background: var(--cx-card); box-shadow: 0 24px 60px -40px color-mix(in srgb, var(--cx-g1) 55%, transparent); }
.cx-door::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--cx-grad); }
.cx-door-head h3 { margin: 0 0 .4rem; font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.cx-door-head p:last-child { margin: 0; color: var(--muted); line-height: 1.6; }
.cx-door-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.cx-door-fields label { display: grid; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--ink); }
.cx-door-fields label i { font-style: normal; font-weight: 400; color: var(--muted); }
.cx-door-fields input { width: 100%; padding: .75rem .9rem; border: 1px solid var(--cr-field-border, var(--line)); border-radius: 10px; background: var(--cr-field, var(--paper)); color: var(--ink); font: inherit; font-size: 1rem; }
.cx-door-fields input:focus { outline: none; border-color: var(--cr-accent); box-shadow: 0 0 0 3px var(--cr-field-ring, color-mix(in srgb, var(--cr-accent) 30%, transparent)); }
.cx-door-do { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.cx-door-do p { flex: 1 1 18rem; margin: 0; font-size: .82rem; line-height: 1.55; color: var(--muted); }
.cx-take .ct-paper:not(.is-full) { max-width: 52rem; }
.cx-result { display: grid; justify-items: start; gap: .5rem; max-width: 52rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--cx-radius); background: var(--cx-card); }
.cx-result-score { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; background: var(--cx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-result p { margin: 0; color: var(--cr-ink-2); }
.cx-result .cx-result-note { font-size: .86rem; color: var(--muted); }
.cx-result .cx-btn { margin-top: .6rem; }
@media (max-width: 640px) {
	.cx-door-fields { grid-template-columns: minmax(0, 1fr); }
}
.cx-quiz-empty { display: grid; justify-items: center; gap: .4rem; padding: 2.4rem 1rem; border: 1px dashed var(--line); border-radius: var(--cx-radius); text-align: center; color: var(--muted); }
.cx-quiz-empty b { color: var(--ink); font-size: 1.05rem; }
.cx-quiz-empty .cx-btn { margin-top: .8rem; }
@media (max-width: 980px) {
	.cx-quiz-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.cx-board li { grid-template-columns: 2.4rem minmax(0, 1fr) 3.2rem; }
	.cx-board-bar { grid-column: 2 / -1; grid-row: 2; }
}

@media (max-width: 980px) {
	.cx-hero-grid, .cx-body { grid-template-columns: minmax(0, 1fr); }
	.cx-hero-bg { inset: 0; opacity: .22; }
	.cx-hero::after { background: linear-gradient(0deg, var(--paper) 10%, color-mix(in srgb, var(--paper) 70%, transparent)); }
	.cx-side { position: static; }
	.cx-podium { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
	.cx-place.is-1, .cx-place.is-2, .cx-place.is-3 { order: 0; margin-bottom: 0; }
}
@media (max-width: 640px) {
	.cx-steps { grid-auto-flow: row; gap: .8rem; }
	.cx-step:not(:last-child)::after { display: none; }
	.cx-themes { grid-template-columns: minmax(0, 1fr); }
	.cx-themes li { min-height: 0; }
	.cx-runners li { grid-template-columns: 2rem minmax(0, 1fr); }
	.cx-runners li > span, .cx-runners em { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.cx-state::before { animation: none !important; }
}

/* ==========================================================================================
   A campaign's sponsors as tiles (templates/includes/sponsor_tiles.html), every class `spx-`: the
   home page of the month's design and a campaign's Sponsors tab. A tier a row, Platinum first, each
   under a plain label on a hairline marked with its metal. Tiles are the same size within a tier and
   step down tier by tier, so a Platinum sponsor never reads as a partner. A tile is one white card on a hairline,
   the logo large and centred on it (or the initials in the month's gradient) and the name quiet
   beneath — no box within a box, no shadow; on a dark ground the logo alone keeps a white plate,
   since logos are drawn for white. Under the pointer only the edge takes the accent.
   ========================================================================================== */
.spx {
	/* the initials sit on the tile's white in either theme, so they take the light face's colours */
	--spx-mono: linear-gradient(90deg, color-mix(in srgb, var(--cr-accent-solid) 80%, #000), color-mix(in srgb, var(--cr-accent-solid) 60%, #000));
	--tile: 12rem; --logo: 64px;
	display: grid; gap: clamp(1.8rem, 3.5vw, 2.6rem);
}
/* where the month's look is on, the initials are the logo's own gradient */
.theme-ncsm .spx, .page-ncsm .spx {
	--spx-mono: linear-gradient(90deg, var(--nc-w1-lt, #2f6fd6), var(--nc-w3-lt, #8a5fa3) 55%, var(--nc-w4-lt, #c04656));
}
.spx-tier { min-width: 0; }
.spx-tier-platinum { --tile: 17rem; --logo: 92px; --metal: linear-gradient(135deg, #e4ecff, #5f74a8); }
.spx-tier-gold { --tile: 14.5rem; --logo: 76px; --metal: linear-gradient(135deg, #f7d774, #c08f16); }
.spx-tier-silver { --tile: 12.5rem; --logo: 64px; --metal: linear-gradient(135deg, #f1f3f6, #9aa2af); }
.spx-tier-bronze { --tile: 11rem; --logo: 54px; --metal: linear-gradient(135deg, #eab384, #a05a26); }
.spx-tier-partner { --tile: 9.5rem; --logo: 44px; --metal: var(--petrol); }
.spx-tier-name { display: flex; align-items: center; gap: 1rem; max-width: none; margin: 0 0 1rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.spx-tier-name::after { content: ""; flex: 1; min-width: 2rem; height: 1px; background: var(--line); }
/* the tier's metal, as a small medal before its name */
.spx-tier-name > span { display: inline-flex; align-items: center; gap: .55rem; }
.spx-tier-name > span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--metal, var(--petrol)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
/* the top tier's label carries a little more weight */
.spx-tier-platinum .spx-tier-name { font-size: .82rem; color: var(--ink); }
.spx-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--tile), 100%), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.spx-tile { min-width: 0; }
.spx-in { display: flex; flex-direction: column; align-items: center; gap: 1rem; height: 100%; padding: 1.6rem 1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cr-card, var(--surface)); color: var(--ink); text-align: center; text-decoration: none; transition: border-color .2s ease; }
/* pointing at a tile only colours its edge: nothing lifts and nothing casts a shadow */
a.spx-in:hover { border-color: color-mix(in srgb, var(--petrol) 50%, var(--line)); color: var(--ink); }
a.spx-in:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
.spx-logo { display: grid; place-items: center; width: 100%; height: calc(var(--logo) + .5rem); }
.spx-logo img { max-width: 82%; max-height: var(--logo); object-fit: contain; }
.spx-logo b { font-family: var(--font-display); font-size: calc(var(--logo) * .42); font-weight: 700; letter-spacing: -.03em; background: var(--spx-mono); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* on a dark ground the logo keeps a white plate of its own, since logos are drawn for white */
html[data-theme="dark"] .spx-logo { height: calc(var(--logo) + 2rem); padding: 1rem; border-radius: 11px; background: #fff; }
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .spx-logo { height: calc(var(--logo) + 2rem); padding: 1rem; border-radius: 11px; background: #fff; }
}
.spx-name { margin-top: auto; font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--cr-ink-2, var(--ink)); }
.spx-name span { color: var(--muted); font-weight: 500; transition: color .2s ease; }
a.spx-in:hover .spx-name span { color: var(--petrol); }
.spx-blurb { margin-top: -.5rem; font-size: .8rem; line-height: 1.5; color: var(--muted); }
/* on a phone Platinum keeps a row to itself and the rest go two to a row */
@media (max-width: 600px) {
	.spx-tier-platinum { --tile: 13rem; --logo: 72px; }
	.spx-tier-gold, .spx-tier-silver, .spx-tier-bronze { --tile: 9rem; --logo: 48px; }
	.spx-tier-partner { --tile: 9rem; --logo: 40px; }
}

/* "Soon" beside Courses in the header, the menus and the footer while the catalogue is coming
   (csat/courses_gate.py) */
.soon-tag { display: inline-block; margin-left: .35rem; padding: .08rem .42rem; border-radius: 999px; background: color-mix(in srgb, var(--cr-accent) 14%, transparent); color: var(--petrol); font-size: .62rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; vertical-align: .12em; }
.site-footer .soon-tag { background: rgba(255, 255, 255, .12); color: inherit; }
.palette-ncsm .site-nav .soon-tag { background: color-mix(in srgb, var(--nc-accent, #2459c0) 14%, transparent); color: var(--nc-accent, #2459c0); }
html[data-theme="dark"] .palette-ncsm .site-nav .soon-tag { background: rgba(255, 255, 255, .14); color: #e6e9ff; }

/* ==========================================================================================
   Registering an organization (www/register_organization.html): the log-in's door, a wider card
   for three steps of a form, and under the sphere what happens after the button.
   ========================================================================================== */
.reg-page .lg-orb-wrap { width: min(560px, 100%, 54vh); }
.reg-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.reg-after li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .1rem .6rem; }
.reg-after span { grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--cr-accent-text, var(--petrol)); }
.reg-after b { font-size: .9rem; color: var(--ink); }
.reg-after i { font-style: normal; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.reg-card { max-width: 30rem; }
.reg-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0 0 1.4rem; }
.reg-tab { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; text-align: left; cursor: pointer; }
.reg-tab i { display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: color-mix(in srgb, var(--muted) 16%, transparent); font-style: normal; font-size: .72rem; }
/* a step's name wraps to a second line rather than being cut off in the middle of a word */
.reg-tab span { min-width: 0; line-height: 1.2; }
.reg-tab.is-current { border-color: var(--cr-accent); color: var(--ink); background: color-mix(in srgb, var(--cr-accent) 8%, transparent); }
.reg-tab.is-current i { background: var(--cr-accent-solid); color: var(--cr-on-accent); }
.reg-tab.is-done i { background: color-mix(in srgb, var(--cr-accent) 25%, transparent); color: var(--cr-accent-text, var(--petrol)); }
.reg-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.reg-step[hidden] { display: none; }
.reg-step .login-input { margin-bottom: 1rem; }
.reg-step textarea.login-input { resize: vertical; min-height: 4.5rem; font: inherit; }
.reg-step select.login-input { appearance: auto; }
.reg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .9rem; }
.login-label em { font-style: normal; color: var(--cr-accent-text, var(--petrol)); }
.reg-legend { margin: .4rem 0 .8rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.reg-note { margin: 0 0 1rem; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.reg-note b { color: var(--ink); }
.reg-do { display: flex; gap: .7rem; margin-top: .4rem; }
.reg-do [hidden] { display: none; }
.reg-do .login-submit { flex: 1; margin-top: 0; }
.reg-do .login-submit[disabled] { cursor: not-allowed; opacity: .55; }
.reg-facts { display: grid; margin: 0 0 1.2rem; }
.reg-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.reg-facts dt { color: var(--muted); }
.reg-facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; word-break: break-all; }
@media (max-width: 600px) {
	.reg-after, .reg-two { grid-template-columns: minmax(0, 1fr); }
	/* on a phone the other steps are their numbers, and the one you are on keeps its name */
	.reg-tab span { display: none; }
	.reg-tab.is-current { flex: 1; }
	.reg-tab.is-current span { display: block; }
	.reg-rail { display: flex; }
}

/* ==========================================================================================
   The campaign quiz's paper, full screen (templates/includes/campaign_quiz_play.html): a quiz and
   nothing else, so it uses the whole screen for it. A wash of the month's colours behind; the
   question on a card that takes the middle of the screen, set large; each answer a tile with its
   letter, the chosen one filled; the progress in the logo's gradient and the clock as a pill. The
   event quiz's paper (templates/includes/event_contest.html) keeps its own plainer shape.
   ========================================================================================== */
.cx-take .ct-paper.is-full {
	padding: clamp(1rem, 3vh, 2rem) clamp(1rem, 4vw, 2.5rem) calc(clamp(1rem, 3vh, 1.8rem) + env(safe-area-inset-bottom, 0px));
	background:
		radial-gradient(50rem 30rem at 0% 0%, color-mix(in srgb, var(--cx-g1) 16%, transparent), transparent 70%),
		radial-gradient(46rem 30rem at 100% 100%, color-mix(in srgb, var(--cx-g3) 13%, transparent), transparent 70%),
		var(--paper);
}
.cx-take .ct-paper.is-full > * { max-width: 820px; }
/* the head: who, how far, how long */
.cx-take .ct-paper.is-full .ct-head { display: grid; gap: .7rem; background: transparent; box-shadow: none; }
.cx-take .ct-paper.is-full .ct-bar { margin: 0; padding: 0; border: 0; font-size: .92rem; color: var(--cr-ink-2); }
.cx-take .ct-paper.is-full .ct-clock { padding: .35rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--cr-danger, #c0392b) 12%, transparent); font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.cx-take .ct-paper.is-full .ct-prog { height: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cx-take .ct-paper.is-full .ct-prog-fill { background: var(--cx-grad); }
.cx-take .ct-paper.is-full .ct-step { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-accent-text, var(--petrol)); }
/* the question: a card that takes the middle of the screen */
.cx-take .ct-paper.is-full > .ct-questions {
	margin-top: clamp(.8rem, 2vh, 1.4rem);
	padding: clamp(1.4rem, 4vh, 2.6rem) clamp(1.2rem, 4vw, 2.8rem);
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--cx-card);
	box-shadow: 0 30px 70px -44px color-mix(in srgb, var(--cx-g1) 60%, transparent);
}
.cx-take .ct-paper.is-full .ct-q { counter-reset: opt; }
.cx-take .ct-paper.is-full .ct-q-cat { display: inline-block; margin: 0 0 .9rem; padding: .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--cr-accent) 10%, transparent); font-size: .76rem; font-weight: 600; color: var(--cr-accent-text, var(--petrol)); }
.cx-take .ct-paper.is-full .ct-q-text { margin: 0 0 clamp(1.1rem, 3vh, 1.8rem); font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
/* each answer a tile with its letter; the native control stays for the keyboard and the screen
   reader, and the tile shows its state */
.cx-take .ct-paper.is-full .ct-opt {
	position: relative;
	counter-increment: opt;
	align-items: center;
	gap: 1rem;
	margin-top: .7rem;
	padding: 1rem 1.2rem;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	background: color-mix(in srgb, var(--paper) 60%, var(--cx-card));
	font-size: clamp(1rem, 1.5vw, 1.1rem);
	color: var(--ink);
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cx-take .ct-paper.is-full .ct-opt::before {
	content: counter(opt, upper-alpha);
	display: grid; place-items: center; flex: none;
	width: 2.2rem; height: 2.2rem; border-radius: 10px;
	border: 1.5px solid var(--line);
	font-family: var(--font-display); font-weight: 700; font-size: .95rem;
	color: var(--muted);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cx-take .ct-paper.is-full .ct-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cx-take .ct-paper.is-full .ct-opt:hover { border-color: color-mix(in srgb, var(--cr-accent) 55%, var(--line)); transform: translateY(-1px); }
.cx-take .ct-paper.is-full .ct-opt:has(input:focus-visible) { outline: 2px solid var(--cr-accent); outline-offset: 2px; }
.cx-take .ct-paper.is-full .ct-opt:has(input:checked) {
	border-color: var(--cr-accent);
	background: color-mix(in srgb, var(--cr-accent) 10%, var(--cx-card));
	box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--cr-accent) 80%, transparent);
}
.cx-take .ct-paper.is-full .ct-opt:has(input:checked)::before { border-color: transparent; background: var(--cr-accent-solid); color: var(--cr-on-accent); }
.cx-take .ct-paper.is-full .ct-opt:has(input:disabled) { opacity: 1; }
.cx-take .ct-paper.is-full .ct-input { margin-top: 0; padding: 1rem 1.2rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--cr-field, var(--paper)); color: var(--ink); font-size: 1.15rem; }
.cx-take .ct-paper.is-full .ct-input:focus { outline: none; border-color: var(--cr-accent); box-shadow: 0 0 0 3px var(--cr-field-ring, color-mix(in srgb, var(--cr-accent) 30%, transparent)); }
/* the foot: the one-way rule on the left, the button on the right, where a thumb and a hand are */
.cx-take .ct-paper.is-full > .ct-do { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; margin-top: clamp(.8rem, 2vh, 1.2rem); padding-top: 0; border-top: 0; }
.cx-take .ct-paper.is-full > .ct-do .cx-btn { min-width: 12rem; padding: .95rem 1.8rem; font-size: 1rem; }
.cx-take .ct-paper.is-full .ct-oneway { max-width: 34ch; }
@media (max-width: 700px) {
	.cx-take .ct-paper.is-full > .ct-questions { border-radius: 18px; }
	.cx-take .ct-paper.is-full > .ct-do { flex-direction: column; align-items: stretch; }
	.cx-take .ct-paper.is-full > .ct-do .cx-btn { width: 100%; min-height: 52px; }
	.cx-take .ct-paper.is-full .ct-oneway { max-width: none; text-align: center; }
}

/* ==========================================================================================
   The campaign and event directories (www/campaigns.html `campaigns-dir`, www/events.html
   `events-dir`), and the news, organizations and verify pages, which open the same way, in the National Cyber Security Month's design, drawn the way the month's home
   page is: on its plain ground, opening light like its section headings — the dot eyebrow, a firm
   title, what it says beside it, and the directory's figures (templates/includes/dir_intro.html);
   the dark photograph band is kept for a campaign's own page, so an index never looks like the
   place it leads to — then shelves under a plain title with a
   pill for the count, soft pills for the jumps and the states, and each campaign one white card
   on a hairline, its photograph inset — no wash of colour, no bar drawn across it, only its edge
   taking the accent under the pointer.
   ========================================================================================== */
/* the page on the home page's own ground: plain, without the wash the other campaign pages wear */
html:not([data-theme="dark"]):has(> body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page)) { background: #ffffff; }
html:not([data-theme="dark"]) body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page).page-dark { --cr-page: #ffffff; background: #ffffff; }
html[data-theme="dark"] body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page).page-dark { background: var(--cr-page); }

/* the dark band — a campaign's own page and /learn — drawn as the home page draws the month in
   numbers: a photograph of a hall under
   the night's indigo, fixed to the window so the band slides over it, the logo's circuit faint over
   that, and on it the heading in white and what the directory adds up to */
.dir-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* up under the sticky header (70px, 58px on a phone), so the capsule floats on the band and not
	   on a strip of page above it */
	margin-top: -80px;
	padding: clamp(8.5rem, 13vw, 10rem) 0 clamp(2.8rem, 5vw, 3.6rem);
	background-color: #0c1030;
	background-image: linear-gradient(100deg, rgba(12, 16, 48, .96) 0%, rgba(12, 16, 48, .9) 55%, rgba(12, 16, 48, .8) 100%), var(--img, none);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: #fff;
	--ink: #fff;
	--muted: #b9bfe3;
	--petrol: var(--nc-accent-dk-text, #8ab2ff);
	--line: rgba(255, 255, 255, .14);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
	.dir-band { background-attachment: scroll; }
}
.dir-band .wrap { position: relative; z-index: 1; }
.dir-band-circuit { position: absolute; z-index: 0; right: -120px; bottom: -160px; width: 620px; opacity: .14; pointer-events: none; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-dir-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2.5rem, 6vw, 5rem); align-items: end; padding: 0; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-dir-hero .reach-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; padding: 0; border: 0; font-size: .82rem; font-weight: 600; color: var(--petrol); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-dir-hero .reach-eyebrow i { width: 6px; height: 6px; border-radius: 50%; clip-path: none; background: currentColor; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-dir-hero h1 { max-width: 16ch; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.06; letter-spacing: -.04em; color: var(--ink); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-dir-hero p { max-width: 52ch; padding-top: 0; border-top: 0; border-image: none; font-size: 1rem; line-height: 1.6; color: var(--muted); }
/* the figures: the numbers band's, smaller, on a plain hairline */
.dir-band-figures { display: flex; flex-wrap: wrap; gap: 1.2rem clamp(2.5rem, 6vw, 4.5rem); margin: clamp(2rem, 4vw, 2.8rem) 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.dir-band-figures > div { display: flex; flex-direction: column-reverse; gap: .35rem; }
.dir-band-figures dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.dir-band-figures dt { font-size: .86rem; font-weight: 500; color: var(--muted); }
@media (max-width: 900px) {
	body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-dir-hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* the jumps to each shelf, and the order they are in */
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-filters { padding: 1.8rem 0 1.3rem; border-top: 0; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-filter { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .5rem .45rem .95rem; border: 0; border-radius: 999px; clip-path: none; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: .84rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cr-ink-2, var(--ink)); transition: background-color .2s ease, color .2s ease; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-filter:hover { background: color-mix(in srgb, var(--petrol) 10%, transparent); color: var(--petrol); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-filter .n,
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-shelf-head .n { display: inline-grid; place-items: center; min-width: 1.5rem; margin: 0; padding: .1rem .45rem; border-radius: 999px; background: var(--cr-card, var(--surface)); font-family: var(--font-body); font-size: .72rem; font-weight: 600; color: var(--muted); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-filters .meta-line { font-family: var(--font-body); font-size: .8rem; color: var(--muted); }

/* a shelf's title, like a section's on the home page, with its count in a pill */
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-shelf-head { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 1.1rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-shelf-head .n { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* each campaign: a white card on a hairline, the photograph inset in it */
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.dir-lead, .ed-camp-card) { gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--cr-card, var(--surface)); transition: border-color .2s ease, transform .16s var(--cr-ease); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.dir-lead, .ed-camp-card):hover { border-color: color-mix(in srgb, var(--petrol) 45%, var(--line)); background: var(--cr-card, var(--surface)); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.dir-lead, .ed-camp-card):focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-card::before { display: none; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.dir-lead-figure, .ed-camp-figure) { border: 0; border-radius: 14px; overflow: hidden; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-grid-one .ed-camp-figure { border-right: 0; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.dir-lead-body, .ed-camp-body) { padding: 1.4rem 1.5rem 1.2rem 1.9rem; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-grid-one .ed-camp-body { padding: 1.6rem 1.8rem 4.2rem 2.1rem; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.dir-lead-body h2, .ed-camp-card h3) { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; color: var(--ink); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .dir-lead-body h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-type { font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--petrol); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.dir-lead-foot, .ed-camp-foot) { border-top: 1px solid var(--line); font-family: var(--font-body); font-size: .82rem; color: var(--muted); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-counts { gap: .35rem 1rem; font-size: .82rem; color: var(--muted); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-when b { font-family: var(--font-body); font-size: .82rem; color: var(--cr-ink-2, var(--ink)); }

/* the states and the flag, as pills */
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--petrol) 12%, transparent); font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--petrol); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-pill:not(.ed-pill-quiet)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 20%, transparent); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-pill-quiet { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-flag { padding: .25rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #10143a; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .dir-lead-figure .ed-camp-flag { top: .8rem; bottom: auto; left: .8rem; }

/* the way in: a round arrow, as on the home page's event cards */
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-go { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; clip-path: none; background: var(--cr-card, var(--surface)); color: var(--muted); transition: border-color .2s ease, color .2s ease; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-card:hover .ed-camp-go { border-color: color-mix(in srgb, var(--petrol) 50%, var(--line)); background: var(--cr-card, var(--surface)); color: var(--petrol); }

/* a card with its photograph on top (a shelf of several) rather than beside: even padding, and
   room at the foot for the round arrow */
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-grid:not(.ed-camp-grid-one) .ed-camp-body { padding: 1.2rem 1.1rem 3.8rem; }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-grid:not(.ed-camp-grid-one) .ed-camp-figure { height: 180px; }
/* a state or a city on the photograph itself is a white pill, so it reads on any picture */
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.ed-camp-figure, .dir-lead-figure) .ed-pill { background: rgba(255, 255, 255, .92); color: var(--nc-accent, #2459c0); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.ed-camp-figure, .dir-lead-figure) .ed-pill:not(.ed-pill-quiet)::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nc-accent, #2459c0) 20%, transparent); }
body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) :is(.ed-camp-figure, .dir-lead-figure) .ed-pill-quiet { background: rgba(255, 255, 255, .92); color: #50577c; }
body.theme-ncsm.events-dir :is(.ed-camp-figure, .dir-lead-figure) .ed-camp-flag { top: .8rem; bottom: auto; left: .8rem; }
body.theme-ncsm.events-dir :is(.ed-camp-figure, .dir-lead-figure) .ed-pill { top: .8rem; right: .8rem; }

/* ==========================================================================================
   /learn while the courses are coming soon (www/learn.html), in the National Cyber Security
   Month's design: the directories' opening band (`dir-band`) made one whole screen — the header
   floating on it, the news and the ways in on the left, the three things every course will be
   along the foot where the directories put their figures.
   ========================================================================================== */
.dir-band-full { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh + 80px); min-height: calc(100svh + 80px); padding: 8.5rem 0 3rem; }
.dir-band-full .wrap { width: 100%; }
.soon-copy { max-width: 40rem; }
.soon-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.1rem; }
.soon-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--petrol); }
.soon-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.soon-state { padding: .22rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .74rem; font-weight: 600; color: #fff; }
.dir-band-full h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; color: #fff; }
.soon-lede { max-width: 36rem; margin: 1.3rem 0 2rem; font-size: 1.06rem; line-height: 1.65; color: var(--muted); }
.soon-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.dir-band-full .btn-ghost { background: rgba(255, 255, 255, .09); color: #fff; }
.dir-band-full .btn-ghost:hover { background: rgba(255, 255, 255, .17); color: #fff; }
.soon-note { max-width: 32rem; margin: 1rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }
.dir-band-full .dir-band-figures { margin-top: clamp(3rem, 8vh, 5rem); }
@media (max-width: 600px) {
	.soon-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* ---- the header over a dark band ---------------------------------------------------------
   The light face's capsule is white glass, drawn for the home page's white; over a directory's
   dark band (`dir-band`: a campaign's page, /learn) it read as a milky bar. While the band is
   behind it (`is-on-band`, csat_web.html) it takes the dark face's glass, and gives it back once
   the page has scrolled past onto its white. */
.palette-ncsm .header-row { transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band { --ink: #eef0ff; --cr-ink-2: #c3c8e8; --line: rgba(255, 255, 255, .12); }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .header-row {
	background: linear-gradient(120deg, rgba(24, 29, 70, .62), rgba(13, 17, 46, .5));
	border-color: rgba(255, 255, 255, .14);
	box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .2);
}
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .brand-logo { filter: brightness(1.35) saturate(1.15); }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .site-nav a { color: #e6e9ff; }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .site-nav a::after { background: rgba(255, 255, 255, .3); }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .site-nav a:hover::after,
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .site-nav a[aria-current]::after { background: var(--nc-accent-dk, #7aa8ff); }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .site-nav .soon-tag { background: rgba(255, 255, 255, .14); color: #e6e9ff; }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .theme-toggle { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #eef0ff; }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .theme-toggle:hover { border-color: var(--nc-accent-dk, #7aa8ff); color: var(--nc-accent-dk, #7aa8ff); }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .account-trigger { border-color: rgba(255, 255, 255, .2); color: #eef0ff; }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .account-caret { color: rgba(255, 255, 255, .6); }
html:not([data-theme="dark"]) body.palette-ncsm .site-header.is-on-band .nav-toggle { color: #eef0ff; }

/* ==========================================================================================
   A campaign's own page (www/campaign.html, `campaign-detail`) in the National Cyber Security
   Month's design: its head is the directories' dark band — the campaign's photograph behind it
   rather than beside the title, the title and the ways in in white, the facts along the foot like
   the directories' figures — then the sections as plain underlined tabs on the page's own white.
   ========================================================================================== */
html:not([data-theme="dark"]):has(> body.theme-ncsm.campaign-detail) { background: #ffffff; }
html:not([data-theme="dark"]) body.theme-ncsm.campaign-detail.page-dark { --cr-page: #ffffff; background: #ffffff; }
html[data-theme="dark"] body.theme-ncsm.campaign-detail.page-dark { background: var(--cr-page); }

.dir-band-camp { border-bottom: 0; padding: clamp(6.5rem, 10vw, 7.5rem) 0 clamp(2.4rem, 4vw, 3rem); --ed-ink: #fff; --ed-muted: #b9bfe3; --ed-faint: #9ca3c9; --ed-line: rgba(255, 255, 255, .14); --ed-green: var(--nc-accent-dk-text, #8ab2ff); --cr-ink: #fff; }
.dir-band-camp .ed-crumb { position: relative; z-index: 1; padding-block: 0 1.6rem; font-size: .86rem; }
.dir-band-camp .ed-crumb a { color: #b9bfe3; text-decoration: none; }
.dir-band-camp .ed-crumb a:hover { color: #fff; }
.dir-band-camp .ed-hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: 0; gap: 0; }
.dir-band-camp .ed-hero-figure { display: none; }
.dir-band-camp .ed-hero-head { max-width: 46rem; gap: 1.1rem; }
body.campaign-page .dir-band-camp h1 { max-width: 18ch; font-family: var(--font-display); font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; color: #fff; }
.dir-band-camp .ed-lede { max-width: 42rem; color: #b9bfe3; }
.dir-band-camp .ed-lede a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.dir-band-camp .ed-hero-tags .meta-line { font-size: .82rem; font-weight: 600; color: var(--nc-accent-dk-text, #8ab2ff); }
.dir-band-camp .ed-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; }
.dir-band-camp .ed-pill:not(.ed-pill-quiet)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7ee2b8; box-shadow: 0 0 0 3px rgba(126, 226, 184, .25); }
.dir-band-camp .ed-pill-quiet { color: #c3c8e8; }
.dir-band-camp .ed-actions { padding-top: .6rem; }
.dir-band-camp .ed-btn-quiet { background: rgba(255, 255, 255, .1); color: #fff; }
.dir-band-camp .ed-btn-quiet:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.dir-band-camp .ed-countdown { border-color: rgba(255, 255, 255, .2); color: #b9bfe3; }
/* the facts, as the directories' figures: a hairline, then label under a large white value */
.dir-band-camp .ed-facts { position: relative; z-index: 1; margin-top: clamp(2.2rem, 4vw, 3rem); padding-block: 1.4rem 0; gap: 1.5rem clamp(1.5rem, 4vw, 3rem); border-top: 1px solid rgba(255, 255, 255, .14); }
.dir-band-camp .ed-fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem; padding: 0; border: 0; }
.dir-band-camp .ed-fact .k { margin: 0; font-size: .86rem; color: #b9bfe3; }
.dir-band-camp .ed-fact .v { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.dir-band-camp .ed-meter .track { height: 4px; background: rgba(255, 255, 255, .18); }
.dir-band-camp .ed-meter .track i { height: 4px; background: var(--nc-accent-dk, #7aa8ff); }

/* the sections: plain tabs on the page's white, the open one underlined in the accent, a pill for
   each count — the home page's week tabs */
body.theme-ncsm.campaign-detail .ed-tabs { background: var(--cr-page); border-bottom: 1px solid var(--line); }
body.theme-ncsm.campaign-detail .ed-tabs::after { background: linear-gradient(to right, transparent, var(--cr-page)); }
body.theme-ncsm.campaign-detail .ed-tabs .wrap { gap: 1.6rem; }
body.theme-ncsm.campaign-detail .ed-tab { display: inline-flex; align-items: center; gap: .45rem; padding: 1.05rem 0 .95rem; font-size: .9rem; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; transition: color .2s ease; }
body.theme-ncsm.campaign-detail .ed-tab:hover { color: var(--ink); }
body.theme-ncsm.campaign-detail .ed-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--petrol); }
body.theme-ncsm.campaign-detail .ed-tab .n { display: inline-grid; place-items: center; min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-family: var(--font-body); font-size: .7rem; font-weight: 600; color: var(--muted); }
body.theme-ncsm.campaign-detail .ed-tab[aria-current="page"] .n { background: color-mix(in srgb, var(--petrol) 14%, transparent); color: var(--petrol); }
@media (max-width: 900px) {
	.dir-band-camp .ed-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the light opening of a directory (templates/includes/dir_intro.html): the page's own ground, the
   heading in ink, the figures under a hairline in ink rather than white */
.dir-intro { padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(1.2rem, 2.5vw, 1.8rem); }
.dir-intro .dir-band-figures { border-top-color: var(--line); }
.dir-intro .dir-band-figures dd { color: var(--ink); }
.dir-intro .dir-band-figures dt { color: var(--muted); }
body.theme-ncsm:is(.campaigns-dir, .events-dir) .dir-intro + .wrap .ed-filters { margin-top: clamp(.8rem, 2vw, 1.4rem); border-top: 0; }

/* ---- the page's scrollbar ------------------------------------------------------------------
   The browser's bar sat beside every page like a part of the window rather than of the site, and
   even thinned and on a clear track it kept its lane down the right edge — a strip of the page's
   base colour beside every dark band. Chrome gives the page's own bar no way to float over the
   content, so it is hidden, and the handle alone is drawn instead (csat_web.html): a slim rounded
   line on no track, fixed to the right edge, sized and moved by the scroll and dragged to scroll.
   A neutral grey with a faint light edge, so it reads on the white and on the dark bands alike;
   wider and firmer under the pointer. Scrolling panels inside the page keep their own bars. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.page-thumb {
	position: fixed; z-index: 60; top: 0; right: 3px;
	width: 6px; border-radius: 999px;
	background: rgba(110, 116, 140, .5);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
	cursor: grab; touch-action: none;
	transition: width .15s ease, background-color .15s ease;
	will-change: transform;
}
.page-thumb[hidden] { display: none; }
.page-thumb:hover, .page-thumb.is-dragging { width: 9px; background: rgba(110, 116, 140, .75); }
.page-thumb.is-dragging { cursor: grabbing; }
@media print { .page-thumb { display: none; } }

/* ---- a campaign's tabs pinned (www/campaign.html) ------------------------------------------
   The strip stays in reach wherever the page is: pinned to the top once the band has scrolled
   away, and while it is pinned the header stays up out of the way — scrolling back a little used
   to bring the header down over it, two bars stacked — until the band is back in view. A tab
   opened as a link (#sections) lands on the strip at once. */
body.campaign-detail .ed-tabs { position: sticky; top: 0; z-index: 30; scroll-margin-top: 0; transition: box-shadow .3s ease; }
html:not(.has-menu) body.campaign-detail:has(.ed-tabs.is-pinned) .site-header:not(:focus-within) { transform: translateY(-100%); }
body.campaign-detail .ed-tabs.is-pinned { box-shadow: 0 10px 24px -20px rgba(16, 20, 58, .45); }
@media (prefers-reduced-motion: reduce) {
	body.campaign-detail .ed-tabs { transition: none; }
}
/* a tab being swapped: what is leaving dims at once, and what arrives fades up quickly. The body
   holds at least a screen, so a short tab (a gallery whose photographs have not loaded yet) never
   leaves too little page below the strip to keep it at the top */
body.campaign-detail .ed-tab-body { min-height: 100vh; min-height: 100svh; }
body.campaign-detail .ed-tab-body.is-leaving { opacity: .45; transition: opacity .12s ease; }
body.campaign-detail .ed-tab-body.is-new { animation: ed-tab-in .18s ease-out both; }
@keyframes ed-tab-in { from { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
	body.campaign-detail .ed-tab-body.is-new { animation: none; }
}

/* ---- a campaign's own page, its sections (www/campaign.html, the month's design) ------------
   Drawn the way the month's home page draws its agenda. The headings in the display face. The weeks
   as plain tabs — the name on a rule, the open one underlined in its week's colour, a dot that lights
   — and each week's items as flat panels washed in that colour: a white date tile, the kind as a
   pill, who is on stage under a tinted rule, the way in a round arrow. The events under it as the
   directories' white cards on a hairline. Each week takes the colour it has on the home page. */
body.theme-ncsm.campaign-detail .ed-h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
body.theme-ncsm.campaign-detail .ed-sub { color: var(--muted); }

body.theme-ncsm.campaign-detail .sc-agenda { --wk1: var(--nc-w1-lt, #2f6fd6); --wk2: var(--nc-w2-lt, #5b63c3); --wk3: var(--nc-w3-lt, #8a5fa3); --wk4: var(--nc-w4-lt, #c04656); }
html[data-theme="dark"] body.theme-ncsm.campaign-detail .sc-agenda { --wk1: var(--nc-w1-dk, #7aa8ff); --wk2: var(--nc-w2-dk, #9aa2f2); --wk3: var(--nc-w3-dk, #c39ae0); --wk4: var(--nc-w4-dk, #ff95a0); }
body.theme-ncsm.campaign-detail :is(.sc-week-tab:nth-child(4n+1), .sc-week:nth-of-type(4n+1)) { --wk: var(--wk1); }
body.theme-ncsm.campaign-detail :is(.sc-week-tab:nth-child(4n+2), .sc-week:nth-of-type(4n+2)) { --wk: var(--wk2); }
body.theme-ncsm.campaign-detail :is(.sc-week-tab:nth-child(4n+3), .sc-week:nth-of-type(4n+3)) { --wk: var(--wk3); }
body.theme-ncsm.campaign-detail :is(.sc-week-tab:nth-child(4n+4), .sc-week:nth-of-type(4n+4)) { --wk: var(--wk4); }

/* the weeks: names on a rule */
body.theme-ncsm.campaign-detail .sc-weeks { gap: 0; margin-bottom: 1.8rem; padding-bottom: 0; border-bottom: 1px solid var(--line); }
body.theme-ncsm.campaign-detail .sc-week-tab { gap: .15rem; align-content: start; padding: .7rem 1rem .95rem 0; border: 0; border-radius: 0; background: none; text-align: left; color: var(--muted); transition: color .2s ease; }
body.theme-ncsm.campaign-detail .sc-week-tab + .sc-week-tab { padding-left: 1rem; }
body.theme-ncsm.campaign-detail .sc-week-tab:hover { transform: none; border-color: transparent; color: var(--ink); }
body.theme-ncsm.campaign-detail .sc-week-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 3px 3px 0 0; background: var(--wk); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
body.theme-ncsm.campaign-detail .sc-week-tab[aria-selected="true"] { background: none; border-color: transparent; color: var(--ink); }
body.theme-ncsm.campaign-detail .sc-week-tab[aria-selected="true"]::after { left: 0; right: 0; height: 2px; background: var(--wk); transform: scaleX(1); }
body.theme-ncsm.campaign-detail .sc-week-tab-n { gap: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wk); }
body.theme-ncsm.campaign-detail .sc-week-tab-n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color .3s ease; }
body.theme-ncsm.campaign-detail .sc-week-tab[aria-selected="true"] .sc-week-tab-n::before { background: var(--wk); }
body.theme-ncsm.campaign-detail .sc-week-tab-n i { padding: .02rem .4rem; background: color-mix(in srgb, var(--wk) 14%, transparent); color: var(--wk); font-size: .62rem; font-weight: 600; letter-spacing: 0; }
body.theme-ncsm.campaign-detail .sc-week-tab b { font-family: var(--font-display); font-size: .88rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: inherit; }
body.theme-ncsm.campaign-detail .sc-week-tab-d { font-size: .72rem; color: var(--muted); }

/* a week: what it is for, then its items */
body.theme-ncsm.campaign-detail .sc-week-head { margin-bottom: 1.1rem; }
body.theme-ncsm.campaign-detail .sc-week-label { margin-bottom: .3rem; font-size: .76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wk); }
body.theme-ncsm.campaign-detail .sc-week-head h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
body.theme-ncsm.campaign-detail .sc-week-line { font-size: .9rem; color: var(--muted); }
body.theme-ncsm.campaign-detail .sc-items { gap: 1rem; }
body.theme-ncsm.campaign-detail .sc-item { grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 0 1.2rem; padding: 1.05rem 1.15rem 1.1rem; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--wk) 6%, var(--cr-card, var(--surface))); transition: background-color .2s ease; }
body.theme-ncsm.campaign-detail .sc-item:hover { border-color: transparent; background: color-mix(in srgb, var(--wk) 9%, var(--cr-card, var(--surface))); }
body.theme-ncsm.campaign-detail .sc-item-date, body.theme-ncsm.campaign-detail .sc-item.is-competition .sc-item-date { height: auto; aspect-ratio: 1; border-radius: 9px; background: var(--cr-card, var(--surface)); color: var(--wk); }
body.theme-ncsm.campaign-detail .sc-item-date b { font-size: 1.3rem; font-weight: 600; letter-spacing: -.03em; }
body.theme-ncsm.campaign-detail .sc-item-date span { font-size: .58rem; }
body.theme-ncsm.campaign-detail .sc-item-kind { padding: .12rem .55rem; background: color-mix(in srgb, var(--wk) 12%, transparent); font-size: .66rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--wk); }
body.theme-ncsm.campaign-detail .sc-item.is-competition .sc-item-kind { background: var(--wk); color: #fff; }
body.theme-ncsm.campaign-detail .sc-item-when { font-size: .76rem; color: var(--muted); }
body.theme-ncsm.campaign-detail .sc-item h4 { margin-top: .15rem; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: -.015em; }
body.theme-ncsm.campaign-detail .sc-item h4 a:hover { color: var(--wk); }
body.theme-ncsm.campaign-detail .sc-item-line { font-size: .86rem; color: var(--cr-ink-2, var(--ink)); }
body.theme-ncsm.campaign-detail .sc-cast { margin-top: .5rem; padding-top: .85rem; border-top: 1px solid color-mix(in srgb, var(--wk) 16%, var(--cr-card, var(--surface))); }
body.theme-ncsm.campaign-detail :is(.sc-cast em, .sc-cast-panel > em) { font-size: .6rem; letter-spacing: .06em; color: var(--wk); }
body.theme-ncsm.campaign-detail .sc-cast b { font-size: .82rem; }
body.theme-ncsm.campaign-detail .sc-cast small { font-size: .72rem; color: var(--muted); }
body.theme-ncsm.campaign-detail .sc-face { background-color: color-mix(in srgb, var(--wk) 14%, var(--cr-card, var(--surface))); color: var(--wk); box-shadow: none; }
body.theme-ncsm.campaign-detail .sc-item-go { width: 34px; height: 34px; border-color: var(--line); background: var(--cr-card, var(--surface)); color: var(--muted); }
body.theme-ncsm.campaign-detail .sc-item:hover .sc-item-go { border-color: color-mix(in srgb, var(--wk) 50%, var(--line)); color: var(--wk); transform: none; }

/* the events: the directories' white cards on a hairline, the photograph inset, pills on it */
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-card { gap: 0; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--cr-card, var(--surface)); transition: border-color .2s ease, transform .16s var(--cr-ease); }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-card:hover { border-color: color-mix(in srgb, var(--petrol) 45%, var(--line)); background: var(--cr-card, var(--surface)); }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-card::before { display: none; }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-figure { height: 180px; border: 0; border-radius: 14px; overflow: hidden; filter: none; }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-body { padding: 1.2rem 1.1rem 1.1rem; }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-type { font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--petrol); }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-foot { border-top: 1px solid var(--line); font-family: var(--font-body); font-size: .82rem; color: var(--muted); }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-when b { font-family: var(--font-body); font-size: .82rem; color: var(--cr-ink-2, var(--ink)); }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-figure .ed-pill { position: absolute; top: .8rem; right: .8rem; left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--nc-accent, #2459c0); }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-figure .ed-pill-quiet { color: #50577c; }
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-flag { position: absolute; top: .8rem; bottom: auto; left: .8rem; padding: .25rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #10143a; }
@media (max-width: 760px) {
	body.theme-ncsm.campaign-detail .sc-weeks { grid-auto-columns: minmax(11rem, 1fr); }
	body.theme-ncsm.campaign-detail .sc-item { grid-template-columns: 3rem minmax(0, 1fr); }
	body.theme-ncsm.campaign-detail .sc-item-go { display: none; }
}

/* the overview's "With thanks to" (www/campaign.html): the Sponsors tab's own tiles for the top
   tiers, a size smaller, and the way to the whole list beside the heading */
.cl-thanks .spx-tier-platinum { --tile: 13.5rem; --logo: 70px; }
.cl-thanks .spx-tier-gold { --tile: 11.5rem; --logo: 58px; }
.cl-thanks .spx-tier:not(.spx-tier-platinum):not(.spx-tier-gold) { --tile: 10.5rem; --logo: 52px; }
.cl-thanks-all { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-end; font-size: .88rem; font-weight: 600; color: var(--petrol); text-decoration: none; white-space: nowrap; }
.cl-thanks-all span { transition: transform .2s ease; }
.cl-thanks-all:hover span { transform: translateX(3px); }

/* the overview's closing ask, while a campaign still has something to take part in (www/campaign.html):
   one flat panel in a soft tint of the accent — no hairline, no glow behind it — the ask on the left,
   the ways in on the right, the second of them plain white on the tint */
body.theme-ncsm.campaign-detail .cl-join { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.8rem, 3.5vw, 2.4rem) clamp(1.5rem, 3.5vw, 2.4rem); border: 0; border-radius: 20px; background: color-mix(in srgb, var(--petrol) 7%, var(--cr-card, var(--surface))); }
body.theme-ncsm.campaign-detail .cl-join-wash { display: none; }
body.theme-ncsm.campaign-detail .cl-join-say .ed-h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: .4rem; }
body.theme-ncsm.campaign-detail .cl-join .ed-btn-quiet { background: var(--cr-card, var(--surface)); color: var(--ink); }
body.theme-ncsm.campaign-detail .cl-join .ed-btn-quiet:hover { background: color-mix(in srgb, var(--petrol) 10%, var(--cr-card, var(--surface))); color: var(--ink); }

/* ---- a campaign's competitions (www/campaign.html, templates/includes/competitions/card.html; the
   same cards under a competition's own page, www/competition.html) --
   Drawn as the month's home page draws its competitions: each a flat panel washed in one of the
   four weeks' colours in turn, no border; the kind a soft pill in that colour; where it stands as
   quiet words, with a dot that lights while it is open or running; its terms under a tinted rule;
   the way in and the way to its page in its own colour. */
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-grid { --wk1: var(--nc-w1-lt, #2f6fd6); --wk2: var(--nc-w2-lt, #5b63c3); --wk3: var(--nc-w3-lt, #8a5fa3); --wk4: var(--nc-w4-lt, #c04656); gap: 1.1rem; }
html[data-theme="dark"] body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-grid { --wk1: var(--nc-w1-dk, #7aa8ff); --wk2: var(--nc-w2-dk, #9aa2f2); --wk3: var(--nc-w3-dk, #c39ae0); --wk4: var(--nc-w4-dk, #ff95a0); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card:nth-child(4n+1) { --wk: var(--wk1); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card:nth-child(4n+2) { --wk: var(--wk2); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card:nth-child(4n+3) { --wk: var(--wk3); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card:nth-child(4n+4) { --wk: var(--wk4); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card { gap: .65rem; padding: 1.4rem 1.4rem 1.3rem; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--wk) 6%, var(--cr-card, var(--surface))); transition: background-color .2s ease; }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card:hover { background: color-mix(in srgb, var(--wk) 9%, var(--cr-card, var(--surface))); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card:is(.is-open, .is-running) { border-color: transparent; }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-kind { padding: .12rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--wk) 12%, transparent); font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--wk); }
/* where it stands: words, not a badge */
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-top .ed-pill { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border-radius: 0; background: none; font-size: .72rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card:is(.is-open, .is-running) .cmp-card-top .ed-pill { color: var(--wk); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card:is(.is-open, .is-running) .cmp-card-top .ed-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk) 20%, transparent); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card h3 a { color: var(--ink); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card h3 a:hover { color: var(--wk); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-line { font-size: .88rem; color: var(--cr-ink-2, var(--ink)); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-terms { gap: .35rem; margin-top: .2rem; padding-top: .7rem; border-top: 1px dashed color-mix(in srgb, var(--wk) 22%, var(--cr-card, var(--surface))); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-terms > div { gap: .8rem; font-size: .82rem; }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-terms dt { color: var(--muted); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-terms dd { color: var(--ink); }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-acts { padding-top: .8rem; }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-acts .ed-btn { padding: .5rem 1rem; font-size: .84rem; background: var(--wk); color: #fff; }
html[data-theme="dark"] body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-card-acts .ed-btn { color: #0b1433; }
body.theme-ncsm:is(.campaign-detail, .cmp-page) .cmp-more { font-size: .8rem; color: var(--wk); }

/* the national quiz, first on a campaign's Competitions tab the width of the row: what it is and
   where it stands on the left, its terms and the ways in on the right */
.cmp-quiz { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.cmp-quiz { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "top terms" "title terms" "line acts"; align-items: start; gap: .6rem clamp(1.5rem, 4vw, 3rem); }
	.cmp-quiz .cmp-card-top { grid-area: top; justify-content: flex-start; gap: .9rem; }
	.cmp-quiz h3 { grid-area: title; font-size: 1.5rem; }
	.cmp-quiz .cmp-card-line { grid-area: line; }
	.cmp-quiz .cmp-card-terms { grid-area: terms; align-self: start; margin-top: 0; }
	.cmp-quiz .cmp-card-acts { grid-area: acts; align-self: end; }
	body.theme-ncsm.campaign-detail .cmp-quiz .cmp-card-terms { padding-top: 0; padding-left: clamp(1.2rem, 3vw, 2rem); border-top: 0; border-left: 1px dashed color-mix(in srgb, var(--wk) 22%, var(--cr-card, var(--surface))); }
}
/* the quiz's own page, back to all of them */
.cx-back { display: inline-flex; margin-bottom: 1.4rem; font-size: .86rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.cx-back:hover { color: var(--petrol); }

/* a campaign's Competitions tab in two groups — the quiz held here, then what the organizers run —
   each under a plain label on a hairline (the sponsors' tiers), the organizers' cards filling their
   row whatever their number, and their colours carrying on from the quiz's */
.cmp-groups { display: grid; gap: clamp(2rem, 4vw, 2.8rem); margin-bottom: 3rem; }
.cmp-group-name { display: flex; align-items: center; gap: 1rem; max-width: none; margin: 0 0 1rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cmp-group-name::after { content: ""; flex: 1; min-width: 2rem; height: 1px; background: var(--line); }
.cmp-group-name span { display: inline-flex; align-items: center; gap: .5rem; }
.cmp-group-name i { display: inline-grid; place-items: center; min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-style: normal; font-size: .7rem; letter-spacing: 0; color: var(--muted); }
.cmp-grid-fill { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
body.theme-ncsm.campaign-detail .cmp-grid-fill.is-after-quiz .cmp-card:nth-child(4n+1) { --wk: var(--wk2); }
body.theme-ncsm.campaign-detail .cmp-grid-fill.is-after-quiz .cmp-card:nth-child(4n+2) { --wk: var(--wk3); }
body.theme-ncsm.campaign-detail .cmp-grid-fill.is-after-quiz .cmp-card:nth-child(4n+3) { --wk: var(--wk4); }
body.theme-ncsm.campaign-detail .cmp-grid-fill.is-after-quiz .cmp-card:nth-child(4n+4) { --wk: var(--wk1); }

/* ---- the quiz's page (www/campaign.html, tab=contest) ------------------------------------------
   One task: a panel at the top holding what the quiz is, its terms in a line and the form itself,
   with a white column beside it for when it closes (counting), what can be won and how many have
   entered; then the winners or the board, how it is scored behind a disclosure. Flat panels, no
   top bars; the buttons in the site's cut. Whatever the quiz hides stays hidden: the form, the
   paper and the result each carry rules that used to beat [hidden], which left "Handed in" on
   the page before anything had been handed in. */
.cx-take [hidden], .qz [hidden] { display: none !important; }
.qz .cx-back { margin-bottom: 1.2rem; }
.qz-start { scroll-margin-top: calc(var(--tabs-h, 3.6rem) + 1.25rem); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr); gap: clamp(1.5rem, 3.5vw, 2.8rem); padding: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: 20px; background: color-mix(in srgb, var(--petrol) 6%, var(--cr-card, var(--surface))); }
.qz-main { min-width: 0; }
.qz-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.qz-kind { padding: .15rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--petrol) 12%, transparent); font-size: .72rem; font-weight: 700; color: var(--petrol); }
.qz-state { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.qz-state.is-open { color: #1f9d6b; }
.qz-state.is-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(31, 157, 107, .2); }
.qz-main h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; color: var(--ink); }
.qz-facts { display: flex; flex-wrap: wrap; gap: .3rem 0; margin: .9rem 0 1.6rem; padding: 0; list-style: none; font-size: .9rem; color: var(--muted); }
.qz-facts li + li::before { content: "·"; margin: 0 .55rem; color: var(--muted); font-weight: 700; }
.qz-lede { max-width: 42rem; margin: 0; line-height: 1.6; color: var(--cr-ink-2, var(--ink)); }
.qz-acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* the form, in the panel rather than a card of its own */
.qz .cx-take { margin: 0; }
.qz .cx-door { max-width: none; gap: 1.2rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.qz .cx-door::before { display: none; }
.qz .cx-door-fields input { background: var(--cr-card, var(--surface)); }
.qz .cx-result { max-width: none; border: 0; border-radius: 16px; background: var(--cr-card, var(--surface)); }
/* the ways in take the site's cut, as its buttons do everywhere else */
.qz .cx-btn { border-radius: 0; --cut: 12px; clip-path: var(--chamfer); box-shadow: none; }
.qz .cx-btn:hover { transform: none; }

/* beside it: when it closes, what can be won, how many have entered */
.qz-side { display: grid; align-content: start; gap: 1.3rem; padding: .2rem 0 0 clamp(1.4rem, 3vw, 2.4rem); border-left: 1px solid color-mix(in srgb, var(--petrol) 18%, transparent); }
.qz-count { display: grid; gap: .1rem; padding-bottom: 1.2rem; border-bottom: 1px solid color-mix(in srgb, var(--petrol) 18%, transparent); }
.qz-count span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.qz-count b { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.qz-count small { font-size: .8rem; color: var(--muted); }
.qz-side-k { margin: 0 0 .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qz-side .cx-prizes { margin: 0; }
.qz-entries { margin: 0; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--petrol) 18%, transparent); font-size: .88rem; color: var(--muted); }
.qz-entries b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }

/* the board: flat rows, the top three tinted, the reader's own row marked */
.qz .cx-quiz-h { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
/* one surface for every row: the medals alone carry the metals, and the bars one solid colour */
.qz .cx-board { max-width: none; }
.qz .cx-board li, .qz .cx-board li.is-top { border: 0; border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.qz .cx-board li { grid-template-columns: 2.6rem minmax(8rem, 16rem) minmax(0, 1fr) 4rem; }
.qz .cx-board-bar i { background: var(--petrol); }
.qz .cx-board li.is-mine { background: color-mix(in srgb, var(--petrol) 12%, var(--cr-card, var(--surface))); box-shadow: inset 0 0 0 1.5px var(--petrol); }
.qz .cx-board li.is-mine .cx-board-name::after { content: "You"; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: var(--petrol); font-size: .66rem; font-weight: 700; color: #fff; vertical-align: 2px; }
.qz .cx-board-bar { height: 6px; }
.qz-rules { margin-top: 1rem; }
.qz-rules summary { width: max-content; cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--petrol); list-style: none; }
.qz-rules summary::-webkit-details-marker { display: none; }
.qz-rules summary::after { content: "  ▾"; font-size: .75em; }
.qz-rules[open] summary::after { content: "  ▴"; }
.qz-rules .board-rule { margin: .6rem 0 0; font-size: .86rem; line-height: 1.6; color: var(--muted); }

/* the winners: the podium kept, each place a flat panel in its medal's tone — no bar across the
   top and no shadow under it */
.qz .cx-place { border: 0; border-radius: 16px; box-shadow: none; }
.qz .cx-place::before { display: none; }
.qz .cx-place.is-1 { background: color-mix(in srgb, #d4a017 12%, var(--cr-card, var(--surface))); box-shadow: none; }
.qz .cx-place.is-2 { background: color-mix(in srgb, #8f98a8 12%, var(--cr-card, var(--surface))); }
.qz .cx-place.is-3 { background: color-mix(in srgb, #b87333 12%, var(--cr-card, var(--surface))); }
.qz .cx-place-prize { background: var(--cr-card, var(--surface)); }

@media (max-width: 900px) {
	.qz-start { grid-template-columns: minmax(0, 1fr); }
	.qz-side .cx-prizes i { display: none; }
	/* on a phone the terms come first, in one short strip, and the form under them */
	.qz-side { order: -1; grid-template-columns: auto 1fr; align-items: center; gap: .8rem 1.2rem; padding: 0 0 1.2rem; border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--petrol) 18%, transparent); }
	.qz-count { padding: 0 1.2rem 0 0; border-bottom: 0; border-right: 1px solid color-mix(in srgb, var(--petrol) 18%, transparent); }
	.qz-count small, .qz-side-k { display: none; }
	.qz-side .cx-prizes { gap: .3rem; }
	.qz-entries { grid-column: 1 / -1; padding-top: .7rem; }
	.qz-facts li:nth-child(4) { display: none; }
}

/* ---- the quiz paper, full screen (templates/includes/campaign_quiz_play.html) ------------------
   A focus mode on the page's own plain ground. Across the top, the reader's name and the count, the
   clock as a pill that turns amber in the last minute, and the progress as one segment a question —
   done, now, to come. The question in a readable column: its category as a pill and where it falls,
   the question large, the answers as tiles with a letter, the chosen one tinted and outlined. Across
   the bottom, the one-way note and the button in the site's cut. On a phone the question scrolls
   as a page does, so no answer is hidden behind the edge of a box. */
.qz .cx-take .ct-paper.is-full { padding: 0; background: var(--cr-page, var(--paper)); }
.qz .cx-take .ct-paper.is-full > * { max-width: none; }
.qz .cx-take .ct-paper.is-full .ct-head { gap: .75rem; padding: 1rem max(1.25rem, calc((100% - 760px) / 2)) .9rem; border-bottom: 1px solid var(--line); background: var(--cr-page, var(--paper)); }
.qz .cx-take .ct-paper.is-full .ct-bar { font-size: .9rem; font-weight: 600; color: var(--cr-ink-2, var(--ink)); }
.qz .cx-take .ct-paper.is-full .ct-clock { padding: .3rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--petrol) 10%, transparent); font-family: var(--font-display); font-weight: 600; color: var(--petrol); font-variant-numeric: tabular-nums; transition: background-color .3s ease, color .3s ease; }
.qz .cx-take .ct-paper.is-full .ct-clock.is-low { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.qz .cx-take .ct-paper.is-full .ct-prog.is-segmented { display: flex; gap: 5px; height: 5px; overflow: visible; background: none; }
.qz .cx-take .ct-paper.is-full .ct-prog.is-segmented .ct-prog-fill { display: none; }
.ct-seg { flex: 1; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); transition: background-color .3s ease; }
.ct-seg.is-done { background: color-mix(in srgb, var(--petrol) 55%, transparent); }
.ct-seg.is-now { background: var(--petrol); }
.qz .cx-take .ct-paper.is-full .ct-step { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.qz .cx-take .ct-paper.is-full > .ct-questions { width: 100%; max-width: 760px; margin-inline: auto; padding: clamp(1.4rem, 5vh, 3rem) 1.25rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
.qz .cx-take .ct-paper.is-full .ct-q-cat { margin-bottom: 1rem; padding: .22rem .7rem; font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.qz .cx-take .ct-paper.is-full .ct-q-text { margin-bottom: clamp(1.2rem, 3.5vh, 2rem); font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.25; letter-spacing: -.025em; }
.qz .cx-take .ct-paper.is-full .ct-opt { margin-top: .65rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--cr-card, var(--surface)); box-shadow: none; font-size: 1.02rem; transition: border-color .15s ease, background-color .15s ease; }
.qz .cx-take .ct-paper.is-full .ct-opt:hover { transform: none; border-color: color-mix(in srgb, var(--petrol) 45%, var(--line)); }
.qz .cx-take .ct-paper.is-full .ct-opt::before { border-radius: 8px; }
.qz .cx-take .ct-paper.is-full .ct-opt:has(input:checked) { border-color: var(--petrol); background: color-mix(in srgb, var(--petrol) 8%, var(--cr-card, var(--surface))); box-shadow: inset 0 0 0 1px var(--petrol); }
.qz .cx-take .ct-paper.is-full .ct-input { border-radius: 14px; background: var(--cr-card, var(--surface)); }

.qz .cx-take .ct-paper.is-full > .ct-do { margin: 0; padding: .9rem max(1.25rem, calc((100% - 760px) / 2)) calc(.9rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--cr-page, var(--paper)); }
.qz .cx-take .ct-paper.is-full > .ct-do .cx-btn { min-width: 13rem; }
.qz .cx-take .ct-paper.is-full .ct-oneway { font-size: .8rem; color: var(--muted); }
@media (max-width: 600px) {
	.qz .cx-take .ct-paper.is-full > .ct-questions { align-content: start; padding-top: 1.2rem; }
	.qz .cx-take .ct-paper.is-full .ct-q-text { font-size: 1.3rem; }
	.qz .cx-take .ct-paper.is-full > .ct-do { flex-direction: column-reverse; gap: .5rem; }
	.qz .cx-take .ct-paper.is-full > .ct-do .cx-btn { width: 100%; }
	.qz .cx-take .ct-paper.is-full .ct-oneway { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ct-seg, .qz .cx-take .ct-paper.is-full .ct-clock { transition: none; } }

/* ---- a competition's own page (www/competition.html, the month's design) -----------------------
   A single page, so it opens dark like a campaign's: the competition's photograph under the
   night's indigo, the title and the ways in in white, and beside them the prizes and dates on the
   band itself, behind a thin line — no card, no bar across it, no tracker from entries to winners
   under it. Then the story on the page's white: the themes as flat panels in the weeks' colours,
   and the facts beside it as one tinted panel rather than four cards. The ways in in the site's cut. */
html:not([data-theme="dark"]):has(> body.theme-ncsm.cmp-page) { background: #ffffff; }
html:not([data-theme="dark"]) body.theme-ncsm.cmp-page.page-dark { --cr-page: #ffffff; background: #ffffff; }
html[data-theme="dark"] body.theme-ncsm.cmp-page.page-dark { background: var(--cr-page); }
body.theme-ncsm.cmp-page .cx-btn { border-radius: 0; --cut: 12px; clip-path: var(--chamfer); box-shadow: none; }
body.theme-ncsm.cmp-page .cx-btn:hover { transform: none; }

.dir-band-cmp { padding: clamp(6.5rem, 10vw, 7.5rem) 0 clamp(2.6rem, 4.5vw, 3.4rem); --cr-ink-2: #c3c8e8; --line-soft: rgba(255, 255, 255, .1); }
.dir-band-cmp::after, .dir-band-cmp .cx-hero-bg, .dir-band-cmp .cx-steps { display: none; }
.dir-band-cmp .cx-crumb, .dir-band-cmp .cx-crumb a { color: #b9bfe3; }
.dir-band-cmp .cx-crumb a:hover { color: #fff; }
.dir-band-cmp .cx-kind { border: 0; background: rgba(255, 255, 255, .1); color: #fff; }
.dir-band-cmp .cx-state { background: rgba(255, 255, 255, .1); color: #e6e9ff; }
.dir-band-cmp .cx-state:is(.is-open, .is-running) { background: rgba(126, 226, 184, .14); color: #7ee2b8; }
.dir-band-cmp .cx-state.is-results { background: rgba(247, 215, 116, .14); color: #f7d774; }
.dir-band-cmp h1 { color: #fff; }
.dir-band-cmp .cx-lede { color: #c3c8e8; }
.dir-band-cmp .cx-note { color: #9ca3c9; }
.dir-band-cmp .cx-btn-quiet { border: 0; background: rgba(255, 255, 255, .1); color: #fff; }
.dir-band-cmp .cx-btn-quiet:hover { background: rgba(255, 255, 255, .18); color: #fff; }
/* the prizes and the dates, on the band */
.dir-band-cmp .cx-glance { padding: .2rem 0 .2rem clamp(1.5rem, 3vw, 2.4rem); border: 0; border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.dir-band-cmp .cx-glance::before { display: none; }
.dir-band-cmp .cx-pool { border-bottom-color: rgba(255, 255, 255, .14); border-bottom-style: solid; }
.dir-band-cmp .cx-pool-k, .dir-band-cmp .cx-pool-say, .dir-band-cmp .cx-glance-facts dt { color: #b9bfe3; }
.dir-band-cmp .cx-pool-v { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: #fff; }
.dir-band-cmp .cx-glance-facts > div { border-bottom-color: rgba(255, 255, 255, .1); }
.dir-band-cmp .cx-glance-facts dd { color: #fff; }
@media (max-width: 900px) {
	.dir-band-cmp .cx-glance { padding: 1.4rem 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* the winners, once decided: the podium on the page's own ground, each place flat in its medal's tone */
body.theme-ncsm.cmp-page .cx-results { background: none; }
body.theme-ncsm.cmp-page .cx-place { border: 0; border-radius: 16px; box-shadow: none; }
body.theme-ncsm.cmp-page .cx-place::before { display: none; }
body.theme-ncsm.cmp-page .cx-place.is-1 { background: color-mix(in srgb, #d4a017 12%, var(--cr-card, var(--surface))); box-shadow: none; }
body.theme-ncsm.cmp-page .cx-place.is-2 { background: color-mix(in srgb, #8f98a8 12%, var(--cr-card, var(--surface))); }
body.theme-ncsm.cmp-page .cx-place.is-3 { background: color-mix(in srgb, #b87333 12%, var(--cr-card, var(--surface))); }
body.theme-ncsm.cmp-page .cx-place-prize { background: var(--cr-card, var(--surface)); }

/* the themes: flat panels in the weeks' colours — no bar down the side, no circle in the corner */
body.theme-ncsm.cmp-page .cx-themes li { border: 0; border-radius: 16px; background: color-mix(in srgb, var(--cx-c) 7%, var(--cr-card, var(--surface))); transition: background-color .2s ease; }
body.theme-ncsm.cmp-page .cx-themes li::before, body.theme-ncsm.cmp-page .cx-themes li::after { display: none; }
body.theme-ncsm.cmp-page .cx-themes li:hover { transform: none; border-color: transparent; background: color-mix(in srgb, var(--cx-c) 10%, var(--cr-card, var(--surface))); }

/* the facts beside the story: one tinted panel, its parts divided by thin lines */
body.theme-ncsm.cmp-page .cx-side { gap: 0; padding: .4rem clamp(1.2rem, 2.5vw, 1.5rem) 1.2rem; border-radius: 20px; background: color-mix(in srgb, var(--petrol) 5%, var(--cr-card, var(--surface))); }
body.theme-ncsm.cmp-page .cx-side .cx-card { padding: 1.2rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.theme-ncsm.cmp-page .cx-side .cx-card + .cx-card, body.theme-ncsm.cmp-page .cx-side .cx-side-btn + .cx-card { border-top: 1px solid color-mix(in srgb, var(--petrol) 16%, transparent); }
body.theme-ncsm.cmp-page .cx-side .cx-card::before { display: none; }
body.theme-ncsm.cmp-page .cx-side-btn { margin: .4rem 0 1.2rem; }
body.theme-ncsm.cmp-page .cx-more { border-top: 1px solid var(--line); }

/* a competition's own colour: the week's colour its card wears on the campaign's Competitions tab
   (www/competition.py picks it), in the band's glow, the kind's badge and the ways in — so the card
   and its page are one colour, and a competition never reads as the campaign it belongs to */
body.theme-ncsm.cmp-page { --wk1: var(--nc-w1-lt, #2f6fd6); --wk2: var(--nc-w2-lt, #5b63c3); --wk3: var(--nc-w3-lt, #8a5fa3); --wk4: var(--nc-w4-lt, #c04656); }
html[data-theme="dark"] body.theme-ncsm.cmp-page { --wk1: var(--nc-w1-dk, #7aa8ff); --wk2: var(--nc-w2-dk, #9aa2f2); --wk3: var(--nc-w3-dk, #c39ae0); --wk4: var(--nc-w4-dk, #ff95a0); }
.dir-band-cmp { background-image: radial-gradient(55% 95% at 88% 8%, color-mix(in srgb, var(--wk, #5b63c3) 42%, transparent), transparent 70%), linear-gradient(100deg, rgba(12, 16, 48, .96) 0%, rgba(12, 16, 48, .9) 55%, rgba(12, 16, 48, .8) 100%), var(--img, none); }
.dir-band-cmp .cx-kind-icon { background: var(--wk); }
.dir-band-cmp .cx-btn:not(.cx-btn-quiet), body.theme-ncsm.cmp-page .cx-side-btn { background: var(--wk); color: #fff; }
.dir-band-cmp .cx-btn:not(.cx-btn-quiet):hover, body.theme-ncsm.cmp-page .cx-side-btn:hover { background: color-mix(in srgb, var(--wk) 86%, #000); color: #fff; }
html[data-theme="dark"] .dir-band-cmp .cx-btn:not(.cx-btn-quiet), html[data-theme="dark"] body.theme-ncsm.cmp-page .cx-side-btn { color: #0b1433; }
/* the prize leads: the sum, and its places in a row under it */
.dir-band-cmp .cx-pool-v { font-size: clamp(2.4rem, 4vw, 3.2rem); }
.cx-pool-medals { display: flex; flex-wrap: wrap; gap: .45rem .85rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.cx-pool-medals li { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; white-space: nowrap; font-weight: 600; color: #e6e9ff; font-variant-numeric: tabular-nums; }
.cx-pool-medals .cx-medal { width: 1.3rem; height: 1.3rem; font-size: .62rem; }
.cx-pool-medals li.is-1 .cx-medal { --medal: var(--cx-gold); }
.cx-pool-medals li.is-2 .cx-medal { --medal: var(--cx-silver); }
.cx-pool-medals li.is-3 .cx-medal { --medal: var(--cx-bronze); }
/* the deadline counting, as a pill beside the ways in */
.dir-band-cmp .cx-countdown { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .95rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: .86rem; color: #c3c8e8; }
.dir-band-cmp .cx-countdown b { color: #fff; font-variant-numeric: tabular-nums; }

/* ---- an event's own page, its sections (www/event.html, the month's design) -------------------
   The keynotes as flat tinted panels, the photograph rounded, "Keynote" a quiet label rather than
   capitals; the sponsors and exhibitors as the sponsor lists' white cards on a hairline, the logo
   centred and the tier or booth quiet under it. On the overview and on the event's own tabs. */
body.theme-ncsm.campaign-detail .ev-person-keynote { padding: 1.2rem; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--petrol) 5%, var(--cr-card, var(--surface))); }
body.theme-ncsm.campaign-detail .ev-person-photo { border-radius: 12px; background-color: color-mix(in srgb, var(--petrol) 10%, var(--cr-card, var(--surface))); }
body.theme-ncsm.campaign-detail .ev-person .ed-eyebrow { font-size: .74rem; letter-spacing: 0; text-transform: none; color: var(--petrol); }
body.theme-ncsm.campaign-detail .ev-person h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
body.theme-ncsm.campaign-detail .ev-talk { color: var(--cr-ink-2, var(--ink)); }
body.theme-ncsm.campaign-detail .ev-talk.ev-part { font-size: .74rem; letter-spacing: 0; text-transform: none; color: var(--petrol); }
body.theme-ncsm.event-page .ev-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 1rem; }
body.theme-ncsm.event-page .ev-logo { align-items: center; justify-content: center; gap: .55rem; min-width: 0; min-height: 8.5rem; padding: 1.2rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--cr-card, var(--surface)); text-align: center; transition: border-color .2s ease; }
body.theme-ncsm.event-page a.ev-logo:hover { border-color: color-mix(in srgb, var(--petrol) 45%, var(--line)); }
body.theme-ncsm.event-page .ev-logo img { align-self: center; max-height: 52px; }
body.theme-ncsm.event-page .ev-logo > span { font-family: var(--font-display); font-size: .98rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
body.theme-ncsm.event-page .ev-logo small { font-size: .76rem; color: var(--muted); }
html[data-theme="dark"] body.theme-ncsm.event-page .ev-logo img { padding: .4rem .6rem; border-radius: 8px; background: #fff; }

/* ---- the news, organizations and verify pages (the month's design) -----------------------------
   They open like the directories (the block above): the dot eyebrow, a firm title in ink and what
   it says beside it, on the page's plain white — their heading standing on its own rather than in
   an intro band. Their lists lose the box around them: each row on its own, divided by a hairline,
   the pictures rounded, the titles in the display face, a step numbered in a small round badge,
   a note's label in the accent rather than capitals. The organizations page's figures as large
   numbers, its closing ask as one flat tinted panel; the verify form as a soft panel, and a result
   tinted by what it found instead of a thick bar down its side. */
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-dir-hero { padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 2.6rem); }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-sub { color: var(--muted); }

/* the rows */
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-rows { gap: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-row { padding: 1.3rem 0; border-top: 1px solid var(--line); background: none; }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-row:last-child { border-bottom: 1px solid var(--line); }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) a.ed-row:hover { background: none; }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) a.ed-row:hover h3 { color: var(--petrol); }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-row h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); transition: color .2s ease; }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-row p { color: var(--muted); }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-thumb { height: 110px; border: 0; border-radius: 12px; }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-row .ed-when { font-size: .82rem; color: var(--muted); }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-row .num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--petrol) 12%, transparent); font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--petrol); }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-row .title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
body.theme-ncsm:is(.news-page, .orgs-page, .verify-page) .ed-row-note .k { font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--petrol); }

/* the organizations page: its figures, and its closing ask */
body.theme-ncsm.orgs-page .ed-facts { gap: 1.5rem clamp(1.5rem, 4vw, 3rem); padding-block: 1.4rem 2.4rem; border-top: 1px solid var(--line); }
body.theme-ncsm.orgs-page .ed-fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem; padding: 0; border: 0; }
body.theme-ncsm.orgs-page .ed-fact .k { margin: 0; font-size: .86rem; color: var(--muted); }
body.theme-ncsm.orgs-page .ed-fact .v { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
body.theme-ncsm.orgs-page .cl-join { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.8rem, 3.5vw, 2.4rem) clamp(1.5rem, 3.5vw, 2.4rem); border: 0; border-radius: 20px; background: color-mix(in srgb, var(--petrol) 7%, var(--cr-card, var(--surface))); }
body.theme-ncsm.orgs-page .cl-join-wash { display: none; }
body.theme-ncsm.orgs-page .cl-join .ed-btn-quiet { background: var(--cr-card, var(--surface)); color: var(--ink); }

/* the verify page: the form, and what it finds */
body.theme-ncsm.verify-page .verify-form { padding: clamp(1.3rem, 3vw, 1.8rem); border: 0; border-radius: 20px; background: color-mix(in srgb, var(--petrol) 6%, var(--cr-card, var(--surface))); }
body.theme-ncsm.verify-page .verify-input { border-radius: 10px; background: var(--cr-card, var(--surface)); }
body.theme-ncsm.verify-page .verify-result { padding: clamp(1.3rem, 3vw, 1.8rem); border: 0; border-radius: 20px; background: color-mix(in srgb, var(--ok, #1e7e34) 8%, var(--cr-card, var(--surface))); }
body.theme-ncsm.verify-page .verify-warn { background: color-mix(in srgb, var(--amber, #b7791f) 10%, var(--cr-card, var(--surface))); }
body.theme-ncsm.verify-page .verify-bad { background: color-mix(in srgb, var(--danger, #c0392b) 8%, var(--cr-card, var(--surface))); }
body.theme-ncsm.verify-page .verify-headline { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
body.theme-ncsm.verify-page .verify-facts { border-top-color: color-mix(in srgb, var(--ink) 10%, transparent); }
body.theme-ncsm.verify-page .verify-facts dt { font-size: .82rem; letter-spacing: 0; text-transform: none; }

/* ---- the news as a front page (www/news.html, the month's design) -----------------------------
   The lead large on the left — a wide photograph, its category and date, the headline, the intro —
   the latest four stacked beside it with a small photograph each, and the rest under them as cards,
   by year under a label on a hairline. Flat throughout: rounded photographs, no boxes. */
.nw-front { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 1fr); gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.nw-img { position: relative; border-radius: 14px; background: color-mix(in srgb, var(--petrol) 10%, var(--cr-card, var(--surface))) center / cover no-repeat; }
.nw-flag { position: absolute; top: .8rem; left: .8rem; padding: .22rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: .72rem; font-weight: 600; color: #10143a; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .78rem; color: var(--muted); }
.nw-cat { padding: .12rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--petrol) 11%, transparent); font-size: .7rem; font-weight: 600; color: var(--petrol); }
.nw-lead, .nw-item, .nw-card { color: inherit; text-decoration: none; }
.nw-lead h2, .nw-item h3, .nw-card h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); transition: color .2s ease; }
.nw-lead:hover h2, .nw-item:hover h3, .nw-card:hover h3 { color: var(--petrol); }

.nw-lead .nw-img { aspect-ratio: 16 / 9; border-radius: 18px; }
.nw-lead-body { display: grid; gap: .7rem; padding-top: 1.3rem; }
.nw-lead h2 { margin: 0; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.15; letter-spacing: -.03em; }
.nw-lead p { max-width: 62ch; margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--cr-ink-2, var(--ink)); }
.nw-go { font-size: .9rem; font-weight: 600; color: var(--petrol); }

.nw-side-k { margin: 0 0 .4rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nw-list { margin: 0; padding: 0; list-style: none; }
.nw-list li + li { border-top: 1px solid var(--line); }
.nw-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .95rem; align-items: start; padding: 1rem 0; }
.nw-item .nw-img { aspect-ratio: 4 / 3; border-radius: 10px; }
.nw-item h3 { margin: .35rem 0 0; font-size: 1rem; line-height: 1.3; letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.nw-more { padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(4rem, 7vw, 5.5rem); }
.nw-more-h { margin: 0 0 1.4rem; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.nw-year + .nw-year { margin-top: clamp(2rem, 4vw, 2.8rem); }
.nw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 1.8rem 1.4rem; }
.nw-card { display: grid; align-content: start; gap: .6rem; }
.nw-card .nw-img { aspect-ratio: 16 / 10; margin-bottom: .2rem; }
.nw-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; letter-spacing: -.02em; }
.nw-card p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) {
	.nw-front { grid-template-columns: minmax(0, 1fr); }
}

/* the news page's top: its title at a section's size, and the categories beside it as soft pills
   with their counts, the chosen one filled — no banner, no paragraph */
.nw-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(2.6rem, 5vw, 3.6rem) clamp(1.6rem, 3vw, 2.2rem); }
body.campaign-page .nw-top h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.nw-cats { display: flex; flex-wrap: wrap; gap: .45rem; }
.nw-cat-f { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .5rem .42rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: .84rem; font-weight: 600; color: var(--cr-ink-2, var(--ink)); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.nw-cat-f:hover { background: color-mix(in srgb, var(--petrol) 10%, transparent); color: var(--petrol); }
.nw-cat-f i { display: inline-grid; place-items: center; min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: var(--cr-card, var(--surface)); font-style: normal; font-size: .7rem; color: var(--muted); }
.nw-cat-f[aria-current="page"] { background: var(--petrol); color: #fff; }
.nw-cat-f[aria-current="page"] i { background: rgba(255, 255, 255, .22); color: #fff; }
html[data-theme="dark"] .nw-cat-f[aria-current="page"] { color: #0b1433; }
html[data-theme="dark"] .nw-cat-f[aria-current="page"] i { color: #0b1433; background: rgba(11, 20, 51, .15); }

/* ---- the organizations page (www/organizations.html, the month's design) ------------------------
   One job: bring an organization in. It opens on the dark band a single page does, the way in on
   it and "Free" leading the figures along its foot; the five steps as a path — numbered, joined by
   a line, whose turn each is — to take in at a glance; the answers as flat tiles in the weeks'
   colours; the way in again at the foot. */
body.theme-ncsm.orgs-page { --wk1: var(--nc-w1-lt, #2f6fd6); --wk2: var(--nc-w2-lt, #5b63c3); --wk3: var(--nc-w3-lt, #8a5fa3); --wk4: var(--nc-w4-lt, #c04656); }
html[data-theme="dark"] body.theme-ncsm.orgs-page { --wk1: var(--nc-w1-dk, #7aa8ff); --wk2: var(--nc-w2-dk, #9aa2f2); --wk3: var(--nc-w3-dk, #c39ae0); --wk4: var(--nc-w4-dk, #ff95a0); }
.orgs-band-copy { max-width: 44rem; }
.orgs-band .reach-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; padding: 0; border: 0; font-size: .82rem; font-weight: 600; color: var(--petrol); }
.orgs-band .reach-eyebrow i { width: 6px; height: 6px; border-radius: 50%; clip-path: none; background: currentColor; }
body.campaign-page .orgs-band h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.3rem, 4.6vw, 3.6rem); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; color: #fff; }
.orgs-band-copy > p { max-width: 40rem; margin: 1.1rem 0 0; font-size: 1.05rem; line-height: 1.6; color: #c3c8e8; }
.orgs-band-do { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.orgs-band .ed-btn-quiet { background: rgba(255, 255, 255, .1); color: #fff; }
.orgs-band .ed-btn-quiet:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.orgs-sec { padding-top: clamp(3rem, 6vw, 4.2rem); }
.orgs-path { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
/* the line the steps stand on, from the first number to the last */
.orgs-path::before { content: ""; position: absolute; top: 1.2rem; left: 1.2rem; right: calc(20% - 1.2rem); height: 2px; background: color-mix(in srgb, var(--petrol) 22%, transparent); }
.orgs-path li { position: relative; display: grid; align-content: start; gap: .45rem; }
.orgs-path-n { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .5rem; border-radius: 50%; background: var(--petrol); font-family: var(--font-display); font-weight: 600; color: #fff; box-shadow: 0 0 0 6px var(--cr-page, #fff); }
.orgs-path li.is-ours .orgs-path-n { background: var(--cr-card, var(--surface)); color: var(--petrol); box-shadow: inset 0 0 0 2px var(--petrol), 0 0 0 6px var(--cr-page, #fff); }
.orgs-path-who { font-size: .72rem; font-weight: 700; color: var(--muted); }
.orgs-path li.is-ours .orgs-path-who { color: var(--petrol); }
.orgs-path h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.orgs-path p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }

.orgs-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.orgs-notes li { display: grid; align-content: start; gap: .45rem; padding: 1.3rem 1.35rem 1.4rem; border-radius: 16px; background: color-mix(in srgb, var(--wk) 6%, var(--cr-card, var(--surface))); }
.orgs-note-k { justify-self: start; padding: .12rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--wk) 12%, transparent); font-size: .7rem; font-weight: 700; color: var(--wk); }
.orgs-notes h3 { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.orgs-notes p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--cr-ink-2, var(--ink)); }
.orgs-notes a { color: var(--wk); font-weight: 600; }
body.theme-ncsm.orgs-page .cl-join { margin-bottom: clamp(3.5rem, 7vw, 5rem); }

@media (max-width: 900px) {
	/* on a phone the path runs down the page, the line down beside the numbers */
	.orgs-path { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
	.orgs-path::before { top: 1.2rem; bottom: 1.2rem; left: calc(1.2rem - 1px); right: auto; width: 2px; height: auto; }
	.orgs-path li { grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 1rem; }
	.orgs-path-n { grid-row: 1 / span 3; margin: 0; }
}

/* ---- a press is answered --------------------------------------------------------------------
   Everything you can press gives a little under the finger, so a tap on a slow connection is
   seen to have landed before the next page arrives. Small, because it happens many times a visit:
   a button by 3%, a whole card by 1%. */
.btn, .ed-btn { transition: transform .14s var(--cr-ease); }
.btn:active, .ed-btn:active:not(:disabled) { transform: scale(.97); }
/* (the dark face's card names its own transition, transform among them) */
.ed-camp-card, .nw-card { transition: transform .16s var(--cr-ease); }
a.ed-camp-card:active, .nw-card:active { transform: scale(.99); }

/* ---- one page into the next -----------------------------------------------------------------
   Pages hand over to each other instead of cutting. The page itself crossfades, quickly; the one
   thing that carries across is a card's picture, which grows into the picture at the top of the
   page it opens — and shrinks back into its card on the way back. Which elements carry the names
   is decided in csat_web.html, on pageswap and pagereveal. A browser without cross-document view
   transitions keeps the plain cut it has always had. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: .15s; }
::view-transition-new(root) { animation-duration: .25s; }

/* the header is the same on both pages, so it stays where it is — and above the picture, which
   would otherwise grow up over it, a named layer being drawn over the page it was lifted from.
   Named only for the length of a transition (csat_web.html): a named element is a backdrop root,
   and the capsule's frosted glass, a child of the header, would stop seeing the page behind it. */
::view-transition-group(site-header) { z-index: 1; animation-duration: .25s; }

::view-transition-group(hero-fig) { animation-duration: .35s; animation-timing-function: var(--cr-ease); }
/* the card's picture and the hero's are different shapes; both fill the box as it changes rather
   than stretching to it */
::view-transition-old(hero-fig),
::view-transition-new(hero-fig) { height: 100%; object-fit: cover; }

/* on a banded page the picture is the band itself, and its words are lifted out of it so they
   rise into place instead of swelling up from the size of a card */
::view-transition-new(hero-copy) { animation: vt-rise .35s var(--cr-ease) .08s both; }
::view-transition-old(hero-copy) { animation-duration: .15s; }
@keyframes vt-rise { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
	/* nothing travels: the picture and the page only crossfade where they will be */
	::view-transition-group(*) { animation: none; }
	::view-transition-new(hero-copy) { animation: none; }
}

/* ---- a directory arrives --------------------------------------------------------------------
   The directories' heading comes in the order it is read — the label, the headline, what it is
   about — each a beat behind the last, once, as the page opens. Pure CSS: it needs no script to
   run, and a page without animation simply shows it. `backwards` and not `both`, so once it has
   played nothing is left holding the words in place. */
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade-in { from { opacity: 0; } }
.ed-dir-hero .reach-eyebrow,
.ed-dir-hero h1,
.ed-dir-hero > p { animation: rise-in .5s var(--cr-ease) backwards; }
.ed-dir-hero h1 { animation-delay: .06s; }
.ed-dir-hero > p { animation-delay: .12s; }

/* ---- the shelves fill in --------------------------------------------------------------------
   A shelf of cards comes in card by card the first time it scrolls into view, rather than all at
   once — 50ms apart, and no more than six deep, so a long shelf never keeps you waiting at its
   end. The cards are only held back on a page whose script has taken charge of showing them
   (html.can-reveal, csat_web.html), so without it they are simply there; and never on the way
   back to a page, where you have seen them already and one of them is catching a picture. */
.can-reveal :is(.ed-camp-grid, .nw-grid):not(.is-in) > * { opacity: 0; }
.can-reveal :is(.ed-camp-grid, .nw-grid).is-in > * {
	animation: rise-in .45s var(--cr-ease) backwards;
	animation-delay: calc(var(--i, 0) * 50ms);
}

@media (prefers-reduced-motion: reduce) {
	/* still arrives, but by fading where it stands rather than travelling */
	.ed-dir-hero .reach-eyebrow,
	.ed-dir-hero h1,
	.ed-dir-hero > p,
	.can-reveal :is(.ed-camp-grid, .nw-grid).is-in > * { animation-name: fade-in; animation-duration: .3s; }
}

/* ---- phones, and faces not yet supplied ------------------------------------------------------ */
/* the single campaign card, stacked on a narrow screen: its words line up with the picture above
   them, rather than keeping the side-by-side card's deep left inset */
@media (max-width: 860px) {
	body.theme-ncsm:is(.campaigns-dir, .events-dir, .news-page, .orgs-page, .verify-page) .ed-camp-grid-one .ed-camp-body { padding: 1.2rem 1.1rem 3.8rem; }
}

/* an event's four facts repeat, on a phone, what the lines just above them have said — the dates,
   the doors, the venue, the places left — at a screen's height; the lines stay, the strip goes */
@media (max-width: 600px) {
	.event-page .ed-hero .ed-facts { display: none; }
}

/* a speaker with no photograph: their initials on the tint, as the month's agenda shows them */
.ev-person-photo.is-initials { display: grid; place-items: center; }
.ev-person-photo.is-initials span { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.02em; color: var(--petrol, var(--ed-green)); }
@media (max-width: 520px) {
	/* and small, beside the name, rather than a large empty square above it */
	.ev-person:has(.is-initials), .ev-person-keynote:has(.is-initials),
	.campaign-detail .ev-person-keynote:has(.is-initials) { grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
	.ev-person-photo.is-initials span { font-size: 1.1rem; }
}

/* ---- an event's speakers, by their part (www/event.html) -------------------------------------
   Under the ones who lead the day, the rest as a programme lists them — presenters, moderators,
   the panel, everyone else — each under a heading with its count, as the directories' shelves */
.ev-part-group { margin-top: 2.2rem; }
.ev-part-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.ev-part-head .n { display: inline-grid; place-items: center; min-width: 1.5rem; padding: .1rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }

/* a sponsor's tier on its own tile, now that the tiers share one grid (www/event.html) */
.ev-logo-tier { align-self: center; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--petrol, var(--ed-green)); }
body.theme-ncsm.event-page .ev-logo-tier { letter-spacing: .02em; text-transform: none; font-size: .72rem; }
/* a tile with its label reads from the top, so the labels and logos in a row line up whatever
   the length of the names under them */
body.theme-ncsm.event-page .ev-logo:has(.ev-logo-tier) { justify-content: flex-start; }
/* /code-of-conduct lands on its part of the visit page, clear of the header and the tab strip */
#conduct { scroll-margin-top: 150px; }

/* where a campaign's speaker spoke, under their card (templates/includes/speaker_cards.html) */
.ev-at { margin: .35rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.ev-at a { color: var(--petrol, var(--ed-green)); text-decoration: none; }
.ev-at a:hover { text-decoration: underline; }

/* ---- a campaign's overview (www/campaign.html) ----------------------------------------------- */
/* up next: the event page's running order, one row a day still to come */
.cl-next { margin-top: .4rem; }
.cl-next .ev-slot { grid-template-columns: 12rem minmax(0, 1fr); }
@media (max-width: 600px) { .cl-next .ev-slot { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }
.cl-next b a { color: inherit; text-decoration: none; }
.cl-next b a:hover { color: var(--petrol); text-decoration: underline; }
/* the record with fewer than four photographs: a row of them, not a pinned sequence */
.cl-shots-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem; margin-top: 1.2rem; }
.cl-shots-row .gallery-tile { position: relative; display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; background: var(--line); }
.cl-shots-row img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--cr-ease); }
.cl-shots-row span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem .9rem .75rem; background: linear-gradient(transparent, rgba(8, 10, 30, .72)); color: #fff; font-size: .86rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .cl-shots-row .gallery-tile:hover img { transform: scale(1.03); } }
.cl-shots-row-more { display: inline-block; margin-top: 1rem; }

/* ---- an event's programme (templates/includes/programme.html) ------------------------------------
   A rail down the day, a dot a session in its room's colour, the time beside it and the session as
   a card edged in that colour. The rooms take four colours far enough apart to tell at a glance —
   blue, teal, plum, coral — in order of mention; a session with no room takes the page's accent.
   Each clears 4.5:1 as text on its tinted pill. */
.campaign-detail {
	--ag-t0: var(--petrol);
	--ag-t1: #2f6fd6; --ag-t2: #0f7b6c; --ag-t3: #8a5fa3; --ag-t4: #c04656;
}
:root[data-theme="dark"] .campaign-detail { --ag-t1: #7aa8ff; --ag-t2: #5ed3bf; --ag-t3: #c39ae0; --ag-t4: #ff95a0; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .campaign-detail { --ag-t1: #7aa8ff; --ag-t2: #5ed3bf; --ag-t3: #c39ae0; --ag-t4: #ff95a0; }
}

.ag-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.ag-legend li { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--tk) 9%, transparent); font-size: .78rem; font-weight: 600; color: var(--ink); }
.ag-legend i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--tk); }

.ag-daysec + .ag-daysec { margin-top: 2.4rem; }
.ag-day { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.ag-day span { padding: .15rem .55rem; border-radius: 999px; background: var(--petrol); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: 0; }

/* a programme is read down, not across: held to a width a line of it can be taken in at */
.ag { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.ag-slot, .ag-gap { display: grid; grid-template-columns: 5.2rem 1.4rem minmax(0, 1fr); column-gap: .9rem; }
.ag-time { padding-top: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; }
.ag-time b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ag-time span { display: block; font-size: .8rem; color: var(--muted); }
.ag-time small { display: block; margin-top: .35rem; font-size: .72rem; color: var(--cr-faint, var(--muted)); }

.ag-rail { position: relative; }
.ag-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--line); }
.ag-slot:first-child .ag-rail::before { top: 1.4rem; }
.ag-slot:last-child .ag-rail::before { bottom: auto; height: 1.4rem; }
.ag-rail i { position: absolute; top: 1.2rem; left: 50%; width: .85rem; height: .85rem; border-radius: 50%; transform: translateX(-50%); background: var(--cr-card, var(--surface)); box-shadow: inset 0 0 0 2.5px var(--tk, var(--petrol)); }
.is-live .ag-rail i { background: var(--tk, var(--petrol)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tk, var(--petrol)) 22%, transparent); }

.ag-body { margin: .4rem 0; padding: .9rem 1.15rem 1rem; border-left: 3px solid var(--tk, var(--petrol)); border-radius: 4px 14px 14px 4px; background: color-mix(in srgb, var(--tk, var(--petrol)) 6%, var(--cr-card, var(--surface))); }
.ag-body h4 { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.ag-body p { margin: .45rem 0 0; max-width: 62ch; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.ag-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.ag-track, .ag-live { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.ag-track { background: color-mix(in srgb, var(--tk, var(--petrol)) 13%, transparent); color: var(--tk, var(--petrol)); }
.ag-live { background: var(--cr-accent-solid); color: var(--cr-on-accent, #fff); }
.ag-live::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; animation: hero-pulse 2.4s ease-out infinite; }

.ag-people { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.ag-people li { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.ag-face { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: color-mix(in srgb, var(--tk, var(--petrol)) 16%, var(--cr-card, var(--surface))) center / cover no-repeat; font-size: .72rem; font-weight: 700; color: var(--tk, var(--petrol)); }
.ag-people b { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); }
.ag-people small { display: block; font-size: .74rem; color: var(--muted); }

/* the day pausing: no card, no room pill, a small dot and the words in the page's own grey */
.is-pause .ag-body { margin: .1rem 0; padding: .95rem 0 .75rem; border: 0; background: none; }
.is-pause .ag-body h4 { font-family: var(--font-body); font-size: .92rem; font-weight: 500; color: var(--muted); }
.ag-where { font-weight: 400; }
.is-pause .ag-rail i { top: 1.35rem; width: .5rem; height: .5rem; background: var(--line); box-shadow: none; }
.is-pause .ag-time b { font-size: .92rem; font-weight: 500; color: var(--muted); }

/* a pause worth saying, between two sessions: the rail dashed through it */
.ag-gap > span:last-child { padding: .35rem 0; font-size: .74rem; font-weight: 600; color: var(--cr-faint, var(--muted)); }
.ag-gap .ag-rail::before { background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px); }

/* on the overview: the same rail, tighter */
.ag-compact .ag-body { padding: .75rem 1rem .8rem; }
.ag-compact .ag-time { padding-top: .9rem; }
.ag-compact .ag-rail i { top: 1.05rem; }
.ag-compact .ag-people { margin-top: .55rem; }
.ag-compact .ag-face { width: 1.8rem; height: 1.8rem; font-size: .64rem; }
.ag-more { display: inline-block; margin: .9rem 0 0 6.1rem; }

@media (max-width: 600px) {
	.ag-slot, .ag-gap { grid-template-columns: 3.4rem 1rem minmax(0, 1fr); column-gap: .55rem; }
	.ag-time b { font-size: .92rem; }
	.ag-time span, .ag-time small { font-size: .7rem; }
	.ag-body { padding: .8rem .9rem .85rem; }
	.ag-more { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ag-live::before { animation: none; } }
/* an event card on a campaign's Events tab keeps the room its corner arrow needs under the venue */
body.theme-ncsm.campaign-detail .ed-tab-body .ed-camp-body:has(.ed-camp-go) { padding-bottom: 3.6rem; }