/* Learn page. The chrome -- tokens, gutter, masthead, nav, footer -- is in site.css.
   `entity.css` is deliberately NOT linked: docs/claude/09 records that its `.sec` collides, so
   every block here is `.lsec` and owns its own rules. */

/* ONE SIZE FOR EVERY PARAGRAPH OF RUNNING TEXT on this page. Bob, 2 September 2026: the section
   paragraphs at 1rem were "too small to read comfortably" beside the introduction, and matching
   the introduction's 1.2rem then read as oversized. 1.12rem is the size the About page already
   uses for the essay -- the site's established measure for text meant to be read -- so it is a
   settled value rather than a split difference. */
:root{--readsize:1.12rem}

.lhead{padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(1rem,2vw,1.6rem)}
.lhead .eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 .7rem}
.lhead h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.03em;
  text-transform:uppercase;margin:0 0 1rem;line-height:1}
.lhead p{font-family:var(--serif);font-size:var(--readsize);line-height:1.6;color:var(--read);
  margin:0;max-width:60ch}

.lsec{padding:clamp(2.2rem,4.5vw,3.4rem) 0 0}
.lsec h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 .5rem;line-height:1.05}
.lsec .kick{font-family:var(--serif);font-size:var(--readsize);line-height:1.6;color:var(--read);
  max-width:62ch;margin:0 0 1.4rem}

.frame{position:relative;aspect-ratio:16/9;background:var(--ink-2);border:1px solid var(--line);
  max-width:760px;margin:0}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* A PLAYLIST HOLDS ITS OWN VISITOR: its embed browses and auto-advances, and anyone who follows it
   out lands in the playlist rather than the recommendation feed, so those sections are the player
   alone. A STANDALONE VIDEO IS A LEAK, so those sections keep their player in the page and the
   rows drive it. Bob's rule, 2 September 2026. */
.withplayer{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.4rem);align-items:start;max-width:1100px}
.withplayer .frame{max-width:none}
.playercol{position:sticky;top:1.2rem}
.nowline{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.7rem 0 0}
.nowline .now{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin:0}
.nowline .nowttl{font-family:var(--serif);font-size:1rem;color:var(--chalk);margin:0}
.vis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* No thumbnails anywhere. Bob's own YouTube thumbnails are several different visual languages,
   several carry burnt-in text that fights the caption beneath it, and two have no high-resolution
   version at all. Rows put the typography in charge and let the one player carry the picture. */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:1.9rem 1fr auto;gap:.9rem;align-items:baseline;
  width:100%;text-align:left;background:transparent;border:0;color:inherit;
  font-family:var(--sans);padding:.9rem .2rem;cursor:pointer}
.row:hover{background:var(--ink-2)}
.row[aria-current="true"]{background:var(--ink-2)}
.row[aria-current="true"] .n{color:var(--cyan)}
.row .n{font-size:.72rem;color:var(--dim);font-variant-numeric:tabular-nums}
.row .work{display:block;font-family:var(--serif);font-size:1.08rem;line-height:1.3;
  color:var(--chalk)}
.row .sub{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);margin:.26rem 0 0}
.row .dur{font-size:.76rem;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.rowmeta{padding:0 .2rem .85rem 2.8rem;margin:-.35rem 0 0}
.rowmeta a{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);
  text-decoration:none;border-bottom:1px solid rgba(30,155,215,.45);padding-bottom:1px}
.rowmeta a:hover{border-bottom-color:var(--cyan)}

/* The quotation band. Cobalt because BRIEF.md section 4 gives cobalt exactly one role, surfaces
   that carry text, and because the homepage's band and the About page's quotation are both
   cobalt -- so Learn reads as the same site. It also breaks the page once, a third of the way
   down, which a page of lists needs. */
.lband{background:var(--cobalt);color:#fff;padding:clamp(2rem,4.5vw,3.2rem) 0;
  margin:clamp(2.4rem,5vw,3.6rem) 0 0;position:relative;overflow:hidden}
.lband .dotlayer{position:absolute;inset:0;color:rgba(6,14,48,.42);pointer-events:none}
.lband blockquote{font-family:var(--serif);font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.35;
  margin:0;max-width:30ch;color:#fff;text-wrap:balance}
.lband .attrib{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#C7D4F5;margin:1rem 0 0}
.lband .attrib em{font-style:normal;text-transform:none;letter-spacing:.04em}

/* The two doorways. Both at the end, short on purpose: the detailed selling lives on the shop and
   lessons pages, and this page's job is the free teaching above them. */
.door{border:1px solid var(--line);padding:clamp(1.3rem,3vw,2rem);margin:1.4rem 0 0;max-width:760px}
.door h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 .6rem;line-height:1.05}
.door p{font-family:var(--serif);font-size:var(--readsize);line-height:1.6;color:var(--read);
  margin:0 0 1.3rem;max-width:56ch}
.door.lessons{border-color:var(--brass)}
.btn{display:inline-block;background:var(--chalk);color:#17161A;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.85rem 1.4rem;text-decoration:none}
.btn:hover{background:var(--cyan);color:#fff}

footer{padding:2.4rem 0}

/* On a phone the COLUMN is what sticks, not the frame inside it: a sticky element can only travel
   inside its own container, and the column is barely taller than the player. Moving the player in
   the page to sit under the tapped row was built first and had to go -- reparenting an iframe
   reloads it, so the player blanked and threw the selection away. What the column carries is
   trimmed instead; the highlighted row already says what is cued. */
@media(max-width:900px){
  .withplayer{grid-template-columns:1fr}
  .playercol{position:sticky;top:0;z-index:5;order:-1;background:var(--ink);
    padding:.3rem 0 .5rem;margin:0 0 .8rem;box-shadow:0 10px 18px -12px rgba(0,0,0,.9)}
  .playercol .nowline{display:none}
}