:root {
  
  --ground:      #F6F7F8;
  --surface:     #FFFFFF;
  --surface-alt: #ECEEF2;

  
  --ink:         #0F1317;
  --ink-body:    #282E35;
  --ink-muted:   #5F6874;

  
  --line:        #DCE0E7;
  --line-strong: #BFC6D1;

  
  --accent:       #0B4A8F;
  --accent-hover: #073A72;
  --accent-soft:  #E3EBF5;
  --on-accent:    #FFFFFF;

  
  --positive: #0B4A8F;
  --negative: #A32116;

  
  --dark:      #0F1317;
  --dark-text: #ECEEF2;

  
  --mat: #E4E8EE;

  
  --shadow-1: 0 1px 2px rgba(15,19,23,.06);
  --shadow-3: 0 1px 2px rgba(15,19,23,.06),
              0 8px 24px rgba(15,19,23,.08),
              0 32px 64px rgba(15,19,23,.10);
  --inset-hi: none;

  
  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  
  --container: 1200px;
  --prose: 68ch;
  --gutter: 24px;
  --nav-h: 64px;

  --radius: 2px;
  --radius-lg: 3px;

  --ease: cubic-bezier(.2, 0, .2, 1);

  
  --glyph-window: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.5 2h13a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm.5 3.6V13h12V5.6H2zm0-1.1h12V3H2v1.5z'/%3E%3Ccircle fill='black' cx='2.6' cy='3.75' r='.5'/%3E%3Ccircle fill='black' cx='4.2' cy='3.75' r='.5'/%3E%3C/svg%3E");

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #0D1013;
    --surface:     #15191E;
    --surface-alt: #1C222A;

    --ink:         #EBEEF2;
    --ink-body:    #C7CDD6;
    --ink-muted:   #828C99;

    --line:        #242A32;
    --line-strong: #39414C;

    --accent:       #38BDF8;
    --accent-hover: #7DD3FC;
    --accent-soft:  #0E2436;
    --on-accent:    #06131C;

    --positive: #38BDF8;
    --negative: #E08072;

    
    --dark:      #ECEEF2;
    --dark-text: #0F1317;

    
    --shadow-1: none;
    --shadow-3: 0 16px 40px rgba(0,0,0,.45);
    --inset-hi: inset 0 1px 0 rgba(255,255,255,.06);

    color-scheme: dark;
  }
}

@media (min-width: 768px)  { :root { --gutter: 48px; } }
@media (min-width: 1024px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; }

/* hidden is how the blog search takes a list off the page. Without this it
   loses to the display rules on .postlist--grid and .pager, and both lists
   end up visible at once. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-body);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (min-width: 1024px) { body { font-size: 17px; } }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent-soft); color: var(--accent); }

h1, h2 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}

h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

@media (prefers-color-scheme: dark) {
  
  h1, h2 { letter-spacing: 0; }
}

h3 {
  font-family: var(--f-body);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

h4 {
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

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

/* Scrollbars in the site palette rather than the browser default grey. Thin,
   square ended like everything else here, and the thumb takes the accent on
   hover. Firefox gets the two standard properties, Chrome and Safari the
   webkit pseudo elements; anything else keeps its native bar. */
/* Firefox only. Chrome and Safari understand scrollbar-color too, but the
   moment it is set they DISCARD every ::-webkit-scrollbar rule and draw their
   own thin bar in those two colours, which is why the custom bar below never
   appeared. The feature query keeps the standard properties away from any
   engine that supports the webkit pseudo elements. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--surface-alt);
  }
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: var(--surface-alt);
}

::-webkit-scrollbar-track {
  background: var(--surface-alt);
  border-left: 1px solid var(--line);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border: 3px solid var(--surface-alt);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); border-width: 2px; }

::-webkit-scrollbar-thumb:active { background: var(--ink); }

::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

::-webkit-scrollbar-corner { background: var(--surface-alt); }
a:hover { color: var(--accent-hover); }

strong { color: var(--ink); font-weight: 500; }

.prose { max-width: var(--prose); }

.mono, .data {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.label {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s3);
  display: block;
}

.lede { font-size: 1.0625rem; color: var(--ink-body); max-width: var(--prose); }
.muted { color: var(--ink-muted); }
.small { font-size: .875rem; line-height: 1.55; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s8); }
@media (min-width: 1024px) { .section { padding-block: var(--s9); } }

.section--tight { padding-block: var(--s7); }
.section + .section { border-top: 1px solid var(--line); }

.section__head { margin-bottom: var(--s6); }
.section__head p { margin-top: var(--s4); }

.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

@media (min-width: 768px)  { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: var(--s3) var(--s4);
  z-index: 200;
}
.skip-link:focus { left: 0; }

.rail { display: block; }

@media (min-width: 900px) {
  .rail {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--s8);
    align-items: start;
  }
  .rail__head { position: sticky; top: calc(var(--nav-h) + 32px); }
}

.rail__head h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  text-wrap: balance;
  letter-spacing: -.005em;
}
.rail__head p { margin-top: var(--s3); font-size: .875rem; color: var(--ink-muted); }

@media (max-width: 899px) { .rail__head { margin-bottom: var(--s6); } }

.spec table { font-size: .875rem; }
.spec td { padding: var(--s3) var(--s4) var(--s3) 0; }
.spec td:first-child { width: 42%; color: var(--ink-muted); font-weight: 400; }
.spec td:last-child { color: var(--ink); font-family: var(--f-mono); }
.spec thead { display: none; }

@media (min-width: 1100px) {
  .spec--split { column-count: 2; column-gap: var(--s7); }
  .spec--split table { min-width: 0; }
}

.section--dense { padding-block: var(--s7); }
@media (min-width: 1024px) { .section--dense { padding-block: var(--s7); } }

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.nav__brand {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav__links { display: none; gap: var(--s5); align-items: center; }

@media (min-width: 1024px) { .nav__links { display: flex; } }

.nav__links a {
  color: var(--ink-body);
  text-decoration: none;
  white-space: nowrap;
  font-size: .9375rem;
  font-weight: 500;
  padding-block: var(--s2);
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: var(--s3); }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
@media (min-width: 1024px) { .nav__toggle { display: none; } }

.nav__toggle span {
  display: block; width: 18px; height: 1.5px;
  background: var(--ink); position: relative;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top:  6px; }

.nav__drawer {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  padding: var(--s5) var(--gutter) var(--s6);
  display: none;
  z-index: 99;
}
.nav__drawer[data-open="true"] { display: block; }
@media (min-width: 1024px) { .nav__drawer { display: none !important; } }

.nav__drawer a {
  display: block;
  padding: var(--s3) 0;
  color: var(--ink-body);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  min-height: 44px;
}

:root {
  --key-face:  rgba(255, 255, 255, .62);
  --key-sunk:  rgba(16, 19, 21, .07);
  --key-hi:    inset 0 1px 0 rgba(255, 255, 255, .9);
  --key-lo:    inset 0 -1px 0 rgba(16, 19, 21, .12);
  --key-lift:  0 1px 1px rgba(16, 19, 21, .10), 0 2px 5px rgba(16, 19, 21, .09);
  --key-press: inset 0 2px 3px rgba(16, 19, 21, .20), inset 0 -1px 0 rgba(255, 255, 255, .55);
  --nav-sheen: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  --nav-lift:  0 1px 0 rgba(255, 255, 255, .8) inset, 0 2px 6px rgba(16, 19, 21, .07);
  --plate-lift: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 -2px 8px rgba(16, 19, 21, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --key-face:  rgba(255, 255, 255, .07);
    --key-sunk:  rgba(0, 0, 0, .38);
    --key-hi:    inset 0 1px 0 rgba(255, 255, 255, .11);
    --key-lo:    inset 0 -1px 0 rgba(0, 0, 0, .55);
    --key-lift:  0 1px 2px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .45);
    --key-press: inset 0 2px 4px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 255, 255, .07);
    --nav-sheen: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, 0));
    --nav-lift:  0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 8px rgba(0, 0, 0, .5);
    --plate-lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 -2px 10px rgba(0, 0, 0, .45);
  }
}

.nav {
  background-image: var(--nav-sheen);
  box-shadow: var(--nav-lift);
}

.nav__links { gap: var(--s2); }

.nav__links a {
  padding: 7px var(--s3);
  border-radius: 3px;
  border-bottom: 0;
  background-color: transparent;
  transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease),
              transform 120ms var(--ease), color 120ms var(--ease);
}

.nav__links a:hover {
  color: var(--ink);
  background-color: var(--key-face);
  box-shadow: var(--key-hi), var(--key-lo), var(--key-lift);
  transform: translateY(-1px);
}

.nav__links a:active {
  background-color: var(--key-sunk);
  box-shadow: var(--key-press);
  transform: translateY(1px);
}

.nav__links a[aria-current="true"] {
  color: var(--accent);
  background-color: var(--key-sunk);
  box-shadow: var(--key-press);
  transform: translateY(1px);
}

.nav__toggle {
  background-color: var(--key-face);
  box-shadow: var(--key-hi), var(--key-lo), var(--key-lift);
  transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease),
              transform 120ms var(--ease);
}

.nav__toggle:active,
.nav__toggle[aria-expanded="true"] {
  background-color: var(--key-sunk);
  box-shadow: var(--key-press);
  transform: translateY(1px);
}

.nav__drawer {
  background-image: var(--nav-sheen);
  box-shadow: var(--nav-lift);
}

.nav__drawer a {
  padding-inline: var(--s3);
  border-radius: 3px;
  transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

.nav__drawer a:active {
  background-color: var(--key-sunk);
  box-shadow: var(--key-press);
}

@media (prefers-reduced-motion: reduce) {
  .nav__links a,
  .nav__toggle,
  .nav__drawer a { transition: none; }

  .nav__links a:hover,
  .nav__links a:active,
  .nav__links a[aria-current="true"],
  .nav__toggle:active,
  .nav__toggle[aria-expanded="true"] { transform: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease);
  z-index: -1;
}
.btn--primary:hover::before { transform: scaleX(1); }
.btn--primary:hover { color: var(--ground); }
.btn--primary:active::before { transform: scaleX(1) scaleY(.94); }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }

.btn--sm { min-height: 38px; padding: var(--s2) var(--s4); font-size: .875rem; }

.btn--tg {
  background: var(--ink);
  color: var(--ground);
  border-color: var(--ink);
  padding-left: var(--s4);
}
.btn--tg { transition: background-color 140ms var(--ease), color 140ms var(--ease); }
.btn--tg:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--tg svg { transition: transform 200ms var(--ease); }
.btn--tg:hover svg { transform: translateX(2px); }
.btn--tg svg { width: 15px; height: 15px; flex: none; }

.to-top { border-radius: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.showcase__text h2,
.panel h2,
.postlist h2 {
  font-family: var(--f-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}
.postlist h2 { font-size: 1.125rem; }

.hero { padding-block: var(--s7) var(--s8); }
@media (min-width: 1024px) { .hero { padding-block: var(--s8) var(--s9); } }

.hero__grid { display: grid; gap: var(--s7); align-items: center; }

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s8); }
}

.hero__facts {
  display: grid;
  margin: var(--s5) 0 var(--s6);
  font-family: var(--f-mono);
  width: fit-content;
  max-width: 100%;
}

.hero__fact {
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
}
.hero__fact:first-child { border-top: 0; }

.hero__fact dt {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero__fact dd {
  margin: 2px 0 0;
  font-size: 1.0625rem;
  color: var(--ink);
}

@media (min-width: 560px) {
  .hero__facts { grid-auto-flow: column; grid-auto-columns: max-content; }

  .hero__fact {
    padding: 2px var(--s5) 2px 0;
    margin-right: var(--s5);
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .hero__fact:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
}

.hero__sub { margin-top: var(--s4); font-size: 1.0625rem; max-width: 46ch; }

.hero__lines {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  max-width: 54ch;
}

.hero__lines li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  font-size: .9375rem;
  line-height: 1.45;
}

.hero__lines li svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
  flex: none;
}

.hero__lines strong {
  display: block;
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero__lines span { color: var(--ink-muted); }

.hero__works {
  position: relative;
  display: block;
  overflow: hidden;
  margin-top: var(--s5);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.hero__works:hover,
.hero__works:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--accent);
}

.hero__works:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.hero__works:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.hero__works::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: .3;
  pointer-events: none;
}

.hero__works-in {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
}

.hero__works-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 180ms var(--ease);
}

.hero__works-mark svg { width: 24px; height: 24px; fill: currentColor; }

.hero__works:hover .hero__works-mark,
.hero__works:focus-visible .hero__works-mark { transform: rotate(-4deg) scale(1.04); }

.hero__works-text strong {
  display: block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero__works-text b {
  display: block;
  margin-top: var(--s1);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.hero__works-text > span {
  display: block;
  margin-top: 4px;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink-body);
}

.hero__works-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  white-space: nowrap;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--ground);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.hero__works-go svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 180ms var(--ease);
}

.hero__works:hover .hero__works-go svg,
.hero__works:focus-visible .hero__works-go svg { transform: translate(2px, -2px); }

.hero__works:hover .hero__works-go,
.hero__works:focus-visible .hero__works-go {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--accent);
}

@media (max-width: 640px) {
  .hero__works-in {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s3);
    padding: var(--s4);
  }
  .hero__works-go { grid-column: 1 / -1; justify-content: center; margin-top: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__works, .hero__works-mark, .hero__works-go, .hero__works-go svg { transition: none; }
  .hero__works:hover .hero__works-go svg { transform: none; }
  .hero__works:hover, .hero__works:focus-visible { transform: none; }
  .hero__works:hover .hero__works-mark { transform: none; }
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); }

.hero__ctas .btn--primary {
  --angle-cut: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background: transparent;
  border-radius: 0;
  padding-right: var(--s6);
}

.hero__ctas .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: var(--angle-cut);
  z-index: -2;
}

.hero__ctas .btn--primary::before { clip-path: var(--angle-cut); }

.shot {
  background: var(--mat);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-3), var(--inset-hi);
}

.shot__bar {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: var(--s3);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); display: block; }

.shot img { width: 100%; display: block; }

.shot--phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  border-radius: 14px;
}

.shot--phone .shot__bar {
  height: 22px;
  justify-content: center;
  gap: 0;
}
.shot--phone .shot__bar i { display: none; }
.shot--phone .shot__bar::after {
  content: "";
  width: 78px;
  height: 6px;
  border-radius: 3px;
  background: var(--line-strong);
}

.shot--tilt {
  transform: perspective(1800px) rotateY(-7deg) rotateX(2deg) translateZ(0);
  transform-origin: left center;
}
@media (max-width: 1023px) { .shot--tilt { transform: none; } }
@media (prefers-reduced-motion: reduce) { .shot--tilt { transform: none; } }

.band {
  background: var(--dark);
  color: var(--dark-text);
  padding-block: var(--s7);
}
.band p {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 30ch;
}
.band .small {
  font-size: .9375rem;
  line-height: 1.6;
  color: inherit;
  opacity: .7;
  margin-top: var(--s4);
  font-family: var(--f-body);
  letter-spacing: 0;
  max-width: 52ch;
}

.strip {
  border-block: 1px solid var(--line-strong);
  background: var(--surface-alt);
}
.strip__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s4);
}
@media (min-width: 900px) {
  .strip__grid { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s5); padding-block: 0; height: 56px; }
}

.strip__label {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.strip__viewport { overflow: hidden; }
.strip__track { display: flex; width: max-content; animation: strip 30s linear infinite; }
.strip__track[data-paused="true"] { animation-play-state: paused; }
.strip__set { display: flex; flex: none; }
.strip__set span {
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .03em;
  color: var(--ink-body);
  white-space: nowrap;
  padding-inline: var(--s5);
  border-right: 1px solid var(--line-strong);
}
@keyframes strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.strip__act { display: flex; align-items: center; gap: var(--s3); white-space: nowrap; }
.strip__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  overflow: hidden;
  padding: 13px var(--s5) 13px var(--s5);
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,19,21,.10);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease),
              transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.strip__cta > span { position: relative; z-index: 1; }

.strip__cta-go {
  font-family: var(--f-mono);
  font-size: .9375rem;
  transition: transform 220ms var(--ease);
  will-change: transform;
}

/* The sheen is one composited pseudo element: it moves on transform and opacity
   only, so it never touches layout or paint on the main thread. It runs twice,
   under four seconds in total, and then stops for good. Anything that keeps
   moving indefinitely needs a pause control under WCAG 2.2.2, which is why the
   strip track has one and this does not need one. */
.strip__cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.26) 50%, transparent 100%);
  transform: translate3d(-180%, 0, 0);
  animation: sheen 1.9s var(--ease) 1.1s 2;
  border-radius: inherit;
}

@keyframes sheen {
  from { transform: translate3d(-180%, 0, 0); }
  to   { transform: translate3d(420%, 0, 0); }
}

.strip__cta:hover,
.strip__cta:focus-visible {
  /* The global a:hover rule carries one more pseudo class than a single class
     selector, so without naming the colour here it repaints the label in
     accent-hover: dark green text on a dark green button, which reads as the
     text vanishing. */
  color: var(--on-accent);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13,92,66,.26);
}

.strip__cta:hover::after,
.strip__cta:focus-visible::after { animation: sheen 900ms var(--ease) 1; }

.strip__cta:hover .strip__cta-go,
.strip__cta:focus-visible .strip__cta-go { transform: translate(2px, -2px); }

.strip__cta:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .strip__cta,
  .strip__cta-go { transition: none; }
  .strip__cta::after,
  .strip__cta:hover::after { animation: none; opacity: 0; }
  .strip__cta:hover { transform: none; }
}

.strip__pause {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: .625rem;
  color: var(--ink-muted);
  flex: none;
}
.strip__pause:hover { border-color: var(--ink); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
  .strip__viewport { overflow-x: auto; }
  .strip__pause { display: none; }
}

.diptych {
  border: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 1fr;
}
.diptych > div { padding: var(--s6); }
.diptych > div + div { border-top: 1px solid var(--line-strong); }

@media (min-width: 860px) {
  .diptych { grid-template-columns: 1fr 1fr; }
  .diptych > div + div { border-top: 0; border-left: 1px solid var(--line-strong); }
}

.diptych__kicker {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--s3);
}
.diptych h3 { font-size: 1.125rem; margin-bottom: var(--s3); }
.diptych p { color: var(--ink-muted); font-size: .9375rem; }
.diptych__act { margin-top: var(--s5); }

.panel {
  background: none;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  padding: var(--s5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.panel h3 { font-size: 1.0625rem; }

.panel h3 + p { margin-top: calc(var(--s2) * -1); }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.svc:hover,
.svc:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--accent);
}

.svc:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.svc:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.svc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--accent);
  color: var(--on-accent);
  border-bottom: 2px solid var(--ink);
}

.svc__name {
  margin: 0;
  color: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}

.svc__tag {
  flex: none;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 8px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  transform: rotate(2deg);
  transition: transform 180ms var(--ease);
}

.svc:hover .svc__tag,
.svc:focus-visible .svc__tag { transform: rotate(-2deg); }

.svc__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s5);
  padding: var(--s5);
}

.svc__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}

.svc__body > * { position: relative; z-index: 1; }

.svc__desc {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-body);
}

.svc__feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

.svc__feat {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--ink);
}

.svc__fi {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.svc__fi svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc:hover .svc__fi,
.svc:focus-visible .svc__fi { background: var(--accent); color: var(--on-accent); }

.svc__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s3);
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1.5px dashed var(--line-strong);
}

.svc__price {
  font-family: var(--f-mono);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink);
}

.svc__cur {
  display: block;
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.svc__per {
  display: block;
  margin-top: 4px;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--ink-muted);
}

.svc__cta {
  flex: none;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  text-align: center;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--ground);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--accent);
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease);
}

.svc:hover .svc__cta,
.svc:focus-visible .svc__cta {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--accent);
}

.svc--wide { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .svc--wide .svc__feats { grid-template-columns: repeat(4, 1fr); }
  .svc--wide .svc__desc { max-width: 68ch; }
  .svc--wide .svc__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .svc--wide .svc__cta { padding: 12px 20px; }
}

@media (max-width: 420px) {
  .svc__feats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .svc, .svc h3, .svc__btn, .svc__ico { transition: none; }
  .svc:hover, .svc:focus-visible { transform: none; }
  .svc:hover .svc__ico, .svc:focus-visible .svc__ico { transform: none; }
}

.creds {
  font-family: var(--f-mono);
  font-size: .875rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
}
.creds span { color: var(--ink-muted); }

.panel__foot { margin-top: auto; }

.showcase__row {
  display: grid;
  gap: var(--s5);
  align-items: center;
  padding-block: var(--s7);
  border-bottom: 1px solid var(--line);
}
.showcase__row:last-child { border-bottom: 0; }

@media (min-width: 1024px) {
  .showcase__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); }
  .showcase__row:nth-child(even) .showcase__media { order: 2; }
  .showcase__row:nth-child(even) .showcase__text  { order: 1; }
}

.showcase__num {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent);
  display: block;
  margin-bottom: var(--s2);
}

.grid-split { grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.seq {
  counter-reset: seq;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  max-width: 640px;
}
.seq li {
  counter-increment: seq;
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-body);
}
.seq li::before {
  content: counter(seq);
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--accent);
  flex: none;
  width: 1.25rem;
}

.showcase__row--lead { display: block; padding-top: 0; }
.showcase__row--lead .showcase__media { margin-bottom: var(--s5); }
@media (min-width: 1024px) {
  .showcase__row--lead { grid-template-columns: none; }
  .showcase__row--lead .showcase__text { max-width: 62ch; }
}

.tag {
  font-family: var(--f-mono);
  font-size: .52em;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: .34em;
  white-space: nowrap;
}

.em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.12em;
  color: currentColor;
}

.fig {
  font-family: var(--f-mono);
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
  color: currentColor;
  letter-spacing: -.02em;
}

.stat {
  font-family: var(--f-mono);
  font-size: 1.5em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1;
}

.alt {
  font-family: var(--f-display);
  font-size: 1.14em;
  color: currentColor;
  letter-spacing: -.01em;
}

.aside-t {
  font-family: var(--f-mono);
  font-size: .58em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .5;
  vertical-align: .42em;
  white-space: nowrap;
}

.sweep {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 2px;
  padding-bottom: 2px;
}

.plans { min-width: 720px; }

.plans thead th { border-bottom: 1px solid var(--ink); padding: 0 var(--s4) var(--s4); text-align: center; vertical-align: bottom; }
.plans thead th:first-child { border-bottom-color: var(--line); }

.plans__name {
  display: block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s2);
}
.plans__price {
  display: block;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  color: var(--ink);
  line-height: 1.1;
  text-transform: none;
  letter-spacing: -.01em;
}
.plans__note {
  display: block;
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 400;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--s1);
}

.plans tbody th {
  text-align: left;
  font-family: var(--f-body);
  font-size: .9375rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-body);
  padding: var(--s3) var(--s5) var(--s3) 0;
  border-bottom: 1px solid var(--line);
  width: 34%;
}
.plans td {
  font-family: var(--f-mono);
  font-size: .8125rem;
  color: var(--ink);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: center;
}
.plans td.plans__no { color: var(--ink-muted); }

.plans th.plans__pick, .plans td.plans__pick { background: var(--accent-soft); }
.plans thead th.plans__pick { border-bottom-color: var(--accent); }
.plans thead th.plans__pick .plans__name,
.plans thead th.plans__pick .plans__note { color: var(--accent); }

.plans__cta th, .plans__cta td { border-bottom: 0; padding-top: var(--s5); text-align: center; }
/* the prices live in the table head, which is hidden once the table stacks,
   so a price row carries them on narrow screens instead */
.plans__priced { display: none; }

.plans__cta a:not(.btn) {
  font-family: var(--f-body);
  font-size: .875rem;
  color: var(--ink-body);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
}
.plans__cta a:not(.btn):hover { color: var(--accent); border-bottom-color: var(--accent); }

.btn--link {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0 0 3px;
  min-height: 0;
  color: var(--ink);
}
.btn--link:hover { color: var(--accent); border-bottom-color: var(--accent); background: none; }
.btn--link::after {
  content: "";
  width: 13px;
  height: 13px;
  margin-left: .55em;
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--glyph-window) center / contain no-repeat;
  mask: var(--glyph-window) center / contain no-repeat;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
  opacity: .55;
}
.btn--link { display: inline-flex; align-items: center; }
.btn--link:hover::after { transform: translateX(3px); opacity: 1; }

.reqs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.reqs li {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--ink-body);
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
  background:
    linear-gradient(to right, var(--ground) 30%, transparent) left / 40px 100% no-repeat,
    linear-gradient(to left, var(--ground) 30%, transparent) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(16,19,21,.14), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(16,19,21,.14), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  min-width: 420px;
}

th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--line-strong);
}

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

td:first-child { color: var(--ink); font-weight: 500; width: 40%; }
td.data, td .data { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.faq { max-width: 820px; }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s5) var(--s6) var(--s5) 0;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 150ms var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(-135deg); }

.faq__body { padding: 0 0 var(--s5); max-width: var(--prose); }

.qa { border-bottom: 1px solid var(--line); }
.qa:first-of-type { border-top: 1px solid var(--line); }

.qa summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s6) var(--s4) 0;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  min-height: 44px;
}
.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 150ms var(--ease);
}
.qa[open] summary::after { transform: translateY(-50%) rotate(-135deg); }

.qa__body { padding: 0 0 var(--s4); }
.qa__body p { margin: 0; }

.steps { display: grid; gap: var(--s4); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  border-top: 2px solid var(--line-strong);
  padding-top: var(--s4);
}
.step b {
  display: block;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: var(--s2);
}

.postlist li { border-bottom: 1px solid var(--line); }

.postlist a {
  display: block;
  padding: var(--s5) 0;
  text-decoration: none;
  color: inherit;
}
.postlist a:hover h3 { color: var(--accent); }

.postlist time {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--s2);
}
.postlist p { margin: var(--s2) 0 0; color: var(--ink-muted); font-size: .9375rem; max-width: var(--prose); }

.post { max-width: var(--prose); }

/* Quoting a source verbatim. Set in mono because every use of it so far is a
   line lifted from someone else's page, and mono reads as a citation rather
   than as our own voice. */
.post blockquote {
  margin: var(--s6) 0;
  padding: var(--s4) var(--s5);
  border-left: 2px solid var(--ink);
  background: var(--surface-alt);
}
.post blockquote p {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .9375rem;
  color: var(--ink);
}
.post h2 { margin: var(--s8) 0 var(--s4); }
.post h3 { margin: var(--s6) 0 var(--s3); }
.post ul { margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.post ul li { padding-left: var(--s5); position: relative; }
.post ul li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--f-mono);
  font-weight: 500;
}

.toc {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  background: var(--surface);
  font-size: .9375rem;
}
.toc a { display: block; padding: var(--s2) 0; color: var(--ink-body); text-decoration: none; }
.toc a:hover { color: var(--accent); }

@media (min-width: 1100px) {
  .post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s8); align-items: start; }
  .post-layout .toc { position: sticky; top: calc(var(--nav-h) + 24px); }
}

@media (min-width: 860px) {
  .postlist--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s8);
    border-top: 1px solid var(--line);
  }
  .postlist--grid li { border-top: 0; }
}

/* Blog search.

   Height is fixed by the field and by a status line that always reserves one
   line, so enabling the input and swapping the results in never moves the
   page. That is the whole reason for the min-height below. */
.blogsearch {
  margin: var(--s6) 0 var(--s5);
  max-width: 520px;
}

.blogsearch__label {
  display: block;
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s2);
}

.blogsearch__field {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 44px;
  padding: 0 var(--s2) 0 var(--s3);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.blogsearch__field:focus-within { border-color: var(--accent); }

.blogsearch__icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-muted);
}

.blogsearch__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.blogsearch__input::placeholder { color: var(--ink-muted); }
.blogsearch__input::-webkit-search-cancel-button { display: none; }
.blogsearch__input:disabled { cursor: not-allowed; }

/* 32 by 44 rather than the 26 square the icon needs: the tap target fills the
   height of the field, which is what a thumb is aiming at. */
.blogsearch__clear {
  flex: none;
  width: 32px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}
.blogsearch__clear svg { width: 15px; height: 15px; }
.blogsearch__clear:hover { color: var(--ink); }

.blogsearch__status {
  margin: var(--s2) 0 0;
  min-height: 1.25rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--ink-muted);
}

.postlist mark {
  background: var(--accent-soft);
  color: inherit;
  padding: 0 1px;
}

/* accent-soft is tuned for large filled panels. Behind two or three letters on
   a dark ground it almost disappears, so the highlight gets its own value. */
@media (prefers-color-scheme: dark) {
  .postlist mark { background: #16324F; }
}

.pager {
  display: flex;
  align-items: center;
  /* Wraps because it must. Five page numbers plus Previous, Next and the
     count are wider than a 390px phone, and without this the whole page
     scrolls sideways. */
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: .8125rem;
}
.pager a, .pager span {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong);
  color: var(--ink-body);
  text-decoration: none;
  min-width: 34px;
  text-align: center;
}
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager [aria-current="page"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
/* Both need .pager twice over. `.pager a, .pager span` scores a class plus a
   type, which beats a lone class, so the single-class versions of these two
   never removed the border they were written to remove. Invisible until the
   row started wrapping, at which point the spacer became an empty box. */
.pager .pager__spacer { flex: 1; border: 0; padding: 0; min-width: 0; }
.pager .pager__count { border: 0; padding: 0; color: var(--ink-muted); }

/* Wrapped, there is nothing to push apart, and an elastic gap on its own row
   is just a hole. The count takes the row instead. */
@media (max-width: 640px) {
  .pager .pager__spacer { display: none; }
  .pager .pager__count { width: 100%; }
}

.midcta {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding: var(--s5) 0;
  margin: var(--s7) 0;
  max-width: var(--prose);
}
.midcta__label {
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: var(--s3);
}
.midcta p { font-size: .9375rem; color: var(--ink-body); margin-bottom: var(--s4); }
.midcta .row { gap: var(--s4); }

.contact-fab {
  position: fixed;
  right: 16px;
  bottom: 76px;
  transform: translateY(calc(-1 * var(--notice-h, 0px)));
  z-index: 90;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--ground);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}

.contact-fab:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.contact-fab svg { width: 18px; height: 18px; flex: none; }

@media (min-width: 768px) { .contact-fab { right: 24px; bottom: 84px; } }

.to-top {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 90;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  box-shadow: var(--shadow-1);
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(calc(-1 * var(--notice-h, 0px))); }
.to-top:hover { border-color: var(--ink); }
.to-top svg { width: 16px; height: 16px; }

@media (min-width: 768px) { .to-top { right: 24px; bottom: 24px; } }

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-3), var(--inset-hi);
}

.video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.video__play::after {
  content: "";
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 34px;
  box-shadow: 0 4px 20px rgba(16,19,21,.28);
  transition: transform 150ms var(--ease), background-color 150ms var(--ease);
}
.video__play:hover::after { transform: scale(1.06); background-color: var(--accent-hover); }
.video__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.video__cap {
  margin-top: var(--s3);
  font-size: .875rem;
  color: var(--ink-muted);
  font-family: var(--f-mono);
}

.footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: var(--s8) var(--s6);
  font-size: .9375rem;
  background-color: var(--surface-alt);
  background-image: var(--nav-sheen);
  box-shadow: var(--plate-lift);
}

.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }

.footer h4 { margin-bottom: var(--s3); font-size: .8125rem; font-family: var(--f-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.footer li { margin-bottom: var(--s2); }

.footer a {
  color: var(--ink-body);
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease),
              color 120ms var(--ease);
}
.footer li a,
.footer__base a {
  display: inline-block;
  padding: 6px var(--s2);
  margin-inline: calc(var(--s2) * -1);
}
.footer a:hover {
  color: var(--accent);
  background-color: var(--key-face);
  box-shadow: var(--key-hi), var(--key-lo);
}
.footer a:active {
  background-color: var(--key-sunk);
  box-shadow: var(--key-press);
}

.footer__base {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: .8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  font-family: var(--f-mono);
  font-size: .8125rem;
  color: var(--ink-muted);
}

.crumbs a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-block: 2px;
  transition: color 120ms var(--ease), border-color 120ms var(--ease);
}
.crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.crumbs span { color: var(--line-strong); }
/* Third crumb: the current page. A separator grey would read as a
   divider rather than a label, so it keeps the muted text colour. */
.crumbs .crumb-here { color: var(--ink-muted); }

.related {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.related h2 { font-size: 1rem; font-family: var(--f-mono); font-weight: 500; letter-spacing: .02em; margin-bottom: var(--s3); }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.related li { padding-left: var(--s5); position: relative; }
.related li::before { content: ">"; position: absolute; left: 0; color: var(--accent); font-family: var(--f-mono); }
.related a { color: var(--ink-body); text-decoration: none; border-bottom: 1px solid var(--line); }
.related a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s6); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.mt-6 { margin-top: var(--s6); }
.mt-5 { margin-top: var(--s5); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.note {
  border-top: 1px solid var(--line-strong);
  padding: var(--s4) 0 0;
  color: var(--ink-muted);
  font-size: .9375rem;
  max-width: var(--prose);
  position: relative;
}
.note::before {
  content: "note";
  position: absolute;
  top: -7px;
  left: 0;
  background: var(--ground);
  padding-right: var(--s3);
  font-family: var(--f-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .nav, .contact-fab, .to-top, .notice, .footer { display: none; }
  body { background: #fff; color: #000; }
}

.shot__cap{
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--muted);
  padding:.6rem .1rem 0;
  text-align:center;
}
.shot--phone .shot__cap{max-width:300px;margin:0 auto}

.custom-note{
  border-left:3px solid var(--accent);
  background:var(--surface-2, rgba(13,92,66,.04));
  padding:var(--s4) var(--s5);
  margin:0 0 var(--s6);
  max-width:var(--prose);
  border-radius:2px;
}
.custom-note__label{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:var(--s3);
}
.custom-note p{font-size:.9375rem;color:var(--ink-body);margin-bottom:var(--s4)}
.custom-note .row{gap:var(--s4)}

.nav__brand{display:inline-flex;align-items:center;gap:.55rem;line-height:1.15}
.nav__word{display:flex;flex-direction:column;min-width:0}
.nav__word strong{font-weight:500;letter-spacing:-.02em}
.nav__word em{
  font-family:var(--f-sans);font-style:normal;font-size:.625rem;
  letter-spacing:.02em;color:var(--ink-muted);white-space:nowrap;
}
@media (max-width:520px){.nav__word em{display:none}}

/* The brand word is a 17 character mono string, three longer than the bar can
   take at 360px: measured, the brand, the Telegram button and the menu button
   together push the page 18px past the viewport. The tagline is already gone
   by this width, so the word itself is the only thing left to give. */
@media (max-width:400px){.nav__brand{font-size:.8125rem}}

@media (min-width:768px){
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
}
.footer__about p{
  font-size:.8125rem;line-height:1.6;color:var(--ink-body);
  margin-bottom:var(--s3);max-width:38ch;
}

/* Share row. The About column runs four paragraphs deep while the three link
   columns stop after a handful of items, which left a tall empty block down
   the right of the footer. This fills it with something useful rather than
   padding, and carries the RSS feed where a reader will look for it. */
.share{
  display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);
}
.share__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:6px;
  color:var(--ink-muted);
  background:var(--key-face);
  box-shadow:var(--key-hi),var(--key-lo);
  transition:color 120ms var(--ease),box-shadow 120ms var(--ease),
             transform 120ms var(--ease);
}
.share__btn svg{width:16px;height:16px}
.share__btn:hover{color:var(--accent);transform:translateY(-1px)}
.share__btn:active{background:var(--key-sunk);box-shadow:var(--key-press);transform:none}
.share__btn--rss:hover{color:#E8752A}
.share__note{
  margin-top:var(--s3);font-size:.75rem;line-height:1.6;color:var(--ink-muted);
}
/* The generic .footer a hover paints a key face behind the link. Inside this
   one-line note that reads as a stray button, so it stays a plain link. */
.share__note a{text-decoration:underline;text-underline-offset:2px}
.share__note a:hover{background:none;box-shadow:none}
@media (prefers-reduced-motion: reduce){
  .share__btn,.share__btn:hover{transition:none;transform:none}
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after { transition: transform .18s ease, top .18s ease, background-color .18s ease; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav__toggle span,
  .nav__toggle span::before,
  .nav__toggle span::after { transition: none; }
}

@media (max-width: 640px) {
  .contact-fab { bottom: 72px; }
}

.shot{margin:0}
.shot--phone{margin-left:auto;margin-right:auto}

@media (max-width: 899px){
  /* a global `table{min-width:420px}` forces the wrapper to scroll on a
     360px screen even once the table is stacked, so it is cleared here */
  .plans{min-width:0}
  .plans,.plans tbody,.plans tr,.plans th,.plans td{display:block;width:auto}
  /* the wrapper paints scroll-edge shadows; nothing scrolls now */
  .table-wrap:has(.plans){overflow-x:visible;background:none}
  .plans thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .plans tbody tr{
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:var(--s4);
    margin-bottom:var(--s4);
    background:var(--surface,transparent);
  }
  .plans tbody th[scope="row"]{
    font-size:.9375rem;
    font-weight:600;
    text-align:left;
    padding:0 0 var(--s3);
    border:0;
  }
  .plans tbody td{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:var(--s3);
    padding:var(--s2) 0;
    border:0;
    border-top:1px solid var(--line);
    text-align:right;
    font-size:.875rem;
  }
  .plans tbody td::before{
    content:attr(data-tier);
    font-family:var(--f-mono);
    font-size:.6875rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-muted);
    text-align:left;
  }
  .plans__priced{display:block}
  .plans__priced td{font-family:var(--f-mono);font-size:1.0625rem;color:var(--ink)}
  .plans tbody td.plans__pick{font-weight:600}
  .plans tbody td.plans__pick::before{color:var(--accent)}
}


/* footer brand lockup: the mark lives here and in the favicon, never in the
   header. The header keeps the wordmark alone so the nav stays one line on a
   phone. */
.footer__logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s5);text-decoration:none}
.footer__logo svg{flex:none;display:block}
.footer__logo-word{display:flex;flex-direction:column;line-height:1.15;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.footer__logo-word em{
  font-family:var(--f-body);font-style:normal;font-size:.625rem;font-weight:400;
  letter-spacing:.02em;color:var(--ink-muted);white-space:nowrap;
}
.footer__logo:hover .footer__logo-word{color:var(--accent)}

/* ---- Analytics notice -------------------------------------------------- */
/* One line at the bottom, dismissed once and remembered in local storage.
   Fixed, so it costs no layout and no CLS. It ships with the `hidden`
   attribute and main.js reveals it, which is why a returning visitor sees
   nothing at all rather than a flash. --notice-h is set by main.js and lifts
   the Telegram button and the back-to-top button clear of it. */
.notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
}
.notice p {
  margin: 0;
  font-family: var(--f-mono);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--ink-body);
}
.notice a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.notice a:hover { color: var(--accent-hover); }
.notice__ok {
  flex: none;
  min-height: 36px;
  padding: 0 var(--s4);
  background: var(--ink);
  color: var(--ground);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: .75rem;
  cursor: pointer;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.notice__ok:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.notice__acts { display: inline-flex; align-items: center; gap: var(--s2); flex: none; }
.notice__no {
  flex: none;
  min-height: 36px;
  padding: 0 var(--s4);
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: .75rem;
  cursor: pointer;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.notice__no:hover { border-color: var(--ink); color: var(--ink); }

/* The on/off switch on the privacy page. Hidden until main.js reveals it, so a
   visitor without JS is never shown a control that cannot work. */
.switchbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s4) 0;
  padding: var(--s4);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.switchbox p { margin: 0; font-family: var(--f-mono); font-size: .8125rem; }

@media (max-width: 560px) {
  /* The text and both buttons do not fit one row at 360px: a 200px text basis
     plus Decline, Accept and the gaps overflowed the viewport by 9px. The text
     takes a full row and the buttons sit on their own, right aligned. */
  .notice { justify-content: flex-start; text-align: left; gap: var(--s2); }
  .notice p { flex: 1 1 100%; }
  .notice__acts { margin-left: auto; }
}

/* ---- Prose rhythm ------------------------------------------------------ */
/* h1/h2 carry `margin: 0` globally and only `.post` ever restored it, so the
   pages built on `.prose` (/about/, /terms/, /privacy/) ran their headings
   16px under the preceding paragraph and flush against the following one.
   Same scale as .post, so a heading reads the same wherever it appears. */
.prose h2 { margin: var(--s8) 0 var(--s4); }
.prose h3 { margin: var(--s6) 0 var(--s3); }
.prose h4 { margin: var(--s5) 0 var(--s2); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.prose li + li { margin-top: var(--s2); }
.prose > *:first-child { margin-top: 0; }

/* The footer About block is a summary now, with the detail on /about/. The
   link is the only emphasis it needs. */
.footer__more { margin-top: var(--s3); }
.footer__more a {
  /* 17px tall as plain inline text, under the 24px minimum target size.
     inline-block plus padding takes it to 33px without moving anything. */
  display: inline-block;
  padding: var(--s2) 0;
  font-family: var(--f-mono);
  font-size: .8125rem;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__more a:hover { color: var(--accent); }


/* ---- Live price tape --------------------------------------------------- */
.tape {
  position: relative;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.tape[hidden] { display: none; }

.tape__in {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 34px;
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}

.tape__live {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 10px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}

.tape__view {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.tape__track {
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: max-content;
  animation: tape-run 40s linear infinite;
}

@keyframes tape-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tape:hover .tape__track { animation-play-state: paused; }

.tape__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: .75rem;
  white-space: nowrap;
}

.tape__item b { font-weight: 600; color: var(--ink); }
.tape__price { color: var(--ink-body); }
.tape__chg.is-up { color: var(--positive); }
.tape__chg.is-down { color: var(--negative); }

@media (max-width: 560px) {
  .tape__in { gap: var(--s3); padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tape__track { animation: none; }
}

@media print { .tape { display: none; } }

.post__hero {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--s6) 0 var(--s7);
  border-radius: 12px;
}

.blogcard {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.blogcard:hover,
.blogcard:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--accent);
}

.blogcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.blogcard img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 2px solid var(--ink);
}

.blogcard__in {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
}

.blogcard time {
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--ink-muted);
}

.blogcard strong {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color 160ms var(--ease);
}

.blogcard:hover strong { color: var(--accent); }

.blogcard__in > span {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.postwrap { display: grid; gap: var(--s6); }

.post__side { display: none; }

@media (min-width: 1080px) {
  .postwrap {
    grid-template-columns: minmax(0, var(--prose)) minmax(240px, 1fr);
    gap: var(--s8);
    align-items: start;
  }
  .post__side {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + var(--s5));
  }
}

.toc .label { margin: 0 0 var(--s2); }
.toc a + a { border-top: 1px solid var(--line); }
.toc a:first-of-type { padding-top: 0; }