/* Stilyagi · page styles for roadmap. Extracted from the source site's inline <style>. */

.roadmap-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--unit) * 4) calc(var(--unit) * 4)
    calc(var(--unit) * 6);
}
.timeline {
  border-top: var(--rule-weight-2) solid var(--ink);
  margin-top: calc(var(--unit) * 3);
}
.phase {
  border-bottom: var(--rule-weight) solid var(--ink);
  background: var(--paper);
}
.phase:hover:not(.open) {
  background: var(--paper-shade);
}
.phase .ph-head {
  display: grid;
  grid-template-columns: 120px 1fr 200px 60px;
  align-items: center;
  padding: calc(var(--unit) * 3);
  cursor: pointer;
  gap: calc(var(--unit) * 3);
  user-select: none;
}
.ph-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3.4rem;
  line-height: 1;
}
.phase.done .ph-num {
  color: var(--signal-sage);
}
.phase.current .ph-num {
  color: var(--accent-text);
}
.phase.later .ph-num {
  color: var(--ink-soft);
}
.ph-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  /* Pinned so the promotion from h3 to h2 (for heading order) does not
     inherit the display heading's tighter tracking. */
  letter-spacing: 0.04em;
  font-size: 1.75rem;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.ph-tag {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent-text);
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  text-transform: uppercase;
}
.ph-meta {
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.6;
}
.ph-status {
  display: inline-block;
  padding: 3px 8px 2px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.phase.done .ph-status {
  background: var(--signal-sage-solid);
  color: var(--paper);
}
.phase.current .ph-status {
  background: var(--press-red);
  color: var(--paper);
}
.phase.later .ph-status {
  background: var(--paper-shade);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.ph-toggle {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent-text);
  text-align: center;
  transition: transform 180ms;
}
.phase.open .ph-toggle {
  transform: rotate(45deg);
  color: var(--ink);
}
.ph-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 280ms ease-out;
  background: var(--paper-shade);
}
.phase.open .ph-body {
  max-height: 2200px;
  border-top: var(--rule-weight) solid var(--ink);
}
.ph-body-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--unit) * 5);
  padding: calc(var(--unit) * 5) calc(var(--unit) * 4);
}
.goal h3,
.deliverables h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.15rem;
  margin: 0 0 10px;
}
.goal h3 .red {
  color: var(--accent-text);
}
.goal p {
  font-family: var(--font-editorial);
  font-size: 1.08rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
.ship-strip {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid var(--press-red);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.ship-strip b {
  color: var(--accent-text);
}
.deliverables ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.deliverables li {
  padding: 8px 0 8px 1.8em;
  position: relative;
  border-bottom: 1px dashed rgba(15, 15, 15, 0.2);
  font-family: var(--font-editorial);
  font-size: 1rem;
  line-height: 1.45;
}
.deliverables li:last-child {
  border-bottom: 0;
}
.deliverables li::before {
  content: "§";
  position: absolute;
  left: 0;
  top: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--accent-text);
}
.legend-bar {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.legend-bar .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: 6px;
}
.dot-done {
  background: var(--signal-sage);
}
.dot-cur {
  background: var(--press-red);
}
.dot-later {
  background: var(--paper-shade);
  border: 1px solid var(--ink);
}
/* Three keys no longer share a line at phone widths — wrapping leaves one
   stranded — so they stack into a short list instead. */
@media (width <= 560px) {
  .legend-bar {
    flex-direction: column;
    gap: 8px;
  }
}
.risks {
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--unit) * 6) calc(var(--unit) * 4);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: calc(var(--unit) * 6);
}
.margin-note {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.8;
  position: sticky;
  top: 100px;
  align-self: start;
}
.margin-note .red {
  color: var(--accent-text);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.risks .body h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0 0 calc(var(--unit) * 2);
  line-height: 0.95;
}
.risks .body p {
  font-family: var(--font-editorial);
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 64ch;
}
.risks .body p + p {
  text-indent: 1.8em;
  margin-top: 10px;
}
.roadmap-illo {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 calc(var(--unit) * 4) calc(var(--unit) * 4);
}
.roadmap-illo .illo-frame {
  position: relative;
  border: var(--rule-weight-2) solid var(--ink);
  margin: calc(var(--unit) * 3) 0 0;
}
/* The plate boxes the artwork alone, so the call-out percentages below
   measure the image and not the figure. Once the caption is filed beneath
   the artwork on phones the two boxes differ by the height of the caption,
   and labels anchored to the figure slide off the bottom of the image. */
.illo-plate {
  position: relative;
}
/* Set in the artwork's empty top-left corner rather than under the frame,
   in the same sans caps as the pipeline caption on the home page. */
.illo-caption {
  position: absolute;
  left: calc(var(--unit) * 2);
  top: calc(var(--unit) * 2);
  /* The caption runs to the frame's right edge; the pad keeps it off the
     rule and matches the inset on its left. */
  padding-right: calc(var(--unit) * 2);
  font-family: var(--font-sans);
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-soft);
}
.roadmap-illo img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}
/* Each label names the slice a call-out line in the artwork points at.
   Coordinates are percentages of the frame, set inline per label, so the
   labels track their lines as the image scales. */
.illo-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%);
  font-family: var(--font-sans);
  font-size: clamp(0.5rem, 1.1vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 2px 7px 1px;
  white-space: nowrap;
}
/* The call-outs wear the same status palette as the timeline below: paper on
   sage for shipped (4.58:1), paper on press-red for in flight (4.60:1), and
   the ink-on-paper default above for planned (15.21:1).  Each fill is paired
   with a mark, so the three states are still told apart with colour absent;
   the mark is decorative and the status is spoken by a visually hidden
   suffix. */
.illo-label.is-done {
  background: var(--signal-sage-solid);
  color: var(--paper);
}
.illo-label.is-current {
  background: var(--press-red);
  color: var(--paper);
}
.illo-mark {
  font-weight: 900;
  /* The marks are geometric shapes centred on the em box rather than seated
     on the baseline; a small nudge lines them up with the label's capitals. */
  vertical-align: -0.05em;
}
.illo-label--below {
  transform: translate(-50%, 0);
}
/* At phone widths the image goes full-bleed — the section's inline
   padding and the frame's side borders drop so the artwork runs edge to
   edge — which buys enough room to keep the labels; they tighten their
   tracking and padding to fit the smaller frame. */
@media (max-width: 640px) {
  .roadmap-illo {
    padding-inline: 0;
  }
  .roadmap-illo .illo-frame {
    border-inline: 0;
  }
  .illo-label {
    letter-spacing: 0.06em;
    padding: 1px 4px;
  }
  /* There is no room to set the caption in the plate at this width — it
     wraps across the 03 call-out — so it is filed beneath the artwork
     instead, presented as Figure 01 is on the overview page. The frame's
     bottom rule moves to the image so the caption falls below the rule
     rather than inside it. */
  .roadmap-illo .illo-frame {
    border-block-end: 0;
  }
  .roadmap-illo img {
    border-block-end: var(--rule-weight-2) solid var(--ink);
  }
  .illo-caption {
    position: static;
    margin-top: 10px;
    padding-inline: calc(var(--unit) * 2);
    font-size: 0.72rem;
    line-height: normal;
  }
  /* At this scale two labels sit a shade off their lines: 00 drifts over
     01's leader and 03 crowds its dot. Counting spans, 1 is 00 and 4 is 03. */
  .illo-label:nth-of-type(1) {
    transform: translate(calc(-50% - 10px), -100%);
  }
  .illo-label:nth-of-type(4) {
    transform: translate(-50%, calc(-100% - 8px));
  }
  /* The last call-out sits at 88.5% of the frame and is centred on that
     point, so half its width hangs past the right edge and widens the whole
     page.  Pinning it just inside the frame costs a little alignment with
     the leader drawn beneath it and buys a page that does not scroll
     sideways. */
  .illo-label:nth-of-type(6) {
    left: auto;
    right: 4px;
    transform: none;
  }
}
/* A band of four policy cards spanning the content column, above the
   "what we will not do" section. It carries the top padding; the section
   below supplies the gap beneath. */
.pacing {
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--unit) * 6) calc(var(--unit) * 4) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pacing .card {
  border: 1px solid var(--ink);
  padding: 14px 16px;
  background: var(--paper);
}
.pacing .card .tt {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--accent-text);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pacing .card .body-t {
  font-family: var(--font-editorial);
  font-size: 0.98rem;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .phase .ph-head {
    /* A bare 1fr takes its minimum from the title, so the longer phase names
       widen the track and shove the toggle past the panel's right edge.
       Capping the track lets the title wrap instead. */
    grid-template-columns: 60px minmax(0, 1fr) 50px;
  }
  .ph-meta {
    display: none;
  }
  .ph-body-inner,
  .risks {
    grid-template-columns: 1fr;
  }
  /* Stacked one-up, the sticky note travels over the prose instead of beside
     it, so it needs a surface of its own.  Same treatment as the masthead: a
     near-opaque paper wash over a blur, lifted above the body column. */
  .margin-note {
    z-index: 1;
    /* The masthead runs 74–90px tall depending on how the brand imprint
       wraps.  Anchoring the box at 74px and padding the text down to 98px
       means the wash always meets the masthead — no strip of unblurred
       prose scrolling through the gap — without ever tucking the text
       underneath it. */
    top: 74px;
    margin-inline: calc(var(--unit) * -2);
    padding: calc(var(--unit) * 3) calc(var(--unit) * 2)
      calc(var(--unit) * 1.5);
    background: rgba(239, 228, 206, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: var(--rule-weight) solid var(--ink);
  }
  .pacing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .pacing {
    grid-template-columns: 1fr;
  }
  /* The timeline runs edge to edge here, as the illustration above it does:
     the wrap gives up its inline padding and the legend takes its own back,
     so only the phase rows reach the screen edges. The rows carry padding
     of their own, so no text ends up against the glass. */
  .roadmap-wrap {
    padding-inline: 0;
  }
  .legend-bar {
    padding-inline: calc(var(--unit) * 4);
  }
}

/* The accordion's height slide and the toggle's rotation are decoration on
   top of aria-expanded; with reduced motion the panel opens at once. */
@media (prefers-reduced-motion: reduce) {
  .ph-body,
  .ph-toggle {
    transition: none;
  }
}