:root {
  --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0; --bs-border-radius-2xl: 0; --bs-border-radius-pill: 0;
  --ink: #1a1a1a; --paper: #f5f5f0; --paper-2: #ebebe5; --line: #d6d6cc; --muted: #555550;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--ink); --bs-body-bg: var(--paper); --bs-link-color-rgb: 26, 26, 26; --bs-link-hover-color-rgb: 0, 0, 0;
}
*, *::before, *::after { border-radius: 0 !important; }
html { scroll-padding-top: 4.5rem; }
body { background: var(--paper); }
a { text-underline-offset: 3px; }
.skip-link { position: absolute; z-index: 2000; background: #fff; color: var(--ink); padding: .5rem 1rem; }
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--paper); border-bottom: 1px solid var(--ink); }
.navbar-brand { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); display: flex; align-items: center; }
.brand-sub { font-family: var(--bs-body-font-family); font-size: .7rem; font-weight: 600; letter-spacing: .15em; margin-left: .4rem; border: 1px solid var(--ink); padding: 0 .3rem; }
.navbar .nav-link { color: var(--ink); font-weight: 500; font-size: .95rem; }
.navbar .nav-link:hover, .navbar .nav-link:focus { text-decoration: underline; }
.navbar-toggler { border-color: var(--ink); color: var(--ink); font-size: 1.4rem; }
.label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.label-light { color: #bdbdb4; }
.hero { padding: 5rem 0 4rem; border-bottom: 1px solid var(--line); }
.hero-title { font-family: var(--serif); font-weight: 400; font-size: calc(2.2rem + 3vw); line-height: 1.05; letter-spacing: -.02em; max-width: 18ch; }
.hero-title em { font-style: italic; }
.hero-lead { font-size: 1.15rem; color: #3a3a36; max-width: 34rem; }
.hero-figure { border: 1px solid var(--ink); background: #fff; box-shadow: 12px 12px 0 var(--ink); }
figcaption { font-size: .8rem; color: var(--muted); padding: .6rem 1rem; border-top: 1px solid var(--line); background: var(--paper); }
.btn-ink { --bs-btn-bg: var(--ink); --bs-btn-color: var(--paper); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: #000; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #000; font-weight: 500; }
.btn-outline-ink { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-color: var(--paper); --bs-btn-hover-border-color: var(--ink); font-weight: 500; }
.section { padding: 5rem 0; }
.section-alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-dark { background: var(--ink); color: #dcdcd4; }
.section-title { font-family: var(--serif); font-weight: 400; font-size: calc(1.8rem + 1.2vw); letter-spacing: -.01em; line-height: 1.1; }
.muted { color: var(--muted); }
.tour-note { max-width: 26rem; }
.sub { font-family: var(--serif); font-size: 1.35rem; margin-top: 1.5rem; }
.feature-list { border-top: 1px solid var(--ink); }
.feature-item { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.feature-item i { font-size: 1.4rem; }
.feature-item h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; margin-bottom: .3rem; }
.feature-item p { color: var(--muted); margin: 0; }
.shot { border: 1px solid var(--ink); background: #fff; }
code { color: var(--ink); background: var(--paper-2); padding: .05rem .3rem; font-size: .88em; }
.section-dark code { color: #f5f5f0; background: #2c2c2a; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3.5rem 1fr; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); font-size: 1.6rem; color: var(--ink); }
.update-note { margin-top: 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--ink); background: #fff; }
.dev { border: 1px solid #4a4a46; padding: 1.75rem; height: 100%; }
.dev h3 { font-family: var(--serif); font-size: 1.5rem; color: #fff; }
.code { background: #2c2c2a; padding: .9rem 1rem; color: #f5f5f0; }
.code code { background: none; padding: 0; }
.site-footer { border-top: 1px solid var(--ink); padding: 1.75rem 0; font-size: .95rem; }
.site-footer a { color: var(--ink); }
#hosting + .section { border-top: 1px solid var(--line); }
.provider-list { border-top: 1px solid var(--ink); }
.provider { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.provider-name { font-family: var(--serif); font-size: 1.6rem; }
.provider-cta { font-weight: 500; font-size: .95rem; text-decoration: underline; white-space: nowrap; }
.provider:hover .provider-name, .provider:focus .provider-name { font-style: italic; }
