/* Studio notes. Loads after studio.css and reuses its tokens, header, footer and type scale.
   Every hidden or undrawn state below is set by script (.notes-boot, .notes-motion), so the page reads fully without JavaScript. */
.notes-head{padding-top:96px;padding-bottom:64px}
.notes-kicker{font-size:13px;color:var(--muted)}
.notes-head h1{margin-top:30px;max-width:1100px}
.notes-lede{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:end;margin-top:60px}
.notes-lede .large-copy,.notes-lede .body-copy{margin-top:0}

.lessons{padding-top:40px;padding-bottom:40px}
.lessons h2,.films h2{font-size:29px;letter-spacing:-.025em}
.lesson-list{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px}
.lesson-list li{border-top:1px solid #bec8bf;padding-top:22px}
.lesson-tag,.entry-tag{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lesson-list h3{font-size:21px;margin-top:12px;line-height:1.3}
.lesson-list p{font-size:14px;color:var(--muted);margin-top:10px}

.journal{padding-top:110px}
.journal-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.journal-heading p{color:var(--muted);font-size:15px;max-width:360px}

/* The rule runs the full height of the list; --draw (0–1) is scrubbed by notes.js and defaults to fully drawn. */
.timeline{--rail:7px;list-style:none;margin:80px 0 0;padding:0;position:relative}
.timeline:before,.timeline:after{content:'';position:absolute;left:var(--rail);top:10px;bottom:0;width:1px;background:#bec8bf}
.timeline:after{width:2px;margin-left:-.5px;background:var(--accent);transform:scaleY(var(--draw,1));transform-origin:top}
.entry{position:relative;padding:0 0 120px 72px}
.entry:last-child{padding-bottom:0}
.entry article{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.entry-dot{position:absolute;left:calc(var(--rail) - 6px);top:5px;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--accent);z-index:1;transition:background .4s,border-color .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.entry-key .entry-dot{box-shadow:0 0 0 5px var(--ground),0 0 0 6px var(--accent)}
.notes-motion .entry-dot{background:var(--ground);border-color:#9eafa2}
.notes-motion .entry.reached .entry-dot{background:var(--accent);border-color:var(--accent);transform:scale(1.15)}
.entry-meta{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.4}
.entry-meta time{font-weight:600}
.entry-undated{color:var(--muted)}
.entry-copy h3{font-size:clamp(26px,2.2vw,34px);line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.entry-copy p{font-size:16px;margin-top:18px;max-width:560px}
.entry-copy p+p{margin-top:14px}
.entry-copy .entry-limit{font-size:13px;color:var(--muted)}
.entry-figure{margin:0}
.entry-figure img{width:100%;height:auto;background:var(--mist)}
.entry-figure figcaption{font-size:11px;color:var(--muted);margin-top:10px}

.films{padding-top:40px;padding-bottom:80px}
.film-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:48px;margin-top:40px}
.films-empty{grid-column:1/-1;font-size:17px;color:var(--muted);border-top:1px solid #bec8bf;padding-top:22px}
.film video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink);object-fit:contain}
.film video:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.film time{display:block;font-size:12px;color:var(--muted);margin-top:16px}
.film h3{font-size:21px;margin-top:4px}
.film p{font-size:14px;color:var(--muted);margin-top:8px}
.films+.studio-note{padding-top:40px}

/* Boot state from the inline head script: the page head waits for its intro, and CSS reveals it after 3 s if the intro never starts. */
.notes-boot .notes-head>*{opacity:0;animation:fm-reveal 0s 3s forwards}

@media(max-width:1100px){
  .entry article{grid-template-columns:150px minmax(0,1fr);gap:28px 40px}
  .entry-figure{grid-column:2}
  .lesson-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
}
@media(max-width:700px){
  .notes-head{padding-top:56px;padding-bottom:40px}
  .notes-head h1{margin-top:22px}
  .notes-lede{display:block;margin-top:32px}
  .notes-lede .body-copy{margin-top:22px}
  .lessons{padding-top:24px}
  .lesson-list{grid-template-columns:1fr;gap:28px;margin-top:26px}
  .journal{padding-top:70px}
  .journal-heading{display:block}
  .journal-heading p{margin-top:18px;font-size:14px}
  .timeline{--rail:6px;margin-top:48px}
  .entry{padding:0 0 76px 34px}
  .entry article{display:block}
  .entry-meta{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
  .entry-copy{margin-top:12px}
  .entry-copy h3{font-size:26px}
  .entry-copy p{font-size:15px;margin-top:14px}
  .entry-figure{margin-top:24px}
  .films{padding-top:24px}
  .film-list{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){.entry-dot{transition:none}}