/* Sections after the Marina stage float over the softened shared map; only References is opaque. */
#sf-clipping-loop .mech-story {
  --paper:#f8f3e8;
  --ink:#292923;
  --muted:#655f53;
  --rule:#cfc4ae;
  --new:#4f7d4a;
  --new-soft:#4f7d4a1f;
  --down:var(--stock);
  --up:var(--rent);
  position:relative;
  z-index:3;
  padding-top:50svh;
  color:var(--ink);
}

/* A paper-colored halo keeps text legible where it sits directly on the map. */
#sf-clipping-loop .mech-beat,
#sf-clipping-loop .mech-head,
#sf-clipping-loop .mech-items,
#sf-clipping-loop .mech-wip {
  text-shadow:0 0 2px #f3eee2,0 0 10px #f3eee2,0 0 18px #f3eee2;
}

#sf-clipping-loop .mech-label {
  margin:0 0 14px;
  font:700 12px/1.4 'Courier New',monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

#sf-clipping-loop .mech-cite {
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  font-size:.82em;
}

#sf-clipping-loop .mech-story a:focus-visible,
#sf-clipping-loop .mech-story button:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:3px;
}

#sf-clipping-loop .mech-reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity 600ms ease,transform 600ms cubic-bezier(.2,.75,.25,1);
}

#sf-clipping-loop .mech-reveal.is-visible {
  opacity:1;
  transform:none;
}

/* 5 · It depends: pinned beats whose steps snap in and then hold. */
#sf-clipping-loop .mech-beat {
  position:relative;
  z-index:1;
  /* Every step holds for 70svh, including the last before the stage releases. */
  height:calc(100svh + var(--beat-steps,2) * 70svh - var(--beat-offset,0) * 1svh);
}

/* The question is scrubbed in by scroll (--arrival 0 → 1) rather than snapped. */
#sf-clipping-loop .mech-question {
  opacity:var(--arrival,0);
  transform:translateY(calc((1 - var(--arrival,0)) * 70px));
}

/* Dashed connector from card 01 down through the three mechanism sections. */
#sf-clipping-loop .mech-connector {
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  overflow:visible;
  pointer-events:none;
}

#sf-clipping-loop .mech-connector-line {
  fill:none;
  stroke:var(--rent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:7 9;
}

#sf-clipping-loop .mech-connector-reveal {
  fill:none;
  stroke:#fff;
  stroke-width:10;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}

#sf-clipping-loop .mech-beat-stage {
  position:sticky;
  top:0;
  height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
}

#sf-clipping-loop .mech-beat [data-reveal] {
  opacity:0;
  transform:translateY(10px);
  transition:opacity 170ms ease-out,transform 170ms ease-out;
}

#sf-clipping-loop .mech-beat [data-reveal].is-on {
  opacity:1;
  transform:none;
}

#sf-clipping-loop .mech-question-wrap {
  position:relative;
  width:min(100% - 40px,1000px);
}

#sf-clipping-loop .mech-question {
  margin:0;
  font:normal clamp(44px,5.6vw,80px)/1.03 Georgia,serif;
  letter-spacing:-.045em;
  text-align:center;
  text-wrap:balance;
}

/* "It depends." lands on the question like a card slapped onto the page. */
#sf-clipping-loop .mech-beat .mech-slap {
  position:absolute;
  right:-1%;
  bottom:-32%;
  margin:0;
  padding:22px 34px 24px;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:0 10px 28px #4c44301f;
  font:normal clamp(40px,4.6vw,64px)/1 Georgia,serif;
  letter-spacing:-.04em;
  color:var(--ink);
  transform:rotate(-2.6deg) scale(1.18);
  transition:opacity 120ms ease-out,transform 200ms cubic-bezier(.3,1.5,.5,1);
}

#sf-clipping-loop .mech-beat .mech-slap.is-on {
  transform:rotate(-2.6deg) scale(1);
}

#sf-clipping-loop .mech-ways {
  width:min(100% - 40px,1040px);
  text-align:center;
}

#sf-clipping-loop .mech-lede {
  max-width:820px;
  margin:0 auto 48px;
  font:normal clamp(36px,4.2vw,58px)/1.08 Georgia,serif;
  letter-spacing:-.035em;
  text-wrap:balance;
}

#sf-clipping-loop .mech-ways-close > span {
  display:block;
}

#sf-clipping-loop .mech-ways-close {
  max-width:720px;
  margin:44px auto 0;
  font:clamp(21px,2.1vw,27px)/1.35 Georgia,serif;
  text-wrap:balance;
}

#sf-clipping-loop .mech-toc {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

#sf-clipping-loop .mech-toc li {
  display:grid;
}

#sf-clipping-loop .mech-toc a {
  height:100%;
  padding:22px 22px 24px;
  display:grid;
  align-content:center;
  gap:8px;
  color:inherit;
  text-decoration:none;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:0 10px 28px #4c44301f;
  transform:rotate(var(--tilt,0deg));
  transition:border-color 160ms ease,transform 160ms ease;
}

/* Each small card keeps its own slight tilt. */
#sf-clipping-loop [data-mech="local"] { --tilt:-1.2deg; }
#sf-clipping-loop [data-mech="chains"] { --tilt:.9deg; }
#sf-clipping-loop [data-mech="filtering"] { --tilt:-.6deg; }

#sf-clipping-loop .mech-toc a:hover {
  border-color:var(--ink);
  transform:rotate(var(--tilt,0deg)) translateY(-2px);
}

#sf-clipping-loop .mech-toc strong {
  font:normal 26px/1.1 Georgia,serif;
  letter-spacing:-.02em;
}

#sf-clipping-loop .mech-toc a > span:last-child {
  font:italic 16px/1.35 Georgia,serif;
  color:var(--muted);
}

/* Mechanism sections float on the map: one pinned stage each, with the title and
   description on top, the illustration card on the left and items revealed on the right. */
#sf-clipping-loop .mech-section {
  position:relative;
  z-index:1;
  width:min(100% - 40px,1040px);
  margin:24svh auto 0;
}

/* Content fades in as the line reaches it; the section box itself never moves, so the
   pinned line stays aligned with the flow segments above and below. */
#sf-clipping-loop .mech-section .mech-head,
#sf-clipping-loop .mech-section .mech-illustration,
#sf-clipping-loop .mech-section .mech-items {
  position:relative;
  z-index:1;
  opacity:var(--arrival,0);
}

/* The stretch of connector inside a pinned stage holds still with the stage. */
#sf-clipping-loop .mech-stage-line {
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  overflow:visible;
  pointer-events:none;
  transition:opacity 200ms ease;
}

#sf-clipping-loop .mech-stage-line.is-waiting {
  opacity:0;
}

#sf-clipping-loop .mech-section + .mech-wip {
  margin-top:16svh;
}

#sf-clipping-loop .mech-scrolly {
  position:relative;
}

#sf-clipping-loop .mech-stage {
  position:sticky;
  top:0;
  height:100svh;
  padding:7svh 0;
  display:grid;
  /* A slightly narrower illustration column keeps the connector clear of the centered title. */
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  grid-template-rows:auto minmax(0,1fr);
  align-content:center;
  column-gap:72px;
  row-gap:40px;
}

/* Spacers that drive the item reveals: a lead-in with the title alone, one per item, then a hold. */
#sf-clipping-loop .mech-steps {
  margin-top:-100svh;
  padding:100svh 0 40svh;
  pointer-events:none;
}

#sf-clipping-loop .mech-step {
  height:60svh;
}

#sf-clipping-loop .mech-head {
  grid-column:1 / -1;
  text-align:center;
}

#sf-clipping-loop .mech-title {
  margin:0;
  font:normal clamp(48px,5.4vw,76px)/1 Georgia,serif;
  letter-spacing:-.04em;
}

#sf-clipping-loop .mech-desc {
  margin:14px 0 0;
  font:italic 21px/1.35 Georgia,serif;
}

/* The illustration is the one paper card in each section; the connector runs behind it. */
#sf-clipping-loop .mech-illustration {
  align-self:center;
  justify-self:center;
  width:min(100%,440px);
  margin:0;
  padding:18px;
  background:var(--paper);
  /* Same outline and slight tilt as the terminology card. */
  border:1px solid var(--rule);
  box-shadow:0 10px 28px #4c44301f;
  rotate:-1deg;
}

/* Only the Local effects card keeps the tilt; the chain and filtering cards sit straight. */
#sf-clipping-loop .mech-chairs .mech-illustration,
#sf-clipping-loop .mech-filter .mech-illustration {
  rotate:none;
}

/* Wide enough that each household label fits on one or two lines. */
#sf-clipping-loop .mech-filter .mech-illustration {
  width:min(100%,720px);
  padding:22px 26px;
}

#sf-clipping-loop .mech-block-figure {
  padding:8px;
}

#sf-clipping-loop .mech-items {
  align-self:center;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:28px;
}

#sf-clipping-loop .mech-item {
  display:grid;
  gap:6px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 170ms ease-out,transform 170ms ease-out;
}

#sf-clipping-loop .mech-item.is-shown {
  opacity:1;
  transform:none;
}

#sf-clipping-loop .mech-item-value {
  font:normal clamp(34px,3.6vw,48px)/1 Georgia,serif;
  letter-spacing:-.04em;
  white-space:nowrap;
}

#sf-clipping-loop .mech-item.is-down .mech-item-value {
  color:var(--down);
}

#sf-clipping-loop .mech-item.is-up .mech-item-value {
  color:var(--up);
}

#sf-clipping-loop .mech-item-label {
  max-width:420px;
  font:italic 17px/1.4 Georgia,serif;
}

/* Sentences flow as ordinary text, not as grid rows. */
#sf-clipping-loop .mech-item-text {
  display:block;
}

#sf-clipping-loop .mech-item-text {
  max-width:440px;
  font:normal 21px/1.4 Georgia,serif;
}

#sf-clipping-loop .mech-term.is-down {
  color:var(--down);
}

#sf-clipping-loop .mech-term.is-up {
  color:var(--up);
}

#sf-clipping-loop .mech-block {
  display:block;
  width:100%;
  height:auto;
}

/* Local effects: each label sits beside its number, in the same face and color. */
#sf-clipping-loop .mech-next-door .mech-item {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:14px;
  row-gap:12px;
}

#sf-clipping-loop .mech-next-door .mech-item-label {
  flex:1 1 200px;
  max-width:340px;
  font:normal 22px/1.25 Georgia,serif;
}

#sf-clipping-loop .mech-next-door .mech-item.is-down .mech-item-label { color:var(--down); }
#sf-clipping-loop .mech-next-door .mech-item.is-up .mech-item-label { color:var(--up); }

#sf-clipping-loop .mech-next-door .mech-item-label .mech-cite {
  color:var(--muted);
  font-size:15px;
}

#sf-clipping-loop .mech-term-card {
  flex-basis:100%;
  width:min(100%,400px);
  padding:14px 18px;
  color:var(--ink);
}

#sf-clipping-loop .mech-term-card p {
  margin:8px 0 0;
  font:16px/1.4 Georgia,serif;
}

#sf-clipping-loop .mech-streets line {
  stroke:#cdbfa4;
  stroke-width:14;
}

#sf-clipping-loop .mech-radius {
  fill:var(--new-soft);
  stroke:var(--new);
  stroke-width:1.5;
  stroke-dasharray:6 6;
  transition:fill 400ms ease,stroke 400ms ease;
}

#sf-clipping-loop .mech-new-building > rect:first-child {
  fill:var(--new);
}

#sf-clipping-loop .mech-window {
  fill:#f8f3e8;
}

#sf-clipping-loop .mech-home {
  fill:var(--paper);
  stroke:#8b806d;
  stroke-width:1.5;
  stroke-linejoin:round;
  transition:fill 400ms ease,stroke 400ms ease,opacity 400ms ease;
}

/* Each step tints only the homes its stat describes. */
#sf-clipping-loop .mech-next-door[data-step="0"] .mech-block .mech-home.is-near,
#sf-clipping-loop .mech-next-door[data-step="1"] .mech-block .mech-home.is-near {
  fill:#39716d33;
  stroke:var(--down);
}

#sf-clipping-loop .mech-next-door[data-step="2"] .mech-block .mech-radius {
  fill:#a7503514;
  stroke:var(--up);
}

#sf-clipping-loop .mech-next-door[data-step="2"] .mech-block .mech-home.is-near {
  fill:#a7503533;
  stroke:var(--up);
}

#sf-clipping-loop .mech-next-door[data-step="3"] .mech-block .mech-home.is-near:not(.is-cheap) {
  opacity:.35;
}

#sf-clipping-loop .mech-next-door[data-step="3"] .mech-block .mech-home.is-cheap {
  fill:#a7503566;
  stroke:var(--up);
  stroke-width:2.5;
}

#sf-clipping-loop .mech-chain-figure {
  width:min(100%,380px);
}

#sf-clipping-loop .mech-chain {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

#sf-clipping-loop .mech-arc {
  fill:none;
  stroke:#8b806d;
  stroke-width:2;
  stroke-dasharray:6 7;
  transition:opacity 300ms ease;
}

#sf-clipping-loop .mech-arrowhead {
  fill:#8b806d;
}

#sf-clipping-loop .mech-arc-reveal {
  fill:none;
  stroke:#fff;
  stroke-width:16;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 700ms cubic-bezier(.4,0,.2,1);
}

/* Links appear one per scroll step: the older home, then the arc its mover takes. */
#sf-clipping-loop .mech-chain-figure[data-links="1"] .mech-arc-1-reveal,
#sf-clipping-loop .mech-chain-figure[data-links="2"] :is(.mech-arc-1-reveal,.mech-arc-2-reveal),
#sf-clipping-loop .mech-chain-figure[data-origin="elsewhere"] .mech-arc-outside-reveal {
  stroke-dashoffset:0;
}

#sf-clipping-loop .mech-chain-figure .mech-node:not(.mech-node-0) {
  opacity:0;
}

#sf-clipping-loop .mech-chain-figure:is([data-links="1"],[data-links="2"]) .mech-node-1,
#sf-clipping-loop .mech-chain-figure[data-links="2"] .mech-node-2 {
  opacity:1;
}

/* The card itself arrives with the first step, after the title has had the screen alone. */
#sf-clipping-loop .mech-section .mech-chain-figure {
  transition:opacity 170ms ease-out;
}

#sf-clipping-loop .mech-section .mech-chain-figure:not(.is-shown) {
  opacity:0;
}

#sf-clipping-loop .mech-mover {
  fill:var(--rent);
  stroke:var(--paper);
  stroke-width:2;
  opacity:0;
  pointer-events:none;
}

#sf-clipping-loop .mech-node path {
  fill:#39716d26;
  stroke:var(--stock);
  stroke-width:2;
  stroke-linejoin:round;
}

#sf-clipping-loop .mech-node.is-new > rect:first-child {
  fill:var(--new);
}

#sf-clipping-loop .mech-node text,
#sf-clipping-loop .mech-outside text {
  fill:var(--ink);
  font:20px Georgia,serif;
}

#sf-clipping-loop .mech-node {
  transition:opacity 400ms ease;
}

#sf-clipping-loop .mech-outside circle {
  fill:none;
  stroke:var(--up);
  stroke-width:1.5;
  stroke-dasharray:3 4;
}

#sf-clipping-loop .mech-outside,
#sf-clipping-loop .mech-arc-outside {
  opacity:0;
  transition:opacity 400ms ease;
}

#sf-clipping-loop .mech-arc-outside {
  stroke:var(--up);
}

/* When the newcomer arrives from outside, only the first link happens. */
#sf-clipping-loop .mech-chain-figure[data-origin="elsewhere"] .mech-outside,
#sf-clipping-loop .mech-chain-figure[data-origin="elsewhere"] .mech-arc-outside {
  opacity:1;
}

#sf-clipping-loop .mech-chain-figure[data-origin="elsewhere"] .mech-arc-1,
#sf-clipping-loop .mech-chain-figure[data-origin="elsewhere"] .mech-arc-2 {
  opacity:0;
}

#sf-clipping-loop .mech-chain-figure[data-origin="elsewhere"] .mech-node:not(.is-new) {
  opacity:.28;
}

#sf-clipping-loop .mech-catch-text > p {
  max-width:440px;
  margin:0;
  font:normal 21px/1.4 Georgia,serif;
}

/* The catch is flagged in bold red; its explanation follows as plain text. */
#sf-clipping-loop .mech-catch-text > p.mech-catch-title {
  margin-bottom:8px;
  color:var(--up);
  font:700 24px/1.3 Georgia,serif;
}

#sf-clipping-loop .mech-catch-text .mech-term-card {
  margin-top:12px;
}

#sf-clipping-loop .mech-figure {
  color:var(--new);
  font-weight:700;
}

/* Filtering: the card sits centered under the title, and the text follows beneath it. */
#sf-clipping-loop .mech-filter .mech-stage {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;
  row-gap:28px;
}

#sf-clipping-loop .mech-filter .mech-items {
  justify-self:center;
  width:min(100%,640px);
  gap:12px;
  text-align:center;
}

#sf-clipping-loop .mech-filter .mech-item-text {
  max-width:none;
  font-size:19px;
}

#sf-clipping-loop .mech-item-text p { margin:0; }
#sf-clipping-loop .mech-item-text p + p { margin-top:12px; }

/* The chain's text column starts level with the card rather than above it. */
#sf-clipping-loop .mech-chairs .mech-items {
  align-self:start;
  padding-top:20px;
  gap:18px;
}

#sf-clipping-loop .mech-ages {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
}

#sf-clipping-loop .mech-ages li {
  position:relative;
  display:grid;
  justify-items:center;
  gap:8px;
  text-align:center;
}

/* Arrows between ages, level with the house icons (below the two-line household label). */
#sf-clipping-loop .mech-ages li + li::before {
  content:'→';
  position:absolute;
  left:-24px;
  top:74px;
  font:24px Georgia,serif;
  color:var(--muted);
}

#sf-clipping-loop .mech-ages svg {
  width:88px;
  height:81px;
  overflow:visible;
}

#sf-clipping-loop .mech-ages path {
  stroke:var(--ink);
  stroke-width:2.5;
  stroke-linejoin:round;
  transition:fill 500ms ease;
}

#sf-clipping-loop .mech-ages rect {
  fill:var(--paper);
  stroke:var(--ink);
  stroke-width:2;
}

#sf-clipping-loop .mech-ages [data-age="0"] path { fill:var(--paper); }
#sf-clipping-loop .mech-filter[data-market="normal"] [data-age="1"] path { fill:#9cc3bd; }
#sf-clipping-loop .mech-filter[data-market="normal"] [data-age="2"] path { fill:var(--stock); }
#sf-clipping-loop .mech-filter[data-market="boom"] [data-age="1"] path { fill:#dca58f; }
#sf-clipping-loop .mech-filter[data-market="boom"] [data-age="2"] path { fill:var(--rent); }

#sf-clipping-loop .mech-age-when {
  font:12px/1.4 'Courier New',monospace;
  color:var(--muted);
}

/* The household sits above its house; a fixed two-line box keeps the icons level. */
#sf-clipping-loop .mech-age-who {
  order:-1;
  min-height:2.5em;
  display:flex;
  align-items:flex-end;
  font:normal 16px/1.25 Georgia,serif;
  transition:color 300ms ease;
}

#sf-clipping-loop .mech-filter[data-market="normal"] [data-age]:not([data-age="0"]) .mech-age-who { color:var(--stock); }
#sf-clipping-loop .mech-filter[data-market="boom"] [data-age]:not([data-age="0"]) .mech-age-who { color:var(--rent); }

/* The final section pins like the mechanisms: the card holds centered on screen for a
   stretch of scroll before References arrives. */
#sf-clipping-loop .mech-wip {
  position:relative;
  z-index:1;
  height:180svh;
  margin-bottom:16svh;
}

#sf-clipping-loop .mech-wip-stage {
  position:sticky;
  top:0;
  height:100svh;
  display:grid;
  place-items:center;
}

#sf-clipping-loop .mech-wip-card {
  width:min(100% - 40px,620px);
  padding:26px 30px 28px;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:0 10px 28px #4c44301f;
}

#sf-clipping-loop .mech-wip-card p:last-child {
  margin:0;
  font:normal 20px/1.45 Georgia,serif;
}

/* References: one centered, readable column. */
/* References pin like the other sections, then the page ends with the stage in place. */
#sf-clipping-loop .sources {
  position:relative;
  z-index:1;
  height:160svh;
  background:#e9e3d4;
  border-top:1px solid var(--rule);
}

#sf-clipping-loop .sources-stage {
  position:sticky;
  top:0;
  height:100svh;
  padding:40px max(20px,calc((100% - 760px) / 2)) 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

#sf-clipping-loop .sources-title {
  margin:0 0 22px;
  font:normal clamp(32px,2.8vw,40px)/1 Georgia,serif;
  letter-spacing:-.04em;
}

#sf-clipping-loop .sources-list {
  margin:0 0 22px;
  padding-left:26px;
  font:14px/1.45 Georgia,serif;
  color:#3f3b33;
}

#sf-clipping-loop .sources-list li {
  margin-bottom:5px;
}

#sf-clipping-loop .sources-list a,
#sf-clipping-loop .sources-inspired a {
  color:inherit;
  word-break:break-word;
}

#sf-clipping-loop .sources-list a {
  font:12px/1.5 'Courier New',monospace;
  color:var(--muted);
}

#sf-clipping-loop .sources-inspired {
  margin:0;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font:italic 15px/1.5 Georgia,serif;
}

/* Basic stacking for narrow screens. */
@media(max-width:760px) {
  #sf-clipping-loop .mech-section,
  #sf-clipping-loop .mech-wip-card {
    width:calc(100% - 32px);
  }

  #sf-clipping-loop .mech-toc {
    grid-template-columns:1fr;
  }

  #sf-clipping-loop .mech-stage {
    grid-template-columns:1fr;
    row-gap:14px;
  }

  #sf-clipping-loop .mech-block {
    width:min(100%,250px);
  }

  #sf-clipping-loop .mech-ages {
    grid-template-columns:1fr;
  }

  #sf-clipping-loop .mech-ages li + li::before {
    content:'↓';
    left:50%;
    top:-26px;
  }
}

@media(prefers-reduced-motion:reduce) {
  #sf-clipping-loop .mech-reveal,
  #sf-clipping-loop .mech-beat [data-reveal],
  #sf-clipping-loop .mech-item,
  #sf-clipping-loop .mech-home,
  #sf-clipping-loop .mech-radius,
  #sf-clipping-loop .mech-arc,
  #sf-clipping-loop .mech-node,
  #sf-clipping-loop .mech-outside,
  #sf-clipping-loop .mech-ages path,
  #sf-clipping-loop .mech-toc a {
    transition:none;
  }

  #sf-clipping-loop .mech-arc-reveal {
    transition:none;
    stroke-dashoffset:0;
  }
}