.roadmap-page {
  --roadmap-rule: rgba(106, 69, 47, 0.13);
  --tape-amber: #f6b22c;
}

.roadmap-page .roadmap-layout {
  width: min(1180px, calc(100% - 40px));
}

.roadmap-board {
  overflow: hidden;
  background:
    linear-gradient(var(--roadmap-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--roadmap-rule) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
}

.roadmap-board::after {
  position: absolute;
  right: -25px;
  top: 70px;
  width: 105px;
  height: 34px;
  border: 1px solid rgba(106, 69, 47, 0.22);
  background: rgba(242, 136, 146, 0.7);
  content: "";
  transform: rotate(38deg);
}

.roadmap-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 2px dashed var(--ink);
}

.roadmap-heading h1 {
  max-width: 760px;
}

.roadmap-date {
  display: grid;
  min-width: 168px;
  margin: 0 0 8px;
  padding: 14px 16px;
  border: 1.5px solid var(--ink);
  background: var(--surface);
  box-shadow: 3px 4px 0 var(--ink);
  color: var(--ink);
  line-height: 1.35;
  transform: rotate(1.5deg);
}

.roadmap-date > span {
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Ledger sheets. Phone first: one column, one gutter, one row rhythm. The handmade look lives in the
   decoration (torn edge, tape, stamps, pen line); the structure stays square. */
.roadmap-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  margin-top: 30px;
}

.roadmap-page .roadmap-group {
  position: relative;
  margin: 0;
  padding: 30px 18px 22px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  /* The outline and the hard shadow follow the torn edge, which a border and box-shadow cannot. */
  filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))
    drop-shadow(4px 5px 0 var(--ink));
  transform: none;
}

/* The sheet itself: ruled paper, torn off a pad along the top. */
.roadmap-page .roadmap-group::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(39, 39, 15, 0.07) 27px 28px),
    #fffdf5;
  clip-path: polygon(0 9px, 6% 3px, 14% 9px, 23% 2px, 33% 8px, 44% 3px, 55% 9px, 66% 2px, 77% 8px, 88% 3px, 100% 9px, 100% 100%, 0 100%);
  content: "";
}

.roadmap-page .roadmap-group.craft::after {
  clip-path: polygon(0 4px, 8% 9px, 17% 2px, 27% 8px, 38% 3px, 49% 9px, 60% 2px, 71% 8px, 82% 3px, 92% 9px, 100% 4px, 100% 100%, 0 100%);
}

/* A strip of tape holds each sheet down: same place on every sheet, its own colour and lean. */
.roadmap-page .roadmap-group::before {
  position: absolute;
  top: -12px;
  right: 34px;
  width: 96px;
  height: 26px;
  background: var(--tape-amber);
  content: "";
  transform: rotate(-2.5deg);
}

.roadmap-page .roadmap-group.craft::before {
  background: var(--accent);
  transform: rotate(2deg);
}

.roadmap-page .roadmap-group.proof::before {
  background: var(--room-raised);
  transform: rotate(-1.5deg);
}

/* A wobbly pen line under the title of the sheet; it follows the words, however they wrap. */
.roadmap-page .roadmap-group h2 {
  scroll-margin-top: 9rem;
  line-height: 1.5;
  text-decoration: underline wavy var(--tape-amber) 3px;
  text-underline-offset: 6px;
}

.roadmap-page .roadmap-group.foundation h2 {
  text-decoration-color: var(--primary);
}

.roadmap-page .roadmap-group.proof h2 {
  text-decoration-color: var(--accent);
}

.roadmap-page .press-zone {
  display: block;
  width: fit-content;
  margin: 0;
  padding: 5px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--primary);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.roadmap-page .craft .press-zone {
  background: var(--tape-amber);
}

.roadmap-page .proof .press-zone {
  background: var(--paper);
}

.roadmap-key {
  margin-top: 34px;
}

.roadmap-page .roadmap-key h2,
.roadmap-page .roadmap-never h2 {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.roadmap-key dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 14px 20px;
  margin: 0;
}

.roadmap-key dd {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* Rows on the sheet, not cards: one item per row, a dashed rule between. */
.roadmap-page .roadmap-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap-page .roadmap-items li {
  position: relative;
  max-width: 68ch;
  margin: 0;
  padding: 14px 0 16px;
  line-height: 1.55;
}

.roadmap-page .roadmap-items li + li {
  margin-top: 0;
  border-top: 1.5px dashed rgba(39, 39, 15, 0.4);
}

/* The status is a rubber stamp: its own line on a phone, pressed down not quite straight. */
.roadmap-page .status-chip {
  font-size: 0.75rem;
}

.roadmap-page .roadmap-items .status-chip {
  display: block;
  width: fit-content;
  margin: 0 0 8px;
  padding: 3px 9px;
  border-width: 2px;
  border-radius: 4px 6px 3px 6px;
  transform: rotate(-2deg);
}

.roadmap-page .roadmap-items li:nth-child(2n) .status-chip {
  transform: rotate(1.5deg);
}

.roadmap-page .roadmap-items li:nth-child(3n) .status-chip {
  transform: rotate(-0.8deg);
}

/* Where to go on this page, at the top so a phone need not scroll to find a section. */
.roadmap-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin-top: 26px;
  padding: 6px 14px;
  border: 1.5px dashed var(--ink);
  background: var(--paper);
  font-size: 0.92rem;
  font-weight: 700;
}

.roadmap-jump span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  font-family: Georgia, serif;
  font-style: italic;
}

.roadmap-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-underline-offset: 4px;
}

/* Tablet and up: the stamps move into a margin, ruled off in pink like a ledger, so status reads straight down. */
@media (min-width: 700px) {
  .roadmap-page .roadmap-group {
    padding: 36px 30px 26px;
  }

  .roadmap-page .roadmap-items {
    background: linear-gradient(var(--accent), var(--accent)) 9.875rem 0 / 2px 100% no-repeat;
  }

  .roadmap-page .roadmap-items li {
    /* In rem, like the stamp: the margin grows with the reader's text size, so a stamp never covers its row. */
    max-width: calc(68ch + 11.125rem);
    padding-left: 11.125rem;
  }

  .roadmap-page .roadmap-items .status-chip {
    position: absolute;
    top: 14px;
    left: 0;
    margin: 0;
  }
}

/* Each sheet folds. A closed sheet still shows its title and a tally of what is on it, so nothing about
   status is hidden behind the tap. Native <details>: it works with no script and a keyboard. */
.roadmap-page .roadmap-group summary {
  display: grid;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.roadmap-page .roadmap-group summary::-webkit-details-marker {
  display: none;
}

.roadmap-page .roadmap-group summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 6px;
}

.roadmap-page .roadmap-group summary h2 {
  margin: 0;
}

.roadmap-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.roadmap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 44px;
  padding: 6px 14px 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 5px 9px 4px 8px;
  background: var(--paper);
  box-shadow: 2px 3px 0 var(--ink);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.roadmap-toggle::before {
  width: 1.1em;
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
}

.roadmap-page details[open] .roadmap-toggle::before {
  transform: rotate(45deg);
}

.roadmap-toggle .when-open,
.roadmap-page details[open] .roadmap-toggle .when-closed {
  display: none;
}

.roadmap-page details[open] .roadmap-toggle .when-open {
  display: inline;
}

.roadmap-page details[open] > .roadmap-items {
  margin-top: 16px;
  border-top: 2px solid var(--ink);
}

/* Title beside tally only where both fit: the title keeps a floor and the tally wraps, so the title can never
   be squeezed to nothing (it was, from 700 to 960 px, before this floor). In em, so larger text stacks sooner. */
@media (min-width: 65em) {
  .roadmap-page .roadmap-group summary {
    grid-template-columns: minmax(16rem, 1fr) minmax(0, auto);
    align-items: end;
    gap: 10px 24px;
  }

  .roadmap-sheet-head {
    grid-row: 1 / span 2;
  }

  .roadmap-tally,
  .roadmap-toggle {
    justify-self: end;
  }

  .roadmap-tally {
    justify-content: flex-end;
    margin-right: 110px;
  }
}

/* The sheet unfolds rather than jumps, where the browser can animate to a natural height. Elsewhere it
   simply opens. */
@supports selector(::details-content) {
  .roadmap-page {
    interpolate-size: allow-keywords;
  }

  .roadmap-page .roadmap-group details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size 380ms cubic-bezier(.2, .7, .2, 1), opacity 260ms ease, content-visibility 380ms allow-discrete;
  }

  .roadmap-page .roadmap-group details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }

  .roadmap-toggle::before {
    transition: transform 260ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-page .roadmap-group details::details-content,
  .roadmap-toggle::before {
    transition: none;
  }
}

/* Forced colours drop backgrounds and shadows, so the sheets get plain borders. */
@media (forced-colors: active) {
  .roadmap-page .roadmap-group {
    border: 2px solid CanvasText;
    filter: none;
  }

  .roadmap-page .roadmap-group::before {
    display: none;
  }
}

.roadmap-never h2 {
  scroll-margin-top: 2.5rem;
}

.roadmap-never {
  margin-top: 54px;
  padding: 26px;
  border: 2px dashed var(--ink);
  border-radius: 6px 18px 8px 6px;
  background: #fffdf5;
}

.roadmap-never ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 8px 24px;
  margin: 0;
  padding-left: 1.1rem;
}

.roadmap-page .status-label {
  display: block;
  width: fit-content;
  margin: 8px 0 22px 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.roadmap-page .roadmap-group h2 {
  margin: 0 0 18px;
  font-size: clamp(1.55rem, 2.3vw, 2rem);
}

.roadmap-page .roadmap-group p:last-child,
.roadmap-page .roadmap-group ul:last-child {
  margin-bottom: 0;
}

.roadmap-desk-note {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.5fr);
  align-items: start;
  gap: 30px;
  margin-top: 52px;
}

.roadmap-desk-note .notice {
  margin: 0;
  background: var(--room-raised);
}

.roadmap-desk-note > p:last-child {
  margin: 8px 0 0;
  padding: 14px 16px;
  border: 1.5px dashed var(--ink);
  background: var(--paper);
  font-family: Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  transform: rotate(1deg);
}

@media (max-width: 680px) {
  .roadmap-heading,
  .roadmap-desk-note {
    grid-template-columns: minmax(0, 1fr);
  }

  .roadmap-heading {
    gap: 20px;
  }

  .roadmap-date {
    justify-self: start;
  }

  .roadmap-board::after {
    display: none;
  }
}

@media (max-width: 420px) {
  .roadmap-page .roadmap-layout {
    width: min(100% - 24px, 1180px);
  }

  .roadmap-page .policy {
    padding-inline: 20px;
    border-radius: 20px;
  }

}

@media print {
  .roadmap-board {
    overflow: visible;
    background: white;
  }

  .roadmap-board::before,
  .roadmap-board::after,
  .roadmap-page .roadmap-group::before,
  .roadmap-jump {
    display: none;
  }

  .roadmap-page .roadmap-group {
    filter: none;
    border: 1px solid #27270f;
  }

  .roadmap-toggle {
    display: none;
  }

  .roadmap-page .roadmap-group details::details-content {
    block-size: auto;
    opacity: 1;
    content-visibility: visible;
  }

  .roadmap-heading {
    grid-template-columns: 1fr;
  }

  .roadmap-date,
  .roadmap-page .roadmap-group,
  .roadmap-desk-note > p:last-child {
    border: 1px solid #27270f;
    box-shadow: none;
    transform: none;
  }

  .roadmap-groups,
  .roadmap-desk-note {
    display: block;
  }

  .roadmap-page .roadmap-items li,
  .roadmap-desk-note > * {
    break-inside: avoid;
  }
}

.roadmap-page .roadmap-never li + li {
  margin-top: 0;
}