/* Skiplog brand tokens (generated) */
:root {
  --bg: #faf8f5;
  --surface: #f2ede6;
  --raise: #e9e2d8;
  --fg: #1c1814;
  --fg-soft: #4a4038;
  --muted: #8a7e72;
  --line: #d6cfc5;
  --accent: #d4500a;
  --accent-ink: #ffffff;
  --accent-1: #fde3d4;
  --accent-2: #f5a97a;
  --accent-3: #e5712b;
  --accent-4: #d4500a;
  --accent-5: #8c3005;
}

[data-theme="dark"] {
  --bg: #181410;
  --surface: #231f1a;
  --raise: #2e2921;
  --fg: #f5f0ea;
  --fg-soft: #c8bfb4;
  --muted: #7a6e65;
  --line: #3d3630;
  --accent: #e5712b;
  --accent-ink: #1c1814;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181410;
    --surface: #231f1a;
    --raise: #2e2921;
    --fg: #f5f0ea;
    --fg-soft: #c8bfb4;
    --muted: #7a6e65;
    --line: #3d3630;
    --accent: #e5712b;
    --accent-ink: #1c1814;
  }
}

:root {
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space: 1rem;
  --measure: 68ch;
  --radius: 12px;
  --h1-size: clamp(2.5rem, 5.5vw, 4rem);
  --h1-lh: 1.05;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
img, svg, video { max-width: 100%; height: auto; }

/* footer site map: its own container, an even column grid, headings on one baseline */
.footer-map { width: min(100% - 2rem, 72rem); margin-inline: auto; display: grid; align-items: start; gap: calc(var(--space) * 1.5); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.footer-map > * { min-width: 0; }
.footer-map ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.footer-map .more { margin-top: 0.3rem; }
.footer-map .more a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; }

/* the site map page: an index of the site, in columns */
.sitemap { padding-block: calc(var(--space) * 2) calc(var(--space) * 3); }
.sitemap .related { margin: 0; padding-block: calc(var(--space) * 1.5); }
.sitemap .related h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.sitemap .post-list { gap: 0.4rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sitemap .post-list li { gap: 0.1rem; padding-bottom: 0; border-bottom: 0; }
.sitemap .post-list a { font-family: var(--font-body); font-size: 1rem; font-weight: 500; }

/* the header's menu panels */
.navmenu { left: -0.75rem; min-width: 17rem; max-width: calc(100vw - 2rem); display: grid; gap: 0.15rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 32px -16px rgb(0 0 0 / 0.3); }
.navmenu a { padding: 0.45rem 0.6rem; border-radius: 6px; }
.navmenu a:hover { background: var(--raise); }
/* the last entry of a shortened menu: the way to the rest, on the site map */
.navmenu a.more { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; padding-top: 0.55rem; border-top: 1px solid var(--line); }
/* Inside the open phone drawer a menu flows in place of floating. */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { box-shadow: none; border: none; background: transparent; padding: 0 0 0 0.85rem; }
}

/* the phone menu trigger: a control a visitor can see is tappable */
.nav-toggle > summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.4rem 0.75rem; cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-display); font-size: 0.95rem; line-height: 1; }
.nav-toggle > summary:hover, .nav-toggle[open] > summary { border-color: currentColor; }

/* icons (Phase D2 increment H) */
.icon { display: inline-block; width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }
.glyph .icon { display: block; width: 1.25rem; height: 1.25rem; }
.block h2 .icon { width: 0.8em; height: 0.8em; margin-right: 0.4em; vertical-align: -0.08em; color: var(--accent); }

/* engine: a .block is one block inside a page, never a band of the page */
.block { padding-block: 0; }
.block + .block { border-top: 0; }
.block:first-child { margin-top: 0; }

/* engine: what a product capture is, said beside it */
.shot-note { font-size: 0.85rem; line-height: 1.45; margin: var(--space) 0 0; }

/* engine: the product's state, said in the hero over the plan's own pitch */
.hero .state-note { font-size: 0.95rem; line-height: 1.5; margin: var(--space) 0; max-width: 46ch; }

/* engine: what the plan's feature cards are, said over a band with no head */
.spotlights > .wrap > .scope-note { font-size: 0.85rem; line-height: 1.45; margin: 0 0 calc(var(--space) * -2); }

/* Skiplog: the venture's own theme (contract rev 3) */
/* ============================================================
   Skiplog — "gate signage" theme
   Flat painted plates, heavy rules, stencilled mono labels.
   Signature: the bolted plate — an orange tab sitting across
   each section's top rule.
   ============================================================ */

:root {
  /* theme-added colours (each defined for dark below) */
  --t-soft: #695f53;          /* AA muted text on bg + surface   */
  --t-accent-text: #ad3f04;   /* AA accent text on bg + surface  */
  --t-btn-bg: #bc4507;        /* plate / primary button          */
  --t-btn-hov: #a03a04;
  --t-btn-ink: #ffffff;
  --t-bar-bg: #221c16;        /* frame chrome, pre blocks        */
  --t-bar-ink: #cfc4b6;
  --t-foot-bg: #1c1814;
  --t-foot-ink: #f5f0ea;
  --t-foot-soft: #b3a698;
  --t-card: #f2ede6;        /* card plate fill                 */
  --t-card-wash: #faf8f5;   /* card plate fill on wash         */

  /* one shared left margin for every bolted plate:
     the offset between the wrap's content edge and the narrow's */
  --t-stretch: calc((min(100vw - 48px, 1132px) - min(100vw - 48px, 688px)) / 2);

  --radius: 0;
  --measure: 46rem;
  --h1-size: clamp(2.5rem, 5.4vw, 4.1rem);
  --h1-lh: 1.03;
}

[data-theme="dark"] {
  --t-soft: #a89b8e;
  --t-accent-text: var(--accent);
  --t-btn-bg: var(--accent);
  --t-btn-hov: #f08a4a;
  --t-btn-ink: #201408;
  --t-bar-bg: #0f0c09;
  --t-bar-ink: #b3a698;
  --t-foot-bg: #100d0a;
  --t-foot-ink: #f5f0ea;
  --t-foot-soft: #b3a698;
  --t-card: #2a241e;
  --t-card-wash: #2e2721;
}

/* ---------- base ---------- */

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body > main { flex: 1 0 auto; }
.site-header, .site-footer { flex-shrink: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  font-weight: 700;
}

h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.35rem); line-height: 1.08; }
h3 { font-size: 1.2rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--t-accent-text); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--t-accent-text);
  outline-offset: 2px;
}

::selection { background: var(--t-btn-bg); color: var(--t-btn-ink); }

.mono { font-family: var(--font-mono); }
.muted { color: var(--t-soft); }

img { max-width: 100%; height: auto; }

/* ---------- layout helpers ---------- */

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

.narrow {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 24px;
}

.grid { display: grid; gap: 1.4rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

main > section, main section.cta { padding: 4.25rem 0; }
main > section + section { padding-top: 0.5rem; }
main > section.wash, main section.cta.wash { padding: 4.25rem 0; }

.wash { background: var(--surface); }

/* ---------- eyebrows and the bolted plate ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-accent-text);
  margin: 0 0 0.8rem;
}

/* the signature plate: an orange tab bolted across the section rule */
.section-head {
  position: relative;
  box-sizing: border-box;
  border-top: 3px solid var(--fg);
  padding-top: 2rem;
  margin-bottom: 2.4rem;
}

.section-head .eyebrow,
.page-head .eyebrow,
.hero .eyebrow {
  display: inline-block;
  background: var(--t-btn-bg);
  color: var(--t-btn-ink);
  padding: 0.32rem 0.7rem;
  margin: 0;
  letter-spacing: 0.18em;
}

.section-head .eyebrow {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
}

.section-head h2 { max-width: 30ch; margin-bottom: 0.35em; }
.section-head p.muted { color: var(--t-soft); max-width: 52ch; margin: 0; }

/* keep every plate and its rule on the wrap's left margin, even
   inside the reading column: stretch the rule, indent the words */
.narrow > .section-head {
  margin-inline: calc(-1 * var(--t-stretch));
  padding-inline: var(--t-stretch);
}

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0 1.35rem;
  border: 2px solid transparent;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
}

.button.primary {
  background: var(--t-btn-bg);
  color: var(--t-btn-ink);
  border-color: var(--t-btn-bg);
}
.button.primary:hover { background: var(--t-btn-hov); border-color: var(--t-btn-hov); }

.button.secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
.button.secondary:hover { background: var(--fg); color: var(--bg); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

/* ---------- header: centered signboard ---------- */

.site-header {
  background: var(--bg);
  border-bottom: 3px solid var(--fg);
}

.site-header .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.brand svg.mark { width: 36px; height: 36px; display: block; }

.brand .logotype {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--fg);
  line-height: 1;
}

.site-header .nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 1.7rem;
  border-top: 1px solid var(--line);
  padding: 0.75rem 0 0.95rem;
}

.site-header .nav a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  padding: 0.35rem 0;
}
.site-header .nav a:hover { color: var(--t-accent-text); text-decoration: underline; text-underline-offset: 0.3em; }

.site-header .nav a.cta {
  background: var(--t-btn-bg);
  color: var(--t-btn-ink);
  padding: 0.5rem 0.9rem;
  margin-left: 0.5rem;
}
.site-header .nav a.cta:hover { background: var(--t-btn-hov); color: var(--t-btn-ink); text-decoration: none; }

/* navgroup menus, if the site grows them */
.navgroup { position: relative; }
.navgroup > button {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0.35rem 0;
  cursor: pointer;
}
.navmenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 14rem;
  background: var(--bg);
  border: 2px solid var(--fg);
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
}
.navmenu a { padding: 0.45rem 1rem !important; }

/* ---------- hero: product first (split_reverse) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 3px solid var(--fg);
  padding: 0 !important;
}

.hero svg.motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}

.hero .eyebrow { margin-bottom: 1.3rem; }
.hero h1 { margin-bottom: 0.5em; max-width: 16ch; }

.hero .lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--t-soft);
  max-width: 46ch;
  margin-bottom: 1.8rem;
}

@media (min-width: 900px) {
  .hero.with-media .wrap { grid-template-columns: 1fr 1.02fr; gap: 3.5rem; align-items: center; }
  /* reversed split: the product screen leads, the words answer */
  .hero.with-media .wrap > div:first-child { order: 2; }
  .hero.with-media .hero-media { order: 1; }
}

/* keep the hero frame on the text column's optical centre line */
.hero .hero-media figure.frame {
  max-height: 620px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}
.hero .hero-media figure.frame img {
  width: 100%;
  max-height: 578px;
  object-fit: cover;
  object-position: top center;
}
/* dissolve the cropped bottom edge into the page's own ground, at
   the same stops in both schemes, reaching full page colour before
   the frame edge so no lighter band is left inside the frame */
.hero .hero-media figure.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, var(--bg) 96%, var(--bg) 100%);
  pointer-events: none;
}
/* in dark mode a transparent-to-dark fade over the light capture
   reads as a grey wash, so the plate ends on its rule instead */
[data-theme="dark"] .hero .hero-media figure.frame::after { content: none; }

/* ---------- framed screenshots: site tablet ---------- */

figure.frame {
  margin: 0;
  border: 2px solid var(--fg);
  background: var(--t-bar-bg);
}

figure.frame .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--t-bar-bg);
}

figure.frame .bar i {
  width: 8px;
  height: 8px;
  background: var(--accent);
  display: block;
}
figure.frame .bar i:nth-child(2) { opacity: 0.55; }
figure.frame .bar i:nth-child(3) { opacity: 0.3; }

figure.frame .bar::after {
  content: "skiplog / on site";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-bar-ink);
}

figure.frame img { display: block; width: 100%; height: auto; }

/* ---------- home sections ---------- */

.problem p {
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0;
}

/* cards: sign plates with a heavy top band */
.card {
  background: var(--t-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--fg);
  border-radius: 0;
  padding: 1.5rem 1.4rem 1.25rem;
}
.wash .card { background: var(--t-card-wash); }

.card h3 { margin-bottom: 0.45em; }
.card p { margin: 0; color: var(--t-soft); font-size: 0.98rem; }
.card p.eyebrow { color: var(--t-accent-text); font-size: 0.72rem; margin-bottom: 0.7rem; }

.card .glyph {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  background: var(--fg);
  color: var(--bg);
  padding: 0.28rem 0.55rem;
  margin-bottom: 1rem;
}

/* spotlights */
.spotlight {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.spotlight h2 {
  border-top: 3px solid var(--fg);
  padding-top: 1rem;
  max-width: 22ch;
}
.spotlight .muted { color: var(--t-soft); max-width: 48ch; }

@media (min-width: 900px) {
  .spotlight { grid-template-columns: 1fr 1.15fr; gap: 3.5rem; }
  .spotlight.flip figure.frame { order: -1; }
}

/* how it works: stencilled step numbers */
ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

ol.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 1.3rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
ol.steps li:last-child { border-bottom: 1px solid var(--line); }

ol.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--fg);
  color: var(--bg);
  width: 2.7rem;
  height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

ol.steps h3 { margin-bottom: 0.3em; }
ol.steps p { margin: 0; color: var(--t-soft); }

/* gallery */
.gallery .shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
}

/* faq */
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  padding: 1.05rem 2.2rem 1.05rem 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--t-accent-text);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--t-accent-text); }

.faq details p {
  margin: 0;
  padding: 0 0 1.2rem;
  color: var(--t-soft);
  max-width: 60ch;
}

/* ---------- capture / waitlist panel ---------- */

.cta.wash { border-top: 3px solid var(--fg); }

.capture {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--fg);
  padding: 2.6rem 2.4rem 2rem;
  margin-top: 0.8rem;
}

.capture::before {
  content: "Waitlist \00b7 deadline Oct 2026";
  position: absolute;
  top: 0;
  left: 1.4rem;
  transform: translateY(-50%);
  background: var(--t-btn-bg);
  color: var(--t-btn-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
}

.capture h2 { max-width: 24ch; }
.capture .muted { color: var(--t-soft); max-width: 54ch; }

.capture form {
  display: flex;
  gap: 0.8rem;
  margin: 1.6rem 0 0.9rem;
}

.capture input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 2px solid var(--fg);
  border-radius: 0;
  padding: 0.8rem 0.9rem;
}
.capture input[type="email"]::placeholder { color: var(--t-soft); opacity: 1; }
.capture input[type="email"]:focus-visible { outline-offset: 0; }

.capture .note { font-size: 0.88rem; color: var(--t-soft); margin: 0; }
.capture .thanks {
  border: 2px solid var(--t-btn-bg);
  padding: 1rem 1.2rem;
  font-weight: 600;
  margin: 1.6rem 0 0.9rem;
}

/* ---------- indexes and post lists ---------- */

ul.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--fg);
}

ul.post-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1.6rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

ul.post-list a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.16rem;
  color: var(--fg);
  text-decoration: none;
}
ul.post-list a:hover { color: var(--t-accent-text); text-decoration: underline; }

ul.post-list .meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--t-soft);
  white-space: nowrap;
}

ul.post-list p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--t-soft);
  font-size: 0.95rem;
  max-width: 62ch;
}

p.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-top: 2rem;
}

/* ---------- spec page heads and content pages ---------- */

.page-head {
  border-bottom: 3px solid var(--fg);
  padding: 3.2rem 0 2.6rem !important;
  background: var(--bg);
}

p.crumbs {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-soft);
  margin-bottom: 1.6rem;
}
p.crumbs a { color: var(--t-soft); }
p.crumbs a:hover { color: var(--t-accent-text); }

.page-head .eyebrow { margin-bottom: 1.1rem; }
.page-head h1 { font-size: clamp(2.2rem, 4.5vw, 3.3rem); }

p.lead {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--t-soft);
  max-width: 52ch;
}

/* carry the bolted plate into the left gutter on the pages whose
   whole body is one narrow column (the indexes, the site map, the
   404 and the questions page): the head's own label sits across
   its bottom rule at the wrap's left edge, as the home plates do,
   so the indented column under it reads as the site's rhythm */
section.page-head:has(+ section.page-body),
main[data-kind="faq"] section.page-head {
  position: relative;
}
section.page-head:has(+ section.page-body) .eyebrow,
main[data-kind="faq"] section.page-head .eyebrow {
  position: absolute;
  bottom: 0;
  left: calc((100% - min(100% - 48px, 1132px)) / 2);
  transform: translateY(50%);
  margin: 0;
  z-index: 1;
}

article.page, main > article { display: block; padding: 3.2rem 0 4.5rem; }
main article + section.cta { margin-top: 1rem; }

article.page h1, main > article h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }

section.block { margin: 3rem 0 0; }
section.block > h2, .related > h2 {
  border-top: 3px solid var(--fg);
  padding-top: 1rem;
  font-size: 1.55rem;
}

/* callout: painted keyline */
aside.block.callout, aside.callout {
  border: 1px solid var(--line);
  border-left: 6px solid var(--t-btn-bg);
  background: var(--t-card);
  padding: 1.6rem 1.8rem 1.2rem;
  margin: 3rem 0 0;
}
aside.callout h2 { border: 0; padding-top: 0; font-size: 1.3rem; }
aside.callout .prose p:last-child { margin-bottom: 0; }

/* plan cards */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 1.4rem;
  margin-top: 1.6rem;
}

.plan-cards .card {
  display: flex;
  flex-direction: column;
}

.plan-cards .card h3 { font-size: 1.25rem; margin-bottom: 0.4em; }

/* the price leads, in the display face */
.plan-cards .card p.price {
  order: -1;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.7rem;
}

/* every plan card closes with the same painted call to action,
   pointing at the waitlist form directly below */
.plan-cards .card > :last-child { margin-bottom: 1.4rem; }
.plan-cards .card::after {
  content: "\2193 \00a0Join the waitlist";
  margin-top: auto;
  align-self: flex-start;
  border: 2px solid var(--fg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
}
.plan-cards .card p.meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-soft);
}
.plan-cards .card ul.includes {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.plan-cards .card ul.includes li {
  padding: 0.45rem 0 0.45rem 1.4rem;
  border-top: 1px solid var(--line);
  position: relative;
  color: var(--fg);
  font-size: 0.95rem;
}
.plan-cards .card ul.includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 8px;
  height: 8px;
  background: var(--t-btn-bg);
}

/* benefits */
.benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 1.4rem; }

/* tables */
.table-wrap { overflow-x: auto; margin-top: 1.4rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  margin: 1.4rem 0;
}

/* a table closes itself; the next paragraph stands clear of it */
tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.prose table + p, table + p { margin-top: 2rem; }

th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--fg);
  border-bottom: 3px solid var(--fg);
  padding: 0.6rem 0.8rem 0.6rem 0;
}

td {
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.8rem 0.65rem 0;
  vertical-align: top;
}

tbody tr td:first-child { font-weight: 600; }

/* page hero shot */
.page-hero { margin: 2rem 0 0; }

/* sources */
.sources { margin-top: 3rem; }
.sources ul, .sources ol { padding-left: 1.2rem; }
.sources li { font-size: 0.92rem; color: var(--t-soft); margin-bottom: 0.4rem; }

/* ---------- articles ---------- */

p.byline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-soft);
  border-bottom: 3px solid var(--fg);
  padding-bottom: 1.4rem;
  margin-bottom: 2.2rem;
}

figure.cover { margin: 0 0 2.2rem; }
figure.cover img { display: block; width: 100%; border: 2px solid var(--fg); }

.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.15em; }
.prose h2 {
  font-size: 1.55rem;
  border-top: 3px solid var(--fg);
  padding-top: 1rem;
  margin-top: 2.2em;
}
.prose h3 { font-size: 1.2rem; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--t-accent-text); font-family: var(--font-mono); }

.prose blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.3rem;
  border-left: 6px solid var(--t-btn-bg);
  color: var(--t-soft);
}
.prose blockquote p { margin: 0; font-size: 1.1rem; }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.1em 0.35em;
}

pre {
  background: var(--t-bar-bg);
  color: var(--t-foot-ink);
  border: 2px solid var(--fg);
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  margin: 1.6em 0;
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 0.88rem; }

/* ---------- footer: painted baseboard ---------- */

.site-footer {
  background: var(--t-foot-bg);
  color: var(--t-foot-ink);
  border-top: 4px solid var(--accent);
  margin-top: 0;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.2rem;
  padding-top: 2.2rem;
  padding-bottom: 2.2rem;
}

.site-footer strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.site-footer .muted { color: var(--t-foot-soft); font-size: 0.92rem; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.site-footer nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-foot-ink);
  text-decoration: none;
}
.site-footer nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.3em; }

.site-footer a.stamp {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--t-foot-soft);
  font-size: 0.85rem;
  text-decoration: none;
}
.site-footer a.stamp:hover { color: var(--t-foot-ink); text-decoration: underline; }
.site-footer a.stamp img { display: block; }

.footer-map {
  background: var(--t-foot-bg);
  color: var(--t-foot-ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem;
  max-width: 1180px;
  margin-inline: auto;
  padding: 2.6rem 24px 0.6rem;
}
.footer-map a { color: var(--t-foot-soft); text-decoration: none; display: block; padding: 0.2rem 0; font-size: 0.92rem; }
.footer-map a:hover { color: var(--t-foot-ink); text-decoration: underline; }

/* ---------- not found ---------- */

body[data-kind="not_found"] main { padding: 5rem 0 6rem; }
body[data-kind="not_found"] h1 { font-size: clamp(2.6rem, 6vw, 4rem); }

/* ---------- subscribed / unsubscribed / privacy ---------- */

body[data-kind="subscribed"] main,
body[data-kind="unsubscribed"] main { padding: 4rem 0 5rem; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  a, .button, .site-header .nav a, summary { transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease; }
}

/* ---------- 900px and down ---------- */

@media (max-width: 899px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 2.8rem; padding-bottom: 3.2rem; }
  .hero h1 { max-width: none; }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .plan-cards { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
}

/* ---------- phone, 390 ---------- */

@media (max-width: 640px) {
  body { font-size: 1rem; }

  .site-header .wrap { padding-top: 1.2rem; gap: 0.8rem; }
  .brand .logotype { font-size: 1.55rem; }
  .brand svg.mark { width: 30px; height: 30px; }
  .site-header .nav { gap: 0.4rem 1.25rem; padding: 0.7rem 0 0.9rem; }
  .site-header .nav a { font-size: 0.72rem; letter-spacing: 0.1em; }
  /* the waitlist plate takes its own full-width row */
  .site-header .nav a.cta {
    flex-basis: 100%;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    margin: 0.75rem 0 0;
    padding: 0.7rem 0.9rem;
  }

  h1, .hero h1 { font-size: 2.35rem; }
  .hero .lead { font-size: 1.05rem; }

  main > section, main section.cta.wash { padding: 3rem 0; }

  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .gallery .shots { grid-template-columns: 1fr; gap: 1.3rem; }

  .section-head { margin-bottom: 1.8rem; }
  /* a section head can be a full sentence: size it to the window so
     it wraps inside the 24px gutters, and break long tokens */
  .section-head h2 { font-size: clamp(1.4rem, 7vw, 1.75rem); line-height: 1.15; }
  h1, h2 { overflow-wrap: break-word; hyphens: auto; }
  /* the plate stretch is zero here; pin it so no head carries a
     negative margin or a width wider than its container */
  .narrow > .section-head { margin-inline: 0; padding-inline: 0; }
  .section-head .eyebrow, .capture::before { font-size: 0.65rem; letter-spacing: 0.12em; }

  .capture { padding: 2.1rem 1.3rem 1.5rem; }
  .capture form { flex-direction: column; }
  .capture .button { width: 100%; text-align: center; }

  ol.steps li { grid-template-columns: 2.2rem 1fr; gap: 1rem; }
  ol.steps li::before { width: 2.2rem; height: 2.2rem; font-size: 0.75rem; }

  ul.post-list li { grid-template-columns: 1fr; }
  ul.post-list .meta { order: -1; }

  .site-footer .wrap { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .site-footer a.stamp { margin-left: 0; }

  article.page, main > article { padding: 2.4rem 0 3.4rem; }
  .page-head { padding: 2.4rem 0 2rem !important; }
}

.capture .hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.hidden, [hidden] { display: none !important; }
.nav-toggle summary { cursor: pointer; list-style: none; }
.nav-toggle summary::-webkit-details-marker { display: none; }
@media (min-width: 721px) {
  .nav-toggle { display: none !important; }
}
@media (max-width: 720px) {
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: block !important; }
  .nav { display: flex !important; flex-wrap: wrap; align-items: center; }
  .nav-toggle:not([open]) + .nav > a:not(.cta),
  .nav-toggle:not([open]) + .nav > details { display: none !important; }
  .nav-toggle[open] + .nav { flex-basis: 100% !important; width: 100%; flex-direction: column; align-items: stretch; }
}

/* a phone app's screenshot: a phone, never a browser window */
figure.frame.phone { display: block !important; box-sizing: border-box !important; width: min(18.5rem, calc(80vh * var(--frame-ratio, 390 / 844))) !important; max-width: 100% !important; min-width: 0 !important; flex: 0 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; align-self: start !important; margin-inline: auto !important; padding: 0.5rem !important; border-radius: min(2.5rem, 13%) / min(2.5rem, calc(13% * var(--frame-ratio, 390 / 844))) !important; overflow: hidden !important; }
figure.frame.phone::before, figure.frame.phone::after { content: none !important; display: none !important; }
figure.frame.phone > img { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: var(--frame-ratio, 390 / 844) !important; object-fit: cover !important; object-position: top center !important; margin: 0 !important; border-radius: min(2rem, 11%) / min(2rem, calc(11% * var(--frame-ratio, 390 / 844))) !important; }
.shots:has(> figure.frame.phone):not(:has(> figure.frame:not(.phone))) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)) !important; }
@supports (width: 1svh) { figure.frame.phone { width: min(18.5rem, calc(80svh * var(--frame-ratio, 390 / 844))) !important; } }

/* the header's menu labels */
.navgroup > summary { cursor: pointer; list-style: none; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary > .chevron { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.3em; vertical-align: -0.04em; opacity: 0.7; transition: transform 120ms ease-out; }
.navgroup[open] > summary > .chevron { transform: rotate(180deg); }
/* the phone menu trigger's mark: the bars while it is shut, the cross while it is open */
.nav-toggle > summary > .burger { display: inline-block; flex: none; width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.nav-toggle:not([open]) > summary > .burger > .cross { display: none; }
.nav-toggle[open] > summary > .burger > .bars { display: none; }

/* engine: a header menu opens as an overlay anchored under its own trigger, so the bar keeps its single row */
.navgroup { position: relative; }
.navmenu { position: absolute; top: calc(100% + 0.4rem); z-index: 20; }
header.site-header .wrap, header.site-header .nav, header.site-header .navgroup { overflow: visible; }
/* the phone drawer is not a bar: inside it an open menu flows in place */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { position: static !important; min-width: 0; }
}

/* engine: an open header menu is never taller than the window it opens in */
.navmenu { max-height: calc(100vh - 8rem); }
.navmenu { max-height: min(32rem, calc(100svh - 8rem)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { max-height: none !important; overflow: visible !important; }
}

/* engine: the header's bar holds one row at desktop width, whatever a theme sets on it */
@media (min-width: 721px) {
  header.site-header .wrap { display: flex; flex-direction: row; flex-wrap: nowrap; }
  header.site-header nav.nav { display: flex; flex-direction: row; flex-wrap: nowrap; }
  header.site-header .wrap > .brand, header.site-header .wrap > nav.nav { flex-shrink: 1; }
  header.site-header .nav { min-width: 0; column-gap: clamp(0.5rem, 1.1vw, 1.25rem); }
  header.site-header .nav > a, header.site-header .nav > details > summary { white-space: nowrap; }
  :is(header.site-header nav.nav > a:not(.cta), header.site-header nav.nav > details > summary) { padding-inline: clamp(0.3rem, 0.8vw, 0.9rem); }
  :is(header.site-header nav.nav > a:not(.cta), header.site-header nav.nav > details, header.site-header nav.nav > details > summary, header.site-header nav.nav > details > summary > .navlabel) { margin-inline: 0; }
  header.site-header nav.nav > details > summary > .navlabel { padding-inline: 0; }
  header.site-header .nav > a.cta { flex: none; }
}

/* engine: the action's compact twin shows only on a narrow phone, and only with the menu shut */
@media (min-width: 541px) {
  header.site-header a.cta.cta-short { display: none; }
}
/* engine: on a narrow phone the header is one row, the brand with the menu trigger and a compact action beside it */
@media (max-width: 540px) {
  header.site-header .wrap { column-gap: 0.5rem; }
  header.site-header .nav-toggle > summary { gap: 0; min-width: 2.5rem; justify-content: center; padding-inline: 0.5rem; }
  header.site-header .nav-toggle > summary > .navlabel { display: none; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta:not(.cta-short) { display: none; }
  header.site-header .nav-toggle[open] + .nav > a.cta.cta-short { display: none; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta { padding-inline: clamp(0.5rem, 3vw, 1rem); }
}

/* engine: the phone menu's trigger is the last box of the header's own row, so the cross is drawn where the bars were tapped */
@media (max-width: 720px) {
  header.site-header .wrap { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; }
  header.site-header .wrap > .brand { margin-right: auto; }
  header.site-header .nav-toggle { order: 2; }
  header.site-header .nav-toggle:not([open]) + .nav { order: 1; margin-left: auto; }
  header.site-header .nav-toggle[open] { margin-left: auto; }
  header.site-header .nav-toggle[open] + .nav { order: 3; }
}

/* engine: while the phone menu is shut every box of the header is as wide as what it holds, so none of them can take the row from the other two */
@media (max-width: 720px) {
  header.site-header .wrap > .brand { flex: 0 1 auto; width: auto; min-width: 0; }
  header.site-header .nav-toggle:not([open]) { flex: 0 0 auto; width: auto; }
  header.site-header .nav-toggle:not([open]) + .nav { flex: 0 1 auto; width: auto; min-width: 0; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta { width: auto; }
}

/* engine: while the phone menu is shut the box around the action draws nothing of its own, so what a theme wrote for the open drawer is never a fragment in the header */
@media (max-width: 720px) {
  header.site-header .nav-toggle:not([open]) + .nav { border: 0; background: none; box-shadow: none; padding: 0; margin-block: 0; }
}

/* engine: every row of the open phone drawer starts its words at the page's own gutter, the action with them, and the action's own mark holds the far end of its full width box */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav { padding-inline: 0; }
  header.site-header .nav-toggle[open] + .nav > a,
  header.site-header .nav-toggle[open] + .nav > details > summary,
  header.site-header .nav-toggle[open] + .nav > details > summary > .navlabel { padding-inline: 0; margin-inline: 0; text-align: left; text-indent: 0; justify-content: flex-start; justify-items: start; }
  header.site-header .nav-toggle[open] + .nav > a.cta { text-align: left; text-indent: 0; justify-content: flex-start; justify-items: start; }
  header.site-header .nav-toggle[open] + .nav > a.cta:not(.cta-short) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
  header.site-header .nav-toggle[open] + .nav > a.cta:not(.cta-short)::after { content: ""; flex: none; width: 1.1em; height: 1.1em; margin-inline-start: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%20stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M8.75 4.25 12.5 8l-3.75 3.75'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%20stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M8.75 4.25 12.5 8l-3.75 3.75'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* engine: the open phone drawer's action is a row of the drawer, on the rows' own edges and clear of the last of them */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > a.cta { align-self: stretch; width: auto; max-width: none; margin-inline: 0; margin-block-start: 1.25rem; }
}

/* engine: every row of the open phone drawer is a single-line row, tall enough for a thumb, with what it holds in the middle of that height */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > a:not(.cta-short),
  header.site-header .nav-toggle[open] + .nav > details > summary { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; min-height: 2.75rem; }
}

/* engine: nothing a page says can push it wider than the window */
html { overflow-wrap: break-word; }
.button, .nav .cta { max-width: 100%; overflow-wrap: anywhere; }
.post-list a { overflow-wrap: anywhere; }
.table-wrap { max-width: 100%; overflow-x: auto; }
.prose th, .prose td { overflow-wrap: anywhere; }

/* engine: under 600px a table is a card per row, not columns a phone cannot hold */
@media (max-width: 600px) {
  .table-wrap table, .table-wrap tbody, .table-wrap tr { display: block !important; width: auto !important; }
  .table-wrap thead { display: none !important; }
  .table-wrap tr { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap td {
    display: flex !important;
    width: auto !important;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    padding: 0.15rem 0;
    border-bottom: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .table-wrap td.rowname, .table-wrap td:not([data-label]) { font-weight: 600; }
  .table-wrap td.rowname { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; padding-bottom: 0.3rem; }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* engine: under 600px every group of the footer's map is a row of its own, opens on its own heading, and the shut ones read as one block */
@media (max-width: 600px) {
  footer.site-footer .footer-map { display: grid !important; grid-template-columns: 1fr !important; row-gap: 0 !important; }
  footer.site-footer .footer-map > * { margin-block: 0 !important; padding-block: 0 !important; }
  footer.site-footer .footer-map .eyebrow[aria-expanded="false"] { margin-block: 0 !important; }
  footer.site-footer .footer-map ul[hidden] { display: none !important; }
  .footer-map ul { margin: 0.2rem 0 0.9rem; gap: 0.2rem; }
  .footer-map li { line-height: 1.4; }
  .footer-map .eyebrow { margin-bottom: 0; }
  .footer-map .eyebrow[aria-expanded] { display: flex; align-items: center; min-height: 40px; border-top: 1px solid var(--line); cursor: pointer; }
  .footer-map > :first-child .eyebrow[aria-expanded] { border-top: 0; }
  .footer-map .eyebrow[aria-expanded]::after { content: ""; flex: none; margin-left: auto; width: 0.4em; height: 0.4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform 120ms ease-out; }
  .footer-map .eyebrow[aria-expanded="true"]::after { transform: translateY(0.06em) rotate(225deg); }
}

/* engine: a row of one of the engine's own reading lists wears the site's own link treatment, and the line itself is not a theme's to take away */
main .post-list > li > a:any-link { text-decoration-line: underline !important; text-decoration-thickness: from-font; text-underline-offset: 0.15em; text-decoration-color: var(--accent); }

/* engine: the door inside the engine's line over the plan's cards wears the site's own link treatment, whatever a theme sets on it */
main .scope-note a:any-link { text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: 0.15em; text-decoration-color: var(--accent); }

/* engine: a row of one of the engine's own reading lists is one measure, and its title, date and summary share it */
.post-list li { max-width: var(--measure); display: grid; grid-template-columns: minmax(0, 1fr); }
.post-list li > a, .post-list li > .meta, .post-list li > p { grid-column: 1; }
.post-list li > a, .post-list li > p { max-width: none; width: auto; justify-self: stretch; }

/* engine: a row of one of the engine's own reading lists reads in one order at every width: its title, then its date, then its summary */
.post-list li > a, .post-list li > .meta, .post-list li > p { order: 0; }
.post-list li:has(> .meta) > a { grid-row: 1; }
.post-list li:has(> .meta) > .meta { grid-row: 2; }
.post-list li:has(> .meta) > p { grid-row: 3; }
.post-list li:not(:has(> .meta)) > a { grid-row: 1; }
.post-list li:not(:has(> .meta)) > p { grid-row: 2; }

/* engine: a row of one of the engine's own reading lists prints its own words in full: they wrap, and no box cuts them */
.post-list li { overflow: visible; height: auto; max-height: none; }
.post-list li > a, .post-list li > p { white-space: normal; overflow: visible; text-overflow: clip; height: auto; max-height: none; -webkit-line-clamp: none; line-clamp: none; }

/* engine: the column under a page head continues it, so it is not a second band of the page */
.page-head:has(+ .page-body) { padding-bottom: calc(var(--space) * 1.5); }
/* engine: and it ends where its words do, so a short page never ends in a band of nothing */
.page-body { padding-top: var(--space); padding-bottom: calc(var(--space) * 1.5); border-top: 0; min-height: 0; height: auto; margin-block: 0; }
.page-body > .narrow { padding-block: 0; margin-block: 0; }
.page-body > .narrow > :last-child,
.page-body > .narrow > :last-child > :last-child,
.page-body > .narrow > :last-child > :last-child > :last-child,
.page-body > .narrow > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; }
/* engine: and the air between the head's last words and that column's first words is the engine's own rhythm, whatever makes it, padding as well as margin */
.page-head:has(+ .page-body) > .narrow { margin-bottom: 0; padding-bottom: 0; }
.page-head:has(+ .page-body) > .narrow > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; padding-bottom: 0; }
/* engine: and that padding is measured from the standfirst's LAST LINE: its own box carries the trailing half of its line box, which a generously led standfirst would otherwise add to the air */
.page-head:has(+ .page-body) > .narrow > :last-child { margin-bottom: min(0px, 0.6em - 0.5lh); }
/* engine: and the head is as tall as what it holds, so no floor of its own can open that air under its standfirst */
.page-head:has(+ .page-body),
.page-head:has(+ .page-body) > .narrow,
.page-head:has(+ .page-body) > .narrow > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child > :last-child { min-height: 0; height: auto; aspect-ratio: auto; }
.page-body > .narrow > :first-child,
.page-body > .narrow > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child > :first-child { margin-top: 0; }
/* engine: and that air is made INSIDE those two boxes, so the join between them is flush: neither a margin between the head and the column nor a gap the page lays its bands out by can open it from outside both */
.page-head:has(+ .page-body) { margin-bottom: 0; }
.page-head + .page-body { margin-top: 0; }
main:has(> .page-head + .page-body) { row-gap: 0; }
/* engine: and on an index, which is that column led by the engine's own reading list, the air is one of the list's own gaps over a rem, so it reads as the rhythm of the list whatever the theme spaces its rows by */
.page-head:has(+ .page-body > .narrow > ul.post-list:first-child) { padding-bottom: 1rem; }
.page-head + .page-body:has(> .narrow > ul.post-list:first-child) { padding-top: 0; }
.page-head + .page-body > .narrow > ul.post-list:first-child { padding-top: 0; grid-template-rows: 0; }
.page-head + .page-body > .narrow > ul.post-list:first-child::before { content: ""; display: block; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; grid-column: 1 / -1; }
/* engine: and no rule is drawn across the top of that column, on any box above its first words, because what is over it is the page's own head, which it continues */
.page-body > .narrow,
.page-body > .narrow > :first-child,
.page-body > .narrow > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child > :first-child { border-top: 0; }
/* engine: and where that column opens with a block of the engine's own, the air over its heading is a rem over one of the theme's own spaces, never a band of the page */
.page-head:has(+ .page-body > .narrow > .block:first-child) { padding-bottom: 1rem; }
.page-body > .narrow > .block:first-child,
.page-body > .narrow > .block:first-child > :first-child { padding-top: 0; }
/* engine: and on a page that is only this column, the space under it is the engine's too */
main:has(> .page-body:last-child) { padding-bottom: 0; margin-bottom: 0; }
main:has(> .page-body:last-child) + footer { margin-top: 0; }

/* engine: the waitlist card's field is a line of text tall, whatever axis a theme stacks its form on */
.capture form input[type=email] { max-height: 4.5em; }

/* engine: under 600px a product capture is the picture itself, whole: its box is sized from it and nothing crops it */
@media (max-width: 600px) {
  .hero-media { max-width: 100% !important; min-width: 0 !important; }
  figure.frame:not(.phone) { max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
  figure.frame:not(.phone) > img { max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; }
}

/* engine: under 600px the hero is one column and a product capture fills the box it was given, so the one picture of the product is never a tile in a panel */
@media (max-width: 600px) {
  .hero.with-media .wrap { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; grid-auto-flow: row !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  .hero.with-media .wrap > * { grid-column: 1 / -1 !important; grid-row: auto !important; flex: 0 1 auto !important; }
  .hero.with-media .hero-media:not(:has(> figure.frame.phone)) { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; min-width: min(100%, 20rem) !important; }
  figure.frame:not(.phone) { margin-inline: 0 !important; min-width: min(100%, 20rem) !important; }
}

/* engine: what a product capture is, said on the picture itself */
figure.frame { position: relative !important; }
figure.frame > .shot-mark { display: block !important; position: absolute !important; z-index: 2 !important; inset-block-start: 0.5rem !important; inset-inline-start: 0.5rem !important; inset-block-end: auto !important; inset-inline-end: auto !important; margin: 0 !important; padding: 0.15rem 0.5rem !important; max-width: calc(100% - 1.5rem) !important; overflow: hidden !important; font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.6875rem !important; line-height: 1.6 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; text-align: start !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: #ffffff !important; background: rgb(15 16 20 / 0.92) !important; border: 0 !important; border-radius: 0.3125rem !important; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35) !important; opacity: 1 !important; visibility: visible !important; }