/* /timeline-results: its own sheet, loaded after site.css.
   One object runs the page: a calendar of 26 weeks, six months of them. The
   hero flags three stretches on it; the part below fills in one stretch per
   stage. Every drawing here shows WHEN and nothing else: no line goes up, no
   bar is taller than another, nothing is drawn as a result.
   Script: scripts/timeline-results.js. With that script absent every part is
   visible, every answer opens and every link still jumps. */

html:has(body.trp) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.trp {
  --tr-ease: cubic-bezier(.16, 1, .3, 1);
  --tr-gut: clamp(20px, 4vw, 56px);
  --tr-cell: rgba(11, 29, 58, .1);
  /* the calendar's six months: 4, 4 and 5 weeks, twice */
  --tr-mg: clamp(5px, 1vw, 12px);
  --tr-cols: repeat(4, minmax(0, 1fr)) var(--tr-mg) repeat(4, minmax(0, 1fr)) var(--tr-mg) repeat(5, minmax(0, 1fr)) var(--tr-mg) repeat(4, minmax(0, 1fr)) var(--tr-mg) repeat(4, minmax(0, 1fr)) var(--tr-mg) repeat(5, minmax(0, 1fr));
}
/* Parts waiting to slide in sit a little to one side; clip keeps sticky working. */
.trp main { overflow-x: clip; }

/* ============ GROUND RULES ============ */
/* the gutter is on the section, so a block's parent is exactly as wide as the room it has */
.trp main > section { padding-inline: var(--tr-gut); }
.tr-wrap { max-width: 1240px; margin-inline: auto; }
/* text fills its column; the column sets the measure */
.trp main p { max-width: none; margin: 0; }
.trp main a:not(.btn) { border-bottom: 0; }
.trp main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.trp main figure { margin: 0; }
.trp main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.trp main h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.18; letter-spacing: -.005em; color: var(--ink); margin: 0; max-width: none; }
.trp main :is(a, button, summary, input):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.trp :is(.tr-why, .tr-end) :is(a, button):focus-visible { outline-color: #fff; }
/* a part that receives focus after a jump is not itself a control */
.trp main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* a link to a neighbouring page, inside a sentence */
.tr-term { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.tr-term:hover { color: var(--accent-blue-hover); }
.tr-term:active { color: var(--accent-blue); }

/* the onward link: the arrow leans the way it points */
.tr-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.tr-go span { display: inline-block; transition: transform 360ms var(--tr-ease); }
.tr-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.tr-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }
.tr-go:active span { transform: translateY(7px) rotate(90deg); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (tr-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.tr-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--tr-ease); }
.tr-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.tr-js [data-r="stage"]:not(.is-in) { transform: translateX(-28px); }
.tr-js [data-r="sign"] { transition-delay: calc(var(--n, 0) * 90ms); }
.tr-js [data-r="sign"]:not(.is-in) { transform: translateY(26px) scale(.97); }
/* the two drawings are never hidden: their parts move instead */
.tr-js [data-r="pace"]:not(.is-in), .tr-js [data-r="fork"]:not(.is-in) { opacity: 1; transform: none; }

/* ============ HERO ============ */
.tr-hero { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 104px); }
.tr-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 56px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.tr-hero__h1 > .h-lead, .tr-hero__h1 > em { display: inline-block; }
.tr-hero__h1 > em { color: var(--accent-blue); }
.tr-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.tr-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.tr-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }

/* the calendar: 26 weeks in six months, three stretches flagged */
.tr-cal__grid { display: grid; grid-template-columns: var(--tr-cols); column-gap: 3px; grid-template-rows: 34px 34px auto auto auto; }
.trp main :is(.tr-cal__weeks, .tr-cal__months) { display: contents; }
.tr-span { min-width: 0; grid-row: 2; padding-left: 9px; border-left: 2px solid var(--ink); transform-origin: left bottom; }
.tr-span b { display: block; white-space: nowrap; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums; }
.tr-span--a { grid-column: 1 / 5; grid-row: 1 / 3; border-left-color: var(--ink-muted); }
.tr-span--b { grid-column: 4 / 15; border-left-color: var(--accent-blue); }
.tr-span--c { grid-column: 17 / 32; }
.tr-wk { grid-row: 3; grid-column: var(--c); height: 40px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.tr-wk--q { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.tr-wk--s { background: var(--accent-blue); box-shadow: none; }
/* week 4 closes one stretch and opens the next */
.tr-wk--q.tr-wk--s { background: linear-gradient(135deg, var(--accent-wash) 50%, var(--accent-blue) 50%); box-shadow: inset 0 0 0 1.5px var(--accent-blue); }
.tr-wk--l { background: var(--ink); box-shadow: none; }
.trp main .tr-cal__months li {
  grid-row: 4; grid-column: var(--from) / var(--to); min-width: 0; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border-strong);
  font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums;
}
.tr-cal { container-type: inline-size; }
/* where the calendar is narrow the unit is said once */
@container (max-width: 560px) { .tr-u:not(.tr-u--keep) { display: none; } }
.tr-cal__review { grid-row: 5; grid-column: 1 / -1; justify-self: end; margin-top: 10px; padding: 2px 10px 0 0; border-right: 2px solid var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }

/* first paint: the weeks are laid down one after another, then the three
   flags are raised. Plain CSS, so it plays (and ends drawn) with scripts off. */
@keyframes tr-lay { from { opacity: 0; transform: translateY(10px) scale(.7); } }
@keyframes tr-flag { from { opacity: 0; transform: scaleY(.2); } }
@keyframes tr-say { from { opacity: 0; transform: translateY(14px); } }
@keyframes tr-fade { from { opacity: 0; } }
.tr-hero__say { animation: tr-say 700ms var(--tr-ease) both; }
.tr-wk { animation: tr-lay 520ms var(--tr-ease) calc(180ms + var(--w) * 26ms) both; }
.tr-span { animation: tr-flag 620ms var(--tr-ease) calc(900ms + var(--n) * 190ms) both; }
.tr-cal__months li, .tr-cal__review { animation: tr-fade 500ms ease 1100ms both; }
.tr-cal__review { animation-delay: 1500ms; }

/* ============ THE BAR THAT FOLLOWS THE READER ============ */
.trp .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--tr-ease), visibility 0s 360ms;
}
.trp .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--tr-ease); }
body.trp.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.trp .hc-bar__track {
  max-width: calc(1240px + 2 * var(--tr-gut)); margin: 0 auto; padding: 0 var(--tr-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.trp .hc-bar__track::-webkit-scrollbar { display: none; }
.trp .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.trp .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--tr-ease);
}
.trp .hc-bar__track a:hover, .trp .hc-bar__track a[aria-current] { color: var(--ink); }
.trp .hc-bar__track a:hover::after { transform: scaleX(.35); }
.trp .hc-bar__track a:active::after { transform: scaleX(.7); }
.trp .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.trp .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.trp .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ WEEK BY WEEK ============ */
.tr-weeks { padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px); border-top: 1px solid var(--border); }

/* "which week are you in": only there once the script is */
.tr-here { margin-top: clamp(22px, 3vw, 36px); padding: 18px clamp(16px, 2.4vw, 28px) 16px; background: var(--accent-wash); border-radius: var(--radius-lg); }
.tr-here[hidden] { display: none; }
/* Clear keeps its place before a week is picked: the track must not shorten under the first press */
.tr-here__clear[hidden] { display: block; visibility: hidden; }
.tr-here label { display: block; font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.tr-here__row { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.tr-here input[type="range"] { flex: 1 1 auto; min-width: 0; max-width: 640px; height: 44px; margin: 0; accent-color: var(--accent-blue); cursor: pointer; }
.tr-here__clear { flex: none; min-height: 44px; padding: 0 6px; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color 200ms, transform 160ms; }
.tr-here__clear:hover { color: var(--accent-blue); }
.tr-here__clear:active { transform: scale(.96); }
/* empty until a week is picked; it grows below the slider, so nothing moves under the finger */
.trp main .tr-here__out { display: flex; flex-wrap: wrap; align-items: center; font-size: 16px; line-height: 26px; color: var(--ink-soft); font-variant-numeric: lining-nums; }
.tr-here.is-set .tr-here__out { min-height: 44px; color: var(--ink); font-weight: 500; }

.tr-weeks__grid { margin-top: clamp(24px, 3.4vw, 44px); }
.tr-stages { border-bottom: 1px solid var(--border); }
.tr-stage { position: relative; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 44px); row-gap: 12px; padding: 26px 0 26px 20px; border-top: 1px solid var(--border); }
.tr-stage::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 2px; background: var(--accent-blue); transform: scaleY(0); transform-origin: top; transition: transform 460ms var(--tr-ease); }
.tr-stage.is-now::before { transform: none; }
/* the stretch a reader said they are in keeps its mark, in ink */
.tr-stage.is-here::before { transform: none; background: var(--ink); }
.trp main .tr-stage__when { grid-column: 1; align-self: start; font-family: var(--font-display); font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.15; color: var(--ink); font-variant-numeric: lining-nums; transition: color 300ms; }
.tr-stage.is-now .tr-stage__when { color: var(--accent-blue-hover); }
.tr-stage__here { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--accent-blue-hover); }
@keyframes tr-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } }
.tr-stage__here { animation: tr-say 420ms var(--tr-ease) both; }
.tr-plan__cells b.is-here { animation: tr-pop 460ms var(--tr-ease); }
.tr-here__out .tr-go { margin-left: 14px; min-height: 26px; font-size: 15px; }
.tr-stage__here::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent-blue); }
.tr-stage__say { grid-column: 2; grid-row: 1 / span 2; }
.trp main .tr-stage__say p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin-top: 8px; }
.tr-stage__say .tr-go { margin-top: 6px; }

/* the same 26 weeks, small: one stretch filled in */
.tr-strip {
  grid-column: 1; align-self: start; position: relative; height: 14px; max-width: 320px;
  background: repeating-linear-gradient(90deg, var(--tr-cell) 0 calc(100% / 26 - 2px), transparent calc(100% / 26 - 2px) calc(100% / 26));
}
.tr-strip i { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / 26 * 100%); width: calc((var(--e) - var(--s)) / 26 * 100% - 2px); min-width: 4px; border-radius: 2px; background: var(--accent-blue); transform-origin: left; transition: transform 700ms var(--tr-ease) 200ms; }
.tr-js [data-r="stage"]:not(.is-in) .tr-strip i { transform: scaleX(0); }
/* past the last week: the stretch leaves the calendar */
.tr-strip--after { margin-right: 22px; }
.tr-strip--after i { left: 100%; width: 16px; margin-left: 2px; border-radius: 0; top: 50%; bottom: auto; height: 2px; margin-top: -1px; background: var(--accent-blue); }
.tr-strip--after i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--accent-blue); border-right: 2px solid var(--accent-blue); transform: rotate(45deg); }

/* the wall planner beside the stages: built by the script, lit by where you are reading */
.tr-plan { display: none; margin-bottom: 8px; }
.tr-js .tr-plan { display: block; }
.tr-plan__card { position: relative; max-width: 520px; margin-top: 12px; padding: 34px clamp(18px, 2vw, 28px) 22px; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 18px 40px -28px rgba(11, 29, 58, .45); }
.tr-plan__rings { position: absolute; left: 0; right: 0; top: -11px; display: flex; justify-content: center; gap: 96px; }
.tr-plan__rings i { width: 10px; height: 24px; border-radius: 5px; background: #fff; border: 1.5px solid var(--ink); }
.tr-plan__row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; padding-block: 5px; }
.tr-plan__m { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: lining-nums; }
.tr-plan__cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tr-plan__cells b {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 52px; border-radius: 6px;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--border-strong);
  transition: background-color 320ms ease var(--d, 0ms), color 320ms ease var(--d, 0ms), box-shadow 320ms ease var(--d, 0ms), transform 420ms var(--tr-ease) var(--d, 0ms);
}
.tr-plan__cells b.is-lit { background: var(--accent-blue); color: #fff; box-shadow: none; }
/* ten days end part-way through week 2 */
.tr-plan__cells b.is-part { background: linear-gradient(90deg, var(--accent-blue) 43%, #fff 43%); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent-blue); }
.tr-plan__cells b.is-here { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.tr-plan__after { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); transition: color 320ms; }
.tr-plan__after i { font-style: normal; display: inline-block; transition: transform 520ms var(--tr-ease); }
.tr-plan__after.is-lit { color: var(--accent-blue-hover); font-weight: 600; }
.tr-plan__after.is-lit i { transform: translateX(6px); }
.tr-plan__after.is-here span { outline: 2.5px solid var(--ink); outline-offset: 4px; border-radius: 3px; }
@media (min-width: 960px) {
  .tr-js .tr-weeks__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(36px, 5vw, 88px); align-items: stretch; }
  .tr-js .tr-plan { order: 2; margin-bottom: 0; }
  .tr-js .tr-plan__card { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); max-width: none; margin-top: 0; }
  .tr-js .tr-stage .tr-strip { display: none; }
  .tr-js .tr-stage { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); }
  .tr-js .tr-stage__say { grid-row: 1; }
}

.tr-notes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; margin-top: clamp(36px, 5vw, 64px); }
.trp .tr-notes__lead { font-family: var(--font-display); font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.22; color: var(--ink); padding-left: 20px; border-left: 3px solid var(--accent-blue); }
.trp main .tr-notes__more p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.trp main .tr-notes__more p + p { margin-top: 16px; }

/* ============ WHY IT IS SLOW ============ */
.tr-why { background: var(--navy-brand); color: #fff; padding-block: clamp(56px, 7vw, 112px); }
.trp main .tr-why h2 { color: #fff; }
.tr-why__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; margin-top: clamp(24px, 3.4vw, 44px); }
.trp main .tr-why__say p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.trp main .tr-why__say p + p { margin-top: 18px; }
.trp main .tr-why__say .tr-why__limit { margin-top: 28px; padding-left: 20px; border-left: 3px solid var(--accent-ice); font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.3; color: #fff; }
.tr-pace { justify-self: center; width: 100%; max-width: 400px; }
.tr-pace svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr-pace :is(circle, path, rect) { fill: none; stroke: var(--accent-ice); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-pace .tr-pace__rule { stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 2 7; }
.tr-pace :is(.tr-pace__hour, .tr-pace__min) { stroke: #fff; stroke-width: 2.6; transform-box: view-box; transform-origin: 92px 78px; }
.tr-pace .tr-pace__pin { fill: #fff; stroke: none; }
.tr-pace .tr-pace__level { fill: rgba(124, 169, 209, .28); stroke: none; }
.tr-pace .tr-pace__cell { fill: #fff; stroke: none; }
.tr-pace .tr-pace__days rect { stroke-width: 1.4; }
.tr-pace :is(.tr-pace__clock, .tr-pace__pill, .tr-pace__calendar, .tr-pace__vial) { transition: opacity 700ms ease, transform 900ms var(--tr-ease); transform-box: fill-box; transform-origin: center; }
.tr-pace :is(.tr-pace__calendar, .tr-pace__vial) { transition-delay: 260ms; }
.tr-js [data-r="pace"]:not(.is-in) :is(.tr-pace__clock, .tr-pace__pill) { opacity: 0; transform: translateX(-26px); }
.tr-js [data-r="pace"]:not(.is-in) :is(.tr-pace__calendar, .tr-pace__vial) { opacity: 0; transform: translateX(26px); }
/* while it is watched: the clock's hand goes round in seconds, the calendar fills a day at a time */
@keyframes tr-sweep { to { transform: rotate(360deg); } }
@keyframes tr-day { 0%, 4% { fill: transparent; } 9%, 100% { fill: var(--accent-ice); } }
@keyframes tr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.tr-pace.is-live.is-in .tr-pace__min { animation: tr-sweep 3.2s linear infinite; }
.tr-pace.is-live.is-in .tr-pace__hour { animation: tr-sweep 38.4s linear infinite; }
.tr-pace.is-live.is-in .tr-pace__days rect { animation: tr-day 16s linear infinite; }
.tr-pace__days rect:nth-child(2) { animation-delay: 1.2s !important; }
.tr-pace__days rect:nth-child(3) { animation-delay: 2.4s !important; }
.tr-pace__days rect:nth-child(4) { animation-delay: 3.6s !important; }
.tr-pace__days rect:nth-child(5) { animation-delay: 4.8s !important; }
.tr-pace__days rect:nth-child(6) { animation-delay: 6s !important; }
.tr-pace__days rect:nth-child(7) { animation-delay: 7.2s !important; }
.tr-pace__days rect:nth-child(8) { animation-delay: 8.4s !important; }
.tr-pace__days rect:nth-child(9) { animation-delay: 9.6s !important; }
.tr-pace__days rect:nth-child(10) { animation-delay: 10.8s !important; }
.tr-pace__days rect:nth-child(11) { animation-delay: 12s !important; }
.tr-pace__days rect:nth-child(12) { animation-delay: 13.2s !important; }
.tr-pace.is-live.is-in .tr-pace__cell { animation: tr-bob 4.6s ease-in-out infinite; transform-box: fill-box; }
.tr-pace.is-live.is-in .tr-pace__cell:nth-of-type(2) { animation-delay: 1.3s; }
.tr-pace.is-live.is-in .tr-pace__cell:nth-of-type(3) { animation-delay: 2.5s; }

/* ============ SIGNS ============ */
.tr-signs { background: var(--accent-wash); padding-block: clamp(56px, 7vw, 112px); }
.trp main .tr-signs__lede { margin-top: 18px; font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.65; color: var(--ink); }
.tr-signlist { margin-top: clamp(28px, 4vw, 48px) !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tr-sign { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: clamp(16px, 2vw, 26px); align-items: start; padding: clamp(22px, 2.6vw, 32px); background: #fff; border-radius: var(--radius-lg); }
.tr-sign__icon { width: 68px; height: 68px; border-radius: 50%; background: var(--accent-wash); display: grid; place-items: center; }
.tr-sign__icon svg { overflow: visible; }
.tr-sign__icon :is(path, rect) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 150; stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--tr-ease) calc(200ms + var(--n, 0) * 90ms); }
.tr-sign__icon :is(.tr-ray, .tr-star, .tr-fill, .tr-step) { stroke: var(--accent-blue); }
.tr-sign__icon .tr-tab { stroke: var(--accent-blue); }
.tr-js .tr-sign:not(.is-in) .tr-sign__icon :is(path, rect) { stroke-dashoffset: 150; }
.trp main .tr-sign p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin-top: 8px; }
@keyframes tr-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes tr-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.tr-signlist.is-live .tr-sign.is-in .tr-star { animation: tr-twinkle 3.2s ease-in-out 1.6s infinite; }
.tr-signlist.is-live .tr-sign.is-in .tr-star--b { animation-delay: 2.7s; }
.tr-signlist.is-live .tr-sign.is-in .tr-ray { animation: tr-twinkle 4.4s ease-in-out 1.8s infinite; }
.tr-signlist.is-live .tr-sign.is-in .tr-step { animation: tr-rise 3.6s ease-in-out 1.8s infinite; }

/* ============ A FLAT SIX MONTHS ============ */
.tr-flat { padding-block: clamp(56px, 7vw, 112px); }
.tr-flat__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-top: clamp(24px, 3.4vw, 44px); }
.tr-fork { justify-self: center; width: 100%; max-width: 250px; }
.tr-fork svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr-fork :is(path, rect) { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-fork .tr-fork__arm path { fill: var(--accent-wash); stroke: var(--accent-blue); }
.tr-fork .tr-fork__leaf rect { fill: #fff; }
.tr-fork text { font-family: var(--font-body); font-size: 19px; font-weight: 600; fill: var(--ink); font-variant-numeric: lining-nums; }
.tr-fork .tr-fork__arm { transform-box: view-box; transition: transform 1000ms cubic-bezier(.3, 1.5, .5, 1) 250ms, opacity 400ms ease 250ms; }
.tr-fork .tr-fork__arm--l { transform-origin: 120px 72px; }
.tr-fork .tr-fork__arm--r { transform-origin: 120px 118px; transition-delay: 430ms; }
.tr-fork .tr-fork__leaf { transition: transform 700ms var(--tr-ease) 700ms, opacity 400ms ease 700ms; }
.tr-fork .tr-fork__post { stroke-dasharray: 200; stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--tr-ease); }
.tr-js [data-r="fork"]:not(.is-in) .tr-fork__post { stroke-dashoffset: 200; }
.tr-js [data-r="fork"]:not(.is-in) .tr-fork__arm--l { transform: rotate(72deg); opacity: 0; }
.tr-js [data-r="fork"]:not(.is-in) .tr-fork__arm--r { transform: rotate(-72deg); opacity: 0; }
.tr-js [data-r="fork"]:not(.is-in) .tr-fork__leaf { transform: translateY(-12px); opacity: 0; }
.trp main .tr-flat__say p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.trp main .tr-flat__say p + p { margin-top: 18px; }
.trp main .tr-flat__say p:first-child { font-family: var(--font-display); font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.25; color: var(--ink); }

/* ============ QUESTIONS ============ */
.tr-faq { padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px); border-top: 1px solid var(--border); }
.tr-faq > .tr-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(22px, 5vw, 88px); align-items: start; }
.tr-faq > .tr-wrap > h2 { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.tr-q { border-top: 1px solid var(--border-strong); }
.tr-q:last-child { border-bottom: 1px solid var(--border-strong); }
.tr-q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; column-gap: 20px; align-items: center; min-height: 72px; padding-block: 16px; font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; color: var(--ink); transition: color 200ms; }
.tr-q summary::-webkit-details-marker { display: none; }
.tr-q summary:hover { color: var(--accent-blue-hover); }
.tr-q__ic { position: relative; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong); transition: box-shadow 200ms, background-color 200ms, transform 420ms var(--tr-ease); }
.tr-q__ic::before, .tr-q__ic::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform 420ms var(--tr-ease); }
.tr-q__ic::after { transform: rotate(90deg); }
.tr-q summary:hover .tr-q__ic { box-shadow: inset 0 0 0 1.5px var(--accent-blue); }
.tr-q summary:active .tr-q__ic { transform: scale(.92); }
.tr-q[open] .tr-q__ic { background: var(--accent-wash); transform: rotate(180deg); }
.tr-q[open] .tr-q__ic::after { transform: rotate(0deg); }
.trp main .tr-q__a p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); padding: 0 52px 26px 0; }
@keyframes tr-unfold { from { opacity: 0; transform: translateY(-8px); } }
.tr-q[open] .tr-q__a { animation: tr-unfold 420ms var(--tr-ease) both; }

/* ============ THE CALL, AND WHERE NEXT ============ */
.tr-end { background: var(--navy-brand); color: #fff; padding: clamp(64px, 8vw, 120px) var(--tr-gut) clamp(40px, 5vw, 64px); }
.tr-end__call { max-width: 760px; margin-inline: auto; text-align: center; }
.trp main .tr-end h2 { color: #fff; }
.trp main .tr-end__call p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .88); margin: 20px 0 30px; }
.tr-next { max-width: 1240px; margin: clamp(48px, 6vw, 80px) auto 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.tr-next ul { display: flex; flex-wrap: wrap; gap: 0 clamp(24px, 4vw, 56px); }
.tr-next a { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; font-size: 17px; font-weight: 500; color: #fff; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.tr-next a i { font-style: normal; color: var(--accent-ice); transition: transform 360ms var(--tr-ease); }
.tr-next a:hover { text-decoration-color: var(--accent-ice); }
.tr-next a:hover i { transform: translateX(6px); }
.tr-next a:active i { transform: translateX(10px); }
.tr-next__up { margin-left: auto; }
.tr-next__up a { color: rgba(255, 255, 255, .84); }
.tr-next__up a:hover i { transform: translateX(-6px); }
.tr-next__up a:active i { transform: translateX(-10px); }

/* ============ NARROWER ============ */
@media (max-width: 900px) {
  .tr-hero__row, .tr-why__grid, .tr-flat__grid, .tr-notes, .tr-faq > .tr-wrap { grid-template-columns: minmax(0, 1fr); }
  .tr-faq > .tr-wrap > h2 { position: static; }
  .tr-hero__row { align-items: start; }
  .tr-pace { max-width: 340px; justify-self: start; }
  .tr-fork { max-width: 170px; justify-self: start; }
  .tr-signlist { grid-template-columns: minmax(0, 1fr); }
  .trp .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .tr-next__up { margin-left: 0; }
}
@media (max-width: 700px) {
  .tr-stage { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding-block: 22px; }
  .tr-stage::before { top: 22px; bottom: 22px; }
  .tr-stage__say, .tr-strip { grid-column: 1; grid-row: auto; }
  .tr-strip { max-width: none; }
  .tr-next ul { display: block; }
  .tr-next li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
  .tr-next a { display: flex; justify-content: space-between; }
  .tr-next__up a { justify-content: flex-start; }
}
@media (max-width: 560px) {
  html:has(body.trp) { --hc-bar-h: 48px; }
  .trp .hc-bar__track { gap: 22px; }
  .tr-hero__act .btn, .tr-end__call .btn { width: 100%; }
  .tr-wk { height: 30px; border-radius: 3px; }
  .tr-cal__grid { column-gap: 2px; grid-template-rows: 30px 30px auto auto auto; }
  .tr-span b { font-size: 15px; }
  .tr-sign { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 20px 18px; }
  .tr-sign__icon { width: 52px; height: 52px; }
  .tr-sign__icon svg { width: 32px; height: 32px; }
  .trp main .tr-q__a p { padding-right: 0; }
  .tr-q summary { min-height: 64px; }
  .tr-here__row { gap: 10px; }
  .trp main h2 { font-size: 1.75rem; }
  .tr-plan__card { padding: 26px 16px 14px; }
  .tr-plan__row { grid-template-columns: 72px minmax(0, 1fr); padding-block: 3px; }
  .tr-plan__cells b { aspect-ratio: auto; height: 36px; }
  .tr-here__out .tr-go { margin-left: 0; min-height: 44px; flex-basis: 100%; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .trp main *, .trp main *::before, .trp main *::after { animation: none !important; transition: none !important; }
  .tr-js [data-r]:not(.is-in) { opacity: 1 !important; transform: none !important; }
  .tr-js [data-r="stage"]:not(.is-in) .tr-strip i { transform: none !important; }
  .tr-js [data-r="pace"]:not(.is-in) :is(.tr-pace__clock, .tr-pace__pill, .tr-pace__calendar, .tr-pace__vial) { opacity: 1 !important; transform: none !important; }
  .tr-js .tr-sign:not(.is-in) .tr-sign__icon :is(path, rect) { stroke-dashoffset: 0 !important; }
  .tr-js [data-r="fork"]:not(.is-in) :is(.tr-fork__arm, .tr-fork__leaf) { opacity: 1 !important; transform: none !important; }
  .tr-js [data-r="fork"]:not(.is-in) .tr-fork__post { stroke-dashoffset: 0 !important; }
  .trp .hc-bar { transition: none !important; }
  .tr-go:hover span, .tr-next a:hover i { transform: none; }
}

/* Paper is taken the instant the print dialog opens: nothing may still be
   fading or sliding in, every answer is open, each stage carries its own
   small calendar and the navy bands print dark on white. */
@media print {
  .trp main *, .trp main *::before, .trp main *::after { animation: none !important; transition: none !important; }
  .trp .hc-bar, .tr-here, .tr-plan, .tr-stage__here { display: none !important; }
  .tr-js [data-r] { opacity: 1 !important; transform: none !important; }
  .tr-js .tr-weeks__grid { display: block !important; }
  .tr-js .tr-stage .tr-strip { display: block !important; }
  .tr-js .tr-stage__say { grid-row: 1 / span 2 !important; }
  .tr-strip i { transform: none !important; }
  .tr-js [data-r="pace"] :is(.tr-pace__clock, .tr-pace__pill, .tr-pace__calendar, .tr-pace__vial) { opacity: 1 !important; transform: none !important; }
  .tr-js .tr-sign .tr-sign__icon :is(path, rect) { stroke-dashoffset: 0 !important; }
  .tr-js [data-r="fork"] :is(.tr-fork__arm, .tr-fork__leaf) { opacity: 1 !important; transform: none !important; }
  .tr-js [data-r="fork"] .tr-fork__post { stroke-dashoffset: 0 !important; }
  .tr-stage::before, .tr-q__ic { display: none !important; }
  .tr-faq > .tr-wrap > h2 { position: static; }
  .tr-q::details-content { content-visibility: visible; display: block; height: auto; }
  .tr-why, .tr-signs, .tr-end { background: #fff !important; }
  .tr-why *, .tr-end *, .trp main .tr-why h2, .trp main .tr-end h2 { color: var(--ink) !important; }
  .tr-pace :is(circle, path, rect), .tr-pace :is(.tr-pace__hour, .tr-pace__min) { stroke: var(--ink); }
  .tr-pace :is(.tr-pace__pin, .tr-pace__cell) { fill: var(--ink); stroke: none; }
  .tr-sign { border: 1px solid var(--border-strong); break-inside: avoid; }
  .tr-stage { break-inside: avoid; }
  .tr-next { border-color: var(--border-strong); }
  .trp main * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}