/* One type system for every page (2026-10-19). Loaded last, after every other stylesheet, so each role has exactly one style.
   Faces by role: GT Super Display Light for headings and titles; GT Super Text Book for words to read (Romee's letter, intro
   lines, notes, exercises, descriptions); Aeonik for interface (labels, dates, small print, buttons, menu).
   Scale (from 17px body): 14 small, 15 label, 17 body, 20 lead, 28 title, 36 to 48 section heading, 48 to 79 page heading,
   48 to 101 the hero line. Tracking follows size: large display tighter, body 0, small text slightly open. Leading follows size:
   about 1.0 to 1.1 on display, 1.2 on titles, 1.6 on serif reading text, 1.5 on interface text.
   The hero's own sizes (greeting, big line, date block) and the open phone menu are approved and left as they are. */

/* Headings. */
body .weeks-h1 { font-family: var(--display); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; }
body.hero-c .h2 { font-family: var(--display); font-weight: 300; line-height: 1.1; letter-spacing: -0.015em; }
body .wk-title, body .jr-h2, body .ss-wait, body .shelf > .h3, body .vid .rec-title {
  font-family: var(--display); font-weight: 300; font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }

/* Lead: the intro line under a page or section heading, and the line under "Your session". Serif, 20px, 17px on phones. */
body.hero-c .room-note, body .weeks-lead, body .ss-when {
  font-family: var(--serif); font-weight: 400; font-size: var(--text-letter); line-height: 1.6; letter-spacing: 0; color: var(--ink); text-wrap: pretty; }

/* Romee's letter: the same size as a lead, a little more leading because it runs longer. */
body.hero-c .letter, body.hero-c #journey .letter { font-family: var(--serif); font-size: var(--text-letter); line-height: 1.7; letter-spacing: 0; }

/* Reading text inside cards: notes, exercises, descriptions, the lines in the Zoom window and the notes card. Serif 17px. */
body .r-words, body .note-text, body .rec-note, body .ss-hint, body .ss-sub {
  font-family: var(--serif); font-weight: 400; font-size: var(--text-body); line-height: 1.6; letter-spacing: 0; }

/* Labels and dates: Aeonik 15px; a label that names a field is 500, a date or meta line is 400. */
body .r-kind, body .wk-now { font-family: var(--sans); font-weight: 500; font-size: var(--text-label); line-height: 1.5; letter-spacing: 0.005em; }
body .wk-dates, body .wk-date, body .jr-today, body .r-len, body .r-sub, body .note-date, body .ss-fallback, body .rec-meta {
  font-family: var(--sans); font-weight: 400; font-size: var(--text-label); line-height: 1.5; letter-spacing: 0.005em; }

/* Small print: Aeonik 14px, slightly open. */
body .sample-note, body .ss-status, body .foot, body .foot span, body .foot a, body .dd-sub, body .vid-len {
  font-family: var(--sans); font-size: var(--text-small); line-height: 1.5; letter-spacing: 0.01em; }

/* Buttons and tabs: Aeonik 500, 15px. */
body .btn, body .seg button { font-family: var(--sans); font-weight: 500; font-size: var(--text-label); letter-spacing: 0.005em; }

/* Writing fields: the serif at lead size, as the text will read later. */
body .jr-write textarea, body .ss-notes textarea { font-family: var(--serif); font-size: var(--text-letter); line-height: 1.6; }

/* Phones: body size for every lead, the letter and the writing fields (about 40 characters a line on 390px). */
@media (max-width: 640px) {
  body.hero-c .room-note, body .weeks-lead, body .ss-when,
  body.hero-c .letter, body.hero-c #journey .letter,
  body .jr-write textarea, body .ss-notes textarea { font-size: var(--text-body); line-height: 1.6; }
}

/* Week selector: the week name on the lead step (20px), the session line under it as small print. */
body .dd-week { font-family: var(--display); font-weight: 300; font-size: var(--text-letter); line-height: 1.2; letter-spacing: -0.005em; }

/* Romee's handwritten "Liefs, Romee" beside her portrait, at the end of her letter (2026-10-19). */
body.hero-c .sign { align-items: center; gap: 24px; }
body.hero-c .sign-hand { display: block; width: 150px; height: auto; }
@media (max-width: 640px) { body.hero-c .sign-hand { width: 120px; } body.hero-c .sign { gap: 16px; } }
/* The signature sits at the bottom right of the letter, as on a written letter (desktop; phones keep everything centred). */
@media (min-width: 641px) { body.hero-c #journey .sign { justify-self: end; margin-left: 0; margin-right: 48px; } }
/* A little smaller (2026-10-19). */
body.hero-c .sign-hand { width: 120px; }
@media (max-width: 640px) { body.hero-c .sign-hand { width: 100px; } }
/* Signature, final placement (2026-10-19): Romee's portrait centred under the letter, the handwriting just to the right of it
   and a little lower, on every width. */
body.hero-c #journey .sign { position: relative; display: block; justify-self: center; width: auto; margin-left: 0; margin-right: 0; padding-bottom: 56px; }
body.hero-c #journey .sign .portrait { display: block; margin: 0 auto; }
body.hero-c #journey .sign-hand { position: absolute; left: calc(100% + 4px); top: 44px; max-width: none; }
@media (max-width: 640px) { body.hero-c #journey .sign { padding-bottom: 48px; } body.hero-c #journey .sign-hand { top: 36px; } }
/* Room under the signature, so it never crowds the edge of the letter. */
body.hero-c #journey .sign { padding-bottom: 96px; }
@media (max-width: 640px) { body.hero-c #journey .sign { padding-bottom: 72px; } }
/* Signature below the portrait and to the right of it (its top starts under the photo). */
body.hero-c #journey .sign-hand { left: calc(100% - 8px); top: 84px; }
body.hero-c #journey .sign { padding-bottom: 136px; }
@media (max-width: 640px) { body.hero-c #journey .sign-hand { top: 84px; } body.hero-c #journey .sign { padding-bottom: 112px; } }

/* Signature as Romee drew it (Liefs romee1, 2026-10-19): her portrait where the circle was, centred under the letter, and
   "Liefs, Romee" above it to the right, at the sketch's proportions. --s is the signature's width; the photo is 0.479 of it,
   and the photo's centre sits 0.261 s left of and 0.650 s below the signature's top-left corner. */
body.hero-c #journey .sign { --s: 200px; --d: calc(var(--s) * 0.479); position: relative; display: block; justify-self: center;
  width: var(--d); height: var(--d); padding: 0; margin-top: calc(var(--s) * 0.650 - var(--d) / 2 + 32px); margin-bottom: 64px; margin-left: 0; margin-right: 0; }
body.hero-c #journey .sign .portrait { width: var(--d); height: var(--d); margin: 0; }
body.hero-c #journey .sign-hand { position: absolute; width: var(--s); max-width: none; height: auto;
  left: calc(var(--d) / 2 + var(--s) * 0.261); top: calc(var(--d) / 2 - var(--s) * 0.650); }
@media (max-width: 640px) { body.hero-c #journey .sign { --s: 160px; margin-bottom: 48px; } }
/* Phones: the photo and the signature are centred as one group, so the signature never runs off the screen. */
@media (max-width: 640px) { body.hero-c #journey .sign { transform: translateX(calc(var(--s) * -0.51)); } }
/* Signature beside the portrait (2026-10-19): the photo 15% larger, "Liefs, Romee" starting right next to it, the pair centred
   under the letter as one row. */
body.hero-c #journey .sign { --d: calc(var(--s) * 0.551); display: flex; align-items: center; gap: 16px; width: auto; height: auto;
  margin-top: 40px; transform: none; }
body.hero-c #journey .sign .portrait { flex: none; }
body.hero-c #journey .sign-hand { position: static; flex: none; }

/* Annick's portrait in the opening 15% larger (80 to 92px, phones 64 to 74px); Romee's handwriting 10px lower beside her photo. */
body.hero-c .hero .greet .portrait { width: 92px; height: 92px; }
@media (orientation: portrait) and (max-width: 600px) { body.hero-c .hero .greet .portrait { width: 74px; height: 74px; } }
body.hero-c #journey .sign-hand { position: relative; top: 10px; left: 0; }
/* 10px more room between Romee's photo and her handwriting (16 to 26px). */
body.hero-c #journey .sign { gap: 26px; }
/* Handwriting 15% smaller; the photo keeps its size. */
body.hero-c #journey .sign-hand { width: calc(var(--s) * 0.85); }
/* Annick's portrait matches Romee's (110px, phones 88px). */
body.hero-c .hero .greet .portrait { width: 110px; height: 110px; }
@media (orientation: portrait) and (max-width: 600px) { body.hero-c .hero .greet .portrait { width: 88px; height: 88px; } }
/* Handwriting 40px lower (10 to 50px), with 40px more room below the pair so it keeps clear of the letter's edge. */
body.hero-c #journey .sign-hand { top: 50px; }
body.hero-c #journey .sign { margin-bottom: 104px; }
@media (max-width: 640px) { body.hero-c #journey .sign { margin-bottom: 88px; } }

/* The TLT Portal logo replaces the name in the header (2026-10-19): 36px high on desktop, 30px on phones. */
body .coach-logo { display: block; width: auto; height: 36px; }
@media (max-width: 640px) { body .coach-logo { height: 30px; } }
/* Logo a step larger so the wordmark stays readable: 46px high on desktop, 36px on phones. */
body .coach-logo { height: 46px; }
@media (max-width: 640px) { body .coach-logo { height: 36px; } }

/* Stacked TLT Portal logo (emblem over wordmark, Fibonacci proportions, deeper taupe): 60px high in the header on desktop,
   48px on phones. */
body .coach-logo { height: 60px; }
@media (max-width: 640px) { body .coach-logo { height: 48px; } }
/* Keep the header as thin as before (about 78px desktop, 60px phone): the stacked logo is 52px / 44px high. */
body .coach-logo { height: 52px; }
@media (max-width: 640px) { body .coach-logo { height: 44px; } }
body .coach-logo { height: 46px; }
@media (max-width: 640px) { body .coach-logo { height: 44px; } }

/* Phone menu button: two fine lines, Apple style. The lines draw together into a cross when the menu opens. 44px touch target,
   lines 22px long and 1.5px thick, 7px apart, in the site's ink. */
.hero-page .menu-toggle { min-width: 44px; width: 44px; height: 44px; padding: 0; justify-content: center; align-items: center; margin-right: -11px; }
.menu-lines { position: relative; display: block; width: 22px; height: 12px; }
.menu-lines span { position: absolute; left: 0; width: 22px; height: 1.5px; border-radius: 1px; background: var(--ink); transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1); }
.menu-lines span:first-child { top: 1px; }
.menu-lines span:last-child { top: 9.5px; }
.menu-toggle[aria-expanded="true"] .menu-lines span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-lines span { transition: none; } }

/* Header logo: the horizontal lockup (sand feathers, site ink wordmark), 36px high on desktop and 30px on phones, so the wordmark
   is about 14px / 12px tall and readable. The stacked lockup stays for the login and the arrival. */
body .coach-logo { height: 36px; width: auto; }
@media (max-width: 640px) { body .coach-logo { height: 30px; } }

/* Phone header logo: smaller (26px high) with the small-size build (tighter letters, smaller gap), so the emblem and wordmark are
   both lighter in the 60px bar. The wordmark is still about 10px tall. */
@media (max-width: 640px) { body .coach-logo { height: 26px; } }

/* 10px more room between the time line and the Join on Zoom button in the opening (desktop 19 to 29px, phones 24 to 34px). */
body.hero-c .hero .session .btn { margin-top: 10px; }
@media (orientation: portrait) and (max-width: 600px) { body.hero-c .hero .session .btn { margin-top: 34px; } }
/* Another 20px between the time line and the Join on Zoom button (desktop 29 to 49px, phones 34 to 54px). */
body.hero-c .hero .session .btn { margin-top: 30px; }
@media (orientation: portrait) and (max-width: 600px) { body.hero-c .hero .session .btn { margin-top: 54px; } }