@font-face { font-family: "Archivo"; src: url(/static/fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/static/fonts/dmsans.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; }

:root {
  /* Light (default): the logo's sky blue, white ink, sunflower yellow for actions */
  --bg: #4f6abb; --surface: #445ea9; --ink: #ffffff; --muted: #eef1ff; --line: #dfe5ff;
  --hi: #ffe680; --accent: #ffd646; --accent-hover: #ffffff; --on-accent: #141210; --focus: #ffffff;
  --paper: #ffffff; --on-paper: #141210; --link-on-paper: #24357a; --err: #ffe1d9; --scrim: rgb(52 72 140 / .9);
  --on-field: #141210; --sun: #ffd646; --sky: #bfe3ff; --chrome: #e6e6e6; --coral: #ff9c84;
  --cog-light: rgb(255 255 255 / .5); --cog-dark: rgb(16 28 72 / .55); --cog-face: rgb(40 64 150 / .35);
  --wide: 112%;
  --m: clamp(16px, 2.2vw, 32px);
  --gap: clamp(96px, 12vw, 200px);
  --t1: clamp(52px, 10vw, 170px);
  --t2: clamp(34px, 4.6vw, 76px);
  --t3: clamp(22px, 2.2vw, 32px);
  --t4: 17px;
  --t5: 14px;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --text: "DM Sans", system-ui, sans-serif;
  color-scheme: dark;
}
/* Dark alternative: black and pastel lilac */
[data-theme="dark"] {
  --bg: #0d0b10; --surface: #1a1620; --ink: #f2eef8; --muted: #c9c0d9; --line: #8e839f;
  --hi: #c9b3ff; --accent: #c9b3ff; --accent-hover: #e2d4ff; --on-accent: #0d0b10; --focus: #c9b3ff;
  --paper: #1a1620; --on-paper: #f2eef8; --link-on-paper: #c9b3ff; --err: #ffb4c8; --scrim: rgb(13 11 16 / .88);
  --on-field: #0d0b10; --sun: #e2d4ff; --sky: #b9a6f2; --chrome: #d9d9d9; --coral: #d6b8ff;
  --cog-light: rgb(201 179 255 / .45); --cog-dark: rgb(0 0 0 / .7); --cog-face: rgb(150 120 220 / .12);
}
.look-sun { --field: var(--sun); } .look-sky { --field: var(--sky); } .look-chrome { --field: var(--chrome); } .look-coral { --field: var(--coral); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t4)/1.55 var(--text); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--hi); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: var(--wide); text-transform: uppercase; letter-spacing: 0; line-height: .95; text-wrap: balance; }
p { margin: 0; }
.sr, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: 12px; z-index: 10; background: var(--accent); color: var(--on-accent); padding: 10px 16px; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; background: var(--accent); color: var(--on-accent); font: 700 var(--t4)/1 var(--text); text-decoration: none; border: 0; cursor: pointer; transition: transform .18s ease, background-color .18s ease; }
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-s { min-height: 40px; padding: 8px 16px; }

/* bar */
.theme { background: transparent; color: var(--ink); border: 2px solid var(--line); min-height: 40px; padding: 6px 14px; font: 700 15px var(--text); cursor: pointer; }
.theme:hover { border-color: var(--ink); }
.theme[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bar { display: flex; align-items: center; gap: 32px; padding: 16px var(--m); }
.wm { display: block; line-height: 0; }
.wm img { height: 72px; width: auto; margin: -8px 0; }
.bar-cta { display: flex; gap: 8px; }
/* yellow gears on the sky-blue look, lilac ones in the dark look */
.wm-dark, [data-theme=dark] .wm-light { display: none; }
[data-theme=dark] .wm-dark { display: block; }
.bar nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.bar nav a { text-decoration: none; font-weight: 600; white-space: nowrap; transition: color .15s; }
.bar nav a:hover, .bar nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--hi); }

/* agenda: one size, fixed column starts */
.list { padding: var(--gap) var(--m) 0; }
.list-h { font-size: var(--t3); color: var(--hi); padding: 72px 0 20px; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.list-h:first-child { padding-top: 0; }
.agenda { width: 100%; border-collapse: collapse; font: 500 var(--t3)/1.5 var(--text); font-variant-numeric: tabular-nums; }
.agenda td { padding: .1em 0; vertical-align: baseline; }
.agenda td:nth-child(1) { width: 14%; }
.agenda td:nth-child(2) { width: 38%; }
.agenda td:nth-child(3) { width: 34%; }
.agenda .r { text-align: right; color: var(--muted); }
.agenda tr { transition: background-color .15s; }
.agenda tr:hover { background: var(--surface); }
.agenda a { text-decoration: none; }
.agenda a:hover { text-decoration: underline; }
.agenda-empty { font-size: var(--t3); line-height: 1.3; max-width: 40ch; }
.rows { margin: 0; font-size: var(--t3); line-height: 1.35; }
.rows div { display: grid; grid-template-columns: 38% 1fr; gap: 24px; padding: .2em 0; }
.rows dt { font: 800 var(--t3)/1.35 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.rows dd { margin: 0; }

/* about teaser */
.about-teaser { display: grid; grid-template-columns: 7fr 5fr; gap: 48px var(--m); padding: var(--gap) var(--m) 0; align-items: start; }
.about-teaser h2 { font-size: var(--t2); }
.bloom { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.bloom img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bloom figcaption { margin-top: 12px; font-size: 15px; color: var(--muted); }
.statement { margin-top: 32px; font-size: var(--t3); line-height: 1.25; max-width: 30ch; }
.more { display: inline-block; margin-top: 32px; font-weight: 700; }
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.values li { background: var(--surface); padding: 20px 24px; font: 800 var(--t3)/1.05 var(--display); font-stretch: var(--wide); text-transform: uppercase; }

/* mission */
.mission { display: grid; grid-template-columns: 5fr 7fr; gap: 48px var(--m); padding: var(--gap) var(--m) 0; align-items: start; }
.mission h2 { font-size: var(--t2); }
.mission-head .statement { margin-top: 32px; }
.mission-text { display: grid; gap: 20px; font-size: 19px; line-height: 1.6; max-width: 60ch; }
.mission-ask { margin-top: 12px; font: 800 var(--t3)/1.2 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.mission-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; font-weight: 700; }

/* one word is the button */
.cta { margin-top: var(--gap); }
.cta-link { position: relative; display: block; min-height: 60svh; background: var(--accent); color: var(--on-accent); text-decoration: none; overflow: hidden; transition: background-color .12s, color .12s; }
.cta-link:hover, .cta-link:focus-visible { background: var(--on-accent); color: var(--accent); outline-offset: -6px; }
.cta-say { position: absolute; top: 24px; left: var(--m); max-width: 30ch; font-size: 20px; font-weight: 600; line-height: 1.3; }
.cta-arrow { position: absolute; top: 24px; right: var(--m); width: 48px; height: 48px; transition: transform .2s; }
.cta-link:hover .cta-arrow { transform: translate(4px, -4px); }
.cta-word { position: absolute; left: var(--m); bottom: 20px; font: 900 clamp(52px, 14.5vw, 300px)/.78 var(--display); font-stretch: var(--wide); text-transform: uppercase; letter-spacing: -0.03em; }

/* footer: a single quiet line */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: baseline; padding: 30svh var(--m) 30px; font-size: 15px; color: var(--muted); }
.foot a { color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-end { text-align: right; }
.credits { grid-column: 1 / -1; margin-top: 24px; font-size: 16px; max-width: 64ch; }
.credits a { color: var(--muted); }

/* event page */
.ev { display: grid; grid-template-columns: 5fr 7fr; gap: 48px var(--m); padding: 48px var(--m) 0; align-items: start; }
.ev-media { position: sticky; top: 24px; }
.ev-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ev-noposter { aspect-ratio: 4 / 5; background: var(--field); color: var(--on-field); display: grid; place-items: end start; padding: 32px; }
.ev-noposter span { font: 850 var(--t2)/.9 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.ev-text h1 { font-size: var(--t2); }
.ev-facts { margin-top: 32px; font: 800 var(--t3)/1.15 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.ev-count { margin-top: 16px; font-size: var(--t3); line-height: 1.3; }
.ev-desc { margin-top: 32px; max-width: 60ch; }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.ev-sub { margin-top: 96px; font-size: var(--t3); color: var(--hi); }
.ev-lineup { list-style: none; margin: 20px 0 0; padding: 0; overflow-wrap: anywhere; font: 800 clamp(22px, 3vw, 46px)/1.1 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.back { padding: 96px var(--m) 0; }

/* about page */
.about-head { padding: 24px var(--m) 0; }
.about-head h1 { font-size: var(--t1); line-height: .9; }
.about-head .statement { max-width: 40ch; }

.values-pin { position: relative; margin-top: var(--gap); }
.values-title { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 0 var(--m) 24px; font-size: var(--t2); }
.value { min-height: 72svh; display: grid; align-content: center; justify-items: start; padding: 48px var(--m); }
.value:nth-of-type(even) { justify-items: end; }
.value > * { width: min(760px, 100%); background: var(--field); color: var(--on-field); }
.value h3 { padding: 40px 40px 0; font-size: clamp(24px, 2.6vw, 40px); }
.value p { padding: 24px 40px 40px; font-size: var(--t3); line-height: 1.3; }
.wall { padding: var(--gap) var(--m) 0; }
.wall h2 { font-size: var(--t2); }
.wall-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--m); margin-top: 48px; }
.wall figure { margin: 0; }
.wall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.wall a:hover img { transform: scale(1.02); }
.wall figcaption { margin-top: 12px; font-size: 15px; }

/* residents: portrait pinned full screen, bio rises over it */
.res-intro { padding: 24px var(--m) 0; }
.res-intro h1 { font-size: var(--t1); line-height: .82; }
.res-index { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 40px; font: 800 var(--t3)/1.2 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.res-index a { text-decoration: none; }
.res-index a:hover { color: var(--accent); }
.res { position: relative; margin-top: var(--gap); }
.res-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--field); }
.res-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.res-text { position: relative; z-index: 1; width: min(640px, calc(100% - 2 * var(--m))); margin: 0 var(--m) 20svh; padding: clamp(24px, 3vw, 44px); background: var(--scrim); display: grid; gap: 16px; }
.res-text h2 { font-size: var(--t2); }
.res-role { font: 800 var(--t3)/1.1 var(--display); font-stretch: var(--wide); text-transform: uppercase; color: var(--hi); }
.res-bio { font-size: var(--t4); line-height: 1.6; max-width: 60ch; }
.res-links { display: flex; flex-wrap: wrap; gap: 12px 24px; font-weight: 700; }
.res:nth-of-type(even) .res-text { margin-left: auto; }

/* open positions */
.join-head { padding: 24px var(--m) 0; }
.join-head h1 { font-size: var(--t1); line-height: .82; }
.join-head .statement { max-width: 40ch; }
.pos { display: grid; grid-template-columns: 5fr 7fr; gap: 48px var(--m); padding: var(--gap) var(--m) 0; align-items: start; }
.pos-card { background: var(--field); color: var(--on-field); padding: clamp(24px, 3vw, 40px); display: grid; gap: 20px; position: sticky; top: 24px; }
.pos-card h2 { font-size: clamp(26px, 3vw, 46px); }
.pos-facts { font: 800 var(--t3)/1.15 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.pos-text { display: grid; gap: 20px; font-size: 19px; line-height: 1.55; max-width: 58ch; }
.pos-text .btn { margin-top: 12px; }
.apply-flyers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); margin-top: 48px; }
.apply-flyers img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.apply-flyers a:hover img { transform: scale(1.02); }

/* forms */
.apply { display: grid; grid-template-columns: 5fr 7fr; gap: 48px var(--m); padding: 48px var(--m) 0; align-items: start; }
.apply-intro { position: sticky; top: 24px; }
.apply-intro h1 { font-size: var(--t2); }
.apply-intro h2 { margin-top: 64px; font-size: var(--t3); color: var(--hi); }
.apply-intro p:not(.statement) { margin-top: 16px; max-width: 46ch; }
.apply-form, .adv-form { background: var(--surface); padding: clamp(20px, 3vw, 40px); }
.apply-form.done h2 { font-size: var(--t2); }
.apply-form.done p { margin-top: 20px; }
label, legend { display: block; margin-top: 24px; font-weight: 700; }
legend { float: left; width: 100%; margin: 0 0 4px; font: 850 var(--t3)/1 var(--display); font-stretch: var(--wide); text-transform: uppercase; color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 0 0 56px; min-width: 0; }
fieldset > :nth-child(2) { clear: both; }
.hint { margin-top: 4px; font-size: 15px; color: var(--muted); }
input, textarea, select { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; background: var(--bg); color: var(--ink); font: inherit; border: 2px solid var(--line); border-radius: 0; }
textarea { min-height: 112px; resize: vertical; }
input[type="file"] { padding: 10px; }
input:hover, textarea:hover, select:hover { border-color: var(--muted); }
[aria-invalid="true"] { border-color: var(--err); }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; }
.check input { width: 24px; height: 24px; flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.check label { margin: 0; font-weight: 400; }
.apply-form .btn, .adv-form .btn { margin-top: 32px; }
.form-status { margin-top: 16px; font-weight: 700; min-height: 1.5em; }
.form-status.ok { color: var(--ink); }
.form-status.err, .up-status.err { color: var(--err); }
.form-error { background: var(--coral); color: var(--on-field); padding: 14px 18px; font-weight: 700; }
.up-status { margin-top: 6px; font-size: 15px; color: var(--muted); }
.up-status.ok { color: var(--ink); }
.box { margin-top: 16px; padding: 16px 18px; background: var(--bg); white-space: pre-wrap; }
.adv { max-width: 820px; margin: 0 auto; padding: 48px var(--m) 0; }
.adv-head h1 { font-size: var(--t2); }
.adv-event { margin: 24px 0 16px; font: 800 var(--t3)/1.2 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.adv-head + .adv-form { margin-top: 40px; }

/* legal */
.legal { max-width: 74ch; padding: 48px var(--m) 0; }
.legal h1 { font-size: var(--t2); }
.legal h2 { margin-top: 48px; font-size: clamp(17px, 1.8vw, 26px); }
.legal p { margin-top: 16px; }
.draft { background: var(--sun); color: var(--on-field); padding: 14px 18px; font-weight: 700; margin-top: 32px !important; }

/* entrances: content stays visible if the script never runs */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); }
.js [data-reveal].in > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].in > :nth-child(2) { transition-delay: 80ms; }
.js [data-reveal].in > :nth-child(3) { transition-delay: 160ms; }
.js [data-reveal].in > :nth-child(4) { transition-delay: 240ms; }
.js [data-reveal].in > :nth-child(n+5) { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] > *, .js [data-reveal].in > * { opacity: 1; transform: none; transition: none; }
  .btn, .wall img, .last-flyer img, .cta-arrow, .sky-last { transition: none; }
}

@media (max-width: 1000px) {
  .bar { flex-wrap: wrap; row-gap: 12px; }
  .bar nav { order: 3; width: 100%; margin: 0; }
  .bar .bar-cta { margin-left: auto; }
}
@media (max-width: 760px) {
  .bar { gap: 16px; flex-wrap: wrap; }
  .bar nav { order: 3; width: 100%; margin: 0; gap: 14px; font-size: 15px; padding-right: 8px; }
  .bar .bar-cta { margin-left: auto; }
  .wm img { height: 52px; margin: -4px 0; }
  .about-head h1 { font-size: 11vw; }
  .bloom { grid-column: auto; grid-row: auto; }
  .agenda, .agenda tbody, .agenda tr, .agenda td { display: block; width: auto !important; }
  .agenda tr { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 10px 0; }
  .agenda td:nth-child(2) { grid-column: 1 / -1; order: -1; font-size: 22px; font-weight: 700; }
  .agenda td:nth-child(1), .agenda td:nth-child(3), .agenda .r { font-size: 15px; text-align: left; color: var(--muted); }
  .agenda .r { grid-column: 1 / -1; }
  .about-teaser, .ev, .apply, .about-head, .pos, .mission { grid-template-columns: 1fr; }
  .pos-card { position: static; }
  .value h3 { font-size: 20px; }
  .ev-media, .apply-intro { position: static; }
  .rows div { grid-template-columns: 1fr; gap: 0; padding: .4em 0; }
  .value:nth-of-type(even) { justify-items: start; }
  .value h3 { padding: 28px 24px 0; }
  .value p { padding: 16px 24px 28px; }
  .wall-row { grid-template-columns: 1fr 1fr; }
  .cta-link { min-height: 46svh; }
  .cta-say { font-size: 17px; max-width: 22ch; }
  .cta-arrow { width: 32px; height: 32px; }
  .cta-word { font-size: 14vw; }
  .foot { grid-template-columns: 1fr; gap: 8px; padding-top: 20svh; }
  .foot-end { text-align: left; }
}

/* sky hero (logo look): the logo full width, then the last events on the same sky */
.sky { position: relative; }
.sky-logo { margin: 0; line-height: 0; }
.sky-logo img, .sky-logo video { display: block; width: 100%; height: min(calc(100svh - 72px - 240px), 820px); min-height: 320px; object-fit: cover; object-position: 50% 42%; }
.sky-hero { display: grid; justify-items: center; text-align: center; gap: 20px; padding: 28px var(--m) 96px; }
.sky-lede { color: var(--ink);  font-size: var(--t3); line-height: 1.25; font-weight: 600; max-width: 30ch; }
.sky-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; }
.sky-next { display: grid; gap: 2px; text-align: left; background: var(--paper); color: var(--on-paper); padding: 14px 20px; text-decoration: none; font-size: 16px; transition: transform .18s; }
.sky-next span { font-size: 15px; font-weight: 700; color: var(--link-on-paper); }
.sky-next strong { font: 800 22px/1.15 var(--display); font-stretch: var(--wide); text-transform: uppercase; }
.sky-next:hover { transform: translateY(-2px); }
.sky-collab { background: var(--accent); color: var(--on-accent); font-size: 20px; align-self: stretch; padding: 14px 28px; }
.sky-collab:hover { background: var(--accent-hover); }
.sky-last { padding: 0 var(--m) var(--gap); }
.sky-last h2 { font-size: var(--t2); color: var(--ink); margin-bottom: 40px; }
.sky-last { transition: background-color .9s ease, color .9s ease; background-color: var(--tint, transparent); color: var(--tint-ink, var(--ink)); }
.sky-last h2 { color: inherit; }
.last-list { display: grid; gap: clamp(64px, 10vw, 160px); position: relative; z-index: 1; }
.last { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--m) clamp(24px, 5vw, 80px); align-items: center; min-height: 70svh; }
.last-flyer img { width: 100%; max-height: 82svh; object-fit: contain; object-position: left center; transition: transform .4s; }
.last-flyer:hover img { transform: scale(1.015); }
.last-info { display: grid; gap: 14px; justify-items: start; }
.last h3 { font-size: var(--t2); }
.last h3 a { text-decoration: none; }
.last h3 a:hover { text-decoration: underline; }
.last-meta { font-size: var(--t3); font-weight: 700; line-height: 1.2; }
.last-lineup { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 19px; font-weight: 600; max-width: 34em; }
.last-ra { margin-top: 12px; }
.sky-last :focus-visible { outline-color: currentColor; }
@media (max-width: 760px) {
  .last { grid-template-columns: 1fr; min-height: 0; }
  .last-flyer img { max-height: none; }
  .sky-logo img, .sky-logo video { height: auto; min-height: 0; aspect-ratio: 4 / 5; object-fit: contain; }
  .sky-actions { flex-direction: column; width: 100%; }
  .sky-collab { justify-content: center; }
}

/* gears behind headings: see-through, embossed, turning into each other */
.geared { display: flex; align-items: center; justify-content: space-between; gap: var(--m); }
.geared > :not(.gears) { min-width: 0; }
/* the gears take their own room beside the heading, so they can never sit on top of text */
.geared > .gears { order: 2; flex: none; width: clamp(88px, 16vw, 260px); height: auto; overflow: hidden; pointer-events: none; }
.cog { transform-box: fill-box; transform-origin: center; transform: rotate(var(--p)); animation: cog-cw var(--t) linear infinite; }
.cog.ccw { animation-name: cog-ccw; }
@keyframes cog-cw { from { transform: rotate(var(--p)); } to { transform: rotate(calc(var(--p) + 360deg)); } }
@keyframes cog-ccw { from { transform: rotate(var(--p)); } to { transform: rotate(calc(var(--p) - 360deg)); } }
.cog-light .cog { fill: none; stroke: var(--cog-light); stroke-width: 3; }
.cog-dark .cog { fill: none; stroke: var(--cog-dark); stroke-width: 3.5; }
.cog-face .cog { fill: var(--cog-face); stroke: rgb(255 255 255 / .15); stroke-width: 1; }
@media (prefers-reduced-motion: reduce) { .cog { animation: none; } }