/* Hallmark · macrostructure: Long Document · theme: Newsprint · nav: N6 masthead · footer: Ft1 (reduced)
 * genre: editorial · enrichment: none (typography only) · anchor hue: rust ~32° · stamped 2026-08-16 (audit) */
/* ==========================================================================
   Reset — minimal, print-aware
   ========================================================================== */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  min-width: 0;
  margin: 0;
}

/* The hidden attribute must win over any display rule an element carries —
   several controls on this site ship hidden and are revealed by script, and
   an author `display: flex` would otherwise quietly out-rank the browser's
   own [hidden] rule and show them, empty and dead, with JavaScript off. */
[hidden] {
  display: none !important;
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-selection);
  color: var(--color-ink-2);
}

/* ==========================================================================
   Skip link
   ========================================================================== */

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  transform: translateY(-200%);
  background: var(--color-ink-2);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-md);
  z-index: var(--z-toast);
  white-space: nowrap;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Focus — instant ring, never animated, >=3:1 against paper
   ========================================================================== */

a:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Links — typographic, no button chrome
   ========================================================================== */

a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--dur-short) var(--ease-out);
}

a:hover,
a:active {
  color: var(--color-accent-2);
}

/* ==========================================================================
   N6 · Newspaper masthead
   ========================================================================== */

.nav-mast {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--page-gutter) 0;
  text-align: center;
}

/* Theme toggle — ships hidden in the markup and is revealed by site.js. With
   JavaScript off there is no dead control on the page, and the OS preference
   still works, because that path is pure CSS. */

.theme-toggle {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--page-gutter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px minimum, so it is a real target on a phone */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}

.theme-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-rule);
}

.theme-toggle:active {
  color: var(--color-accent-2);
  border-color: var(--color-rule-strong);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.mast-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: var(--text-mast);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink-2);
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  min-width: 0;
}

.mast-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  gap: var(--space-md) var(--space-lg);
  margin: 0;
  padding: 0;
}

.mast-nav a {
  /* The link text is 16px tall, which is under the 24px minimum target size
     (WCAG 2.5.8). Padding rather than a larger font keeps the masthead
     rhythm identical while making the target real on a phone. */
  display: inline-block;
  padding-block: var(--space-2xs);
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-muted);
}

.mast-nav a:hover,
.mast-nav a:focus-visible {
  color: var(--color-accent);
}

.mast-rule {
  width: 100%;
  max-width: 48rem;
  height: var(--space-2xs);
  margin: var(--space-lg) auto 0;
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}

/* ==========================================================================
   Long Document — continuous prose
   ========================================================================== */

main {
  display: flex;
  justify-content: center;
  padding-inline: var(--page-gutter);
}

.prose {
  width: 100%;
  max-width: var(--measure);
  padding-block: var(--space-2xl) var(--space-3xl);
}

.prose > p {
  margin: 0 0 var(--space-lg);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.lede {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
  font-weight: 400;
  margin-bottom: var(--space-2xl);
}

/* Run-in lead-ins — the magazine device that makes continuous prose skimmable
   without turning the page into a CV with section headers. Each identity
   thread opens with one, so a reader scanning in eight seconds still picks up
   networks / SAP / data / AI. */

.run-in {
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
}

.prose h2.inline {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-lg);
  font-variant: small-caps;
  letter-spacing: 0.02em;
  color: var(--color-ink-2);
  margin: var(--space-2xl) 0 var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-accent);
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  min-width: 0;
}

.prose h2.inline:first-of-type {
  margin-top: var(--space-3xl);
}

.meta {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
  color: var(--color-neutral);
  margin: 0 0 var(--space-md);
}

.links {
  font-size: var(--text-base);
  margin: 0 0 var(--space-lg);
}

/* Elsewhere — plain list, hairline separation */

.elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.elsewhere li {
  margin: 0;
}

.elsewhere li:not(:first-child) {
  border-inline-start: var(--rule-hair) solid var(--color-rule);
  padding-inline-start: var(--space-lg);
}

.elsewhere a {
  white-space: nowrap;
}

/* Masthead name as a link (inner pages return home through it) */

.mast-name a {
  color: inherit;
  text-decoration: none;
}

.mast-name a:hover {
  color: var(--color-accent);
}

/* Page title — inner pages, where the masthead name is no longer the h1 */

.page-title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-title);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-sm);
  max-width: 100%;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Work — the products list. One entry today, built to take more. */

.work {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.work > li {
  margin: 0 0 var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.work-name {
  font-size: var(--text-base);
  margin: 0 0 var(--space-2xs);
}

.work-note {
  display: block;
  color: var(--color-neutral);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: var(--measure);
}

/* Terminal blocks — real output, no fake window chrome.
   The block scrolls inside itself so the page never scrolls sideways. */

pre.cmd,
pre.output {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border-inline-start: var(--rule-hair) solid var(--color-accent);
  margin: 0 0 var(--space-sm);
  padding: var(--space-md);
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  tab-size: 2;
}

pre.cmd {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre.output {
  white-space: pre;
}

/* ==========================================================================
   Ft1 · Mast-headed footer (reduced — domain + year only)
   ========================================================================== */

.foot-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-lg) var(--page-gutter) var(--space-2xl);
  margin-top: var(--space-2xl);
  border-top: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  max-width: 100%;
}

.foot-domain,
.foot-year {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-neutral);
  white-space: nowrap;
}

.foot-domain {
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Responsive — verified at 320 / 375 / 414 / 768
   ========================================================================== */

@media (max-width: 26.5625rem) {
  /* <= 425px: tighten the masthead rhythm on small phones */
  .nav-mast {
    padding-top: var(--space-xl);
  }

  .prose {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  /* keep the output block readable without letting it widen the page */
  pre.cmd,
  pre.output {
    padding: var(--space-sm);
  }
}

@media (min-width: 48rem) {
  .prose > p,
  .lede {
    font-size: var(--text-md);
  }

  .mast-nav a {
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* ==========================================================================
   Print — one clean page
   ========================================================================== */

@media print {
  .skip-link {
    display: none;
  }

  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: 11pt;
    line-height: 1.4;
  }

  .nav-mast {
    padding-top: 0;
  }

  .mast-nav {
    display: none;
  }

  .mast-rule {
    border-color: var(--color-ink);
  }

  a {
    color: var(--color-ink);
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: var(--color-neutral);
  }

  .prose {
    max-width: 100%;
    padding-block: var(--space-lg) var(--space-md);
  }

  pre.cmd,
  pre.output {
    background: transparent;
    border-inline-start: var(--rule-hair) solid var(--color-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 8pt;
  }

  /* the URL-after-link rule would wreck the output block */
  pre a[href^="http"]::after {
    content: "";
  }

  .foot-mast {
    background: transparent;
    border-top: var(--rule-hair) solid var(--color-ink);
  }

  @page {
    margin: 1.5cm;
  }
}