/* Adam Blue Plugins: the Text Maker tutorials page in the Hairline look.
   Loaded after css/style.css and css/hairline.css on textmaker-tutorials.html only.
   Every rule is scoped under body.hl-site plus one of this page's own classes
   (.tut-lessons .tut-cta), so no other page is touched.

   2026-09-23 rebuild. The quick look is retired and the page is the lessons.
   The old layout put four players across a row, which left each one about
   230px wide on a desktop. A first pass ran one player out to the full column
   at 1204px, which read as intimidating, so a lesson is now an outlined card
   with the words beside a player of about 540px. The markup uses new class names (.tutlesson, .tut-stage)
   instead of the old .tutcard and .tutslot: those two carry a glass fill, an
   inset highlight, a drop shadow and a translateY hover from style.css that
   this look used to cancel rule by rule. The new names inherit none of it, so
   nine cancelling declarations are gone rather than maintained.

   Sections
     1. shared: the section head (eyebrow above a 7fr/5fr headline and lede grid)
     2. the lessons: eight outlined cards, the words on the left and a player
        of about 540px on the right, one row each
     3. the closing section: a two-column footing, not a second centred hero
*/

/* ============================================================
   1. SHARED: section head and the page's own measure
   ============================================================ */
/* The lessons need more room than the site's 1080px text column, so the whole
   section is widened and CENTRED. An earlier version kept the section at 1080
   and grew the card to the right instead, the way .tm-wide does on the Text
   Maker page, so that the card's left edge stayed on the headline. On a 1920
   screen that left 440px of space on one side and 200 on the other, and Adam's
   read was simply "the lessons aren't centered" - a card is a distinct object,
   and an off-centre object looks broken in a way a band of open rules did not.
   Symmetry wins over the shared left edge. The floor keeps it at the normal
   measure on narrow desktops and the calc keeps a real gutter at every size. */
.hl-site .tut-lessons { max-width: clamp(1080px, calc(100vw - 180px), 1320px); }

/* the eyebrow stays a direct child of the section (the dot rail reads it), so
   the headline grid carries the head's bottom space itself */
.hl-site .tut-lessons .tut-head { margin-bottom: 40px; }
.hl-site .tut-lessons .tut-head .homesub { margin: 0; }
/* eight lesson names run large just below, so the section headline steps back
   a little and stops echoing the hero h1 above it */
.hl-site .tut-lessons .tut-head h2 { font-size: clamp(2rem, 1.15rem + 1.9vw, 2.75rem); }
/* the soft sky tint behind the zone gives way to the plain page sky, like textmaker.html */
.hl-site .tut-lessons.zone-mix::before { content: none; }

/* ============================================================
   2. THE LESSONS
   ============================================================ */
/* Second pass, 2026-09-23. The first one ran a lesson's player out to the full
   column, about 1204px, and Adam's read was "too big, looks intimidating".
   The reference he keeps pointing at puts the words and a 533px player side by
   side inside one outlined card 396px tall, and that is what this is: eight
   small finished things with room around them, not eight walls. The contents
   strip that used to sit above them is gone too, because a card already shows
   its number, its name, a sentence and a cover, and two of them fit a screen. */
.hl-site .tut-lessons .tutstack { display: grid; gap: clamp(16px, 1.7vw, 24px); }

/* the card: an outline and a quiet panel, no blur, no gradient, no shadow and
   nothing that moves on hover */
.hl-site .tut-lessons .tutlesson {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 2.8vw, 44px);
  align-items: stretch;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid rgba(150, 190, 255, 0.22);
  border-radius: 22px;
  background: rgba(5, 8, 24, 0.55);
  transition: border-color 0.18s ease;
}

/* the words: the head line at the top, the sentence under it, the footing
   pinned to the bottom so the column ends level with the player beside it */
.hl-site .tut-lessons .tut-text {
  display: grid;
  align-content: center;
  row-gap: 12px;
  min-width: 0;
}
.hl-site .tut-lessons .tut-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: baseline;
}
.hl-site .tut-lessons .tut-num { --hl-num-size: clamp(22px, 1.9vw, 29px); }
.hl-site .tut-lessons .tutlesson h3 {
  margin: 0;
  font: 600 clamp(21px, 1.85vw, 28px)/1.15 "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  color: var(--hl-bright);
  text-wrap: balance;
  transition: color 0.15s ease;
}
.hl-site .tut-lessons .tut-min { color: var(--hl-soft); white-space: nowrap; }

.hl-site .tut-lessons .tut-note {
  max-width: 48ch;
  margin: 0;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--hl-body);
}

.hl-site .tut-lessons .tut-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  margin: 6px 0 0;
}
.hl-site .tut-lessons .tut-of { color: var(--hl-soft); }

/* the player sits in the other half of the card; .hl-frame gives it 16/9, the
   black stage and its own hairline */
.hl-site .tut-lessons .tut-stage { margin: 0; align-self: center; }

/* the lesson being watched, and the one a Next link just landed on: the name
   turns white and the card's own outline comes up. Nothing moves */
.hl-site .tut-lessons .tutlesson.is-playing h3,
.hl-site .tut-lessons .tutlesson.is-landed h3 { color: #fff; }
.hl-site .tut-lessons .tutlesson.is-playing,
.hl-site .tut-lessons .tutlesson.is-landed { border-color: rgba(205, 216, 255, 0.4); }

/* ============================================================
   4. THE CLOSING SECTION
   ============================================================ */
/* a footing, not a second centred hero: the words on the left, the price and
   the two links on the right, closed by quiet rules with no light */
.hl-site .tut-end {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px 48px;
  align-items: center;
  padding: clamp(38px, 4.2vw, 56px) 0;
}
.hl-site .tut-end-text h2 { margin: 0; font-size: clamp(1.9rem, 1.1rem + 1.8vw, 2.6rem); }
.hl-site .tut-end-text .hl-note { margin-top: 14px; }
.hl-site .tut-end-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 26px;
}

/* ============================================================
   4. NARROWER SCREENS
   ============================================================ */
/* the two halves stop fitting side by side well before the text does, so the
   card stacks: words, then player, in the order they are written */
@media (max-width: 820px) {
  .hl-site .tut-lessons .tut-head { margin-bottom: 30px; }
  /* stacked, the words come first and the player follows, but the footing
     belongs AFTER the lesson it closes: offering the next one before this one
     has been watched reads backwards. display:contents lifts the three text
     blocks into the card's own flex flow so one order can move the footing;
     the div carries no semantics, so nothing is lost by dissolving its box */
  .hl-site .tut-lessons .tutlesson {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .hl-site .tut-lessons .tut-text { display: contents; }
  .hl-site .tut-lessons .tut-foot { order: 1; margin: 0; }
  /* align-self on a column flex item sets its WIDTH; the centring the card
     uses beside the player would collapse the stage to nothing here */
  .hl-site .tut-lessons .tut-stage { align-self: stretch; }
  .hl-site .tut-lessons .tut-note { max-width: none; }
  .hl-site .tut-end { grid-template-columns: minmax(0, 1fr); }
  .hl-site .tut-end-act { justify-content: flex-start; }
}
/* phones: the name drops under the numeral so it keeps its size */
@media (max-width: 560px) {
  .hl-site .tut-lessons .tutlesson { padding: 20px; border-radius: 18px; }
  .hl-site .tut-lessons .tut-line { grid-template-columns: auto minmax(0, 1fr); }
  .hl-site .tut-lessons .tut-num {
    --hl-num-size: 21px;
    background: var(--hl-num-sm);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .hl-site .tut-lessons .tut-min { grid-column: 2; grid-row: 1; justify-self: end; }
  .hl-site .tut-lessons .tutlesson h3 { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; font-size: 22px; }
}

/* ============================================================
   5. CONTRAST AND MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hl-site .tut-lessons .tutlesson h3,
  .hl-site .tut-lessons .tutlesson { transition: none; }
}
html[data-motion="off"] .hl-site .tut-lessons .tutlesson h3,
html[data-motion="off"] .hl-site .tut-lessons .tutlesson { transition: none; }

@media (forced-colors: active) {
  .hl-site .tut-lessons .tutlesson { border: 1px solid CanvasText; }
}