/* Shared by index.html and writeup.html. Rebuilt with the good-css skill (.claude/skills/good-css). */

@font-face { font-family: "Manrope"; src: url(/assets/Manrope.ttf) format("truetype"); font-weight: 200 800; font-display: swap; }

@view-transition { navigation: auto; }

/* The reset (foundations.md) */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

:root {
  interpolate-size: allow-keywords;
  scrollbar-gutter: stable;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100svh;
}

h1, h2, h3, h4 { text-wrap: balance; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, textarea, select { font-size: max(16px, 1rem); }

button, a, [role="button"] { touch-action: manipulation; }

button, [role="button"] {
  user-select: none;
  -webkit-user-select: none;
}

/* Tokens. docs/DESIGN.md Night theme, same colors written in oklch. The site is Night only, so no light-dark(). */
:root {
  color-scheme: dark;

  --surface-0: oklch(14.1% 0.003 69.4);
  --surface-1: oklch(18.4% 0.0052 67.5);
  --surface-2: oklch(22.4% 0.0074 67.4);
  --line: oklch(28.3% 0.0084 75.2);
  --ink: oklch(96.5% 0.0045 78.3);
  --ink-soft: oklch(82.9% 0.0112 76.6);
  --ink-muted: oklch(65% 0.0137 75.3);
  --ink-faint: oklch(49.9% 0.0126 76.5);
  --route: oklch(80.5% 0.1753 156.3);
  --on-route: oklch(18% 0.033 158.2);
  --warn: oklch(81% 0.1435 79.3);
  --black: oklch(0 0 none);
  --white: oklch(1 0 none);

  --bracket: oklch(45.2% 0.0129 76.5);
  --control-line: oklch(33.5% 0.0103 73.6);
  --hline: color-mix(in oklch, var(--ink) 14%, transparent);
  --route-hover: color-mix(in oklch, var(--route), var(--white) 14%);

  /* WEBSITE.md decision 7: Manrope, a Newsreader second line, JetBrains Mono labels */
  --serif: "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* One fluid scale for type and space: 320px to 1240px, 17px to 19px body */
  --narrow: 20;
  --wide: 77.5;
  --size-narrow: 1.0625;
  --size-wide: 1.1875;
  --ratio-narrow: 1.2;
  --ratio-wide: 1.31;

  --fluid: clamp(0rem, (100vw - var(--narrow) * 1rem) / (var(--wide) - var(--narrow)), 1rem);
  --at-narrow: calc(var(--size-narrow) * (1rem - var(--fluid)));
  --at-wide: calc(var(--size-wide) * var(--fluid));

  --step--2: calc(var(--step-0) / pow(var(--ratio-narrow), 2));
  --step--1: calc(var(--step-0) / var(--ratio-narrow));
  --step-0: calc(var(--at-narrow) + var(--at-wide));
  --step-1: calc(var(--at-narrow) * var(--ratio-narrow) + var(--at-wide) * var(--ratio-wide));
  --step-2: calc(var(--at-narrow) * pow(var(--ratio-narrow), 2) + var(--at-wide) * pow(var(--ratio-wide), 2));
  --step-3: calc(var(--at-narrow) * pow(var(--ratio-narrow), 3) + var(--at-wide) * pow(var(--ratio-wide), 3));
  --step-4: calc(var(--at-narrow) * pow(var(--ratio-narrow), 4) + var(--at-wide) * pow(var(--ratio-wide), 4));
  --step-5: calc(var(--at-narrow) * pow(var(--ratio-narrow), 5) + var(--at-wide) * pow(var(--ratio-wide), 5));

  /* Fluid space: 16px to 48px gutter, 10px to 28px frame inset, 80px to 140px between sections */
  --gutter: clamp(1rem, 0.3rem + 3.48vw, 3rem);
  --frame: clamp(0.625rem, 0.234rem + 1.957vw, 1.75rem);
  --frame-pad: clamp(1rem, 0.65rem + 1.74vw, 2rem);
  --nav-max: 73.75rem;
  --space-section: clamp(5rem, 3.7rem + 6.52vw, 8.75rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

body {
  background: var(--surface-0);
  color: var(--ink-soft);
  font: 600 var(--step-0) / 1.5 Manrope, system-ui, sans-serif;
}

h1, h2, h3 { margin: 0; color: var(--ink); }
p, ul, ol, figure, blockquote { margin: 0; }

.label {
  margin: 0;
  font: 400 var(--step--2) / 1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Content grid with breakouts (layout.md) */
.content-grid {
  --content: 73.75rem;
  --breakout: 80rem;

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--gutter), 1fr)
    [breakout-start] minmax(0, calc((var(--breakout) - var(--content)) / 2))
    [content-start] min(100% - var(--gutter) * 2, var(--content)) [content-end]
    minmax(0, calc((var(--breakout) - var(--content)) / 2)) [breakout-end]
    minmax(var(--gutter), 1fr) [full-width-end];
}

:is(.content-grid, .full-width) > * { grid-column: content; }
:is(.content-grid, .full-width) > .breakout { grid-column: breakout; }
:is(.content-grid, .full-width) > .full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}

/* One focus ring */
:focus-visible {
  outline: max(2px, 0.08em) solid currentColor;
  outline-offset: 0.25em;
}

/* Links: press feedback is a fade, which is not motion */
a { color: inherit; }
a:active { opacity: 0.7; }

/* Corner brackets, the ink-orbit frame. Absolute, because they must not size what they frame. */
.hx-c {
  position: absolute;
  inline-size: 12px;
  block-size: 12px;
  border: 0 solid var(--bracket);
  pointer-events: none;
  transition: border-color 300ms var(--ease-out);
}

.hx-c.tl { inset-block-start: -6px; inset-inline-start: -6px; border-block-start-width: 1.5px; border-inline-start-width: 1.5px; }
.hx-c.tr { inset-block-start: -6px; inset-inline-end: -6px; border-block-start-width: 1.5px; border-inline-end-width: 1.5px; }
.hx-c.bl { inset-block-end: -6px; inset-inline-start: -6px; border-block-end-width: 1.5px; border-inline-start-width: 1.5px; }
.hx-c.br { inset-block-end: -6px; inset-inline-end: -6px; border-block-end-width: 1.5px; border-inline-end-width: 1.5px; }

.hx-fr { position: relative; display: inline-flex; }
.hx-fr > .hx-c { inline-size: 7px; block-size: 7px; }
.hx-fr > .tl { inset-block-start: -4px; inset-inline-start: -4px; }
.hx-fr > .tr { inset-block-start: -4px; inset-inline-end: -4px; }
.hx-fr > .bl { inset-block-end: -4px; inset-inline-start: -4px; }
.hx-fr > .br { inset-block-end: -4px; inset-inline-end: -4px; }

@media (hover: hover) and (pointer: fine) {
  .hx-fr:hover > .hx-c { border-color: var(--ink-muted); }
  .hx-fr:hover > .tl { translate: -3px -3px; }
  .hx-fr:hover > .tr { translate: 3px -3px; }
  .hx-fr:hover > .bl { translate: -3px 3px; }
  .hx-fr:hover > .br { translate: 3px 3px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hx-c { transition: border-color 300ms var(--ease-out), translate 300ms var(--ease-out); }
}

/* Square button. The label is trimmed to its letters, so the padding is raised to keep the old height. */
.hbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 2px;
  font: 500 0.84375rem / 1 Manrope, system-ui, sans-serif;
  white-space: nowrap;
  text-decoration: none;
}

.hbtn > span { text-box: trim-both cap alphabetic; }

/* Hit area larger than the visual: the 34px button gets a 44px target */
.hbtn::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2);
}

.hbtn > svg { flex: none; block-size: 1.1cap; inline-size: auto; }
.hbtn:active { scale: 0.97; }

.hbtn.go {
  background: var(--route);
  color: var(--on-route);
  font-weight: 700;
  box-shadow: 0 6px 16px -8px oklch(0 0 none / 0.5);
}

.hbtn.go:focus-visible { outline-color: var(--route); }

@media (hover: hover) and (pointer: fine) {
  .hbtn.go:hover { background: var(--route-hover); box-shadow: 0 10px 22px -10px oklch(0 0 none / 0.6); }
  .hbtn:hover > svg { translate: 3px 0; }
}

.hbtn { transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }

@media (prefers-reduced-motion: no-preference) {
  .hbtn { transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), scale 160ms var(--ease-out); }
  .hbtn > svg { transition: translate 200ms var(--ease-out); }
}

/* The framed nav bar. Links fold into a popover menu when the bar gets narrow. */
nav.hx {
  z-index: 4;
  inline-size: min(100% - 2 * var(--frame), var(--nav-max));
  margin-inline: auto;
  container-type: inline-size;
}

.hx-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-block-size: 3.625rem;
  padding-inline: 1.125rem 0.875rem;
  background: color-mix(in oklch, var(--surface-1) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px oklch(0 0 none / 0.4), 0 10px 30px -14px oklch(0 0 none / 0.7);
}

.hx-bar a { text-decoration: none; }
.hx-bar > a:first-child img { flex: none; inline-size: 4.75rem; }
.hx-links { display: flex; gap: 2px; margin-inline: auto; }

.hx-links a,
.hx-menu a {
  padding: 0.5rem 0.75rem;
  font: 500 0.84375rem / 1.2 Manrope, system-ui, sans-serif;
  color: var(--ink-soft);
  transition: color 200ms var(--ease-out);
}

.hx-links a[aria-current] { color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .hx-links a:hover,
  .hx-menu a:hover { color: var(--ink); }
}

.hx-menu-btn {
  position: relative;
  display: none;
  place-items: center;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.hx-menu-btn::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 44px) / 2);
}

.hx-menu-btn:active { scale: 0.95; }
.hx-menu-btn svg { inline-size: 1rem; }

@container (width < 51rem) {
  .hx-links { display: none; }
  .hx-menu-btn { display: grid; }
  .hx-bar .hx-fr { margin-inline-start: auto; }
}

@container (width < 28rem) {
  .hx-bar .hx-fr { display: none; }
  .hx-menu-btn { margin-inline-start: auto; }
}

/* The menu: a popover anchored to its button, entering and leaving from display: none */
.hx-menu {
  inline-size: min(18rem, 100vw - 2 * var(--frame));
  padding: 0.5rem;
  background: var(--surface-1);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  opacity: 0;
  transition:
    opacity 0.2s var(--ease-out),
    translate 0.2s var(--ease-out),
    display 0.2s allow-discrete,
    overlay 0.2s allow-discrete;
}

.hx-menu:popover-open { display: flex; flex-direction: column; gap: 2px; opacity: 1; }
.hx-menu a { padding: 0.6875rem 0.75rem; font-size: 0.9375rem; }

@starting-style {
  .hx-menu:popover-open { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hx-menu { translate: 0 0.5rem; }
  .hx-menu:popover-open { translate: 0 0; }

  @starting-style {
    .hx-menu:popover-open { translate: 0 0.5rem; }
  }
}

@supports (position-area: block-end) {
  .hx-menu {
    margin: 0;
    margin-block-start: 1.25rem;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
}

/* Footer, both pages */
footer { border-block-start: 1px solid var(--line); }

footer .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  min-block-size: 5.5rem;
  padding-block: 1.75rem;
  color: var(--ink-muted);
}

footer .row > a:nth-child(2) { margin-inline: auto; }
footer img { flex: none; inline-size: 4.75rem; }
footer a { text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  footer a:hover { color: var(--ink); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}