/* Self-hosted fonts (SIL Open Font License; see /fonts/OFL-*.txt). */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-400-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Every theme colour is declared once as light-dark(light, dark). color-scheme picks the side:
   the system setting by default (works without JavaScript), or the saved toggle via data-theme. */
:root {
  color-scheme: light dark;
  --paper: light-dark(#eee2e7, #160f18);
  --ink: light-dark(#372c39, #f7edf2);
  --muted: light-dark(#665b69, #d4c1cb);
  --line: light-dark(#b99fa9, #765c71);
  --terracotta: light-dark(#913d2d, #ff9a75);
  --terracotta-dark: light-dark(#753224, #ffc0a8);
  --plum: light-dark(#4d364c, #321d32);
  --cloud: light-dark(#fff9fb, #fff7fb);
  --surface: light-dark(#fff9fb, #231a25);
  --surface-raised: light-dark(#f4e9ee, #302333);
  --focus: light-dark(#176a91, #82d6ff);
  --ok: light-dark(#1f6b3a, #7fd99c);
  --warn: light-dark(#8a5a00, #f2c06b);
  --bad: light-dark(#a33426, #ff8f86);
  --experimental: light-dark(#6950a1, #c4b3f0);
  --planning: light-dark(#665b69, #f2c06b);
  --selection-bg: light-dark(#e2ae8d, #7c423a);
  --selection-ink: light-dark(#2d202c, #fff7fb);
  --inset-bg: light-dark(#fff9fb, #231a25);
  --on-accent: light-dark(#fff9fb, #231a25);
  --action-hover-bg: light-dark(#4d364c, #ff9a75);
  --topic: light-dark(#4d364c, #f7edf2);
  --point-bg: light-dark(color-mix(in srgb, #913d2d 15%, #fff9fb), #513548);
  --point-ink: light-dark(#753224, #ffd0bd);
  --flow-clean: light-dark(#4d364c, #b49ab2);
  --flow-clean-ink: light-dark(#fff9fb, #160f18);
  --flow-end-border: light-dark(#4d364c, #765c71);
  --corner-ink: light-dark(#fff9fb, #160f18);
  --corner-hover: light-dark(#4d364c, #ffc0a8);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* Comfortable running-text width: about 70-75 characters of Atkinson at body size. */
  --measure: 34rem;
  /* Type scale. Small text never goes below --text-2xs (12.5px). */
  --text-2xs: .78rem;
  --text-xs: .84rem;
  --text-sm: .92rem;
  --text-body: 1.0625rem;
  --text-lg: 1.125rem;
  --text-lead: clamp(1.08rem, 1.6vw, 1.25rem);
  --step-3: clamp(1.3rem, 2.4vw, 1.75rem);
  --step-4: clamp(1.5rem, 3vw, 2rem);
  --step-5: clamp(1.7rem, 3vw, 2.4rem);
  --step-7: clamp(2.6rem, 6vw, 4.8rem);
  --step-8: clamp(3rem, 7vw, 5.5rem);
  --label-tracking: .08em;
  font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
/* width/height attributes reserve space; CSS still controls the rendered size. */
:where(img[width][height]) { height: auto; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); line-height: 1.55; }
code, kbd, samp, pre { font-family: var(--font-mono); }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
::selection { background: var(--selection-bg); color: var(--selection-ink); }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.text-link:hover,
.site-footer a:hover { color: var(--terracotta-dark); }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 2; top: 12px; left: 12px; transform: translateY(-180%); padding: 9px 12px; border-radius: 8px; background: var(--ink); color: var(--cloud); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.site-header, main, .site-footer { width: min(1010px, calc(100% - 44px)); margin-inline: auto; }
.site-header { padding: 26px 0; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-symbol-picture { display: block; width: 36px; height: 34px; flex: none; }
.brand-symbol { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-symbol-dark { display: none; }
:root[data-theme="dark"] .brand-symbol-light { display: none; }
:root[data-theme="dark"] .brand-symbol-dark { display: block; }
.brand-lockup { width: auto; height: 32px; }
.github-corner { position: fixed; z-index: 5; top: 0; right: 0; width: 82px; height: 82px; color: var(--corner-ink); }
.github-corner svg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; fill: var(--terracotta); color: var(--corner-ink); }
.github-corner:hover svg { fill: var(--corner-hover); }
.github-corner:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; }
.github-corner .octo-arm { fill: currentColor; transform-origin: 130px 106px; }
.github-corner .octo-body { fill: currentColor; }
.github-corner:hover .octo-arm { animation: octo-wave 560ms ease-in-out; }
@keyframes octo-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-24deg); } 40%, 80% { transform: rotate(10deg); } }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 245px); gap: clamp(28px, 7vw, 100px); align-items: end; padding: clamp(58px, 9vw, 105px) 0 clamp(72px, 11vw, 128px); }
h1, h2, .tool-copy h3 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.035em; }
h1 { max-width: 13ch; margin: 0 0 23px; font-size: var(--step-8); line-height: .94; }
.hero-intro { max-width: 47ch; margin-bottom: 26px; color: var(--muted); font-size: var(--text-lead); }
.text-link { color: var(--terracotta-dark); font-weight: 700; }
.text-link, .support-link, .site-footer a { min-height: 28px; }
.text-link, .site-footer a { display: inline-flex; align-items: center; }
.hero-mark-picture { display: block; width: min(100%, 245px); height: auto; margin-bottom: 7px; }
.hero-mark { display: block; width: 100%; height: auto; opacity: .94; }

.tools-section { padding-bottom: 56px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.section-heading h2 { max-width: 13ch; margin: 0; font-size: var(--step-5); line-height: 1.08; }
.support-section h2 { max-width: 9ch; margin: 0; font-size: clamp(2.45rem, 4.8vw, 4.25rem); line-height: .98; }
.section-heading p { margin: 5px 0 0; color: var(--muted); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: 12px; }
.resource-grid-featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.resource-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 126px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--plum) 6%, var(--paper)); color: inherit; text-decoration: none; }
.resources .resource-card-with-image { grid-column: span 2; grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr) auto; }
.resource-card-image { display: block; width: 100%; height: auto; aspect-ratio: 1.28; border: 1px solid var(--line); border-radius: 8px; object-fit: cover; }
.resource-card:hover { border-color: var(--terracotta-dark); }
.resource-card:focus-visible { outline-offset: 3px; }
.resource-card-copy { display: grid; gap: 6px; }
.resource-card-title { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: var(--text-lg); font-weight: 600; line-height: 1.16; }
.resource-card-description { color: var(--muted); font-size: var(--text-sm); line-height: 1.35; }
.resource-card-arrow { color: var(--terracotta-dark); font-size: 1.3rem; }
.resource-card:hover .resource-card-title { color: var(--terracotta-dark); text-decoration: underline; text-underline-offset: .15em; }
.resource-section { margin-top: 34px; }
.resource-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.resource-section-heading h2 { margin: 0; font-size: var(--step-4); line-height: 1.1; }
.resource-section-heading p { margin: 0; color: var(--muted); }
.resources main { padding-bottom: 64px; }
.resources .resources-hero + .resource-section { margin-top: 0; }
.resources .resource-card { min-height: 116px; }

.resource-detail-page main { padding-bottom: 64px; }
.resource-detail h1,
.resource-detail h2 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -.035em; }
.resource-detail-hero { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(28px, 5vw, 64px); padding: clamp(24px, 4vw, 42px) 0 38px; border-bottom: 1px solid var(--line); }
.resource-breadcrumb { margin: 0 0 20px; color: var(--muted); font-size: var(--text-sm); }
.resource-breadcrumb a { color: var(--terracotta-dark); font-weight: 700; }
.resource-breadcrumb span { padding-inline: 5px; }
.resource-detail h1 { max-width: none; margin: 0 0 18px; font-size: var(--step-8); line-height: .98; }
.resource-detail-deck { max-width: 42ch; margin: 0; color: var(--muted); font-size: var(--text-lead); line-height: 1.5; }
.resource-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.resource-action-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border-radius: 8px; background: var(--plum); color: var(--cloud); font-weight: 700; text-decoration: none; }
.resource-action-primary:hover { background: var(--terracotta-dark); color: var(--paper); }
.resource-action-link { color: var(--terracotta-dark); font-weight: 700; }
.resource-detail-screenshot { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--cloud); }
.resource-detail-screenshot img { display: block; width: 100%; height: auto; aspect-ratio: 1.35; object-fit: cover; object-position: left center; }
.resource-detail-screenshot figcaption { margin: 0; padding: 9px 12px 11px; background: var(--plum); color: var(--cloud); font-size: var(--text-xs); line-height: 1.4; }
.resource-detail-section { display: grid; grid-template-columns: minmax(175px, .6fr) minmax(0, 1.4fr); gap: clamp(22px, 4vw, 48px); padding: 28px 0; border-bottom: 1px solid var(--line); }
.resource-detail-section h2,
.resource-detail-log h2 { margin: 0; font-size: var(--step-4); line-height: 1.15; }
.resource-detail-copy { max-width: var(--measure); font-size: var(--text-body); line-height: 1.65; }
.resource-detail-copy > :first-child { margin-top: 0; }
.resource-detail-copy > :last-child { margin-bottom: 0; }
.resource-detail-copy p { margin: 0 0 1em; }
.resource-detail-list,
.resource-detail-steps { margin: 0 0 1em; padding-left: 1.3em; }
.resource-detail-list li + li,
.resource-detail-steps li + li { margin-top: .42em; }
.resource-detail-note { padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }
.resource-detail-links { margin: 0; padding: 0; list-style: none; }
.resource-detail-links li { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.resource-detail-links li:first-child { padding-top: 0; }
.resource-detail-links li:last-child { padding-bottom: 0; border-bottom: 0; }
.resource-detail-links a { width: fit-content; color: var(--terracotta-dark); font-weight: 700; }
.resource-detail-links span { color: var(--muted); font-size: var(--text-sm); }
.resource-detail-log { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 24px; margin-top: 32px; padding: 24px 0 0; }
.resource-detail-log p { margin: 8px 0 0; color: var(--muted); }
.resource-detail-log > a { justify-self: end; color: var(--terracotta-dark); font-weight: 700; }

@media (max-width: 760px) {
  .resource-detail-hero { grid-template-columns: 1fr; gap: 26px; }
  .resource-detail-section { grid-template-columns: 1fr; gap: 10px; }
  .resource-detail-log { grid-template-columns: 1fr; gap: 12px; }
  .resource-detail-log > a { justify-self: start; }
}

.support-section { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(35px, 7vw, 88px); margin-bottom: 58px; padding: clamp(38px, 7vw, 78px); border-radius: 28px 28px 28px 7px; background: var(--plum); color: var(--cloud); }
.support-section h2 { max-width: 9ch; }
.support-copy { align-self: end; max-width: 38ch; }
.support-copy p { margin: 0 0 17px; }
.support-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--cloud); font-weight: 700; }
.kofi-mark { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.support-section a:hover { color: #ffe5d1; }
.support-link:hover { color: #ffe5d1; }

.site-footer { padding: 22px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }
.footer-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.site-footer a { min-height: 44px; }
.footer-disclosure { max-width: var(--measure); margin: 12px 0 0; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-right: clamp(60px, 9vw, 96px); }
.site-nav { display: flex; gap: 24px; margin-right: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--terracotta-dark); }
.site-nav a:hover { text-decoration-thickness: 2px; }
.site-nav a[aria-current] { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: .55em; }
.theme-toggle { display: none; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
html.theme-ready .theme-toggle { display: inline-flex; }
.theme-toggle:hover { border-color: var(--terracotta); background: var(--surface-raised); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle-moon { display: none; }
:root[data-theme="dark"] .theme-toggle-sun { display: none; }
:root[data-theme="dark"] .theme-toggle-moon { display: block; }

.home-workshop { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 24px 48px; align-items: center; margin: -34px 0 70px; padding: 20px 0 22px; border-block: 1px solid var(--line); }
.home-workshop-label { margin: 0 0 8px; color: var(--terracotta-dark); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.home-workshop h2 { margin: 0 0 8px; font-size: var(--step-4); line-height: 1.1; }
.home-workshop-heading > p:last-child { max-width: 62ch; margin: 0; color: var(--muted); }
.home-workshop-meta { display: grid; justify-items: start; gap: 7px; color: var(--muted); font-size: var(--text-sm); }
.home-project-status { color: var(--terracotta-dark); font-weight: 700; }
.home-workshop-meta a { color: var(--terracotta-dark); font-weight: 700; }

/* Homepage composition */
.home-page main { width: min(1280px, calc(100% - 44px)); }
.home-page .site-header, .home-page .site-footer { width: min(1280px, calc(100% - 44px)); }
.home-page .site-nav a[aria-current] { color: var(--terracotta-dark); }
.home-hero { position: relative; display: flex; align-items: center; min-height: 620px; margin: 0 0 22px; isolation: isolate; }
.home-hero-copy { position: relative; z-index: 1; width: min(44%, 590px); padding: 54px 0 42px 24px; }
.home-hero h1 { max-width: 13.5ch; margin: 0 0 23px; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: clamp(3.1rem, 5vw, 4.75rem); font-weight: 600; letter-spacing: -.04em; line-height: .98; }
.home-hero .hero-intro { max-width: 36ch; margin: 0 0 25px; font-size: var(--text-lead); line-height: 1.48; }
.home-hero-image { position: absolute; z-index: -1; inset: 0 0 0 42%; margin: 0; overflow: hidden; border-radius: 16px; }
.home-hero-image::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 76%, transparent) 5%, color-mix(in srgb, var(--paper) 18%, transparent) 14%, transparent 25%); content: ""; }
.home-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.home-hero-image figcaption { position: absolute; z-index: 2; right: 15px; bottom: 14px; padding: 4px 7px; border-radius: 4px; background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--ink); font-size: var(--text-2xs); opacity: .82; }
.home-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.home-action-primary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 10px 19px; border-radius: 999px; background: var(--terracotta); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.home-action-primary:hover { background: var(--action-hover-bg); color: var(--on-accent); }
.home-hero-actions .text-link { min-height: 44px; color: var(--ink); text-decoration-color: var(--terracotta); text-underline-offset: .45em; }
.home-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 580px; margin: 48px 0 0; padding: 0; list-style: none; }
.home-topics li { display: grid; align-content: start; gap: 4px; }
.topic-mark { display: flex; min-height: 38px; align-items: center; color: var(--topic); }
.topic-mark svg { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-topics strong { color: var(--topic); font-size: var(--text-2xs); letter-spacing: var(--label-tracking); text-transform: uppercase; }
.home-topics li > span:last-child { max-width: 19ch; color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }
.home-workshop { grid-template-columns: minmax(0, 1.15fr) minmax(240px, .95fr) minmax(190px, .6fr); gap: clamp(18px, 2.8vw, 38px); margin: 0 0 44px; padding: clamp(26px, 3.4vw, 42px); border: 1px solid color-mix(in srgb, var(--plum) 17%, transparent); border-radius: 18px; background: var(--surface-raised); box-shadow: 0 12px 34px color-mix(in srgb, var(--plum) 8%, transparent); }
.home-workshop-label { margin-bottom: 7px; }
.home-workshop h2 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -.04em; }
.home-workshop-heading > p:not(.home-workshop-label) { margin: 0 0 20px; font-size: var(--text-body); line-height: 1.48; }
.home-workshop-heading .home-action-primary { min-height: 44px; padding-inline: 16px; font-size: var(--text-sm); }
.home-workshop-image { display: block; min-width: 0; height: 280px; overflow: hidden; border-radius: 12px; }
.home-workshop-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.home-workshop-points { display: grid; align-content: center; gap: 14px; margin: 0; padding: 16px 0 16px 18px; border-radius: 12px; background: var(--surface); list-style: none; }
.home-workshop-points li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.home-workshop-points li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--point-bg); color: var(--point-ink); }
.home-workshop-points svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home-workshop-points strong { font-family: "Space Grotesk", sans-serif; font-size: var(--text-sm); }
.home-workshop-points p { margin: 2px 0 0; color: var(--muted); font-size: var(--text-2xs); line-height: 1.35; }
.home-discover { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .9fr); gap: clamp(24px, 4vw, 48px); padding: 28px 12px 54px; border-top: 1px solid var(--line); }
.home-discover .tools-section { min-width: 0; padding: 0; }
.home-discover .section-heading { align-items: baseline; padding: 0; border: 0; }
.home-discover .section-heading h2 { max-width: none; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: var(--step-5); }
.home-discover .section-heading p { font-size: var(--text-sm); }
.home-discover .section-heading > a { white-space: nowrap; font-size: var(--text-xs); }
.home-discover .resource-grid-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home-discover .resource-card { min-height: 132px; padding: 16px 4px; border: 0; border-radius: 0; border-top: 1px solid var(--line); background: transparent; }
.home-discover .resource-card:hover { border-color: var(--terracotta-dark); }
.home-discover .resource-card-title { font-size: 1rem; }
.home-discover .resource-card-description { font-size: var(--text-xs); }
.home-build-logs { min-width: 0; padding-left: clamp(18px, 3vw, 36px); border-left: 1px solid var(--line); }
.home-build-logs .section-heading { margin-bottom: 10px; }
.home-log-link { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); text-decoration: none; }
.home-log-link img { display: block; width: 82px; height: 72px; border-radius: 8px; object-fit: cover; }
.home-log-link strong { display: block; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: var(--text-sm); font-weight: 600; line-height: 1.2; }
.home-log-link small { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.3; }
.home-log-link:hover strong { color: var(--terracotta-dark); text-decoration: underline; text-underline-offset: .15em; }
.home-log-arrow { color: var(--terracotta-dark); }

.workshop main { padding-bottom: 70px; }
.workshop h1, .workshop h2, .workshop h3 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -.03em; }
.workshop-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(24px, 4vw, 48px); padding: clamp(28px, 5vw, 52px) 0 12px; }
.workshop-intro { padding-block: 12px; }
.workshop-hero h1 { max-width: 9ch; margin-bottom: 20px; font-size: var(--step-7); }
.workshop-hero .hero-intro { max-width: 48ch; margin: 0; }
.workshop-note { max-width: 28ch; margin: 22px 0 0; color: var(--terracotta-dark); font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: var(--text-lg); font-weight: 600; line-height: 1.35; }
.featured-project { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .42fr); min-height: 330px; overflow: hidden; border-radius: 14px; background: var(--plum); color: var(--cloud); }
.featured-project-copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 3vw, 30px); }
.featured-project-heading h2 { margin: 0 0 10px; font-size: var(--step-5); line-height: 1.05; }
.featured-project-heading h2 a { text-decoration: none; }
.featured-project-heading h2 a:hover { text-decoration: underline; text-underline-offset: .15em; }
.featured-project-heading > p { margin: 0; color: var(--cloud); font-size: var(--text-sm); }
.featured-project-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: auto; padding-top: 22px; }
.featured-project-details > div { min-width: 0; padding-top: 11px; border-top: 1px solid #ffffff55; }
.featured-project-details h3 { margin: 0 0 7px; color: var(--cloud); font-size: var(--text-2xs); letter-spacing: var(--label-tracking); text-transform: uppercase; }
.featured-project-details p { margin: 0; color: var(--cloud); font-size: var(--text-sm); line-height: 1.4; }
.featured-project-details .featured-project-updated, .featured-project-details .featured-project-note { margin-top: 6px; color: var(--cloud); font-size: var(--text-xs); opacity: .84; }
.featured-project .workshop-status { color: var(--cloud); }
.featured-project-link { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; min-height: 44px; margin-top: 18px; color: #ffd2bf; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-tracking); text-decoration: none; text-transform: uppercase; }
.featured-project-link:hover { color: var(--cloud); text-decoration: underline; text-underline-offset: .25em; }
.featured-project-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.featured-project-image { position: relative; min-width: 0; min-height: 100%; background: color-mix(in srgb, var(--plum) 75%, var(--ink)); }
.featured-project-image img { display: block; width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: left center; }
.workshop-section { margin-top: 48px; }
.workshop-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.workshop-section-heading h2, .workshop-related h2 { margin: 0; font-size: var(--step-5); }
.workshop-section-heading p { margin: 0; color: var(--muted); }
.workshop-section-heading > a { color: var(--terracotta-dark); font-weight: 700; }
.workshop-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.workshop-project-list, .workshop-activity-list, .workshop-guide-list { border-top: 1px solid var(--line); }
.workshop-project-link { display: flex; flex-direction: column; min-width: 0; min-height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--plum) 7%, var(--paper)); color: inherit; text-decoration: none; }
.workshop-project-grid .workshop-project-link { min-height: 270px; }
.workshop-project-visual { position: relative; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; background: radial-gradient(ellipse at 70% 35%, color-mix(in srgb, var(--terracotta) 20%, var(--paper)), transparent 48%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--plum) 6%, var(--paper)) 0 12px, color-mix(in srgb, var(--plum) 10%, var(--paper)) 12px 13px); }
.workshop-project-visual-contained { background: radial-gradient(ellipse at center, #353033, #171417 76%); }
.workshop-project-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.workshop-project-image-contain { object-fit: contain; }
.project-featured-image-contain { background: radial-gradient(ellipse at center, #353033, #171417 76%); }
.project-featured-image-contain img { object-fit: contain; }
.workshop-project-image-label { position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 9px; border: 1px solid rgb(255 255 255 / .28); border-radius: 999px; background: rgb(55 44 57 / .88); color: #fff; font-size: var(--text-2xs); font-weight: 700; line-height: 1.2; }
.workshop-project-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 16px; }
.workshop-project-title { display: block; margin: 9px 0 6px; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: var(--step-3); font-weight: 600; letter-spacing: -.025em; line-height: 1.14; }
.workshop-project-link .guide-card-desc { display: block; max-width: 50ch; margin: 0; color: var(--muted); }
.workshop-open { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 18px; color: var(--terracotta-dark); font-size: var(--text-xs); font-weight: 700; }
.workshop-project-link:hover .workshop-project-title, .workshop-activity-list a:hover span:nth-child(2), .workshop-guide-list a:hover span:first-child { text-decoration: underline; text-underline-offset: .16em; }
.workshop-project-link:hover { border-color: var(--terracotta-dark); }
.workshop-project-link:focus-visible { outline-offset: 4px; }
.workshop-project-list .workshop-project-link { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.workshop-project-list .workshop-project-copy { padding: 0; }
.workshop-project-list .workshop-project-title { margin: 7px 0 5px; font-size: var(--step-3); }
.workshop-project-list .workshop-open { width: auto; flex: none; margin: 0; padding: 0; }
.workshop-reference-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .95fr); gap: clamp(24px, 4vw, 42px); align-items: start; margin-top: 48px; }
.workshop-reference-grid .workshop-section { margin-top: 0; }
.workshop-reference-grid .workshop-section-heading h2 { font-size: var(--step-3); }
.workshop-reference-grid .workshop-section-heading > a { white-space: nowrap; }
.workshop-knowledge-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.workshop-knowledge-list li { min-width: 0; padding: 18px 22px 18px 0; }
.workshop-knowledge-list li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.workshop-knowledge-list h3 { margin: 0 0 7px; font-size: var(--text-lg); }
.workshop-knowledge-list a { font-weight: 700; text-decoration-thickness: 1px; }
.workshop-knowledge-list p { margin: 7px 0 0; color: var(--muted); font-size: var(--text-sm); }
.workshop-activity-list { margin-top: 0; padding-top: 8px; }
.workshop-activity-list a, .workshop-guide-list a { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 15px; align-items: center; min-height: 58px; padding-block: 6px; border-bottom: 1px solid var(--line); text-decoration: none; }
.workshop-activity-list time { color: var(--muted); font-size: var(--text-sm); }
.workshop-activity-list a span:nth-child(2), .workshop-guide-list a span:first-child { font-weight: 700; }
.activity-arrow { color: var(--terracotta-dark); }
.workshop-guide-list a { grid-template-columns: minmax(0, 1fr) auto; }
.workshop-status-building { color: var(--terracotta-dark); }
.workshop-status-testing { color: var(--warn); }
.workshop-status-working { color: var(--ok); }
.workshop-status-planning { color: var(--planning); }
.workshop-status-paused, .workshop-status-blocked, .workshop-status-abandoned, .workshop-status-complete, .workshop-status-converted, .workshop-status-retired { color: var(--muted); }
.workshop-status-troubleshooting { color: var(--bad); }
.workshop-status-experimental { color: var(--experimental); }
.workshop-status-operational { color: var(--ok); }
.workshop-project { max-width: 980px; margin: 0 auto; padding: 20px 0 30px; }
.workshop-project-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 24px 0 28px; border-bottom: 3px solid var(--terracotta); }
.workshop-project-header h1 { max-width: 17ch; margin: 12px 0; font-size: var(--step-7); line-height: 1; }
.workshop-project-header .guide-deck { max-width: 59ch; margin: 0; }
.workshop-project-meta { display: grid; justify-items: start; gap: 8px; flex: none; }
.workshop-updated { max-width: 18ch; margin: 0; color: var(--muted); font-size: var(--text-sm); }
.project-current { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, .35fr); gap: 24px; margin: 24px 0 36px; padding: 23px 26px; border-radius: 16px; background: var(--plum); color: var(--cloud); }
.project-current h2 { margin: 0 0 9px; font-size: 1.55rem; line-height: 1.15; }
.project-current p { max-width: 67ch; margin: 0; }
.project-next { display: grid; gap: 3px; margin-top: 17px !important; }
.project-current-phase { display: grid; align-content: start; gap: 5px; padding-left: 20px; border-left: 1px solid #ffffff55; }
.project-current-phase span { font-size: var(--text-xs); opacity: .82; }
.project-current-phase strong { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 1.2rem; line-height: 1.2; }
.project-featured-image { margin: 0 0 18px; overflow: hidden; border-radius: 12px; }
.project-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; }
.project-detail-grid > section { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.project-detail-problems { grid-column: 1 / -1; }
.project-detail-problems .project-plain-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px 24px; }
.project-detail-problems .project-plain-list li + li { margin-top: 0; }
.project-detail-grid h2, .workshop-related h2 { margin: 0 0 14px; font-size: 1.55rem; line-height: 1.15; }
.project-phase-list, .project-plain-list { margin: 0; padding: 0; list-style: none; }
.project-phase-list { display: grid; }
.project-phase { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 42px; padding-block: 5px; border-bottom: 1px solid var(--line); }
.phase-marker { width: 9px; height: 9px; border: 1px solid var(--muted); border-radius: 50%; }
.project-phase-done .phase-marker { background: var(--terracotta-dark); border-color: var(--terracotta-dark); }
.project-phase-current { font-weight: 700; }
.project-phase-current .phase-marker { width: 11px; height: 11px; border: 3px solid var(--terracotta-dark); }
.phase-current { color: var(--terracotta-dark); font-size: var(--text-xs); font-weight: 700; }
.project-plain-list { padding-left: 1.15em; list-style: disc; }
.project-plain-list li { padding-left: .2em; font-size: var(--text-body); line-height: 1.6; }
.project-plain-list li::marker { color: var(--terracotta-dark); }
.project-plain-list li + li { margin-top: 12px; }
.project-context { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid var(--line); }
.project-context .guide-body { max-width: 72ch; }
.project-context .guide-body p { margin-top: 0; }
.workshop-related { margin-top: 44px; }
.workshop-shelf details { padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; }
.workshop-shelf summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 1.2rem; font-weight: 600; }
.workshop-shelf summary span { color: var(--muted); font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif; font-size: var(--text-xs); font-weight: 400; }
.workshop-shelf details > p { margin: 12px 0 8px; color: var(--muted); }
.workshop-shelf ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.workshop-shelf li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; }

@media (max-width: 850px) {
  .workshop-hero { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .workshop-intro { padding-block: 0; }
  .workshop-hero h1 { max-width: 11ch; }
  .featured-project { grid-template-columns: minmax(0, 1fr) minmax(120px, .42fr); }
  .workshop-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-reference-grid { grid-template-columns: 1fr; gap: 32px; }
}
.build-log-project-link { margin: 0 0 18px; color: var(--muted); font-size: var(--text-sm); }
.build-log-project-link a { color: var(--terracotta-dark); font-weight: 700; }

/* Guides */
.guides main { padding-bottom: 56px; }
.guides h1, .guides h2, .guides h3 { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.03em; }
.guides-hero { padding: clamp(28px, 4vw, 48px) 0 32px; }
.guides-hero .hero-intro { max-width: 52ch; margin: 0; }
.guides-hero h1 { max-width: none; font-size: var(--step-8); }
.guides .section-label { margin: 0 0 18px; font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--muted); }
.guides main > section + section { margin-top: 40px; }
.guides main > .guides-hero + section { margin-top: 0; }

.guide-card, .featured-card, .topic-card { display: block; color: inherit; text-decoration: none; }
.featured-card { padding: clamp(24px, 4vw, 40px); border-radius: 22px 22px 22px 6px; background: var(--plum); color: var(--cloud); }
.featured-card h3 { max-width: 23ch; margin: 16px 0 14px; font-size: var(--step-5); line-height: 1.08; }
.featured-card .guide-card-desc { max-width: 60ch; margin: 0 0 14px; }
.featured-card:hover h3, .guide-card:hover h3 { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.guide-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: var(--text-sm); }
.guide-card-updated { margin: 0; font-size: var(--text-sm); opacity: .85; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.guide-card { padding: 22px; border: 1px solid var(--line); border-radius: 16px; }
.guide-card-with-image { overflow: hidden; padding: 0; }
.guide-card-image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--paper); }
.guide-card-content { padding: 20px 22px 22px; }
.guide-card h3 { margin: 6px 0 8px; font-size: 1.3rem; line-height: 1.15; }
.guide-card-desc { margin: 0 0 12px; color: var(--muted); }
.featured-card .guide-card-desc { color: inherit; opacity: .92; }
.guide-card:hover { border-color: var(--terracotta); }

.featured-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #ffffff35; }
.guide-read { font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.topic-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 28px; color: var(--terracotta-dark); }
.topic-group h3 { margin: 0 0 14px; font-size: 1.4rem; }
.topic-group + .topic-group { margin-top: 32px; }

.status { display: inline-block; padding: 1px 9px; border: 1px solid currentColor; border-radius: 99px; font-size: var(--text-xs); font-weight: 700; line-height: 1.5; }
.status-current { color: var(--ok); }
.status-aging { color: var(--warn); }
.status-legacy { color: var(--muted); }
.status-coming-soon { color: var(--warn); }
.project-state-in-use { color: var(--ok); }
.project-state-testing { color: var(--warn); }
.project-state-building { color: var(--terracotta-dark); }
.featured-card .status { color: var(--cloud); }
.status-note { color: var(--muted); font-size: var(--text-sm); }

.guide { max-width: 720px; margin: 0 auto; padding-top: 20px; }
.build-log { width: 100%; margin: 0; padding: 8px 0 64px; }
.article-type { margin: 0 0 12px; color: var(--terracotta-dark); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.crumbs { margin: 0 0 14px; color: var(--muted); font-size: var(--text-sm); }
.guide h1 { max-width: none; margin: 0 0 22px; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; }
.guide-deck { margin: 0 0 18px; color: var(--muted); font-size: var(--text-lead); line-height: 1.5; }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 22px; color: var(--muted); font-size: var(--text-sm); }
.guide-meta > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.guide-details { margin-bottom: 24px; border-block: 1px solid var(--line); }
.guide-details details + details { border-top: 1px solid var(--line); }
.guide-details summary { padding: 12px 0; cursor: pointer; font-weight: 700; }
.guide-details summary:hover { color: var(--terracotta-dark); }
.guide-details summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.guide-details ul { margin: 0 0 18px; padding-left: 22px; }
.guide-details li + li { margin-top: 8px; }
.guide-details p { margin: 0 0 12px; color: var(--muted); }
.guide-contents ul { columns: 2; column-gap: 32px; }
.guide-contents li { break-inside: avoid; }
.guide-contents a { display: inline-block; min-height: 24px; padding-block: 3px; }
.guides [id], .build-logs-site [id] { scroll-margin-top: 24px; }
.disclosure { margin: 0 0 24px; padding: 12px 14px; border-left: 3px solid var(--line); color: var(--muted); font-size: var(--text-sm); }

.callout { margin: 0 0 32px; padding: 22px 24px; border-radius: 16px; background: var(--inset-bg); border: 1px solid var(--line); }
.callout-tldr { border-left: 6px solid var(--terracotta); }
.callout-label { margin: 0 0 10px; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: var(--text-lg); }
.callout > :last-child { margin-bottom: 0; }
.callout ul { margin: 0; padding-left: 1.2em; }
.callout li + li { margin-top: 6px; }

.guide-body { font-size: var(--text-body); line-height: 1.65; }
.guide-body h2 { margin: 2.2em 0 .5em; font-size: var(--step-4); line-height: 1.15; }
.guide-body h3 { margin: 1.8em 0 .4em; font-size: 1.2rem; }
.guide-body p, .guide-body ul, .guide-body ol { margin: 0 0 1.1em; }
.guide-body li + li { margin-top: .35em; }
.guide-body code { padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 5px; background: var(--inset-bg); font-size: .9em; }
.guide-body pre { margin: 0 0 1.1em; padding: 14px 16px; overflow-x: auto; border-radius: 12px; background: var(--inset-bg); font-size: var(--text-xs); line-height: 1.5; }
.guide-body pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.guide-body > :is(p, ul, ol, blockquote) { max-width: var(--measure); }
.guide-body blockquote { margin: 0 0 1.1em; padding-left: 16px; border-left: 3px solid var(--line); color: var(--muted); }

.build-logs-site main { padding-bottom: 56px; }
.build-log-masthead { padding: 18px 0 28px; border-bottom: 3px solid var(--terracotta); }
.build-log-kicker { margin: 0 0 12px; color: var(--terracotta-dark); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.build-log-kicker span { padding-inline: 5px; color: var(--muted); }
.build-log-masthead h1 { max-width: 18ch; margin: 0 0 14px; font-size: var(--step-7); line-height: .98; }
.build-log-masthead .guide-deck { max-width: 58ch; margin: 0; }
.build-log-snapshot { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(0, 1.25fr); gap: 26px; align-items: start; margin: 0 0 28px; padding: 18px 0 24px; border-bottom: 1px solid var(--line); }
.build-log-checkpoint { padding-right: 22px; border-right: 1px solid var(--line); }
.build-log-side-label { margin: 0 0 9px; color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.build-log-status-note { margin: 10px 0 14px; font-weight: 700; }
.build-log-dates { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; color: var(--muted); font-size: var(--text-xs); }
.build-log-dates div { display: flex; gap: 5px; }
.build-log-dates dt { font-weight: 700; }
.build-log-dates dd { margin: 0; }
.build-log-current .callout-tldr { margin: 0; padding: 0 0 0 16px; border: 0; border-left: 3px solid var(--terracotta); border-radius: 0; background: transparent; }
.build-log-current .callout-label { margin: 0 0 6px; font-size: var(--text-xs); }
.build-log-current .callout > :last-child { margin-bottom: 0; }
.build-log-layout { display: block; }
.build-log-index { margin: 0 0 28px; padding: 0 0 12px; border-block: 1px solid var(--line); }
.build-log-index summary { padding: 12px 0 4px; color: var(--ink); cursor: pointer; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-weight: 700; }
.build-log-index summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.build-log-index nav ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 24px; margin: 14px 0 0; padding: 0; list-style: none; }
.build-log-index nav a { display: inline-block; min-height: 24px; padding-block: 3px; color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.build-log-index nav a:hover { color: var(--terracotta-dark); text-decoration: underline; }
.build-log-story { min-width: 0; }
.build-log-body { font-size: var(--text-body); line-height: 1.68; }
.build-log-body > :where(:not(.photo, .figure)), .build-log-update-content > :where(:not(.photo, .figure)) { max-width: 78ch; }
.build-log-body > :is(p, ul, ol, blockquote), .build-log-update-content > :is(p, ul, ol, blockquote) { max-width: var(--measure); }
.build-log-body > h2 { margin: 2.8em 0 .6em; padding-top: .7em; border-top: 1px solid var(--line); font-size: var(--step-4); line-height: 1.15; }
.build-log-body h3 { margin: 1.8em 0 .4em; font-size: 1.2rem; line-height: 1.25; }
.build-log-body p, .build-log-body ul, .build-log-body ol { margin: 0 0 1.1em; }
.build-log-body li + li { margin-top: .35em; }
.build-log-body code { padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 5px; background: var(--inset-bg); font-size: .9em; }
.build-log-update { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 22px; margin: 38px 0 46px; padding: 8px 0 32px; border-bottom: 1px solid var(--line); }
.build-log-update-stamp { padding-top: 7px; color: var(--terracotta-dark); font-size: var(--text-xs); font-weight: 700; line-height: 1.3; }
.build-log-update-stamp time { display: block; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 1rem; letter-spacing: -.02em; }
.build-log-update-stamp span { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-2xs); letter-spacing: var(--label-tracking); text-transform: uppercase; }
.build-log-update-content { min-width: 0; padding-left: 22px; border-left: 2px solid var(--terracotta); }
.build-log-update-content h3 { margin: 0 0 18px; font-size: var(--step-3); }
.build-log-update-content > :last-child { margin-bottom: 0; }
.build-log-body .photo { max-width: 100%; }
.build-log-body .photo img { border-radius: 10px; }
.build-log-body .figure { margin-block: 1.5em; }
.photo { margin: 0 0 1.6em; }
.photo img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.photo figcaption { margin-top: 8px; color: var(--muted); font-size: var(--text-sm); }
.guide-related { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }
.guide-related h2 { margin: 0 0 10px; font-size: 1.3rem; }
.guide-related ul { margin: 0; padding-left: 1.2em; }

/* Figures */
.guides, .build-logs-site { --fig-surface: var(--inset-bg); --fig-shadow: light-dark(rgba(55, 44, 57, .16), rgba(0, 0, 0, .4)); }
.figure { margin: 0 0 1.6em; padding: 22px 18px 16px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--fig-surface) 55%, transparent); }
.figure figcaption { margin-top: 12px; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.figure-svg { display: block; width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.fig-text { fill: var(--ink); font: 700 15px "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif; }
.fig-text-on-accent { fill: var(--paper); }
.fig-text-on-floor { fill: var(--cloud); }
.fig-shadow { fill: var(--fig-shadow); }
.fig-lip { fill: var(--terracotta-dark); }
.fig-tray { fill: var(--terracotta); }
.fig-desk { fill: var(--fig-surface); stroke: var(--line); stroke-width: 1.5; }
.fig-desk-edge { fill: var(--line); opacity: .55; }
.fig-leg { fill: var(--line); }
.fig-plastic { fill: var(--fig-surface); stroke: var(--terracotta); stroke-width: 1.5; stroke-dasharray: 6 3; }
.fig-plastic-2 { opacity: .92; }
.fig-floor { fill: var(--plum); stroke: var(--line); stroke-width: 1.5; }
.fig-floor-tex { fill: url(#fl-hatch); }
.fig-hatch { stroke: var(--cloud); stroke-width: 1.5; opacity: .14; }

.flow { display: flex; flex-wrap: wrap; gap: 12px 2px; margin: 0; padding: 0; list-style: none; }
.flow-step { display: flex; align-items: center; gap: 2px; }
.guide-body .flow { margin: 0; }
.guide-body .flow-step + .flow-step { margin-top: 0; }
.flow-card { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border: 1.5px solid var(--line); border-radius: 99px; background: var(--paper); box-shadow: 0 1px 0 var(--fig-shadow); }
.flow-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--line); color: var(--ink); font: 700 .8rem "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.flow-label { font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
.flow-tag { margin-left: 2px; padding: 0 8px; border-radius: 99px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; line-height: 1.6; }
.flow-dirty .flow-card { border-color: var(--terracotta); }
.flow-dirty .flow-num, .flow-dirty .flow-tag { background: var(--terracotta); color: var(--paper); }
.flow-clean .flow-card { border-color: var(--flow-clean); }
.flow-clean .flow-num, .flow-clean .flow-tag { background: var(--flow-clean); color: var(--flow-clean-ink); }
.flow-end .flow-card { border-color: var(--flow-end-border); background: var(--plum); color: var(--cloud); }
.flow-end .flow-num { background: var(--cloud); color: var(--plum); }
@media (max-width: 650px) { .flow-arrow { display: none; } .flow { gap: 10px 8px; } }
.flow-arrow { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Non-colour dark adjustments can't use light-dark(), so they are listed for both routes into dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-lockup { filter: brightness(0) invert(1); }
  :root:not([data-theme]) .brand-symbol-light { display: none; }
  :root:not([data-theme]) .brand-symbol-dark { display: block; }
  :root:not([data-theme]) .hero-mark { opacity: .92; }
}
:root[data-theme="dark"] .brand-lockup { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .hero-mark { opacity: .92; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 850px) {
  .site-header { display: grid; grid-template-columns: 1fr auto; }
  .site-header > .wordmark { grid-column: 1; grid-row: 1; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; margin-right: 58px; }
  .theme-toggle { grid-column: 2; grid-row: 1; justify-self: end; }
}
@media (max-width: 650px) {
  .guide-contents ul { columns: 1; }
  .build-log-snapshot { grid-template-columns: 1fr; gap: 16px; }
  .build-log-checkpoint { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .build-log-index { margin-bottom: 20px; }
  .build-log-update { grid-template-columns: 1fr; gap: 8px; margin: 30px 0 36px; }
  .build-log-update-stamp { display: flex; align-items: baseline; gap: 8px; padding: 0 0 0 14px; }
  .build-log-update-stamp span { margin: 0; }
  .build-log-update-content { padding-left: 14px; }
  .site-header, main, .site-footer { width: min(100% - 34px, 1010px); }
  .site-header { display: grid; grid-template-columns: 1fr; padding: 22px 0 14px; gap: 8px; }
  .theme-toggle { grid-column: 1; grid-row: auto; justify-self: start; }
  .site-nav { flex-wrap: wrap; gap: 8px 12px; margin-right: 58px; }
  .site-nav a { font-size: var(--text-xs); white-space: nowrap; }
  .github-corner { width: 62px; height: 62px; }
  .hero { display: block; padding: 58px 0 82px; }
  h1 { max-width: 11ch; font-size: clamp(2.85rem, 13.5vw, 4.5rem); }
  .hero-mark-picture { display: none; }
  .home-workshop { grid-template-columns: 1fr; gap: 14px; margin: 0 0 48px; padding-block: 18px; }
  .tools-section { padding-bottom: 44px; }
  .section-heading, .resource-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .resource-grid-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-card { min-height: 132px; padding: 14px; }
  .support-section { grid-template-columns: 1fr; gap: 32px; margin-bottom: 38px; padding: 38px 28px; border-radius: 24px 24px 24px 6px; }
  .footer-main { flex-direction: column; align-items: flex-start; gap: 7px; }
  .workshop-hero { display: grid; grid-template-columns: 1fr; padding-top: 24px; }
  .featured-project { grid-template-columns: 1fr; min-height: 0; }
  .featured-project-image { order: -1; height: 170px; }
  .featured-project-image img { min-height: 170px; }
  .featured-project-details { grid-template-columns: 1fr; gap: 13px; }
  .workshop-note { max-width: 30ch; margin-top: 20px; }
  .workshop-section { margin-top: 36px; }
  .workshop-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
  .workshop-project-link { align-items: flex-start; flex-direction: column; gap: 10px; }
  .workshop-project-copy { width: 100%; }
  .workshop-project-list .workshop-project-link { align-items: flex-start; flex-direction: row; gap: 10px; }
  .workshop-knowledge-list { grid-template-columns: 1fr; }
  .workshop-knowledge-list li, .workshop-knowledge-list li + li { padding: 15px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .workshop-activity-list a { grid-template-columns: 1fr auto; gap: 2px 12px; padding-block: 10px; }
  .workshop-activity-list time { grid-column: 1; }
  .workshop-activity-list a span:nth-child(2) { grid-column: 1; }
  .activity-arrow { grid-column: 2; grid-row: 1 / span 2; }
  .workshop-project-header { align-items: flex-start; flex-direction: column; }
  .workshop-updated { max-width: none; }
  .project-current { grid-template-columns: 1fr; padding: 20px; }
  .project-current-phase { padding: 15px 0 0; border-top: 1px solid #ffffff55; border-left: 0; }
  .project-detail-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-detail-grid > section { padding: 20px; }
  .project-context { grid-column: auto; }
  .workshop-shelf summary { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) {
  .resource-grid-featured { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .resources .resource-card-with-image { grid-column: 1 / -1; grid-template-columns: minmax(72px, .36fr) minmax(0, 1fr) auto; }
  .workshop-project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .home-hero { display: flex; min-height: 0; flex-direction: column; align-items: stretch; margin-bottom: 30px; }
  .home-hero-image { position: relative; inset: auto; order: -1; width: 100%; height: min(76vw, 390px); margin: 0 0 20px; border-radius: 12px; }
  .home-hero-image::before { background: linear-gradient(0deg, color-mix(in srgb, var(--paper) 40%, transparent), transparent 42%); }
  .home-hero-image img { object-position: 52% center; }
  .home-hero-copy { width: 100%; padding: 0 4px; }
  .home-hero .hero-intro { max-width: 48ch; }
}
@media (max-width: 1100px) {
  /* Below this width the status column is too narrow beside the photo, so it moves to its own row. */
  .home-workshop { grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr); }
  .home-workshop-points { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; }
}
@media (max-width: 900px) {
  .home-page main, .home-page .site-header, .home-page .site-footer { width: min(100% - 36px, 1280px); }
  .home-discover { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .9fr); gap: 22px; }
}
@media (max-width: 650px) {
  .home-page main, .home-page .site-header, .home-page .site-footer { width: min(100% - 34px, 1280px); }
  .home-hero h1 { max-width: 10ch; font-size: clamp(3rem, 12vw, 4.7rem); }
  /* On phones the headline and actions come first; the photo follows. */
  .home-hero-image { order: 1; height: min(58vw, 260px); margin: 28px 0 0; }
  .home-hero .hero-intro { max-width: 48ch; }
  .home-topics { gap: 10px; margin-top: 30px; }
  .home-topics li > span:last-child { font-size: var(--text-2xs); }
  .home-workshop { grid-template-columns: 1fr; gap: 17px; margin: 0 0 34px; padding: 20px; }
  .home-workshop-image { height: min(64vw, 300px); }
  .home-workshop-points { grid-column: auto; grid-template-columns: 1fr; }
  .home-discover { grid-template-columns: 1fr; gap: 26px; padding: 26px 4px 40px; }
  .home-build-logs { padding: 23px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 420px) {
  .home-page .site-header { gap: 12px; }
  .home-page .site-nav { gap: 6px 10px; margin-right: 42px; }
  .home-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-topics strong { font-size: var(--text-2xs); }
  .home-discover .resource-grid-featured { grid-template-columns: 1fr; }
  .home-discover .resource-card { min-height: auto; }
}

/* 404: Klipper shutdown console */
.not-found-page main { padding-bottom: 64px; }
.not-found { max-width: 760px; padding: clamp(28px, 6vw, 72px) 0 0; }
.not-found h1 { margin: 0 0 18px; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: var(--step-7); font-weight: 600; letter-spacing: -.04em; line-height: .98; }
.not-found-eyebrow { margin: 0 0 10px; color: var(--terracotta-dark); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.not-found .hero-intro { margin: 0 0 28px; }
.klipper-console { overflow: hidden; border: 1px solid #3b3340; border-radius: 12px; background: #1b1820; color: #e6e1ea; font: .9rem/1.5 var(--font-mono); box-shadow: 0 12px 34px color-mix(in srgb, var(--plum) 14%, transparent); }
.klipper-console-title { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 10px 16px; border-bottom: 1px solid #3b3340; background: #25212b; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--text-2xs); }
.klipper-state { padding: 2px 9px; border-radius: 999px; background: #5c1f22; color: #ffc9c4; }
.klipper-console-log { margin: 0; padding: 14px 16px; list-style: none; }
.klipper-console-log li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 3px 0; }
.klipper-console-log time { color: #9a90a3; font-variant-numeric: tabular-nums; }
.klipper-console-log time:empty { display: none; }
.klipper-console-log li:has(time:empty) { grid-template-columns: minmax(0, 1fr); }
.klipper-console-log span { overflow-wrap: anywhere; }
.klipper-error { color: #ff8f86; }
.klipper-macros { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid #3b3340; }
.klipper-macros a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #4a4152; border-radius: 6px; background: #2c2733; color: #e6e1ea; font-weight: 700; text-decoration: none; }
.klipper-macros a:hover { border-color: #ff9a75; color: #fff; }
.klipper-macros a:focus-visible { outline: 3px solid #82d6ff; outline-offset: 2px; }
.klipper-macros .klipper-restart { background: #a9503b; border-color: #a9503b; color: #fff; }
.klipper-macros .klipper-restart:hover { background: #913d2d; color: #fff; }
.klipper-macro-note { font-weight: 400; }

/* Project page photo: a landscape crop instead of a full-height portrait on desktop or a thin strip on phones. */
.project-featured-image { min-height: 0; }
.project-featured-image img { height: auto; min-height: 0; max-height: 560px; aspect-ratio: 4 / 3; object-position: center; }
@media (max-width: 650px) {
  .project-featured-image { height: auto; }
  .project-featured-image img { min-height: 0; }
  /* Two-row header: logo and theme toggle, then the nav links. */
  .site-header { grid-template-columns: 1fr auto; padding-right: 56px; row-gap: 4px; }
  .site-header > .wordmark { grid-column: 1; grid-row: 1; }
  .theme-toggle { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; gap: 4px 12px; margin-right: -56px; }
  .home-page .site-nav { gap: 4px 12px; margin-right: -56px; }
}
@media (max-width: 374px) {
  /* Logo and labelled toggle no longer fit beside the GitHub corner, so the toggle shows its icon only; aria-label keeps its name. */
  .theme-toggle { width: 44px; padding: 0; }
  .theme-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}