/* =========================================================================
   LEARN (/learn) — the guide
   Loaded after tokens.css + system.css. The chrome (.doc-topbar, .doc-back) and
   .btn come from system.css; this file owns the two-column reading layout and the
   sticky stage.

   The idea in one line: ONE square plate beside the prose, showing the
   illustration of the step being read. The six pictures are stacked in that one
   square and cross-fade, so the page reads as one thing being explained rather
   than as a gallery.

   Where the work is done: `position: sticky` for the pinning, and CSS for the
   fade. learn.js only puts `.is-current` on one image — there is no scroll
   library, nothing is pinned to the viewport, and the scroll is never hijacked.
   ========================================================================= */


/* --------------------------------------------------------------------------
   LAYOUT
   Wider than the legal documents (760px) because a column of prose has to sit
   beside a drawing; the prose column itself stays at a readable measure.
   -------------------------------------------------------------------------- */

.learn-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-xl) 5rem;   /* .doc-back is its first child */
}

.learn-head { max-width: 640px; margin-bottom: 3.5rem; }

/* No kicker above the title. It used to read GUIDE, to name the genre before the
   title named the subject — but it was the only page with one, and four public
   documents that open the same way are worth more than that cue. The `Article`
   JSON-LD still tells a crawler what this page is. */
.learn-title {
  font-family: var(--heading);
  font-size: var(--text-4xl); font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: var(--space-md);
}

.learn-sub {
  font-family: var(--body);
  font-size: var(--text-xl); line-height: 1.5;
  color: var(--ink-soft);
}

/* Prose left, stage right. The stage column is the narrower one: the drawing is
   the evidence, the words are the substance. */
.learn-lay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3.5rem;
  align-items: start;
}


/* --------------------------------------------------------------------------
   THE STAGE
   Sticky, centred in the viewport, and it carries the signature paper texture
   through .stage-surface's sibling treatment — kept local here because this
   surface is square and self-contained.
   -------------------------------------------------------------------------- */

.learn-stage {
  position: sticky;
  /* Centres the square in the viewport rather than pinning it to the top: the
     drawing should sit level with the paragraph being read. */
  top: calc(50vh - 190px);
  order: 2;                      /* prose first in the DOM, stage right visually */
  aspect-ratio: 1;
  display: grid; place-items: center;
  padding: var(--space-lg);
  background:
    radial-gradient(120% 120% at 30% 20%, rgb(var(--paper-rgb) / .9), transparent 70%),
    var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* THE PICTURES.
   One illustration per step (assets/imgs/learn/<step-id>.webp), all six stacked in
   the SAME grid cell so they occupy one square, and the current one fades in.

   No state enumeration: learn.js puts `.is-current` on the image whose
   `data-step` matches the step being read, so adding a step is a step in
   content/learn.json plus a file on disk — nothing to add here. This replaced a
   six-pair `[data-state="…"]` selector list, which was one more place to remember.

   FRAMED on purpose. The illustrations are generated on their own cream
   (~246,244,236) and the page is --paper (#FBF9F3); close, but not equal, and the
   six differ slightly from each other too. Flooding them to the token value leaves
   halos (their backgrounds carry a faint vignette), so the picture is presented as
   a framed plate instead and the difference reads as intentional. Art on a
   transparent background would let this border go — see tools/make_learn_art.py.

   `visibility` (not display) so the transition can run, and `transform`/`opacity`
   only — both compositor properties, so neither can reflow the page. */
.learn-art {
  grid-area: 1 / 1;
  width: 100%; height: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease),
              visibility var(--dur-slow);
}
.learn-art.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
}


/* --------------------------------------------------------------------------
   THE STEPS
   A real <ol>, so the numbering is structure rather than decoration; the visible
   number is a separate span because the counter has to sit in the margin.
   -------------------------------------------------------------------------- */

.learn-steps {
  order: 1;
  list-style: none;
  margin: 0; padding: 0;
  max-width: 62ch;
}

.learn-step {
  position: relative;
  padding: 0 0 3.5rem 3.5rem;
  scroll-margin-top: var(--space-xl);
}
/* The rule between steps is a hairline, per the design system's no-dashed
   rule — and it stops before the last step so the list does not end on a line. */
.learn-step:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
.learn-step:not(:first-child) { padding-top: 3.5rem; }

.learn-num {
  position: absolute; left: 0;
  font-family: var(--body);
  font-size: var(--text-2xs); font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-faded);
  /* Optically aligned with the cap height of the title beside it. */
  margin-top: .45rem;
}

/* The step the reader is on gets its number filled in. It is the only feedback
   the stage's change needs — the drawing already moved. */
.learn-step.is-current .learn-num { color: var(--burgundy); }

.learn-step-title {
  font-family: var(--heading);
  font-size: var(--text-2xl); font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-md);
}

.learn-body {
  font-family: var(--body);
  font-size: var(--text-md); line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-lg);
}

.learn-tips {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: var(--space-sm);
}
.learn-tips li {
  position: relative;
  padding-left: var(--space-lg);
  font-family: var(--body);
  font-size: var(--text-sm); line-height: 1.55;
  color: var(--ink-soft);
}
/* A crust dot rather than a bullet glyph: it lines up at any font size. */
.learn-tips li::before {
  content: '';
  position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--shortcrust-dk);
}


/* --------------------------------------------------------------------------
   CLOSING CTA
   One ink pill, per the Ink CTA Rule — the page taught something, so the only
   thing left to offer is doing it.
   -------------------------------------------------------------------------- */

.learn-cta {
  margin-top: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-lg);
}
.learn-cta p {
  font-family: var(--heading);
  font-size: var(--text-2xl);
  color: var(--burgundy);
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   One column, and the sticky stage becomes an inline drawing per step. Hiding it
   would remove the teaching; keeping it sticky in one column would park it over
   the text. So each step gets its own copy, showing its own state.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .learn-main { padding: var(--space-md) var(--space-lg) 3.5rem; }
  .learn-title { font-size: var(--text-3xl); }
  .learn-sub { font-size: var(--text-lg); }
  .learn-lay { grid-template-columns: 1fr; gap: var(--space-lg); }

  /* The shared stage is for the two-column reading order only. */
  .learn-stage { display: none; }

  .learn-steps { max-width: none; }
  .learn-step { padding-left: 0; }
  .learn-num { position: static; display: block; margin: 0 0 var(--space-xs); }

  /* The per-step picture, injected by learn.js on small screens only: a copy of
     that step's image from the stage, so the two can never diverge. It is always
     the current one here, hence the .is-current override — its own copy has no
     other state to be in. */
  .learn-step-art {
    margin: var(--space-lg) 0 0;
  }
  .learn-step-art .learn-art {
    opacity: 1; visibility: visible; transform: none;
  }
}

@media (max-width: 480px) {
  .learn-main { padding: var(--space-sm) var(--space-md) 2.5rem; }
  .learn-step { padding-bottom: 2.5rem; }
  .learn-step:not(:first-child) { padding-top: 2.5rem; }
  .learn-cta { flex-direction: column; align-items: flex-start; }
}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   The picture still CHANGES — it must keep matching the text it illustrates, or
   the page starts lying. Only the tween goes. system.css zeroes the --dur-*
   tokens, which covers the transition above; this block removes the entry
   displacement so nothing arrives from anywhere.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .learn-art { transform: none; transition: none; }
}