/* Field Notes post layout, shared by the FabCon Europe 2026 series. Loads after style.css.
   Post-specific figure styles stay inline in each page. Static only: no animation, no transitions. */
:root { --pine: #2F5D50; --amber: #B85C00; --slate: #4B4B63; }

/* text column and headings */
main.post p, main.post li { max-width: 72ch; }
main.post .deck { font-family: "Source Serif 4", Georgia, serif; font-size: 1.3rem; line-height: 1.4; margin: 0 0 14px; max-width: 40ch; }
main.post .byline { font-size: 1.1rem; color: var(--muted); margin: 0 0 18px; }
main.post .crumbs { font-size: .9rem; color: var(--muted); margin: 0 0 18px; }
main.post h3 { margin-top: 28px; }

/* series label above the title */
.kicker { font-size: .9rem; color: var(--muted); margin: 0 0 6px; letter-spacing: .02em; }
.kicker a { color: var(--cardinal); text-decoration: none; }
.kicker a:hover { text-decoration: underline; }

/* dateline: when this news is from */
.dateline { background: var(--sand); border-top: 3px solid var(--ink); padding: 14px 20px 12px; margin: 0 0 26px; max-width: 900px; }
.dateline dl { display: grid; grid-template-columns: 11.5em 1fr; gap: 6px 18px; margin: 0; max-width: none; }
.dateline dt { margin: 0; font-weight: 600; color: var(--ink); }
.dateline dd { margin: 0; color: var(--ink); }
.dateline .aging { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .92rem; max-width: none; }
@media (max-width: 640px) {
  .dateline { padding: 12px 14px 10px; }
  .dateline dl { grid-template-columns: 1fr; gap: 0; }
  .dateline dd { margin: 0 0 8px; }
}

/* status badges: label text always visible, color is a second signal only */
.badge { display: inline-block; text-indent: 0; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 4px 7px 3px; vertical-align: 1px; color: #fff; border: 1.5px solid transparent; white-space: nowrap; }
.badge.ga { background: var(--pine); }
.badge.preview { background: var(--amber); }
.badge.roadmap { background: var(--slate); }
.badge.tbc { background: var(--paper); color: var(--ink); border-color: var(--ink); }

/* in short */
.bluf { border-left: 4px solid var(--cardinal); padding: 2px 0 2px 18px; margin: 24px 0; }
.bluf ol { margin: 0; padding-left: 1.2em; }
.bluf li { margin: 8px 0; }

/* contents */
.toc { margin: 0 0 8px; }
.toc p { margin: 0 0 4px; }
.toc ul { margin: 0; padding-left: 1.1em; columns: 2; column-gap: 32px; max-width: 900px; }
.toc li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 640px) { .toc ul { columns: 1; } }

/* figures: graphics may run wider than the 72ch text column */
.fig { margin: 28px 0 32px; }
.fig figcaption { color: var(--muted); font-size: .92rem; max-width: 72ch; margin-top: 10px; }
.fig svg { display: block; width: 100%; height: auto; }
.fig .tall { display: none; }
@media (max-width: 640px) { .fig .wide { display: none; } .fig .tall { display: block; } }
.hatch-key { background: repeating-linear-gradient(135deg, #fff 0 5px, var(--rule) 5px 6.5px); }

/* the demo recording */
.demo video { display: block; width: 100%; max-width: 960px; height: auto; aspect-ratio: 16 / 9; background: var(--ink); border: 1px solid var(--rule); }
.demo .alt { font-size: .92rem; color: var(--muted); margin: 6px 0 0; }

/* callouts */
.monday { border-left: 4px solid var(--pine); padding: 6px 0 6px 14px; margin: 22px 0; max-width: 72ch; }
.monday strong { color: var(--pine); }
.catch { border-left: 4px solid var(--amber); padding: 6px 0 6px 14px; margin: 22px 0; max-width: 72ch; }
.catch strong { color: var(--amber); }

/* code */
main.post code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: var(--sand); padding: 1px 4px; overflow-wrap: anywhere; }
main.post pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86rem; line-height: 1.5; background: var(--sand); border-left: 3px solid var(--rule); padding: 12px 16px; margin: 0 0 18px; max-width: 900px; white-space: pre-wrap; overflow-wrap: anywhere; }
main.post pre code { background: none; padding: 0; font-size: inherit; }

/* tables with row IDs */
table.ref { border-collapse: collapse; width: 100%; max-width: 960px; font-size: .95rem; margin: 0 0 18px; }
table.ref th, table.ref td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); }
table.ref th { font-weight: 600; border-bottom: 2px solid var(--ink); }
table.ref td:first-child { color: var(--muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  table.ref thead { display: none; }
  table.ref tr { display: block; border-bottom: 2px solid var(--ink); padding: 8px 0; }
  table.ref td { display: block; border: 0; padding: 3px 0; }
  table.ref td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
}

/* numbered rules */
ol.rules { max-width: 72ch; padding-left: 0; list-style: none; }
ol.rules li { padding-left: 2.6em; text-indent: -2.6em; margin: 10px 0; }
ol.rules li b { display: inline-block; width: 2.38em; text-indent: 0; color: var(--cardinal); }

/* series navigation */
.series { border-top: 3px solid var(--ink); padding-top: 16px; margin-top: 44px; max-width: 900px; }
.series h2 { margin-top: 0; }
.series .groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; }
.series h3 { font-size: .9rem; color: var(--muted); margin: 12px 0 4px; font-weight: 600; letter-spacing: .02em; }
.series ol { margin: 0; padding-left: 0; list-style: none; }
.series li { margin: 3px 0; font-size: .95rem; }
.series li b { color: var(--muted); font-weight: 600; margin-right: 6px; }
.series a { text-decoration: none; }
.series a:hover { text-decoration: underline; }
.series [aria-current] { font-weight: 600; color: var(--ink); }
.series .prevnext { display: flex; justify-content: space-between; gap: 18px; margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); max-width: none; }
.series .prevnext a { max-width: 45%; }
.series .prevnext .next { text-align: right; margin-left: auto; }
@media (max-width: 720px) { .series .groups { grid-template-columns: 1fr; } }

/* author and sources */
.author { background: var(--sand); padding: 4px 20px 8px; max-width: 900px; }
.sources li { margin: 4px 0; }

/* series map: seven stops under the byline (From Events to Answers). Numbers always, labels from 561 px up */
.smap { margin: 0 0 26px; max-width: 900px; }
.smap ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
main.post .smap li { position: relative; margin: 0; max-width: none; }
.smap li::before { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: var(--rule); }
.smap li:first-child::before { left: 50%; }
.smap li:last-child::before { right: 50%; }
.smap a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; line-height: 1.25; text-align: center; text-decoration: none; }
.smap b { display: grid; place-items: center; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--rule); background: var(--paper); color: var(--muted); font-weight: 600; font-size: .85rem; }
.smap a:hover span { text-decoration: underline; }
.smap a:hover b { border-color: var(--cardinal); color: var(--cardinal); }
.smap [aria-current] b { background: var(--cardinal); border-color: var(--cardinal); color: #fff; }
.smap [aria-current] span { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .smap span { display: none; } }

/* one list of all parts, for a short series */
.series ol.all li { margin: 5px 0; }
ol.parts { list-style: none; padding: 0; margin: 0 0 10px; max-width: 900px; }
ol.parts li { padding: 10px 0 2px 2.6em; text-indent: -2.6em; border-bottom: 1px solid var(--rule); margin: 0; max-width: none; }
ol.parts li b { display: inline-block; width: 2.4em; text-indent: 0; color: var(--muted); font-weight: 600; }
ol.parts li a.ntitle { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; text-decoration: none; margin-right: 6px; }
ol.parts li p { text-indent: 0; margin: 4px 0 8px; color: var(--muted); }