/* A Million Scattered Pieces — Draft 04, archive scope.
   Loads after styles.css (v0.6.8), which stays unmodified.
   Only the Listening Library index needs these. */

/* Room cards behave identically whether they are open or not yet open:
   same hover lift, same focus treatment, same keyboard affordance.
   Draft 03 had a hover state but no visible focus state. */
.room-card:focus-visible{outline:3px solid var(--signal);outline-offset:3px;
  transform:translateY(-4px);box-shadow:8px 8px 0 var(--ink)}
.room-card--lake:focus-visible{outline-color:var(--rain)}
@media(prefers-reduced-motion:reduce){
  .room-card:focus-visible{transform:none}
}

/* Card titles are h3 in Draft 04 — they sit under the "Current Conditions"
   h2, and were h2 in Draft 03. Inherits the Draft 03 h2 card sizing. */
.room-card h3{font-family:var(--display);font-weight:700;
  font-size:clamp(25px,3.2vw,31px);line-height:1.14;margin:0 0 8px}
.room-card--lake h3{color:var(--warm-white)}

/* Status line: the one place a room says whether it is open. */
.room-card__status{color:inherit;opacity:.9}
.room-card--current .room-card__status{color:var(--muted-deep)}

/* Track titles were h4 in the v0.6.8 snapshot, directly under an artist h2,
   which skipped a level. Promoted to h3 in Draft 04. styles.css still styles
   `.track h4`, so the same rule is restated here for h3. Visual output is
   identical; only the outline changes. */
.track h3{font-family:var(--display);font-weight:700;font-size:17px;
  line-height:1.32;margin:0;letter-spacing:-.005em}

/* Draft 04.3 — explicit wayfinding */
.room-nav__in{grid-template-columns:minmax(0,1fr) auto;gap:18px}
.room-nav__home{display:flex;align-items:center;gap:9px;min-width:0}
.room-nav__home a{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;text-decoration:none;border:1px solid rgba(255,255,255,.36);padding:7px 9px;line-height:1;color:var(--paper)}
.room-nav__home a:hover,.room-nav__home a:focus-visible{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.room-nav__library-link{color:var(--signal)!important}
.room-nav__links{gap:7px}
.room-nav__links a{border:1px solid rgba(255,255,255,.36);padding:7px 9px;text-decoration:none}
.room-nav__links a:hover,.room-nav__links a:focus-visible{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.closing-links{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.closing-links a{display:inline-block}
@media(max-width:760px){.room-nav__in{grid-template-columns:1fr}.room-nav__home{flex-wrap:wrap}.room-nav__links{display:none}.room-nav__home a{font-size:9px}.mobile-nav{grid-template-columns:repeat(4,1fr)}}


/* Draft 04.6 — shared Lemon Juice breadcrumb */
.room-nav__home a.room-nav__lemon{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;flex:0 0 auto;background:transparent!important}
.room-nav__lemon img{display:block;width:28px;height:24px;object-fit:contain;animation:room-lemon-spin 16s linear infinite;transform-origin:50% 50%}
.room-nav__lemon:hover img,.room-nav__lemon:focus-visible img{animation:room-lemon-reverse 4s linear infinite}
@keyframes room-lemon-spin{to{transform:rotate(360deg)}}
@keyframes room-lemon-reverse{to{transform:rotate(-360deg)}}
@media(max-width:760px){.room-nav__home a.room-nav__lemon{width:28px;height:28px}.room-nav__lemon img{width:26px;height:23px}}
@media(prefers-reduced-motion:reduce){.room-nav__lemon img,.room-nav__lemon:hover img,.room-nav__lemon:focus-visible img{animation:none!important}}


/* ==========================================================================
   DRAFT 04.21 — LISTENING ROOM FINAL CORRECTIONS
   ========================================================================== */

/* Room 000: actual lake photograph in the hero, right side on desktop. */
.hero.hero--lake{position:relative;overflow:hidden}
.hero.hero--lake>.wrap{position:relative}
.room000-hero-image{
  position:absolute;
  right:0;
  top:102px;
  width:min(34vw,480px);
  margin:0;
  aspect-ratio:2/1;
  overflow:hidden;
  border:1px solid var(--signal);
  background:var(--lake-deep);
}
.room000-hero-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 66%}
@media(min-width:900px){
  .room-000 .hero--lake h1,.room-000 .hero--lake .hero__sub{max-width:58%}
}
@media(max-width:899px){
  .room000-hero-image{
    position:relative;
    top:auto;right:auto;
    width:100%;
    margin:24px 0 24px;
  }
}

/* Room 001: Derek response reads as a distinct turn, with clearer rules. */
.derek-response__intro{
  padding:0 0 22px;
  margin:0 0 24px;
  border-bottom:1px solid var(--ink);
  max-width:820px;
}
.derek-response__intro .lede{margin:8px 0 0}
.derek-response__opening{
  padding:0 0 24px;
  margin:0 0 26px;
  border-bottom:1px solid var(--ink);
  max-width:920px;
}
.derek-response__opening h2{margin:0 0 14px}
.derek-response__opening p{max-width:760px}
.artist--response#derek-response{border-top:2px solid var(--ink)}

/* --- Room 001 player — PREVIEW SHELL --------------------------------------
   Ships hidden. Revealed only by ?player=1 (see site.js) so the design can be
   shown to Derek before any audio exists. There is no src on the <audio>
   element and no tracks.json, so this makes zero network requests.

   Visual contract: this is a fifth instrument-panel field. Same 1px ink rule,
   same warm-white ground, same 10px mono label as .forecast — related to that
   strip without joining its grid.

   Creates no stacking context and sets no z-index, so a later falling-cat
   layer can pass over or under it without arbitration. */
.room-player[hidden]{display:none}
.rp__flag{margin:0 0 10px}

.rp{border:1px solid var(--ink);background:var(--warm-white)}

.rp__meta{padding:12px;border-bottom:1px solid var(--ink)}
.rp__heading{font-family:var(--mono);font-weight:400;text-transform:uppercase;
  letter-spacing:.11em;font-size:10px;line-height:1.4;color:var(--muted-deep);margin:0 0 8px}
.rp__credit{font-family:var(--mono);text-transform:uppercase;letter-spacing:.11em;
  font-size:10px;line-height:1.4;color:var(--muted-deep);margin:0}
.rp__title{font-family:var(--mono);text-transform:uppercase;letter-spacing:.03em;
  font-size:13px;line-height:1.4;color:var(--ink);margin:4px 0 0}
.rp__status{font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  line-height:1.4;color:var(--muted-deep);margin:6px 0 0}

.rp__controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:14px;padding:10px 12px}

/* 44x44 square. Ink by default; --signal is reserved for the future playing
   state, so the preview never implies playback. */
.rp__toggle{width:44px;height:44px;display:grid;place-items:center;padding:0;
  border:0;border-radius:0;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:14px;line-height:1;cursor:pointer}
.rp.is-playing .rp__toggle{background:var(--signal);color:var(--ink)}
.rp__toggle[disabled]{background:var(--paper-2);color:var(--muted-deep);cursor:default}

/* Thin visible rule, full 44px touch height. The thumb is a 2px tick — a
   cursor on a rule, not a knob. */
.rp__seek{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  margin:0;padding:0;background:transparent}
.rp__seek::-webkit-slider-runnable-track{height:2px;background:var(--line)}
.rp__seek::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:14px;
  margin-top:-6px;border:0;border-radius:0;background:var(--ink)}
.rp__seek::-moz-range-track{height:2px;background:var(--line)}
.rp__seek::-moz-range-thumb{width:2px;height:14px;border:0;border-radius:0;background:var(--ink)}
.rp__seek[disabled]::-webkit-slider-thumb{background:var(--muted-deep)}
.rp__seek[disabled]::-moz-range-thumb{background:var(--muted-deep)}

.rp__time{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--muted-deep);margin:0;white-space:nowrap}

/* >=700px: credit and title share one line, as in the desktop sketch. */
@media(min-width:700px){
  .rp__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
  .rp__heading{flex:0 0 100%}
  .rp__credit::after{content:" ·";color:var(--muted-deep)}
  .rp__title{margin:0}
  .rp__status{flex:0 0 100%}
}

/* Screen-reader-only utility — the site had none. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ==========================================================================
   DRAFT 04.25 — ROOM 001 MOTION / FOLDOUT / FOOTER CLEANUP (2026-09-07)
   ========================================================================== */

/* Player preview: the visible heading already says Sound research; no extra
   internal "audio pending" flag is shown to collaborators. */
.rp__flag{display:none!important}

/* Career cross-reference: native, accessible foldout with a real page gutter. */
#career-cross-reference{
  margin:36px clamp(16px,2.6vw,40px) 0!important;
  padding-top:0!important;
  border-top:0!important;
}
.practice-map__details{border-top:1px solid var(--ink)}
.practice-map__summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:20px;align-items:end;padding:24px 0 22px;border-bottom:1px solid var(--ink);
}
.practice-map__summary::-webkit-details-marker{display:none}
.practice-map__summary::marker{content:""}
.practice-map__summary-copy{display:block;min-width:0}
.practice-map__summary .eyebrow{display:block;margin:0 0 8px}
.practice-map__summary-title{
  display:block;font-family:var(--display);font-size:clamp(26px,3vw,42px);
  font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink);
}
.practice-map__summary-action{
  align-self:center;font-family:var(--mono);font-size:10px;line-height:1.3;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--ink);
}
.practice-map__summary-close{display:none}
.practice-map__details[open] .practice-map__summary-open{display:none}
.practice-map__details[open] .practice-map__summary-close{display:inline}
.practice-map__body{padding:24px 0 0}
.practice-map__body .practice-map__method{margin:0 0 24px auto}
.practice-map__details[open] .practice-map__summary{border-bottom-color:var(--line)}
@media(max-width:700px){
  #career-cross-reference{margin-top:30px!important}
  .practice-map__summary{grid-template-columns:1fr;gap:12px;padding:20px 0 18px}
  .practice-map__summary-action{justify-self:start}
  .practice-map__body{padding-top:18px}
}

/* Scroll-fall cat: supplied PNG remains byte-for-byte unchanged. The section is
   the motion boundary; content stays above it and the image never catches input. */
#listen.falling-cat-scene{position:relative;overflow:hidden;isolation:isolate}
#listen.falling-cat-scene>.wrap{position:relative;z-index:2}
.room-muted{color:#a7a99e}
.falling-cat{
  position:absolute;z-index:1;top:16px;right:clamp(-88px,-4vw,-42px);
  width:clamp(170px,19vw,300px);pointer-events:none;user-select:none;
  transform:translate3d(0,0,0) rotate(-9deg);transform-origin:50% 45%;
  will-change:transform;
}
.falling-cat img{display:block;width:100%;height:auto}
@media(max-width:700px){
  .falling-cat{top:10px;right:-54px;width:132px}
}
@media(prefers-reduced-motion:reduce){
  .falling-cat{transform:translate3d(0,48px,0) rotate(-4deg)!important;will-change:auto}
}

/* Listening-family footer: one coherent utility strip instead of a row of
   individual underlines. Preserve 44px targets and one divider before title. */
.amsp-foot--listening .amsp-foot__room-links{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:0 22px!important;margin:0 0 28px!important;padding:7px 0!important;
  border-top:1px solid rgba(255,255,255,.24)!important;
  border-bottom:1px solid rgba(255,255,255,.34)!important;
}
.amsp-foot--listening .amsp-foot__room-links a{
  display:inline-flex!important;align-items:center!important;min-height:44px!important;
  padding:7px 0!important;border-bottom:0!important;text-decoration:none!important;
}
.amsp-foot--listening .amsp-foot__mark{border-top:0!important;margin-top:0!important}
@media(max-width:700px){
  .amsp-foot--listening .amsp-foot__room-links{gap:0 16px!important;padding:5px 0!important}
  .amsp-foot--listening .amsp-foot__room-links a{font-size:9px!important;letter-spacing:.04em!important}
}

/* ==========================================================================
   DRAFT 04.27 — GRID / CHASSIS + FINAL-NIGHT POLISH (2026-09-07)
   Room 001 only. GRID preserves the existing paper/grid reading surface.
   CHASSIS changes the surface register without changing content or layout.
   ========================================================================== */

/* --- View-mode control --------------------------------------------------- */
.surface-switch{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--warm-white);padding:18px 0;
}
.surface-switch__inner{display:grid;gap:14px;align-items:center}
.surface-switch__label{margin:0;font:600 10px/1.35 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.surface-switch__note{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--muted-deep)}
.surface-switch__choices{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.surface-choice{position:relative;display:block}
.surface-choice input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.surface-choice span{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:104px;min-height:44px;
  padding:9px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.surface-choice span::before{content:"";display:inline-block;width:10px;line-height:1;text-align:center}
.surface-choice input:checked+span{background:var(--ink);color:var(--paper);box-shadow:inset 0 -3px 0 var(--signal)}
.surface-choice input:checked+span::before{content:"✓"}
.surface-choice input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px;box-shadow:0 0 0 5px var(--ink),inset 0 -3px 0 var(--signal)}
@media(min-width:700px){
  .surface-switch__inner{grid-template-columns:minmax(0,1fr) auto;gap:28px}
  .surface-switch__choices{justify-content:flex-end}
}
@media(max-width:430px){
  .surface-switch__choices{width:100%}
  .surface-choice{flex:1 1 calc(50% - 4px)}
  .surface-choice span{width:100%;min-width:0}
}

/* --- Falling cat: exact 1254px user-supplied PNG, never cropped ----------
   The image carries the GRID marks in its own cream field. It starts above the
   black Listen Together band so it reads as falling out of the prior surface. */
#listen.falling-cat-scene{overflow:visible!important}
.falling-cat{
  top:clamp(-150px,-9vw,-94px)!important;left:clamp(8px,3.4vw,56px)!important;right:auto!important;
  width:clamp(190px,20vw,320px)!important;max-width:calc(100vw - 24px);
}
.falling-cat img{width:100%!important;height:auto!important;object-fit:contain!important}
@media(max-width:700px){
  .falling-cat{top:-70px!important;left:8px!important;width:150px!important}
}

/* --- Career cross-reference: collapsed state explains what is inside ----- */
.practice-map__summary-intro{
  display:block;max-width:760px;margin-top:10px;font-size:13px;line-height:1.55;
  color:var(--muted-deep);font-family:var(--body);letter-spacing:0;text-transform:none;
}
@media(max-width:700px){.practice-map__summary-intro{font-size:12px;line-height:1.5}}

/* The rain field below the foldout becomes a visual pointer back to it. */
.derek-blue-breath{position:relative;overflow:hidden}
.derek-blue-breath::before{
  content:"";position:absolute;top:26px;bottom:24px;
  left:max(22px,calc((100vw - var(--max))/2 + var(--gut)));
  width:1px;background:rgba(10,10,10,.48);
}
.derek-blue-breath::after{
  content:"CAREER TIMELINE ABOVE  ↑";position:absolute;top:26px;
  left:max(34px,calc((100vw - var(--max))/2 + var(--gut) + 12px));
  color:var(--muted-deep);font:400 9px/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
@media(max-width:700px){
  .derek-blue-breath::before{top:18px;bottom:18px}
  .derek-blue-breath::after{top:18px;font-size:8px}
}

/* --- Listening footer: lower the publisher mark into the contact register - */
@media(min-width:820px){
  .amsp-foot--listening .amsp-foot__published{
    padding-top:clamp(74px,7vw,104px)!important;
    min-height:300px!important;
  }
  .amsp-foot--listening .amsp-foot__publisher-logo{margin:0!important}
}

/* --- CHASSIS ------------------------------------------------------------- */
html[data-surface="chassis"]{color-scheme:dark}
html[data-surface="chassis"] body{background:#1A1B18;color:#F7F5F0}
html[data-surface="chassis"] body::before{
  background-image:linear-gradient(to right,rgba(247,245,240,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(247,245,240,.05) 1px,transparent 1px);
  background-size:24px 24px;
}
html[data-surface="chassis"] a{color:inherit}
html[data-surface="chassis"] .eyebrow,
html[data-surface="chassis"] .small{color:#B8B9B0}

html[data-surface="chassis"] .surface-switch{background:#0E0F0D;border-color:rgba(247,245,240,.24)}
html[data-surface="chassis"] .surface-switch__label{color:#F7F5F0}
html[data-surface="chassis"] .surface-switch__note{color:#B8B9B0}
html[data-surface="chassis"] .surface-choice span{border-color:rgba(247,245,240,.72);color:#F7F5F0}
html[data-surface="chassis"] .surface-choice input:checked+span{background:#F7F5F0;color:#0E0F0D;box-shadow:inset 0 -3px 0 var(--signal)}
html[data-surface="chassis"] .surface-choice input:focus-visible+span{box-shadow:0 0 0 5px #0E0F0D,inset 0 -3px 0 var(--signal)}

html[data-surface="chassis"] .hero{background:#1A1B18;color:#F7F5F0}
html[data-surface="chassis"] .hero__grid{color:#F7F5F0;opacity:.14}
html[data-surface="chassis"] .hero__umbrella{color:var(--signal)}
html[data-surface="chassis"] .hero .tag{color:var(--signal)}
html[data-surface="chassis"] .hero .thesis{border-top-color:rgba(247,245,240,.74);color:#F7F5F0}
html[data-surface="chassis"] .hero .forecast{background:#0E0F0D;color:#F7F5F0;border-color:rgba(247,245,240,.62)}
html[data-surface="chassis"] .hero .forecast div{border-color:rgba(247,245,240,.28)}
html[data-surface="chassis"] .hero .forecast strong{color:#F7F5F0}

html[data-surface="chassis"] .band,
html[data-surface="chassis"] .artist{background:#1A1B18;color:#F7F5F0;border-color:rgba(247,245,240,.18)}
html[data-surface="chassis"] .band--rain{background:#2A3841;color:#F7F5F0}
html[data-surface="chassis"] .band--dark{background:#24251F;color:#F7F5F0}
html[data-surface="chassis"] .band--signal{
  background:#1A1B18;color:#F7F5F0;border-top:2px solid var(--signal);border-bottom:1px solid rgba(247,245,240,.18)
}
html[data-surface="chassis"] .band--signal .eyebrow,
html[data-surface="chassis"] .band--signal .small{color:#B8B9B0}
html[data-surface="chassis"] .band--signal .callout{background:var(--signal);color:#0A0A0A;border-color:#F7F5F0}
html[data-surface="chassis"] .artist--response{
  color:#F7F5F0;background-color:#24251F;
  background-image:linear-gradient(180deg,#20343F 0%,#262820 58%,#4A4518 100%)
}
html[data-surface="chassis"] .artist--response .eyebrow,
html[data-surface="chassis"] .artist--response .track__n{color:#C5C7BE}
html[data-surface="chassis"] .derek-response__intro,
html[data-surface="chassis"] .derek-response__opening,
html[data-surface="chassis"] .artist--response#derek-response{border-color:rgba(247,245,240,.55)}

/* 04.64e's .derek-bio band was retired in 04.64f. The approved portrait now
   lives inside the Listening Room introduction (.derek-intro in styles.css)
   rather than in a separate credit band near the foot of the page, so these
   rules no longer have markup to match. Kept as a note rather than as dead
   selectors: the decision, not the CSS, is the thing worth finding later. */

/* The Ghost Piece intentionally stays a lit paper panel. The supplied black
   cat JPEG relies on multiply, so keeping this section light is functional. */
html[data-surface="chassis"] #ghost-piece{background:#F7F5F0;color:#0A0A0A}
html[data-surface="chassis"] #ghost-piece .eyebrow,
html[data-surface="chassis"] #ghost-piece .small{color:#4C5651}
html[data-surface="chassis"] #ghost-piece .quote{color:#0A0A0A;border-color:#0A0A0A}

html[data-surface="chassis"] .coordinate{background:#0E0F0D;border-color:rgba(247,245,240,.7);color:#F7F5F0}
html[data-surface="chassis"] .coordinate img{border-color:rgba(247,245,240,.34);background:#24251F}
html[data-surface="chassis"] .coordinate-intro{border-color:rgba(247,245,240,.42)}
html[data-surface="chassis"] .coordinate__n{background:var(--signal);color:#0A0A0A}
html[data-surface="chassis"] .platform{border-color:rgba(247,245,240,.65);color:#F7F5F0}
html[data-surface="chassis"] .platform:hover,
html[data-surface="chassis"] .platform:focus-visible{background:var(--signal);color:#0A0A0A;border-color:var(--signal)}
html[data-surface="chassis"] .tracks,
html[data-surface="chassis"] .track{border-color:rgba(247,245,240,.46)}
html[data-surface="chassis"] .track__n{color:#B8B9B0}

html[data-surface="chassis"] #career-cross-reference{background:#1A1B18;color:#F7F5F0}
html[data-surface="chassis"] .practice-map__details,
html[data-surface="chassis"] .practice-map__summary{border-color:rgba(247,245,240,.55)}
html[data-surface="chassis"] .practice-map__summary-title,
html[data-surface="chassis"] .practice-map__summary-action,
html[data-surface="chassis"] .practice-map__method strong,
html[data-surface="chassis"] .practice-map__reading{color:#F7F5F0}
html[data-surface="chassis"] .practice-map__summary-intro,
html[data-surface="chassis"] .practice-map__method{color:#B8B9B0}
html[data-surface="chassis"] .practice-map__scroll{background:#0E0F0D}
html[data-surface="chassis"] .practice-map__table{border-color:rgba(247,245,240,.7);color:#F7F5F0}
html[data-surface="chassis"] .practice-map__table th,
html[data-surface="chassis"] .practice-map__table td{border-color:rgba(247,245,240,.24)}
html[data-surface="chassis"] .practice-map__table thead th{background:#0E0F0D;color:#F7F5F0}
html[data-surface="chassis"] .practice-map__table thead th span{color:#B8B9B0}
html[data-surface="chassis"] .practice-map__table tbody th{background:#24251F;color:#F7F5F0}
html[data-surface="chassis"] .practice-map__table tbody th span,
html[data-surface="chassis"] .practice-map__table tbody th em,
html[data-surface="chassis"] .practice-map__event time,
html[data-surface="chassis"] .practice-map__event span{color:#B8B9B0}
html[data-surface="chassis"] .practice-map__table td{background:#181916;color:#F7F5F0}
html[data-surface="chassis"] .practice-map__event--selected{background:transparent;border-left-color:var(--signal)}
html[data-surface="chassis"] .practice-map__event--selected time{color:#F7F5F0}
html[data-surface="chassis"] .practice-map__event--now{background:transparent;border-left-color:#8FAFC0}
html[data-surface="chassis"] .practice-map__event--now time{color:#BFD6E1}
html[data-surface="chassis"] .practice-map__event--loss{background:#20211D;border-left-color:#F7F5F0}
@media(max-width:699px){
  html[data-surface="chassis"] .practice-map__table tr{background:#181916;border-color:rgba(247,245,240,.62)}
  html[data-surface="chassis"] .practice-map__table tbody th{border-color:rgba(247,245,240,.38)}
  html[data-surface="chassis"] .practice-map__table td{border-color:rgba(247,245,240,.26)}
  html[data-surface="chassis"] .practice-map__table td:not(:empty)::before{background:#0E0F0D;color:var(--signal)}
}

html[data-surface="chassis"] .derek-blue-breath{background:#2A3841;border-color:rgba(247,245,240,.14)}
html[data-surface="chassis"] .derek-blue-breath::before{background:rgba(247,245,240,.5)}
html[data-surface="chassis"] .derek-blue-breath::after{color:#D7D8D1}

html[data-surface="chassis"] .rp{background:#0E0F0D;border-color:rgba(247,245,240,.65);color:#F7F5F0}
html[data-surface="chassis"] .rp__meta{border-color:rgba(247,245,240,.34)}
html[data-surface="chassis"] .rp__heading,
html[data-surface="chassis"] .rp__credit,
html[data-surface="chassis"] .rp__status,
html[data-surface="chassis"] .rp__time{color:#B8B9B0}
html[data-surface="chassis"] .rp__title{color:#F7F5F0}
html[data-surface="chassis"] .rp__toggle[disabled]{background:#30312B;color:#B8B9B0}
html[data-surface="chassis"] .rp__seek::-webkit-slider-runnable-track{background:rgba(247,245,240,.32)}
html[data-surface="chassis"] .rp__seek::-moz-range-track{background:rgba(247,245,240,.32)}

html[data-surface="chassis"] .room-nav{background:#0E0F0D;border-bottom-color:rgba(247,245,240,.28)}
html[data-surface="chassis"] .mobile-nav{background:#0E0F0D;color:#F7F5F0;border-color:#F7F5F0}
html[data-surface="chassis"] .mobile-nav .library{background:var(--signal);color:#0A0A0A}
html[data-surface="chassis"] .amsp-foot--listening{border-top:1px solid rgba(247,245,240,.65)}


/* ==========================================================================
   DRAFT 04.27c — FALLING-CAT LEGIBILITY CORRECTION (2026-09-07)
   The supplied PNG's field is opaque #000, not white or transparent, so the
   cat carries a hard square wherever it lands, and its cream blob erased any
   text underneath it. Two different situations, two different corrections.

   860px and up: .split is two-column and .split__side is sticky, so there is
   a clear left channel. The cat starts below the "03 · Where to start" label
   block and falls entirely inside the black band, where its own black field
   is effectively invisible. Verified collision-free across the whole scroll.

   Below 860px: .split collapses to one column and every line starts at the
   left edge, so no cat position avoids text. The approved composition is kept
   exactly as supplied and only the two muted label lines are given a
   band-coloured chip so they stay readable where the cat crosses them.

   Image bytes, left placement, scroll-linked travel, contain behaviour and
   reduced-motion handling are unchanged at every width.
   ========================================================================== */
@media(min-width:860px){
  #listen.falling-cat-scene .falling-cat{
    top:clamp(150px,13.5vw,195px)!important;
  }
}
@media(max-width:859px){
  /* The cat's own breakpoint was 700px while .split collapses to one column at
     860px, so between 701 and 859 the layout was mobile but the cat was still
     desktop-sized and covered noticeably more body copy. Aligned to 860. */
  #listen.falling-cat-scene .falling-cat{
    top:-70px!important;left:8px!important;width:150px!important;
  }
  #listen.falling-cat-scene .split__side > *{
    position:relative;z-index:3;
    display:inline-block;
    background:#0A0A0A;
    padding:3px 8px;
    margin-left:-8px;
  }
}

/* ==========================================================================
   DRAFT 04.27d — LISTEN-TOGETHER CAT PLACEMENT (2026-09-07)
   User-directed correction on top of 04.27c:
   - keep the exact smaller 1254×1254 grid-background PNG
   - never let it touch/enter the Ghost Piece section above
   - keep it in a dedicated left lane, roughly beneath the black cat above
   - move the 03 / Where to start copy clear of the cat on compact layouts
   - preserve scroll-linked fall and no-crop contain behavior
   ========================================================================== */
#listen.falling-cat-scene{
  overflow:hidden!important;
}

/* Desktop / wide tablet: preserve the two-column reading system. The cat
   starts below the side label and stays in the left channel as it falls. */
@media(min-width:860px){
  #listen.falling-cat-scene .falling-cat{
    top:clamp(150px,13.5vw,195px)!important;
    left:clamp(72px,9.5vw,150px)!important;
    width:clamp(190px,20vw,320px)!important;
  }
}

/* Compact layouts: give the cat and the label their own top-stage before the
   main Listen Together copy begins. No background chip is needed because the
   text no longer sits on the image. */
@media(max-width:859px){
  #listen.falling-cat-scene .falling-cat{
    top:28px!important;
    left:12px!important;
    width:clamp(112px,31vw,138px)!important;
    max-width:138px!important;
  }
  #listen.falling-cat-scene .split__side{
    min-height:300px;
    padding-left:clamp(132px,36vw,160px);
    box-sizing:border-box;
  }
  #listen.falling-cat-scene .split__side > *{
    position:relative;
    z-index:3;
    display:block;
    background:transparent;
    padding:0;
    margin-left:0;
  }
}

@media(max-width:430px){
  #listen.falling-cat-scene .split__side{
    min-height:286px;
    padding-left:132px;
  }
}

/* ========================================================================== 
   DRAFT 04.28 — READER CUES + REQUESTED CATFALL (2026-09-08)
   ========================================================================== */

/* Original requested-catfall sprite and motion system. The 04.64j override
   below aligns its non-interactive layer to the reader's current viewport. */
.hero[data-catfall-hero]{isolation:isolate}
.hero[data-catfall-hero]>.wrap{z-index:2}
.catfall-sky{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;user-select:none}
.catfall-cat{
  position:absolute;top:-320px;left:var(--cat-left);
  width:var(--cat-size);will-change:transform;
  transform:translate3d(var(--cat-start-x),-120%,0) rotate(var(--cat-start-r));
  animation:catfall-drop var(--cat-duration) cubic-bezier(.2,.58,.38,1) var(--cat-delay) forwards;
}
.catfall-cat img{
  display:block;width:100%;height:auto;opacity:1;mix-blend-mode:multiply;
  animation:catfall-wobble var(--cat-wobble) ease-in-out var(--cat-delay) infinite alternate;
}
@keyframes catfall-drop{
  0%{transform:translate3d(var(--cat-start-x),-120%,0) rotate(var(--cat-start-r))}
  46%{transform:translate3d(var(--cat-mid-x),46vh,0) rotate(var(--cat-mid-r))}
  100%{transform:translate3d(var(--cat-end-x),calc(100vh + var(--cat-size) + 190px),0) rotate(var(--cat-end-r))}
}
@keyframes catfall-wobble{
  from{transform:translateX(-4px) rotate(-2deg)}
  to{transform:translateX(4px) rotate(2deg)}
}
.room001-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.room001-actions .primary-action{display:flex}
.catfall-trigger{
  min-height:52px;padding:14px 18px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:600 11px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;
}
.catfall-trigger:hover,.catfall-trigger:focus-visible{background:var(--ink);color:var(--signal)}
@media(max-width:520px){
  .room001-actions{display:grid;grid-template-columns:1fr}
  .room001-actions .direct-listen--primary,.catfall-trigger{width:100%}
}
@media(prefers-reduced-motion:reduce){.catfall-cat{display:none}}

/* 01 is a sidenote: short on arrival, available in full by choice. */
.umbrella-band{padding:0!important}
.umbrella-note>summary{
  min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  list-style:none;cursor:pointer;color:var(--ink);font:600 11px/1.4 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;
}
.umbrella-note>summary::-webkit-details-marker{display:none}
.umbrella-note>summary::marker{content:""}
.umbrella-note__action{flex:0 0 auto;font-size:10px}
.umbrella-note__close{display:none}
.umbrella-note[open] .umbrella-note__open{display:none}
.umbrella-note[open] .umbrella-note__close{display:inline}
.umbrella-note__body{padding:24px 0 46px}
.umbrella-note__body .split__side .small{max-width:220px}
@media(max-width:700px){.umbrella-note__body{padding:14px 0 36px}}

/* Timeline: a large desktop disclosure; a dedicated route on small screens. */
.practice-map__summary-action{
  display:inline-flex;align-items:center;justify-content:center;min-width:220px;min-height:68px;
  padding:16px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--paper)!important;
  box-shadow:inset 0 -5px 0 var(--signal);font-size:11px;text-align:center;
}
.practice-map__details[open] .practice-map__summary-action{background:var(--signal);color:var(--ink)!important;box-shadow:none}
.practice-map__mobile-link{display:none}
@media(max-width:700px){
  .practice-map__details{display:none}
  .practice-map__mobile-link{
    display:grid;gap:8px;padding:22px;background:var(--ink);color:var(--paper)!important;
    border:1px solid var(--ink);border-bottom:5px solid var(--signal);text-decoration:none;
  }
  .practice-map__mobile-link .eyebrow{margin:0;color:#a7a99e!important}
  .practice-map__mobile-link strong{font-family:var(--display);font-size:clamp(25px,8vw,36px);line-height:1.12}
  .practice-map__mobile-link>span:last-child{color:var(--signal);font:600 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase}
}

/* GRID / CHASSIS now changes only selected pale editorial sections. The hero,
   colored bands, Ghost Piece image field, Derek response and footer stay put. */
html[data-surface="chassis"]{color-scheme:light}
html[data-surface="chassis"] body{background:var(--warm-white);color:var(--ink)}
html[data-surface="chassis"] body::before{
  background-image:linear-gradient(to right,rgba(10,10,10,.038) 1px,transparent 1px),linear-gradient(to bottom,rgba(10,10,10,.038) 1px,transparent 1px);
  background-size:24px 24px;
}
html[data-surface="chassis"] .surface-switch{background:var(--warm-white);border-color:var(--line)}
html[data-surface="chassis"] .surface-switch__label{color:var(--ink)}
html[data-surface="chassis"] .surface-switch__note{color:var(--muted-deep)}
html[data-surface="chassis"] .surface-choice span{border-color:var(--ink);color:var(--ink)}
html[data-surface="chassis"] .surface-choice input:checked+span{background:var(--ink);color:var(--paper);box-shadow:inset 0 -3px 0 var(--signal)}
html[data-surface="chassis"] .hero{background:var(--paper);color:var(--ink)}
html[data-surface="chassis"] .hero__grid{color:var(--lake-blue);opacity:.32}
html[data-surface="chassis"] .hero__umbrella{color:var(--lake-blue)}
html[data-surface="chassis"] .hero .tag{color:var(--ink)}
html[data-surface="chassis"] .hero .thesis{border-top-color:var(--ink);color:var(--ink)}
html[data-surface="chassis"] .hero .forecast{background:var(--warm-white);color:var(--ink);border-color:var(--ink)}
html[data-surface="chassis"] .hero .forecast div{border-color:var(--line)}
html[data-surface="chassis"] .hero .forecast strong{color:var(--ink)}
html[data-surface="chassis"] .hero .catfall-trigger{border-color:var(--ink);color:var(--ink)}
html[data-surface="chassis"] .hero .catfall-trigger:hover,
html[data-surface="chassis"] .hero .catfall-trigger:focus-visible{background:var(--ink);color:var(--signal)}

html[data-surface="chassis"] .band:not(.surface-reactive),
html[data-surface="chassis"] .artist:not(.surface-reactive){background:transparent;color:var(--ink);border-color:var(--line)}
html[data-surface="chassis"] .band--rain:not(.surface-reactive),
html[data-surface="chassis"] .artist.band--rain:not(.surface-reactive){background:var(--rain);color:var(--ink)}
html[data-surface="chassis"] .band--dark:not(.surface-reactive){background:var(--ink);color:var(--paper)}
html[data-surface="chassis"] .band--signal:not(.surface-reactive){background:var(--signal);color:var(--ink);border-color:var(--line)}
html[data-surface="chassis"] .artist--response:not(.surface-reactive){
  color:var(--ink);background-color:var(--response-bridge);
  background-image:linear-gradient(180deg,var(--response-blue) 0%,var(--response-bridge) 58%,var(--response-yellow) 100%);
}
html[data-surface="chassis"] .band--rain .eyebrow,
html[data-surface="chassis"] .band--rain .small,
html[data-surface="chassis"] .band--signal .eyebrow,
html[data-surface="chassis"] .band--signal .small,
html[data-surface="chassis"] .artist--response .eyebrow,
html[data-surface="chassis"] .artist--response .track__n{color:var(--muted-deep)}
html[data-surface="chassis"] .band--dark .eyebrow,
html[data-surface="chassis"] .band--dark .small{color:#a7a99e}
html[data-surface="chassis"] #ghost-piece{background:#F7F5F0;color:#0A0A0A}
html[data-surface="chassis"] .derek-blue-breath{background:var(--rain);border-color:rgba(10,10,10,.08)}
html[data-surface="chassis"] .derek-blue-breath::before{background:rgba(10,10,10,.48)}
html[data-surface="chassis"] .derek-blue-breath::after{color:var(--muted-deep)}
html[data-surface="chassis"] #derek-response .tracks,
html[data-surface="chassis"] #derek-response .track{border-color:var(--ink)}
html[data-surface="chassis"] #derek-response .platform{border-color:var(--ink);color:var(--ink)}
html[data-surface="chassis"] #derek-response .platform:hover,
html[data-surface="chassis"] #derek-response .platform:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}

html[data-surface="chassis"] .surface-reactive{background:#1A1B18;color:#F7F5F0;border-color:rgba(247,245,240,.18)}
html[data-surface="chassis"] .surface-reactive .eyebrow,
html[data-surface="chassis"] .surface-reactive .small,
html[data-surface="chassis"] .surface-reactive .track__n{color:#B8B9B0}
html[data-surface="chassis"] .surface-reactive .tracks,
html[data-surface="chassis"] .surface-reactive .track{border-color:rgba(247,245,240,.46)}

/* Derek's collaboration credit gets its own clear line at the lower left. */
.amsp-foot--listening .credits--room{display:grid;gap:5px;max-width:560px;margin-right:auto;position:relative;z-index:3}
.amsp-foot--listening .credits--room span{display:block}
@media(max-width:819px){.amsp-foot--listening .credits--room{max-width:72%;font-size:10px}}

/* Dedicated compact-screen timeline route. */
.timeline-page{background:var(--paper);color:var(--ink)}
.timeline-page::before{z-index:0}
.timeline-page .room-nav,.timeline-page main,.timeline-page .timeline-foot{position:relative;z-index:1}
.timeline-page__head{padding:clamp(44px,8vw,92px) 0 38px;border-bottom:1px solid var(--ink)}
.timeline-page__head h1{font-size:clamp(44px,10vw,96px);line-height:1.02;max-width:920px}
.timeline-page__head .lede{margin:24px 0 0;max-width:780px}
.timeline-page__back{display:inline-flex;margin-top:28px;padding:12px 14px;border:1px solid var(--ink);font:600 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.timeline-page__back:hover,.timeline-page__back:focus-visible{background:var(--ink);color:var(--signal)}
.timeline-page__body{padding:36px 0 clamp(72px,10vw,120px)}
.timeline-page__body .practice-map__method{max-width:850px;margin:0 0 28px}
.timeline-page__body .practice-map__reading{max-width:850px;margin:28px 0 0}
.timeline-foot{padding:34px 0 96px;background:var(--ink);color:var(--paper);font:400 10px/1.65 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.timeline-foot p{margin:0;color:var(--paper)}
.timeline-foot p+p{margin-top:6px}
.timeline-foot a{display:inline-block;margin-top:18px;color:var(--signal)}
@media(max-width:699px){
  .timeline-page__head{padding:38px 0 30px}
  .timeline-page__head h1{font-size:clamp(42px,14vw,68px)}
  .timeline-page__body{padding-top:28px}
}

/* ======================================================================
   DRAFT 04.41 — FALL CONDITIONS
   A radio-like weather instrument replaces the random catfall button.
   Each activation requests one explicit condition. The falling cats use only
   translate/rotate/wobble transforms; no body deformation is introduced.
   ====================================================================== */
.fall-conditions{
  min-width:0;
  margin:clamp(18px,2.5vw,30px) 0 0;
  padding:0;
  border:0;
  max-width:860px;
}
.fall-conditions legend{
  margin:0 0 10px;
  font:600 9px/1.2 var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink);
}
.fall-conditions__hint{
  margin:0 0 10px;
  font:400 10px/1.45 var(--body);
  color:var(--muted-deep);
  max-width:34em;
}
.fall-conditions__bar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.fall-conditions label{position:relative;min-width:0;margin:0;cursor:pointer}
.fall-conditions label+label{border-left:1px solid var(--ink)}
.fall-conditions input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.fall-conditions span{
  min-height:52px;
  padding:14px 12px 12px 31px;
  display:flex;
  align-items:center;
  position:relative;
  font:600 9px/1.25 var(--mono);
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--ink);
  transition:background .16s ease,color .16s ease;
}
.fall-conditions span::before{
  content:"";
  position:absolute;
  left:12px;top:50%;
  width:10px;height:10px;
  margin-top:-6px;
  border:1px solid currentColor;
  border-radius:50%;
  background:transparent;
}
.fall-conditions input:checked+span{background:var(--ink);color:var(--signal)}
.fall-conditions input:checked+span::before{background:var(--signal);box-shadow:inset 0 0 0 2px var(--ink)}
.fall-conditions input:focus-visible+span{outline:3px solid var(--orange);outline-offset:-3px}
.fall-conditions label:hover span{background:rgba(10,10,10,.08)}
.fall-conditions label:hover input:checked+span{background:var(--ink)}
@media(max-width:720px){
  .fall-conditions__bar{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    overflow:visible;
  }
  .fall-conditions label{flex:none}
  .fall-conditions span{
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:10px 6px 10px 8px;
    font-size:8px;
    letter-spacing:.02em;
    line-height:1.3;
    white-space:normal;
    hyphens:auto;
    min-height:64px;
  }
  .fall-conditions span::before{
    position:static;
    top:auto;left:auto;
    margin:0 0 6px;
    flex:none;
  }
}
@media(max-width:359px){
  .fall-conditions span{padding:10px 4px 10px 6px;font-size:7.5px;letter-spacing:0}
}
html[data-surface="chassis"] .fall-conditions__bar,
html[data-surface="chassis"] .fall-conditions label+label{border-color:var(--ink)}

/* ======================================================================
   04.64j — FALL CONDITIONS SCALE
   Match the supplied SVG's calm instrument row. Desktop remains four cells;
   narrow phones use a legible 2 × 2 scale instead of compressing four labels.
   ====================================================================== */

@media(max-width:720px){
  .fall-conditions span{
    min-height:56px;
    padding:12px 10px 12px 31px;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    font-size:9px;
    letter-spacing:.045em;
    line-height:1.25;
    hyphens:none;
  }

  .fall-conditions span::before{
    position:absolute;
    left:12px;
    top:50%;
    margin:-6px 0 0;
  }
}

@media(max-width:620px){
  .fall-conditions__bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fall-conditions label+label{border-left:0}
  .fall-conditions label:nth-child(even){border-left:1px solid var(--ink)}
  .fall-conditions label:nth-child(n+3){border-top:1px solid var(--ink)}
  .fall-conditions span{min-height:58px;padding-right:12px;font-size:9px;letter-spacing:.055em}
}

@media(max-width:359px){
  .fall-conditions span{padding:11px 8px 11px 29px;font-size:8.5px;letter-spacing:.025em}
  .fall-conditions span::before{left:10px}
}

/* The condition is requested lower in the hero on narrow screens. Keep the
   decorative fall aligned to the reader's current viewport so it remains
   visible wherever the control is activated. It never intercepts input. */
.catfall-sky{
  position:fixed;
  z-index:70;
  inset:0;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  contain:layout paint;
}
.room-nav{position:relative;z-index:80}
.hero .thesis strong{font-weight:600}

@media(max-width:620px){
  .catfall-cat img{filter:drop-shadow(0 2px 2px rgba(235,231,220,.42))}
}

/* 04.64j — the three introductory listening coordinates share one warm,
   quiet field. The cards remain paper objects rather than becoming a flood. */
.feeling-space{
  --feeling-peach:#F2D6C9;
  background:var(--feeling-peach);
  color:var(--ink);
}
.feeling-space>.wrap>.eyebrow,
.feeling-space>.wrap>.small,
html[data-surface="chassis"] .feeling-space>.wrap>.eyebrow,
html[data-surface="chassis"] .feeling-space>.wrap>.small{color:var(--muted-deep)}
html[data-surface="chassis"] .feeling-space{
  background:var(--feeling-peach);
  color:var(--ink);
  border-color:var(--line);
}

/* 04.64j — Career cross-reference editorial disclosure. The introduction is
   a reading composition; the interaction is one quiet rule, not a CTA card. */
#career-cross-reference{margin-top:28px!important}
.practice-map__introduction{
  display:grid;
  gap:14px 32px;
  align-items:end;
  padding:22px 0 20px;
  border-top:1px solid currentColor;
}
.practice-map__heading .eyebrow{margin:0 0 8px}
.practice-map__introduction .practice-map__summary-title{margin:0;color:inherit}
.practice-map__introduction .practice-map__summary-intro{
  max-width:720px;
  margin:0;
  color:var(--muted-deep);
}
.practice-map__details{border-top:0;border-bottom:1px solid currentColor}
.practice-map__summary{
  grid-template-columns:minmax(0,1fr) 44px;
  gap:12px;
  align-items:center;
  min-height:58px;
  padding:5px 0;
  border-top:1px solid currentColor;
  border-bottom:0;
}
.practice-map__summary-action,
.practice-map__details[open] .practice-map__summary-action{
  display:block;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit!important;
  box-shadow:none;
  font:600 10px/1.4 var(--mono);
  letter-spacing:.09em;
  text-align:left;
  text-transform:uppercase;
  white-space:normal;
}
.practice-map__summary-mark{
  position:relative;
  display:block;
  width:44px;
  height:44px;
}
.practice-map__summary-mark::before,
.practice-map__summary-mark::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:21px;
  height:1.5px;
  background:currentColor;
}
.practice-map__summary-mark::after{
  transform:rotate(90deg);
  transition:transform .18s ease;
}
.practice-map__details[open] .practice-map__summary-mark::after{transform:rotate(0deg) scaleX(0)}
.practice-map__summary:hover .practice-map__summary-action{text-decoration:underline;text-underline-offset:4px}
.practice-map__details[open] .practice-map__summary{border-bottom:1px solid var(--line)}
.practice-map__mobile-link{min-height:58px}
.practice-map+.derek-blue-breath{min-height:clamp(44px,5vw,68px)}
.derek-blue-breath::before,
.derek-blue-breath::after{display:none}

@media(min-width:820px){
  .practice-map__introduction{grid-template-columns:minmax(280px,.78fr) minmax(360px,1.22fr)}
}

@media(max-width:700px){
  #career-cross-reference{margin-top:22px!important}
  .practice-map__introduction{padding:18px 0 16px}
  .practice-map__mobile-link{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:5px 0;
    border:0;
    border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
    background:transparent;
    color:inherit!important;
    box-shadow:none;
    font:600 10px/1.4 var(--mono);
    letter-spacing:.09em;
    text-decoration:none;
    text-transform:uppercase;
  }
  .practice-map__mobile-link:hover{text-decoration:underline;text-underline-offset:4px}
  .practice-map__mobile-link>span:last-child{color:inherit}
  .practice-map+.derek-blue-breath{min-height:42px}
}

@media(prefers-reduced-motion:reduce){
  .practice-map__summary-mark::after{transition:none}
}