/* tymaxey.com. Tokens and rulings: projects/tymaxey-llc/design/tymaxey-com-design.md
   in the library, on the core tools/standards/design.md. */

/* IBM's own Latin-1 files; Pi carries the arrows. Ranges from IBM's split CSS. */
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+2190-2199; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Italic-Latin1.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Bold-Latin1.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }

:root {
  --ink-0: #0a0a0a; /* ground */
  --ink-1: #171717; /* surface */
  --ink-2: #262626; /* rule */
  --ink-3: #a3a3a3; /* muted */
  --ink-4: #d4d4d4; /* text */
  --ink-5: #e5e5e5; /* emphasis */
  --accent: #ff7900;
  --green: #6fc082;
  --accent-quiet: #844205; /* decoration only: the route path (tymaxey-llc D322) */
  --patch-blue: #315c81; /* imagery only, every mode: the patches' mass (D376) */
  --patch-blue-lit: #4f83b0; /* Command's crater rims (D376) */
  --patch-blue-shade: #1c3a54; /* Command's crater shadows (D376) */
  --patch-asphalt: #262626; /* Runway's runway surface (D377) */
  --patch-marking: #e5e5e5; /* Runway's runway markings (D377) */
  --u: 24px;
  --s1: 6px;
  --s2: 12px;
  --s3: 24px;
  --s4: 48px;
  --s5: 96px;
  --s6: 192px;
  --radius: 4px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

[data-mode="light"] {
  --ink-0: #f4f4f4;
  --ink-1: #e5e5e5;
  --ink-2: #bdbdbd;
  --ink-3: #4a4a4a;
  --ink-4: #171717;
  --ink-5: #0a0a0a;
  --accent: #903500;
  --green: #06602a;
  --accent-quiet: #c2947a;
  color-scheme: light;
}

html { background: var(--ink-0); }
body {
  max-width: 66ch;
  margin: 0 auto;
  padding: var(--s4) var(--s6) var(--s5);
  background: var(--ink-0);
  color: var(--ink-4);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 1023px) { body { padding-left: var(--s5); padding-right: var(--s5); } }
@media (max-width: 639px)  { body { padding-left: var(--s3); padding-right: var(--s3); } }

h1, h2, h3 { font-weight: 600; line-height: 1.25; color: var(--ink-5); margin: var(--s5) 0 var(--s4); }
/* A section title sits one line above its text, s3, not the core default s4; s5 above keeps the 2:1 rule (tymaxey-llc D281). */
h2, h3 { margin-bottom: var(--s3); }
/* A section title straight after the page title keeps the h1's s4, not its own s5, so the title reads as one with the page (tymaxey-llc D282). */
h1 + h2 { margin-top: var(--s4); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h1:first-child { margin-top: 0; }
.h1-tail { display: inline-block; margin-top: var(--s2); color: var(--ink-3); }
p, ul, ol { margin: 0 0 var(--s3); }
li { margin-bottom: var(--s2); }
strong { font-weight: 600; }
small { font-size: 0.875rem; color: var(--ink-3); }

/* The system voice. */
.skip, .wordmark, .nav a, .site-footer a, .theme-toggle, .menu-toggle, .caption, .card-toggle { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.caption { line-height: 1.4; }
.caption { color: var(--ink-3); }
/* The stamp: a page's published and updated dates, the footer's quiet second line, as documentation sites set theirs; its own style, smaller than a caption, mono in sentence case (tymaxey-llc D503 item 2; Ty 2026-10-20). */
.site-footer { flex-wrap: wrap; }
.stamp { flex-basis: 100%; margin: 0; text-align: center; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.02em; line-height: 1.4; color: var(--ink-3); }

a { color: var(--ink-4); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover, a:focus-visible { color: var(--accent); }
:focus-visible { outline: 2px solid var(--ink-5); outline-offset: 3px; border-radius: var(--radius); }
main:focus { outline: none; }
.skip { position: absolute; left: var(--s3); top: -100px; padding: var(--s1) var(--s2); background: var(--ink-1); color: var(--ink-5); text-decoration: none; border-radius: var(--radius); }
.skip:focus { top: var(--s2); color: var(--ink-5); }
.button { display: inline-block; font-weight: 600; line-height: 1.25; text-decoration: none; color: var(--ink-5); border: 1px solid var(--ink-3); border-radius: var(--radius); padding: var(--s2) var(--s3); }
.button:hover, .button:focus-visible { color: var(--accent); }
.button-note { display: block; margin-top: var(--s2); }
.vh { position: absolute; 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; }

.site-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--ink-2); margin-bottom: var(--s5); }
.wordmark { color: var(--ink-5); text-decoration: none; }
.wordmark:hover, .wordmark:focus-visible { color: var(--ink-5); }
.nav { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
/* The body's li margin would add 12px under a one-row nav; the row gap carries it when the nav wraps. */
.nav li { margin: 0; }
/* Without the script a phone shows the links inline, s2 apart, so all four keep one row from 360px up (tymaxey-llc D325). */
@media (max-width: 639px) { .nav { column-gap: var(--s2); } }
.nav a, .site-footer a { white-space: nowrap; text-decoration-line: none; }
.nav a[aria-current="page"] { text-decoration-line: underline; }
/* Padding out and margin back in: a larger tap target without moving the label. */
.nav a, .site-footer a, .wordmark, .theme-toggle, .menu-toggle { display: inline-block; padding: var(--s2) var(--s1); margin: calc(-1 * var(--s2)) calc(-1 * var(--s1)); }
.theme-toggle { background: none; border: 0; color: var(--ink-4); cursor: pointer; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--accent); }
.theme-toggle[hidden] { display: none; }
/* On a phone the header is one row, the wordmark and Menu; the button opens the links in a column
   under it. theme.js shows the button; without it the links show as on a desktop (tymaxey-llc D334). */
.menu-toggle { background: none; border: 0; color: var(--ink-5); cursor: pointer; }
.menu-toggle:hover, .menu-toggle:focus-visible { color: var(--accent); }
.menu-toggle[aria-expanded="true"] { text-decoration-line: underline; }
.menu-toggle[hidden] { display: none; }
@media (min-width: 640px) { .menu-toggle { display: none; } }
@media (max-width: 639px) {
  .site-header.has-menu { justify-content: space-between; }
  .site-header.has-menu nav { flex-basis: 100%; }
  .site-header.has-menu:not(.open) nav { display: none; }
  /* right-aligned under Menu, so the next tap lands where the first one did (Ty, D334 note) */
  .site-header.has-menu .nav { flex-direction: column; gap: 0; text-align: right; }
  .site-header.has-menu .nav a { display: block; padding: var(--s2) 0; margin: 0; }
}
.site-footer { display: flex; justify-content: center; align-items: baseline; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--ink-2); color: var(--ink-3); }

.elsewhere { margin-top: var(--s5); }
.elsewhere-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.elsewhere-row a { display: inline-block; color: var(--ink-3); text-decoration: none; padding: var(--s2); margin: calc(-1 * var(--s2)); line-height: 0; }
.elsewhere-row a:hover, .elsewhere-row a:focus-visible { color: var(--ink-5); }
.elsewhere-row svg { width: 1.5rem; height: 1.5rem; fill: currentColor; display: block; }

.about-lead { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: var(--s3); align-items: start; margin: 0 0 var(--s3); }
.about-lead p { margin: 0; }
.about-lead p + p { margin-top: var(--s3); }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--ink-2); border-radius: var(--radius); }
@media (max-width: 639px) { .about-lead { grid-template-columns: 1fr; } .about-lead .portrait { width: 12rem; } }

/* The Details toggle and the download links, kept from the retired cards (the Card list, retired 2026-10-26). */
.card-links { margin: auto 0 0; padding: 0; list-style: none; }
.card-links li:last-child { margin-bottom: 0; }
.card-links-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.card-links-row li { margin: 0; }
.modules { margin: var(--s2) 0 0; }
.card-details > summary { list-style: none; cursor: pointer; display: block; }
.card-details > summary::-webkit-details-marker { display: none; }
.course-num { font-family: var(--mono); font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }
.card-toggle { display: inline-flex; align-items: center; gap: var(--s1); color: var(--ink-3); }
.card-toggle::after { content: "+"; content: "+" / ""; font-size: 1rem; line-height: 1; }
.card-details[open] .card-toggle::after { content: "\2212"; content: "\2212" / ""; }
.card-toggle .less, .card-details[open] .card-toggle .more { display: none; }
.card-details[open] .card-toggle .less { display: inline; }
.card-details > summary:hover .card-toggle { color: var(--ink-5); }
.card-more { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--ink-2); }
/* A label paragraph ("What you'll learn:") sits s2 above its list, so it groups with it (tymaxey-llc D284). */
.card-more > .card-label { margin-bottom: var(--s2); }
.caption .free { color: var(--green); }
/* An inline block, so the underline stops before the arrow. */
.cta-arrow { display: inline-block; margin-left: 0.3em; transition: transform 0.15s; }
@media (prefers-reduced-motion: reduce) { .cta-arrow { transition: none; } }

/* /orientation (tymaxey-llc D342 item 4). The video's slot holds a plain line until the video exists. */
.video-slot { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--s3); margin: 0 0 var(--s3); border: 1px solid var(--ink-2); border-radius: var(--radius); text-align: center; color: var(--ink-3); }
.video-slot p { margin: 0; }
.chapters li { margin-bottom: var(--s1); }
.chapter-time { color: var(--ink-3); }
/* The glossary form: Tally's page in a plain frame, no Tally script (D391). Its colours are Tally's custom CSS,
   one scheme in both modes; its height is fixed, measured to hold the taller of the form with an error
   showing and the thank-you page (213 px at 272 wide, 177 at 600; read 2026-10-15). */
.tally-frame { display: block; width: 100%; height: 236px; border: 0; margin: 0 0 var(--s3); }
@media (min-width: 640px) { .tally-frame { height: 200px; } }

/* The page patterns: words first, one hand for every list, no boxes but the button
   (design-system.md's pattern table; first drawn for the homepage, the riff of 2026-10-26). */
.eyebrow { margin: var(--s5) 0 var(--s3); scroll-margin-top: var(--s4); }
.eyebrow + h1, .eyebrow + h2 { margin-top: calc(var(--s2) - var(--s3)); }
.home-title { font-size: 2.25rem; line-height: 1.15; }
@media (min-width: 640px) { .home-title { font-size: 3rem; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.rule-above { border-top: 1px solid var(--ink-2); padding-top: var(--s4); }
/* about: the name left in the system voice, its line right; stacked on a phone. */
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 12rem 1fr; gap: var(--s3); padding: var(--s3) 0; }
.facts div + div { border-top: 1px solid var(--ink-2); }
.facts div:first-child { padding-top: 0; }
.facts dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.5rem; color: var(--ink-3); }
.facts dd { margin: 0; }
@media (max-width: 639px) { .facts div { grid-template-columns: 1fr; gap: var(--s1); } }
/* pain points: the quotes as voices, regular weight, a step up, the emphasis ink. */
.voice { padding: var(--s3) 0; }
.voice + .voice { border-top: 1px solid var(--ink-2); }
.voice:first-child { padding-top: 0; }
.voice h3 { margin: 0 0 var(--s2); font-size: 1.375rem; font-weight: 400; line-height: 1.35; }
.voice p { margin: 0; }
.turn { margin-top: var(--s4); }
/* how it works: the boxes as typed, in the system voice. */
.checks { padding: 0; list-style: none; font-family: var(--mono); font-size: 0.9375rem; }
.checks li { margin-bottom: var(--s1); }
/* method: 01 to 04 in the system voice, a rule between steps. */
.steps { padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; margin: 0; padding: var(--s3) 0 var(--s3) var(--s4); counter-increment: step; }
.steps li + li { border-top: 1px solid var(--ink-2); }
.steps li:first-child { padding-top: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; line-height: 1.5rem; color: var(--ink-3); }
.steps strong { color: var(--ink-5); }
/* proposals: an aside, a line down the left, no box. */
.aside { margin: var(--s5) 0 var(--s3); padding-left: var(--s3); border-left: 1px solid var(--ink-2); }
.aside h2 { margin-top: 0; }
.aside p:last-child { margin-bottom: 0; }
/* offers and data: ruled rows. */
.rows { padding: 0; list-style: none; }
.rows > li { margin: 0; padding: var(--s3) 0; }
.rows > li + li { border-top: 1px solid var(--ink-2); }
.rows > li:first-child { padding-top: 0; }
.rows h2, .rows h3 { margin: 0 0 var(--s1); }
/* Tools' rows keep the download links' tap height and the arrow's nudge, and space the Details toggle from its caption. */
.tool-rows a.cta { display: inline-block; min-height: 24px; padding-block: 2px; }
.tool-rows a.cta:hover .cta-arrow, .tool-rows a.cta:focus-visible .cta-arrow { transform: translateX(0.2em); }
.tool-rows a.cta[download]:hover .cta-arrow, .tool-rows a.cta[download]:focus-visible .cta-arrow { transform: translateY(0.2em); }
.tool-rows a.cta[target="_blank"]:hover .cta-arrow, .tool-rows a.cta[target="_blank"]:focus-visible .cta-arrow { transform: translate(0.15em, -0.15em); }
.tool-rows .card-details + .caption { margin-top: var(--s3); }
.tool-rows .card-links { margin: 0; }
.tool-rows { margin-top: var(--s4); }
.rows p { margin: 0 0 var(--s2); }
.rows p:last-child { margin-bottom: 0; }
.rows strong { display: block; color: var(--ink-5); }
/* learn: the links on one row. */
.link-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); padding: 0; list-style: none; }
.link-row li { margin: 0; }
/* primary cta: the page closes as it opened. */
.close { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--ink-2); }
.close h2 { margin-top: 0; }

/* The AI Glossary's web edition, /tools/ai-glossary.html, written by the library's glossary build (Ty, 2026-10-27).
   The files keep Tools' tap height and nudge. The letters are a rail beside the entries that stays in view (sticky),
   the pattern of a phone's A to Z index: in the margin s3 off the copy on a wide screen; on a phone a 44px column out
   to the screen's edge, s2 off the copy, a thumb's tap target, the letters sharing the screen's height. A letter's
   section opens on its letter in grey over a rule; the accent is on the links alone. */
.g-files { margin: var(--s2) 0 0; }
.g-files a.cta { display: inline-block; min-height: 24px; padding-block: 2px; }
.g-files a.cta:hover .cta-arrow, .g-files a.cta:focus-visible .cta-arrow { transform: translateY(0.2em); }
.g-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--s4); column-gap: var(--s3); margin: var(--s4) calc(-1 * (var(--s4) + var(--s3))) 0 0; }
.g-entries { grid-column: 1; grid-row: 1; }
.g-entries > .g-letter:first-child > h2 { margin-top: 0; }
/* The rail keeps s4 clear above Back to top at the screen's foot, and ends that far above it at the entries' end. */
.g-index { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: var(--s3); height: min(calc(100dvh - 2 * var(--s3) - var(--s4)), 40rem); margin-bottom: calc(var(--s4) + var(--s3)); }
.g-letters { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.75rem; line-height: 1; }
.g-letters li { flex: 1 1 0; display: flex; margin: 0; }
.g-letters a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 24px; color: var(--ink-5); text-underline-offset: 0.15em; }
.g-letters a:hover, .g-letters a:focus-visible { color: var(--accent); }
/* Back to top (Ty, 2026-10-29, TMLC-T262) ends the letters after C, sticky to the screen's foot, so it floats bottom
   right only while they are in view; its arrow sits under the rail's letters, on the page's own ground (Ty, 2026-10-29)
   so the entries pass beneath it. It moves focus to main as the skip link does, but the page lands at its very top,
   the header in view for its Menu (Ty, 2026-10-29): main's scroll margin outruns the header, so the scroll stops at 0. */
main:has(> .g-body) { scroll-margin-top: 100vh; }
.g-back { position: sticky; bottom: var(--s3); display: flex; justify-content: flex-end; margin: var(--s3) calc(-1 * (var(--s3) + var(--s4) / 2) - var(--s2) - 0.3em) 0 0; pointer-events: none; }
.g-back a { pointer-events: auto; display: inline-block; padding: var(--s1) var(--s2); background: var(--ink-0); border-radius: var(--radius); }
.g-back a:hover .cta-arrow, .g-back a:focus-visible .cta-arrow { transform: translateY(-0.2em); }
/* On a phone the column is a thumb's tap target: 44px wide, out to the screen's edge, s2 from the copy; the letters share the screen's height. */
@media (max-width: 639px) {
  .g-body { grid-template-columns: minmax(0, 1fr) 44px; column-gap: var(--s2); margin-right: calc(-1 * var(--s3)); }
  .g-letters { font-size: 0.875rem; }
  /* The column meets the screen's edge, so a letter's focus outline is drawn inside its tap target, all four sides in view. */
  .g-letters a:focus-visible { outline-offset: -2px; }
  .g-back { margin-right: calc(-1 * (var(--s2) + 22px) - var(--s2) - 0.3em); }
}
.g-letter > h2 { color: var(--ink-3); font-size: 1rem; font-family: var(--mono); font-weight: 400; margin: var(--s4) 0 0; padding-bottom: var(--s1); border-bottom: 1px solid var(--ink-2); scroll-margin-top: var(--s3); }
.g-entry { padding: var(--s3) 0; }
.g-entry + .g-entry { border-top: 1px solid var(--ink-2); }
.g-entry h3 { margin: 0 0 var(--s2); scroll-margin-top: var(--s3); }
.g-entry p { margin: 0 0 var(--s2); }
.g-entry p:last-child { margin-bottom: 0; }
.g-lab { display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.g-meta { font-size: 0.9375rem; }