/* the front door. it borrows the app's theme tokens, so the theme row below re-colours the whole page */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* no grey flash on tap; every control here has its own pressed state instead */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

:where(a, button, summary) {
  touch-action: manipulation;
}

body.landing {
  --gutter: max(clamp(20px, 4vw, 48px), calc((100% - 1160px) / 2));
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* the sticky header's real height: 14 + 46 + 14 + 1 */
  --top-h: 75px;
  /* the only two colours that are the same in every theme, and why. white is the text on the banner
     gradient. the dark ink is for text on white or on --glow, which are light in all fifteen themes, so
     no theme token is dark enough everywhere. it clears 4.5:1 on the glow in all fifteen, cherry lowest at 5.1 */
  --ink-on-banner: #FFFFFF;
  --ink-on-light: #1F1F1F;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.3vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
}

h3 {
  font-size: 1.3rem;
  letter-spacing: -.015em;
}

p {
  margin: 0;
}

a {
  color: var(--accent-text);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--glow);
  color: var(--ink-on-light);
}

:is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* the same firefly cursor the app uses, but links still say link and text still says text */
@media (hover: hover) and (pointer: fine) {
  body.landing,
  body.landing * {
    cursor: var(--firefly-cursor);
  }

  body.landing :where(a, button, summary, label, [role="radio"]) {
    cursor: pointer;
  }

  body.landing :where(p, h1, h2, h3, li, figcaption, strong, input, textarea) {
    cursor: text;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--text);
  border-radius: 0 0 12px 0;
  font-weight: 700;
}

.skip:focus {
  left: 0;
}

/* buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn.solid {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -12px rgb(var(--shade) / .5);
}

.btn.solid:hover {
  background: var(--accent-hover);
}

.btn:active {
  transform: scale(.97);
}

.theme-chip:active {
  transform: scale(.98);
}

.btn.big {
  min-height: 54px;
  padding: 0 30px;
  font-size: 1.08rem;
}

.quiet {
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

@media (hover: hover) and (pointer: fine) {
  .quiet:hover {
    color: var(--text);
    border-bottom-color: currentColor;
  }
}

.arrow {
  align-self: center;
  font-family: var(--heading-font);
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
}

.arrow::after {
  content: "→";
  display: inline-block;
  margin-left: .3em;
  transition: transform .18s var(--ease-out);
}

.arrow:hover::after {
  transform: translateX(4px);
}

/* small labels are written the way they are said, not shouted in tracked capitals */
.eyebrow,
.kicker {
  margin: 0 0 12px;
  font-family: var(--heading-font);
  font-size: .98rem;
  font-weight: 500;
  color: var(--accent-text);
}

/* the hardest fact on the page, said first */
.hero-fact {
  margin: 0 0 18px;
  font-family: var(--heading-font);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-weight: 500;
  color: var(--accent-text);
}

.lede {
  max-width: 34em;
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: var(--muted);
}

.aside {
  font-size: .92rem;
  color: var(--muted);
}

.aside.centred {
  text-align: center;
}

/* what a request means, under the feature pages' invite button */
.hero-note {
  margin: -6px 0 28px;
}

/* anchors land below the sticky header, not under it */
section[id] {
  scroll-margin-top: calc(var(--top-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* sections arrive as you reach them; groups come in together, one child behind the next */
.can-reveal :where(.band-head, .week, .feature-words, .feature > .shot, .theme-row, .faq, .closer-words, .maker, .about-rail, .journey > .band-head, .tl-year),
.can-reveal :where(.rules) > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}

.can-reveal .shown,
.can-reveal .shown > * {
  opacity: 1;
  transform: none;
}

.can-reveal .shown > :nth-child(2) { transition-delay: 60ms; }
.can-reveal .shown > :nth-child(3) { transition-delay: 120ms; }
.can-reveal .shown > :nth-child(4) { transition-delay: 180ms; }
.can-reveal .shown > :nth-child(5) { transition-delay: 240ms; }
.can-reveal .shown > :nth-child(6) { transition-delay: 300ms; }

/* the about page: a rail saying who is talking, and the talking beside it */
.about-grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 34em);
  justify-content: center;
  gap: clamp(30px, 5vw, 68px);
}

.about-rail {
  position: sticky;
  top: calc(var(--top-h) + 30px);
  align-self: start;
  text-align: right;
}

.maker-portrait {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 30px -16px var(--shade, rgba(0, 0, 0, .45));
}

.rail-name {
  margin: 18px 0 10px;
  font-family: var(--heading-font);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
}

/* each fact under its own small label, so the job and the degree cannot read as one line */
.rail-facts {
  display: grid;
  gap: 0;
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
}

.rail-facts dt {
  font-family: var(--heading-font);
  font-size: .8rem;
  color: var(--muted);
}

.rail-facts dd {
  margin: 1px 0 0;
  color: var(--text);
}

.rail-facts dd + dt {
  margin-top: 12px;
}

.maker h1 {
  margin: 0 0 24px;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.14;
}

.maker h2 {
  margin: 40px 0 0;
  font-size: clamp(1.12rem, 1.6vw, 1.28rem);
}

.maker > p {
  margin-top: 16px;
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.75;
  color: var(--muted);
}

.maker h1 + p {
  color: var(--text);
}

.maker > p strong {
  color: var(--text);
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 34em);
    justify-content: start;
  }

  .about-rail {
    position: static;
    text-align: left;
    margin-bottom: 30px;
  }

  .maker-portrait {
    width: 104px;
    height: 104px;
  }
}

/* the years: one thread, every moment on it, and buttons that jump you down it */
.journey {
  max-width: 34em;
}

.year-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.year-chip {
  padding: 7px 17px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--heading-font);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .year-chip:hover {
    border-color: var(--accent);
  }
}

.year-chip:active {
  transform: scale(.98);
}

/* the button for whichever year you are reading */
.year-chip.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.timeline {
  position: relative;
  margin: 0;
  padding: 4px 0 4px 34px;
  list-style: none;
}

/* the thread itself, fading out at the far end the way a year does */
.timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 22px;
  left: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 8%, transparent));
}

.tl-year {
  position: relative;
  scroll-margin-top: calc(var(--top-h) + 28px);
}

.tl-year + .tl-year {
  margin-top: 42px;
}

.tl-heading {
  margin: 0 0 16px;
  font-family: var(--heading-font);
  font-size: 1.32rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* the year is the brightest thing on the thread */
.tl-heading::before {
  content: "";
  position: absolute;
  top: .34em;
  left: -34px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--glow) 38%, transparent);
}

.tl-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-items li {
  position: relative;
  line-height: 1.6;
}

.tl-items li + li {
  margin-top: 13px;
}

/* and each moment inside it is a quieter one, the size of a studied day */
.tl-items li::before {
  content: "";
  position: absolute;
  top: .5em;
  left: -31px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.year-when {
  display: inline-block;
  min-width: 3.1em;
  margin-right: 6px;
  font-family: var(--heading-font);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.year-why {
  margin: 18px 0 0;
  font-size: clamp(.98rem, 1.2vw, 1.04rem);
  line-height: 1.75;
  color: var(--muted);
}

/* a year you jumped to glows for a moment so you can see where you landed */
.tl-year.lit .tl-heading::before {
  animation: year-landed 1.4s var(--ease-out);
}

@keyframes year-landed {
  0%   { box-shadow: 0 0 0 5px color-mix(in srgb, var(--glow) 38%, transparent); }
  35%  { box-shadow: 0 0 0 13px color-mix(in srgb, var(--glow) 60%, transparent); }
  100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--glow) 38%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .tl-year.lit .tl-heading::before {
    animation: none;
  }
}

/* tells the header it is no longer at the top of the page */
.scroll-mark {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* header */
.top {
  transition: box-shadow .2s ease;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  --top-pad: clamp(16px, 4vw, 48px);
  padding: 14px var(--top-pad);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

@supports (backdrop-filter: blur(8px)) {
  .top {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(10px);
  }
}

.scrolled .top {
  box-shadow: 0 12px 28px -26px rgb(var(--shade) / .6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-family: var(--heading-font);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
}

.top-nav {
  display: flex;
  gap: 26px;
}

.top-nav a {
  font-family: var(--heading-font);
  font-size: .97rem;
  color: var(--muted);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .top-nav a:hover {
    color: var(--text);
  }
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(48px, 8vw, 100px) var(--gutter) clamp(40px, 6vw, 80px);
  /* the year strip is wider than the hero; it is cut off here rather than widening the page */
  overflow-x: clip;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin: 32px 0 18px;
}

.hero-art {
  position: relative;
  isolation: isolate;
}

.shot {
  margin: 0;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 60px -38px rgb(var(--shade) / .45);
}

.shot img {
  width: 100%;
  border-radius: 14px;
}

.shot figcaption {
  padding: 12px 6px 2px;
  font-size: .9rem;
  color: var(--muted);
}

.tilt {
  transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
}

/* the year of study days from the app's home page, at the app's own size: seven rows, a column a week,
   12px squares, 3px apart, coloured from --ring. it runs out from under the screenshot it belongs to */
.hero-art {
  margin-bottom: 64px;
}

.grid-field {
  position: absolute;
  top: calc(100% - 34px);
  right: 3%;
  z-index: -1;
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-auto-flow: column;
  grid-auto-columns: 12px;
  gap: 3px;
  padding: 18px 0 0;
  /* today sits under the right-hand edge of the screenshot; the older weeks fade out before they reach the words */
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 64%);
  mask-image: linear-gradient(90deg, transparent 38%, #000 64%);
  /* the year fills in once, left to right, after the screenshot has arrived */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s var(--ease-out);
}

.grid-field.lit {
  clip-path: inset(0 0 0 0);
}

.grid-field span {
  border-radius: 3px;
  background: var(--ring-track);
}

.grid-field .g-1 { background: color-mix(in srgb, var(--ring) 35%, var(--ring-track)); }
.grid-field .g-2 { background: color-mix(in srgb, var(--ring) 58%, var(--ring-track)); }
.grid-field .g-3 { background: color-mix(in srgb, var(--ring) 80%, var(--ring-track)); }

.grid-field .g-4 {
  background: var(--ring);
  box-shadow: 0 0 6px color-mix(in srgb, var(--glow) 70%, transparent);
}

/* the days still to come are not drawn, the way the app leaves them */
.grid-field .g-future {
  background: transparent;
}

.fly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 12px 3px var(--glow);
  opacity: 0;
  animation: drift 9s ease-in-out infinite;
  animation-delay: var(--wait);
  pointer-events: none;
}

@keyframes drift {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  25% { opacity: .9; transform: translate(14px, -18px); }
  50% { opacity: .35; transform: translate(-10px, -30px); }
  75% { opacity: .8; transform: translate(8px, -14px); }
}

/* bands */
.band {
  padding: clamp(56px, 8vw, 112px) var(--gutter);
}

.band.tint {
  background: var(--accent-soft);
}

.band-head {
  max-width: 44em;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.band-head p {
  margin-top: 14px;
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  color: var(--muted);
}

/* the four things: one column you read down, with an index beside it that keeps your place */
.tour {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}

.tour-rail {
  position: sticky;
  top: calc(var(--top-h) + 40px);
  align-self: start;
  display: grid;
  gap: 4px;
}

.tour-rail a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-family: var(--heading-font);
  font-size: .98rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}

/* each entry is a day in the study grid: quiet until you are reading it, then lit */
.tour-rail a::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--ring-track);
  transition: background-color .3s ease, box-shadow .3s ease;
}

.tour-rail a[aria-current="true"] {
  color: var(--text);
}

.tour-rail a[aria-current="true"]::before {
  background: var(--ring);
  box-shadow: 0 0 6px color-mix(in srgb, var(--glow) 70%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .tour-rail a:hover {
    color: var(--text);
  }
}

.feature {
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--top-h) + 24px);
}

.feature:first-child {
  border-top: 0;
  padding-top: 0;
}

.feature-words {
  max-width: 40em;
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* a feature heading is twice the body size, so each of the four reads as its own chapter */
.feature-words h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  letter-spacing: -.025em;
}

.feature-words p + p {
  margin-top: 14px;
}

.feature-words h3 + p {
  margin-top: 16px;
}

.feature-words p {
  color: var(--muted);
}

/* the way on to each feature's own page */
.feature-words .feature-more {
  display: flex;
  flex-wrap: wrap;
  /* when the links wrap, their invisible 44px tap layers (9px above and below) must not overlap */
  gap: 20px 28px;
  margin-top: 18px;
}

/* technical detail inside a feature page's prose, folded so the answer stays first and the how is one tap away */
.prose details.more {
  margin: 0 0 1.2em;
  border-left: 2px solid var(--border);
  padding-left: 16px;
}

.prose details.more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-family: var(--heading-font);
  font-size: .95rem;
  font-weight: 600;
  color: var(--accent-text);
  cursor: pointer;
  list-style: none;
}

.prose details.more summary::-webkit-details-marker {
  display: none;
}

.prose details.more summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 400;
  transition: transform .2s ease;
}

.prose details.more[open] summary {
  margin-bottom: .6em;
}

.prose details.more[open] summary::after {
  transform: rotate(45deg);
}

@media (max-width: 720px), (pointer: coarse) {
  .prose details.more summary {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prose details.more summary::after {
    transition: none;
  }
}

/* where a research claim comes from: one quiet line under the paragraph that makes it */
.prose .source {
  margin-top: -.4em;
  font-size: .9rem;
  color: var(--muted);
}

/* a contents list at the top of a feature page's prose, like the legal pages have */
.page-contents {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.prose .page-contents h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.page-contents ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2 15em;
  column-gap: 32px;
}

.page-contents li {
  break-inside: avoid;
  margin: 0;
}

/* stacked navigation, so it takes a real 24px, and a real 44px on a phone, rather than a layer that could overlap the next link */
.page-contents a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (max-width: 720px), (pointer: coarse) {
  .page-contents a {
    min-height: 44px;
  }
}

/* on a phone a whole desktop screen is too small to read, so each screenshot is cropped to the part its
   page is about. Desktop is unchanged. The numbers are where that part sits in the 1440x900 picture */
.shot-frame {
  display: block;
  overflow: hidden;
  border-radius: 14px;
}

.shot-frame img {
  display: block;
}

@media (max-width: 720px) {
  .zoom .shot-frame {
    aspect-ratio: var(--ratio);
  }

  .zoom .shot-frame img {
    width: calc(100% / var(--w));
    max-width: none;
    margin-left: calc(-100% * var(--x) / var(--w));
    margin-top: calc(-100% * var(--y) * .625 / var(--w));
    border-radius: 0;
  }
}

.zoom-timer { --x: .167; --y: .122; --w: .48; --ratio: 1; }
.zoom-room { --x: .652; --y: .122; --w: .245; --ratio: .691; }
.zoom-course { --x: .372; --y: .28; --w: .528; --ratio: 1.32; }
.zoom-week { --x: .167; --y: .267; --w: .475; --ratio: 1.053; }
.zoom-chat { --x: .392; --y: .122; --w: .504; --ratio: .942; }

/* feature pages: a headline, the screen it is about, then one column of prose to read down */
.page-shot {
  max-width: 980px;
  margin-top: clamp(32px, 4vw, 48px);
}

.prose {
  max-width: calc(40em + 2 * var(--gutter));
  margin-inline: auto;
  padding-top: clamp(40px, 5vw, 64px);
}

.prose h2 {
  margin: clamp(40px, 5vw, 56px) 0 14px;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  letter-spacing: -.02em;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--muted);
}

.prose p + p,
.prose p + :is(ul, ol),
.prose :is(ul, ol) + p,
.prose p + table,
.prose table + p {
  margin-top: 14px;
}

.prose strong {
  color: var(--text);
}

.prose :is(ul, ol) {
  margin: 0;
  padding-left: 1.2em;
}

.prose li + li {
  margin-top: 10px;
}

.prose li::marker {
  color: var(--accent-text);
}

.prose a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

/* something you would type, like the question | answer format for pasting cards */
.prose code {
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: .88em;
  color: var(--text);
}

/* the round lengths: a small table with tabular figures, not a card */
.rounds {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rounds th,
.rounds td {
  padding: 10px 28px 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.rounds th {
  font-family: var(--heading-font);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}

.rounds td {
  color: var(--muted);
}

.prose-shot {
  margin: clamp(24px, 3vw, 36px) 0 0;
}

/* how a week goes: a planner page, a line per day, and what to do beside the days it happens on */
.week {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) minmax(0, 24em);
  grid-template-rows: auto auto repeat(5, minmax(30px, auto)) auto;
  column-gap: clamp(18px, 3vw, 44px);
  padding: clamp(22px, 3vw, 36px) clamp(20px, 3.4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
}

.week-draw,
.week-notes {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}

.week-draw {
  grid-column: 1 / 3;
  grid-template-columns: subgrid;
  align-items: center;
}

.day-name {
  grid-column: 1;
  font-family: var(--heading-font);
  font-size: .86rem;
  color: var(--muted);
}

.day-bar,
.week-column {
  grid-column: 2;
}

.day-bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--ring-track);
}

.day-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--at);
  width: var(--len);
  border-radius: inherit;
  background: var(--ring);
}

/* monday and sunday sit level with the first heading beside them, not halfway down it */
.week-draw > :nth-child(-n + 2),
.week-draw > :nth-last-child(-n + 2) {
  align-self: start;
  margin-top: 22px;
}

.week-draw > .day-name:is(:first-child, :nth-last-child(2)) {
  margin-top: 18px;
}

/* monday has two notes, so the drawing leaves its second line empty */
.week-draw > :nth-child(-n + 2) { grid-row: 1; }
.week-draw > :is(:nth-child(3), :nth-child(4)) { grid-row: 3; }
.week-draw > :is(:nth-child(5), :nth-child(6)) { grid-row: 4; }
.week-draw > :is(:nth-child(7), :nth-child(8)) { grid-row: 5; }
.week-draw > :is(:nth-child(9), :nth-child(10)) { grid-row: 6; }
.week-draw > :is(:nth-child(11), :nth-child(12)) { grid-row: 7; }
.week-draw > :nth-last-child(-n + 2) { grid-row: 8; }

/* sunday: the week, folded into one column of the year grid */
.week-column {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
  width: 12px;
}

.week-column i {
  border-radius: 3px;
  background: var(--ring-track);
}

.week-column .g-1 { background: color-mix(in srgb, var(--ring) 35%, var(--ring-track)); }
.week-column .g-2 { background: color-mix(in srgb, var(--ring) 58%, var(--ring-track)); }
.week-column .g-3 { background: color-mix(in srgb, var(--ring) 80%, var(--ring-track)); }

.week-column .g-4 {
  background: var(--ring);
  box-shadow: 0 0 6px color-mix(in srgb, var(--glow) 70%, transparent);
}

.week-notes {
  grid-column: 3;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-notes li {
  padding: 14px 0;
}

.week-notes h3 + p {
  margin-top: 6px;
  color: var(--muted);
}

.at-course { grid-row: 1; }
.at-generate { grid-row: 2; }
.at-sunday { grid-row: 8; }

/* stretched over tuesday to saturday so its bracket covers exactly those days */
.at-timer {
  grid-row: 3 / 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* notes that share days are held together by a bracket: monday's two, and tuesday to saturday's one */
.week-notes :is(.at-course, .at-generate, .at-timer) {
  position: relative;
  padding-left: 22px;
}

.week-notes :is(.at-course, .at-generate, .at-timer)::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--ring);
}

.week-notes .at-course::before {
  bottom: 0;
  border-radius: 2px 2px 0 0;
}

.week-notes .at-generate::before {
  top: 0;
  border-radius: 0 0 2px 2px;
}

.week-notes .at-timer::before {
  top: 4px;
  bottom: 4px;
}

/* on a phone the drawing narrows rather than disappearing: the days stay, the notes get the room */
@media (max-width: 720px) {
  .week {
    grid-template-columns: 2.4em minmax(44px, .55fr) minmax(0, 1.45fr);
    column-gap: 12px;
    padding: 18px 16px 18px 14px;
    border-radius: 18px;
  }

  .week-notes h3 {
    font-size: 1.08rem;
  }

  .week-notes p {
    font-size: .94rem;
  }

  .week-notes :is(.at-course, .at-generate, .at-timer) {
    padding-left: 14px;
  }

  .day-name {
    font-size: .8rem;
  }
}

/* rules */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules li {
  position: relative;
  padding: 20px 24px 20px 46px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.rules li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 30px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px 1px var(--glow);
}

.rules strong {
  color: var(--text);
  font-weight: 700;
}

/* themes */
.band.themes .band-head {
  max-width: 44em;
  margin-inline: auto;
  text-align: center;
}

.theme-row {
  max-width: 700px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}

.theme-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--heading-font);
  font-size: .95rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .theme-chip:hover {
    border-color: var(--accent);
  }
}

.theme-chip[aria-checked="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* picking a theme cross-fades the page from the old colours to the new, instead of cutting */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: ease;
}

.theme-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgb(var(--shade) / .2);
}

.theme-swatch::before,
.theme-swatch::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.theme-swatch::before {
  inset: 6px 12px 6px 5px;
  border-radius: 4px;
  background: var(--chip-accent);
}

.theme-swatch::after {
  right: 5px;
  bottom: 6px;
  width: 6px;
  height: 6px;
  background: var(--chip-glow);
}

/* the top of a page that is not the home page */
.page-head {
  padding-bottom: clamp(24px, 3vw, 40px);
}

.page-head h1 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}

.page-head .lede {
  max-width: 40em;
}

.top-nav a[aria-current] {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

.shot figcaption a {
  color: var(--accent-text);
  text-decoration: none;
  white-space: nowrap;
}

.shot figcaption a:hover {
  text-decoration: underline;
}

/* questions */
.faq {
  max-width: 48em;
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--heading-font);
  font-size: 1.06rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent-text);
  transition: transform .2s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  padding: 0 4px 22px;
  max-width: 44em;
  color: var(--muted);
}

/* closer */
.closer {
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 48px);
  /* every theme's banner has a light patch in one corner, and on a phone the paragraph runs under it:
     white text fell to 3.6:1 in pumpkin. A 16% shade over the whole band keeps all fifteen above 4.5,
     measured pixel by pixel; a shade behind the words alone could not reach the top lines */
  background: linear-gradient(rgb(0 0 0 / .16), rgb(0 0 0 / .16)), var(--banner);
  color: var(--ink-on-banner);
  text-align: center;
}

.closer-words {
  max-width: 34em;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 18px;
}

/* solid white on the banner: faded white drops under 4.5:1 at the gradient's lighter end in several themes */
.closer p {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--ink-on-banner);
}

.closer .btn.solid {
  margin-top: 10px;
  background: var(--ink-on-banner);
  color: var(--ink-on-light);
}

.closer .btn.solid:hover {
  background: var(--glow);
  color: var(--ink-on-light);
}

.closer .aside {
  color: var(--ink-on-banner);
}

.closer .quiet {
  color: var(--ink-on-banner);
}

.closer :is(a, button):focus-visible {
  outline-color: var(--ink-on-banner);
}

/* footer: who made it, then the site in three short groups, then the small print.
   it sits in the same 1160px column as everything above it */
.foot {
  padding: clamp(48px, 6vw, 72px) var(--gutter) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px clamp(24px, 4vw, 56px);
}

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--heading-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.foot-motto {
  margin-top: 6px;
  color: var(--muted);
}

/* the one place outside /about that says who is behind it */
.foot-maker {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 4px;
}

.foot-col h2 {
  margin: 10px 0 6px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

.foot-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a footer is the densest list of links on the site, so each one is a full 44px row */
.foot-col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.foot-col a[aria-current] {
  color: var(--text);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  :is(.foot-col a, .foot-maker):hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
  }
}

/* the small print. room for a second sentence beside the copyright, filled in when its wording is settled */
.foot-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 32px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: 20px 0 28px;
  border-top: 1px solid var(--border);
  font-size: .86rem;
  color: var(--muted);
}

.foot-note:empty {
  display: none;
}

/* two columns below a laptop, with the brand across the top */
@media (max-width: 860px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot-about {
    grid-column: 1 / -1;
  }
}

/* on a phone the four groups sit two by two. one column all the way down was a whole screen of footer;
   the email address breaks after its @ instead of needing a row of its own */
@media (max-width: 480px) {
  .foot-grid {
    gap: 20px 24px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn.solid:hover {
    transform: translateY(-1px);
  }

  .theme-chip:hover {
    transform: translateY(-2px);
  }
}

/* narrower screens */
@media (max-width: 960px) {
  .hero,
  .tour {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    row-gap: 0;
    padding-top: clamp(36px, 7vw, 64px);
  }

  /* in one column the screenshot comes straight after the headline, so a phone sees the proof on its
     first screen. the invite button is in the sticky header the whole time, so moving it lower costs little */
  .hero-words {
    display: contents;
  }

  .hero-fact { order: 1; }
  .hero h1 { order: 2; }

  .hero-art {
    order: 3;
    margin: 28px 0 60px;
  }

  .hero .lede {
    order: 4;
    margin-top: 0;
  }

  .hero-actions { order: 5; }

  /* one column already reads in order, so the index steps aside */
  .tour-rail {
    display: none;
  }

  .tilt {
    transform: none;
  }
}

/* below a laptop the five links no longer fit beside Log in and the button, so they move to a line of
   their own under the logo. on a phone that line scrolls, and fades at the right so it is plain there is more */
@media (max-width: 960px) {
  body.landing {
    --top-h: 111px;
  }

  .top {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-bottom: 0;
  }

  .top-nav {
    order: 3;
    flex: 1 0 100%;
    gap: 22px;
    margin: 0 calc(-1 * var(--top-pad));
    padding: 0 calc(var(--top-pad) + 28px) 0 var(--top-pad);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .top-nav a {
    flex: none;
    padding: 9px 0 11px;
    font-size: .94rem;
  }

  .top-nav a[aria-current] {
    text-underline-offset: 5px;
  }

  body.landing:not(:has(.top-nav)) {
    --top-h: 75px;
  }

  .top:not(:has(.top-nav)) {
    padding-bottom: 14px;
  }
}

@media (max-width: 720px) {
  body.landing {
    font-size: 16px;
  }

  .top {
    --top-pad: 16px;
    column-gap: 12px;
    padding: 12px var(--top-pad) 0;
  }

  /* on a phone the header's two lines are shorter, so anchors clear less */
  body.landing {
    --top-h: 107px;
  }

  .brand {
    font-size: 1.02rem;
  }

  .brand img {
    width: 27px;
    height: 27px;
  }

  body.landing:not(:has(.top-nav)) {
    --top-h: 69px;
  }

  .top:not(:has(.top-nav)) {
    padding-bottom: 12px;
  }

  .top-actions {
    gap: 14px;
  }

  .top .btn {
    min-height: 44px;
    padding: 0 14px;
    font-size: .9rem;
  }

  .shot {
    padding: 7px;
    border-radius: 18px;
  }

  .rules li {
    padding: 18px 0 18px 34px;
  }

  .rules li::before {
    left: 8px;
    top: 28px;
  }
}

/* on a touch screen the small text links get a 44px tap area without changing how they look:
   an invisible layer reaches above and below the words */
@media (max-width: 720px), (pointer: coarse) {
  .brand,
  .top-actions .quiet,
  .arrow {
    position: relative;
  }

  .brand::before,
  .top-actions .quiet::before,
  .arrow::before {
    content: "";
    position: absolute;
    inset: -9px -4px;
  }

  .year-chip {
    min-height: 44px;
  }
}

/* the smallest phones keep Log in; the button gives up a little padding instead */
@media (max-width: 380px) {
  .top-actions {
    gap: 12px;
  }

  .top .btn {
    padding: 0 12px;
    font-size: .85rem;
  }
}

/* and below that, the logo keeps its picture and lets the word go */
@media (max-width: 340px) {
  .top-nav {
    gap: 15px;
  }

  /* the smaller words make a 43px row, so one more pixel of padding keeps the 44px tap height */
  .top-nav a {
    padding-top: 10px;
    font-size: .88rem;
  }

  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .fly {
    opacity: .7;
  }
}