/* Warm paper, serif headlines, and a muted San Francisco basemap. */
* {
  box-sizing: border-box;
}

html {
  background: #f3eee2;
}

body {
  margin: 0;
}

#sf-clipping-loop {
  color:#292923;
  font-family:Georgia,'Times New Roman',serif;
}

#sf-clipping-loop .opening {
  position:relative;
  isolation:isolate;
  height:100svh;
  min-height:600px;
  overflow:hidden;
  background:#f3eee2;
}

#sf-clipping-loop .map {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  background:#e2e6dd;
  opacity:.8;
  filter:saturate(.62) contrast(.9) sepia(.05);
}

#sf-clipping-loop .veil {
  position:absolute;
  inset:0;
  z-index:-2;
  background:radial-gradient(ellipse at center,#f3eee2d1 0%,#f3eee28f 58%,#f3eee25c 100%);
}

#sf-clipping-loop .opening::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
  opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23736a56' filter='url(%23n)' opacity='.35' d='M0 0h150v150H0z'/%3E%3C/svg%3E");
}

#sf-clipping-loop .deck {
  position:absolute;
  inset:0;
}

#sf-clipping-loop .clipping {
  position:absolute;
  left:50%;
  top:50%;
  width:min(440px,calc(100% - 56px));
  height:310px;
  padding:22px 24px 46px;
  box-sizing:border-box;
  text-align:left;
  border:1px solid #b5a88f;
  border-radius:0;
  background:#fcf8ed;
  color:#292923;
  box-shadow:2px 5px 0 #48452d12,0 12px 30px #463e2820;
  font-family:Georgia,serif;
  transform-origin:50% 65%;
  transition:transform 480ms cubic-bezier(.2,.75,.25,1),opacity 350ms;
}

#sf-clipping-loop .clipping:focus-visible {
  outline:3px solid #805139;
  outline-offset:6px;
}

#sf-clipping-loop .publication {
  display:block;
  font:700 13px/1.3 Georgia,serif;
  text-transform:uppercase;
  letter-spacing:1px;
  border-bottom:3px double #8d826e;
  padding-bottom:11px;
  margin-bottom:16px;
}

#sf-clipping-loop .headline {
  display:block;
  font:normal 30px/1.08 Georgia,serif;
  letter-spacing:-.7px;
}

#sf-clipping-loop .clipping.long .headline {
  font-size:25px;
}

#sf-clipping-loop .byline {
  display:block;
  margin-top:12px;
  font:italic 15px/1.35 Georgia,serif;
  color:#5b5346;
}

#sf-clipping-loop .click-me {
  position:absolute;
  bottom:16px;
  font:11px/1.5 'Courier New',monospace;
  color:#6d6353;
  letter-spacing:0;
}

#sf-clipping-loop .click-me {
  right:24px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

#sf-clipping-loop .scroll-cue {
  position:absolute;
  left:50%;
  bottom:28px;
  z-index:11;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:0;
  background:none;
  font:11px/1.5 'Courier New',monospace;
  color:#6d6353;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  opacity:0;
  transform:translateX(-50%);
  transition:opacity 700ms ease;
}

#sf-clipping-loop .scroll-cue[hidden] {
  display:none;
}

#sf-clipping-loop .scroll-cue.is-visible {
  opacity:1;
  animation:scroll-cue-bob 2.4s ease-in-out infinite;
}

#sf-clipping-loop .scroll-cue svg {
  width:20px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
}

#sf-clipping-loop .scroll-cue:hover {
  color:#292923;
}

#sf-clipping-loop .scroll-cue:focus-visible {
  outline:3px solid #805139;
  outline-offset:4px;
}

@keyframes scroll-cue-bob {
  0%, 100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(6px); }
}

/* One credit for the shared map, fixed to the viewport while the map shows. */
#sf-clipping-loop .credit {
  position:fixed;
  right:12px;
  bottom:9px;
  z-index:20;
  margin:0;
  padding:1px 3px;
  text-align:right;
  font:9px/1.4 'Courier New',monospace;
  color:#716958;
  background:#efeadfcc;
  border-radius:2px;
  transition:opacity 300ms ease,visibility 0s;
}

/* References is the one section without the map. */
#sf-clipping-loop .credit.is-hidden {
  opacity:0;
  visibility:hidden;
  transition:opacity 300ms ease,visibility 0s 300ms;
}

#sf-clipping-loop .credit a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}

#sf-clipping-loop .announcement {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

@media(max-width:520px) {
  #sf-clipping-loop .opening {
    height:100svh;
    min-height:620px
  }

  #sf-clipping-loop .clipping {
    width:calc(100% - 42px);
    height:340px;
    padding:21px 21px 46px;
    top:45%
  }

  #sf-clipping-loop .headline {
    font-size:28px;
    letter-spacing:-.6px
  }

  #sf-clipping-loop .clipping.long .headline {
    font-size:24px
  }

  #sf-clipping-loop .publication {
    font-size:11px;
    margin-bottom:18px
  }

  #sf-clipping-loop .click-me {
    font-size:10px
  }

  #sf-clipping-loop .click-me {
    right:21px
  }

  #sf-clipping-loop .credit {
    right:9px;
    bottom:7px;
    font-size:8px
  }

}

@media(max-width:350px) {
  #sf-clipping-loop .clipping {
    width:calc(100% - 32px);
    height:360px;
    padding-inline:18px
  }

  #sf-clipping-loop .headline {
    font-size:27px
  }

  #sf-clipping-loop .clipping.long .headline {
    font-size:23px
  }

  #sf-clipping-loop .click-me {
    right:18px
  }

}

@media(prefers-reduced-motion:reduce) {
  #sf-clipping-loop .clipping {
    transition:none
  }

  #sf-clipping-loop .scroll-cue.is-visible {
    animation:none;
  }

}

/* The essay shares one fixed map; each section scrolls or pins over it. */
#sf-clipping-loop {
  position:relative;
  isolation:isolate;
  --paper:#f8f3e8;
  --ink:#292923;
  --muted:#655f53;
  --rule:#b5a88f;
  --rent:#a75035;
  --stock:#39716d;
  --map-rest:.45;
}

#sf-clipping-loop [hidden] {
  display:none;
}

#sf-clipping-loop .shared-map {
  position:fixed;
  inset:0 0 auto;
  z-index:0;
  width:100%;
  height:124svh;
  overflow:hidden;
  background:#e2e6dd;
  /* Continues the map's backing below the box so no edge shows as it rises. */
  box-shadow:0 100svh 0 #e2e6dd;
  /* Softens from full strength to --map-rest as the Marina stage releases. */
  opacity:calc(1 - var(--map-fade,0) * (1 - var(--map-rest)));
  transform:translateY(calc(var(--map-travel,0) * -20svh));
  pointer-events:none;
}

#sf-clipping-loop .shared-map img,
#sf-clipping-loop .shared-map .marina-route {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

#sf-clipping-loop .shared-map img {
  opacity:.82;
  filter:saturate(.58) contrast(.9) sepia(.05);
}

#sf-clipping-loop .shared-map-veil {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,#f3eee291 0%,#f3eee269 60%,#f3eee24f 100%);
}

#sf-clipping-loop .opening,
#sf-clipping-loop .map-story {
  position:relative;
  z-index:1;
  background:transparent;
}

#sf-clipping-loop .story-beat {
  position:relative;
  z-index:1;
}

/* Housing: one tall track with a pinned stage. The statement starts alone in
   the middle, snaps up, then the chart and its notes join it as one centered column. */
#sf-clipping-loop .housing-section {
  position:relative;
  height:440svh;
}

#sf-clipping-loop .housing-stage {
  --crisis-shift:0px;
  --crisis-grow:.4;
  position:sticky;
  top:0;
  height:100svh;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

#sf-clipping-loop .crisis-pin {
  flex:none;
  width:min(100%,820px);
  pointer-events:none;
}

#sf-clipping-loop .crisis-statement {
  margin:0;
  color:var(--ink);
  font:normal clamp(26px,3.2vw,38px)/1.08 Georgia,serif;
  letter-spacing:-.035em;
  text-align:center;
  text-wrap:balance;
  transform:translateY(var(--crisis-shift)) scale(calc(1 + var(--crisis-grow)));
  transition:transform 450ms cubic-bezier(.2,.75,.25,1);
}

#sf-clipping-loop .housing-stage.is-settled .crisis-statement {
  transform:none;
}

#sf-clipping-loop .chart-beat {
  width:100%;
  display:flex;
  justify-content:center;
}

#sf-clipping-loop .chart-visual {
  width:min(760px,100%);
  opacity:0;
  transform:translateY(16px);
  transition:opacity 180ms ease,transform 180ms ease;
}

#sf-clipping-loop .chart-visual.is-on {
  opacity:1;
  transform:none;
}

/* The paper card frames only the chart and its sources; the notes sit below it. */
#sf-clipping-loop .chart-card {
  padding:20px 26px 14px;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:0 18px 48px #4c44302b;
}

#sf-clipping-loop .housing-chart {
  position:relative;
  margin:0;
}

#sf-clipping-loop .housing-chart svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

#sf-clipping-loop .chart-grid line {
  stroke:#ddd4c3;
  stroke-width:1;
}

#sf-clipping-loop .chart-axis text {
  fill:#292923b3;
  font:12px 'Courier New',monospace;
}

#sf-clipping-loop .chart-axis .zero-line {
  stroke:#8b806d;
  stroke-width:1;
}

#sf-clipping-loop .series-line {
  fill:none;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 900ms cubic-bezier(.2,.75,.25,1);
}

#sf-clipping-loop .series-rent {
  stroke:var(--rent);
}

#sf-clipping-loop .series-stock {
  stroke:var(--stock);
}

#sf-clipping-loop .housing-chart.show-rent .rent-group .series-line,
#sf-clipping-loop .housing-chart.show-stock .stock-group .series-line {
  stroke-dashoffset:0;
}

#sf-clipping-loop .chart-hit {
  fill:transparent;
  stroke:transparent;
  cursor:pointer;
  pointer-events:none;
}

#sf-clipping-loop .housing-chart.show-rent .rent-group .chart-hit,
#sf-clipping-loop .housing-chart.show-stock .stock-group .chart-hit {
  pointer-events:all;
}

#sf-clipping-loop .chart-hit:focus {
  outline:none;
  stroke:var(--ink);
  stroke-width:1.5;
}

#sf-clipping-loop .chart-tooltip {
  position:absolute;
  min-width:160px;
  padding:9px 11px;
  color:var(--paper);
  background:var(--ink);
  font:12px/1.4 'Courier New',monospace;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,calc(-100% - 12px));
  transition:opacity 120ms ease;
}

#sf-clipping-loop .chart-tooltip.visible {
  opacity:1;
}

#sf-clipping-loop .chart-sources {
  margin:4px 0 0;
  text-align:right;
  font:9px/1.45 'Courier New',monospace;
  color:var(--muted);
}

#sf-clipping-loop .chart-sources a {
  color:inherit;
  text-underline-offset:2px;
}

/* Rent, then housing stock, stack under the chart and both stay visible. */
#sf-clipping-loop .metric-beats {
  display:grid;
  gap:10px;
  margin:18px 0 0;
  padding:0 4px;
}

#sf-clipping-loop .metric-beat {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 180ms ease,transform 180ms ease;
}

#sf-clipping-loop .metric-beat.active {
  opacity:1;
  transform:none;
}

#sf-clipping-loop .series-note-text {
  margin:0;
  max-width:460px;
  font:italic clamp(19px,2vw,24px)/1.25 Georgia,serif;
}

#sf-clipping-loop .rent-note .series-note-text {
  color:var(--rent);
}

#sf-clipping-loop .stock-note .series-note-text {
  color:var(--stock);
}

#sf-clipping-loop .metric-box {
  width:180px;
  margin:0;
  padding:9px 14px;
  background:#fffaf0;
  border:1px solid var(--rule);
  display:grid;
  gap:2px;
}

#sf-clipping-loop .metric-value {
  font:normal 28px/1 Georgia,serif;
  letter-spacing:-.04em;
}

#sf-clipping-loop .metric-label {
  font:italic 13px/1.3 Georgia,serif;
}

/* The question and terminology card open the Marina stage (below) as one
   centered composition, laid over the stage grid so nothing in it moves when
   the map rises. Scrolling crossfades it up and out as the picture arrives. */
#sf-clipping-loop .question-panel {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
  padding:0 24px;
  text-align:center;
  opacity:calc(1 - var(--question-out,0));
  transform:translateY(calc(var(--question-out,0) * -60px));
  pointer-events:none;
}

#sf-clipping-loop .building-question {
  max-width:14em;
  hyphens:none;
  margin:0;
  color:var(--ink);
  font:normal clamp(42px,4.6vw,64px)/1.02 Georgia,serif;
  letter-spacing:-.045em;
  text-wrap:balance;
}

#sf-clipping-loop .no-break {
  white-space:nowrap;
}

#sf-clipping-loop .term-card {
  width:min(100%,460px);
  text-align:left;
  padding:20px 22px;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:0 10px 28px #4c44301f;
  rotate:-1.4deg;
}

#sf-clipping-loop .term-card strong {
  color:var(--ink);
  font:700 13px/1.3 'Courier New',monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
}

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

/* Marina dot on the map and the line that draws from it to the rendering. */
#sf-clipping-loop .marina-route {
  opacity:calc(var(--dot-in,0) * (1 - var(--map-fade,0)));
  overflow:visible;
  transform:translateY(calc(-1 * var(--map-release,0px)));
}

#sf-clipping-loop .marina-route circle {
  fill:var(--rent);
}

#sf-clipping-loop .marina-pulse {
  opacity:.18;
}

#sf-clipping-loop .marina-link {
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  transform:translateY(calc(-1 * var(--map-release,0px)));
}

#sf-clipping-loop.link-visible .marina-link {
  opacity:calc(1 - var(--map-fade,0));
}

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

#sf-clipping-loop .marina-link-mask {
  fill:none;
  stroke:#fff;
  stroke-width:8;
  stroke-dasharray:1;
  stroke-dashoffset:calc(1 - var(--link-drawn,0));
}

/* Marina Safeway: a pinned stage whose parts snap in one step at a time. */
#sf-clipping-loop .marina-beat {
  position:relative;
  z-index:2;
  height:720svh;
}

#sf-clipping-loop .marina-stage {
  position:sticky;
  top:0;
  height:100svh;
  padding:var(--stage-top,120px) 24px 28px;
  display:grid;
  grid-template-columns:minmax(0,680px) minmax(220px,290px);
  grid-template-areas:
    "title ."
    "figure quotes"
    "description quotes"
    "opposition quotes";
  grid-template-rows:auto auto auto 1fr;
  justify-content:center;
  align-content:start;
  column-gap:48px;
  row-gap:12px;
}

#sf-clipping-loop .marina-step {
  opacity:0;
  transform:translateY(8px);
  transition:opacity 180ms ease,transform 180ms ease;
}

#sf-clipping-loop .marina-step.is-on {
  opacity:1;
  transform:none;
}

#sf-clipping-loop .project-name {
  grid-area:title;
  justify-self:start;
  margin:0;
  font:normal clamp(34px,3.4vw,46px)/1 Georgia,serif;
  letter-spacing:-.04em;
}

#sf-clipping-loop .project-figure {
  grid-area:figure;
  margin:0;
  opacity:var(--picture-in,0);
  transform:translateY(calc((1 - var(--picture-in,0)) * 48px));
}

#sf-clipping-loop .project-rendering {
  display:block;
  width:100%;
  max-height:calc(100svh - var(--stage-top,120px) - 250px);
  object-fit:cover;
}

#sf-clipping-loop .rendering-credit {
  margin-top:5px;
  color:var(--muted);
  font:9px/1.4 'Courier New',monospace;
}

#sf-clipping-loop .rendering-credit a {
  color:inherit;
}

#sf-clipping-loop .project-description,
#sf-clipping-loop .project-opposition {
  margin:0;
  font:normal clamp(22px,2.2vw,30px)/1.18 Georgia,serif;
  letter-spacing:-.02em;
}

#sf-clipping-loop .project-description {
  grid-area:description;
  margin-top:6px;
}

#sf-clipping-loop .project-opposition {
  grid-area:opposition;
  font-style:italic;
}

#sf-clipping-loop .project-quotes {
  grid-area:quotes;
  display:grid;
  align-content:start;
  gap:26px;
}

#sf-clipping-loop .project-quote {
  margin:0;
}

#sf-clipping-loop .project-quote p {
  margin:0;
  font:italic 17px/1.35 Georgia,serif;
}

@media(max-width:760px) {
  #sf-clipping-loop .housing-stage {
    --crisis-grow:.1;
    padding:16px 10px 16px;
    gap:12px;
  }

  #sf-clipping-loop .crisis-statement {
    font-size:clamp(20px,6.1vw,24px);
    line-height:1.12;
  }

  #sf-clipping-loop .chart-card {
    padding:14px 14px 10px;
  }

  #sf-clipping-loop .metric-beat {
    grid-template-columns:minmax(0,1fr) 132px;
    gap:12px;
  }

  #sf-clipping-loop .series-note-text {
    font-size:16px;
  }

  #sf-clipping-loop .metric-box {
    width:132px;
    padding:8px 10px;
  }

  #sf-clipping-loop .metric-value {
    font-size:24px;
  }

  #sf-clipping-loop .metric-label {
    font-size:11px;
  }

  #sf-clipping-loop .building-question {
    font-size:clamp(38px,12vw,54px);
  }

  #sf-clipping-loop .term-card {
    width:calc(100% - 20px);
  }

  #sf-clipping-loop .term-card p {
    font-size:18px;
  }

  #sf-clipping-loop .marina-stage {
    padding-inline:14px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"title" "figure" "description" "opposition" "quotes";
    grid-template-rows:none;
    row-gap:10px;
  }

  #sf-clipping-loop .project-rendering {
    max-height:28svh;
  }

  #sf-clipping-loop .project-description,
  #sf-clipping-loop .project-opposition {
    font-size:19px;
  }

  #sf-clipping-loop .project-quotes {
    gap:10px;
  }

  #sf-clipping-loop .project-quote p {
    font-size:14px;
  }
}

@media(prefers-reduced-motion:reduce) {
  #sf-clipping-loop .shared-map,
  #sf-clipping-loop .crisis-statement,
  #sf-clipping-loop .question-panel,
  #sf-clipping-loop .marina-link-mask,
  #sf-clipping-loop .chart-visual,
  #sf-clipping-loop .metric-beat,
  #sf-clipping-loop .marina-step,
  #sf-clipping-loop .marina-route,
  #sf-clipping-loop .marina-link,
  #sf-clipping-loop .chart-tooltip,
  #sf-clipping-loop .series-line {
    transition:none;
  }
}