/* ===========================================================
   SISYPHUS
   Act I   the loop      clinical, scroll-snapped
   Act II  the landing   a progress bar that resolves badly
   Act III the site      tracks arcing around the title

   EDITING THE TRACKLIST
   Add or remove an <li> in .orbit and a matching <li> in
   .tracks — the arc re-spaces and re-sizes itself.
   Marks:  class="cut" on the <li>   (unnumbered, struck)
           class="added" on the <li> (amber ring / underline)
           <span class="moved">was 07</span>
   Arc geometry: ARC_START / ARC_SWEEP in js/sisyphus.js.
   =========================================================== */

:root {
  --paper:  #f4f3f0;
  --ink:    #101012;
  --grey:   #7f7f84;

  --yellow: #ffd400;
  --ember:  #e2542a;
  --amber:  #e79a3c;
  --rose:   #c4456b;

  --era: Verdana, Geneva, Tahoma, sans-serif;
  --heavy: "Arial Black", Impact, Haettenschweiler, sans-serif;
  --mono: "Courier New", monospace;
  --clinical: -apple-system, "Helvetica Neue", Inter, Arial, sans-serif;
  --hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  --rule-h: 26px;
}

* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #fff; }
body.standalone { overflow: auto; }

/* ---------------- ACT I ---------------- */

#stage {
  height: 100svh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: #fff;
}
#stage::-webkit-scrollbar { display: none; }

.panel {
  height: 100svh;
  scroll-snap-align: start;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 8vw;
  font: 300 clamp(1.6rem, 4.2vw, 3.1rem)/1.25 var(--clinical);
  letter-spacing: -0.025em;
  color: #111;
}
.panel.opening {
  font-weight: 200;
  font-size: clamp(3rem, 9vw, 6.5rem);
  letter-spacing: -0.05em;
}
.panel small {
  display: block; margin-top: 2.2rem;
  font-size: 0.78rem; letter-spacing: 0.06em; color: #9a9a9a;
}
.panel .chev {
  display: block; margin: 0.6rem auto 0;
  font-size: 1.1rem; line-height: 1; color: #9a9a9a;
  animation: chevBounce 1.6s ease-in-out infinite;
}
@keyframes chevBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(6px); opacity: 1; }
}

#skip {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 5;
  max-width: min(230px, 60vw);
  border: 0; background: none; cursor: pointer;
  font: 600 0.74rem/1.35 var(--clinical);
  letter-spacing: 0.02em; text-align: right;
  color: var(--black); padding: 1rem;
}
#skip:hover, #skip:focus-visible { color: var(--ink); }

#social-cold {
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 5;
  display: flex; gap: 0.9rem;
}
#social-cold a {
  display: grid; place-items: center; padding: 0.5rem;
  color: #b4b4b4;
}
#social-cold a:hover, #social-cold a:focus-visible { color: #111; }
#social-cold svg { width: 17px; height: 17px; display: block; }

/* ---------------- ACT II ---------------- */

#landing {
  position: fixed; inset: 0; z-index: 10;
  display: none; place-content: center; justify-items: center;
  background: #fff;
  font: 400 0.82rem/1 var(--clinical);
  letter-spacing: 0.08em; color: #666;
}
#landing.on { display: grid; }

#bar { width: min(230px, 54vw); height: 2px; background: #e6e6e6; margin-bottom: 1.6rem; overflow: hidden; }
#fill { height: 100%; width: 0; background: #111; transition: width 1.6s cubic-bezier(.2,.7,.3,1); }
#fill.go { width: 100%; }

#status { min-height: 1.2em; }
#status.punchline {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 3.4vw, 1.6rem);
  letter-spacing: 0; color: #111;
}

#tap-hint {
  margin-top: 1.4rem;
  font: 400 0.72rem/1 var(--clinical);
  letter-spacing: 0.06em; color: #b4b4b4;
  opacity: 0; transition: opacity 0.4s ease;
}
#tap-hint.show { opacity: 1; }

/* ---------------- ACT III ---------------- */

#site, .page-shell {
  min-height: 100svh;
  background:
    repeating-linear-gradient(0deg, rgba(16,16,18,.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(16,16,18,.055) 0 1px, transparent 1px 46px),
    var(--paper);
  color: var(--ink);
  font-family: var(--era);
  font-size: 12px;
  line-height: 1.6;
  text-transform: lowercase;
}
#site { display: none; }
#site.on { display: block; }

.ribbon {
  background: var(--yellow); color: var(--ink);
  border-block: 3px solid var(--ink);
  overflow: hidden; white-space: nowrap;
  font-size: 12px; font-weight: bold; letter-spacing: 0.04em;
  padding: 8px 0;
}
.ribbon span { display: inline-block; padding-left: 100%; animation: slide 36s linear infinite; }
@keyframes slide { to { transform: translateX(-100%); } }

.bar { display: flex; flex-wrap: wrap; justify-content: center; padding: 14px 10px 0; }
.bar a {
  font-size: 12px; font-weight: bold; text-decoration: none;
  color: var(--ink); background: #fff;
  border: 2px solid var(--ink);
  margin: 0 -2px -2px 0;
  padding: 7px 15px;
}
.bar a:hover, .bar a:focus-visible { background: var(--amber); outline: none; }

.bar a.sparkle::before, .bar a.sparkle::after {
  content: "\2728";
  display: inline-block;
  margin: 0 4px;
  animation: twinkle 1.6s ease-in-out infinite;
}
.bar a.sparkle::after { animation-delay: 0.5s; }
@keyframes twinkle {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}

/* ---- the hub ---- */

.upper {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 214px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 720px) { .upper { grid-template-columns: minmax(0, 1fr); } }

.hub {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px 0 6px;
  --disc: 84px;
  --r: 200px;
  --sun: 340px;
}
/* in arc mode, stack .core and the ring in the same grid cell so they
   share one true center — otherwise the grid auto-places them into
   separate rows (the ring's box collapses since its <li>s are
   absolutely positioned) and the ring's center drifts to sit right
   under the title, pushing top discs into the subtitle. */
.hub.arc > .core,
.hub.arc > .orbit {
  grid-area: 1 / 1;
}
.hub::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: var(--sun); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(231,154,60,.40) 0%, rgba(226,84,42,.20) 40%, transparent 66%);
}

.core { position: relative; max-width: 330px; text-align: center; }
.core h1 {
  margin: 0;
  font-family: var(--heavy);
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-shadow: 0.035em 0.035em 0 var(--amber), 0.07em 0.07em 0 var(--ember);
}
.core .tag { margin: 12px auto 0; max-width: 26ch; font-size: 11px; color: #3c3c40; }

/* default (and narrow-container fallback): a wrapped row */
ol.orbit {
  list-style: none;
  margin: 20px 0 0; padding: 0;
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
ol.orbit li { width: var(--disc); height: var(--disc); }

/* wide enough: the discs go into orbit */
.hub.arc ol.orbit { display: block; margin: 0; }
.hub.arc ol.orbit li {
  position: absolute;
  left: 50%; top: 50%;
  margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2);
}

/* each track disc is styled like a little vinyl record: grooves
   underneath (::before), a paper label on top holding the track
   info (::after, with a tiny spindle hole baked into its own
   gradient), and the number/title floating above both. */
ol.orbit a {
  display: grid; place-content: center;
  width: 100%; height: 100%;
  position: relative;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--ink);
  text-align: center; text-decoration: none;
  color: var(--ink);
  padding: 10px;
}
ol.orbit a::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 1px,
      transparent 1px, transparent 4px),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 52%),
    var(--ink);
}
/* a fixed (not %) rim keeps the visible groove band the same width at
   any disc size, so the label — and the safe area for the text sitting
   on it — stays generously large even on the small mobile disc. */
ol.orbit a::after {
  content: "";
  position: absolute; inset: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ink) 0 4%, #fff 4% 100%);
  border: 1.5px solid var(--ink);
  transition: background 0.15s ease;
}
ol.orbit .n, ol.orbit .t { position: relative; z-index: 1; }
ol.orbit .n { display: block; font-family: var(--mono); font-size: 10px; color: var(--grey); }
ol.orbit .t { display: block; font-size: 9px; font-weight: bold; line-height: 1.2; overflow-wrap: anywhere; }

ol.orbit a:hover::before, ol.orbit a:focus-visible::before {
  animation: vinylSpin 2.4s linear infinite;
}
ol.orbit a:hover::after, ol.orbit a:focus-visible::after {
  background: radial-gradient(circle, var(--ink) 0 4%, var(--amber) 4% 100%);
  outline: none;
}
@keyframes vinylSpin { to { transform: rotate(360deg); } }

ol.orbit li.cut a::before {
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px,
      transparent 1px, transparent 4px),
    #57575c;
}
ol.orbit li.cut a::after { background: radial-gradient(circle, var(--grey) 0 4%, #f1efec 4% 100%); }
ol.orbit li.cut a { border-style: dashed; }
ol.orbit li.cut .t { text-decoration: line-through; text-decoration-color: var(--rose); color: var(--grey); }
ol.orbit li.added a { border-color: var(--amber); border-width: 4px; }
ol.orbit li.added a::after { box-shadow: 0 0 0 2px var(--amber) inset; }

/* a post-it arrow flag pointing at track 01 (untitled xiii) — anchored
   with the same rotate/translate/rotate math the ring itself uses for
   that disc (deg = ARC_START), so it tracks the arc as it resizes. */
.flag-note {
  display: none;
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  z-index: 6;
  pointer-events: none;
}
.hub.arc .flag-note {
  display: block;
  transform: rotate(-135deg) translate(var(--r)) rotate(135deg);
}
/* below this width the hub is too narrow for the flag's 168px arm to
   clear the screen edge, so most of its text gets clipped off-canvas —
   hide it until the 2-column layout (see .upper's 720px breakpoint)
   gives it room. */
@media (max-width: 720px) {
  .hub.arc .flag-note { display: none; }
}
.flag-note p {
  position: absolute;
  right: calc(var(--disc) / 2 + 4px);
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  transform-origin: right center;
  margin: 0;
  width: 168px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
  padding: 9px 34px 9px 12px;
  font-family: var(--era);
  font-weight: bold;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  filter: drop-shadow(2px 3px 1px rgba(16,16,18,.3));
}

/* ---- boxes ---- */

.box { background: #fff; border: 2px solid var(--ink); }
.box > h2 {
  margin: 0; background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: bold; letter-spacing: 0.06em;
  padding: 6px 10px;
}
.box > .inner { padding: 10px 12px 14px; }

/* ---- notebook (tracklist / intro / journal / bibliography) ---- */

#tracklist.notebook > .inner { padding: 0; }

.notebook-body { position: relative; display: flex; align-items: stretch; }

.notebook-holes {
  flex: none; width: 28px;
  display: flex; flex-direction: column; justify-content: space-evenly;
  align-items: center; padding: 16px 0;
  background: linear-gradient(90deg, rgba(16,16,18,.05), transparent);
  border-right: 1px dashed rgba(16,16,18,.2);
}
.notebook-holes span {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: inset 1px 1px 2px rgba(16,16,18,.4);
}

.notebook-pages { flex: 1 1 auto; min-width: 0; position: relative; }

.page { display: none; padding: 14px 14px 16px 16px; }
.page.active {
  display: block;
  animation: pageIn 0.28s ease;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notebook-tabs {
  flex: none; width: 84px;
  display: flex; flex-direction: column;
  border-left: 1px dashed rgba(16,16,18,.2);
}
.notebook-tabs button {
  flex: 1 1 0; min-height: 40px;
  border: 0; border-bottom: 2px solid var(--ink);
  cursor: pointer;
  font: 700 10px/1.25 var(--era);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 4px 5px;
}
.notebook-tabs button:last-child { border-bottom: 0; }
.notebook-tabs button:hover, .notebook-tabs button:focus-visible { filter: brightness(0.93); outline: none; }
.notebook-tabs button[data-page="intro"]        { background: var(--yellow); }
.notebook-tabs button[data-page="tracklist"]    { background: var(--amber); }
.notebook-tabs button[data-page="journal"]      { background: var(--ember); color: var(--paper); }
.notebook-tabs button[data-page="bibliography"] { background: var(--rose);  color: var(--paper); }
.notebook-tabs button.active { filter: brightness(0.88); text-decoration-thickness: 3px; }

/* ruled writing-paper look shared by intro / journal / bibliography */
.ruled {
  position: relative;
  line-height: var(--rule-h);
  background-image: repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--rule-h) - 1px),
      rgba(60,95,170,.35) calc(var(--rule-h) - 1px), rgba(60,95,170,.35) var(--rule-h));
  background-position: 0 14px;
}
.ruled::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 1px;
  background: rgba(196,69,107,.45);
}
.ruled p, .ruled li {
  margin: 0; padding-left: 28px;
  font-family: var(--hand);
  font-size: 15px; text-transform: none;
  color: #26356a;
}
.ruled ul { list-style: none; margin: 0; padding: 0; }
.ruled li::before { content: "\2014"; margin-right: 6px; color: var(--ember); }
.ruled .cite em { font-style: italic; }

@media (max-width: 560px) {
  .notebook-body { flex-direction: column; }
  .notebook-holes { display: none; }
  .notebook-tabs {
    order: -1; flex-direction: row; width: auto;
    border-left: 0; border-bottom: 1px dashed rgba(16,16,18,.2);
  }
  .notebook-tabs button { border-bottom: 0; border-right: 2px solid var(--ink); }
  .notebook-tabs button:last-child { border-right: 0; }
}

.side-col { display: flex; flex-direction: column; gap: 14px; }

/* ---- margin notes: each "notes" entry as its own pasted-up sticky ---- */

.notes-stack {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

.margin-note {
  position: relative;
  width: 100%; max-width: 210px;
  padding: 13px 14px 10px;
  border: 2px solid var(--ink);
  font-family: var(--era);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 3px 4px 0 rgba(16,16,18,.18);
}
.margin-note p { margin: 0; }
.margin-note .stamp {
  display: block; text-align: right; margin-top: 8px;
  font-family: var(--mono); font-size: 9px; color: rgba(16,16,18,.55);
}
/* a scrap of tape holding each note up */
.margin-note::before, .social-note::before {
  content: "";
  position: absolute; top: -8px; left: 50%;
  width: 46px; height: 16px;
  margin-left: -23px;
  background: rgba(244,243,240,.75);
  border: 1px solid rgba(16,16,18,.25);
  box-shadow: 0 1px 2px rgba(16,16,18,.15);
}

.margin-note.n1 { background: color-mix(in srgb, var(--ember) 45%, #fff); transform: rotate(-3deg); }
.margin-note.n2 { background: color-mix(in srgb, var(--rose) 65%, #fff); transform: rotate(2deg); }
.margin-note.n3 { background: color-mix(in srgb, var(--amber) 45%, #fff); transform: rotate(-2deg); }
.margin-note.n4 { background: var(--yellow); transform: rotate(3deg); }

/* wide viewports: unstack into the left/right margins beside .upper */
@media (min-width: 1320px) {
  .margin-note {
    position: absolute;
    width: 150px; max-width: none;
    margin: 0;
  }
  .margin-note.n1 { left: -170px; top: 300px; }
  .margin-note.n2 { right: -170px; top: 270px; }
  .margin-note.n3 { left: -170px; top: 600px; }
  .margin-note.n4 { right: -170px; top: 530px; }
}

/* ---- social links as their own sticky note ---- */

.social-note {
  position: relative;
  background: color-mix(in srgb, var(--amber) 55%, #fff);
  border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(16,16,18,.18);
  transform: rotate(-1.5deg);
  padding: 16px 12px 12px;
}
.social-note h2 {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--era);
  font-size: 11px; font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: none;
  padding: 0;
}

/* 88x31 webring-style badges */
.buttons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.button88 {
  width: 88px; height: 31px; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background-color: var(--paper);
  background-image: repeating-conic-gradient(rgba(16,16,18,.06) 0% 25%, transparent 0% 50%);
  background-size: 4px 4px;
  border: 1px solid var(--ink);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.9), inset -1px -1px 0 rgba(16,16,18,.4);
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px),
             calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  text-decoration: none; color: var(--ink);
  font-family: var(--mono); font-size: 8px; font-weight: bold;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15;
}
.button88:hover, .button88:focus-visible {
  background-color: var(--amber); background-image: none; outline: none;
}
.button88 svg { width: 13px; height: 13px; flex: none; }

.lower { max-width: 980px; margin: 14px auto 0; padding: 0 10px 26px; }

.legend-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 14px;
}
.legend { font-family: var(--mono); font-size: 11px; color: var(--grey); margin: 0 0 4px; }
.legend del { color: var(--grey); text-decoration-color: var(--rose); }
.legend ins { text-decoration: none; border-bottom: 3px solid var(--amber); color: var(--ink); }
.legend .moved { color: var(--ember); }

.collapse-all {
  border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; color: var(--grey);
  text-decoration: underline; text-underline-offset: 2px;
  padding: 0; margin: 0 0 4px; white-space: nowrap;
}
.collapse-all:hover, .collapse-all:focus-visible { color: var(--ember); outline: none; }
.seq {
  font-family: var(--mono); font-size: 11px; color: var(--grey);
  margin: 0 0 10px; border-bottom: 1px dashed var(--grey); padding-bottom: 8px;
}

ol.tracks { list-style: none; margin: 0; padding: 0; counter-reset: t; }
ol.tracks > li { counter-increment: t; border-bottom: 1px dotted #b9b9bd; }
ol.tracks > li:last-child { border-bottom: 0; }
ol.tracks > li.cut { counter-increment: none; }   /* cut songs don't take a number */

.tracks summary {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 2px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: bold;
}
.tracks summary::-webkit-details-marker { display: none; }
.tracks summary::before {
  content: counter(t, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; font-weight: normal; color: var(--grey);
}
.tracks li.cut summary::before { content: "——"; }
.tracks summary:hover { color: var(--ember); }
.tracks summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.tracks details[open] summary { color: var(--ember); }

.tracks del { color: var(--grey); text-decoration-thickness: 1px; text-decoration-color: var(--rose); }
.tracks ins { text-decoration: none; border-bottom: 3px solid var(--amber); }

.moved { font-family: var(--mono); font-size: 10px; font-weight: normal; color: var(--ember); }

.note { padding: 2px 0 12px 30px; max-width: 60ch; color: #34343a; }
.note .meta { font-family: var(--mono); font-size: 11px; color: var(--grey); margin: 0 0 6px; }
.note p { margin: 0 0 8px; }

/* ---- contact form ---- */

#contact { margin-top: 14px; }
.contact-blurb { margin: 0 0 12px; max-width: 60ch; color: #34343a; }

#contact-form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
#contact-form input,
#contact-form select,
#contact-form textarea {
  font-family: var(--mono); font-size: 12px;
  padding: 8px 10px; border: 2px solid var(--ink);
  background: #fff; color: var(--ink);
}
#contact-form select { border-radius: 0; cursor: pointer; }
#contact-form textarea { min-height: 90px; resize: vertical; }
#contact-form input:focus-visible,
#contact-form select:focus-visible,
#contact-form textarea:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }

#contact-form button[type="submit"] {
  align-self: flex-start;
  font-family: var(--mono); font-size: 12px; font-weight: bold;
  padding: 8px 18px; border: 2px solid var(--ink);
  background: var(--yellow); color: var(--ink); cursor: pointer;
}
#contact-form button[type="submit"]:hover,
#contact-form button[type="submit"]:focus-visible { background: var(--amber); outline: none; }
#contact-form button[disabled] { opacity: 0.6; cursor: default; }

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

#contact-status { font-family: var(--mono); font-size: 11px; margin: 8px 0 0; min-height: 1em; }
#contact-status.ok { color: var(--ember); }
#contact-status.err { color: var(--rose); }

.contact-fallback { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; color: var(--grey); }

a { color: var(--ember); text-underline-offset: 0.2em; }
a:hover { background: var(--yellow); color: var(--ink); }
a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ribbon span { animation: none; padding-left: 0; }
  #fill { transition-duration: 0.3s; }
  .panel .chev { animation: none; opacity: 0.7; }
  ol.orbit a:hover::before, ol.orbit a:focus-visible::before { animation: none; }
}