/* Sample-pack product pages: the "in the folder" contents sheet.
   Page-scoped (loaded only by /sample-packs/*) so nocturne.css keeps its
   cache-buster and the other 50-odd pages are untouched.

   2026-08-03 — rebuilt as a datasheet: the pack total gets its own column
   with the specs under it, the folders read as a list across a rule. No
   outlined container, no boxed stat grid, names set in the body serif
   rather than uppercase Bebas. */

/* 2026-08-03 — the "inside the pack" heads lost their h2 too, so the lede now
   sits directly under the kicker and does not need the headline's breathing
   room. Only those heads pair a kicker with a lede, so this stays targeted.
   With no headline to carry it, the whole head is tightened: the kicker sits
   closer to what follows and the pillars come up to meet the lede. */
.sec-head .kicker { margin-bottom: clamp(10px, 1vw, 13px); }
.sec-head .kicker + .lede { margin-top: 0; }
.pillars { margin-top: clamp(20px, 2.4vw, 28px); }

.pk-sheet {
  display: grid;
  grid-template-columns: minmax(210px, 280px) 1fr;
  gap: 0 clamp(34px, 5vw, 64px);
  margin-top: clamp(22px, 2.2vw, 30px);
}

/* --- left: the numbers --- */
.pk-side {
  border-right: 1px solid var(--line-strong);
  padding-right: clamp(24px, 3vw, 44px);
}

.pk-total {
  font-family: var(--serif);
  font-size: clamp(54px, 6vw, 78px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--cream);
}

.pk-total-sub {
  font-size: 14px;
  color: var(--cream-dim);
  margin-top: 12px;
  max-width: 22ch;
}

.pk-spec {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 36px);
}

.pk-spec li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  font-size: 14.5px;
}

.pk-spec li span:first-child { color: var(--cream-faint); }
.pk-spec li span:last-child { color: var(--cream); text-align: right; }

/* --- right: the folders --- */
.pk-rows { display: grid; align-content: start; }

.pk-row {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.pk-row:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.pk-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.pk-name {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 20px);
  letter-spacing: -.01em;
  color: var(--cream);
}

.pk-n {
  font-size: 14px;
  color: var(--accent-bright);
  white-space: nowrap;
}

.pk-what {
  font-size: 14.5px;
  color: var(--cream-dim);
  margin-top: 5px;
  max-width: 48ch;
}

/* Tablets and phones: the numbers column moves above the folder list and
   its rule turns horizontal. The specs go two-up so the block stays short. */
@media (max-width: 860px) {
  .pk-sheet { grid-template-columns: 1fr; gap: 0; }
  .pk-side {
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
    padding-right: 0;
    padding-bottom: clamp(24px, 4vw, 32px);
    margin-bottom: clamp(24px, 4vw, 32px);
  }
  .pk-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(20px, 4vw, 40px); }
}

@media (max-width: 480px) {
  .pk-spec { grid-template-columns: 1fr; }
  .pk-total-sub { max-width: none; }
}