/* Section 05, the field recording (Stage 7P.1 P3, integrated in Stage I1). The sculpture leads; the measurement follows.
   The prototype's rules, scoped to #recording so they never reach the rest of the page. Tokens match style.css. */
#recording { --paper: var(--bg); --stone: #ECE9E1; }
#recording .rec-exp { max-width: 64rem; margin-top: 1rem; }
#recording :where(.rec-exp p) { margin: 0 0 1rem; }  /* the prototype's page-level p rule; :where keeps it below every class rule */

/* 1 · The object, with the one meaningful act on it. */
#recording .still { position: relative; margin: 0; background: var(--stone); }
#recording .still img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 787; object-fit: cover; }
#recording .still-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1rem; padding: 3.5rem 1.25rem 1.1rem; background: linear-gradient(to top, rgba(16, 18, 16, .78), rgba(16, 18, 16, 0)); color: #f6f4ee; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* Stage I1 fix: the prototype's caption took the page-level muted grey (~2:1 on the dark gradient); it now uses the bar's light ink. */
#recording .still-bar figcaption { color: inherit; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
#recording .still-bar figcaption span { display: block; font-weight: 400; font-size: .8125rem; opacity: .85; }
#recording .play { min-height: 56px; min-width: 56px; padding: 0 1.4rem 0 1.15rem; background: var(--paper); color: var(--ink); border: 0; border-radius: 28px; cursor: pointer; font: 600 1rem var(--sans); display: inline-flex; align-items: center; gap: .6rem; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
#recording .play:hover { background: #fff; }
#recording .play-icon { width: 0; height: 0; border-left: .7rem solid currentColor; border-top: .44rem solid transparent; border-bottom: .44rem solid transparent; }
#recording .play[aria-pressed="true"] .play-icon { width: .66rem; height: .85rem; border: 0; border-left: .22rem solid currentColor; border-right: .22rem solid currentColor; }
#recording .play:focus-visible, #recording .btn:focus-visible, #recording #seek:focus-visible, #recording canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 2–4 · Hear, see: the instrument sits directly under the image, quieter than it. */
#recording .inst-plot { margin-top: .75rem; }
#recording #inst { display: block; width: 100%; height: 398px; touch-action: none; cursor: col-resize; }
@media (max-width: 607px) { #recording #inst { height: 316px; } }
#recording .nojs { display: block; width: 100%; height: auto; margin-top: .75rem; }
#recording .inst-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding-left: 56px; padding-right: 14px; }
html:not(.js) #recording .inst-bar, html:not(.js) #recording #inst, html:not(.js) #recording .still-bar .play, html:not(.js) #recording .now { display: none; }
#recording .time { margin: 0; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#recording #seek { width: 100%; margin: 0; accent-color: var(--accent); min-height: 24px; }
#recording .btn { min-height: 44px; padding: .4rem .9rem; background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; font: inherit; font-size: .875rem; }
#recording .btn:hover { border-color: var(--muted); }
/* One line, one observation at a time. Fixed height: changing text never moves anything. */
#recording .now { min-height: 3.2rem; margin: .9rem 0 0; padding: .65rem 0 0 56px; border-top: 1px solid var(--rule); font-size: 1rem; line-height: 1.45; }
#recording .now .now-hint { color: var(--muted); font-size: .9375rem; }
#recording .now .ann-n, #recording .annotations .ann-n { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 1.5px solid var(--accent); border-radius: 50%; font-size: .6875rem; font-weight: 600; color: var(--accent); margin-right: .35rem; }

/* 5 · Interpret: the dense reading lives below the experience. */
#recording .reading { margin-top: clamp(4rem, 9vw, 6rem); border-top: 1px solid var(--ink); padding-top: 1rem; max-width: 52rem; }
#recording .reading h3 { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 1.25rem; }
#recording .explain { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
#recording .annotations { list-style: none; margin: 1.25rem 0 2rem; padding: 0; display: grid; gap: .5rem; }
#recording .annotations li { display: grid; grid-template-columns: 1.8rem 3.4rem minmax(0, 1fr); gap: .5rem; align-items: baseline; font-size: .9375rem; padding: .35rem 0; border-top: 1px solid var(--rule); }
/* The observations are withheld until the recording reaches them. Without JS the disclosure is open (HTML attribute).
   With JS it is closed before Play (the visitor can still open it), opens on Play, and each observation keeps its row
   (hidden) until reached, so it appears in place and nothing below it moves. */
html.js #recording .ann-all:not([data-armed]) > .annotations { display: none; }  /* until recording.js has closed it: no flash of the list */
#recording .ann-all { margin: 1.25rem 0 2rem; }
#recording .ann-all > summary { min-height: 2.75rem; padding: .6rem 0; cursor: pointer; font-size: .875rem; color: var(--muted); border-top: 1px solid var(--rule); }
#recording .ann-all > summary:hover { color: var(--ink); }
#recording .ann-all > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#recording .ann-all > .annotations { margin: 0; }
#recording .annotations li.is-unreached { visibility: hidden; }
#recording .ann-time { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#recording .fig-title { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .5rem; }
#recording figure.avg { margin: 2rem 0; } #recording .avg img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
#recording .findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.25rem; padding: 1rem 0; border-block: 1px solid var(--rule); }
#recording .findings dt { font: 400 clamp(1.25rem, 3vw, 1.6rem)/1.1 var(--serif); } #recording .findings dd { margin: .3rem 0 0; font-size: .8125rem; color: var(--muted); }
#recording .note { font-size: .875rem; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--rule); padding-top: .75rem; }
@media (max-width: 34rem) {
  #recording .still-bar { padding: 2.5rem .9rem .8rem; } #recording .play { min-height: 48px; }
  #recording .inst-bar { padding-left: 50px; } #recording .now { padding-left: 0; }
  #recording .findings { grid-template-columns: 1fr; } #recording .annotations li { grid-template-columns: 1.8rem 3rem minmax(0, 1fr); font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { #recording * { transition: none !important; } }