/* tickroll.com. The dark band and the reading address blue from Tickroll's
   own banner, on a cool light page. Archivo for headings, Work Sans for the
   rest, both self hosted because the CSP allows this origin only. The
   wordmark is outlines in the inline logo, so it needs no font. */

@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0b5fa5;
  --blue-deep: #084a82;
  --night: #0b1220;
  --night-glow: #123a63;
  --paper: #f5f7fa;
  --ink: #16202c;
  --muted: #4d5a69;
  --line: #dde3ea;
  --card: #ffffff;
  --sky: #e8f0f8;
  --doing: #2563eb;
  --doing-soft: #e6eefc;
  --next: #6d28d9;
  --next-soft: #efe8fb;
  --waiting: #b45309;
  --waiting-soft: #fdf1e2;
  --done: #15803d;
  --done-soft: #e6f4ea;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 1.0625rem/1.6 "Work Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3 {
  font-family: "Archivo", system-ui, sans-serif;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

a { color: var(--blue); text-underline-offset: 0.15em; }
a:hover { color: var(--blue-deep); }
a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.narrow > * { max-width: 42rem; }

.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: #fff;
  color: var(--night);
  padding: 0.5rem 0.75rem;
  z-index: 10;
}
.skip:focus { left: 0.5rem; }

/* The band, as the boards draw it. */
.top, .foot { background: radial-gradient(120% 140% at 100% 0%, var(--night-glow) 0%, var(--night) 55%), var(--night); color: #fff; }
.bar { display: flex; align-items: center; min-height: 4.25rem; }
.brand { display: inline-flex; padding: 0.25rem 0; }
.brand .logo { height: 2.1rem; width: auto; display: block; }
.top a:focus-visible, .foot a:focus-visible { outline-color: #fff; }

/* The hero, with a board drawn in boxes beside it. */
.hero { padding: 4rem 0 4.25rem; background: var(--card); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; gap: 3rem; grid-template-columns: 1.1fr 1fr; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; color: var(--night); }
.hero .lead { font-size: 1.25rem; max-width: 33rem; color: var(--muted); margin: 0; }

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 0.9rem;
  background: var(--sky);
  border: 1px solid var(--line);
  border-radius: 1rem;
  align-items: start;
}
.col { display: grid; gap: 0.45rem; }
.col b { display: block; height: 0.55rem; width: 70%; border-radius: 0.3rem; margin: 0.2rem 0 0.3rem; }
.col i { display: block; height: 2.6rem; border-radius: 0.45rem; background: var(--card); border-left: 0.3rem solid; }
.doing b { background: var(--doing); }
.doing i { border-color: var(--doing); background: var(--doing-soft); }
.next b { background: var(--next); }
.next i { border-color: var(--next); background: var(--next-soft); }
.waiting b { background: var(--waiting); }
.waiting i { border-color: var(--waiting); background: var(--waiting-soft); }
.done b { background: var(--done); }
.done i { border-color: var(--done); background: var(--done-soft); }

/* What a board shows. */
.what { padding: 4rem 0; }
.what h2, .when h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--night); }
.features {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.features li {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 0.3rem solid var(--blue);
  border-radius: 0.6rem;
  padding: 1.25rem 1.25rem 1rem;
}
.features h3 { font-size: 1.2rem; color: var(--night); }
.features p { margin: 0; color: var(--muted); }
.note { margin: 2rem 0 0; max-width: 46rem; color: var(--muted); }

.when { padding: 3.5rem 0 4.5rem; background: var(--sky); }

/* Plain pages. */
.page { padding: 3.5rem 0 4.5rem; }
.page h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; color: var(--night); }
.prose h2 { font-size: 1.4rem; margin-top: 2rem; }
.lead { font-size: 1.2rem; }

/* A fact still to confirm, which only staging may show. */
.ask { background: #fff4c2; color: #5c4400; padding: 0 0.25rem; border-radius: 0.2rem; }

.foot { color: #c4cedd; padding: 2rem 0 2.5rem; font-size: 0.95rem; }
.foot a { color: #fff; }
.foot a:hover { color: #c4cedd; }
.foot p { margin: 0 0 0.6rem; max-width: 46rem; }

@media (max-width: 48rem) {
  .hero { padding: 2.75rem 0 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .board { max-width: 26rem; }
  .brand .logo { height: 1.8rem; }
}