/* Aurora Lab Notes: field-notebook layer on top of /shared/fl.css. See /DESIGN.md.
   Type (craft v3): Aurora's own Recursive, self-hosted, the same files /aurora uses (so they are cached between the
   two). Casual for headings, Sans Linear for reading, Mono for labels, methods and code. Each face has a
   metric-matched local fallback, so the swap does not move the layout. SIL OFL 1.1, /aurora/fonts/OFL-Recursive.txt. */
@font-face { font-family: "Recursive Casual"; src: url("/aurora/fonts/recursive-casual.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Recursive Sans"; src: url("/aurora/fonts/recursive-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Recursive Mono"; src: url("/aurora/fonts/recursive-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Recursive Casual Fallback"; src: local("Arial"); size-adjust: 114%; ascent-override: 83.4%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Recursive Sans Fallback"; src: local("Arial"); size-adjust: 114%; ascent-override: 83.4%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Recursive Mono Fallback"; src: local("Consolas"); size-adjust: 109.1%; ascent-override: 87.1%; descent-override: 22.9%; line-gap-override: 0%; }
body {
  --display: "Recursive Casual", "Recursive Casual Fallback", "Segoe UI", sans-serif;
  --text: "Recursive Sans", "Recursive Sans Fallback", "Segoe UI", sans-serif;
  --mono: "Recursive Mono", "Recursive Mono Fallback", ui-monospace, monospace;
}
h1, h2, h3, .wordmark, .foot .products a { font-weight: 800; letter-spacing: -.02em; }
.article blockquote, .readout td b { font-weight: 700; }
body { --accent: #7fe3d4; --violet-light: #b39cff; --accent-2: #4f3a99; --mint-ink: #1f6b61; --violet-ink: #4f3a99; --scribble-hue: 140deg; --paper-faint: #8f8677; }
.band.paper, .foot { --accent-2: var(--violet-ink); }
.band.paper .eyebrow b, .band.paper h2 em { color: var(--mint-ink); }
.band.paper a:hover, .foot a:hover { color: var(--violet-ink); }
@media (max-width: 900px) { .nav ul a:hover { color: var(--violet-ink); } }

.masthead { padding: clamp(140px, 16vw, 200px) 0 clamp(64px, 8vw, 110px); }
.masthead h1 { font-size: clamp(42px, 6vw, 92px); max-width: 15ch; }
.crumbs { font: 500 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.crumbs a { text-decoration: none; color: var(--paper-dim); }
.crumbs b { color: var(--accent); font-weight: 600; }

.notes-rules { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--rule); max-width: 900px; }
.notes-rules li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--paper-dim); font-size: 16px; }
.notes-rules b { font: 500 11px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); font-weight: 500; }

.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(15, 13, 11, .16); }
.posts li { border-bottom: 1px solid rgba(15, 13, 11, .16); }
.posts a { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding: 34px 0; text-decoration: none; }
.posts .when { font: 500 12px/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6d6458; }
.posts .when .tag { margin-top: 10px; background: var(--mint-ink); color: var(--paper); }
.posts h2 { font-size: clamp(30px, 3.4vw, 48px); margin-bottom: 12px; }
.posts p { color: #4a4238; }
.posts a:hover h2 { color: var(--violet-ink); }

/* article */
.kicker { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font: 500 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 22px; }
.standfirst { font-size: clamp(19px, 1.6vw, 23px); color: var(--paper-dim); max-width: 58ch; }
.standfirst b { color: var(--paper); font-weight: 500; }
.article { max-width: 720px; }
.article h2 { font-size: clamp(28px, 3vw, 40px); margin: 64px 0 18px; }
.article h2::before { content: attr(data-n) " / "; display: block; font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--mint-ink); margin-bottom: 14px; }
.article p { color: #2c2620; font-size: 18px; }
.article p b { font-weight: 600; color: var(--ink-0); }
.article code { font: 500 .86em var(--mono); background: rgba(15, 13, 11, .07); padding: 1px 5px; border-radius: 2px; }
.readout { margin: 34px 0; }
.readout .eyebrow { margin-bottom: 10px; }
.readout table { width: 100%; border-collapse: collapse; font-size: 16px; }
.readout td { padding: 11px 12px 11px 0; border-top: 1px solid rgba(15, 13, 11, .16); vertical-align: top; color: #4a4238; }
.readout tr:last-child td { border-bottom: 1px solid rgba(15, 13, 11, .16); }
.readout td:first-child { width: 40%; font: 500 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6d6458; padding-top: 14px; }
.readout td b { font: 400 22px/1 var(--display); color: var(--ink-0); }
.article blockquote { margin: 34px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--ink-0); font: 400 clamp(21px, 2vw, 26px)/1.35 var(--display); color: var(--ink-0); transform: rotate(-.4deg); }
.article blockquote .src { display: block; margin-top: 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6d6458; }
.aside-box { margin: 44px 0; padding: 22px 0 6px; border-top: 1px dashed rgba(15, 13, 11, .35); border-bottom: 1px dashed rgba(15, 13, 11, .35); }
.aside-box .eyebrow { margin-bottom: 8px; }
.aside-box ul { margin: 0 0 16px; padding-left: 20px; color: #4a4238; }
.aside-box li { margin: 8px 0; }
.article pre { background: var(--ink-0); color: var(--paper); padding: 18px 20px; border-radius: 3px; overflow-x: auto; font: 400 13.5px/1.65 var(--mono); margin: 18px 0; }
.article pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.after { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 56px; align-items: center; }
@media (max-width: 760px) {
  .posts a, .notes-rules li { grid-template-columns: 1fr; gap: 6px; }
  .readout td:first-child { width: 42%; }
}