/* ── SUB LEVEL: the cover with a members' card ───────────────────────────────
   (James, 2026-10-15: "why not just do the subscription and exclusive content behind a wall?" → $7 a month.) The page
   IS the cover: same skeleton, same cover.js (the cover's own plates), same see-through sheet, so every cover rule in
   style.css applies. This sheet adds THE SUB LEVEL CARD in the Good Boy card's place (the customs card's construction,
   values copied, never shared), the "what's down there" rows, the rules line and the steps. Loaded only by /sub-level/
   and /sub-level/welcome/; style.css is untouched, so no page needed a version bump. ── */

/* THE LEAD, CLOSED UP: the card sits right under the masthead and the sheet follows it (the customs page's reading). */
.sub-level .cover-lead { min-height: 0; justify-content: flex-start; padding-block: var(--space-2xl) var(--space-xl); }
@media (min-width: 700px) and (min-aspect-ratio: 1 / 1) {
  .sub-level .cover-lead { padding-top: var(--space-sm); }
}

/* THE CARD: an ink edge, a little tilt, the locker plate behind under a shade, the name in the marker, the tag in
   yellow marker, one cyan button, the price sticker where the NEW poster stands. */
.sl-card {
  position: relative; isolation: isolate;
  display: grid; justify-items: start; align-content: center;
  min-height: 150px;
  padding: 14px calc(var(--space-xl) + 80px) 16px var(--space-lg);
  color: var(--navy-cream);
  border: 3px solid var(--ink);
  transform: rotate(-1deg);
}
.sl-ground { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--navy); }
.sl-ground img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.sl-ground::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, oklch(0.12 0.04 262 / 0.88) 0%, oklch(0.12 0.04 262 / 0.62) 55%, oklch(0.12 0.04 262 / 0.38) 100%),
    linear-gradient(to right, oklch(0.12 0.04 262 / 0.42), oklch(0.12 0.04 262 / 0) 70%);
}
.sl-title {
  margin-top: 0.22em;
  font-family: var(--marker); font-size: clamp(2.125rem, 11cqi, 3.25rem); line-height: 0.86;
  color: var(--cream); text-transform: uppercase; white-space: nowrap;
  text-shadow: 0.05em 0.05em 0 var(--ink);
  transform: rotate(-2.5deg); transform-origin: left bottom;
}
.sl-tag {
  margin-top: var(--space-sm);
  font-family: var(--marker); font-size: clamp(0.9375rem, 4.8cqi, 1.3125rem); line-height: 1.1; white-space: nowrap;
  color: var(--yellow); text-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-1.5deg); transform-origin: left center;
}
.btn.sl-go {
  margin-top: var(--space-md);
  font-size: 1.0625rem; gap: var(--space-sm); padding: 0.5em 0.85em 0.45em;
  border-width: 3px; box-shadow: 4px 4px 0 var(--ink);
}
.btn.sl-go:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn.sl-go:active { box-shadow: 1px 1px 0 var(--ink); }
.sl-badge {
  position: absolute; z-index: 2; right: var(--space-md); top: 50%; transform: translateY(-50%) rotate(8deg);
  display: grid; justify-items: center; row-gap: 1px;
  font-family: var(--display); font-size: 1.375rem; line-height: 1; color: var(--ink); text-align: center;
  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  padding: 0.4em 0.5em 0.36em; width: 4.4em; text-transform: uppercase;
}
.sl-badge small { font-family: var(--body); font-weight: 700; font-size: 0.5em; letter-spacing: 0.02em; }

/* WHAT'S DOWN THERE: the cover's ruled rows, name over line; not links */
.sl-menu { list-style: none; margin: 0; padding: 0; border-top: 2px dashed oklch(0.97 0.03 95 / 0.22); }
.sl-item {
  display: grid; row-gap: 2px;
  padding: var(--space-md) 0; border-bottom: 2px dashed oklch(0.97 0.03 95 / 0.22);
}
.sl-name { font-family: var(--display); font-size: 1.25rem; color: var(--cream); text-transform: uppercase; }
.sl-what { color: var(--navy-dim); font-size: 0.9375rem; }

/* THE RULES: one plain paragraph, cream, said once */
.sl-rules { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 700; color: var(--cream); }

/* HOW IT WORKS: three numbered lines, the numbers in yellow display */
.sl-steps { margin: 0; padding: 0; list-style: none; counter-reset: sl; display: grid; gap: var(--space-sm); scroll-margin-top: var(--space-xl); }
.sl-steps li {
  counter-increment: sl; position: relative; padding-left: calc(1.6em + var(--space-sm));
  font-size: 0.9375rem; line-height: 1.4; color: var(--navy-cream);
}
/* the number sits in the gutter, so inline bold or a link in the step stays in the line (the grid version broke them out) */
.sl-steps li::before { content: counter(sl); position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 1.125rem; line-height: 1.2; color: var(--yellow); text-shadow: 1px 1px 0 var(--ink); }
.sl-steps strong { color: var(--cream); }
.sheet-kicker#sl-how { scroll-margin-top: var(--space-xl); }

/* SUPPORT + LEGAL: the customs page's lines */
.sl-help { margin: 0; text-align: center; font-size: 0.9375rem; color: var(--navy-cream); }
.sl-help a, .sl-inline { color: var(--cyan); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sl-help a:focus-visible, .sl-inline:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.sl-legal { margin: 0; text-align: center; font-size: 0.8125rem; color: var(--navy-dim); }
.sl-legal a { color: var(--navy-dim); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .sl-legal a:hover { color: var(--cream); } }
.sl-legal a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* COMING SOON (James, 2026-10-16: "make the sub level page a coming soon preview page"; body.is-soon): the SOON sticker in
   the price's place, one plain line, THE LIST form (members.css's sign-in look, soon.js), the locked drops as the preview
   with no Get in under them. */
.is-soon .sl-badge { font-size: 1.25rem; width: auto; padding: 0.45em 0.6em 0.38em; }
.sl-soon-p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--navy-cream); }
.sl-soon { scroll-margin-top: var(--space-xl); }
.is-soon .btn.fd-join { display: none; }