/* YOU.0 — THE ACADEMY.
   Orientation → Domains → Series → Modules. The page has to make the hierarchy
   legible at a glance, so the shape of the type does the work: the Series
   number is set huge in the mark face, Modules are a numbered ledger, and the
   status word is always a small chip rather than an apology. Tools of Light
   read differently from Codes — a live gradient, because a Code is something
   you run and Tools of Light are capacities you carry. */

/* ── Status chips ───────────────────────────────────────────────────────── */
.stage {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: .38em .85em .34em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  /* Painted, not glassed — a stage badge is a static surface. */
  background: linear-gradient(158deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase;
  line-height: 1; white-space: nowrap; color: var(--fg-2);
}
/* On a Domain tile the status is not a chip at all — no bubble, no hairline,
   just the word, running the Domain's own gradient. Written at the same weight
   as the tile's own chip rule, which would otherwise grey it. */
.card-domain__foot .stage--domain, .stage--domain {
  border: 0; padding: 0; background: transparent;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--accent, var(--fg-2));
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .card-domain__foot .stage--domain, .stage--domain {
    background-image: linear-gradient(100deg, var(--accent, currentColor), var(--accent-2, var(--accent, currentColor)));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.stage--live { border-color: var(--cyan); color: var(--cyan); }
.stage--available, .stage--free { border-color: var(--electric); color: var(--electric); }
.stage--coming_online { border-color: var(--violet); color: var(--violet); }
.stage--in_development { border-color: var(--line-strong); color: var(--fg-3); }
.stage--locked { border-color: var(--line-strong); color: var(--fg-3); }
.stage--working { border-style: dashed; color: var(--fg-3); }
.stage--count { border-color: var(--line); color: var(--fg-3); }
.env--dark .stage--free { border-color: var(--cyan); color: var(--cyan); }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center;
  font-size: var(--fs-hud); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 1.4rem;
}
.crumbs a:hover { color: var(--fg); }
.crumbs span { opacity: .5; }

/* ── Hub hero ───────────────────────────────────────────────────────────── */
.aca-hero { position: relative; overflow: hidden; }
/* Every Domain's plate, stacked, one lit at a time. They cross-fade rather
   than cut: for the length of the transition two are on screen together, the
   arriving one coming up as the leaving one goes down. */
.aca-hero__art { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.aca-hero__plate { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.aca-hero__plate.is-on { opacity: 1; }
.aca-hero__plate .art, .aca-hero__plate img { width: 100%; height: 100%; object-fit: cover; }
/* A slow drift, so a plate that holds for six seconds is never quite still. */
.aca-hero--rotating .aca-hero__plate.is-on img { animation: aca-drift 9s linear both; }
@keyframes aca-drift { from { transform: scale(1.03); } to { transform: scale(1.07); } }
/* The type sits left, so the wash is weighted left and lets the rest of the
   plate through — the plates are the point of the band. */
.aca-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(4,5,7,.93) 0%, rgba(4,5,7,.84) 30%, rgba(4,5,7,.6) 50%, rgba(4,5,7,.34) 68%, rgba(4,5,7,.2) 100%),
    linear-gradient(180deg, rgba(4,5,7,.6) 0%, transparent 26%, transparent 56%, rgba(4,5,7,.8) 100%);
}
.aca-hero__art ~ .aca-hero__inner { position: relative; z-index: 1; }
.aca-hero__art ~ .aca-hero__inner .aca-hero__title,
.aca-hero__art ~ .aca-hero__inner .aca-hero__sub,
.aca-hero__art ~ .aca-hero__inner .aca-hero__intro,
.aca-hero__art ~ .aca-hero__inner .eyebrow,
.aca-hero__art ~ .aca-hero__inner .hud-list { text-shadow: 0 1px 22px rgba(4,5,7,.95), 0 1px 4px rgba(4,5,7,.85); }
@media (prefers-reduced-motion: reduce) {
  .aca-hero__plate { transition: none; }
  .aca-hero--rotating .aca-hero__plate.is-on img { animation: none; }
}
.aca-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-top: calc(var(--nav-h) + clamp(3rem, 9vw, 7rem));
  padding-bottom: clamp(3rem, 8vw, 6.5rem);
}
.aca-hero__text { max-width: 46rem; }
.aca-hero__title {
  margin-top: 1.1rem; display: grid;
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(2.6rem, 8.5vw, 6.6rem); letter-spacing: .09em; line-height: .95;
}
.aca-hero__sub {
  /* The line break in this line is deliberate content, not markup: whoever
     edits it in the admin decides where it falls. */
  white-space: pre-line;
  margin-top: 1.1rem; max-width: 40rem;
  font-size: clamp(.72rem, 1.1vw, .86rem); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--fg-2);
}
.aca-hero__intro { margin-top: 1.6rem; }
.aca-hero__intro .prose { max-width: 40rem; }
/* Quieter. Arian: "have the regulate-expand smaller." It is the order of
   operations standing beside the page, not a heading — it should read as a
   margin note. */
.aca-hero__side { display: grid; gap: var(--s-3); justify-items: end; text-align: right; }
.aca-hero__side .hud-list { font-size: .5rem; letter-spacing: .26em; opacity: .78; gap: .2rem; }
.aca-hero__side .hud-list { justify-items: end; }
.aca-hero__side .rule { width: 68px; justify-self: end; }

/* ── The four-rung ladder ───────────────────────────────────────────────── */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ladder__step { border-right: 1px solid var(--line); }
.ladder__step:last-child { border-right: 0; }
/* A COLUMN, so the meter can be pushed to the floor of the rung.
   Arian, 2026-09-21: "the progress bar should always show in the same exact
   line down there." It used to follow the description, and the descriptions
   are different lengths — 200 INTEGRATE wraps to two lines where 100 ACTIVATE
   takes one — so the bars sat at different heights across the bar. The rungs
   are already stretched to a common height by the grid above, so margin-top
   auto on the meter lands every one of them on the same line. */
.ladder__step > a, .ladder__step > span { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); padding: 1.2rem clamp(.7rem, 1.4vw, 1.3rem) 1.4rem; height: 100%; }
.ladder__step > a { transition: background var(--t-fast) var(--ease); }
.ladder__step > a:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
/* .ladder__step.is-current lives in academy-next.css:576, which overrides both
   halves of what used to be here on every page that renders a ladder. */
/* THE NUMBER AND THE NAME ON ONE LINE, sharing a baseline the way the band
   heading below the bar does. The number keeps its own width — see the
   gradient block further down, which depends on this element never being
   stretched by its parent. */
/* TOPS ALIGNED, not baselines. Arian, 2026-09-21: "RESET, ACTIVATE, INTEGRATE,
   INITIATE could be a little bigger and they need to be up a little higher,
   just like they are down below. The RESET is set in the center of the number."
   Measured: the band has titleTop - numTop = 0, the rung had 13 — which is
   what read as centred. flex-start puts the rung on the band's footing. */
/* THE S STARTS WHERE THE ZERO STARTS. Arian, 2026-09-21: "SERIES needs to line
   up with the very left of the first zero — that's where the S needs to start."
   The boxes were already flush at the same x; what is not flush is the INK.
   Qubed carries a left side bearing of about .05em, so at 38.4px the zero's
   stroke began 1.8px inside its box while the S began at the box edge, and the
   label hung out to the left of the numeral above it. Pulling the numeral left
   by its own bearing lines the ink up instead of the boxes. In em, so it holds
   at every size the clamp produces. */
.ladder__num, .aca-sband__num { margin-left: -.05em; }

.ladder__head { display: flex; align-items: flex-start; gap: .45em; min-width: 0; }
.ladder__num { font-size: clamp(1.5rem, 3vw, 2.4rem); flex: 0 0 auto; }   /* colour: see the gradient block below */
/* margin-top nudges it off the very top of the numeral. flex-start alone put
   the cap line 4.6px below the number's box top, which read as sitting ON the
   top edge; baseline alignment put it 13px down, which read as centred and
   low. Arian wanted it between: "from the top to the bottom of the zero it
   needs to come down a little bit." .2em of its own size lands the caps on
   the numeral's optical centre. */
/* Never broken inside the word (BRAND-RULES §4: INTEGRATE was drawn
   INTEGRAT / E four across on an iPad). The step is the container; the name
   and its number size to it. */
.ladder__step { container-type: inline-size; }
.ladder__title { margin-top: .2em; font-family: var(--font-display); font-weight: 300; text-transform: uppercase; font-size: min(clamp(.95rem, 1.6vw, 1.35rem), 7.4cqw); letter-spacing: .07em; line-height: 1; color: var(--fg); min-width: 0; white-space: nowrap; }
/* The constant word, in the slot the Series' own name used to hold. */
.ladder__name { font-size: var(--fs-hud); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.ladder__line { font-size: var(--fs-small); color: var(--fg-3); line-height: 1.45; }
.ladder--static { border-top-color: var(--line); }
.aca-ladder { padding-block: 0; }
.aca-ladder .ladder { border-bottom: 1px solid var(--line); }

/* ── Domain cards ───────────────────────────────────────────────────────── */
.grid--domains { --min: 340px; }
.card-domain { position: relative; background: var(--ink); color: var(--white); overflow: hidden; border-radius: var(--r-soft); }
.card-domain .card__link { display: grid; grid-template-rows: 1fr auto; min-height: 340px; }
/* ── The lock badge ──────────────────────────────────────────────────────
   A small rounded tile in the Domain's own gradient, sitting above the art in
   the top right corner, with a white padlock in it. Arian sent an app icon as
   the reference: a soft-cornered square, a diagonal ramp, one white mark
   centred in it, and a glow underneath rather than a hard shadow.

   The gradient is --accent -> --accent-2, set per card, so a shut Domain wears
   its own colour rather than a generic grey. 28% is the corner radius an iOS
   icon uses; it reads as "an app tile" rather than "a rounded box".
   The inset highlight along the top edge is what stops it looking flat. */
/* GLASS, NOT AN APP ICON. Arian, 2026-09-21: "it looks too gimmicky — make
   the panel a dark grey, a glass background, and only the lock icon is the
   colour gradient."
   The first version was a filled accent square with a coloured glow and a
   white glyph, which read as a downloaded app dropped onto the artwork. The
   tile is now the same dark glass the brand guide gives to controls, and all
   the colour has moved into the lock, where the Domain's two accents run
   across the glyph via a <linearGradient> inside each badge's own svg. */
.card-domain__badge {
  position: absolute; z-index: 2;
  top: clamp(.8rem, 1.6vw, 1.1rem); right: clamp(.8rem, 1.6vw, 1.1rem);
  width: clamp(30px, 3.4vw, 38px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 28%;
  background: rgba(26, 28, 33, .42);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}
.card-domain__badge svg { width: 58%; height: auto; }
/* The card lifts on hover; the badge lifts with it rather than sitting still. */
.card-domain .card__link:hover .card-domain__badge { transform: translateY(-1px); }
.card-domain__badge { transition: transform var(--t-fast) var(--ease); }
@media (prefers-reduced-motion: reduce) { .card-domain__badge { transition: none; } }

.card-domain__art { position: absolute; inset: 0; z-index: 0; }
.card-domain__art .art, .card-domain__art img { width: 100%; height: 100%; object-fit: cover; }
.card-domain__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,5,7,.25) 0%, rgba(4,5,7,.72) 58%, rgba(4,5,7,.94) 100%); }
.card-domain__text { position: relative; z-index: 1; align-self: end; padding: 1.2rem 1.2rem 0; }
/* NO.01, NO.02 … stay in the Domain's own colour, hover or not. */
.card-domain__num { font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: var(--accent, var(--cyan)); }
.card-domain__title {
  margin-top: .5rem;
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem); letter-spacing: .05em; line-height: 1.08;
  overflow-wrap: break-word; hyphens: none;
}
.card-domain__sub { margin-top: .45rem; font-size: var(--fs-small); color: rgba(255,255,255,.72); }
/* Hovering a Domain lifts its name out of the white and into the colour of its
   own picture — SYSTEM RESET's magenta, RELATIONSHIPS' yellow-green, and so
   on. The colour is the entry's own accent field, so Ana can change it in the
   admin without anyone touching CSS. */
.card-domain__title { transition: color var(--t-fast) var(--ease); }
.card-domain:hover .card-domain__title,
.card-domain:focus-within .card-domain__title { color: var(--accent, var(--electric)); }
.card-domain__tf { margin-top: .6rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: rgba(255,255,255,.55); }
.card-domain__foot { position: relative; z-index: 1; display: flex; gap: var(--s-1); flex-wrap: wrap; padding: 1rem 1.2rem 1.3rem; }
.card-domain__foot .stage { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
.card-domain--orientation .card__link { min-height: 300px; }
.aca-orientation { margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.aca-orientation .card-domain__title { font-size: clamp(1.3rem, 2.6vw, 2.1rem); max-width: 22ch; }
@media (min-width: 760px) { .aca-orientation .card-domain .card__link { min-height: 260px; } }

/* ── Domain page ────────────────────────────────────────────────────────── */
.aca-dhero, .aca-shero, .aca-mhero { position: relative; overflow: hidden; }
.aca-dhero__media { position: absolute; inset: 0; z-index: -1; }
.aca-dhero__media .art, .aca-dhero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Write OVER the picture, do not cover it.
   The first plates had quiet dark space on the left, so a left-weighted veil
   was enough. RELATIONSHIPS does not — its two figures fill the frame — and the
   same veil buried one of them. So the wash is now light enough to keep the
   whole plate readable, and the type carries its own shadow instead, the way
   the homepage hero does. */
.aca-dhero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(4,5,7,.88) 0%, rgba(4,5,7,.68) 26%, rgba(4,5,7,.36) 44%, rgba(4,5,7,.1) 58%, transparent 72%),
    linear-gradient(180deg, rgba(4,5,7,.4) 0%, transparent 22%, transparent 62%, rgba(4,5,7,.6) 100%);
}
/* A short Domain would otherwise crop a 3:2 plate down to a letterbox — the
   height is the plate's, not the paragraph's. */
.aca-dhero__media ~ .aca-dhero__inner { min-height: min(82vh, 720px); display: grid; align-content: center; }
/* With a picture behind it the type keeps to its own column — capped on the
   lines, not on the wrap, or the wrap re-centres and the type drifts inward. */
.aca-dhero__media ~ .aca-dhero__inner > * { max-width: min(44rem, 54%); }
/* 54% of a phone is about 192px — barely wider than the word IDENTITY, which
   pushed the + of IDENTITY + CREATION onto a line of its own and squeezed the
   paragraph to a 24-character measure while half the screen stayed empty.
   The veil and the type's own shadow carry the words the rest of the way. */
@media (max-width: 760px) {
  .aca-dhero__media ~ .aca-dhero__inner > * { max-width: 88%; }
}
/* On a plate, the dim third-level grey has no margin: measured over the
   IDENTITY + CREATION artwork the body paragraph and the PRIMARY
   TRANSFORMATION label fall to about 4:1, under the 4.5:1 readable bar, right
   where the orange glow crosses the text column. Lift both a step rather than
   thicken the veil — the picture stays uncovered, which is the house rule. */
.aca-dhero__media ~ .aca-dhero__inner .aca-dhero__purpose,
.aca-dhero__media ~ .aca-dhero__inner .aca-dhero__tf em { color: var(--fg-2); }
/* NO FLOOR. A clamp's minimum is a promise the viewport cannot always keep,
   and this title is a single unbreakable word that cannot wrap out of
   trouble: at 1.8rem, RELATIONSHIPS was 394px of ink in 346px of measure.

   The size is derived from the WIDEST name, which is not the one that was
   reported. Measured in this face at this tracking:

     CONSCIOUSNESS   12.08em      ← the binding constraint
     RELATIONSHIPS   11.18em
     OPERATING        8.16em      (Orientation's longest word)

   Sized against the TITLE'S OWN CONTAINER, not the viewport. vw was wrong
   because the measure is not a fixed share of the window: RELATIONSHIPS has
   346px of it at 390 and CONSCIOUSNESS only 311, so any vw figure that fits
   one overflows the other. 1cqi is 1% of the container, whatever it is.

   And the title only gets 88% of that container — the hero's children carry
   a max-width to hold the text measure — so the sum is
   100 / 12.08 * 0.88 = 7.29cqi. 6.9 leaves a margin, and the 3.1rem cap still
   holds the size down on a large screen. */
.aca-dhero__inner { container-type: inline-size; }
.aca-dhero__media ~ .aca-dhero__inner .aca-dhero__title { font-size: min(6.9cqi, 3.1rem); }
/* Without container queries the viewport figure is the safe fallback. */
@supports not (font-size: 1cqi) {
  .aca-dhero__media ~ .aca-dhero__inner .aca-dhero__title { font-size: min(6.2vw, 3.1rem); }
}
/* Its own shadow, so it reads on whatever the plate puts behind it. */
.aca-dhero__media ~ .aca-dhero__inner .aca-dhero__title,
.aca-dhero__media ~ .aca-dhero__inner .aca-dhero__sub,
.aca-dhero__media ~ .aca-dhero__inner .aca-dhero__goal,
.aca-dhero__media ~ .aca-dhero__inner .aca-dhero__purpose,
.aca-dhero__media ~ .aca-dhero__inner .aca-dhero__tf,
.aca-dhero__media ~ .aca-dhero__inner .crumbs {
  text-shadow: 0 1px 2px rgba(4, 5, 7, .85), 0 2px 18px rgba(4, 5, 7, .7), 0 0 44px rgba(4, 5, 7, .55);
}
.aca-dhero__inner, .aca-shero__inner, .aca-mhero__inner {
  padding-top: calc(var(--nav-h) + clamp(2.2rem, 6vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  max-width: 62rem;
}
/* DOMAIN NO.01 on the Domain page takes the same colour as its tile. Series
   and Module heroes carry no accent of their own, so they stay cyan. */
.aca-dhero__num, .aca-shero__num, .aca-mhero__num, .aca-lhero__num { font-size: var(--fs-hud); letter-spacing: var(--track-hud); color: var(--accent, var(--cyan)); }
/* THE NUMERAL CARRIES IT. Arian, 2026-09-21: "01 needs to be bigger above the
   main Module titles." The word MODULE stays at HUD size — it is a label —
   and the number it labels grows, the way NO.01 does over a Domain. em, so it
   tracks whatever the line around it is set at. */
.aca-mhero__num .mark-num, .aca-mbody__num .mark-num,
.aca-lhero__num .mark-num, .aca-lbody__num .mark-num { font-size: 2.1em; line-height: 1; vertical-align: -.16em; letter-spacing: .04em; }
/* The Domain's eyebrow is set in the UI face, which has true lowercase — the
   mark face does not, whatever the string says. */
.aca-dhero__num { font-family: var(--font-ui); font-weight: 400; text-transform: none; }
.aca-dhero__title, .aca-shero__title, .aca-mhero__title {
  margin-top: .8rem;
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(2.3rem, 6.5vw, 5rem); letter-spacing: .08em; line-height: .98;
}
.aca-shero__title em, .aca-sband__title em { font-style: normal; color: var(--fg-3); }
.aca-dhero__sub, .aca-shero__sub { margin-top: .9rem; font-size: clamp(.8rem, 1.3vw, 1rem); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg-2); }
.aca-dhero__tf { margin-top: 1.1rem; font-size: var(--fs-hud); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-2); }
.aca-dhero__tf em { font-style: normal; display: block; color: var(--fg-3); margin-bottom: .3em; }
.aca-dhero__chips, .aca-shero__chips, .aca-mhero__chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 1.3rem; }
.aca-dhero__goal, .aca-shero__purpose, .aca-mhero__sum { margin-top: 1.5rem; max-width: var(--readw); font-size: clamp(1rem, .5vw + .9rem, 1.18rem); line-height: 1.6; color: var(--fg-2); }
.aca-dhero__purpose { margin-top: 1rem; max-width: var(--readw); color: var(--fg-3); font-size: var(--fs-small); line-height: 1.65; }
/* A Domain with no goal line has its purpose as the only prose in the hero.
   Set as the dim secondary it read 2.4x weaker than every other Domain's lead
   — a styling accident, not a decision. It leads, so it is set as the lead. */
/* ── THE DOMAIN HERO SETS ITS OWN RHYTHM ─────────────────────────────────
   rhythm.css:27 is `.wrap > * + * { margin-top: var(--gap-blocks) }`, and this
   hero's inner element carries `wrap` — so every line in the stack was handed
   the same 32px and the per-element margins written below were dead. Measured
   at 1440 before this: num->title 32, title->sub 32, sub->tf 32, tf->purpose
   32, all four identical, which is why the hero read as five unrelated lines
   rather than two groups.

   This is the FOURTH component rhythm.css has silently overridden (.fc__title
   and .aca-dhero__title twice before). Rather than add a fifth exception to a
   :not() chain somewhere, this hero opts out once and owns its own spacing.
   Doubled class beats .wrap > * + * on specificity whatever the load order.

   Arian, 2026-09-21: "the no.01 should be closer and bigger on top of SYSTEM
   RESET, and bring NERVOUS SYSTEM + REGULATION below it closer. PRIMARY
   TRANSFORMATION / REACTIVE -> RESPONSIVE is bigger and closer on top of the
   supporting paragraph." Two groups: what this Domain IS, then what it DOES. */
.aca-dhero__inner.wrap > * + * { margin-top: 0; }

.aca-dhero__inner .aca-dhero__num {
  font-size: clamp(1rem, 1.5vw, 1.35rem);   /* was --fs-hud, 10.56px at 1440 */
  letter-spacing: .06em;
}
.aca-dhero__inner .aca-dhero__title { margin-top: .1rem; }
.aca-dhero__inner .aca-dhero__sub { margin-top: .5rem; }
/* The group break — the only real gap in the stack. */
/* Arian, 2026-09-21: "bring PRIMARY TRANSFORMATION down one more line, make
   PRIMARY TRANSFORMATION white, and make REACTIVE -> RESPONSIVE the pink
   gradient instead." The label and the value swap roles: the label is the
   quiet white caption, the value carries the Domain's colour. */
.aca-dhero__inner .aca-dhero__tf {
  margin-top: 3rem;                          /* one more line above it */
  font-size: clamp(.9rem, 1.3vw, 1.1rem);    /* was --fs-hud */
}
.aca-dhero__inner .aca-dhero__tf em { margin-bottom: .3em; color: var(--fg); }
.aca-dhero__tf-v { display: inline-block; color: var(--accent, var(--fg)); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .aca-dhero__tf-v {
    width: fit-content;
    background-image: linear-gradient(90deg, var(--accent, var(--fg)) 0%, var(--accent-2, var(--accent, var(--fg))) 100%);
    background-size: calc(100% - .12em) 100%; background-repeat: no-repeat;
    /* the padding guard, for the same reason as the Series numbers: a tile is
       only painted inside the element's box, so ink that overruns the line box
       would simply vanish. */
    padding-block: .14em; margin-block: -.14em;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.aca-dhero__inner .aca-dhero__purpose { margin-top: .6rem; }
.aca-dhero__inner .aca-more, .aca-dhero__inner .crumbs { margin-top: 1.5rem; }

.aca-dhero__purpose--lead { margin-top: 1.5rem; color: var(--fg-2); font-size: clamp(1rem, .5vw + .9rem, 1.18rem); line-height: 1.6; }
.aca-shero__q, .aca-sband__q { margin-top: 1rem; max-width: var(--readw); color: var(--fg-2); font-size: var(--fs-small); }
.aca-shero__q em, .aca-sband__q em, .aca-key em { font-style: normal; display: block; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); margin-bottom: .35em; }
/* THIS SERIES ANSWERS runs the ramp. Arian, 2026-09-21: "have THIS SERIES
   ANSWERS be in the gradient colour as well." KEY OUTCOME shares the rule
   above but not this one — he named the one label. Flat accent first, for
   anything that cannot paint text; fit-content because background-clip sizes
   the gradient to the box and these are block elements the width of the
   column. */
.aca-shero__q em, .aca-sband__q em { color: var(--accent, var(--fg-3)); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .aca-shero__q em, .aca-sband__q em {
    width: fit-content;
    background-image: linear-gradient(90deg, var(--accent, var(--fg-3)) 0%, var(--accent-2, var(--accent, var(--fg-3))) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

.aca-more { margin-top: 1.2rem; max-width: var(--readw); border-top: 1px solid var(--line); }
.aca-more > summary { cursor: pointer; padding: .9rem 0; font-size: var(--fs-hud); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-2); list-style: none; }
.aca-more > summary::-webkit-details-marker { display: none; }
.aca-more > summary::after { content: ' +'; color: var(--fg-3); }
.aca-more[open] > summary::after { content: ' –'; }
.aca-more .prose { padding-bottom: 1rem; }

/* ── A Series band on the Domain page ───────────────────────────────────── */
.aca-sband { border-top: 1px solid var(--line); }
/* One stack, left-aligned, exactly like a ladder rung. */
.aca-sband__head { display: block; }
.aca-sband__line1 { display: flex; align-items: flex-start; gap: .4em; flex-wrap: wrap; }
/* The name and the descriptor are one column beside the numeral, so RETURN
   TO BASELINE lands directly under RESET (Arian, 2026-09-21) instead of under
   the 000 with SERIES between them. min-width:0 so a long name still wraps
   inside the column rather than pushing the numeral off the line. */
.aca-sband__titles { display: block; min-width: 0; }
.aca-sband__title { display: block; margin-top: .22em; }   /* optically centred on the numerals */
/* The band's number runs the same ramp as the rung's, for the same reason and
   by the same means — shrink-wrapped, because background-clip:text SIZES the
   gradient to the box (see .ladder__num further down). Arian: "each series
   number 000, 100, 200, 300 should be in the color gradient", and "it needs
   to be shown the same below as well." It was the last flat number left on
   the page while the identical one on the bar above it was painted.
   The flat fallback comes first, for anything that cannot paint text. */
.aca-sband__num { font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: .8; color: var(--accent, var(--fg)); justify-self: start; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .aca-sband__num {
    width: fit-content;
    background-image: linear-gradient(90deg, var(--accent, var(--fg)) 0%, var(--accent-2, var(--accent, var(--fg))) 100%);
    /* PADDING, NOT REPEAT. line-height:.8 makes the box shorter than the
       glyphs — 70.4px of box under 85px of ink at 1440 — and with transparent
       text, glyph ink outside the painted area simply vanishes. Arian, twice:
       "the large 000 is getting cut off at the top."

       repeat-y was my first attempt and it does NOT work: a background tile
       is only painted inside the element's own box, so clipping it to the
       text cannot recover ink that falls outside. Measured after that fix,
       the ink still began at y=1438 while the first painted pixel was at
       y=1446 — the box top, exactly.

       Vertical padding grows the painted box; an equal negative margin takes
       the growth back out of the layout, so nothing moves and the ramp now
       covers every glyph. .18em is comfortably more than the .09em of overrun
       this line-height produces. */
    padding-block: .18em; margin-block: -.18em;
    background-size: calc(100% - .02em) 100%; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
.aca-sband__title { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; font-size: clamp(1.3rem, 2.8vw, 2.2rem); letter-spacing: .09em; line-height: 1; }
/* Bigger than the rung's, because it sits under a much bigger number, and
   tight up under it — Arian: "it needs to come up underneath the 000". */
.aca-sband__kind { margin-top: .3rem; font-size: clamp(.78rem, 1.05vw, .95rem); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.aca-sband__sub { display: block; margin-top: .3rem; color: var(--fg-2); font-size: var(--fs-small); }
.aca-sband__purpose { margin-top: 1.4rem; max-width: var(--readw); color: var(--fg-2); line-height: 1.65; }
.aca-sband__more { margin-top: 1.4rem; }

.aca-focus, .aca-side__list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); list-style: none; padding: 0; margin-top: 1.1rem; }
.aca-focus li { border: 1px solid var(--line); padding: .35em .75em; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-2); }
.aca-focus-block { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.aca-focus__label, .aca-side__label, .aca-outcome__label {
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3);
}

/* ── The module ledger ──────────────────────────────────────────────────── */
.mods { list-style: none; padding: 0; margin: clamp(1.4rem, 3vw, 2rem) 0 0; border-top: 1px solid var(--line); }
.mod { border-bottom: 1px solid var(--line); }
.mod__link {
  /* The first track was a flat 3.2rem when it held only a numeral. MODULE
     under it is wider than that at every size — 59px against 38px on a phone
     — and the word ran under the title. minmax lets the track grow to the
     word while never collapsing narrower than the numeral needs. */
  display: grid; grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr) auto;
  gap: clamp(.7rem, 1.6vw, 1.4rem); align-items: start;
  padding: clamp(.95rem, 1.8vw, 1.35rem) 0;
  transition: background var(--t-fast) var(--ease), padding var(--t-fast) var(--ease);
}
a.mod__link:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); padding-inline: .7rem; }
/* THE MODULE NUMBERS RUN THE RAMP TOO. Arian, 2026-09-21: "on the SYSTEM
   RESET page where the modules are, the module numbers should also be in the
   pink gradient, or whatever the associated colour of gradient is — so the
   01, 02, 03, etc."
   Same means as the Series numerals above them: flat accent first for
   anything that cannot paint text, then the ramp clipped to the glyphs.
   width: fit-content because background-clip:text sizes the gradient to the
   BOX — left to stretch across a 3.2rem grid column, a two-digit number would
   show only the first sliver of the ramp. */
.mod__n { padding-top: .1rem; }
/* MODULE under the numeral, the same shape SERIES has under 000. */
.mod__kind { display: block; margin-top: .15rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.mod__num { display: block; font-size: 1.05rem; color: var(--accent, var(--fg-3)); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .mod__num {
    width: fit-content;
    background-image: linear-gradient(90deg, var(--accent, var(--fg-3)) 0%, var(--accent-2, var(--accent, var(--fg-3))) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.mod__body { display: grid; gap: var(--s-1); min-width: 0; }
.mod__title { font-family: var(--font-ui); font-weight: 400; font-size: clamp(.95rem, 1.4vw, 1.12rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.mod__sum { color: var(--fg-3); font-size: var(--fs-small); line-height: 1.55; max-width: 52rem; }
.mod__sum--empty { font-style: italic; opacity: .7; }
.mod__principle { margin-top: .2rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--electric); }
.mod__state { padding-top: .15rem; }
.mod--provisional .mod__title { color: var(--fg-2); }

.aca-key { margin-top: clamp(1.4rem, 3vw, 2rem); max-width: var(--readw); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.5; }
.aca-stamp {
  margin-top: 1rem; display: inline-block; padding: .55em .9em;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mark); font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase;
}
.aca-outcome { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.aca-outcome__list { list-style: none; padding: 0; margin-top: .9rem; display: grid; gap: var(--s-1); max-width: var(--readw); }
.aca-outcome__list li { padding-left: 1.2em; position: relative; color: var(--fg-2); font-size: var(--fs-small); }
.aca-outcome__list li::before { content: '+'; position: absolute; left: 0; color: var(--fg-3); }

/* ── Module page ────────────────────────────────────────────────────────── */
/* CLOSER UNDER THE PANEL. Arian, 2026-09-21: "the paragraph needs to be
   brought up closer underneath the top panel section — there's a pretty big
   gap." The band took the site's full section padding, 152px at 1440, between
   the title plate and the first line of reading. */
.aca-mbody { padding-top: clamp(1.8rem, 4vw, 3.4rem); }
/* The same mark the plate carries, opening the reading. It sits on a LIGHT
   band here, so the ramp is deepened toward the ink the way a glossary term
   is — the Domain's accents are chosen against black and measure barely 2:1
   on the ice. */
/* ⚠️ NOT .aca-mhero__num. academy-next.css claims that class and repaints it
   from --an-accent, which is declared up on the page root where no Domain has
   set --accent — so the mark came out CYAN on a pink Domain. Its own class,
   and its own paint. LESSON 01 opens a Lesson's reading the same way. */
.aca-mbody__num, .aca-lbody__num {
  font-size: var(--fs-hud); letter-spacing: var(--track-hud);
  margin-bottom: clamp(.6rem, 1.4vw, 1rem);
  color: var(--grad-a, var(--accent, var(--electric)));
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .aca-mbody__num, .aca-lbody__num {
    width: fit-content;
    background-image: linear-gradient(90deg,
      var(--grad-a, var(--accent, var(--electric))),
      var(--grad-b, var(--accent-2, var(--accent, var(--cyan)))));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.aca-mbody__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.aca-mbody__grid--solo { grid-template-columns: minmax(0, 1fr); }
.aca-mbody__main { min-width: 0; }
.aca-prose { max-width: var(--readw); }
.aca-prose h2 { font-family: var(--font-display); letter-spacing: .1em; font-size: clamp(1.05rem, 1.8vw, 1.35rem); margin-top: 2.6em; }
.aca-prose blockquote { border-left-color: var(--electric); }
.aca-side-block { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.aca-side__list { display: grid; gap: var(--s-1); margin-top: .8rem; }
.aca-side__list li { font-size: var(--fs-small); color: var(--fg-2); padding-left: 1.1em; position: relative; }
.aca-side__list li::before { content: '·'; position: absolute; left: .2em; color: var(--fg-3); }
.aca-side__links { list-style: none; padding: 0; margin-top: .8rem; display: grid; gap: var(--s-1); }
.aca-side__links a { display: flex; gap: var(--s-1); align-items: center; padding: .5rem 0; font-size: var(--fs-hud); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.aca-side__links a:hover { color: var(--fg); }
.aca-side__links .i-arrow { margin-left: auto; opacity: .5; }

.aca-locked { border: 1px solid var(--line-strong); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: var(--s-3); max-width: var(--readw); }
.aca-locked__mark { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-hud); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.aca-locked__body { color: var(--fg-2); }

/* ── Pager ──────────────────────────────────────────────────────────────── */
.aca-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.aca-pager > * { background: var(--bg); padding: clamp(1.2rem, 3vw, 2rem) var(--gutter); display: grid; gap: var(--s-1); }
.aca-pager__next { text-align: right; }
.aca-pager span { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.aca-pager em { font-style: normal; font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; }
.aca-pager a:hover em { color: var(--electric); }
/* Shown only on a touch screen, by pager.js — never promise a gesture the
   device cannot make. */
.aca-pager__hint {
  text-align: center; padding: .9rem var(--gutter) 0;
  font-size: var(--fs-micro); font-weight: 300; letter-spacing: var(--track-hud);
  text-transform: uppercase; color: var(--fg-3); opacity: .65;
}

/* ── Definition bands on the hub ────────────────────────────────────────── */
.aca-def { border-top: 1px solid var(--line); }
.aca-def__inner { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.aca-def__kicker { font-size: var(--fs-hud); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.aca-def__title { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: .09em; margin-bottom: 1rem; }

/* ── Journeys ───────────────────────────────────────────────────────────── */
.grid--journeys { --min: 250px; }
.card-journey { border: 1px solid var(--line); background: var(--bg-2); }
.card-journey .card__link { display: grid; gap: var(--s-2); padding: clamp(1.1rem, 2.2vw, 1.6rem); min-height: 200px; align-content: start; }
.card-journey__kicker { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.card-journey__title { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: .09em; }
.card-journey__out { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.5; }
.card-journey__from { margin-top: auto; font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.card-journey__stage { justify-self: start; margin-top: .6rem; }
.card-journey:hover { border-color: var(--line-strong); }
.card-journey { position: relative; }

/* ── Apps strip ─────────────────────────────────────────────────────────── */
.aca-apps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.aca-apps li { border-bottom: 1px solid var(--line); }
.aca-apps a { display: flex; align-items: baseline; gap: var(--s-3); padding: 1rem 0; }
.aca-apps a:hover { padding-inline: .7rem; background: color-mix(in srgb, var(--fg) 4%, transparent); }
.aca-apps__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1.1rem, 2vw, 1.5rem); }
.aca-apps__tag { color: var(--fg-3); font-size: var(--fs-small); }
.aca-apps .i-arrow { margin-left: auto; align-self: center; }

/* ── Coming-online band ─────────────────────────────────────────────────── */
.aca-soon { text-align: center; }
.aca-soon__label { font-family: var(--font-mark); font-size: clamp(1.1rem, 2.4vw, 1.8rem); letter-spacing: .18em; text-transform: uppercase; }
.aca-soon__body { margin: 1rem auto 0; max-width: 38rem; color: var(--fg-2); }
.aca-soon__cta { margin-top: 1.6rem; }

/* ── Tools of Light read differently from Codes ─────────────────────────── */
/* "In a colour gradient that looks alive." A Code is something you run; a Tool
   of Light is a capacity you carry, so it gets the prism rather than a plate. */
.card-tool { position: relative; overflow: hidden; }
.card-tool::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--prism-soft); opacity: .22;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  transform: scale(1.4) translate(-8%, 6%);
}
.card-tool:hover::before { opacity: .42; transform: scale(1.6) translate(4%, -4%); }
.card-tool .card__link { position: relative; z-index: 1; }
.grid--tools { --min: 220px; }

/* ── Phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .aca-hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .aca-hero__side { justify-items: start; text-align: left; }
  .aca-hero__side .hud-list { justify-items: start; }
  .aca-hero__side .rule { justify-self: start; }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder__step:nth-child(2n) { border-right: 0; }
  .ladder__step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .aca-mbody__grid { grid-template-columns: minmax(0, 1fr); }
  .aca-def__inner { grid-template-columns: minmax(0, 1fr); }
  .aca-sband__head { grid-template-columns: auto minmax(0, 1fr); }
  .aca-sband__chips { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .ladder { grid-template-columns: minmax(0, 1fr); }
  .ladder__step { border-right: 0; border-bottom: 1px solid var(--line); }
  .mod__link { grid-template-columns: minmax(2.4rem, auto) minmax(0, 1fr); }
  .mod__state { grid-column: 2; }
  .aca-pager { grid-template-columns: minmax(0, 1fr); }
  .aca-pager__next { text-align: left; }
}

/* CLOSER UNDER THE TITLE, like the Module page. Arian, 2026-09-21: "there is
   a gap between the header and where that first sentence begins." */
.aca-lbody { padding-top: clamp(1.8rem, 4vw, 3.4rem); }
/* LESSON 01 sits as close over the reading as MODULE 01 does. rhythm.css
   spaces every block in a band's .wrap 24px apart (0,2,0); the Module's label
   lives in a grid column that rule never reaches, so its reading starts at the
   label's own margin. Same here, or the two pages open 14px apart. */
.aca-lbody > .wrap > .aca-lbody__num + * { margin-top: 0; }

/* THE SECTION HEADINGS RUN THE RAMP. Arian, 2026-09-21, listing them: "YOUR
   NERVOUS SYSTEM IS ALWAYS COMMUNICATING, THE AUTONOMIC NERVOUS SYSTEM IS NOT
   GOOD VS BAD, YOUR BODY DOES NOT ONLY RESPOND TO WHAT YOU CONSCIOUSLY WANT,
   MIND. BODY. NERVOUS SYSTEM. INNER DIRECTION, THE SYSTEM IS NOT THE ENEMY —
   those need to all be in the branded gradient colour."
   `##` in the writing renders as an <h3>, so this catches every one of them
   without the writer marking anything. Flat accent first, as always. */
/* ⚠️ ON PAPER THE RAMP HAS TO BE DEEPENED, or the heading is not there.
   Every Domain accent is a pastel picked against black, and the reading band
   is --ice #edf0f3. Measured against it: SYSTEM RESET 2.10:1, THE SCIENCE OF
   YOU 1.90:1, ORIENTATION 1.37:1 — and RELATIONSHIPS 1.00:1, which is the
   background exactly. A heading nobody can read is not a style choice.
   Arian has said the marked WORDS must stay his pink, and they do: they are
   short marks inside dark body text with a rule under them. A heading IS the
   reading. Mixed 55% toward the ink, so the hue and the light→dark direction
   survive and the type comes back.
   The real fix is a wider pair on the Domain itself, set once in the admin.
   Then this mix can come off. */
.aca-prose h3, .aca-lbody .prose h3 {
  --h-a: color-mix(in srgb, var(--grad-a, var(--accent, var(--electric))) 55%, var(--ink));
  --h-b: color-mix(in srgb, var(--grad-b, var(--accent-2, var(--accent, var(--cyan)))) 55%, var(--ink));
  color: var(--h-a);
}
/* On a dark band the accents are already what they were designed against. */
.env--dark .aca-prose h3, .env--dark .prose h3 {
  --h-a: var(--grad-a, var(--accent, var(--electric)));
  --h-b: var(--grad-b, var(--accent-2, var(--accent, var(--cyan))));
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .aca-prose h3, .aca-lbody .prose h3 {
    width: fit-content;
    background-image: linear-gradient(100deg, var(--h-a) 0%, var(--h-b) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ── THE PANEL A SECTION CAN SIT IN ─────────────────────────────────────── */
/* "Like a little pop-out window in the branded gradient colour, really nice,
   so that it's featured and looks really branded and stands out from the rest
   of all of the text — like its own little panel."
   The brand guide's rule is that glass is for controls and surfaces paint, so
   this is PAINTED: the Domain's two accents washed across the plate at low
   strength, a hairline of the ramp along the top, and the label in the ramp
   at full strength. It reads as belonging to the Domain without shouting over
   the reading it interrupts. */
.lpanel {
  position: relative; overflow: hidden;
  margin-top: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem);
  border-radius: var(--r-soft);
  border: 1px solid color-mix(in srgb, var(--grad-a, var(--accent, var(--electric))) 26%, transparent);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--grad-a, var(--accent, var(--electric))) 12%, transparent) 0%,
      color-mix(in srgb, var(--grad-b, var(--accent-2, var(--accent, var(--cyan)))) 7%, transparent) 62%,
      transparent 100%),
    var(--bg);
}
.lpanel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--grad-a, var(--accent, var(--electric))),
    var(--grad-b, var(--accent-2, var(--accent, var(--cyan)))));
}
/* Deepened for the same reason as the headings, and more so: this label sits
   on the panel's OWN wash, which is tinted with the very colours it is trying
   to be — 1.92:1 on SYSTEM RESET, 1.00:1 on RELATIONSHIPS. Weight 400 too;
   300 is a hairline at this size. */
.lpanel__label {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: .14em; line-height: 1.1;
  width: fit-content;
  --lab-a: color-mix(in srgb, var(--grad-a, var(--accent, var(--electric))) 50%, var(--ink));
  --lab-b: color-mix(in srgb, var(--grad-b, var(--accent-2, var(--accent, var(--cyan)))) 50%, var(--ink));
  color: var(--lab-a);
}
.env--dark .lpanel__label {
  --lab-a: var(--grad-a, var(--accent, var(--electric)));
  --lab-b: var(--grad-b, var(--accent-2, var(--accent, var(--cyan))));
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lpanel__label {
    background-image: linear-gradient(100deg, var(--lab-a) 0%, var(--lab-b) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.lpanel__body { margin-top: clamp(.8rem, 1.8vw, 1.1rem); }
.lpanel__body > * + * { margin-top: .85rem; }
/* The panel's own headings are already announced by the label above them. */
.lpanel__body h3 { color: inherit; background: none; -webkit-text-fill-color: currentColor; width: auto; }

/* ── Module titles are sentences, not names — they need less size ───────── */
.aca-mhero__title { font-size: clamp(1.8rem, 4.2vw, 3.2rem); letter-spacing: .07em; line-height: 1.04; }
.aca-sband { padding-block: clamp(2.6rem, 6vw, 5rem); }

/* ── Lessons inside a Module ────────────────────────────────────────────── */
.aca-lessons { margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.aca-lessons__head { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.aca-lessons__title {
  font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-h3);
  letter-spacing: .14em; text-transform: uppercase;
}
.aca-lessons__note { margin-top: .4rem; font-size: var(--fs-small); color: var(--fg-3); }
/* ONE LIST, TWO SCALES. The Lessons inside a Module are set exactly like the
   Modules inside a Series — same rules top and bottom, same two columns, same
   padding, same numeral, the word LESSON under it where the ledger puts
   MODULE. Arian, 2026-09-21: "that way it's more organized."
   Every measurement below is the one .mods / .mod / .mod__link already uses,
   copied deliberately rather than approximated: two lists that are nearly the
   same read as a mistake, and these sit two clicks apart. */
.lessons { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; border-top: 1px solid var(--line); }
.lesson {
  display: grid; grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr) auto; gap: clamp(.7rem, 1.6vw, 1.4rem);
  align-items: start;
  padding: clamp(.95rem, 1.8vw, 1.35rem) 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 4rem);
}
.lesson__state { padding-top: .15rem; }
/* A Lesson you have not reached yet. It is still named and still described —
   you can see what is coming — it just does not open. */
.lesson.is-shut .lesson__title, .lesson.is-shut .lesson__sum { color: var(--fg-3); }
.lesson.is-shut .lesson__num { opacity: .5; }
.lesson__n { padding-top: .1rem; }
/* LESSON under the numeral, as MODULE sits under the ledger's. */
.lesson__kind { display: block; margin-top: .15rem; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.lesson__num { display: block; font-size: 1.05rem; color: var(--accent, var(--fg-3)); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lesson__num {
    width: fit-content;
    background-image: linear-gradient(90deg, var(--accent, var(--fg-3)) 0%, var(--accent-2, var(--accent, var(--fg-3))) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.lesson__body { min-width: 0; }
/* .lesson .lesson__title, not .lesson__title alone: rhythm.css ends with
   `h3:not([class*="hero"]) { font-size: var(--fs-h3) }`, which is (0,1,1) and
   loads last, so a one-class rule on an <h3> loses to it. The ledger's
   .mod__title is a <span> and never meets that rule, which is why the two
   lists were set at different sizes while claiming to match. */
.lesson .lesson__title {
  font-family: var(--font-ui); font-weight: 400; font-size: clamp(.95rem, 1.4vw, 1.12rem);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.lesson__sum { margin-top: var(--s-1); color: var(--fg-3); font-size: var(--fs-small); line-height: 1.55; max-width: 52rem; }
.mod__lessons { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }

/* ── Meta-Intelligence, framed for one Domain ───────────────────────────── */
/* A Code is something you run. Tools of Light are capacities you carry — so it
   gets the live gradient rather than a plate. */
.mi-wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.mi-band__label {
  font-family: var(--font-mark); font-size: var(--fs-small); letter-spacing: .2em; text-transform: uppercase;
}
.mi-band__note { margin-top: .35rem; font-size: var(--fs-small); color: var(--fg-3); }
.mi-grid { margin-top: 1.2rem; display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.mi { position: relative; overflow: hidden; border: 1px solid var(--line); }
.mi::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--prism-soft); opacity: .2;
  transform: scale(1.5) translate(-10%, 8%);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.mi:hover::before { opacity: .4; transform: scale(1.7) translate(6%, -6%); }
.mi__link { position: relative; z-index: 1; display: grid; gap: var(--s-2); padding: clamp(1.1rem, 2.2vw, 1.5rem); height: 100%; align-content: start; }
.mi__kicker { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.mi__title {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: .07em; line-height: 1.1;
  overflow-wrap: break-word;
}
.mi__fn { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); }
.mi__rel { list-style: none; padding: 0; margin-top: .3rem; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-1); }
.mi__rel li { border: 1px solid var(--line); padding: .25em .55em; font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.mi__note { font-size: var(--fs-micro); line-height: 1.6; color: var(--fg-3); }

/* ── A practice lesson ──────────────────────────────────────────────────── */
/* Orientation ends every Module with one. It looks different from a teaching
   lesson because it asks something of you rather than telling you something. */
.lesson--practice .lesson__title::before {
  content: 'PRACTICE';
  display: block; margin-bottom: .35rem;
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--electric);
}
.lesson__prompts {
  list-style: none; padding: 0; margin: .9rem 0 0;
  border-top: 1px solid var(--line);
}
.lesson__prompts li {
  position: relative; padding: .7rem 0 .7rem 1.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--fg-2);
}
.lesson__prompts li::before {
  content: ''; position: absolute; left: 0; top: 1.15rem;
  width: .8rem; height: 1px; background: var(--line-strong);
}

/* ── CONTINUE WHERE YOU LEFT OFF ────────────────────────────────────────── */
.aca-continue { border-block: 1px solid var(--line); }
.aca-continue__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 3rem); align-items: center;
  padding-block: clamp(1.6rem, 3.5vw, 2.6rem);
}
/* THE PANEL HAS TO BE SEEN. Arian: "'pick up where you left off' needs to be
   larger so you see it, and the progress bar." The label was --fs-micro,
   0.58rem — 9px — which is the size used for incidental HUD text, not for
   the one line telling a member where they are. The bar under it was a 2px
   hairline. Both are scoped to this panel, so every other meter on the site
   keeps the hairline it was designed with. */
.aca-continue__label {
  font-size: clamp(.82rem, 2.6vw, .95rem);
  font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--electric);
}
.aca-continue__label span { opacity: .55; margin-right: .35em; }
.aca-continue__where { margin-top: .7rem; font-size: var(--fs-small); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.aca-continue__title {
  margin-top: .4rem;
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem); letter-spacing: .08em; line-height: 1.1;
}
.aca-continue__lesson { margin-top: .35rem; font-size: var(--fs-small); color: var(--fg-2); }
.aca-continue__act { display: grid; gap: var(--s-3); justify-items: end; min-width: min(280px, 40vw); }
.aca-continue__meter { display: grid; gap: var(--s-1); width: 100%; }
.aca-continue__meter em { font-style: normal; font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); text-align: right; }

/* A progress bar you can actually read at arm's length. */
/* If the percentage cannot fit beside the bar it drops below it rather than
   being pushed off the end and disappearing. */
.aca-continue .pmeter { gap: var(--s-3); flex-wrap: wrap; row-gap: var(--s-2); }
.aca-continue__meter { max-width: 100%; }
/* The percentage must never be the thing that gets squeezed out: it has no
   flex basis of its own, so the track — which is flex:1 — was taking the
   whole row and pushing it off the end. */
.aca-continue .pmeter__num { flex: none; }
.aca-continue .pmeter__track { min-width: 0; }
.aca-continue .pmeter__track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); }
.aca-continue .pmeter__fill { border-radius: 999px; }
.aca-continue .pmeter__num { font-size: 1.05rem; }
.aca-continue .pmeter__num em { font-size: .7em; }
/* The old .pmeter is no longer used by this panel; the rule is kept for any
   other meter that still lands inside a light .aca-continue band. */
.env--light .aca-continue .pmeter__track { background: rgba(10,12,18,.14); }

/* ── Meters in place ────────────────────────────────────────────────────── */
.aca-dhero__progress { margin-top: 1.6rem; display: grid; gap: var(--s-1); max-width: 22rem; }
.aca-dhero__progress em { font-style: normal; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
.card-domain__meter { position: relative; z-index: 1; display: block; padding: 0 1.2rem 1.1rem; }
.ladder__meter { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: .5rem; }
.ladder__meter .pmeter { flex: 1; }
.ladder__meter em { font-style: normal; font-size: var(--fs-micro); letter-spacing: .1em; color: var(--fg-3); }
/* A finished rung keeps its gradient. This used to set an opaque colour, and
   a 3-class selector outranks the @supports rule, so the gradient was still
   being painted underneath and then covered up — a completed Series was the
   one number on the bar that did NOT show the ramp. It also made complete and
   selected identical, since both landed on a flat accent. Selected is the
   solid one now; complete reads like any other rung it sits beside. */
.mod__meter { display: block; max-width: 16rem; margin-top: .5rem; }
.aca-lessons__progress { margin-top: .8rem; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
/* THE ARC, STRAIGHTENED. Arian, 2026-09-21: "have the progress bar under
   LESSONS be the same as the rainbow bar, only straight instead of in an arch
   — that means it is shorter and thicker, with the rounded edges at the end."
   The "rainbow bar" is the half-circle gauge on the progress panel: a thick
   stroke with round caps, about a fifth of its panel wide. So the same three
   properties, laid flat — 8px tall like the panel's own bar, capsule ends,
   and held to the gauge's width rather than running the whole column. */
.aca-lessons__progress .pmeter { flex: 0 1 auto; min-width: 0; }
.aca-lessons__progress .pmeter__track {
  flex: 0 0 auto; width: clamp(9rem, 22vw, 16rem);
  height: 8px; border-radius: 999px;
}
.aca-lessons__progress .pmeter__fill { border-radius: 999px; }
.aca-lessons__progress em { font-style: normal; font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); }
/* A FILLED CHIP TAKES THE RAMP TOO. Arian, 2026-09-21: "the COMPLETE button
   for lessons is just solid pink, it is not the pink gradient colour."
   Everywhere else the ramp is clipped to the letters; here the chip is filled,
   so it runs across the capsule and the word sits white on top of it. Flat
   accent first, for anything that cannot paint a gradient. */
.stage--done {
  border-color: transparent; color: var(--white);
  background: var(--grad-a, var(--accent, var(--electric)));
  background-image: linear-gradient(100deg,
    var(--grad-a, var(--accent, var(--electric))) 0%,
    var(--grad-b, var(--accent-2, var(--accent, var(--cyan)))) 100%);
}

/* ── A lesson you are in the middle of ─────────────────────────────────── */
.lesson.is-current { box-shadow: inset 2px 0 0 var(--electric); padding-left: .9rem; }
.lesson.is-complete .lesson__title { opacity: .72; }
.lesson__acts { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.lesson__acts--out a { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--line); }
.lesson__acts--out a:hover { color: var(--fg); }
.lesson__act { display: contents; }
.lbtn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 34px; padding: .4rem .9rem;
  border: 1px solid var(--line-strong); background: none; color: var(--fg);
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lbtn:hover { border-color: var(--fg); }
.lbtn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.lbtn--solid:hover { background: var(--electric); border-color: var(--electric); color: var(--white); }
.lbtn--quiet { border-color: var(--line); color: var(--fg-3); }
.lbtn--quiet:hover { color: var(--fg); border-color: var(--line-strong); }
.lbtn[disabled] { opacity: .5; cursor: progress; }
.lesson__done {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 34px; padding: .4rem .9rem;
  border: 1px solid var(--electric); color: var(--electric);
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase;
}
.lesson__done::before { content: '✓'; }

@media (max-width: 760px) {
  .aca-continue__inner { grid-template-columns: minmax(0, 1fr); }
  .aca-continue__act { justify-items: start; min-width: 0; }
  .aca-continue__meter em { text-align: left; }
}

/* ── Meta-Intelligence beside the Domains ───────────────────────────────── */
/* The Tools of Light keep their own palette everywhere they appear. */
.aca-meta { position: relative; overflow: hidden; background: var(--bg-2); }
.aca-meta .tol-hero__wash { inset: -30% -5% -30% -5%; height: auto; opacity: .8; filter: blur(60px); }
.aca-meta__inner { position: relative; z-index: 1; }
/* The framework's plate runs behind the whole band. The ten cards carry their
   own pale ground, so the picture reads around them — under the heading and
   in the margins — rather than through them. */
.aca-meta__media { position: absolute; inset: 0; z-index: 0; }
.aca-meta__media .art, .aca-meta__media img { width: 100%; height: 100%; object-fit: cover; }
.aca-meta__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(94deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.5) 30%, rgba(255,255,255,.24) 52%, rgba(255,255,255,.5) 76%, rgba(255,255,255,.82) 100%),
    linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.16) 34%, rgba(255,255,255,.34) 100%);
}
.aca-meta--plated .tol-hero__wash { opacity: .4; }
.aca-meta--plated .sec-head__titles > *, .aca-meta--plated .sec-head__action { text-shadow: 0 1px 14px rgba(255,255,255,.92); }
.aca-meta__def { margin-top: 1.2rem; max-width: 42rem; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--fg-2); }
.aca-meta .tol-grid { margin-top: clamp(1.4rem, 3vw, 2rem); }

/* ── TOOLS OF LIGHT in the Domain grid ──────────────────────────────────── */
/* The sixth tile is not a Domain. It is the layer that runs across all of
   them, so it keeps the Tools of Light palette rather than the Domains' black. */
.card-domain--meta { background: var(--bg-2); color: var(--fg); }
.card-domain--meta .tol-hero__wash { inset: -30% -10% -30% -10%; height: auto; opacity: .95; filter: blur(48px); }
.card-domain--meta .card__link { position: relative; z-index: 1; }
.card-domain--meta .card-domain__num { color: var(--magenta); }
.card-domain--meta .card-domain__sub { color: var(--fg-2); }
.card-domain--meta .card-domain__tf { color: var(--fg-3); }
.card-domain--meta .card-domain__foot .stage { border-color: var(--line-strong); color: var(--fg-2); }
.stage--meta { letter-spacing: var(--track-hud); }
/* The framework has a plate of its own. The Domains' veil runs black so their
   white words read at the foot of the card; this palette runs the other way,
   so the veil is light and the words stay dark. The prism wash sits between
   the picture and the words, which is what keeps the tile in the Tools of
   Light palette rather than turning it into a sixth Domain. */
.card-domain--meta.card-domain--plated .card-domain__art::after {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.48) 44%, rgba(255,255,255,.86) 76%, rgba(255,255,255,.96) 100%);
}
.card-domain--meta.card-domain--plated .tol-hero__wash { opacity: .5; }

/* ── One Lesson, on its own page ────────────────────────────────────────── */
.aca-lhero { padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem)); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
/* IT HAS TO FIT A PHONE. Arian, 2026-09-22: "this title needs to be a little
   bit smaller because on the iPhone it is showing out of bounds."
   Measured at 390: COMMUNICATION wanted 417px in a 353px column at the 35.2px
   rhythm.css was imposing. It fits up to 29px, so the floor is 1.7rem — and
   5.2vw keeps the cap identical to what --fs-h1 gave on a desktop, so nothing
   moves there. break-word is the net: no word can overrun the column again,
   whatever title Ana writes. */
.aca-lhero__title {
  margin-top: .7rem; max-width: 24ch;
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.7rem, 5.2vw, 4.4rem); letter-spacing: .06em; line-height: 1.02;
  overflow-wrap: break-word;
}
.aca-lhero__kind { margin-top: .9rem; display: inline-block; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--glass); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); padding: .36em .95em; font-size: var(--fs-micro); letter-spacing: var(--track-hud); color: var(--fg-2); }
.aca-lhero__sum { margin-top: 1rem; max-width: var(--readw); color: var(--fg-2); font-size: clamp(1rem, .5vw + .9rem, 1.15rem); line-height: 1.6; }
.aca-lbody .aca-prose { max-width: var(--readw); }
.aca-lacts { margin-top: clamp(1.8rem, 4vw, 2.8rem); }
/* Previous and next, so a Lesson is a place you can read on from. */
.aca-lnext {
  margin-top: clamp(2.4rem, 6vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
}
.aca-lnext a { display: grid; gap: var(--s-1); min-width: 0; }
.aca-lnext__next { text-align: right; justify-items: end; }
.aca-lnext span { font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase; color: var(--accent, var(--fg-3)); }
.aca-lnext em { font-style: normal; font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(.95rem, 1.6vw, 1.25rem); line-height: 1.2; }
.aca-lnext a:hover em { color: var(--accent, var(--fg)); }
/* NEXT before this Lesson is complete: visible, so you can see what is
   coming, and plainly not a link. */
.aca-lnext .is-shut { display: grid; gap: var(--s-1); min-width: 0; opacity: .38; cursor: default; }
@media (max-width: 620px) { .aca-lnext { grid-template-columns: 1fr; } .aca-lnext__next { text-align: left; justify-items: start; } }
/* The Lesson title on a Module is the way through to it. */
.lesson__title a { color: inherit; }
.lesson__title a:hover { color: var(--accent, var(--electric)); }

/* ── THE ORIENTATION PANEL ──────────────────────────────────────────────── */
/* The wide plate is 3:1 and carries its own HUD marks and the light column;
   the site sets every word around them. The type column is a grid pinned to the
   panel's own inset, so the eyebrow stays at the top, the title block sits in
   the middle and the progression sits on the foot line at every width — the
   composition holds instead of drifting. */
.opanel { position: relative; background: var(--black); color: var(--white); overflow: hidden; border-radius: var(--r-soft); }
.opanel__link { display: block; position: relative; }
.opanel__link::before { content: ''; display: block; padding-top: 33.33%; }
.opanel__art { position: absolute; inset: 0; z-index: 0; }
.opanel__art .art, .opanel__art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The plate is already dark on the left; this deepens it just enough to hold
   the type without dimming the light column on the right. */
.opanel__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(4,5,7,.95) 0%, rgba(4,5,7,.92) 34%, rgba(4,5,7,.55) 47%, rgba(4,5,7,.1) 58%, transparent 66%);
}

/* ONE BLOCK, CENTRED. The column used to be a three-row grid — eyebrow at the
   top, the title block in the middle, the ALIGN / UNDERSTAND / CHOOSE / EVOLVE
   progression on the foot line. Two of those three came off on 2026-09-21, so
   there is nothing left to pin apart and align-content does the whole job. */
.opanel__type {
  position: absolute; inset: 7.5% 53% 7.5% 4.6%; z-index: 1;
  display: grid; align-content: center;
}
.opanel__mid { padding-bottom: 2%; }
.opanel__title {
  display: grid; gap: var(--s-1);
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(.82rem, 2.35vw, 2.3rem); letter-spacing: .06em; line-height: 1.05;
}
/* The name wraps inside the type column rather than running out across the art. */
.opanel__title-b { display: block; }
/* The label above the name. Arian's colour — the cyan of NO.01 on a Domain
   tile — at close to the size of the name itself, so START HERE carries the
   panel with it. The tracking comes in as the type grows; 0.3em at this size
   would run the words off the column. */
.opanel__label {
  margin-bottom: .3rem;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(.62rem, 1.64vw, 1.58rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent, var(--cyan));
}
/* START HERE runs as a gradient rather than one flat colour, so it reads as a
   travel. It was hard-coded yellow — #ecff61 → #d1ff61, picked off the plate
   at the time — and that meant changing the Domain's colour in the admin left
   this line behind. Arian, 2026-09-21: "START HERE ORIENTATION highlight
   color needs to be aqua instead of the yellow."

   It now follows the DOMAIN'S OWN two accents, set on the panel itself, so
   the next change is a colour picker rather than a stylesheet. The fallbacks
   are the site's own aqua (--cyan) and its companion. The solid accent above
   stays as the fallback wherever text cannot be painted with a gradient. */
.opanel { --start-here: linear-gradient(100deg, var(--accent, #38e1ff) 0%, var(--accent-2, #61ffe8) 100%); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .opanel__label {
    background: var(--start-here);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.opanel__chips { margin-top: clamp(.55rem, 1.4vw, 1.2rem); display: flex; flex-wrap: wrap; gap: var(--s-1); }
/* NOT A BOX. Arian, 2026-09-21: "the ORIENTATION panel has a bubble around
   AVAILABLE. Lose the bubble — AVAILABLE is the same as ACTIVE or LOCKED on
   the other panels, so it just needs to be in the aqua colour."
   It is a status word, and a status word on this plate is the word itself in
   the plate's own colour. The glass bubble it used to wear is reserved for
   controls, which this is not — it is not clickable and never was.
   (The --free variant that used to sit beside it is gone from the markup; its
   rule went with it rather than being left to rot.) */
/* .opanel .opanel__chip, not .opanel__chip on its own: .stage sets the padding
   and the border, and a one-class rule only ties with it. The gradient wash
   that also has to be kept off is excluded in academy-next.css, which loads
   after this file and would otherwise win whatever is written here. */
.opanel .opanel__chip {
  border: 0; padding: 0; background: none; background-image: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  font-size: var(--fs-micro); letter-spacing: var(--track-hud); text-transform: uppercase;
  color: var(--accent, var(--cyan));
  white-space: nowrap;
}
.opanel__meter { position: absolute; left: 4.6%; right: 3.2%; bottom: 0; z-index: 1; }
.opanel__title { transition: color var(--t-fast) var(--ease); }
.opanel:hover .opanel__title { color: var(--accent, var(--cyan)); }

/* Narrow: the banner stops being a banner. The plate moves behind a stacked
   header so the words never shrink into nothing. */
@media (max-width: 900px) {
  .opanel__link::before { padding-top: 0; }
  .opanel__link { display: grid; min-height: 27rem; }
  .opanel__art .art, .opanel__art img { object-position: 64% 30%; }
  .opanel__art::after { background: linear-gradient(180deg, rgba(4,5,7,.5) 0%, rgba(4,5,7,.86) 52%, rgba(4,5,7,.96) 100%); }
  .opanel__type { position: relative; inset: auto; display: grid; gap: var(--s-4); padding: clamp(1.4rem, 5vw, 2.2rem) var(--gutter) clamp(1.6rem, 5vw, 2.2rem); align-content: end; }
  .opanel__title { font-size: clamp(1.4rem, 6.4vw, 2.2rem); white-space: normal; }
  .opanel__label { font-size: clamp(.95rem, 4.3vw, 1.5rem); }
  .opanel__meter { left: var(--gutter); right: var(--gutter); }
}

/* ── PICK UP WHERE YOU LEFT OFF ─────────────────────────────────────────
   Built to Arian's board (2026-09-21): the place, the lesson, a half-circle
   gauge for the lesson you are inside, two facts beside it, the Domain's
   modules as a dotted track, and the way on.

   Stacked on a phone, horizontal from 60rem — "it should look like this on
   the iPhone, but it should be a horizontal version for the website."

   --rs-a / --rs-b are the DOMAIN'S OWN two accents, set per panel, so
   SYSTEM RESET glows pink and another Domain glows its own colour. */
/* min-width:0 on every child, for the same reason the focus card needed it:
   a grid item defaults to min-width:auto, so the ten-dot track — which has a
   real min-content width — was stretching the grid wider than the wrap and
   cutting "3 OF 10 MODULES" off the right edge. */
.aca-continue .resume { display: grid; gap: clamp(1.4rem, 4vw, 2.2rem); }
.aca-continue .resume > * { min-width: 0; }
.dot-track, .resume__track, .resume__track-head { min-width: 0; max-width: 100%; }
.resume__track-head span:last-child { text-align: right; white-space: nowrap; }
/* fit-content, for the same reason the ladder numbers need it: the ramp is
   clipped to the letters but SIZED to the box, and this <p> was filling the
   whole left column — around 700px of gradient under a few words of ink. The
   short labels were the worst of it: "// UP NEXT" is about a seventh of that
   column, so it only ever showed the first seventh of the ramp and --rs-b
   never appeared at all, while the gauge beside it ran both colours in full.
   The .2em trim is this element's own trailing letter-spacing. */
.resume__label {
  font-size: clamp(.82rem, 2.6vw, .95rem); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  width: fit-content; max-width: 100%;
  background: linear-gradient(90deg, var(--rs-a), var(--rs-b));
  background-size: calc(100% - .2em) 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.resume__label span { opacity: .5; margin-right: .3em; }
.resume__where {
  margin-top: .75rem; font-size: var(--fs-small);
  letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3);
}
.resume__where--2 { margin-top: .15rem; }
.resume__title {
  margin-top: .55rem; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 5.2vw, 2.4rem); line-height: 1.08;
  letter-spacing: .06em; text-transform: uppercase;
}
.resume__lesson { margin-top: .5rem; font-size: clamp(1rem, 3vw, 1.15rem); color: var(--fg-2); }

/* the gauge + the two facts */
.resume__read { display: grid; gap: clamp(1.2rem, 4vw, 2rem); align-items: center; }
/* The caption lives in padding BELOW the arc, not inside it — at 78% it was
   running straight through the percentage. */
.resume__gauge { position: relative; width: min(260px, 74vw); justify-self: center; padding-bottom: 2.4rem; }
.resume__arc { display: block; width: 100%; height: auto; overflow: visible; }
/* TOKENS, NOT HARD-CODED WHITE. This panel appears on a DARK band on the
   Academy and a LIGHT one inside a Domain, and everything below was written
   white-on-dark only: on the light band the arc track, the dots and the
   connector line were white on white, and the button was a black slab with
   black text. --line, --fg and --bg all flip with the band. */
.resume__arc-track { fill: none; stroke: var(--line); stroke-width: 14; stroke-linecap: round; }
.resume__arc-fill {
  fill: none; stroke: url(#rs-grad); stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset var(--t-slow, .6s) var(--ease, ease);
}
.resume__pct {
  position: absolute; left: 0; right: 0; top: 38%;
  text-align: center; font-family: var(--font-ui); font-weight: 250;
  font-size: clamp(2.3rem, 9.5vw, 3.2rem); line-height: 1; color: var(--fg);
}
.resume__pct em { font-style: normal; font-size: .42em; margin-left: .06em; }
.resume__gauge-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: .56rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--fg-3); line-height: 1.6;
}
.resume__facts { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.resume__facts li { display: flex; align-items: center; gap: var(--s-3); }
.resume__ico {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: 50%; color: var(--rs-a);
  border: 1px solid color-mix(in srgb, var(--rs-a) 45%, transparent);
  background: color-mix(in srgb, var(--rs-a) 10%, transparent);
}
.resume__facts b { display: block; font-weight: 500; font-size: var(--fs-small); }
.resume__facts i { display: block; font-style: normal; font-size: var(--fs-small); color: var(--fg-3); }

/* the Domain's modules, as a track */
.resume__track { display: grid; gap: var(--s-3); }
.resume__track-head {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3);
}
/* ── The dot track ──────────────────────────────────────────────────────── */
/* Drawn in two places from one helper: Modules across a Series on the progress
   panel, Lessons inside a Module on the Module page. Arian, 2026-09-21: "it
   needs to be the same progress bar that's on the progress panel."
   --rs-a / --rs-b are the panel's own pair; outside it there is no panel to
   set them, so they fall back to the Domain's accents, which every Academy
   section already carries. */
.dot-track {
  --dot-a: var(--rs-a, var(--accent, var(--electric)));
  --dot-b: var(--rs-b, var(--accent-2, var(--accent, var(--cyan))));
  display: flex; align-items: center; justify-content: space-between;
  gap: 2px; list-style: none; margin: 0; padding: 0;
}
.dot-track__dot { position: relative; flex: 1 1 0; display: grid; place-items: center; min-width: 0; }
/* the line between the dots, drawn behind them */
.dot-track__dot::before {
  content: ''; position: absolute; left: 50%; right: -50%; top: 50%;
  height: 1px; background: var(--line); transform: translateY(-50%);
}
.dot-track__dot:last-child::before { display: none; }
.dot-track__dot.is-done::before { background: linear-gradient(90deg, var(--dot-a), var(--dot-b)); }
.dot-track__dot > span {
  position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 24%, transparent);
}
.dot-track__dot.is-done > span { background: linear-gradient(135deg, var(--dot-a), var(--dot-b)); }
.dot-track__dot.is-here > span {
  width: 14px; height: 14px; background: var(--dot-b);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot-b) 28%, transparent);
}

/* the way on */
.resume__act { display: grid; gap: var(--s-4); justify-items: center; }
.resume__go {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 54px; padding: 0 clamp(1.8rem, 6vw, 2.8rem);
  border-radius: 999px; text-decoration: none; color: var(--fg);
  font-family: var(--font-ui); font-size: clamp(.86rem, 2.8vw, .98rem);
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  /* The fill is the BAND's own background, so the pill reads as glass on
     either tone instead of a painted block — which is also the standing rule
     for buttons here: "wherever there are buttons they should be the same as
     in the Breathe app", a translucent fill and a hairline, never a slab. */
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, var(--rs-a), var(--rs-b)) border-box;
  transition: transform .18s var(--ease), box-shadow .18s;
}
.resume__go:hover { transform: translateY(-1px); box-shadow: 0 0 24px color-mix(in srgb, var(--rs-b) 30%, transparent); }
.resume__verbs, .resume__promise {
  font-size: .56rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg-3); line-height: 1.8; text-align: center;
}
.resume__verbs:empty, .resume__promise:empty { display: none; }

/* ── horizontal from 60rem ─────────────────────────────────────────────── */
@media (min-width: 60rem) {
  .aca-continue .resume {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: 'head read' 'track track' 'act act';
    align-items: center; column-gap: clamp(2rem, 5vw, 4rem);
  }
  .resume__head { grid-area: head; }
  .resume__read { grid-area: read; grid-template-columns: auto minmax(0, 1fr); }
  .resume__gauge { justify-self: start; width: min(240px, 26vw); }
  .resume__track { grid-area: track; }
  /* One control, so one column. The three-column rule was there to hold the
     Series name and the transformation either side of the button; both are
     gone (Arian, 2026-09-21) and 1fr auto 1fr around a lone item would push
     it off centre. */
  .resume__act { grid-area: act; justify-items: center; }
}


/* ACTIVE is the only positive status a row carries now, so it wears the
   highlight colour of whatever it sits in rather than a colour of its own. */
.stage--active { border-color: var(--accent, var(--cyan)); color: var(--accent, var(--cyan)); }

/* THE SERIES NUMBERS RUN THE GRADIENT. Arian, 2026-09-21: "on the series bar
   each series number 000, 100, 200, 300 should be in the color gradient."
   It is the Domain's own two accents, so SYSTEM RESET's ladder runs pink and
   another Domain's runs its own colour. A flat fallback first, for anything
   that cannot paint text with a gradient — without it the numbers would be
   invisible rather than merely unpainted. */
.ladder__num { color: var(--accent, var(--fg)); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ladder__num {
    /* THE RAMP HAS TO BE THE WIDTH OF THE DIGITS, NOT THE WIDTH OF THE COLUMN.
       Arian, 2026-09-21: "from the left of the first 0 in 000 to the right of
       the last 0 we need to see the full gradient."

       background-clip:text clips the paint to the glyphs, but the gradient is
       still SIZED to the element's box — and this is a grid item, so it was
       stretching to the whole rung: 288px of box under 93px of ink, measured
       at 1440. The digits were showing the first third of the ramp and nothing
       else, which is why all four numbers came out the same flat colour.

       justify-self shrinks the item to its text. 90deg, not the 100deg used
       elsewhere, because over a box this short a tilt costs range at the two
       horizontal extremes — and the extremes are exactly what was asked for.
       background-size trims the trailing .02em of .mark-num tracking, so the
       100% stop lands on the right edge of the last digit and not past it. */
    justify-self: start; width: fit-content;   /* flex row now, so both */
    background-image: linear-gradient(90deg, var(--accent, var(--electric)) 0%, var(--accent-2, var(--accent, var(--cyan))) 100%);
    background-size: calc(100% - .02em) 100%;
    /* Same guard as .aca-sband__num. This one measures no overrun today, but
       a font swap or a line-height change would clip it silently. */
    padding-block: .12em; margin-block: -.12em;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
/* EVERY RUNG NUMBER RUNS THE GRADIENT — selected or not.
   Arian, 2026-09-21: "when you click on a series the 000 series number goes
   back to the old gradient. Make sure the gradient stays the same no matter
   if it's selected or not."
   The selected rung used to drop to a flat accent so it would read as chosen.
   It does not need the number for that: the step itself already carries a
   tinted background and a 2px top border in the accent (academy-next.css:576).
   So there is nothing here any more, on purpose — leave it that way. A state
   rule on .ladder__num is how the gradient got lost twice, once on the current
   rung and once on a completed one. */