/* The longer pages (case study, notes, design system): ordinary scrolling pages on the same tokens and
 * the same moving background as the home page. Loaded after site.css. */
html.page-on { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); }
.page-on .bar { background: linear-gradient(color-mix(in srgb, var(--surface-000) 94%, transparent), color-mix(in srgb, var(--surface-000) 78%, transparent)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
.page-on .bg-field { opacity: .7; }
.page { position: relative; z-index: 1; max-width: var(--page-max); margin: 0 auto; padding: calc(var(--bar-h) + clamp(36px, 8vh, 88px)) var(--gutter) clamp(56px, 10vh, 112px); }
.page__article { max-width: 44rem; display: flex; flex-direction: column; gap: 18px; }
.page__back { align-self: flex-start; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); padding: 6px 0; }
.page__back:hover { color: var(--amber-text); }
.page__eyebrow { margin: 14px 0 0; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-text); }
.page__eyebrow .cs-lamp { width: 6px; height: 6px; }
.page__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 5.2vw, 68px); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.page__lede { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: color-mix(in srgb, var(--ink) 86%, var(--ink-muted)); }
.page__date { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }

.page__body { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.page__body h2 { margin: 28px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.page__body > p, .sys > p { margin: 0; font-size: 17px; line-height: 1.7; color: color-mix(in srgb, var(--ink) 84%, var(--ink-muted)); }
.page__body > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.page__body > ul > li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.65; color: color-mix(in srgb, var(--ink) 84%, var(--ink-muted)); }
.page__body > ul > li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; background: var(--amber); box-shadow: var(--glow-amber); border-radius: var(--radius-lamp); }
.page__stats { margin: 10px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hairline-strong); border-left: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface-000) 72%, transparent); }
.page__stats div { display: flex; flex-direction: column-reverse; gap: 8px; padding: 18px 16px 20px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.page__stats dt { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.page__stats dd { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; font-variant-numeric: tabular-nums; }
.page__stats div:first-child dd { color: var(--amber-text); }
.page__more a, .page__item { color: var(--ink); }
.page__more a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 4px; }
.page__more a:hover { color: var(--amber-text); border-color: var(--amber); }
.page__more .icon-arrow { width: 16px; height: 16px; }

.page__list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--hairline-strong); }
.page__sub { margin: 28px 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.page__item { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 20px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.page__itemdate { grid-row: span 2; font-family: var(--font-mono); font-size: 12px; line-height: 28px; color: var(--ink-muted); }
.page__itemtitle { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; transition: color .2s linear; }
.page__itemdesc { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.page__item:hover .page__itemtitle { color: var(--amber-text); }

.page__foot { max-width: 44rem; margin-top: clamp(48px, 9vh, 96px); padding-top: 28px; border-top: 1px solid var(--hairline-strong); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.page__cta { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; }
.page__foot .cs-btn { padding: 12px 20px; min-height: 44px; }
.page__sign { margin: 20px 0 0; font-family: var(--font-mono); font-size: 11px; line-height: 18px; color: var(--ink-muted); }
.page__sign a { color: inherit; border-bottom: 1px solid var(--hairline); }
.page__sign a:hover { color: var(--amber-text); }

/* ---------- design system page ---------- */
.page__article:has(.page__body--wide) { max-width: 60rem; }
.page__article:has(.page__body--wide) > :not(.page__body) { max-width: 44rem; }
.sys { display: flex; flex-direction: column; gap: 12px; }
.sys > p { max-width: 44rem; }
.sys__slot { margin-top: 6px; }
.sys__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sys__sw { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface-100); box-shadow: var(--bevel); }
.sys__chip { height: 52px; border-radius: var(--radius-ctl); border: 1px solid var(--hairline-strong); background: var(--sw); }
.sys__sw b { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.2; }
.sys__sw code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.sys__type { display: flex; flex-direction: column; border-top: 1px solid var(--hairline-strong); }
.sys__face { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.sys__face small { font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-muted); display: flex; flex-direction: column; gap: 2px; }
.sys__face small b { color: var(--ink); font-size: 12px; }
.sys__face span { font-size: clamp(22px, 3vw, 38px); line-height: 1.15; }
.sys__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sys__part { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius-panel); background: color-mix(in srgb, var(--surface-000) 86%, transparent); min-width: 0; }
.sys__part--wide { grid-column: 1 / -1; }
.sys__part > span:first-child { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.sys__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sys__theme { padding: 16px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-panel); background: var(--surface-100); box-shadow: var(--bevel); display: inline-flex; }
.sys__field { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 16px; align-items: stretch; }
.sys__well { height: 300px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--bevel-inset); }
.sys__well consola-field { display: block; width: 100%; height: 100%; }
.sys__knobs { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius-panel); background: var(--surface-100); box-shadow: var(--bevel); }
.sys__knob { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.sys__knob span { display: flex; justify-content: space-between; }
.sys__knob output { color: var(--amber-text); font-variant-numeric: tabular-nums; }
.sys__knob input { width: 100%; accent-color: var(--amber); }
.sys__read { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.sys__read div { display: flex; flex-direction: column; gap: 2px; }
.sys__read b { font-family: var(--font-mono); font-size: 22px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sys__read span { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
/* the light theme, when the switch on this page is on */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] .bg-grain { opacity: .35; }

@media (max-width: 899px) {
  .page__body > p, .page__body > ul > li { font-size: 16px; }
  .page__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page__item { grid-template-columns: 1fr; }
  .page__itemdate { grid-row: auto; line-height: 16px; }
  .sys__parts, .sys__field { grid-template-columns: 1fr; }
  .sys__face { grid-template-columns: 1fr; gap: 6px; }
  .sys__well { height: 220px; }
}
/* phones: the longer pages keep one way to reach Contact in the bar, and component samples fit the column */
@media (max-width: 899px) {
  .page-on .bar { grid-template-columns: 1fr auto auto; gap: 12px; }
  .page-on .bar__nav { display: flex; }
  .page-on .bar__nav a:not(.bar__cta) { display: none; }
  .sys__part { padding: 14px 12px; }
  .sys__part .cs-table th, .sys__part .cs-table td { padding: 8px 6px; }
  .sys__part .cs-table th { letter-spacing: .04em; }
}
@media (max-width: 359px) { .page-on .bar__nav { display: none; } }
@media (prefers-reduced-motion: reduce) { html.page-on { scroll-behavior: auto; } }