/* ==================== RECORDS — the composer's papers, filed ============ */
/*
   Design grammar:
   • Manila file-cover hero: folder tab, typed accession record, rubber stamps
   • Productions as rotated ruled index cards; overflow = drawer-label card
   • Bio as an Inter-Office Memorandum; images as paperclipped prints
   • Space Mono typewriter voice + Spectral prose; token-driven throughout
   All selectors scoped to .pg-records. Container queries only.
*/

/* ── Root & derived tokens ─────────────────────────────────────────────── */

.pg-records {
  --rec-type: 'Space Mono', monospace;
  --rec-paper: var(--surface);
  --rec-edge: color-mix(in srgb, var(--surface) 70%, var(--ink));
  --rec-shadow: color-mix(in srgb, var(--ink) 20%, transparent);
  --rec-shadow-soft: color-mix(in srgb, var(--ink) 11%, transparent);
  --rec-rule: color-mix(in srgb, var(--line) 55%, var(--bg));
  --rec-stampink: color-mix(in srgb, var(--accent) 84%, transparent);
  --rec-metal: color-mix(in srgb, var(--muted) 55%, var(--ink));
  --rec-wood: color-mix(in srgb, var(--ink) 78%, var(--accent));

  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Spectral', serif;
  font-size: clamp(1rem, .95rem + .3cqw, 1.1rem);
  line-height: 1.62;
  overflow: hidden;
}

/* paper grain over everything (never over pointer targets) */
.pg-records::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.pg-records ::selection {
  background: color-mix(in srgb, var(--accent) 28%, var(--bg));
  color: var(--ink);
}

.pg-records .rec-sec {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4cqw, 2.5rem);
}

.pg-records a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
}
.pg-records a:hover { text-decoration-thickness: 2px; }

.pg-records h1, .pg-records h2, .pg-records h3 {
  font-family: var(--rec-type);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
}

/* ── Shared archive furniture: stamps, holes, clips, acc chips ─────────── */

.pg-records .rec-stamp {
  display: inline-block;
  font: 700 .68rem/1.3 var(--rec-type);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--rec-stampink);
  border: 2.5px solid var(--rec-stampink);
  border-radius: 5px;
  padding: .28em .7em;
  text-align: center;
  transform: rotate(var(--rot, -6deg));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='.55 1 .8 1 1 .9 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='.55 1 .8 1 1 .9 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23m)'/%3E%3C/svg%3E");
}
.pg-records .rec-stamp small {
  display: block;
  font-weight: 400;
  font-size: .68em;
  letter-spacing: .14em;
}
.pg-records .rec-stamp--warn { font-size: .62rem; }

.pg-records .rec-hole {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  display: block;
  box-shadow: inset 0 2px 3px var(--rec-shadow),
              0 1px 0 color-mix(in srgb, var(--rec-paper) 85%, transparent);
}

.pg-records .rec-clip {
  position: absolute;
  width: 17px;
  height: 48px;
  z-index: 3;
  transform: rotate(var(--crot, 7deg));
}
.pg-records .rec-clip::before,
.pg-records .rec-clip::after {
  content: '';
  position: absolute;
  border: 2.5px solid var(--rec-metal);
  border-radius: 9px;
}
.pg-records .rec-clip::before { inset: 0 0 7px 0; }
.pg-records .rec-clip::after  { inset: 9px 4px 0 4px; border-radius: 6px; border-top-color: transparent; }

.pg-records .rec-acc {
  font: 400 .68rem/1.6 var(--font-mono);
  letter-spacing: .13em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: .1em .55em;
  border-radius: 2px;
  white-space: nowrap;
}

.pg-records .rec-print {
  background: var(--rec-paper);
  padding: 10px 10px 12px;
  border: 1px solid var(--rec-edge);
  box-shadow: 0 10px 24px -10px var(--rec-shadow);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.pg-records .rec-mast {
  font: 400 .7rem/1.5 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -1px var(--rec-rule);
  padding: .7rem clamp(1rem, 4cqw, 2.5rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pg-records .rec-mast b { color: var(--accent); font-weight: 700; }
.pg-records .rec-logo { max-height: 26px; max-width: 130px; object-fit: contain; display: inline-block; vertical-align: middle; }

/* ── File-cover hero ───────────────────────────────────────────────────── */

.pg-records .rec-hero { padding: clamp(2.6rem, 6cqw, 5rem) 0 clamp(1.6rem, 4cqw, 3rem); }

.pg-records .rec-folder {
  position: relative;
  background: var(--rec-paper);
  border: 1px solid var(--rec-edge);
  border-radius: 4px 14px 4px 4px;
  box-shadow:
    0 2px 0 var(--rec-edge),
    0 14px 34px -14px var(--rec-shadow),
    0 5px 0 -2px color-mix(in srgb, var(--rec-paper) 88%, var(--ink)),
    0 10px 0 -5px color-mix(in srgb, var(--rec-paper) 76%, var(--ink));
  padding: clamp(1.6rem, 4.5cqw, 3.4rem) clamp(1.2rem, 4.5cqw, 3.2rem) clamp(2rem, 5cqw, 3.4rem);
  margin-top: 1.9rem;
}

.pg-records .rec-folder-tab {
  position: absolute;
  top: -1.95rem;
  left: clamp(.6rem, 3cqw, 2.4rem);
  background: var(--rec-paper);
  border: 1px solid var(--rec-edge);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: .45rem 1.2rem .7rem;
  font: 400 .76rem/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-records .rec-folder-tab b { color: var(--ink); font-weight: 700; }

.pg-records .rec-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  gap: clamp(1.5rem, 4cqw, 3.5rem);
  align-items: start;
}

.pg-records .rec-kicker {
  font: 500 .72rem/1.5 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.pg-records .rec-name {
  font-size: clamp(2.1rem, 6.2cqw, 4.2rem);
  margin: 0 0 .2em;
  text-wrap: balance;
}

.pg-records .rec-life {
  font-style: italic;
  color: var(--muted);
  font-size: 1.06em;
  margin-bottom: 1.5rem;
  max-width: 52ch;
}

/* typed accession record */
.pg-records .rec-typed {
  font: 400 .82rem/1.75 var(--font-mono);
  color: var(--ink);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: .9rem 0 1rem;
  margin-bottom: 1.4rem;
  max-width: 56ch;
}
.pg-records .rec-typed > div {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: .6ch;
  align-items: baseline;
}
.pg-records .rec-typed span { color: var(--muted); letter-spacing: .08em; }
.pg-records .rec-typed em { font-style: normal; }

/* holdings-summary sentence — stats woven into prose */
.pg-records .rec-audit {
  max-width: 58ch;
  margin-bottom: .4rem;
}
.pg-records .rec-stat-v {
  font: 700 1em/1 var(--rec-type);
  color: var(--accent);
  letter-spacing: -.01em;
}
.pg-records .rec-stat-l { font-style: italic; }

.pg-records .rec-stamps {
  margin-top: 1.8rem;
  display: flex;
  gap: 1.4rem 2.2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.pg-records .rec-portrait {
  position: relative;
  justify-self: end;
  transform: rotate(2.4deg);
  max-width: 300px;
  width: 100%;
}
.pg-records .rec-portrait .rec-clip { top: -15px; left: 26px; }
.pg-records .rec-portrait img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.pg-records .rec-portrait figcaption,
.pg-records .rec-plate figcaption,
.pg-records .rec-screen figcaption {
  font: 400 .7rem/1.5 var(--font-mono);
  letter-spacing: .04em;
  color: var(--muted);
  padding-top: .55rem;
}

/* ── Section heads ─────────────────────────────────────────────────────── */

.pg-records .rec-sect-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.pg-records .rec-sect-head h2 { font-size: clamp(1.35rem, 3cqw, 2rem); }
.pg-records .rec-sect-note {
  color: var(--muted);
  font-style: italic;
  max-width: 62ch;
  margin-bottom: 2.1rem;
}

/* ── Drawer pull ───────────────────────────────────────────────────────── */

.pg-records .rec-drawer-band { padding: clamp(2.2rem, 5cqw, 4rem) 0 clamp(1.2rem, 3cqw, 2rem); }
.pg-records .rec-drawer { filter: drop-shadow(0 18px 26px var(--rec-shadow-soft)); }

.pg-records .rec-drawer-cavity {
  background: linear-gradient(
    color-mix(in srgb, var(--ink) 88%, var(--bg)),
    color-mix(in srgb, var(--ink) 72%, var(--bg)));
  border-radius: 8px 8px 0 0;
  padding: 1.35rem 1.1rem 0;
  overflow: hidden;
}
.pg-records .rec-drawer-cards {
  height: 64px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  overflow: hidden;
}
.pg-records .rec-drawer-cards i {
  flex: 1 1 54px;
  min-width: 0;
  background: var(--rec-paper);
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--rec-edge);
  border-bottom: none;
  height: calc(40px + var(--h, 0px));
  opacity: .94;
  box-shadow: inset 0 8px 10px -8px var(--rec-shadow);
}
.pg-records .rec-drawer-cards i.g {
  background: color-mix(in srgb, var(--accent) 26%, var(--rec-paper));
  height: 62px;
}

.pg-records .rec-drawer-front {
  position: relative;
  background: linear-gradient(
    color-mix(in srgb, var(--rec-wood) 92%, var(--rec-paper)),
    var(--rec-wood) 55%,
    color-mix(in srgb, var(--rec-wood) 80%, var(--bg)));
  border-radius: 3px;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--rec-paper) 30%, transparent),
    inset 0 -6px 12px -6px color-mix(in srgb, var(--ink) 70%, transparent);
  padding: 1.1rem 1rem;
}

.pg-records .rec-label-frame {
  background: var(--rec-paper);
  border-radius: 2px;
  padding: .55rem 1.2rem .6rem;
  border: 3px solid var(--rec-metal);
  box-shadow:
    inset 0 0 0 2px var(--rec-paper),
    inset 0 1px 4px var(--rec-shadow),
    0 1px 0 color-mix(in srgb, var(--rec-paper) 40%, transparent);
  font: 400 clamp(.7rem, 1.8cqw, .9rem)/1.6 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.pg-records .rec-label-frame b { color: var(--accent); font-weight: 700; display: inline-block; }
.pg-records .rec-card--drawer .rec-label-frame b { display: block; }

.pg-records .rec-pull {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -13px;
  width: 92px;
  height: 26px;
}
.pg-records .rec-pull::before {
  content: '';
  position: absolute;
  inset: 0 0 10px 0;
  border-radius: 4px;
  background: linear-gradient(
    color-mix(in srgb, var(--accent) 55%, var(--rec-paper)),
    color-mix(in srgb, var(--accent) 70%, var(--ink)));
  box-shadow: 0 2px 4px var(--rec-shadow);
}
.pg-records .rec-pull::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 9px;
  height: 16px;
  border: 4px solid color-mix(in srgb, var(--accent) 62%, var(--ink));
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 3px 5px var(--rec-shadow);
}

/* ── Index cards — productions ─────────────────────────────────────────── */

.pg-records .rec-works { padding: 1.2rem 0 clamp(2.4rem, 6cqw, 4.4rem); }

.pg-records .rec-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.4rem, 3cqw, 2.4rem);
  margin-top: 2.4rem;
}

.pg-records .rec-card {
  position: relative;
  background: var(--rec-paper);
  border: 1px solid var(--rec-edge);
  border-radius: 5px;
  transform: rotate(var(--r, 0deg));
  box-shadow:
    0 3px 0 -1px color-mix(in srgb, var(--rec-paper) 80%, var(--ink)),
    0 16px 30px -16px var(--rec-shadow);
  padding: 2.4rem 1.5rem 3.1rem;
  margin-top: 1.6rem;
  min-height: 13.5rem;
  /* accent header rule + ruled card lines */
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent),
                    color-mix(in srgb, var(--accent) 55%, transparent)),
    repeating-linear-gradient(transparent 0 27px, var(--rec-rule) 27px 28px);
  background-size: 100% 2px, 100% 100%;
  background-position: 0 3.4rem, 0 3.9rem;
  background-repeat: no-repeat, repeat;
  transition: transform .35s ease, box-shadow .35s ease;
}
.pg-records .rec-card:hover {
  transform: rotate(0deg) translateY(-5px);
  box-shadow:
    0 3px 0 -1px color-mix(in srgb, var(--rec-paper) 80%, var(--ink)),
    0 26px 38px -18px var(--rec-shadow);
}

.pg-records .rec-card-tab {
  position: absolute;
  top: -1.55rem;
  right: 1.4rem;
  background: var(--rec-paper);
  border: 1px solid var(--rec-edge);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  font: 700 .64rem/1.4 var(--font-mono);
  letter-spacing: .22em;
  color: var(--accent);
  padding: .4rem .95rem .55rem;
  text-transform: uppercase;
}
.pg-records .rec-card:nth-child(2n) .rec-card-tab { right: auto; left: 1.4rem; }

.pg-records .rec-card-acc {
  position: absolute;
  top: .85rem;
  left: 1.5rem;
  border: none;
  padding: 0;
}

.pg-records .rec-card-title {
  font-size: 1.12rem;
  line-height: 1.35;
  padding-top: .3rem;
  overflow-wrap: anywhere;
}

.pg-records .rec-stamp--card {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  font-size: .62rem;
}
.pg-records .rec-card:nth-child(2n) .rec-stamp--card { right: auto; left: 1.2rem; }

.pg-records .rec-card .rec-hole {
  position: absolute;
  bottom: .8rem;
  left: 50%;
  transform: translateX(-50%);
}

/* the drawer-label overflow card */
.pg-records .rec-card--drawer {
  padding: 0;
  background-image: none;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pg-records .rec-card--drawer:hover { transform: rotate(var(--r, 0deg)); }
.pg-records .rec-drawer-front--cell {
  min-height: 9.5rem;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--rec-paper) 30%, transparent),
    inset 0 -6px 12px -6px color-mix(in srgb, var(--ink) 70%, transparent),
    0 16px 30px -16px var(--rec-shadow);
}

/* ── Plates — paperclipped prints ──────────────────────────────────────── */

.pg-records .rec-plates {
  padding: clamp(2rem, 5cqw, 3.5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 32%, var(--bg));
}

.pg-records .rec-plate-row {
  display: flex;
  gap: clamp(1.2rem, 2.6cqw, 2.2rem);
  flex-wrap: wrap;
  margin-top: 2.4rem;
  justify-content: center;
}
.pg-records .rec-plate {
  position: relative;
  flex: 1 1 220px;
  max-width: 300px;
  transform: rotate(var(--r, 0deg));
  transition: transform .35s ease;
}
.pg-records .rec-plate:hover { transform: rotate(0deg) scale(1.02); }
.pg-records .rec-plate .rec-clip { top: -15px; left: 20px; }
.pg-records .rec-plate:nth-child(2n) .rec-clip { left: auto; right: 22px; }
.pg-records .rec-plate img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* proof strip — abundance treatment for large image sets */
.pg-records .rec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: clamp(1.8rem, 4cqw, 2.6rem);
  padding: 12px;
  background: var(--rec-paper);
  border: 1px solid var(--rec-edge);
  box-shadow: 0 10px 24px -12px var(--rec-shadow);
}
.pg-records .rec-strip img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  filter: saturate(.85);
  transition: filter .25s ease;
}
.pg-records .rec-strip img:hover { filter: saturate(1); }

.pg-records .rec-plate-more {
  margin-top: 1.2rem;
  font: 400 .74rem/1.6 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
  text-align: right;
}

/* ── Listening copies ──────────────────────────────────────────────────── */

.pg-records .rec-av { padding: clamp(2.4rem, 6cqw, 4.4rem) 0 clamp(1.6rem, 4cqw, 3rem); }

.pg-records .rec-listen-card {
  background: var(--rec-paper);
  border: 1px solid var(--rec-edge);
  border-radius: 5px;
  box-shadow:
    0 3px 0 -1px color-mix(in srgb, var(--rec-paper) 80%, var(--ink)),
    0 16px 30px -16px var(--rec-shadow);
  padding: 1.2rem clamp(1rem, 3cqw, 1.8rem) 1.5rem;
  transform: rotate(-.35deg);
  /* accent header rule, like the cards */
  background-image: linear-gradient(
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent) 55%, transparent));
  background-size: 100% 2px;
  background-position: 0 .55rem;
  background-repeat: no-repeat;
}
.pg-records .rec-listen-card .track-row strong { font-family: var(--rec-type); font-size: .9rem; }

.pg-records .rec-screen { margin-top: clamp(1.6rem, 4cqw, 2.4rem); max-width: 720px; }
.pg-records .rec-print--screen { padding: 10px; }

/* ── Memo — bio ────────────────────────────────────────────────────────── */

.pg-records .rec-memo-sect { padding: clamp(2.6rem, 6cqw, 5rem) 0; }

.pg-records .rec-memo {
  position: relative;
  background: var(--rec-paper);
  border: 1px solid var(--rec-edge);
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(1.6rem, 4.5cqw, 3.2rem) clamp(1.2rem, 5cqw, 3.6rem) clamp(2rem, 5cqw, 3rem);
  box-shadow: 0 3px 0 -1px var(--rec-edge), 0 20px 40px -20px var(--rec-shadow);
  transform: rotate(-.4deg);
}
.pg-records .rec-memo-h1, .pg-records .rec-memo-h2 { position: absolute; top: 1.1rem; }
.pg-records .rec-memo-h1 { left: 33%; }
.pg-records .rec-memo-h2 { left: 66%; }

.pg-records .rec-memo-head {
  border-bottom: 2.5px solid var(--ink);
  padding-bottom: 1rem;
  margin-bottom: 1.3rem;
  text-align: center;
}
.pg-records .rec-memo-org {
  font: 400 .68rem/1.6 var(--font-mono);
  letter-spacing: .3em;
  color: var(--muted);
  text-transform: uppercase;
}
.pg-records .rec-memo-head h2 { font-size: clamp(1.25rem, 2.8cqw, 1.8rem); margin-top: .35rem; }

.pg-records .rec-memo-fields {
  font: 400 .8rem/2 var(--font-mono);
  border-bottom: 1px solid var(--line);
  padding-bottom: .9rem;
  margin-bottom: 1.5rem;
}
.pg-records .rec-memo-fields span {
  color: var(--muted);
  letter-spacing: .1em;
  display: inline-block;
  min-width: 5ch;
}
.pg-records .rec-memo-fields em { font-style: normal; }
.pg-records .rec-memo-re { font-weight: 700; }

.pg-records .rec-memo-body {
  white-space: pre-line;
  max-width: 64ch;
}

.pg-records .rec-memo-sig {
  margin-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.pg-records .rec-memo-name {
  font-family: var(--rec-type);
  font-weight: 700;
  font-size: 1.05em;
  font-style: italic;
}
.pg-records .rec-stamp--memo { font-size: .7rem; }

/* ── Curatorial note + register of works ───────────────────────────────── */

.pg-records .rec-note-sect { padding: 0 0 clamp(2.6rem, 6cqw, 4.6rem); }

.pg-records .rec-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4.5cqw, 3.6rem);
  align-items: start;
  margin-top: 1.4rem;
}

.pg-records .rec-note-prose { max-width: 58ch; font-size: 1.05em; }
.pg-records .rec-note-prose p + p { margin-top: .95rem; }
.pg-records .rec-woven {
  border-bottom: 1px dotted var(--muted);
  white-space: nowrap;
}

.pg-records .rec-register {
  border: 1px solid var(--line);
  background: var(--rec-paper);
  padding: 1.1rem 1.3rem 1.2rem;
  box-shadow: 0 10px 24px -14px var(--rec-shadow);
  transform: rotate(.5deg);
  font-family: var(--font-mono);
}
.pg-records .rec-reg-kicker {
  font: 700 .66rem/1.4 var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 2px solid var(--ink);
  padding-bottom: .5rem;
  margin-bottom: .7rem;
}
.pg-records .rec-register ol { list-style: none; margin: 0; padding: 0; }
.pg-records .rec-register li {
  display: grid;
  grid-template-columns: 3.2ch minmax(0, 1fr);
  gap: 1ch;
  align-items: baseline;
  font-size: .8rem;
  line-height: 1.6;
  padding: .3rem 0;
  border-bottom: 1px solid var(--rec-rule);
}
.pg-records .rec-register li span { color: var(--muted); font-size: .68rem; letter-spacing: .08em; }
.pg-records .rec-register li em { font-style: normal; overflow-wrap: anywhere; }
.pg-records .rec-reg-prose {
  margin-top: .9rem;
  font-size: 1em; line-height: 1.7;
}
.pg-records .rec-reg-prose em {
  font-style: italic;
  border-bottom: 1px dotted var(--muted);
}
.pg-records .rec-reg-more {
  margin-top: .7rem;
  font: 400 .66rem/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Flex zone — user sections styled as appendices ────────────────────── */

.pg-records .rec-flex {
  max-width: 1140px;
  margin-inline: auto;
  padding: 0 clamp(1rem, 4cqw, 2.5rem) clamp(2.2rem, 5cqw, 3.6rem);
}
.pg-records .rec-flex .xsec-h,
.pg-records .rec-flex .xsec-title {
  font-family: var(--rec-type);
  font-weight: 700;
}

/* ── Records-office footer ─────────────────────────────────────────────── */

.pg-records .rec-foot {
  border-top: 2px solid var(--ink);
  background: color-mix(in srgb, var(--surface) 40%, var(--bg));
  padding: clamp(2.4rem, 6cqw, 4rem) 0 1.6rem;
}

.pg-records .rec-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4cqw, 3.5rem);
  align-items: start;
}
.pg-records .rec-foot h2 { font-size: clamp(1.25rem, 2.8cqw, 1.8rem); margin-bottom: 1rem; }
.pg-records .rec-foot p { max-width: 52ch; }
.pg-records .rec-foot p + p { margin-top: .9rem; }

.pg-records .rec-soc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .8rem 1.6rem;
  margin-top: 1.3rem;
}
.pg-records .rec-soc-k {
  font: 400 .66rem/1.4 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-records .rec-soc .soc { color: var(--accent); }

/* call slip */
.pg-records .rec-slip {
  font: 400 .78rem/2.1 var(--font-mono);
  border: 1px solid var(--line);
  background: var(--rec-paper);
  padding: 1.1rem 1.4rem 1.2rem;
  box-shadow: 0 10px 24px -14px var(--rec-shadow);
  transform: rotate(.6deg);
}
.pg-records .rec-slip-title {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .3rem;
  margin-bottom: .5rem;
}
.pg-records .rec-slip span { color: var(--muted); letter-spacing: .08em; display: inline-block; min-width: 8ch; }
.pg-records .rec-slip span + .rec-blank + span { min-width: 0; margin-left: 1ch; }
.pg-records .rec-blank {
  font-style: normal;
  border-bottom: 1px dotted var(--muted);
  padding-inline: .2ch;
}

.pg-records .rec-smallprint {
  margin-top: clamp(2rem, 5cqw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font: 400 .66rem/1.7 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pg-records .rec-sp-name { color: var(--ink); font-weight: 500; }

.pg-records .colophon {
  margin-top: 1.4rem;
  font: 400 .66rem/1.6 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: .6rem;
}

/* ── Responsive — container queries only ───────────────────────────────── */

@container page (max-width: 760px) {
  .pg-records .rec-hero-grid { grid-template-columns: 1fr; }
  .pg-records .rec-portrait { justify-self: start; margin-top: .6rem; transform: rotate(1.6deg); }
  .pg-records .rec-note-grid { grid-template-columns: 1fr; }
  .pg-records .rec-foot-grid { grid-template-columns: 1fr; }
  .pg-records .rec-stamp--memo { position: static; margin-top: .4rem; }
}

@container page (max-width: 460px) {
  .pg-records .rec-cards { grid-template-columns: 1fr; }
  .pg-records .rec-card { transform: none; margin-top: 1.9rem; }
  .pg-records .rec-card:hover { transform: translateY(-5px); }
  .pg-records .rec-plate { max-width: 100%; transform: none; }
  .pg-records .rec-register, .pg-records .rec-slip, .pg-records .rec-memo,
  .pg-records .rec-listen-card { transform: none; }
  .pg-records .rec-mast { justify-content: center; text-align: center; }
  .pg-records .rec-stamps { gap: 1rem; }
  .pg-records .rec-drawer-cards i { flex-basis: 34px; }
  .pg-records .rec-typed > div { grid-template-columns: 1fr; gap: 0; }
  .pg-records .rec-strip { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

/* ── Motion ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pg-records .rec-card, .pg-records .rec-plate,
  .pg-records .rec-strip img { transition: none; }
}