/* ═══════════════════════════════════════════════════════════════════════════
   IDEA PAGES — the teaching layer
   Loaded after site.css, which supplies the paper + brass tokens.

   The page runs in a fixed order and the order IS the design:
     sound → meaning → do it → the books
   Selling comes last. A visitor should be able to arrive, understand what a
   quartal voicing is, get an exercise they can do tonight on their own guitar,
   and leave better off having spent nothing.
   ═════════════════════════════════════════════════════════════════════════ */

.idea { padding-top: var(--nav-h); }

/* ── 1. sound ───────────────────────────────────────────────────────────── */

.idea__hero {
  padding-block: clamp(44px, 7vw, 90px) clamp(30px, 4vw, 54px);
  background: var(--paper);
  text-align: center;
}
.idea__name { margin-bottom: clamp(26px, 4vw, 46px); }

.idea__video {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: 0 2px 6px rgba(28, 24, 16, .09), 0 24px 60px rgba(28, 24, 16, .14);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.idea__poster { width: 100%; height: 100%; object-fit: cover; }

/* No iframe exists until the visitor taps: zero third-party requests, zero
   cookies and no multi-megabyte player on a phone until it is actually wanted. */
.idea__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22));
  border: 0; cursor: pointer;
  transition: background .35s var(--ease);
}
.idea__video:hover .idea__play { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.14)); }
.idea__playtri {
  width: clamp(58px, 7vw, 80px); aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .3);
  display: grid; place-items: center;
  transition: transform .35s var(--ease);
}
.idea__video:hover .idea__playtri { transform: scale(1.06); }
.idea__playtri::after {
  content: "";
  margin-left: 5px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--brass);
}
.idea__vcap {
  margin-top: 0;
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 20px 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color: rgba(255,255,255,.94);
  font-size: 13.5px;
  letter-spacing: .01em;
}
.idea__video.is-playing .idea__play,
.idea__video.is-playing .idea__vcap { display: none; }
.idea__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── 2. meaning ─────────────────────────────────────────────────────────── */

.idea__meaning { padding-block: clamp(52px, 8vw, 104px); }
.idea__sentence {
  margin: 0 auto;
  max-width: 26ch;                /* short measure: this is a statement, not a paragraph */
  font-family: var(--serif);
  font-size: clamp(24px, 3.1vw, 40px);
  line-height: 1.3;
  letter-spacing: -.017em;
  color: var(--text-dark);
  text-wrap: balance;
}

/* ── 3. do it ───────────────────────────────────────────────────────────── */

.idea__do { padding-block: clamp(48px, 7vw, 92px); }
.tryit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(26px, 3.6vw, 44px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  /* a letterpress lift, not a drop shadow — this block is meant to read as a
     printed card, the same object the print stylesheet will produce */
  box-shadow: 0 1px 0 var(--paper-3), 0 14px 34px rgba(28, 24, 16, .07);
}
@media (max-width: 640px) { .tryit { grid-template-columns: 1fr; text-align: center; } }

.tryit__label {
  margin: 0 0 12px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass);
}
.tryit__body {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 18.5px);
  line-height: 1.6;
  color: var(--text-dark);
  max-width: 48ch;
}
.tryit__shape { text-align: center; color: var(--text-dark); }
.fretboard { width: clamp(108px, 13vw, 132px); height: auto; margin-inline: auto; }
.tryit__shapename {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-soft);
  max-width: 18ch;
  margin-inline: auto;
}

/* ── 4/5. the studies ───────────────────────────────────────────────────── */

.idea__studies { padding-block: clamp(56px, 8vw, 112px); }
.studies {
  margin-top: clamp(34px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.study { display: flex; flex-direction: column; }
.study__cover {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: 0 1px 3px rgba(28,24,16,.14), 0 10px 24px rgba(28,24,16,.10);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.study__cover:hover { transform: translateY(-4px); box-shadow: 0 3px 8px rgba(28,24,16,.16), 0 18px 38px rgba(28,24,16,.14); }
/* the covers are 1:sqrt(2), not 3:4 — see the note on .book__face */
.study__cover img { width: 100%; aspect-ratio: var(--ar, 1005 / 1422); object-fit: cover; }

.study__body { padding-top: 15px; }
.study__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.study__meta { margin: 7px 0 0; font-size: 13px; color: var(--text-soft); }
.study__scope { font-style: italic; }
.study--free .study__price { color: var(--brass); font-weight: 600; }

.study__play {
  margin-top: 11px;
  padding: 6px 13px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.study__play:hover { border-color: var(--brass); color: var(--brass); }

/* ── print: the practice card ───────────────────────────────────────────────
   Everything except the idea, the sentence, the exercise and the shape is
   dropped, so the page prints as a single card for a music stand. */
@media print {
  .nav, .foot, .idea__video, .idea__studies, .study__play { display: none !important; }
  .idea { padding-top: 0; }
  .sec { padding-block: 12mm !important; background: #fff !important; }
  .tryit { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .idea__sentence { font-size: 20pt; }
}