/* /foot-pain. Loaded after site.css, by foot-pain.html only.
   A long reference page, so the layout's job is wayfinding: the page's own
   headings as contents in the hero, a bar that follows the reader, one
   drawing that maps the conditions onto the foot, and parts that do not all
   open the same way. Nothing here looks clickable unless it does something. */

:root {
  --fp-max: 1240px;
  --fp-gut: clamp(20px, 4vw, 56px);
  --fp-nav-h: 64px;            /* fallback; scripts/foot-pain.js sets the real header height */
  --fp-bar-h: 52px;
  --fp-ease: cubic-bezier(.16, 1, .3, 1);
  scroll-padding-top: calc(var(--fp-nav-h) + var(--fp-bar-h) + 20px);
}

/* Text fills its column; the column, not the paragraph, sets the measure. */
.fp main { overflow-x: clip; }
.fp main p { max-width: none; }
/* links that are not underlined text. The buttons, the fact tiles and the
   contents rows draw their own borders, so none of them is named here. */
.fp main a.fp-back, .fp main a.fp-rel, .fp-bar a { border-bottom: 0; }
.fp main h3 { text-wrap: wrap; }
/* A heading that has to wrap breaks where the styling changes. */
.fp .h-lead, .fp .h-tail, .fp main h2 > em { display: inline-block; }

.fp-wrap { max-width: var(--fp-max); margin: 0 auto; padding: 0 var(--fp-gut); }

.fp main h2 {
  position: relative;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.015em;
  margin: 0 0 clamp(18px, 2vw, 26px);
}
.fp main h2 em { color: var(--accent-blue); }
/* :where keeps this as light as a bare h3, so each block's own h3 margin below still applies */
:where(.fp main) h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; margin: 0; }
.fp-lede {
  font-size: clamp(1.08rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 clamp(36px, 4.5vw, 64px);
}
.fp-prose p { margin: 0 0 1.1em; line-height: 1.7; color: var(--ink-soft); }
.fp-prose p:last-child { margin-bottom: 0; }
.fp-prose a { font-weight: 500; }

.fp-sec { --fp-pad: clamp(64px, 8vw, 116px); --fp-top: var(--fp-pad); padding: var(--fp-top) 0 var(--fp-pad); }
/* a jump lands on the heading, not on the section's top padding */
.fp-sec[id] { scroll-margin-top: calc(8px - var(--fp-top)); }
/* the last question's rule already closes the part above: no second gap, no second line */
.fp-sec--near { --fp-top: 0px; }
.fp-sec--wash { background: var(--accent-wash); }
/* two white parts in a row are told apart by a hairline, not by a tint */
.fp-sec--rule { position: relative; }
.fp-sec--rule::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--border);
  left: max(var(--fp-gut), calc((100% - var(--fp-max)) / 2 + var(--fp-gut)));
  right: max(var(--fp-gut), calc((100% - var(--fp-max)) / 2 + var(--fp-gut)));
}
.fp-sec--dark { background: var(--navy-brand); color: var(--white); }
.fp-sec--dark h2, .fp-sec--dark h3 { color: var(--white); }
.fp-sec--dark .fp-lede, .fp-sec--dark .fp-prose p { color: var(--fg-on-dark-muted); }
.fp-sec--dark .fp-prose strong { color: var(--white); }
/* the underline takes the link's own colour: the base rule's grey line disappears on navy */
.fp-sec--dark .fp-prose a { color: var(--accent-ice); border-bottom-color: currentColor; }
.fp-sec--dark .fp-prose a:hover { color: var(--white); border-bottom-color: currentColor; }

.fp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.fp-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ============ HERO ============
   First paint, in order: the headline's two halves rise out of their own
   line, the photograph is uncovered from the top, then the answer and the
   button arrive. All of it is CSS, so it plays with the page script absent. */
.fp-hero { padding: clamp(36px, 5vw, 76px) 0 clamp(40px, 5vw, 64px); }
.fp-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.3rem, 4.3vw, 3.6rem); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 clamp(24px, 3vw, 44px);
}
.fp-hero h1 em { color: var(--accent-blue); }
/* each half is a window its words rise into; the padding keeps descenders inside it */
.fp-hero h1 > span { overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.fp-hero h1 > span > span { display: inline-block; animation: fp-rise 1s var(--fp-ease) both; }
.fp-hero h1 > .h-tail > span { animation-delay: 110ms; }
@keyframes fp-rise { from { transform: translateY(108%); } to { transform: none; } }

.fp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4.5vw, 72px); align-items: stretch; }
.fp-hero__lede { font-size: clamp(1.1rem, 1.4vw, 1.28rem); line-height: 1.6; color: var(--ink-soft); margin: 0; animation: fp-in 900ms var(--fp-ease) 320ms both; }
.fp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: clamp(24px, 3vw, 36px) 0 0; animation: fp-in 900ms var(--fp-ease) 440ms both; }
@keyframes fp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.fp-back {
  display: inline-block; font-size: 15px; font-weight: 500; color: var(--ink-muted);
  padding: 12px 0; /* a 44px target for a text link */
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size 360ms var(--fp-ease), color 200ms;
}
.fp-back::before { content: "← "; content: "← " / ""; }
.fp-back:hover, .fp-back:focus-visible { color: var(--accent-blue); background-size: 100% 1px; }

.fp-hero__photo { margin: 0; border-radius: 6px; overflow: hidden; background: var(--accent-wash); min-height: 320px; position: relative; animation: fp-unveil 1.2s var(--fp-ease) 160ms both; }
.fp-hero__photo img[width][height] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 55%; }
@keyframes fp-unveil { from { clip-path: inset(0 0 100% 0 round 6px); } to { clip-path: inset(0 0 0 0 round 6px); } }

/* The two facts: each one is a way into the part that explains it. */
.fp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.fp-fact {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 20px 44px 22px 22px; border: 1px solid var(--border); border-radius: 6px;
  color: var(--ink); background: var(--white);
  transition: border-color 220ms, box-shadow 360ms var(--fp-ease), background-color 160ms;
}
.fp-fact::after {
  content: "↓"; content: "↓" / ""; position: absolute; top: 20px; right: 20px;
  color: var(--accent-blue); opacity: .5; transition: transform 320ms var(--fp-ease), opacity 220ms;
}
/* no lift: a tile that moves on hover slides out from under a cursor resting on its edge and flickers */
.fp-fact:hover, .fp-fact:focus-visible { border-color: var(--accent-blue); box-shadow: 0 16px 34px -20px rgba(11, 29, 58, .35); color: var(--ink); }
.fp-fact:hover::after, .fp-fact:focus-visible::after { opacity: 1; transform: translateY(3px); }
/* the press is answered by a tint, never a move: nothing shifts under a finger */
.fp-fact:active { background: var(--accent-wash); }
.fp-fact__n { font-family: var(--font-display); font-size: clamp(1.75rem, 2.3vw, 2.15rem); line-height: 1.05; font-weight: 300; }
.fp-fact__n em { color: var(--accent-blue); }
.fp-fact__text { font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }

/* Contents: the page's own headings, as links. */
.fp-toc { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.fp-toc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; }
.fp-toc.fp-pre::before { transform: scaleX(0); }
.fp-toc.fp-pre.is-in::before { animation: fp-rule 1.1s var(--fp-ease) 120ms both; }
@keyframes fp-rule { from { transform: scaleX(0); } to { transform: none; } }
.fp-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4.5vw, 72px); }
.fp-toc a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 15px 0; min-height: 44px; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.45vw, 1.35rem); line-height: 1.25;
  color: var(--ink);
  transition: color 220ms, padding 320ms var(--fp-ease), border-color 220ms;
}
.fp-toc a::after {
  content: "↓"; content: "↓" / ""; flex: none; font-family: var(--font-body); font-size: 15px; color: var(--accent-blue);
  opacity: .45; transform: translateY(-3px); transition: transform 320ms var(--fp-ease), opacity 220ms;
}
.fp main .fp-toc a:hover, .fp main .fp-toc a:focus-visible { color: var(--accent-blue); padding-left: 6px; border-color: var(--accent-blue); }
.fp-toc a:hover::after, .fp-toc a:focus-visible::after { opacity: 1; transform: none; }

/* ============ THE BAR THAT FOLLOWS THE READER ============ */
.fp-bar {
  position: fixed; left: 0; right: 0; top: var(--fp-nav-h); z-index: 49;
  height: var(--fp-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(--fp-ease), visibility 0s 360ms;
}
.fp-bar[hidden] { display: none; }
.fp-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--fp-ease); }
body.nav-open .fp-bar { opacity: 0; visibility: hidden; }
.fp-bar__track {
  /* each link carries 8px of side padding so its focus ring clears the text; the track gives it back */
  max-width: var(--fp-max); margin: 0 auto; padding: 0 calc(var(--fp-gut) - 8px);
  height: 100%; display: flex; align-items: stretch; gap: clamp(2px, 2.4vw - 16px, 18px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.fp-bar__track::-webkit-scrollbar { display: none; }
.fp-bar__track a {
  position: relative; flex: none; display: flex; align-items: center; padding: 0 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.fp-bar__track a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--fp-ease);
}
.fp-bar__track a:hover { color: var(--ink); }
.fp-bar__track a:hover::after { transform: scaleX(.35); }
/* the track clips overflow, so the ring sits inside the link */
.fp-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.fp-bar__track a[aria-current="location"] { color: var(--ink); }
.fp-bar__track a[aria-current="location"]::after { transform: none; }

/* ============ CANDIDACY: the fit scale ============ */
.fp-fit { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.fp-fit__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--border); }
.fp-fit__mark { width: 56px; height: 56px; overflow: visible; }
.fp-fit__mark .ring { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; }
.fp-fit__mark .fill { fill: var(--accent-blue); }
.fp-fit__mark .half { fill: var(--accent-ice); }
.fp-fit__mark .glyph { fill: none; stroke: var(--accent-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fp-fit__row--strong .glyph { stroke: var(--white); }
.fp-fit__row--also .glyph { stroke: var(--ink); }
.fp-fit__row--not .ring { stroke: var(--ink-muted); stroke-dasharray: 3 4; }
.fp-fit__row--not .glyph { stroke: var(--ink-muted); }
.fp-fit h3 { font-size: clamp(1.45rem, 1.9vw, 1.7rem); line-height: 1.15; margin: 2px 0 8px; }
.fp-fit__row--not h3 { color: var(--ink-muted); }
.fp-fit p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); }
.fp-fit p.fp-fit__what { font-size: 16.5px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }

/* ============ INDICATIONS: the foot, and what we evaluate where ============ */
.fp-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.fp-map__figure {
  position: sticky; top: calc(var(--fp-nav-h) + var(--fp-bar-h) + 32px);
  background: var(--white); border-radius: 6px; padding: clamp(20px, 3vw, 40px);
}
.fp-map__art { position: relative; }
.fp-foot { display: block; width: 100%; height: auto; overflow: visible; }
.fp-foot__skin { fill: var(--accent-wash); stroke: var(--ink-soft); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fp-foot__bone { fill: none; stroke: var(--accent-ice); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 6; }
/* one pass of light across the foot, the way a film is read, when the drawing first holds the screen */
.fp-foot__scan { opacity: 0; }
.fp-map__figure.is-live .fp-foot__scan { animation: fp-scan 2.2s cubic-bezier(.45, 0, .2, 1) 300ms 1 both; }
@keyframes fp-scan { 0% { transform: translateX(0); opacity: 0; } 12%, 85% { opacity: 1; } 100% { transform: translateX(500px); opacity: 0; } }

.fp-spot {
  --s: 44px;
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-items: center; font-family: inherit;
}
.fp-spot span {
  position: relative; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-blue); box-shadow: 0 0 0 5px rgba(45, 110, 177, .18);
  transition: transform 320ms var(--fp-ease), box-shadow 320ms var(--fp-ease), background 220ms;
}
.fp-spot span::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--accent-blue); opacity: 0;
  animation: fp-ping 2.6s var(--fp-ease) 1 paused; /* one hint each, over inside five seconds */
}
.fp-map__figure.is-live .fp-spot span::after { animation-play-state: running; }
.fp-spot[data-spot="soft"] span::after { animation-delay: .85s; }
.fp-spot[data-spot="fore"] span::after { animation-delay: 1.7s; }
@keyframes fp-ping { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
.fp-spot:hover span, .fp-spot.is-on span { transform: scale(1.25); box-shadow: 0 0 0 9px rgba(45, 110, 177, .22); }
.fp-spot.is-on span { background: var(--navy-brand); }
.fp-spot:active span { transform: scale(1.1); }
.fp-spot b {
  position: absolute; left: calc(100% - 4px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--ink-soft);
  padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, .9);
  transition: color 200ms, background 200ms;
}
.fp-spot[data-spot="soft"] b { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); }
.fp-spot[data-spot="fore"] b { top: auto; bottom: calc(100% - 2px); left: 50%; transform: translateX(-30%); }
.fp-spot:hover b, .fp-spot.is-on b { color: var(--white); background: var(--navy-brand); }
.fp-spot:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

.fp-conds { display: grid; gap: 16px; }
.fp-cond {
  position: relative; background: var(--white); border-radius: 6px;
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px) clamp(22px, 2.6vw, 32px) clamp(46px, 4.4vw, 60px);
  transition: box-shadow 360ms var(--fp-ease), transform 360ms var(--fp-ease);
}
/* the card's own copy of its spot on the foot: it fills when that spot is the lit one */
.fp-cond::before {
  content: ""; position: absolute; left: clamp(20px, 2vw, 26px); top: calc(clamp(22px, 2.6vw, 32px) + .62em);
  width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--accent-blue); background: var(--white);
  transition: background 260ms, transform 360ms var(--fp-ease), box-shadow 360ms var(--fp-ease);
}
.fp-cond:hover, .fp-cond.is-on { box-shadow: 0 18px 40px -26px rgba(11, 29, 58, .35); }
.fp-cond:hover::before, .fp-cond.is-on::before { background: var(--accent-blue); transform: scale(1.15); box-shadow: 0 0 0 5px rgba(45, 110, 177, .18); }
.fp-cond.is-flash { transform: translateX(6px); }
.fp-cond h3 { font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.15; margin-bottom: 10px; }
.fp-cond p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
/* a plain list under a hairline: what the card covers, read at a glance */
.fp-cond ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: grid; gap: 7px; }
.fp-cond li { position: relative; font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); padding-left: 16px; }
.fp-cond li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1.5px; background: var(--accent-blue); }

/* ============ PROTOCOL: the visit, drawn as a line ============ */
.fp-split--protocol { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
/* the note on cells and the hospital stays beside the steps while they are read */
.fp-prose--stick { position: sticky; top: calc(var(--fp-nav-h) + var(--fp-bar-h) + 32px); }
.fp-steps { list-style: none; margin: 0; padding: 0; position: relative; }
/* one segment per gap, icon centre to icon centre, so the line never runs past the last step */
.fp-step:not(:last-child)::before, .fp-step:not(:last-child)::after {
  content: ""; position: absolute; left: 27.5px; top: 28px; bottom: -28px; width: 1px;
  background: rgba(255, 255, 255, .22);
}
.fp-step:not(:last-child)::after { background: var(--accent-ice); transform-origin: top; transform: scaleY(0); transition: transform 900ms var(--fp-ease); }
.fp-step.is-reached:not(:last-child)::after { transform: none; }
.fp-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding: 0 0 38px; }
.fp-step:last-child { padding-bottom: 0; }
.fp-step__ic {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-brand); border: 1px solid rgba(255, 255, 255, .28);
  transition: border-color 400ms;
}
.fp-step.is-reached .fp-step__ic { border-color: var(--accent-ice); }
.fp-step__ic svg { width: 26px; height: 26px; fill: none; stroke: var(--accent-ice); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* each step's icon is drawn as the line reaches it (armed by the script; drawn whole without it) */
.fp-steps.is-armed .fp-step:not(.is-reached) .fp-step__ic svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fp-steps.is-armed .fp-step.is-reached .fp-step__ic svg > * { stroke-dasharray: 1; animation: fp-draw 1.1s var(--fp-ease) 120ms both; }
@keyframes fp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.fp-step h3 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.2; margin: 12px 0 8px; }
.fp-step p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--fg-on-dark-muted); }

/* ============ TIMELINE: one axis, four stops ============ */
/* Footsteps over the axis: they fill in step with the line beneath them, a
   longer walk the further along the months the reader is. */
/* never shorter than 48px: on a narrower column the steps keep their size and walk off its edge */
.fp-walk { display: block; width: 100%; height: auto; min-height: 48px; margin: 0 0 18px; overflow: hidden; }
.fp-walk__p { fill: var(--accent-blue); opacity: .85; transition: opacity 500ms ease; }
.fp-walk.is-armed .fp-walk__p:not(.is-on) { opacity: .14; }
.fp-line {
  list-style: none; margin: 0 0 clamp(48px, 6vw, 80px); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px);
  position: relative;
}
.fp-line::before, .fp-line::after {
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--border);
}
.fp-line::after { background: var(--accent-blue); transform-origin: left; transform: scaleX(var(--fp-prog, 1)); }
.fp-line__pt { position: relative; padding-top: 42px; }
.fp-line__node {
  position: absolute; z-index: 1; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--accent-blue);
  transition: background 300ms;
}
.fp-line__pt.is-reached .fp-line__node { background: var(--accent-wash); }
.fp-line__pt--peak .fp-line__node { background: var(--accent-blue) !important; box-shadow: 0 0 0 6px rgba(45, 110, 177, .16); }
/* the peak says so once, as the line arrives at it */
.fp-line__pt--peak .fp-line__node::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent-blue); opacity: 0; }
.fp-line.is-armed .fp-line__pt--peak.is-reached .fp-line__node::after { animation: fp-peak 1.5s var(--fp-ease) 200ms 1 both; }
@keyframes fp-peak { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
.fp-line__when { display: block; font-size: 14px; font-weight: 500; color: var(--accent-blue); margin-bottom: 6px; font-variant-numeric: lining-nums tabular-nums; }
.fp-line h3 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.15; margin-bottom: 10px; }
.fp-line p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-muted); }

.fp-limit { border-left: 3px solid var(--accent-blue); padding: 6px 0 6px clamp(20px, 2.4vw, 32px); }
.fp-limit h3 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.15; margin-bottom: 10px; }
.fp-limit p { margin: 0; line-height: 1.7; color: var(--ink-soft); }

/* "Read more": a fold only on a phone, where the page is one long column.
   On a wider screen the handle is gone and the text is simply there. */
.fp-more > summary { display: none; }

/* ============ QUESTIONS ============ */
.fp-faq__list { border-top: 1px solid var(--border-strong); }
.fp-faq details { border-bottom: 1px solid var(--border-strong); }
.fp-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; min-height: 44px;
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.25; color: var(--ink);
  transition: color 200ms;
}
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary:hover { color: var(--accent-blue); }
.fp-faq summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: 4px; }
.fp-faq summary i {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-strong); transition: background 240ms, border-color 240ms, transform 420ms var(--fp-ease);
}
.fp-faq summary i::before, .fp-faq summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px;
  background: var(--ink); transition: transform 420ms var(--fp-ease), background 240ms;
}
.fp-faq summary i::after { transform: rotate(90deg); }
.fp-faq summary:hover i { border-color: var(--accent-blue); }
.fp-faq details[open] summary i { background: var(--accent-blue); border-color: var(--accent-blue); transform: rotate(180deg); }
.fp-faq details[open] summary i::before, .fp-faq details[open] summary i::after { background: var(--white); }
.fp-faq details[open] summary i::after { transform: rotate(0deg); }
.fp-faq__a { padding: 0 60px 26px 0; }
.fp-faq__a p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
/* the answer arrives a beat behind the row opening, so the eye sees which row it belongs to */
.fp-faq details[open] .fp-faq__a p { animation: fp-answer 520ms var(--fp-ease) 60ms both; }
@keyframes fp-answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@supports (interpolate-size: allow-keywords) {
  .fp-faq { interpolate-size: allow-keywords; }
  .fp-faq details::details-content { height: 0; overflow: clip; transition: height 420ms var(--fp-ease), content-visibility 420ms allow-discrete; }
  .fp-faq details[open]::details-content { height: auto; }
}

/* ============ RELATED ============ */
.fp-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 32px); }
.fp main .fp-related__head h2 { margin-bottom: 0; }
.fp-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.fp-rel { display: flex; flex-direction: column; color: var(--ink); border-radius: 6px; }
.fp-rel:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 6px; }
.fp-rel__ph { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--accent-wash); margin-bottom: 18px; }
.fp-rel__ph img[width][height] { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--fp-ease); }
.fp-rel__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.9vw, 1.65rem); line-height: 1.2; margin-bottom: 6px; transition: color 200ms; }
.fp-rel__title::after { content: " →"; content: " →" / ""; display: inline-block; color: var(--accent-blue); font-family: var(--font-body); font-size: .72em; margin-left: .35em; transition: transform 360ms var(--fp-ease); }
.fp-rel__text { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.fp-rel:hover { color: var(--ink); }
.fp-rel:hover .fp-rel__title::after, .fp-rel:focus-visible .fp-rel__title::after { transform: translateX(4px); }
.fp-rel:hover .fp-rel__ph img, .fp-rel:focus-visible .fp-rel__ph img { transform: scale(1.045); }
.fp-rel:hover .fp-rel__title, .fp-rel:focus-visible .fp-rel__title { color: var(--accent-blue); }
.fp-rel:active .fp-rel__ph { opacity: .9; }

/* ============ CLOSE ============ */
.fp-close { background: var(--navy-brand); color: var(--white); padding: clamp(72px, 10vw, 136px) var(--fp-gut); text-align: center; }
.fp-close__inner { max-width: 760px; margin: 0 auto; }
.fp main .fp-close h2 { color: var(--white); font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.fp main .fp-close h2 em { color: var(--accent-ice); }
.fp-close p { color: rgba(255, 255, 255, .78); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.65; margin: 0 0 32px; }

/* ============ ARRIVAL ============
   A jump from the contents lands on the heading, which draws a short rule
   under itself once: you are here. */
.fp main h2:focus { outline: none; }
.fp main h2.is-landed::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 64px; height: 2px;
  background: var(--accent-blue); transform-origin: left;
  animation: fp-landed 1.6s var(--fp-ease) both;
}
.fp main .fp-sec--dark h2.is-landed::after { background: var(--accent-ice); }
@keyframes fp-landed { 0% { transform: scaleX(0); opacity: 1; } 35% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ============ REVEALS ============
   Only elements below the fold at load are ever hidden (foot-pain.js), so
   nothing in the first screen blanks and replays, and no JS means no hiding.
   The way in differs by what the part is: headings and cards rise, prose
   only clears, the verdicts and the limit come in from the side they sit on. */
.fp-pre { opacity: 0; transform: translate(var(--fp-x, 0), var(--fp-y, 18px)); }
.fp-pre[data-r="fade"] { --fp-y: 0px; }
.fp-pre[data-r="right"] { --fp-x: 28px; --fp-y: 0px; }
.fp-pre.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--fp-ease), transform 900ms var(--fp-ease); transition-delay: var(--fp-d, 0ms); }
.fp-fit__row.fp-pre .ring, .fp-fit__row.fp-pre .glyph { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fp-fit__row.fp-pre .fill, .fp-fit__row.fp-pre .half { transform: scale(0); transform-origin: 28px 28px; }
.fp-fit__row.fp-pre.is-in .ring, .fp-fit__row.fp-pre.is-in .glyph { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--fp-ease) 200ms; }
.fp-fit__row--not.fp-pre.is-in .ring { stroke-dasharray: 3 4; }
.fp-fit__row.fp-pre.is-in .fill, .fp-fit__row.fp-pre.is-in .half { animation: fp-pop 700ms var(--fp-ease) 480ms both; }
@keyframes fp-pop { 0% { transform: scale(0); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
.fp-map__figure.fp-pre .fp-foot__skin { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.fp-map__figure.fp-pre.is-in .fp-foot__skin { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 1.6s var(--fp-ease) 150ms, fill-opacity 900ms ease 1s; }
.fp-map__figure.fp-pre .fp-spot { opacity: 0; transform: scale(.4); }
.fp-map__figure.fp-pre.is-in .fp-spot { opacity: 1; transform: none; transition: opacity 400ms, transform 600ms var(--fp-ease); }
.fp-map__figure.fp-pre.is-in .fp-spot[data-spot="ankle"] { transition-delay: 1.1s; }
.fp-map__figure.fp-pre.is-in .fp-spot[data-spot="soft"] { transition-delay: 1.25s; }
.fp-map__figure.fp-pre.is-in .fp-spot[data-spot="fore"] { transition-delay: 1.4s; }
/* a related photograph is uncovered from its top edge, like the hero's */
.fp-rel.fp-pre .fp-rel__ph { clip-path: inset(0 0 100% 0 round 6px); }
.fp-rel.fp-pre.is-in .fp-rel__ph { clip-path: inset(0 0 0 0 round 6px); transition: clip-path 1.1s var(--fp-ease); transition-delay: var(--fp-d, 0ms); }

/* colors_and_type.css already cuts every transition, animation and smooth
   scroll here; this is what "nothing moves" has to look like on this page.
   .fp-pre is never added under reduced motion, and is listed for a setting
   switched on after the page loaded. */
@media (prefers-reduced-motion: reduce) {
  .fp-pre { opacity: 1 !important; transform: none !important; }
  .fp-pre .fp-rel__ph { clip-path: none !important; }
  .fp-spot span::after, .fp-foot__scan, .fp-line__node::after { animation: none !important; }
  .fp-faq details::details-content { transition: none !important; }
  .fp-step::after, .fp-line::after, .fp-line__pt::after, .fp-toc::before { transform: none !important; }
  .fp-steps .fp-step__ic svg > * { stroke-dashoffset: 0 !important; animation: none !important; }
  .fp-walk .fp-walk__p { opacity: .85 !important; }
}

/* ============ NARROWER ============ */
@media (max-width: 900px) {
  .fp-hero__grid, .fp-split, .fp-map { grid-template-columns: minmax(0, 1fr); }
  .fp-hero__photo { order: -1; min-height: 0; aspect-ratio: 3 / 2; width: 100%; align-self: start; }
  .fp-map__figure, .fp-prose--stick { position: relative; top: auto; }
  /* one column: the card spans it and the foot sits in its middle, no wider than it is beside the cards */
  .fp-map__art { max-width: 520px; margin: 0 auto; }
  .fp-toc ol { grid-template-columns: minmax(0, 1fr); }
  .fp-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* the axis runs down the page here, so the footsteps keep to a short stretch above it */
  .fp-walk { height: 48px; margin-bottom: 26px; }
  .fp-line::before, .fp-line::after { display: none; }
  .fp-line__pt:not(:last-child)::before, .fp-line__pt:not(:last-child)::after {
    content: ""; position: absolute; left: 11px; top: 12px; bottom: -12px; width: 2px; background: var(--border);
  }
  .fp-line__pt:not(:last-child)::after { background: var(--accent-blue); transform-origin: top; transform: scaleY(0); transition: transform 900ms var(--fp-ease); }
  .fp-line__pt.is-reached:not(:last-child)::after { transform: none; }
  .fp-line__pt { padding: 0 0 32px 48px; }
  .fp-line__pt:last-child { padding-bottom: 0; }
  .fp-related { grid-template-columns: minmax(0, 1fr); }
  .fp-rel { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .fp-rel__ph { grid-row: span 3; aspect-ratio: 1; margin-bottom: 0; }

  /* the limit is the part nobody should miss: it goes above the fold's handle */
  .fp-split--even > .fp-limit { order: -1; }
  .fp-more > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    min-height: 44px; font-size: 15px; font-weight: 500; color: var(--accent-blue);
    transition: color 200ms;
  }
  .fp-more > summary::-webkit-details-marker { display: none; }
  .fp-more > summary:hover { color: var(--accent-blue-hover); }
  .fp-more > summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: 4px; }
  .fp-more > summary i { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 360ms var(--fp-ease); }
  .fp-more[open] > summary i { transform: translateY(2px) rotate(225deg); }
  .fp-more__less, .fp-more[open] .fp-more__more { display: none; }
  .fp-more[open] .fp-more__less { display: inline; }
  .fp-more[open] > summary { margin-bottom: 8px; }
}
@media (max-width: 720px) {
  /* the bar scrolls sideways here: its ends fade, so a cut-off link reads as more to come */
  .fp-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);
    scroll-padding-inline: 28px;
  }
}
@media (max-width: 600px) {
  .fp-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fp-fit__row, .fp-step { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .fp-fit__mark { width: 48px; height: 48px; }
  .fp-step__ic { width: 48px; height: 48px; }
  .fp-step:not(:last-child)::before, .fp-step:not(:last-child)::after { left: 23.5px; top: 24px; bottom: -24px; }
  .fp-step h3 { margin-top: 8px; }
  .fp-rel { grid-template-columns: 96px minmax(0, 1fr); }
  .fp-hero__actions .btn { width: 100%; }
  .fp-faq__a { padding-right: 0; }
  .fp-related__head { display: block; }
}

@media print {
  .fp-bar, .fp-spot span::after, .fp-foot__scan, .fp-more > summary, .fp-faq summary i, .fp-fact::after, .fp-toc a::after { display: none !important; }
  .fp main *, .fp main *::before, .fp main *::after { animation: none !important; transition: none !important; }
  .fp-pre, .fp-hero__lede, .fp-hero__actions { opacity: 1 !important; transform: none !important; }
  .fp-hero h1 > span > span { transform: none !important; }
  .fp-hero__photo, .fp-pre .fp-rel__ph { clip-path: none !important; }
  .fp-map__figure, .fp-prose--stick { position: static; }
  .fp-step::after, .fp-line::after, .fp-line__pt::after, .fp-toc::before { transform: none !important; }
  .fp-pre .fp-foot__skin, .fp-pre .ring, .fp-pre .glyph, .fp-steps .fp-step__ic svg > * { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
  .fp-pre .fp-spot, .fp-pre .fill, .fp-pre .half { opacity: 1 !important; transform: none !important; }
  /* the lit spot's white label has no navy behind it on paper */
  .fp-spot b { color: var(--ink) !important; background: none !important; }
  .fp-walk .fp-walk__p { opacity: .85 !important; }
  /* backgrounds do not print, so the navy parts' white words go dark */
  .fp-sec--dark, .fp-sec--dark h2, .fp-sec--dark h3, .fp-sec--dark .fp-lede, .fp-sec--dark p, .fp-sec--dark .fp-prose strong, .fp-sec--dark .fp-prose a,
  .fp-close, .fp main .fp-close h2, .fp-close p { color: var(--ink) !important; background: none !important; }
  .fp main .fp-close h2 em { color: var(--accent-blue) !important; }
  /* a filled button prints as its outline, with words that can be read */
  .fp main .btn { color: var(--ink) !important; background: none !important; border: 1px solid var(--ink) !important; box-shadow: none !important; }
  .fp-step__ic { background: none !important; border-color: var(--ink) !important; }
  .fp-step__ic svg { stroke: var(--ink) !important; }
  /* one dark line between the circles (which no longer have a disc to hide it behind), not the pale fill over it */
  .fp-step:not(:last-child)::after { display: none !important; }
  .fp-step:not(:last-child)::before { background: var(--ink) !important; top: 56px; bottom: 0; }
  @media (max-width: 600px) { .fp-step:not(:last-child)::before { top: 48px; } }
  /* answers opened for the page are printed whole, not caught at the start of their opening */
  .fp-faq details::details-content { transition: none !important; height: auto !important; }
}