/* sirrobert.net — site stylesheet.
   Reads brocade tokens (brocade.css) and defines none: every colour, face, size, space, and
   duration below is a var(). The light and dark schemes, high contrast, and reduced motion all
   arrive through the token set's modes; nothing here switches on them. */

/* ---- base -------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--brocade-color-background-base);
  color: var(--brocade-color-foreground-base);
  font-family: var(--brocade-font-family-base);
  font-size: var(--brocade-font-size-body);
  line-height: var(--brocade-line-height-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brocade-color-link-base);
  text-decoration-thickness: var(--brocade-border-width-underline);
  text-underline-offset: var(--brocade-offset-underline);
  transition: color var(--brocade-duration-hover) var(--brocade-transition-easing-base);
}

a:hover {
  color: var(--brocade-color-link-hover);
}

:focus-visible {
  outline: var(--brocade-focus-ring-width) solid var(--brocade-color-border-focus);
  outline-offset: var(--brocade-focus-ring-offset);
}

h1,
h2,
h3 {
  font-weight: var(--brocade-font-weight-regular);
  text-wrap: balance;
}

.skip-link {
  position: absolute;
  left: var(--brocade-space-16);
  z-index: var(--brocade-z-index-tooltip);
  padding: var(--brocade-space-8) var(--brocade-space-16);
  background: var(--brocade-color-background-elevated);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-ui);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(var(--brocade-space-8));
}

/* ---- frame --------------------------------------------------------------------------------- */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 520px at 8% -6%, var(--brocade-color-wash-warm) 0%, transparent 62%),
    radial-gradient(900px 480px at 98% 2%, var(--brocade-color-wash-cool) 0%, transparent 58%),
    var(--brocade-color-background-base);
}

.wrap {
  width: 100%;
  max-width: var(--brocade-width-site);
  margin: 0 auto;
  padding-inline: var(--brocade-space-gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--brocade-z-index-header);
  backdrop-filter: blur(var(--brocade-blur-header));
  background: color-mix(in srgb, var(--brocade-color-background-base) var(--brocade-opacity-header), transparent);
  border-bottom: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--brocade-space-10) var(--brocade-space-28);
  padding-block: var(--brocade-space-15);
}

.brand {
  color: var(--brocade-color-foreground-base);
  font-size: var(--brocade-font-size-brand);
  font-weight: var(--brocade-font-weight-medium);
  letter-spacing: var(--brocade-letter-spacing-brand);
  text-decoration: none;
}

.brand:hover {
  color: var(--brocade-color-foreground-base);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brocade-space-4) var(--brocade-space-20);
  margin-left: auto;
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-ui);
}

.site-nav a {
  padding-block: var(--brocade-space-5);
  color: var(--brocade-color-foreground-muted);
  text-decoration: none;
  border-bottom: var(--brocade-border-width-mark) solid transparent;
}

.site-nav a:hover {
  color: var(--brocade-color-foreground-base);
}

.site-nav a[aria-current='page'] {
  color: var(--brocade-color-foreground-base);
  border-bottom-color: var(--brocade-color-accent-claret);
}

.site-main {
  flex: 1;
}

.page {
  animation: bloom var(--brocade-duration-bloom) var(--brocade-easing-bloom) both;
}

@keyframes bloom {
  from {
    opacity: 0;
    transform: scale(var(--brocade-scale-bloom));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-footer {
  margin-top: var(--brocade-space-48);
  border-top: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  background: var(--brocade-color-background-muted);
  color: var(--brocade-color-foreground-soft);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-ui);
}

.site-footer .wrap {
  display: grid;
  gap: var(--brocade-space-26);
  grid-template-columns: repeat(auto-fit, minmax(var(--brocade-width-grid-footer), 1fr));
  padding-block: var(--brocade-space-40) var(--brocade-space-52);
}

.site-footer p {
  margin: 0 0 var(--brocade-space-6);
}

.site-footer ul {
  display: grid;
  gap: var(--brocade-space-9);
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--brocade-color-foreground-soft);
}

.site-footer a:hover {
  color: var(--brocade-color-link-base);
}

.site-footer .footer-name {
  color: var(--brocade-color-foreground-base);
  font-family: var(--brocade-font-family-base);
  font-size: var(--brocade-font-size-brand);
}

.site-footer .footer-quiet {
  color: var(--brocade-color-foreground-muted);
}

/* ---- shared type --------------------------------------------------------------------------- */

.eyebrow,
.kicker,
.kind,
.caps {
  font-family: var(--brocade-font-family-ui);
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 var(--brocade-space-16);
  font-size: var(--brocade-font-size-label);
  letter-spacing: var(--brocade-letter-spacing-kicker);
  color: var(--brocade-color-accent-violet);
}

.kicker {
  font-size: var(--brocade-font-size-label);
  letter-spacing: var(--brocade-letter-spacing-kicker);
}

.kind {
  font-size: var(--brocade-font-size-label);
  letter-spacing: var(--brocade-letter-spacing-kind);
}

.caps {
  margin: 0 0 var(--brocade-space-4);
  font-size: var(--brocade-font-size-tag);
  font-weight: var(--brocade-font-weight-semibold);
  letter-spacing: var(--brocade-letter-spacing-caps);
  color: var(--brocade-color-foreground-base);
}

.tint-claret { color: var(--brocade-color-accent-claret); }
.tint-violet { color: var(--brocade-color-accent-violet); }
.tint-moss { color: var(--brocade-color-accent-moss); }
.tint-amber { color: var(--brocade-color-accent-amber); }

.section-title {
  margin: 0 0 var(--brocade-space-8);
  font-size: var(--brocade-font-size-section-title);
  letter-spacing: var(--brocade-letter-spacing-section-title);
}

.section-note,
.page-meta,
.page-note {
  margin: 0;
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-ui);
  color: var(--brocade-color-foreground-muted);
}

.band {
  padding-block: var(--brocade-space-section);
  border-top: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
}

.band__head {
  margin-bottom: var(--brocade-space-section-foot);
}

.band__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brocade-space-12);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--brocade-space-8);
}

.band__row .section-title {
  margin: 0;
}

.band .section-note {
  margin-bottom: var(--brocade-space-20);
}

.more {
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-ui);
  text-underline-offset: var(--brocade-offset-underline-wide);
}

/* ---- home ------------------------------------------------------------------------------------ */

.hero {
  display: grid;
  gap: var(--brocade-space-hero-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--brocade-width-grid-hero), 1fr));
  align-items: start;
  padding-block: var(--brocade-space-hero-top) var(--brocade-space-hero-bottom);
}

.display {
  margin: 0 0 var(--brocade-space-20);
  font-size: var(--brocade-font-size-display);
  line-height: var(--brocade-line-height-display);
  letter-spacing: var(--brocade-letter-spacing-display);
}

.motto {
  max-width: var(--brocade-width-lede);
  margin: 0 0 var(--brocade-space-26);
  color: var(--brocade-color-accent-violet);
  font-size: var(--brocade-font-size-lede);
  font-style: italic;
  font-weight: var(--brocade-font-weight-reading);
  line-height: var(--brocade-line-height-lede);
}

.intro {
  max-width: var(--brocade-width-reading);
  margin: 0 0 var(--brocade-space-30);
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-intro);
  line-height: var(--brocade-line-height-body);
}

.intro p {
  margin: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brocade-space-12);
}

.button {
  display: inline-block;
  padding: var(--brocade-space-11) var(--brocade-space-22);
  border: var(--brocade-border-width-hairline) solid var(--brocade-color-border-strong);
  border-radius: var(--brocade-radius-button);
  color: var(--brocade-color-foreground-base);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-button);
  text-decoration: none;
  transition: background-color var(--brocade-duration-hover) var(--brocade-transition-easing-base),
    border-color var(--brocade-duration-hover) var(--brocade-transition-easing-base);
}

.button:hover {
  color: var(--brocade-color-foreground-base);
  border-color: var(--brocade-color-foreground-base);
}

.button--primary {
  background: var(--brocade-color-primary-base);
  border-color: var(--brocade-color-primary-base);
  color: var(--brocade-color-primary-foreground);
}

.button--primary:hover {
  background: var(--brocade-color-primary-hover);
  border-color: var(--brocade-color-primary-hover);
  color: var(--brocade-color-primary-foreground);
}

.lately {
  padding-top: var(--brocade-space-card);
  background: var(--brocade-color-background-elevated);
  border: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  border-top: var(--brocade-border-width-rule) solid var(--brocade-color-accent-violet);
  box-shadow: var(--brocade-shadow-lifted);
}

.lately .eyebrow {
  margin-inline: var(--brocade-space-card);
}

.lately__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lately__item {
  display: grid;
  gap: var(--brocade-space-5);
  padding: var(--brocade-space-14) var(--brocade-space-card);
  border-top: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  color: var(--brocade-color-foreground-base);
  text-decoration: none;
  transition: background-color var(--brocade-duration-hover) var(--brocade-transition-easing-base);
}

a.lately__item:hover {
  background: var(--brocade-color-background-muted);
  color: var(--brocade-color-foreground-base);
}

.lately__meta {
  display: flex;
  gap: var(--brocade-space-10);
  align-items: baseline;
}

.lately__meta time {
  color: var(--brocade-color-foreground-muted);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-label);
  letter-spacing: var(--brocade-letter-spacing-date);
  text-transform: uppercase;
}

.lately__text {
  font-size: var(--brocade-font-size-aside);
  font-weight: var(--brocade-font-weight-reading);
  line-height: var(--brocade-line-height-snug);
}

.lately__more {
  margin: 0;
  padding: var(--brocade-space-14) var(--brocade-space-card);
  border-top: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta);
  color: var(--brocade-color-foreground-muted);
}

.interests {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--brocade-width-grid-interest), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  border-left: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
}

.interest {
  display: flex;
  flex-direction: column;
  gap: var(--brocade-space-12);
  padding: var(--brocade-space-26) var(--brocade-space-24) var(--brocade-space-28);
  background: var(--brocade-color-background-elevated);
  border-right: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  border-bottom: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
}

.interest__title {
  margin: 0;
  font-size: var(--brocade-font-size-card-title);
  font-weight: var(--brocade-font-weight-medium);
  letter-spacing: var(--brocade-letter-spacing-card-title);
  line-height: var(--brocade-line-height-title);
}

.interest__body {
  margin: 0;
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-note);
  font-weight: var(--brocade-font-weight-reading);
  line-height: var(--brocade-line-height-card);
}

.rest {
  margin-top: var(--brocade-space-rest);
}

.rest .eyebrow {
  margin-bottom: var(--brocade-space-14);
  color: var(--brocade-color-foreground-muted);
}

.rest__list {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--brocade-width-rest);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-aside);
  font-weight: var(--brocade-font-weight-reading);
  line-height: var(--brocade-line-height-list);
}

.rest__list li {
  white-space: nowrap;
}

.rest__list li:not(:last-child)::after {
  content: '·';
  padding-inline: var(--brocade-space-8);
  color: var(--brocade-color-border-strong);
}

.made {
  display: grid;
  gap: var(--brocade-space-20);
  grid-template-columns: repeat(auto-fit, minmax(var(--brocade-width-grid-hero), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.made__link {
  display: flex;
  flex-direction: column;
  gap: var(--brocade-space-12);
  height: 100%;
  padding: var(--brocade-space-24) var(--brocade-space-24) var(--brocade-space-26);
  background: var(--brocade-color-background-elevated);
  border: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  border-left-width: var(--brocade-border-width-edge);
  color: var(--brocade-color-foreground-base);
  text-decoration: none;
  transition: background-color var(--brocade-duration-hover) var(--brocade-transition-easing-base);
}

.made__link:hover {
  background: var(--brocade-color-background-muted);
  color: var(--brocade-color-foreground-base);
}

.made__item--claret .made__link { border-left-color: var(--brocade-color-accent-claret); }
.made__item--violet .made__link { border-left-color: var(--brocade-color-accent-violet); }
.made__item--moss .made__link { border-left-color: var(--brocade-color-accent-moss); }
.made__item--amber .made__link { border-left-color: var(--brocade-color-accent-amber); }

.made__head {
  display: flex;
  gap: var(--brocade-space-12);
  align-items: baseline;
  justify-content: space-between;
}

.made__name {
  font-size: var(--brocade-font-size-item-title);
  font-weight: var(--brocade-font-weight-medium);
  letter-spacing: var(--brocade-letter-spacing-item-title);
}

.made__line {
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-blurb);
  font-weight: var(--brocade-font-weight-reading);
  line-height: var(--brocade-line-height-card);
}

.made__cta {
  margin-top: auto;
  color: var(--brocade-color-link-base);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta-lg);
}

/* ---- lists of writing -------------------------------------------------------------------- */

.entries {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry {
  display: grid;
  gap: var(--brocade-space-5);
  padding: var(--brocade-space-20) var(--brocade-space-6);
  border-top: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  color: var(--brocade-color-foreground-base);
  text-decoration: none;
  transition: background-color var(--brocade-duration-hover) var(--brocade-transition-easing-base);
}

.entry:hover {
  background: var(--brocade-color-background-muted);
  color: var(--brocade-color-foreground-base);
}

.entry .kicker {
  font-size: var(--brocade-font-size-tag);
  letter-spacing: var(--brocade-letter-spacing-tag);
}

.entry__title {
  font-size: var(--brocade-font-size-card-title);
  letter-spacing: var(--brocade-letter-spacing-card-title);
  line-height: var(--brocade-line-height-list-title);
}

.entry__blurb {
  max-width: var(--brocade-width-blurb);
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-blurb);
  font-weight: var(--brocade-font-weight-reading);
}

.entry__meta {
  color: var(--brocade-color-foreground-muted);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta);
}

.entry--long {
  gap: var(--brocade-space-8);
  padding-block: var(--brocade-space-22);
}

.entry--long .entry__title {
  font-size: var(--brocade-font-size-item-title);
  letter-spacing: var(--brocade-letter-spacing-section-title);
  line-height: var(--brocade-line-height-item);
}

.year {
  margin-bottom: var(--brocade-space-48);
}

.year__label {
  margin: 0 0 var(--brocade-space-10);
  color: var(--brocade-color-foreground-muted);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-tag);
  font-weight: var(--brocade-font-weight-semibold);
  letter-spacing: var(--brocade-letter-spacing-caps);
}

/* ---- pages ------------------------------------------------------------------------------------ */

.page-head {
  padding-top: var(--brocade-space-page);
}

.page-title {
  margin: 0 0 var(--brocade-space-16);
  font-size: var(--brocade-font-size-page-title);
  letter-spacing: var(--brocade-letter-spacing-display);
}

.page-intro {
  max-width: var(--brocade-width-reading);
  margin: 0 0 var(--brocade-space-12);
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-reading);
  font-weight: var(--brocade-font-weight-reading);
}

.page-intro p {
  margin: 0;
}

.page-head .page-meta {
  margin-bottom: var(--brocade-space-44);
}

.page-body {
  padding-bottom: var(--brocade-space-page);
}

.page--narrow {
  max-width: var(--brocade-width-contact);
}

.page--reading {
  max-width: var(--brocade-width-reading);
}

/* ---- prose ------------------------------------------------------------------------------------ */

.prose {
  font-size: var(--brocade-font-size-reading);
  font-weight: var(--brocade-font-weight-reading);
  line-height: var(--brocade-line-height-reading);
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 var(--brocade-space-24);
}

.prose h2 {
  margin: var(--brocade-space-42) 0 var(--brocade-space-14);
  font-size: var(--brocade-font-size-subhead);
  font-weight: var(--brocade-font-weight-medium);
  letter-spacing: var(--brocade-letter-spacing-item-title);
  line-height: var(--brocade-line-height-title);
}

.prose h3 {
  margin: var(--brocade-space-32) 0 var(--brocade-space-12);
  font-size: var(--brocade-font-size-item-title);
  font-weight: var(--brocade-font-weight-medium);
}

.prose blockquote {
  margin: var(--brocade-space-36) 0;
  padding: var(--brocade-space-2) 0 var(--brocade-space-2) var(--brocade-space-24);
  border-left: var(--brocade-border-width-rule) solid var(--brocade-color-accent-violet);
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-quote);
  font-style: italic;
  line-height: var(--brocade-line-height-quote);
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose code {
  font-family: var(--brocade-font-family-mono);
  font-size: var(--brocade-font-size-note);
}

.page-colophon .prose {
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-colophon);
  line-height: var(--brocade-line-height-colophon);
}

/* ---- article ------------------------------------------------------------------------------- */

.article {
  max-width: var(--brocade-width-reading);
  margin: 0 auto;
  padding-block: var(--brocade-space-article);
}

.article__back {
  margin: 0 0 var(--brocade-space-28);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta-lg);
}

.article__back a {
  text-decoration: none;
}

.article .kicker {
  margin: 0 0 var(--brocade-space-14);
  font-size: var(--brocade-font-size-tag);
  letter-spacing: var(--brocade-letter-spacing-eyebrow);
}

.article__title {
  margin: 0 0 var(--brocade-space-18);
  font-size: var(--brocade-font-size-article-title);
  letter-spacing: var(--brocade-letter-spacing-article-title);
  line-height: var(--brocade-line-height-article-title);
}

.article__meta {
  margin: 0 0 var(--brocade-space-30);
  padding-bottom: var(--brocade-space-26);
  border-bottom: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  color: var(--brocade-color-foreground-muted);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta);
}

.article__body > p:first-child::first-letter {
  float: left;
  padding: var(--brocade-space-5) var(--brocade-space-11) 0 0;
  color: var(--brocade-color-accent-claret);
  font-size: var(--brocade-font-size-dropcap);
  font-weight: var(--brocade-font-weight-regular);
  line-height: var(--brocade-line-height-dropcap);
}

.article__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brocade-space-12);
  justify-content: space-between;
  margin-top: var(--brocade-space-42);
  padding-top: var(--brocade-space-20);
  border-top: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  color: var(--brocade-color-foreground-muted);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta-lg);
}

/* ---- history ------------------------------------------------------------------------------- */

.history {
  margin-top: var(--brocade-space-36);
  display: grid;
  gap: var(--brocade-space-history-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--brocade-width-grid-history), 1fr));
  padding-bottom: var(--brocade-space-page);
}

.history__head {
  margin-bottom: var(--brocade-space-24);
  padding-bottom: var(--brocade-space-10);
  border-bottom: var(--brocade-border-width-rule) solid var(--brocade-color-border-strong);
}

.history__group--claret .history__head { border-bottom-color: var(--brocade-color-accent-claret); }
.history__group--moss .history__head { border-bottom-color: var(--brocade-color-accent-moss); }

.history__head p {
  margin: 0;
  color: var(--brocade-color-foreground-muted);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta);
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__entry {
  position: relative;
  display: grid;
  gap: var(--brocade-space-5);
  padding: 0 0 var(--brocade-space-28) var(--brocade-space-22);
  border-left: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
}

.timeline__entry::before {
  content: '';
  position: absolute;
  left: var(--brocade-offset-dot);
  top: var(--brocade-offset-dot-top);
  width: var(--brocade-size-dot);
  height: var(--brocade-size-dot);
  border-radius: var(--brocade-radius-dot);
  background: var(--brocade-color-border-strong);
}

.history__group--claret .timeline__entry::before { background: var(--brocade-color-accent-claret); }
.history__group--moss .timeline__entry::before { background: var(--brocade-color-accent-moss); }

.timeline__years {
  color: var(--brocade-color-foreground-muted);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta);
  letter-spacing: var(--brocade-letter-spacing-years);
}

.timeline__name {
  font-size: var(--brocade-font-size-reading);
  font-weight: var(--brocade-font-weight-medium);
  letter-spacing: var(--brocade-letter-spacing-card-title);
}

.timeline__kind {
  color: var(--brocade-color-foreground-muted);
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-label);
  letter-spacing: var(--brocade-letter-spacing-kind);
  text-transform: uppercase;
}

.timeline__note {
  color: var(--brocade-color-foreground-soft);
  font-size: var(--brocade-font-size-note);
  font-weight: var(--brocade-font-weight-reading);
  line-height: var(--brocade-line-height-snug);
}

.timeline__evidence {
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta);
}

/* ---- contact, colophon ------------------------------------------------------------------ */

.contacts {
  display: grid;
  margin: var(--brocade-space-40) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brocade-space-6) var(--brocade-space-20);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--brocade-space-20) var(--brocade-space-24);
  background: var(--brocade-color-background-elevated);
  border: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
  border-top: 0;
  color: var(--brocade-color-foreground-base);
  text-decoration: none;
  transition: background-color var(--brocade-duration-hover) var(--brocade-transition-easing-base);
}

.contact:hover {
  background: var(--brocade-color-background-muted);
  color: var(--brocade-color-foreground-base);
}

.contact .kind {
  color: var(--brocade-color-foreground-muted);
  letter-spacing: var(--brocade-letter-spacing-eyebrow);
}

.contact__value {
  color: var(--brocade-color-link-base);
  font-size: var(--brocade-font-size-brand);
}

.page-note {
  margin-top: var(--brocade-space-26);
}

.page-colophon .caps {
  margin: var(--brocade-space-36) 0 var(--brocade-space-18);
  padding-bottom: var(--brocade-space-10);
  border-bottom: var(--brocade-border-width-hairline) solid var(--brocade-color-border-base);
}

.compliance {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-ui);
}

.compliance li {
  padding-block: var(--brocade-space-6);
}

.compliance__name {
  color: var(--brocade-color-foreground-base);
  font-weight: var(--brocade-font-weight-medium);
}

.compliance__for {
  color: var(--brocade-color-foreground-muted);
}

.swatches {
  display: grid;
  gap: var(--brocade-space-10);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--brocade-font-family-ui);
  font-size: var(--brocade-font-size-meta);
}

.swatches li {
  display: flex;
  gap: var(--brocade-space-14);
  align-items: center;
}

.swatch {
  flex: none;
  width: var(--brocade-space-26);
  height: var(--brocade-space-26);
  border: var(--brocade-border-width-hairline) solid var(--brocade-color-border-strong);
}

.swatch--ground { background: var(--brocade-color-background-base); }
.swatch--surface { background: var(--brocade-color-background-elevated); }
.swatch--ink { background: var(--brocade-color-foreground-base); }
.swatch--rule { background: var(--brocade-color-border-base); }
.swatch--claret { background: var(--brocade-color-accent-claret); }
.swatch--violet { background: var(--brocade-color-accent-violet); }
.swatch--moss { background: var(--brocade-color-accent-moss); }
.swatch--amber { background: var(--brocade-color-accent-amber); }

.swatch__role {
  margin-left: auto;
  color: var(--brocade-color-foreground-muted);
}

/* ---- print --------------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .actions {
    display: none;
  }

  .site {
    background: none;
  }

  .page {
    animation: none;
  }
}