/* ТТ Москвина — theme styles. Every value comes from tokens.css (design/tokens.json).
   Layers: tokens → base → motion → layout → components → pages → utilities. Mobile first:
   600 / 900 / 1200 px. Design: kit v3 “palette edition” (D17). */

/* ============================== BASE ============================== */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-6); }
  body {
    margin: 0; background: var(--color-bg); color: var(--color-text);
    font-family: var(--font-text); font-weight: var(--fw-light); font-size: var(--fs-body); line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  }
  h1, h2, h3, h4, p, figure, ul, ol, blockquote, dl, dd { margin: 0; }
  h1, h2, h3, h4 { line-height: var(--lh-heading); font-weight: var(--fw-heavy); text-wrap: balance; }
  b, strong { font-weight: var(--fw-bold); }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  a { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  a:visited { color: var(--color-link-visited); }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; }
  ::selection { background: var(--color-highlight-alt); color: var(--ttm-black); }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  summary { cursor: pointer; }
  main:focus { outline: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
  hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
  table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
  [hidden] { display: none !important; }
}

/* ============================== LAYOUT ============================== */
@layer layout {
  .container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .narrow { max-width: 46rem; margin-inline: auto; }
  .sec { position: relative; overflow: clip; padding-block: var(--section-y); }
  .sec--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .sec__head { max-width: 42rem; margin: 0 auto var(--space-7); }
  .sec__head .body { margin-top: var(--space-3); }
  .center { text-align: center; }
  .split { display: grid; gap: var(--space-6); align-items: center; }
  @media (min-width: 900px) { .split { grid-template-columns: 1fr minmax(0, 0.9fr); gap: var(--space-7); } }
  .split__art img { width: 100%; }
}

/* ============================== COMPONENTS ============================== */
@layer components {
  /* --- Type --- */
  .mega { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-mega); line-height: var(--lh-mega); letter-spacing: var(--tracking-display); text-transform: uppercase; overflow-wrap: break-word; hyphens: manual; }
  .mega--page { font-size: clamp(1.875rem, 0.6rem + 5.6vw, 6rem); }
  .mega--band { font-size: clamp(3rem, 1.5rem + 6.5vw, 7.5rem); }
  .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
  .h2 { font-size: var(--fs-h2); font-weight: var(--fw-heavy); line-height: 1.12; letter-spacing: -0.01em; }
  .h3 { font-size: var(--fs-h3); font-weight: var(--fw-heavy); line-height: 1.25; }
  .lead { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.55; max-width: 40rem; }
  .body { font-size: var(--fs-body); font-weight: var(--fw-light); line-height: var(--lh-body); }
  .small { font-size: var(--fs-small); line-height: var(--lh-small); }
  .muted { color: var(--color-text-muted); }
  .eyebrow { display: flex; align-items: center; gap: var(--space-2); font: var(--fw-heavy) var(--fs-eyebrow)/1.3 var(--font-text); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); }
  .center .eyebrow, .eyebrow.center { justify-content: center; }
  .eyebrow .ico { width: 18px; height: 18px; }
  .hand { display: flex; align-items: flex-end; gap: var(--space-2); font: 600 var(--fs-hand)/1.1 var(--font-hand); color: var(--color-accent); }
  .center .hand { justify-content: center; }
  .doodle { width: clamp(56px, 6vw, 90px); height: auto; flex: none; transform: translateY(8px); }
  .mark { background: var(--color-highlight-alt); color: var(--ttm-black); padding: 0 0.16em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

  /* --- Icons --- */
  .ico { width: var(--icon-md); height: var(--icon-md); flex: none; fill: currentColor; }
  .ico .s, symbol .s { fill: var(--ic2, var(--ttm-lavender)); }

  /* --- Fields: one flat palette colour per section, black type on light fields --- */
  .f-white { background: var(--color-bg); color: var(--color-text); }
  .f-hero { background: var(--color-hero); color: var(--color-on-hero); }
  .f-sun, .f-butter, .f-blush, .f-aqua, .f-lavender, .f-magenta, .f-lime, .f-cyan, .f-orange {
    --color-text: var(--ttm-black); --color-text-muted: var(--ttm-grey-600); --color-link: var(--ttm-indigo); --color-link-visited: var(--ttm-violet-700);
    --color-accent: var(--ttm-indigo); --color-focus: var(--ttm-indigo); --color-surface: var(--ttm-white); --color-border: rgb(8 9 9 / 0.14);
    color: var(--ttm-black);
  }
  .f-sun { background: var(--field-sunshine); } .f-butter { background: var(--field-butter); } .f-blush { background: var(--field-blush); }
  .f-aqua { background: var(--field-aqua); } .f-lavender { background: var(--field-lavender); } .f-magenta { background: var(--field-magenta); }
  .f-lime { background: var(--field-lime); } .f-cyan { background: var(--field-cyan); } .f-orange { background: var(--field-orange); }
  /* grey fails on these fields: muted text is black there */
  .f-lavender, .f-magenta, .f-cyan, .f-orange { --color-text-muted: var(--ttm-black); --color-accent: var(--ttm-black); }
  .f-indigo, .f-navy, .f-forest, .f-hotpink {
    --color-text: var(--ttm-white); --color-text-muted: #D9D6F2; --color-link: var(--ttm-white); --color-link-visited: var(--ttm-white);
    --color-accent: var(--ttm-sunshine); --color-focus: var(--ttm-sunshine); --ic2: var(--ttm-sunshine); --color-border: rgb(255 255 255 / 0.18);
    --grade-bg: var(--ttm-sunshine); --grade-fg: var(--ttm-black);
    color: var(--ttm-white);
  }
  .f-indigo { background: var(--color-band); } .f-navy { background: var(--color-footer); } .f-forest { background: var(--ttm-forest); }
  .f-hotpink { background: var(--ttm-hotpink); color: var(--ttm-black); }
  :root[data-theme="dark"] .f-hero { --color-accent: var(--ttm-sunshine); --color-focus: var(--ttm-sunshine); --ic2: var(--ttm-sunshine); --color-link: var(--ttm-white); --grade-bg: var(--ttm-sunshine); --grade-fg: var(--ttm-black); --color-text-muted: #D9D6F2; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .f-hero { --color-accent: var(--ttm-sunshine); --color-focus: var(--ttm-sunshine); --ic2: var(--ttm-sunshine); --color-link: var(--ttm-white); --grade-bg: var(--ttm-sunshine); --grade-fg: var(--ttm-black); --color-text-muted: #D9D6F2; }
  }
  :root[data-contrast="high"] .f-sun, :root[data-contrast="high"] .f-butter, :root[data-contrast="high"] .f-blush, :root[data-contrast="high"] .f-aqua,
  :root[data-contrast="high"] .f-lavender, :root[data-contrast="high"] .f-magenta, :root[data-contrast="high"] .f-lime, :root[data-contrast="high"] .f-cyan,
  :root[data-contrast="high"] .f-orange { --color-text-muted: #1F1F1F; outline: 2px solid var(--color-text); outline-offset: -2px; }
  :root[data-contrast="high"] a { text-decoration-thickness: 2px; text-decoration-line: underline; }

  /* --- Skip link --- */
  .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast); background: var(--ttm-black); color: var(--ttm-white); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); font-weight: var(--fw-bold); }
  .skip-link:focus { top: var(--space-3); color: var(--ttm-white); }

  /* --- Header --- */
  .site-header { position: relative; z-index: var(--z-header); }
  .site-header.f-white { border-bottom: 1px solid var(--color-border); }
  .site-header__in { display: flex; align-items: center; gap: var(--space-3); max-width: calc(var(--container-max) + 2 * var(--gutter) + 6rem); margin-inline: auto; padding: var(--space-3) var(--gutter); min-height: 72px; }
  .brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; flex: none; margin-right: auto; }
  .brand:visited { color: inherit; }
  .brand .ttm-logo { width: 34px; height: 31px; }
  .brand__txt b { display: block; font: 400 1rem/1 var(--font-display); }
  .brand__txt small { display: block; font-size: 0.6875rem; font-weight: var(--fw-semibold); margin-top: 3px; }
  .nav { display: none; }
  .nav ul { display: flex; gap: var(--space-5); }
  .nav a { color: inherit; text-decoration: none; font-size: 0.9375rem; font-weight: var(--fw-bold); padding-block: var(--space-2); }
  .nav a[aria-current="page"], .nav a:hover { box-shadow: inset 0 -2px 0 currentColor; }
  .tools { display: flex; align-items: center; gap: var(--space-1); }
  .ibtn { width: var(--target-min); height: var(--target-min); border-radius: 50%; display: inline-grid; place-items: center; background: var(--ttm-white); color: var(--ttm-black); border: 0; flex: none; }
  .ibtn .ico { width: 20px; height: 20px; }
  .ibtn:hover { background: var(--ttm-black); color: var(--ttm-white); }
  .is-dark .ibtn, .f-white .ibtn { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
  .is-dark .ibtn:hover, .f-white .ibtn:hover { background: var(--color-text); color: var(--color-bg); }
  .ibtn--wide, .btn--support { display: none !important; }
  .lang { display: inline-flex; border: 2px solid currentColor; border-radius: var(--radius-pill); padding: 2px; font-weight: var(--fw-heavy); font-size: 0.8125rem; }
  .lang a { min-width: 38px; min-height: 38px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); text-decoration: none; color: inherit; line-height: 1; padding-inline: var(--space-2); }
  .lang a:visited { color: inherit; }
  .lang a.on { background: var(--ttm-black); color: var(--ttm-white); }
  .is-dark .lang a.on { background: var(--ttm-white); color: var(--ttm-black); }
  :root[data-theme="dark"] .f-hero .lang a.on, :root[data-theme="dark"] .f-white .lang a.on { background: var(--ttm-white); color: var(--ttm-black); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .f-hero .lang a.on, :root:not([data-theme="light"]) .f-white .lang a.on { background: var(--ttm-white); color: var(--ttm-black); } }
  @media (min-width: 600px) { .ibtn--wide { display: inline-grid !important; } .tools { gap: var(--space-2); } }
  @media (min-width: 1100px) {
    .nav { display: block; }
    .ibtn--menu { display: none; }
    .btn--support { display: inline-flex !important; }
    .site-header__in { gap: var(--space-6); }
    .brand { margin-right: 0; }
    .nav { margin-left: auto; }
  }
  .readbar { position: fixed; inset: 0 0 auto; height: 3px; z-index: var(--z-overlay); pointer-events: none; }
  .readbar span { display: block; height: 100%; width: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--p, 0)); }

  /* Logo motion (D16): intro once per session on the homepage; rhombus lifts on hover. */
  .ttm-logo { fill: currentColor; overflow: visible; }
  .ttm-logo .stem { transform-box: fill-box; transform-origin: 50% 0; }
  .ttm-logo .romb { transform-box: fill-box; transform-origin: 50% 50%; transition: transform var(--dur-base) var(--ease-standard); }
  a:hover > .ttm-logo .romb { transform: translateY(-3px); }
  .ttm-logo.is-intro .stem { animation: ttm-grow 380ms var(--ease-standard) both; }
  .ttm-logo.is-intro .stem.s2 { animation-delay: 80ms; }
  .ttm-logo.is-intro .romb { animation: ttm-logo-drop 360ms var(--ease-out) 820ms both; }
  .ttm-logo.is-loading .romb { animation: ttm-pulse 1.2s ease-in-out infinite; }
  @keyframes ttm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes ttm-logo-drop { from { transform: translateY(-22px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* --- Buttons --- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5);
    border-radius: var(--radius-pill); border: 0; background: var(--color-primary); color: var(--color-on-primary);
    font: var(--fw-heavy) 0.9375rem/1.1 var(--font-text); text-decoration: none; text-align: center;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  }
  .btn:visited { color: var(--color-on-primary); }
  .btn .ico { width: var(--icon-sm); height: var(--icon-sm); --ic2: currentColor; }
  .btn:hover { background: var(--color-primary-hover); color: var(--color-on-primary-hover); }
  .btn:active { transform: scale(0.97); }
  .f-indigo .btn:hover, .f-navy .btn:hover, .f-forest .btn:hover { background: var(--ttm-white); color: var(--ttm-black); }
  .btn--ghost, .btn--ghost:visited { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
  .btn--ghost:hover { background: var(--color-text); color: var(--color-bg); }
  .f-sun .btn--ghost:hover, .f-butter .btn--ghost:hover, .f-blush .btn--ghost:hover, .f-aqua .btn--ghost:hover, .f-lavender .btn--ghost:hover, .f-magenta .btn--ghost:hover { background: var(--ttm-black); color: var(--ttm-white); }
  .btn--sm { min-height: 44px; padding: 0 var(--space-4); font-size: 0.875rem; }
  .btn[aria-disabled="true"] { background: var(--ttm-butter); color: var(--ttm-grey-600); cursor: not-allowed; pointer-events: none; }
  .linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; font: inherit; }

  /* --- Pills, tags, chips, dots --- */
  .pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.7rem 1.4rem; border-radius: var(--radius-pill); background: var(--ttm-aqua); color: var(--ttm-black); font: var(--fw-bold) clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem)/1 var(--font-text); white-space: nowrap; text-decoration: none; }
  .pill:visited { color: var(--ttm-black); }
  .pill .ico { width: 20px; height: 20px; }
  .pill--blush { background: var(--ttm-blush); } .pill--butter { background: var(--ttm-butter); }
  .pill--small { padding: 0.45rem 0.9rem; font-size: 0.8125rem; }
  .tag { display: inline-block; padding: 0.5rem 0.875rem; border-radius: var(--radius-pill); background: var(--ttm-butter); color: var(--ttm-black); font: var(--fw-bold) 0.875rem/1 var(--font-text); white-space: nowrap; text-decoration: none; }
  .tag:visited { color: var(--ttm-black); }
  a.tag:hover { background: var(--ttm-black); color: var(--ttm-white); }
  .chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--ttm-white); color: var(--ttm-black); font: var(--fw-bold) 0.875rem/1 var(--font-text); white-space: nowrap; text-decoration: none; border: 0; }
  .chip:visited { color: var(--ttm-black); }
  .chip__n { font-weight: var(--fw-regular); opacity: 0.75; }
  a.chip:hover { background: var(--ttm-sunshine); }
  .f-indigo a.chip { background: var(--ttm-navy); color: var(--ttm-white); }
  .f-indigo a.chip:hover { background: var(--ttm-sunshine); color: var(--ttm-black); }
  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
  .dot { position: absolute; border-radius: 50%; pointer-events: none; }
  .dot--magenta { background: var(--ttm-magenta); } .dot--indigo { background: var(--ttm-indigo); }

  /* --- Floating 3D objects --- */
  .float-layer { position: absolute; left: var(--x); top: var(--y); width: var(--w); pointer-events: none; }
  .float-layer img { width: 100%; height: auto; }
  .float--desk { display: none; }
  @media (min-width: 900px) { .float--desk { display: block; } }
  :root[data-contrast="high"] .float-layer, :root[data-contrast="high"] .dot { display: none; }

  /* --- Hero --- */
  .hero { position: relative; overflow: clip; padding-block: var(--space-4) clamp(3rem, 2rem + 4vw, 6rem); }
  .hero__in { position: relative; z-index: var(--z-content); }
  .hero .eyebrow { margin-bottom: var(--space-2); }
  .hero .hand { margin-bottom: var(--space-2); }
  .hero .lead { margin-top: var(--space-4); }
  .hero .crumbs { margin-bottom: var(--space-5); }
  .hero__h1 { font-weight: inherit; }
  .hero__h1 .mega { display: block; }
  .hero__h1-mid { display: block; font: var(--fw-heavy) clamp(1rem, 0.85rem + 0.7vw, 1.5rem)/1.25 var(--font-text); margin: 0.35em 0; max-width: 32rem; }
  .hero__label { font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-3); }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
  .hero--home { padding-top: var(--space-3); }
  .hero--home .hero__lead { max-width: 30rem; }
  .hero--band { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  .hero--page .lead { max-width: 36rem; }
  .hero--plain { padding-bottom: var(--space-6); }
  .hero--plain .h1 { margin-top: var(--space-2); }

  /* --- Grade buttons --- */
  .grades { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  .grade { position: relative; width: 60px; height: 70px; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none;
    background: var(--grade-bg, var(--ttm-indigo)); color: var(--grade-fg, var(--ttm-white)); transition: transform var(--dur-fast) var(--ease-standard); }
  .grade:visited { color: var(--grade-fg, var(--ttm-white)); }
  a.grade:hover { transform: translateY(-3px); }
  .grade b { font: 400 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem)/1 var(--font-display); }
  .grade small { font: var(--fw-bold) 0.6875rem/1 var(--font-text); margin-top: 4px; }
  .grade.off { opacity: 0.45; }
  .grade .soon { position: absolute; top: -9px; right: -7px; background: var(--ttm-hotpink); color: var(--ttm-black); border-radius: var(--radius-pill); font: var(--fw-heavy) 0.625rem/1 var(--font-text); padding: 4px 6px; }
  .grades--dark { --grade-bg: var(--ttm-sunshine); --grade-fg: var(--ttm-black); }
  @media (min-width: 600px) { .grade { width: 84px; height: 96px; border-radius: 18px; } .grade small { font-size: 0.75rem; } .grades { gap: var(--space-3); } }

  /* --- Search + suggestions (combobox) --- */
  .search { position: relative; display: flex; align-items: center; gap: var(--space-3); background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-pill); padding: 0 6px 0 var(--space-5); min-height: 56px; max-width: 36rem; box-shadow: inset 0 0 0 2px transparent; }
  .search:focus-within { box-shadow: inset 0 0 0 2px var(--ttm-black); }
  .search__icon { color: var(--ttm-grey-600); }
  .search__input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.0625rem; font-weight: var(--fw-light); padding: var(--space-3) 0; color: var(--ttm-black); }
  .search__input::placeholder { color: var(--ttm-grey-600); opacity: 1; }
  .search__input:focus { outline: none; }
  .search__input::-webkit-search-cancel-button { cursor: pointer; }
  .search__go { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ttm-hotpink); color: var(--ttm-black); flex: none; }
  .search__go:hover { background: var(--ttm-indigo); color: var(--ttm-white); }
  .search__go:focus-visible { outline-color: var(--ttm-indigo); }
  .search--hero { margin-top: var(--space-5); }
  .f-white .search, .dlg .search { box-shadow: inset 0 0 0 2px var(--color-control-border); }
  .search__pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-overlay); background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-2); max-height: min(70vh, 26rem); overflow: auto; text-align: left; }
  .search__group { font: var(--fw-heavy) 0.75rem/1 var(--font-text); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ttm-indigo); padding: var(--space-3) var(--space-3) var(--space-2); }
  .search__opt { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; line-height: 1.35; }
  .search__opt small { display: block; color: var(--ttm-grey-600); font-size: 0.8125rem; }
  .search__opt[aria-selected="true"], .search__opt:hover { background: var(--ttm-butter); }
  .search__all { font-weight: var(--fw-bold); color: var(--ttm-indigo); }

  /* --- Breadcrumbs --- */
  .crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: 0.875rem; font-weight: var(--fw-regular); }
  .crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .crumbs li + li::before { content: "›"; opacity: 0.6; }
  .crumbs a { color: inherit; text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs [aria-current] { color: var(--color-text-muted); }

  /* --- Trust strip --- */
  .trust { padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
  .trust__list { display: grid; gap: var(--space-3) var(--space-6); grid-template-columns: 1fr; font-size: 0.9375rem; font-weight: var(--fw-semibold); }
  .trust__list li, .trust__list a { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
  .trust__list a:hover span { text-decoration: underline; }
  .trust__list .ico { color: var(--color-accent); }
  @media (min-width: 600px) { .trust__list { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1100px) { .trust__list { display: flex; flex-wrap: wrap; justify-content: space-between; } }

  /* --- Tiles (square, one object each) --- */
  .tiles { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
  @media (min-width: 600px) { .tiles--3, .tiles--links { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .tiles--3, .tiles--links { grid-template-columns: repeat(3, 1fr); } }
  .tile { aspect-ratio: 1; border-radius: var(--radius-lg); display: grid; place-items: center; overflow: hidden; }
  .tile .ttm-float { width: 74%; }
  .tile-card { display: flex; flex-direction: column; gap: var(--space-2); color: inherit; text-decoration: none; }
  .tile-card:visited { color: inherit; }
  .tile-card .h3 { margin-top: var(--space-3); }
  a.tile-card:hover .h3 { text-decoration: underline; text-underline-offset: 0.2em; }
  a.tile-card:hover .tile img { transform: scale(1.04); }
  .tile img { transition: transform var(--dur-slow) var(--ease-standard); }
  .stat { display: grid; place-items: center; text-align: center; color: var(--ttm-black); }
  .stat b { font: 400 clamp(3rem, 2rem + 4vw, 5rem)/1 var(--font-display); }
  .stat small { font-weight: var(--fw-bold); }

  /* --- Material cards (PG05) --- */
  .cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
  @media (min-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  .mcard { position: relative; border-radius: var(--radius-lg); padding: var(--space-6) var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); min-height: 15rem; transition: transform var(--dur-base) var(--ease-standard); }
  .mcard:hover { transform: translateY(-4px); }
  .mcard .eyebrow { color: var(--ttm-black); }
  .mcard .eyebrow .ico { --ic2: var(--ttm-white); }
  .mcard__title { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); font-weight: var(--fw-heavy); line-height: 1.2; }
  .mcard__title a { color: inherit; text-decoration: none; }
  .mcard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mcard__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
  .mcard__title a:focus-visible { outline: none; }
  .mcard:has(a:focus-visible) { outline: var(--focus-width) solid var(--ttm-black); outline-offset: 3px; }
  .mcard__sum { font-size: 0.9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mcard__meta { display: flex; align-items: center; gap: var(--space-1); font-size: 0.8125rem; font-weight: var(--fw-bold); margin-top: auto; }
  .mcard__meta .ico { width: 16px; height: 16px; }
  .mcard__tag { position: absolute; right: var(--space-5); bottom: var(--space-5); }
  :root[data-contrast="high"] .mcard { outline: 2px solid var(--color-text); }

  /* --- Steps (indigo) --- */
  .steps .lead { margin: var(--space-3) auto 0; }
  .steps__list { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
  .steps__list p { color: var(--color-text-muted); font-size: 0.9375rem; margin-top: var(--space-2); }
  .steps__list h3 { margin-top: var(--space-3); }
  .num-step { font: var(--fw-heavy) 1rem/1 var(--font-text); letter-spacing: 0.1em; color: var(--color-accent); }
  @media (min-width: 900px) {
    .steps__list { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .steps__list li { padding-inline: var(--space-6); }
    .steps__list li + li { border-left: 1px solid rgb(201 188 242 / 0.5); }
  }

  /* --- Portrait, quote, problems --- */
  .portrait { --size: 200px; width: var(--size); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; margin-inline: auto; font: 400 calc(var(--size) * 0.24)/1 var(--font-display); }
  .portrait img { width: 100%; height: 100%; object-fit: cover; }
  .portrait.f-hotpink { color: var(--ttm-black); } .portrait.f-sunshine, .portrait.f-sun { color: var(--ttm-black); }
  .portrait.f-sunshine { background: var(--ttm-sunshine); }
  .quote { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.55; margin: var(--space-4) auto var(--space-6); max-width: 38rem; }
  .problems { display: grid; gap: var(--space-3); margin: var(--space-6) auto; max-width: 38rem; text-align: left; }
  .problems li { display: flex; gap: var(--space-4); align-items: baseline; font-weight: var(--fw-semibold); }
  .problems__n { font: 400 1.5rem/1 var(--font-display); color: var(--ttm-indigo); flex: none; }
  .problems li:nth-child(2) .problems__n { color: var(--ttm-orange); }
  :root[data-theme="dark"] .f-white .problems__n { color: var(--ttm-sunshine); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .f-white .problems__n { color: var(--ttm-sunshine); } }
  .hashtags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-6); }

  /* --- Support band --- */
  .support-band { padding-block: var(--space-5); }
  .support-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); font-weight: var(--fw-bold); }
  .support-band p { display: flex; align-items: center; gap: var(--space-3); }
  .support-band a { color: var(--ttm-sunshine); font-weight: var(--fw-heavy); }

  /* --- Footer --- */
  .site-footer { text-align: center; padding-block: var(--space-8) var(--space-7); font-size: 0.875rem; }
  .site-footer__logo { display: inline-block; color: var(--ttm-white); margin-bottom: var(--space-5); }
  .site-footer__logo .ttm-logo { width: 46px; height: 42px; }
  .site-footer nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-weight: var(--fw-semibold); font-size: 0.9375rem; }
  .site-footer nav a { color: var(--ttm-white); text-decoration: none; display: inline-block; padding-block: var(--space-2); }
  .site-footer nav a:hover { text-decoration: underline; }
  .site-footer p { color: var(--color-text-muted); margin-top: var(--space-3); font-weight: var(--fw-light); }
  .site-footer p a, .site-footer .linklike { color: var(--ttm-white); }
  .site-footer .slogan { font: var(--fw-heavy) 0.75rem/1.2 var(--font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ttm-sunshine); margin-top: var(--space-5); }
  .site-footer__award { display: inline-flex; gap: var(--space-2); align-items: center; }
  .site-footer__award .ico { width: 18px; height: 18px; }

  /* --- Dialogs (search, display, menu) --- */
  .dlg { border: 0; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); width: min(36rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100dvh - 2rem); box-shadow: var(--shadow-3); }
  .dlg::backdrop { background: var(--color-scrim); }
  .dlg__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
  .dlg__title { font: var(--fw-heavy) 1.125rem/1.2 var(--font-text); }
  .dlg__hint { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 0.875rem; }
  .dlg .ibtn { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
  .dlg--search { margin-top: 8vh; overflow: visible; }
  .dlg--search .search { max-width: none; }
  .dlg--menu { margin: 0 0 0 auto; height: 100dvh; max-height: none; border-radius: var(--radius-xl) 0 0 var(--radius-xl); width: min(24rem, 100vw); }
  .menu-list { display: grid; gap: var(--space-1); }
  .menu-list a { display: block; padding: var(--space-3) 0; font: var(--fw-heavy) 1.375rem/1.2 var(--font-text); color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-border); }
  .menu-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
  .display-form { display: grid; gap: var(--space-5); }
  .display-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .display-form legend { font-weight: var(--fw-heavy); margin-bottom: var(--space-2); padding: 0; }
  .display-form label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 2px var(--color-control-border); font-weight: var(--fw-bold); cursor: pointer; }
  .display-form input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
  .display-form label:has(input:checked) { background: var(--color-text); color: var(--color-bg); box-shadow: none; }
  .display-form label:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

  /* --- Consent, toast, notices --- */
  .consent { position: fixed; z-index: var(--z-toast); left: var(--gutter); right: var(--gutter); bottom: var(--gutter); max-width: 22rem; margin-left: auto; background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-3); font-size: 0.875rem; --color-link: var(--ttm-indigo); }
  .consent a { color: var(--ttm-indigo); }
  .consent__title { font-weight: var(--fw-heavy); }
  .consent__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .consent .btn--ghost { color: var(--ttm-black); }
  .toast { position: fixed; z-index: var(--z-toast); left: 50%; bottom: var(--space-5); transform: translate(-50%, 150%); background: var(--ttm-black); color: var(--ttm-white); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); font-weight: var(--fw-bold); transition: transform var(--dur-base) var(--ease-standard); pointer-events: none; }
  .toast:not(.is-on) { visibility: hidden; }
  .toast.is-on { transform: translate(-50%, 0); }
  .notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); margin: var(--space-4) 0; font-weight: var(--fw-regular); line-height: 1.5; }
  .notice .ico { margin-top: 2px; }
  .notice--info { background: var(--ttm-aqua); color: var(--ttm-black); }
  .notice--success { background: var(--ttm-aqua); color: var(--ttm-black); border-left: 4px solid var(--ttm-green-700); }
  .notice--error { background: var(--ttm-blush); color: var(--ttm-black); border-left: 4px solid var(--ttm-red-700); }

  /* --- Forms --- */
  .card { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); position: relative; }
  .f-indigo .card, .f-navy .card { --color-text: var(--ttm-black); --color-text-muted: var(--ttm-grey-600); --color-link: var(--ttm-indigo); --color-focus: var(--ttm-indigo); --color-control-border: var(--ttm-grey-600); background: var(--ttm-white); color: var(--ttm-black); }
  .form { display: grid; gap: var(--space-4); }
  .form .muted { margin-top: calc(-1 * var(--space-2)); }
  .field { display: grid; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
  fieldset.field { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .field legend, .field > label { font-weight: var(--fw-bold); font-size: 0.9375rem; padding: 0; margin-bottom: var(--space-1); flex-basis: 100%; }
  .field input[type="text"], .field input[type="email"], .field textarea, .sort select {
    width: 100%; min-height: 48px; border-radius: var(--radius-md); border: 2px solid var(--color-control-border); background: var(--ttm-white); color: var(--ttm-black); padding: var(--space-3) var(--space-4); font-weight: var(--fw-regular);
  }
  .field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
  .radio, .check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: var(--fw-regular); cursor: pointer; }
  .radio input, .check input { width: 20px; height: 20px; accent-color: var(--ttm-indigo); }
  .hint { font-size: 0.8125rem; color: var(--color-text-muted); }
  .req { color: var(--color-error); }
  .hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

  /* --- Lesson pages: material --- */
  .lesson-head { padding-block: var(--space-6) var(--space-5); }
  .lesson-head .crumbs { margin-bottom: var(--space-5); }
  .lesson-head .h1 { margin-top: var(--space-2); max-width: 22ch; }
  .lesson-head .lead { margin-top: var(--space-3); }
  .lesson-head .muted { margin-top: var(--space-3); font-size: 0.9375rem; }
  .lesson-body { padding-bottom: var(--space-9); }
  .material { padding-block: var(--space-6) var(--space-9); }
  .material__grid { display: grid; gap: var(--space-7); }
  @media (min-width: 1200px) { .material__grid { grid-template-columns: minmax(0, 46rem) 18rem; justify-content: space-between; } .material__side { position: sticky; top: var(--space-6); align-self: start; } }
  .material .crumbs { margin-bottom: var(--space-5); }
  .material__title { margin-top: var(--space-2); }
  .material__lead { margin-top: var(--space-3); color: var(--color-text-muted); }
  .badge-sample { display: inline-block; background: var(--ttm-yellow); color: var(--ttm-black); font: var(--fw-heavy) 0.75rem/1 var(--font-text); letter-spacing: 0.1em; padding: 6px 10px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
  .badge-check { display: flex; gap: var(--space-2); align-items: center; background: var(--ttm-sunshine); color: var(--ttm-black); font-size: 0.875rem; font-weight: var(--fw-bold); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
  .badge-check .ico { width: 18px; height: 18px; }
  .meta-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
  .meta-chips li { display: inline-flex; align-items: center; gap: 6px; background: var(--ttm-butter); color: var(--ttm-black); border-radius: var(--radius-pill); padding: 0.45rem 0.9rem; font-size: 0.875rem; font-weight: var(--fw-bold); max-width: 100%; }
  .meta-chips .ico { width: 16px; height: 16px; --ic2: var(--ttm-lavender); }
  :root[data-contrast="high"] .meta-chips li { outline: 2px solid var(--ttm-black); background: var(--ttm-white); }
  .trust-line { margin-top: var(--space-4); font-size: 0.875rem; color: var(--color-text-muted); font-weight: var(--fw-regular); }
  .disclaimer-line { font-size: 0.875rem; color: var(--color-text-muted); margin-top: var(--space-1); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
  .sheet { margin-top: var(--space-6); max-width: 34rem; }
  .sheet__link { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--color-border), var(--shadow-2); background: var(--ttm-white); }
  .sheet__img { width: 100%; height: auto; }
  .sheet figcaption { margin-top: var(--space-2); font-size: 0.8125rem; color: var(--color-text-muted); }
  .textver, .history { margin-top: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface-alt); }
  .textver > summary, .history > summary { list-style: none; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-5); font-weight: var(--fw-heavy); color: var(--color-text); }
  .textver > summary::-webkit-details-marker, .history > summary::-webkit-details-marker { display: none; }
  .textver__chev { margin-left: auto; transition: transform var(--dur-base) var(--ease-standard); }
  .textver[open] .textver__chev { transform: rotate(180deg); }
  .textver .prose { background: var(--color-bg); margin: 0 6px 6px; border-radius: calc(var(--radius-lg) - 4px); padding: var(--space-5); }
  .history table { width: calc(100% - 2 * var(--space-5)); margin: 0 var(--space-5) var(--space-5); font-size: 0.875rem; }
  .history th, .history td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
  .fop { margin-top: var(--space-5); font-size: 0.875rem; color: var(--color-text-muted); }
  .tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  .side-card { border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-3); justify-items: start; }
  .side-related { margin-top: var(--space-6); }
  .side-related ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
  .side-related a { font-weight: var(--fw-semibold); }
  .pager { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
  @media (min-width: 600px) { .pager { grid-template-columns: 1fr 1fr; } }
  .pager a { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 2px var(--color-border); color: var(--color-text); text-decoration: none; font-weight: var(--fw-bold); }
  .pager a:hover { box-shadow: inset 0 0 0 2px var(--color-text); }
  .pager small { color: var(--color-text-muted); font-weight: var(--fw-regular); }
  .pager__next { text-align: right; grid-column: -2; }

  /* --- Prose and lesson content --- */
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: var(--space-4); }
  .prose h2 { font-size: var(--fs-h3); margin-top: var(--space-7); }
  .prose h3 { font-size: 1.125rem; margin-top: var(--space-6); }
  .prose ul, .prose ol { padding-left: 1.4em; }
  .prose li + li { margin-top: var(--space-2); }
  .prose a { font-weight: var(--fw-semibold); }
  .lesson { font-weight: var(--fw-regular); }
  .lesson strong { font-weight: var(--fw-heavy); }
  .ttm-callout { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); color: var(--ttm-black); --color-link: var(--ttm-indigo); }
  .ttm-callout > * + * { margin-top: var(--space-2); }
  .callout__label { display: flex; align-items: center; gap: var(--space-2); font: var(--fw-heavy) 0.8125rem/1.2 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; }
  .callout__label .ico { width: 18px; height: 18px; --ic2: var(--ttm-white); }
  .ttm-callout--rule { background: var(--field-aqua); }
  .ttm-callout--example { background: var(--field-blush); }
  .ttm-callout--remember { background: var(--field-sunshine); }
  .ttm-callout--trap, .ttm-callout--exceptions { background: var(--field-magenta); }
  .ttm-callout--note, .ttm-callout--tip { background: var(--field-butter); }
  :root[data-contrast="high"] .ttm-callout, :root[data-contrast="high"] .ttm-self-check { outline: 2px solid currentColor; outline-offset: -2px; color: var(--color-text); }
  .ttm-callout ul, .ttm-callout ol { padding-left: 1.2em; }
  .ttm-self-check { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: inset 0 0 0 2px var(--ttm-lavender); }
  .ttm-self-check > * + * { margin-top: var(--space-2); }
  .ttm-self-check .callout__label { color: var(--color-accent); }
  .ttm-self-check details summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--ttm-hotpink); color: var(--ttm-black); font-weight: var(--fw-heavy); list-style: none; }
  .ttm-self-check details summary::-webkit-details-marker { display: none; }
  .ttm-self-check details[open] summary { background: var(--ttm-black); color: var(--ttm-white); }
  .ttm-self-check details > :not(summary) { margin-top: var(--space-3); }
  .ttm-sources { font-size: 0.875rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
  .rule { border: 0; height: 2px; background: var(--color-border); margin: var(--space-6) 0; }
  .table-scroll { overflow-x: auto; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-border); max-width: 100%; }
  .table-scroll figure { margin: 0; }
  .table-scroll table { width: 100%; font-size: var(--fs-table); line-height: 1.4; min-width: 28rem; }
  .table-scroll th, .table-scroll td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
  .table-scroll thead th { background: var(--color-surface-alt); font-weight: var(--fw-heavy); }
  .table-scroll th:first-child, .table-scroll td:first-child { position: sticky; left: 0; background: var(--color-bg); }
  .table-scroll thead th:first-child { background: var(--color-surface-alt); }
  .wp-block-image img { border-radius: var(--radius-md); }
  .ttm-faq { border-radius: var(--radius-lg); background: var(--ttm-blush); color: var(--ttm-black); margin-top: var(--space-3); }
  .ttm-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--space-3) var(--space-5); font-weight: var(--fw-heavy); }
  .ttm-faq summary::-webkit-details-marker { display: none; }
  .ttm-faq summary::after { content: "+"; font: 400 1.5rem/1 var(--font-display); transition: transform var(--dur-base) var(--ease-standard); }
  .ttm-faq[open] { background: var(--ttm-white); box-shadow: inset 0 0 0 2px var(--ttm-blush); }
  .ttm-faq[open] summary::after { transform: rotate(45deg); }
  .ttm-faq > :not(summary) { padding: 0 var(--space-5) var(--space-5); }
  :root[data-theme="dark"] .ttm-faq[open] { background: var(--color-surface); color: var(--color-text); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ttm-faq[open] { background: var(--color-surface); color: var(--color-text); } }

  /* --- Curriculum: grade page (PG03) --- */
  .sec-tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 900px) { .sec-tiles { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
  .sec-tile { display: flex; flex-direction: column; justify-content: flex-end; min-height: 11rem; border-radius: var(--radius-lg); padding: var(--space-4); color: var(--ttm-black); text-decoration: none; position: relative; overflow: hidden; height: 100%; }
  .sec-tile:visited { color: var(--ttm-black); }
  a.sec-tile:hover { box-shadow: inset 0 0 0 3px var(--ttm-black); }
  .sec-tile__art { width: clamp(64px, 30%, 96px); margin-bottom: auto; }
  .sec-tile__name { font-weight: var(--fw-heavy); font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem); line-height: 1.2; margin-top: var(--space-3); }
  .sec-tile__meta { font-size: 0.8125rem; color: var(--ttm-grey-600); margin-top: var(--space-1); }
  .f-lavender .sec-tile__meta, .sec-tile.f-lavender .sec-tile__meta { color: var(--ttm-black); }
  .sec-tile--off { background: var(--color-surface-alt); color: var(--color-text); opacity: 0.55; }
  .sec-tile--off .sec-tile__meta { color: var(--color-text-muted); }
  .topic-panel { margin-top: var(--space-6); border-radius: var(--radius-lg); background: var(--ttm-butter); color: var(--ttm-black); padding: var(--space-2) var(--space-3) var(--space-3); --color-text-muted: var(--ttm-grey-600); scroll-margin-top: var(--space-5); }
  .topic-panel > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); min-height: 56px; }
  .topic-panel > summary::-webkit-details-marker { display: none; }
  .topic-panel > summary h2 { display: flex; align-items: center; gap: var(--space-2); }
  .topic-panel__chev { transition: transform var(--dur-base) var(--ease-standard); }
  .topic-panel[open] .topic-panel__chev { transform: rotate(180deg); }
  .topic-list { display: grid; gap: var(--space-2); }
  .topic-list a { display: flex; align-items: center; gap: var(--space-4); background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); min-height: 60px; text-decoration: none; font-weight: var(--fw-bold); }
  .topic-list a:hover { box-shadow: inset 0 0 0 2px var(--ttm-black); }
  .topic-list__n { font: 400 1.375rem/1 var(--font-display); color: var(--ttm-indigo); flex: none; min-width: 2.2ch; }
  .topic-list__name { flex: 1; }
  .topic-list__count { font-size: 0.8125rem; font-weight: var(--fw-regular); color: var(--ttm-grey-600); white-space: nowrap; }
  .empty { text-align: center; padding: var(--space-7) 0; }

  /* --- Topic page rows --- */
  .mlist { display: grid; gap: var(--space-3); max-width: 52rem; }
  .mrow { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 2px var(--color-border); position: relative; }
  .mrow:hover { box-shadow: inset 0 0 0 2px var(--color-text); }
  .mrow__n { font: 400 1.5rem/1 var(--font-display); color: var(--color-accent); flex: none; min-width: 2.2ch; }
  .mrow__body { display: grid; gap: var(--space-1); }
  .mrow h2 a { color: var(--color-text); text-decoration: none; }
  .mrow h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mrow h2 a:focus-visible { outline: none; }
  .mrow:has(a:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
  .mrow__sum { color: var(--color-text-muted); font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: 0.8125rem; font-weight: var(--fw-bold); }
  .meta-line .ico { width: 16px; height: 16px; }
  .topic-block + .topic-block { margin-top: var(--space-6); }
  .link-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

  /* --- Grade picker (PG02) --- */
  .grade-tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 900px) { .grade-tiles { grid-template-columns: repeat(5, 1fr); } }
  .grade-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); padding: var(--space-5) var(--space-3); border-radius: var(--radius-lg); color: var(--ttm-black); text-decoration: none; height: 100%; }
  .grade-tile:visited { color: var(--ttm-black); }
  a.grade-tile:hover { box-shadow: inset 0 0 0 3px var(--ttm-black); }
  .grade-tile__art { width: 72%; }
  .grade-tile__name { font: 400 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.1 var(--font-display); margin-top: var(--space-2); }
  .grade-tile__meta { font-size: 0.8125rem; font-weight: var(--fw-bold); }
  .grade-tile--off { opacity: 0.6; }
  .grade-tile__soon { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--ttm-hotpink); }

  /* --- Library (PG05) --- */
  .library__bar { padding-bottom: var(--space-6); }
  .filters { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
  .chipset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .chipset legend { font-weight: var(--fw-heavy); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; margin-bottom: var(--space-2); float: left; width: 100%; }
  .chipset .chip { position: relative; cursor: pointer; }
  .chipset .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .chipset .chip:has(input:checked) { background: var(--ttm-black); color: var(--ttm-white); }
  .chipset .chip:has(input:focus-visible) { outline: var(--focus-width) solid var(--ttm-black); outline-offset: 2px; }
  .chipset .chip--off { opacity: 0.5; cursor: not-allowed; }
  .more-filters > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: var(--fw-heavy); list-style: none; }
  .more-filters > summary::-webkit-details-marker { display: none; }
  .more-filters[open] > summary { margin-bottom: var(--space-3); }
  .more-filters { display: grid; gap: var(--space-4); }
  .sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-weight: var(--fw-bold); }
  .sort select { width: auto; min-width: 14rem; }
  .filters__apply { display: flex; gap: var(--space-4); align-items: center; }
  .js .filters__apply .btn { display: none; }
  .results-count { font-weight: var(--fw-heavy); margin-bottom: var(--space-5); }
  .empty-state { border-radius: var(--radius-xl); padding: var(--space-7) var(--space-5); text-align: center; display: grid; justify-items: center; gap: var(--space-3); }
  .empty-state__art { width: min(320px, 80%); }
  .empty-state__links { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

  /* --- Project pages --- */
  .page-body .prose { margin-inline: auto; }
  .team { display: grid; gap: var(--space-7) var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-7); text-align: center; }
  @media (min-width: 600px) { .team { grid-template-columns: repeat(3, 1fr); } }
  .person .h3 { margin-top: var(--space-4); }
  .person .muted { margin-top: var(--space-1); font-size: 0.9375rem; }
  .credo__text p { font: var(--fw-light) clamp(1.25rem, 1.05rem + 1vw, 1.875rem)/1.45 var(--font-text); margin-top: var(--space-4); }
  .credo__text .hand { margin-top: var(--space-5); color: var(--ttm-sunshine); }
  .mega--motto .mega__accent { color: var(--ttm-sunshine); display: block; }
  .story__list { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
  @media (min-width: 900px) { .story__list { grid-template-columns: repeat(3, 1fr); } }
  .story-card { background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; --color-link: var(--ttm-indigo); }
  .story-card__n { font: 400 2.5rem/1 var(--font-display); color: var(--ttm-indigo); }
  .story-card:nth-child(2) .story-card__n { color: var(--ttm-orange); }
  .story-card__art { width: 70%; margin-inline: auto; }
  .diploma { display: grid; gap: var(--space-2); color: var(--ttm-indigo); }
  .diploma img { border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--ttm-grey-200); }
  .contact-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
  .contact-list li { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
  .routes { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
  @media (min-width: 900px) { .routes { grid-template-columns: 1fr 1fr; } }
  .route-card { background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-2); justify-items: start; --color-text-muted: var(--ttm-grey-600); }
  .route-card__art { width: 60%; justify-self: center; opacity: 0.7; }
  .progress-card { margin-top: var(--space-6); background: var(--ttm-white); color: var(--ttm-black); }
  .progress-card__nums b { font: 400 2rem/1 var(--font-display); }
  .progress-bar { height: 12px; border-radius: var(--radius-pill); background: var(--ttm-grey-200); margin-top: var(--space-3); overflow: hidden; }
  .progress-bar span { display: block; height: 100%; background: var(--ttm-hotpink); }
  .money { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
  @media (min-width: 900px) { .money { grid-template-columns: 1fr 1fr; } }
  .big-num { font: 400 clamp(2.5rem, 1.8rem + 3vw, 4.5rem)/1 var(--font-text); font-weight: var(--fw-heavy); margin: var(--space-3) 0; }
  .plan { width: 100%; margin-top: var(--space-3); }
  .plan th, .plan td { padding: var(--space-2) 0; border-bottom: 1px solid rgb(8 9 9 / 0.14); text-align: left; font-weight: var(--fw-regular); }
  .plan td { text-align: right; white-space: nowrap; }
  .plan__total th, .plan__total td { font-weight: var(--fw-heavy); border-bottom: 0; }
  .report-grid { display: grid; gap: var(--space-4); margin-top: var(--space-7); grid-template-columns: 1fr; position: relative; z-index: var(--z-content); }
  @media (min-width: 600px) { .report-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .report-grid { grid-template-columns: repeat(4, 1fr); } }
  .report { background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
  .report .eyebrow { color: var(--ttm-black); font-size: 0.6875rem; }
  .report__num { font: 400 2.25rem/1 var(--font-display); }
  .report .small { color: var(--ttm-grey-600); }
  .supporters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
  .supporters li { background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font-weight: var(--fw-bold); }

  /* --- Style guide --- */
  .sg { padding-block: var(--space-7) var(--space-9); display: grid; gap: var(--space-5); }
  .sg .h2 { margin-top: var(--space-6); }
  .sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); font-size: 0.8125rem; }
  .sg-swatches span { display: block; height: 64px; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-border); margin-bottom: var(--space-1); }
  .sg-swatches b { display: block; }
  .sg-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-3); }
  .sg-fields > div { padding: var(--space-4); border-radius: var(--radius-md); display: grid; gap: var(--space-2); justify-items: start; }
  .sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .sg-icons, .sg-3d { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--space-3); font-size: 0.75rem; }
  .sg-icons li, .sg-3d li { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-border); text-align: center; overflow-wrap: anywhere; }
  .sg-icons .ico { width: 32px; height: 32px; }
  .sg-3d--scenes { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}

/* ============================== PAGES: hero compositions ============================== */
@layer pages {
  /* Home hero (PG01) — positions per breakpoint; phones keep at most two objects, no near blur */
  .hero__h1wrap { position: relative; }
  .hero__h1wrap .hero__h1 { position: relative; z-index: 2; }
  .float-layer.hh-knot { left: auto; right: calc(-1 * var(--gutter) - 30px); top: -0.2em; width: 2.6em; font-size: var(--fs-mega); }
  .float-layer.hh-gem-sm { left: auto; right: 18%; top: 8px; width: 46px; }
  .hh-dot1, .hh-dot2, .hh-pill1, .hh-pill2, .hh-pill3 { display: none; }
  @media (min-width: 600px) {
    .float-layer.hh-knot { width: 2.2em; }
  }
  @media (min-width: 900px) {
    .hero--home { min-height: 760px; padding-bottom: var(--space-9); }
    .float-layer.hh-scene { left: auto; right: -2%; top: 30px; width: min(640px, 50vw); }
    .float-layer.hh-knot { left: calc(-0.9em - var(--gutter)); right: auto; top: auto; bottom: 0.1em; width: 2.2em; }
    .float-layer.hh-rhombus { left: 47%; top: 40px; width: 120px; }
    .float-layer.hh-gem { left: auto; right: 4%; top: 590px; width: 170px; }
    .float-layer.hh-gem-sm { right: 30%; top: 600px; width: 64px; }
    .hh-dot1 { display: block; width: 64px; height: 64px; left: 52%; top: 700px; }
    .hh-dot2 { display: block; width: 22px; height: 22px; right: 9%; top: 130px; }
    .hh-pill1, .hh-pill2, .hh-pill3 { display: inline-flex; position: absolute; z-index: 3; }
    .hh-pill1 { left: 44%; top: 110px; }
    .hh-pill2 { left: 50%; top: 500px; }
    .hh-pill3 { left: 56%; top: 590px; }
    .hero--home .hero__in { padding-top: var(--space-5); }
  }
  @media (min-width: 1400px) { .hh-pill1 { left: 46%; } }

  /* English home (PG16) */
  .float-layer.he-knot { left: auto; right: -40px; top: 40px; width: 140px; }
  .mega--en { font-size: clamp(2.25rem, 1rem + 5vw, 6rem); }
  .he-pill { display: none; }
  @media (min-width: 900px) {
    .hero--en { min-height: 640px; }
    .hero--en .hero__in { max-width: calc(var(--container-max) + 2 * var(--gutter)); }
    .hero--en .hero__h1, .hero--en .hero__lead { max-width: 52%; }
    .float-layer.he-scene { left: auto; right: 0; top: 40px; width: min(600px, 46vw); }
    .float-layer.he-knot { right: auto; left: 40%; top: 420px; width: 180px; }
    .float-layer.he-icosa { left: 30%; top: 30px; width: 110px; }
    .he-pill { display: inline-flex; position: absolute; left: 56%; top: 470px; z-index: 3; }
  }
  .float-layer.aw-medal { left: auto; right: 4%; top: 20%; width: 260px; }

  /* Steps band objects */
  .float-layer.st-five { left: 4%; top: 24px; width: 110px; }
  .float-layer.st-tick { left: auto; right: 6%; top: 50px; width: 140px; }
  .float-layer.st-arrow { left: auto; right: 14%; bottom: 20px; top: auto; width: 160px; }
  @media (max-width: 599px) { .float-layer.st-five { left: auto; right: -12px; top: 8px; width: 84px; } }
  /* Methodology band (home) */
  .float-layer.me-quotes { left: 4%; top: 40px; width: 110px; }
  .float-layer.me-gem { left: auto; right: 10%; top: 80px; width: 110px; }
  @media (min-width: 900px) { .float-layer.me-quotes { top: 120px; width: 180px; } }
  /* Story band (home) */
  .float-layer.sy-ball { left: -60px; top: -50px; width: 160px; }
  .float-layer.sy-spring { left: auto; right: 8%; top: 40%; width: 140px; }
  @media (min-width: 900px) { .float-layer.sy-ball { width: 220px; } }
  .teach-band .split__art { max-width: 520px; justify-self: center; }

  /* Band and page heroes */
  .float-layer.gr-num { left: auto; right: 2%; top: 64px; width: clamp(120px, 22vw, 260px); }
  .float-layer.gr-capsule { left: 62%; top: 60%; width: 120px; }
  .hero--band .hero__in { padding-right: clamp(0px, 18vw, 260px); }
  .float-layer.pg-scene { left: auto; right: -30px; top: 10px; width: clamp(150px, 42vw, 560px); opacity: 1; }
  .float-layer.pg-obj1 { left: 46%; top: 30px; width: 90px; }
  @media (max-width: 899px) { .hero--page .float-layer.pg-scene { position: relative; display: block; right: auto; left: auto; top: auto; margin: 0 0 calc(-1 * var(--space-6)) auto; width: min(60vw, 280px); } .hero--page { display: flex; flex-direction: column; } .hero--page .float-layer.pg-scene { order: -1; } }
  @media (min-width: 900px) { .hero--page { min-height: 440px; } .hero--page .hero__in > :not(.crumbs):not(h1) { max-width: 56%; } }
  .float-layer.lb-scene { left: auto; right: 0; top: 10px; width: min(520px, 40vw); }
  .float-layer.lb-ball { left: auto; right: 6%; top: 20px; width: 56px; }
  .float-layer.lb-gem { left: 62%; top: 60%; width: 90px; }
  .hero--library { padding-bottom: var(--space-4); }
  @media (min-width: 900px) { .hero--library { min-height: 360px; } }
  .float-layer.nf-scene { left: auto; right: -20px; top: 40px; width: clamp(160px, 40vw, 560px); }
  .hero--404 .hero__in { padding-right: clamp(0px, 30vw, 520px); }
  @media (max-width: 899px) { .float-layer.nf-scene { position: relative; right: auto; top: auto; margin: 0 0 calc(-1 * var(--space-5)) auto; } .hero--404 { display: flex; flex-direction: column; } .hero--404 .float-layer { order: -1; } .hero--404 .hero__in { padding-right: 0; } }
  .float-layer.cr-quotes { left: auto; right: 6%; top: 30px; width: clamp(80px, 14vw, 160px); }
  .float-layer.sy-ball2 { left: auto; right: -40px; top: 20px; width: 180px; }
  .float-layer.rp-school { left: auto; right: 2%; bottom: 10%; top: auto; width: 300px; }
}

/* ============================== UTILITIES ============================== */
@layer utilities {
  .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; white-space: normal; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .btn, .grade, .mcard, .tile img, .toast { transition: none !important; }
    .ttm-logo .stem, .ttm-logo .romb { animation: none !important; transition: none !important; }
    a.grade:hover, .mcard:hover { transform: none; }
  }
}

@layer components {
  .lang-hint { display: flex; align-items: center; justify-content: center; gap: var(--space-3); background: var(--ttm-black); color: var(--ttm-white); padding: var(--space-2) var(--gutter); font-size: 0.9375rem; font-weight: var(--fw-semibold); }
  .lang-hint a { color: var(--ttm-sunshine); }
  .lang-hint .ibtn { background: transparent; color: var(--ttm-white); box-shadow: none; font-size: 1.5rem; }
  .field__error { color: var(--color-error); font-weight: var(--fw-bold); }
  [aria-invalid="true"] { border-color: var(--color-error) !important; }
}

/* Small phones: header keeps logo, search, RU | EN and menu on one line; the hero fits above the fold. */
@layer pages {
  @media (max-width: 419px) {
    .brand__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .site-header__in { gap: var(--space-2); }
  }
  @media (max-width: 599px) {
    .tools { gap: 6px; }
    .lang a { min-width: 40px; }
    .hero--home { padding-top: var(--space-2); }
    .hero--home .hand { font-size: 1.3rem; }
    .hero--home .doodle { display: none; }
    .hero--home .hero__lead { font-size: 1.0625rem; margin-top: var(--space-3); }
    .hero--home .hero__label { margin-top: var(--space-4); }
    .hero--home .search--hero { margin-top: var(--space-4); }
    .crumbs ol { font-size: 0.8125rem; }
  }
}

/* People photos, inspiration profile, team strip and project photos (18 Oct 2026). */
@layer components {
  .portrait--photo { padding: 0; box-shadow: 0 0 0 clamp(6px, 1vw, 10px) var(--portrait-ring, transparent); }
  .portrait--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .portrait.f-indigo { --portrait-ring: var(--ttm-indigo); }
  .portrait.f-hotpink { --portrait-ring: var(--ttm-hotpink); }
  .portrait.f-lavender { --portrait-ring: var(--ttm-lavender); }
  .portrait.f-sunshine, .portrait.f-sun { --portrait-ring: var(--ttm-sunshine); }
  .f-sun .portrait.f-sunshine, .f-hero .portrait.f-sunshine { --portrait-ring: var(--ttm-white); }
  .portrait.f-aqua { --portrait-ring: var(--ttm-aqua); }
  .portrait.f-blush { --portrait-ring: var(--ttm-blush); }
  .method-short { margin-top: var(--space-2); }

  .profile__in { display: grid; gap: var(--space-6); align-items: center; position: relative; z-index: var(--z-content); }
  @media (min-width: 900px) { .profile__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); } }
  .profile__photo .portrait { margin-inline: auto; }
  .profile__text .h2 { margin-top: var(--space-2); }
  .profile__role { font-weight: var(--fw-bold); margin-top: var(--space-2); }
  .profile__text .body { margin-top: var(--space-2); }
  .profile__motto { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-top: var(--space-4); font-size: var(--fs-lead); }
  .profile__facts { margin-top: var(--space-5); background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-lg); padding: var(--space-5); font-weight: var(--fw-regular); font-size: 0.9375rem; line-height: 1.55; --color-link: var(--ttm-indigo); }
  .profile__facts ul { padding-left: 1.2em; margin: 0; display: grid; gap: var(--space-2); }
  .profile__facts ul.facts { list-style: none; padding: 0; }
  .profile__facts ul.facts li { padding-bottom: var(--space-2); border-bottom: 1px solid var(--ttm-grey-200); }
  .profile__facts ul.facts li:last-child { border-bottom: 0; padding-bottom: 0; }
  .profile__facts h3 { font-size: 0.8125rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ttm-indigo); margin: var(--space-5) 0 var(--space-3); }
  .profile__cta { margin-top: var(--space-5); }
  :root[data-contrast="high"] .profile__facts { outline: 2px solid var(--ttm-black); }

  .team-strip__lead { max-width: 36rem; margin: var(--space-3) auto 0; }
  .team--strip { margin-block: var(--space-6) var(--space-6); }
  @media (min-width: 600px) { .team--strip { grid-template-columns: repeat(3, minmax(0, 19rem)); justify-content: center; } }

  .photo-grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); position: relative; z-index: var(--z-content); }
  @media (min-width: 900px) { .photo-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } .photo-card--big { grid-row: span 2; } }
  .photo-card figure { background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-2) var(--space-3); height: 100%; display: flex; flex-direction: column; }
  .photo-card img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: calc(var(--radius-lg) - 6px); aspect-ratio: 4 / 3; }
  .photo-card--big img { aspect-ratio: 3 / 2; flex: none; }
  .photo-card figcaption { font-size: 0.875rem; font-weight: var(--fw-bold); padding: var(--space-3) var(--space-2) 0; }
  .photos .hand { justify-content: center; }
  .photos .photo-card figure { box-shadow: var(--shadow-2); }
}
@layer pages {
  .float-layer.pf-quotes { left: auto; right: 4%; top: 30px; width: 140px; }
  .float-layer.ts-donut { left: 5%; top: 60px; width: 120px; }
}
@layer components { .portrait--photo + .eyebrow { margin-top: var(--space-6); } }

/* 1.2: bigger, barely cropped photos on backdrops in each photo's own palette colours. */
@layer components {
  .pphoto { position: relative; width: var(--pp-w, 260px); max-width: 100%; aspect-ratio: 4 / 5; margin: var(--space-4) auto 0; }
  .pphoto::before { content: ""; position: absolute; z-index: 0; width: 86%; aspect-ratio: 1; border-radius: 50%; background: var(--pp-bg, var(--ttm-indigo)); right: -9%; top: -7%; }
  .pphoto__dot { position: absolute; z-index: 2; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--pp-dot, var(--ttm-sunshine)); left: -6%; bottom: 10%; }
  .pphoto__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-2); background: var(--pp-bg, var(--ttm-indigo)); }
  .team .person .pphoto + .h3 { margin-top: var(--space-5); }
  .team { align-items: start; }
  @media (min-width: 600px) { .team:not(.team--strip) { grid-template-columns: repeat(3, minmax(0, 21rem)); justify-content: center; } }
  :root[data-contrast="high"] .pphoto::before, :root[data-contrast="high"] .pphoto__dot { display: none; }
  .portrait.f-navy { --portrait-ring: var(--ttm-navy); }
  .portrait.f-butter { --portrait-ring: var(--ttm-butter); }
  .f-blush .portrait.f-blush, .f-butter .portrait.f-butter { --portrait-ring: var(--ttm-white); }
}
@layer pages {
  .float-layer.ph-ball { left: auto; right: 5%; top: 40px; width: 90px; }
}

/* About: the project's path (1.3) — a line with rhombus markers, stations left/right, big diploma card. */
@layer components {
  .story-path .hand { justify-content: center; }
  .story-path__lead { margin: var(--space-3) auto 0; color: var(--color-text-muted); }
  .path { --line-x: 18px; position: relative; margin-top: var(--space-8); display: grid; gap: var(--space-8); z-index: var(--z-content); }
  .path::before, .path::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(var(--line-x) - 2px); width: 4px; border-radius: 4px; }
  .path::before { background: rgb(201 188 242 / 0.35); }
  .path::after { background: var(--ttm-sunshine); transform-origin: top; }
  .path__step { position: relative; z-index: 1; display: grid; grid-template-columns: calc(var(--line-x) * 2 + var(--space-3)) minmax(0, 1fr); align-items: start; }
  .path__node { grid-column: 1; grid-row: 1; justify-self: start; margin-left: calc(var(--line-x) - 13px); margin-top: var(--space-2); width: 26px; height: 26px; background: var(--ttm-sunshine); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--color-band); }
  .path__node--big { width: 40px; height: 40px; margin-left: calc(var(--line-x) - 20px); }
  .path__body, .path__art, .award-card { grid-column: 2; }
  .path__art { margin-top: var(--space-5); position: relative; }
  .path__n { font: 400 clamp(3rem, 2rem + 4vw, 5.5rem)/0.9 var(--font-display); color: var(--ttm-sunshine); letter-spacing: -0.02em; }
  .path__n span { color: var(--ttm-lavender-300); }
  .path__body .eyebrow { margin-top: var(--space-3); }
  .path__title { font: var(--fw-heavy) clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.15 var(--font-text); margin-top: var(--space-2); color: var(--ttm-white); }
  .path__body > p:not(.path__n):not(.eyebrow) { margin-top: var(--space-4); font-weight: var(--fw-light); font-size: var(--fs-lead); line-height: 1.55; max-width: 34rem; }
  .path__body > p.path__sub { font-size: var(--fs-body); font-weight: var(--fw-bold); }
  .path__points { margin-top: var(--space-3); padding: 0; list-style: none; display: grid; gap: var(--space-2); max-width: 34rem; }
  .path__points li { position: relative; padding-left: 1.6em; font-weight: var(--fw-regular); }
  .path__points li::before { content: ""; position: absolute; left: 0.2em; top: 0.55em; width: 0.6em; height: 0.6em; background: var(--ttm-sunshine); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  .path__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); padding: 0; }
  .path__obj { display: block; }
  .path__obj--main { width: min(320px, 70%); margin-inline: auto; }
  .path__obj--small { position: absolute; width: min(130px, 28%); right: 4%; bottom: -6%; }
  .path__art--photos { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
  .path__photo { margin: 0; background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-2) var(--space-3); box-shadow: var(--shadow-3); }
  .path__photo img { width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 6px); }
  .path__photo figcaption { font-size: 0.8125rem; font-weight: var(--fw-bold); padding: var(--space-2) var(--space-2) 0; }
  .path__photo--a { transform: rotate(-2deg); }
  .path__photo--b { transform: rotate(2.5deg); width: 78%; justify-self: end; margin-top: calc(-1 * var(--space-6)); }

  /* The diploma: a big white card that interrupts the line */
  .path__step--award { grid-template-columns: 1fr; }
  .path__step--award .path__node { grid-column: 1; justify-self: start; margin: 0 0 calc(-1 * var(--space-4)) calc(var(--line-x) - 20px); }
  .path__step--award .award-card { grid-column: 1; }
  .award-card { position: relative; background: var(--ttm-white); color: var(--ttm-black); border-radius: var(--radius-xl); padding: clamp(1.25rem, 0.8rem + 2.5vw, 3rem); display: grid; gap: var(--space-6); align-items: center; box-shadow: var(--shadow-3); --color-link: var(--ttm-indigo); --color-text-muted: var(--ttm-grey-600); --color-accent: var(--ttm-indigo); --color-focus: var(--ttm-indigo); }
  .award-card .path__n { color: var(--ttm-orange); }
  .award-card .path__n span { color: var(--ttm-indigo); }
  .award-card__title { font: 400 clamp(2rem, 1.2rem + 3.6vw, 4.25rem)/1 var(--font-display); text-transform: uppercase; margin-top: var(--space-2); letter-spacing: -0.01em; }
  .award-card__lead { margin-top: var(--space-4); font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.55; }
  .award-card__facts { margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
  .award-card__facts div { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--ttm-grey-200); }
  .award-card__facts div:last-child { border-bottom: 0; padding-bottom: 0; }
  .award-card__facts dt { font: var(--fw-heavy) 0.75rem/1.2 var(--font-text); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ttm-grey-600); }
  .award-card__facts dd { margin: 0; font-weight: var(--fw-semibold); }
  .award-card__scan { display: grid; gap: var(--space-3); justify-items: center; text-decoration: none; color: var(--ttm-indigo); position: relative; z-index: 1; }
  .award-card__scan img { width: 100%; max-width: 34rem; height: auto; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--ttm-grey-200), var(--shadow-2); background: var(--ttm-white); transition: transform var(--dur-slow) var(--ease-standard); }
  .award-card__scan:hover img { transform: scale(1.02); }
  .award-card__open { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-heavy); }
  .award-card__open .ico { width: 18px; height: 18px; }
  .path__body--now { padding-bottom: var(--space-2); }
  .path__body--now .btn { margin-top: var(--space-2); }

  @media (min-width: 900px) {
    .path { --line-x: 50%; gap: var(--space-9); }
    .path::before, .path::after { left: calc(50% - 2px); }
    .path__step { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
    .path__node { grid-column: 2; justify-self: center; margin: var(--space-6) 0 0; }
    .path__step--left .path__body { grid-column: 1; grid-row: 1; justify-self: end; max-width: 34rem; }
    .path__step--left .path__art { grid-column: 3; grid-row: 1; margin-top: 0; align-self: center; }
    .path__step--right .path__body { grid-column: 3; grid-row: 1; }
    .path__step--right .path__art { grid-column: 1; grid-row: 1; margin-top: 0; align-self: center; }
    .path__step--award, .path__step--now { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
    .path__step--award .path__node { grid-column: 2; justify-self: center; margin: 0 0 calc(-1 * var(--space-5)); grid-row: 1; }
    .path__step--award .award-card { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
    .path__step--now .path__body { grid-column: 3; grid-row: 1; }
  }

  /* The sunshine line draws itself as you scroll (where the browser supports scroll-driven animation). */
  @supports (animation-timeline: view()) {
    .ttm-motion .path::after { animation: ttm-path-draw linear both; animation-timeline: view(); animation-range: entry 0% exit 70%; }
    @keyframes ttm-path-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
  .ttm-still .path::after { animation: none !important; transform: none; }
  @media (prefers-reduced-motion: reduce) { .path::after { animation: none !important; transform: none; } .path__photo--a, .path__photo--b { transform: none; } }
  :root[data-contrast="high"] .path::before { background: var(--ttm-white); }
  :root[data-contrast="high"] .path__photo, :root[data-contrast="high"] .award-card { outline: 2px solid var(--ttm-white); }
}
@layer pages {
  .float-layer.sp-ball { left: auto; right: -40px; top: 60px; width: 180px; }
  .float-layer.aw-medal2 { left: auto; right: -30px; top: -60px; width: 200px; z-index: 2; }
}