/* ===================== ANALOG — the tape-box media pack ===================== */
/*
   Design grammar:
   • Tape-box hero: chinagraph reel-label name beside the session photograph,
     spec strip cut from real stats, dashed inner rule like a box liner
   • VU-meter bridge drifting under the tagline / bio pull-quote
   • Cue sheet: typed rows, dotted leaders, take-note asides
   • Session photographs in console cards + a contact strip
   • Reel-to-reel deck around the shared track rows
   • Hand-signed contact footer
   Fraunces / Spectral for warmth, DM Mono / Space Mono for everything typed.
   All colour via tokens. All selectors scoped to .pg-analog.
*/

.pg-analog {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Spectral', var(--font-body), serif;
  font-size: 1rem;
  line-height: 1.68;
}

/* paper grain over everything, clicks pass through */
.pg-analog::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pg-analog ::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.pg-analog img { max-width: 100%; display: block; }

/* ── shared micro pieces ───────────────────────────────────────────────── */

.pg-analog .al-label {
  font: 500 .68rem/1.5 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-analog .al-label--accent { color: var(--accent); display: block; margin-bottom: .5rem; }

/* section marker: spinning reel · serif title · rule · mono index */
.pg-analog .al-sec {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 clamp(1.6rem, 4cqw, 2.6rem);
}
.pg-analog .al-sec h2 {
  font-family: 'Fraunces', var(--font-serif), serif;
  font-weight: 600;
  font-variation-settings: 'opsz' 100;
  font-size: clamp(1.5rem, 3.2cqw, 2.3rem);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}
.pg-analog .al-rule { flex: 1; height: 1px; background: var(--line); }
.pg-analog .al-idx {
  font: 500 .68rem/1 var(--font-mono);
  letter-spacing: .2em;
  color: var(--muted);
  white-space: nowrap;
}
.pg-analog .al-reel--ico {
  width: 28px; height: 28px; flex: 0 0 auto;
  color: var(--accent);
}

@keyframes al-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .pg-analog .al-reel { animation: al-spin 14s linear infinite; }
}

/* every section shares the page gutter */
.pg-analog .al-hero,
.pg-analog .al-liner,
.pg-analog .al-cuesec,
.pg-analog .al-frames,
.pg-analog .al-decks,
.pg-analog .al-screen {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.4rem, 6cqw, 4.6rem) clamp(1.2rem, 4cqw, 3rem);
}

/* ── header strip ──────────────────────────────────────────────────────── */

.pg-analog .al-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1.2rem, 4cqw, 3rem);
  border-bottom: 1px solid var(--line);
}
.pg-analog .al-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.pg-analog .al-brand-name {
  font: 500 .78rem/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-analog .al-rec {
  width: .55rem; height: .55rem; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
@keyframes al-rec { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: no-preference) {
  .pg-analog .al-rec { animation: al-rec 2.6s ease-in-out infinite; }
}
.pg-analog .al-logo { max-height: 34px; max-width: 140px; object-fit: contain; }
.pg-analog .al-top-reel {
  font: 500 .68rem/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── tape-box hero ─────────────────────────────────────────────────────── */

.pg-analog .al-hero { padding-bottom: clamp(2.6rem, 6cqw, 4.6rem); }

.pg-analog .al-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(1.4rem, 3.5cqw, 3rem);
  align-items: stretch;
}
.pg-analog .al-hero-grid--boxonly { grid-template-columns: minmax(0, 1fr); }
.pg-analog .al-hero-grid--boxonly .al-tapebox { max-width: 720px; margin: 0 auto; width: 100%; }

.pg-analog .al-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 320px;
}
.pg-analog .al-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(.14) contrast(1.02);
}
.pg-analog .al-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, transparent 55%, color-mix(in srgb, var(--bg) 62%, transparent));
}
.pg-analog .al-media figcaption {
  position: absolute;
  left: 1rem; bottom: .85rem;
  z-index: 2;
  font: 500 .64rem/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* the box lid */
.pg-analog .al-tapebox {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(1.4rem, 3cqw, 2.4rem) clamp(1.4rem, 3cqw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
/* dashed inner rule, like a box liner */
.pg-analog .al-tapebox::before {
  content: '';
  position: absolute;
  inset: .65rem;
  border: 1px dashed color-mix(in srgb, var(--muted) 55%, var(--surface));
  border-radius: 7px;
  pointer-events: none;
}
.pg-analog .al-tb-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pg-analog .al-name {
  font-family: 'Fraunces', var(--font-serif), serif;
  font-weight: 600;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.6rem, 7.4cqw, 5.4rem);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.pg-analog .al-role {
  font: 500 .74rem/1.6 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
/* stats as the machine-spec strip */
.pg-analog .al-spec {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pg-analog .al-cell { padding: .6rem .35rem; text-align: center; min-width: 0; }
.pg-analog .al-cell + .al-cell { border-left: 1px solid var(--line); }
.pg-analog .al-cell b {
  display: block;
  font: 700 .9rem/1.3 'Space Mono', var(--font-mono), monospace;
  letter-spacing: .06em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-analog .al-cell span {
  font: 400 .6rem/1.6 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-analog .al-laurel {
  text-align: center;
  font-style: italic;
  font-size: .95rem;
  color: var(--muted);
  margin: 0;
}
.pg-analog .al-laurel::before { content: '— '; color: var(--accent); }
.pg-analog .al-laurel::after  { content: ' —'; color: var(--accent); }

/* ── VU-meter bridge ───────────────────────────────────────────────────── */

.pg-analog .al-bridge {
  margin-top: clamp(1.4rem, 3cqw, 2.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3cqw, 2.5rem);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem clamp(1rem, 3cqw, 2rem);
}
.pg-analog .al-vu { width: clamp(112px, 15cqw, 164px); height: auto; flex: 0 0 auto; }
.pg-analog .al-vu-face { fill: color-mix(in srgb, var(--bg) 55%, var(--surface)); stroke: var(--line); }
.pg-analog .al-vu-arc  { stroke: var(--muted); fill: none; stroke-width: 1; }
.pg-analog .al-vu-tick { stroke: var(--muted); }
.pg-analog .al-vu-hot  { stroke: var(--accent); fill: none; stroke-width: 2.5; }
.pg-analog .al-vu text {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  fill: var(--muted);
}
.pg-analog .al-needle line { stroke: var(--accent); stroke-width: 1.5; }
.pg-analog .al-hub { fill: var(--ink); }
.pg-analog .al-needle { transform-origin: 60px 64px; transform: rotate(-12deg); }
@keyframes al-drift {
  0%   { transform: rotate(-40deg); } 18% { transform: rotate(-12deg); }
  34%  { transform: rotate(-27deg); } 52% { transform: rotate(6deg);  }
  68%  { transform: rotate(-16deg); } 84% { transform: rotate(18deg); }
  100% { transform: rotate(-4deg);  }
}
@media (prefers-reduced-motion: no-preference) {
  .pg-analog .al-needle { animation: al-drift 7s ease-in-out infinite alternate; }
  .pg-analog .al-vu--r .al-needle { animation-duration: 5.4s; animation-delay: -2.2s; }
}
.pg-analog .al-bridge-copy { flex: 1 1 240px; min-width: 220px; }
.pg-analog .al-bridge-copy .al-label--accent { margin-bottom: .35rem; }
.pg-analog .al-bridge-big {
  font-family: 'Fraunces', var(--font-serif), serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2cqw, 1.4rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

/* ── liner notes ───────────────────────────────────────────────────────── */

.pg-analog .al-liner-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2rem, 5cqw, 4rem);
  align-items: start;
}
.pg-analog .al-liner-grid--noimg { grid-template-columns: minmax(0, 1fr); }
.pg-analog .al-liner-grid--noimg .al-prose { max-width: 68ch; }

.pg-analog .al-lede {
  font-family: 'Fraunces', var(--font-serif), serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9cqw, 1.35rem);
  line-height: 1.62;
  white-space: pre-line;
  margin: 0 0 1.4rem;
}
.pg-analog .al-lede::first-letter {
  font-family: 'Fraunces', var(--font-serif), serif;
  font-weight: 700;
  font-size: 3em;
  float: left;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--accent);
}
.pg-analog .al-woven {
  border-top: 1px dashed var(--line);
  padding-top: 1.1rem;
}
.pg-analog .al-woven p {
  font-size: .98rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--ink) 84%, var(--bg));
  margin: 0;
  max-width: 62ch;
}
.pg-analog .al-cr { font-style: italic; color: var(--accent); }

.pg-analog .al-liner-fig { margin: 0; position: sticky; top: 1.4rem; }
.pg-analog .al-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pg-analog .al-frame img { filter: sepia(.16) contrast(1.02); width: 100%; }
.pg-analog .al-liner-fig figcaption {
  margin-top: .7rem;
  font: 500 .64rem/1.5 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── cue sheet ─────────────────────────────────────────────────────────── */

.pg-analog .al-cue-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4cqw, 2.75rem) clamp(1.2rem, 4cqw, 3rem);
}
.pg-analog .al-cue-card::before {
  content: '';
  position: absolute;
  inset: .65rem;
  border: 1px dashed color-mix(in srgb, var(--muted) 55%, var(--surface));
  border-radius: 7px;
  pointer-events: none;
}
.pg-analog .al-cue-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .8rem;
  margin-bottom: 1rem;
}
.pg-analog .al-cue-head .al-cue-t {
  font: 700 .92rem/1.3 'Space Mono', var(--font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.pg-analog .al-cue {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .7rem;
  font: 400 .9rem/1.5 'Space Mono', var(--font-mono), monospace;
  color: var(--ink);
  padding: .55rem 0;
  margin: 0;
}
.pg-analog .al-cue + .al-cue { border-top: 1px dotted var(--line); }
.pg-analog .al-no { color: var(--accent); font-weight: 700; flex: 0 0 2.3em; }
.pg-analog .al-cue-title { min-width: 0; }
.pg-analog .al-dots {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 60%, transparent);
  transform: translateY(-.35em);
}
.pg-analog .al-tm {
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--muted);
  white-space: nowrap;
}
.pg-analog .al-nb {
  display: block;
  flex-basis: 100%;
  font-family: 'Spectral', var(--font-body), serif;
  font-style: italic;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--muted);
  padding-left: 3em;
}
.pg-analog .al-cue-foot {
  margin: 1.2rem 0 0;
  font: 400 .68rem/1.7 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ── session photographs ───────────────────────────────────────────────── */

.pg-analog .al-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1rem, 2.4cqw, 1.8rem);
}
.pg-analog .al-photo {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}
.pg-analog .al-photo:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pg-analog .al-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: sepia(.14) contrast(1.02);
}
.pg-analog .al-photo figcaption {
  font: 500 .62rem/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding: .55rem .75rem;
}
.pg-analog .al-strip {
  display: flex;
  gap: .6rem;
  margin-top: clamp(1.2rem, 3cqw, 1.8rem);
  padding-bottom: .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pg-analog .al-strip img {
  height: 84px;
  width: auto;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  object-fit: cover;
  filter: sepia(.14) contrast(1.02);
}
.pg-analog .al-frames-more {
  margin: 1rem 0 0;
  font-style: italic;
  font-size: .92rem;
  color: var(--muted);
}

/* ── session masters (deck + shared track rows) ────────────────────────── */

.pg-analog .al-deck {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(1.2rem, 3cqw, 2rem) clamp(1.2rem, 3cqw, 2.2rem) clamp(1.4rem, 3cqw, 2.2rem);
  max-width: 980px;
  margin: 0 auto;
}
.pg-analog .al-reels {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .2rem .2rem .9rem;
}
.pg-analog .al-reels .al-reel { width: 56px; height: 56px; color: var(--muted); flex: 0 0 auto; }
.pg-analog .al-reels .al-reel--take { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .pg-analog .al-reels .al-reel { animation-duration: 9s; }
  .pg-analog .al-reels .al-reel--take { animation-duration: 7s; }
}
.pg-analog .al-tape-run {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--muted), color-mix(in srgb, var(--muted) 55%, var(--accent)));
  position: relative;
}
.pg-analog .al-tape-run::after {
  content: '';
  position: absolute;
  left: 50%; top: -4px;
  width: 8px; height: 10px;
  border: 1px solid var(--muted);
  border-radius: 2px;
  background: var(--surface);
  transform: translateX(-50%);
}
.pg-analog .al-wavewrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: .5rem .6rem;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  margin-bottom: 1rem;
}
.pg-analog .al-wave {
  width: 100%;
  height: 48px;
  fill: color-mix(in srgb, var(--accent) 78%, var(--ink));
  opacity: .9;
  display: block;
}
.pg-analog .al-playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--accent);
  opacity: .75;
}
@keyframes al-sweep { from { left: 0; } to { left: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .pg-analog .al-playhead { animation: al-sweep 12s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-analog .al-playhead { display: none; }
}

/* shared track rows, retyped for the deck */
.pg-analog .track-row {
  font-family: 'Space Mono', var(--font-mono), monospace;
  border-bottom: 1px dotted var(--line);
  padding: .55rem 0;
}
.pg-analog .track-row strong {
  font-family: 'Space Mono', var(--font-mono), monospace;
  font-weight: 700;
  font-size: .88rem;
}
.pg-analog .track-row .tr-num { color: var(--accent); font-weight: 700; }
.pg-analog .track-row .tr-pub {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-analog .track-row .tr-links a {
  font: 500 .62rem/1 var(--font-mono);
  letter-spacing: .1em;
  padding: .35rem .5rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.pg-analog .track-row .tr-links a:hover { border-color: var(--accent); color: var(--accent); }

/* ── screening ─────────────────────────────────────────────────────────── */

.pg-analog .al-screen-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(.7rem, 1.6cqw, 1.1rem);
  max-width: 900px;
  margin: 0 auto;
}
.pg-analog .al-screen-card .yt { border-radius: 7px; overflow: hidden; }

/* ── flex zone (user sections) ─────────────────────────────────────────── */

.pg-analog .xsec-zone { max-width: 1180px; margin: 0 auto; }
.pg-analog .xsec-h,
.pg-analog .xsec-title { font-family: 'Fraunces', var(--font-serif), serif; }
.pg-analog .xsec-list li span { color: var(--accent); font-family: var(--font-mono); }

/* ── hand-signed contact footer ────────────────────────────────────────── */

.pg-analog .al-contact {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, var(--bg));
  padding: clamp(2.8rem, 7cqw, 5rem) clamp(1.2rem, 4cqw, 3rem) 1.6rem;
}
.pg-analog .al-contact-in {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.pg-analog .al-contact-in .al-label--accent { margin-bottom: .8rem; }
.pg-analog .al-contact-h {
  font-family: 'Fraunces', var(--font-serif), serif;
  font-weight: 600;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(1.9rem, 5cqw, 3.1rem);
  letter-spacing: -.015em;
  line-height: 1.05;
  margin: 0 0 1.6rem;
}
.pg-analog .al-mail {
  display: inline-block;
  font: 500 clamp(.9rem, 2.2cqw, 1.1rem)/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .85rem 1.8rem;
  background: var(--surface);
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
}
.pg-analog .al-mail:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.pg-analog .al-soc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .7rem;
  margin-top: 1.4rem;
}
.pg-analog .al-soc .soc {
  font: 500 .66rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem .95rem;
  transition: border-color .25s ease, color .25s ease;
}
.pg-analog .al-soc a.soc:hover { border-color: var(--accent); color: var(--accent); }

.pg-analog .al-signed { margin-top: 2.2rem; }
.pg-analog .al-sig {
  display: inline-block;
  font-family: 'Cormorant Garamond', var(--font-serif), serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.7rem, 4cqw, 2.4rem);
  color: var(--accent);
  transform: rotate(-3deg);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 0 .4em .1em;
}
.pg-analog .al-sig-note {
  font-style: italic;
  font-size: .88rem;
  color: var(--muted);
  margin: .5rem 0 0;
}
.pg-analog .al-foot {
  max-width: 1180px;
  margin: clamp(2.4rem, 6cqw, 4rem) auto 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 1.3rem;
}
.pg-analog .colophon {
  text-align: center;
  font: 400 .64rem/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2rem 0 0;
}

/* ── responsive: mid ───────────────────────────────────────────────────── */

@container page (max-width: 880px) {
  .pg-analog .al-hero-grid { grid-template-columns: 1fr; }
  .pg-analog .al-media { min-height: 280px; order: -1; }
  .pg-analog .al-liner-grid { grid-template-columns: 1fr; }
  .pg-analog .al-liner-fig { position: static; max-width: 520px; }
}

/* ── responsive: narrow ────────────────────────────────────────────────── */

@container page (max-width: 620px) {
  .pg-analog .al-sec h2 { white-space: normal; }
  .pg-analog .al-idx { display: none; }
  .pg-analog .al-name { font-size: clamp(2.2rem, 11cqw, 3.2rem); }
  .pg-analog .al-spec { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .pg-analog .al-cell { border-left: 0 !important; border-top: 1px dashed var(--line); }
  .pg-analog .al-cell:nth-child(-n+2) { border-top: 0; }
  .pg-analog .al-cell:nth-child(2n) { border-left: 1px solid var(--line) !important; }
  .pg-analog .al-bridge { gap: .9rem; }
  .pg-analog .al-vu { width: clamp(96px, 26cqw, 120px); }
  .pg-analog .al-bridge-copy { flex-basis: 100%; text-align: center; }
  .pg-analog .al-cue { font-size: .8rem; gap: .5rem; }
  .pg-analog .al-no { flex-basis: 2em; }
  .pg-analog .al-nb { padding-left: 2.5em; }
  .pg-analog .al-photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pg-analog .al-reels .al-reel { width: 42px; height: 42px; }
}

@container page (max-width: 390px) {
  .pg-analog .al-top { padding: .7rem 1rem; }
  .pg-analog .al-tapebox { padding: 1.2rem 1.1rem; }
  .pg-analog .al-name { font-size: clamp(1.9rem, 12cqw, 2.6rem); }
  .pg-analog .al-tm { display: none; }
  .pg-analog .al-photo-grid { grid-template-columns: 1fr 1fr; }
  .pg-analog .al-strip img { height: 64px; }
}