/* cernunnos.au. Night by default; a pedal's page can switch to daylight (html.day), when the pedal is shown unlit. */
:root {
  --ink: #08080a; --panel: #111114; --bone: #EDE6D3; --bone2: #ADA594; --rule: #ffffff18; --gold: #D9B76A;
  --accent-night: var(--bone); --accent-day: var(--bone); --accent: var(--accent-night);
  color-scheme: dark;
}
html.day { --ink: #E4DDCB; --panel: #DAD2BE; --bone: #1d1b17; --bone2: #5d5648; --rule: #00000020; --gold: #94742F; --accent: var(--accent-day); color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); transition: background-color .5s; }
body { background: var(--ink); color: var(--bone); font: 400 17px/1.6 "Alegreya Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .5s, color .5s; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.sc { font-family: "Alegreya SC", Georgia, serif; font-weight: 900; }
.it { font-family: "Alegreya", Georgia, serif; font-style: italic; font-weight: 500; }
.tag { font: 800 14px/1.2 "Big Shoulders Display", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* a pedal: the board, and its lights on a layer of their own over it (src/run.js) */
.drawing { position: relative; }
.drawing > svg + svg { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }

/* the mark: the woodcut head, as a mask so it takes the text colour */
.mark { display: inline-block; width: 1.15em; aspect-ratio: 1100 / 976; background: currentColor;
  -webkit-mask: url(/mark.svg) center / contain no-repeat; mask: url(/mark.svg) center / contain no-repeat; }

/* a double gold rule with a diamond, after the frame on the pedals */
.rule { display: flex; align-items: center; gap: 14px; color: var(--gold); margin: 0 auto; max-width: 552px; padding: 0 16px; }
.rule::before, .rule::after { content: ""; flex: 1; height: 4px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .8; }
.rule i { width: 9px; height: 9px; background: currentColor; transform: rotate(45deg); }

/* home: the name over the night, then the pedals */
.hero { position: relative; text-align: center; padding-top: clamp(40px, 7vw, 96px); overflow: hidden; }
.hero h1, .hero p { padding: 0 16px; }
.hero h1 { position: relative; z-index: 1; font-size: clamp(54px, 14.2vw, 216px); line-height: .9; letter-spacing: -.005em; }
.hero p { position: relative; z-index: 1; margin-top: clamp(10px, 1.4vw, 18px); font-size: clamp(19px, 2.1vw, 28px); color: var(--bone2); }
/* the night at its own shape, so a wide window never crops his head off; past 2400px it stops growing and fades at the sides */
.hero .night { width: min(100%, 2400px); aspect-ratio: 2688 / 1056; height: auto; min-height: 300px; margin: clamp(4px, 1vw, 16px) auto 0;
  object-fit: cover; object-position: 41% 30%;
  -webkit-mask: linear-gradient(transparent, #000 16%, #000 80%, transparent); mask: linear-gradient(transparent, #000 16%, #000 80%, transparent); }
@media (min-width: 2400px) {
  .hero .night { -webkit-mask: linear-gradient(transparent, #000 16%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-composite: source-in; mask: linear-gradient(transparent, #000 16%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-composite: intersect; }
}

.range { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3vw, 48px); padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 110px); }
.card { text-decoration: none; display: block; }
.card .drawing { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.card:hover .drawing { transform: translateY(-6px); }
.card .name { display: block; margin-top: 22px; font-size: clamp(25px, 2.1vw, 31px); line-height: 1.05; }
.card .kind { display: block; color: var(--accent); font-size: 19px; margin-top: 4px; }
.card .soon { display: block; margin-top: 12px; color: var(--bone2); font: 800 14px/1.2 "Big Shoulders Display", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 1100px) { .range { grid-template-columns: repeat(2, 1fr); row-gap: 64px; } .card .drawing { max-width: 440px; } }
@media (max-width: 560px) { .range { grid-template-columns: 1fr; } .card .drawing { max-width: 420px; margin: 0 auto; } .card { text-align: center; } }

/* a pedal's page */
.crumb { padding: 26px 0 0; }
.crumb a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 25px; line-height: 1; }
.crumb .mark { width: 50px; }
.pedal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(60px, 8vw, 120px); align-items: start; }
.stage { position: sticky; top: 28px; }
.stage .box { position: relative; max-width: 620px; margin: 0 auto; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.switch { position: absolute; width: 11.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.switch:hover { box-shadow: 0 0 0 2px #ffffff30; }
.switch:active { box-shadow: 0 0 0 2px var(--accent); background: #ffffff10; }
html.day .switch { display: none; }
.under { max-width: 620px; margin: 22px auto 0; display: grid; gap: 18px; }
.try { display: flex; gap: 18px 24px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; color: var(--bone2); font-size: 15.5px; line-height: 1.45; }
.try p { flex: 1 1 260px; }
.try b { color: var(--bone); font-weight: 600; }
html.day .try p { visibility: hidden; }
.lights { display: inline-flex; border: 1px solid var(--rule); border-radius: 99px; padding: 3px; flex: none; }
.lights button { font: inherit; font-size: 14.5px; color: var(--bone2); background: none; border: 0; border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.lights button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }

/* a pedal with a demo: Listen, what it's doing, its settings, and knobs that turn (src/orrery-page.js) */
.listen-row { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; min-height: 42px; }
.listen { font: 600 16px/1 "Alegreya Sans", sans-serif; color: #111; background: var(--accent); border: 0; border-radius: 99px; padding: 12px 22px; cursor: pointer; }
.listen[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
.readout { font: 800 15px/1.3 "Big Shoulders Display", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.settings { display: flex; flex-wrap: wrap; gap: 8px; }
.settings button { font: inherit; font-size: 15px; color: var(--bone); background: none; border: 1px solid var(--rule); border-radius: 99px; padding: 5px 14px; cursor: pointer; }
.settings button:hover { border-color: var(--bone2); }
.settings button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.knob { position: absolute; width: 8.9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; cursor: ns-resize; touch-action: none; }
.knob:hover, .knob:focus-visible { box-shadow: 0 0 0 2px #ffffff30; outline: none; }
html.day .knob { display: none; }

.words .tag { color: var(--accent); }
.words h1 { font-size: clamp(48px, 6vw, 84px); line-height: .98; margin-top: 12px; }
.words .sub { font-size: clamp(21px, 2vw, 27px); color: var(--accent); margin: 8px 0 26px; }
.words > p { color: var(--bone2); margin-bottom: 16px; max-width: 62ch; }
.words > p b { color: var(--bone); font-weight: 600; }
.controls { margin-top: 36px; display: grid; gap: 30px; }
.controls h2, .made h2 { font: 800 15px/1.2 "Big Shoulders Display", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.controls dl div { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.45; }
.controls dt { font: 800 15.5px/1.45 "Big Shoulders Display", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.controls dd { color: var(--bone2); }
.made { margin-top: 36px; }
.made p { color: var(--bone2); font-size: 16px; max-width: 62ch; }
.soon { margin-top: 36px; font-size: 25px; }
@media (min-width: 901px) {   /* the pedal and what's under it fit the window, so none of it hides under the sticky stage */
  .stage .box, .under { max-width: max(420px, min(680px, calc((100svh - 300px) * 1.11))); }
}
@media (max-width: 900px) {
  .pedal { grid-template-columns: 1fr; }
  .stage { position: static; }
  .stage .box { max-width: 520px; }
}

footer { padding: 34px 0 44px; color: var(--bone2); font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 26px; }
footer a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; color: var(--bone); }
footer .mark { width: 34px; }

/* not found */
.lost { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 60px 16px; }
.lost .seated { width: min(300px, 62vw); aspect-ratio: 869 / 1100; margin: 0 auto 28px; background: var(--bone);
  -webkit-mask: url(/seated.svg) center / contain no-repeat; mask: url(/seated.svg) center / contain no-repeat; }
.lost h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1; }
.lost p { color: var(--bone2); margin-top: 12px; font-size: 19px; }

/* moving between pages (build.py ARRIVE): the page left shrinks back and fades, the pedal you clicked flies to where it
   is on the next page, the name shrinks into the crumb or grows out of it, and the new page's words rise in under it */
.hero h1 .title, .crumb .title { view-transition-name: name; display: inline-block; }
::view-transition-group(*) { animation-duration: .75s; animation-timing-function: cubic-bezier(.3, .7, .1, 1); }
::view-transition-old(root) { animation: vt-away .4s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .5s ease .1s both; }
::view-transition-old(*):only-child { animation: vt-away .35s ease both; }
::view-transition-new(*):only-child { animation: vt-up .75s cubic-bezier(.2, .8, .2, 1) .15s both; }
@keyframes vt-away { to { opacity: 0; transform: scale(.96); } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-up { from { opacity: 0; transform: translateY(30px) scale(.97); } }
html.arrive [data-rise] { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--g, 0) * 50ms + 180ms); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }