/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 * genre: playful · tone: warm and curious · theme: existing Carret identity
 * structure: sticky level index, three level panels threaded on one year line, ordered process, judgement prompts
 * nav: established N1b · footer: established Ft5 · no scroll reveals
 * source: the owner's level slides, shared with Home through content.mjs; practice demos are labelled separately
 */
@import url('/home.css');

.learning-page { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
.learning-page h1, .learning-page h2, .learning-page h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.learning-page h2 { font-size: var(--text-heading); line-height: 1.15; letter-spacing: -.035em; }
.learning-page p { color: var(--color-muted); }
.learning-page a:focus-visible, .learning-page button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
html:has(body.learning-page) { scroll-padding-top: calc(var(--height-site-nav) + var(--height-studio-nav) + var(--space-md)); }
.learning-page .hm-header nav a[aria-current]::after { display: none; }
.learning-page .hm-header nav a[aria-current] { text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 2px; color: var(--color-accent); }
.lj-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl) var(--space-2xl); }
.lj-intro h1 { font-size: clamp(2rem, 9.5vw, 2.5rem); line-height: 1.08; letter-spacing: -.04em; }
.lj-intro h1 span { color: var(--color-accent); }
.lj-intro p { max-width: 39ch; line-height: 1.65; }
.lj-year-range { white-space: nowrap; }
.lj-spark { --level-tint: var(--color-orange-soft); --level-accent: var(--color-orange); --level-ink: var(--color-ink); --level-copy: var(--color-muted); }
.lj-builder { --level-tint: var(--color-blue-soft); --level-accent: var(--color-accent); --level-ink: var(--color-accent-deep); --level-copy: var(--color-blue-dark); }
.lj-ninja { --level-tint: var(--color-purple-soft); --level-accent: var(--color-purple); --level-ink: var(--color-purple); --level-copy: var(--color-purple); }
/* The index shows all twelve years as one line and stays under the header while the levels scroll. */
.lj-index-bar { position: sticky; top: var(--height-site-nav); z-index: var(--z-section-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.lj-journey { --lj-pad: var(--space-lg); --lj-gap: var(--space-lg); --lj-year-col: 4rem; --lj-label-col: 4.5rem; --lj-line: 1.625rem; --lj-rail-left: calc(var(--lj-year-col) + var(--space-md) + (var(--space-sm) - var(--rule-strong)) / 2); }
.lj-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: var(--height-studio-nav); padding-inline: var(--lj-pad); }
.lj-index a { display: grid; align-content: center; gap: var(--space-xs); min-width: 0; color: var(--color-ink); }
.lj-index-name { display: flex; align-items: baseline; gap: var(--space-sm); min-width: 0; white-space: nowrap; }
.lj-index strong { font: 700 var(--text-base)/1.2 var(--font-display); letter-spacing: -.02em; }
.lj-index small { display: none; font-size: var(--text-sm); color: var(--color-muted); }
.lj-index-years { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; justify-items: start; transition: opacity var(--dur-short) var(--ease-out); }
.lj-index-years::before { content: ''; position: absolute; inset-inline: 0; top: calc(50% - var(--rule-strong) / 2); height: var(--rule-strong); background: var(--level-accent); }
.lj-index-years i { position: relative; width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-pill); background: var(--level-accent); }
.lj-index:has([aria-current]) a:not([aria-current]) { color: var(--color-muted); }
.lj-index:has([aria-current]) a:not([aria-current]) .lj-index-years { opacity: .4; }
.lj-index a:active strong { text-decoration: underline; text-underline-offset: .2em; }
/* Each level is a panel in its own colour. One year line runs through all three. */
.lj-levels { display: grid; gap: var(--lj-gap); padding-block: var(--space-xl) var(--space-2xl); }
.lj-level { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--lj-pad); border-radius: var(--radius-card); background: var(--level-tint); }
.lj-level-intro { min-width: 0; }
.learning-page .lj-level h2 { color: var(--level-ink); font-size: var(--text-display); line-height: 1; letter-spacing: -.04em; }
.lj-level h2 span { display: block; margin-top: var(--space-xs); color: var(--level-copy); font-size: var(--text-md); line-height: 1.3; letter-spacing: -.02em; }
.learning-page .lj-level-claim { margin-top: var(--space-lg); color: var(--color-ink); font: 700 var(--text-lg)/1.25 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.learning-page .lj-level-intro > p:last-child { margin-top: var(--space-md); max-width: 42ch; color: var(--level-copy); line-height: 1.65; }
.lj-level-made { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-lg); min-width: 0; }
.lj-level-made h3 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -.025em; }
.lj-years { position: relative; display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; }
.lj-years::before { content: ''; position: absolute; left: var(--lj-rail-left); top: calc(var(--lj-line) / 2); bottom: calc(25% - var(--lj-line) / 2); width: var(--rule-strong); background: var(--level-accent); }
.lj-years li { position: relative; display: grid; grid-template-columns: var(--lj-year-col) var(--space-sm) minmax(0, 1fr); column-gap: var(--space-md); align-items: baseline; padding-bottom: var(--space-lg); }
.lj-years li::before { content: ''; grid-column: 2; grid-row: 1; align-self: start; width: var(--space-sm); height: var(--space-sm); margin-top: calc((var(--lj-line) - var(--space-sm)) / 2); border-radius: var(--radius-pill); background: var(--level-accent); }
.lj-year { grid-column: 1; grid-row: 1; color: var(--level-ink); font: 700 var(--text-base)/var(--lj-line) var(--font-display); text-align: right; white-space: nowrap; }
.lj-years li > div { grid-column: 3; grid-row: 1; min-width: 0; }
.learning-page .lj-year-made { color: var(--color-ink); font: 700 var(--text-md)/var(--lj-line) var(--font-display); letter-spacing: -.02em; text-wrap: pretty; }
.lj-year-examples { display: grid; grid-template-columns: var(--lj-label-col) minmax(0, 1fr); align-items: start; margin-top: var(--space-2xs); }
.lj-year-label { color: var(--level-copy); font-size: var(--text-sm); font-weight: 800; line-height: var(--lj-line); }
.lj-year-links { display: grid; justify-items: start; min-width: 0; }
.lj-year-examples .hm-link { gap: var(--space-xs); min-height: var(--lj-line); font-size: var(--text-sm); line-height: 1.3; white-space: normal; }
@media (pointer: coarse) {
  .lj-year-label { line-height: 44px; }
  .lj-year-examples .hm-link { min-height: 44px; }
}
.lj-practice-note { font-size: var(--text-sm); padding-top: var(--space-xs); max-width: 78ch; }
.lj-process { padding-block: var(--space-2xl); background: var(--color-wash); }
.lj-process-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.lj-process-intro > p { max-width: 35ch; margin-top: var(--space-lg); line-height: 1.65; }
.lj-process-steps { list-style: none; margin: 0; padding: 0; }
.lj-process-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.lj-step-number { font-size: var(--text-sm); padding-top: var(--space-2xs); color: var(--color-muted); }
.lj-process-steps h3 { display: flex; gap: var(--space-sm); align-items: center; font-size: var(--text-md); line-height: 1.3; }
.lj-process-steps .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-accent); }
.lj-process-steps p { margin-top: var(--space-sm); max-width: 42ch; line-height: 1.6; }
.lj-process-steps li:last-child { padding-bottom: 0; }
.lj-judgement { background: var(--color-blue-dark); color: var(--color-paper); padding-block: var(--space-2xl); }
.lj-judgement-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.lj-judgement h2 { color: var(--color-paper); }
.lj-judgement-layout > div > p { color: var(--color-blue-soft); margin-top: var(--space-lg); max-width: 40ch; }
.lj-judgement .hm-link { color: var(--color-paper); margin-top: var(--space-lg); }
.learning-page .lj-judgement a:focus-visible { outline-color: var(--color-paper); }
.lj-questions { display: flex; flex-direction: column; gap: var(--space-lg); justify-content: center; }
.lj-judgement .lj-questions p { font: 700 var(--text-lg)/1.3 var(--font-display); color: var(--color-paper); margin: 0; }
.lj-questions > span { color: var(--color-blue-soft); font-size: var(--text-sm); }
.learning-page .hm-footer { background: var(--color-orange-soft); padding-block: var(--space-2xl) var(--space-lg); }
.learning-page .hm-footer-invite p { color: var(--color-ink); }

@media (hover: hover) and (pointer: fine) {
  .lj-index a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
}
@media (prefers-reduced-motion: reduce) {
  .lj-index-years { transition: none; }
}
@media (min-width: 40rem) {
  .lj-intro h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
  .lj-index small { display: block; }
  .lj-index strong { font-size: var(--text-md); }
  .lj-index-years i { width: var(--space-sm); height: var(--space-sm); }
  .lj-journey { --lj-pad: var(--space-xl); }
  .learning-page .lj-level-claim { font-size: var(--text-xl); line-height: 1.2; }
}
@media (min-width: 60rem) {
  .lj-intro { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: end; padding-block: var(--space-xl) var(--space-2xl); }
  .lj-intro p { font-size: 1.125rem; }
  .lj-index strong { font-size: var(--text-lg); }
  .lj-journey { --lj-pad: var(--space-2xl); --lj-gap: var(--space-xl); --lj-year-col: 5rem; --lj-line: 1.875rem; }
  .lj-levels { padding-block: var(--space-2xl) var(--space-3xl); }
  .lj-level { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-2xl); }
  .lj-level-intro { position: sticky; top: calc(var(--height-site-nav) + var(--height-studio-nav) + var(--space-lg)); align-self: start; }
  .learning-page .lj-level-intro > p:last-child { font-size: var(--text-md); line-height: 1.5; }
  /* The heading sits to the right of the line, and the line joins each panel to the next. */
  .lj-level-made h3 { margin-left: calc(var(--lj-year-col) + var(--space-sm) + var(--space-md) * 2); }
  .lj-builder .lj-level-made::before, .lj-ninja .lj-level-made::before { content: ''; position: absolute; left: var(--lj-rail-left); top: calc((var(--lj-pad) + var(--lj-gap) / 2) * -1); bottom: 0; width: var(--rule-strong); background: var(--level-accent); }
  .lj-spark .lj-years::before, .lj-builder .lj-years::before { bottom: calc((var(--lj-pad) + var(--lj-gap) / 2) * -1); }
  .lj-year { font-size: var(--text-md); }
  .learning-page .lj-year-made { font-size: var(--text-lg); }
  .lj-process, .lj-judgement { padding-block: var(--space-3xl); }
  .lj-process-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-3xl); }
  .lj-process-steps li:first-child { padding-top: 0; border-top: 0; }
  .lj-process-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-lg); }
  .lj-process-steps h3 { font-size: var(--text-lg); }
  .lj-judgement-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-3xl); }
  .lj-judgement .lj-questions p { font-size: 1.75rem; }
  .learning-page .hm-footer { padding-top: var(--space-3xl); }
}