/* css/pages/dfw-growth.css : "Where North Texas is growing" (js/scenes/dfw-growth.js), the All of DFW signature, and the
   markup between the model markers in dfw.html. Owned by the model agent (audit/city-pages-brief.md section 1).
   Adapted from melissa.css's .mm rules (the same pin, captions, stop index, callouts and reduced-motion list), renamed
   .dg so nothing here can touch another page's model. The scene sits on the studio grey of the white page
   (--stage-paper) and eases back into white at its foot.
   Static first (no JS, reduced motion, Pause motion): the still beside the list of stops. The controller adds .is-pin
   (T1 and T2) for the pinned story: a sticky screen, the stage full-bleed behind the copy, the model to the right of it on
   desktop and under it on phones. The page canvas (z 1) draws between the section's grey and the pin (z 2). */
.dg { position: relative; background: var(--stage-paper, var(--paper-2)); }
.dg .dg__pin { position: relative; display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(72px, 9vw, 128px) max(var(--gutter), 3vw); }
@media (min-width: 900px) { .dg .dg__pin { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.dg .dg__stage { position: relative; grid-row: 1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: transparent; }
@media (min-width: 900px) { .dg .dg__stage { grid-column: 2; } }
.dg .dg__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dg .dg__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.dg .dg__copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
@media (min-width: 900px) { .dg .dg__copy { grid-column: 1; grid-row: 1; } }
.dg .dg__h { margin: 0; font-weight: 300; font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; color: var(--ink); }
.dg .dg__h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.dg .dg__beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.dg .dg__beat { display: grid; gap: 8px; align-content: start; justify-items: start; }
.dg .dg__beat h3 { margin: 0; font-weight: 400; font-size: clamp(1.375rem, 1.9vw, 1.875rem); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.dg .dg__beat p { margin: 0; max-width: 36ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.dg .dg__beat--intro p:first-child { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.3; color: var(--ink); }
.dg .dg__close { font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.125rem) !important; line-height: 1.15 !important; letter-spacing: -.03em; color: var(--ink) !important; max-width: 20ch !important; text-wrap: balance; }
.dg .dg__beat .btn { margin-top: 6px; }
/* the legend: a clear column, a blue column, home base's ring, an open chip and a coming chip */
.dg .dg__legend, .dg .dg__beat .dg__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); max-width: 40ch !important; }
.dg .dg__legend span { display: inline-flex; align-items: center; white-space: nowrap; }
.dg .dg__legend i { display: inline-block; flex: none; margin-right: 8px; }
.dg .dg__legend .is-col, .dg .dg__legend .is-blue { width: 7px; height: 18px; border-radius: 2px 2px 1px 1px; }
.dg .dg__legend .is-col { background: linear-gradient(90deg, #DDE6E9, #FFFFFF 45%, #CFDCE0); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 26%, transparent), 0 3px 6px -3px rgba(21, 19, 17, .45); }
.dg .dg__legend .is-blue { background: linear-gradient(90deg, #1D3FC2, #4E73F0 45%, #2852E5); box-shadow: 0 3px 6px -3px rgba(21, 19, 17, .45); }
.dg .dg__legend .is-ring { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--blue-fill), 0 0 0 2.5px color-mix(in srgb, var(--blue-fill) 22%, transparent); }
.dg .dg__legend .is-open, .dg .dg__legend .is-coming { width: 14px; height: 12px; border-radius: 3px; }
.dg .dg__legend .is-open { background: linear-gradient(180deg, #FBFBFA 0 55%, #D9DCDE 55% 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 26%, transparent), 0 4px 8px -4px rgba(21, 19, 17, .45); }
.dg .dg__legend .is-coming { background: color-mix(in srgb, #DCE6F2 55%, transparent); box-shadow: inset 0 0 0 1px var(--blue-fill); }
.dg .dg__legend b { font-weight: 600; color: var(--ink); }
.dg .dg__index { display: none; }
.dg .dg__note { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.dg .dg__osm { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.dg .dg__osm:hover, .dg .dg__osm:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.dg .dg__src { max-width: 46ch; }
.dg .dg__src .fineprint__body p + p { margin-top: 8px; }
/* the status tags (the callouts and the captions share them): open in ink, under construction or opening in his blue,
   home base outlined in blue */
.dg .dg-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.dg .dg-tag--open { background: var(--ink); color: var(--paper); }
.dg .dg-tag--building { background: var(--blue-fill); color: #FFFFFF; }
.dg .dg-tag--home, .dg .dg-tag--fact { color: var(--blue-text); background: color-mix(in srgb, var(--blue-fill) 7%, transparent); box-shadow: inset 0 0 0 1px var(--blue-fill); }
/* the callouts on the model: a blue dot on the place (a city's on its column's top), a fine leader, a frosted card */
.dg .dg-lab { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s; will-change: transform; }
.dg .dg-lab.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.dg .dg-lab__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-fill); box-shadow: 0 0 0 3px color-mix(in srgb, #FFFFFF 85%, transparent), 0 0 0 8px color-mix(in srgb, var(--blue-fill) 16%, transparent); }
.dg .dg-lab__lead { position: absolute; left: -.5px; bottom: 8px; width: 1px; height: calc(40px + var(--lift, 0px)); background: linear-gradient(0deg, color-mix(in srgb, var(--ink) 20%, transparent), color-mix(in srgb, var(--ink) 70%, transparent)); }
.dg .dg-lab__box { position: absolute; left: 0; bottom: calc(48px + var(--lift, 0px)); display: grid; gap: 6px; justify-items: start; padding: 11px 14px 12px; white-space: nowrap; transform: translateX(calc(-50% + var(--dx, 0px))); background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 12px; box-shadow: 0 22px 44px -26px rgba(21, 19, 17, .5); }
.dg .dg-lab__box b { font-weight: 500; font-size: 15.5px; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
/* a city's figure: its one-year growth (or its count), large and light; his blue on the four fastest */
.dg .dg-lab__fig { display: block; margin-top: -2px; font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dg .dg-lab--blue .dg-lab__fig { color: var(--blue-text); }
.dg .dg-lab.is-on .dg-lab__box { animation: dg-lab-in .5s var(--ease-out) both; }
@keyframes dg-lab-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.dg .dg-lab--note .dg-lab__box b { max-width: 15em; white-space: normal; text-wrap: balance; }
.dg .dg-lab__note { display: block; width: max-content; max-width: 17.5em; margin-top: -1px; white-space: normal; text-wrap: pretty; font-size: 12.5px; line-height: 1.38; color: var(--ink-2); }
.dg .dg-lab--city .dg-lab__note { max-width: 14.5em; }
.dg .dg-lab__sh { display: none; }
/* the closing view: every callout compact (the name and a dot) */
.dg .dg__labels.is-all .dg-lab__lead { height: calc(20px + var(--lift, 0px)); }
.dg .dg__labels.is-all .dg-lab__box { bottom: calc(28px + var(--lift, 0px)); padding: 6px 10px 6px 9px; grid-auto-flow: column; align-items: center; gap: 7px; border-radius: 999px; }
.dg .dg__labels.is-all .dg-lab__box b { font-size: 12.5px; max-width: none; white-space: nowrap; }
.dg .dg__labels.is-all .dg-lab__fig { font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.dg .dg__labels.is-all .dg-tag { display: none; }
.dg .dg__labels.is-all .dg-lab__dot { width: 8px; height: 8px; left: -4px; top: -4px; box-shadow: 0 0 0 2px color-mix(in srgb, #FFFFFF 85%, transparent); }
.dg .dg__labels.is-all .dg-lab__note, .dg .dg__labels.is-all .dg-lab__nm { display: none; }
.dg .dg__labels.is-all .dg-lab__sh { display: inline; }
/* a callout that would cover another flips under its place */
.dg .dg-lab.is-below .dg-lab__lead { top: 8px; bottom: auto; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 20%, transparent), color-mix(in srgb, var(--ink) 70%, transparent)); }
.dg .dg-lab.is-below .dg-lab__box { top: 48px; bottom: auto; }
.dg .dg__labels.is-all .dg-lab.is-below .dg-lab__box { top: 28px; }

/* the detail lines the callouts carry, added to each stop by the controller: shown in the reduced-motion list, kept for
   screen readers only in the pinned story (where the callouts show them) */
.dg .dg__beat .dg__more { font-size: .9375rem; line-height: 1.45; }
.dg .dg__more b { font-weight: 500; color: var(--ink); }
.dg .dg__more-tag { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dg.is-pin .dg__more { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the pinned story (T1 and T2): ten stops paced by js/core/pace.js (0.4 screen per beat weight on desktop) */
.dg.is-pin { height: 460vh; height: 460svh; }
.dg.is-pin .dg__pin { position: sticky; top: 0; z-index: 2; display: block; height: 100vh; height: 100svh; padding: 0; overflow: clip; }
.dg.is-pin .dg__stage { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.dg.is-pin .dg__still { inset: auto; left: 0; top: 0; width: 2400px; height: 3004px; object-fit: fill; transform-origin: 0 0; will-change: transform; clip-path: inset(0 0 50% 0); }
.dg.is-pin .dg__still.is-dark { clip-path: inset(50% 0 0 0); }
/* a soft fall of the studio grey behind the copy, so the model never fights the words */
.dg.is-pin .dg__pin::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: min(62vw, calc(max(var(--gutter), 3vw) + 640px)); pointer-events: none; --sp: var(--stage-paper, var(--paper-2)); background: linear-gradient(90deg, var(--sp) 0, var(--sp) 44%, color-mix(in srgb, var(--sp) 82%, transparent) 56%, color-mix(in srgb, var(--sp) 50%, transparent) 70%, color-mix(in srgb, var(--sp) 18%, transparent) 86%, color-mix(in srgb, var(--sp) 0%, transparent) 100%); }
.dg.is-pin .dg__copy { position: absolute; z-index: 3; left: max(var(--gutter), 3vw); top: calc(var(--header-h) + 3svh); bottom: 4svh; width: min(400px, 30vw); gap: 16px; }
.dg.is-pin .dg__beats { gap: 0; min-height: 13.5rem; align-content: start; }
.dg.is-pin .dg__beat { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
.dg.is-pin .dg__beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dg.is-pin .dg__beat:not(.is-on) a { visibility: hidden; }
/* the stops as a row of dots: done in ink, the current one a blue bar; each jumps */
.dg.is-pin .dg__index { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.dg .dg__index button { position: relative; width: 26px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dg .dg__index button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width var(--dur-3) var(--ease-out), margin var(--dur-3) var(--ease-out), background-color var(--dur-2); }
.dg .dg__index button.is-done::after { background: color-mix(in srgb, var(--ink) 62%, transparent); }
.dg .dg__index button[aria-current="step"]::after { width: 20px; margin-left: -10px; background: var(--blue-fill); }
.dg .dg__index button:hover::after, .dg .dg__index button:focus-visible::after { background: var(--blue-text); }
/* the last stop: me beside the button */
.dg .dg__me { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 6px; }
.dg .dg__me .btn { white-space: nowrap; }
.dg .dg__me img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), 0 0 0 4px color-mix(in srgb, var(--blue-fill) 22%, transparent); }
/* the note rides on the glass, so it sits on a soft studio-grey pill (like Skip) */
.dg.is-pin .dg__note { position: absolute; z-index: 3; right: max(var(--gutter), 3vw); bottom: 2.6svh; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); background: color-mix(in srgb, var(--stage-paper, var(--paper)) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dg .dg__skip { position: absolute; z-index: 8; top: calc(var(--header-h) + 2.5svh); right: max(var(--gutter), 3vw); display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; background: color-mix(in srgb, var(--stage-paper, var(--paper)) 80%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); border-radius: 999px; transition: color var(--dur-2), border-color var(--dur-2); }
.dg .dg__skip:hover, .dg .dg__skip:focus-visible { color: var(--ink); border-color: var(--ink); }
.dg.is-live .dg__still { pointer-events: none; }
html.dg-shot .dg .dg__copy, html.dg-shot .dg .dg__labels, html.dg-shot .dg .dg__note, html.dg-shot .dg .dg__skip, html.dg-shot .dg .dg__pin::before { display: none; }
html.dg-shot .dg::after { display: none; }
html.dg-shot .site-header, html.dg-shot .bottombar, html.dg-shot .toast, html.dg-shot .page-control { visibility: hidden !important; }
@media (min-width: 900px) and (max-height: 760px) {
  .dg.is-pin .dg__copy { gap: 12px; }
  .dg.is-pin .dg__h { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
  .dg.is-pin .dg__beats { min-height: 11.5rem; }
}
/* phones: the copy at the top, the model below it (the camera sits the subject under the caption) */
@media (max-width: 899px) {
  .dg .dg__stage { border-radius: 14px; }
  .dg.is-pin { height: 400vh; height: 400svh; }
  .dg.is-pin .dg__pin::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: calc(var(--dg-cap, calc(var(--header-h) + 218px)) + 52px); background: linear-gradient(180deg, var(--stage-paper, var(--paper-2)) calc(100% - 92px), color-mix(in srgb, var(--stage-paper, var(--paper-2)) 0%, transparent)); transition: height .45s var(--ease-out); }
  .dg.is-pin .dg__copy { left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 12px); bottom: auto; width: auto; gap: 8px; align-content: start; }
  .dg.is-pin .dg__copy > .caps { display: none; }
  .dg.is-pin .dg__h { font-size: clamp(1.875rem, 8.4vw, 2.5rem); }
  .dg.is-pin .dg__beats { min-height: 8.6rem; }
  .dg.is-pin .dg__beat { gap: 6px; }
  .dg.is-pin .dg__beat h3 { font-size: 1.25rem; }
  .dg.is-pin .dg__beat p { font-size: .9375rem; line-height: 1.42; }
  .dg.is-pin .dg__beat--intro p:first-child { font-size: 1.125rem; }
  .dg.is-pin .dg__beat .dg__legend { font-size: 9.5px; letter-spacing: .1em; gap: 6px 12px; }
  .dg.is-pin .dg__close { font-size: 1.375rem !important; }
  .dg.is-pin .dg__index, .dg.is-pin .dg__src { display: none; }
  .dg.is-pin .dg__note { right: auto; left: var(--gutter); bottom: calc(var(--bar-h, 64px) + 14px); max-width: calc(100% - 2 * var(--gutter) - 92px); font-size: 9.5px; letter-spacing: .1em; }
  .dg.is-pin .dg__osm { margin-top: 1px; font-size: 9.5px; }
  .dg .dg__skip { top: auto; bottom: calc(var(--bar-h, 64px) + 8px); right: var(--gutter); }
  .dg .dg-lab__box { padding: 8px 11px 9px; gap: 4px; }
  .dg .dg-lab__box b { font-size: 13.5px; }
  .dg .dg-lab__fig { font-size: 20px; }
  .dg .dg-lab__note { max-width: 15em; font-size: 11.5px; line-height: 1.34; }
  .dg .dg-lab--city .dg-lab__note { max-width: 12em; }
  .dg .dg-lab__lead { height: calc(30px + var(--lift, 0px)); }
  .dg .dg-lab__box { bottom: calc(38px + var(--lift, 0px)); }
  .dg .dg-lab.is-below .dg-lab__box { top: 38px; }
  .dg .dg__labels.is-all .dg-lab__lead { height: calc(14px + var(--lift, 0px)); }
  .dg .dg__labels.is-all .dg-lab__box { bottom: calc(22px + var(--lift, 0px)); padding: 5px 9px 5px 8px; gap: 6px; }
  .dg .dg__labels.is-all .dg-lab.is-below .dg-lab__box { top: 22px; }
  .dg .dg__labels.is-all .dg-lab__box b { font-size: 12px; }
  .dg .dg-tag { min-height: 19px; padding: 0 8px; font-size: 9.5px; letter-spacing: .12em; }
}
/* short phones (a phone browser's real 100svh, about 664 px on an iPhone): the title on one line, compact cards on
   shorter leaders (the controller's layout() uses the same 30 px lead), so every stop's callouts fit under the caption */
@media (max-width: 899px) and (max-height: 760px) {
  .dg.is-pin .dg__h { font-size: 1.375rem; letter-spacing: -.03em; }
  .dg.is-pin .dg__copy { gap: 6px; }
  .dg.is-pin .dg__beats { min-height: 7.4rem; }
  .dg.is-pin .dg__beat p { font-size: .875rem; line-height: 1.38; }
  .dg .dg-lab__box { padding: 6px 9px 7px; gap: 3px; border-radius: 10px; }
  .dg .dg-lab__box b { font-size: 12.5px; }
  .dg .dg-lab__fig { font-size: 17px; }
  .dg .dg-lab__note { max-width: 13.5em; font-size: 10.5px; line-height: 1.3; }
  .dg .dg-lab--city .dg-lab__note { max-width: 11em; }
  .dg .dg-tag { min-height: 17px; padding: 0 7px; font-size: 8.5px; letter-spacing: .1em; }
  .dg .dg-lab__lead { height: calc(22px + var(--lift, 0px)); }
  .dg .dg-lab__box { bottom: calc(30px + var(--lift, 0px)); }
  .dg .dg-lab.is-below .dg-lab__box { top: 30px; }
}
/* reduced motion on desktop: the picture stays in view beside the list */
@media (min-width: 900px) { .dg:not(.is-pin) .dg__stage { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
/* the still is one sprite: the light model on top, the dark-theme model below (the controller picks the half) */
.dg:not(.is-pin) .dg__still { object-position: 50% 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dg:not(.is-pin) .dg__still { object-position: 50% 100%; } }
:root[data-theme="dark"] .dg:not(.is-pin) .dg__still { object-position: 50% 100%; }
/* the studio grey eases back into the white page at the section's foot */
.dg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 16vh, 180px); pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper)); }