@font-face {
  font-family: 'Gambetta';
  src: url("./fonts/gambetta-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Gambetta';
  src: url("./fonts/gambetta-400-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Gambetta';
  src: url("./fonts/gambetta-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gambetta';
  src: url("./fonts/gambetta-500-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gambetta';
  src: url("./fonts/gambetta-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url("./fonts/satoshi-300-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url("./fonts/satoshi-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url("./fonts/satoshi-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url("./fonts/satoshi-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Wedding for $1,000: Ledger editorial design system */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  /* Referenced by the archive category grid and a few section margins. It was
     missing, which made those declarations invalid and silently drop out. */
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --font-display: 'Gambetta', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1180px;
  --prose: 68ch;
}

:root,
[data-theme='light'] {
  --color-bg: #f7f5f5;
  --color-surface: #fffefe;
  --color-surface-2: #eee9ec;
  --color-surface-3: #e4dee2;
  --color-text: #1b1a1d;
  --color-text-muted: #5f5a61;
  --color-text-faint: #6d6770;
  --color-border: #dcd6da;
  --color-border-strong: #c2bac0;
  --color-accent: #6b4763;
  --color-accent-hover: #563a50;
  --color-accent-soft: #eee5ec;
  --color-sage: #5f5b4a;
  --color-sage-soft: #e8e6e0;
  --color-text-inverse: #fbf9fa;
  --shadow-sm: 0 1px 2px rgba(30, 25, 32, 0.05);
  --shadow-md: 0 10px 30px -18px rgba(30, 25, 32, 0.28);
}

[data-theme='dark'] {
  --color-bg: #161418;
  --color-surface: #1d1a1f;
  --color-surface-2: #262229;
  --color-surface-3: #2f2a32;
  --color-text: #efebf0;
  --color-text-muted: #a49da8;
  --color-text-faint: #8c8590;
  --color-border: #332e36;
  --color-border-strong: #473f4a;
  --color-accent: #c39cba;
  --color-accent-hover: #d4b2cc;
  --color-accent-soft: #261e25;
  --color-sage: #b4ad96;
  --color-sage-soft: #23221c;
  --color-text-inverse: #161418;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky, so anchor jumps (#archive, the category links on the
     Straight Answers hub) would otherwise land with their heading tucked
     underneath it. */
  scroll-padding-top: 5.5rem;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 {
  font-size: var(--text-2xl);
}
h2 {
  font-size: var(--text-xl);
}
h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
h4 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.35;
}
p {
  text-wrap: pretty;
}
a {
  color: inherit;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection {
  background: var(--color-accent-soft);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 200;
}
[data-theme='dark'] .skip-link {
  color: var(--color-text-inverse);
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-2);
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-10));
}
.wrap--narrow {
  max-width: 860px;
}
section {
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}
.sec-tight {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}
.tinted {
  background: var(--color-surface-2);
}
.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.eyebrow--sage {
  color: var(--color-sage);
}
.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.muted {
  color: var(--color-text-muted);
}
.small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.tiny {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.center {
  text-align: center;
}
.stack > * + * {
  margin-top: var(--space-4);
}
.rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-10);
}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.header.is-scrolled {
  border-bottom-color: var(--color-border);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 68px;
  padding-block: var(--space-3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__mark {
  color: var(--color-accent);
  flex: 0 0 auto;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.brand__sub {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 3px;
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 1.4vw, var(--space-5));
}
.nav a {
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-text-muted);
  padding-block: var(--space-2);
  white-space: nowrap;
  transition: color 0.2s;
}
.nav a:hover {
  color: var(--color-text);
}
.nav a[aria-current='page'] {
  color: var(--color-text);
  box-shadow: inset 0 -1px 0 var(--color-accent);
}
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.2s, border-color 0.2s;
}
.icon-btn:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.nav-toggle {
  display: none;
}
.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.mobile-nav.is-open {
  display: block;
}
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0 var(--space-5);
}
.mobile-nav a {
  display: block;
  padding: var(--space-3) 0;
  text-decoration: none;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 1140px) {
  .nav {
    display: none;
  }
  .header__actions {
    margin-left: auto;
  }
  .nav-toggle {
    display: grid;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-3) var(--space-6);
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
[data-theme='dark'] .btn--primary {
  color: var(--color-text-inverse);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
}
.btn--ghost {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--ghost:hover {
  background: var(--color-surface-2);
}
.btn--small {
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.textlink {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  padding-bottom: 1px;
}
.textlink:hover {
  border-bottom-color: var(--color-accent);
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(var(--space-10), 6vw, var(--space-20)) 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
.hero h1 {
  font-size: var(--text-3xl);
  font-weight: 400;
}
.hero h1 em {
  font-style: italic;
  color: var(--color-accent);
}
.hero__figure {
  position: relative;
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.hero__badge {
  position: absolute;
  left: calc(-1 * var(--space-6));
  bottom: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
  max-width: 220px;
}
.hero__badge strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  display: block;
}
.trustline {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
@media (max-width: 880px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__figure img {
    aspect-ratio: 4 / 3;
  }
  .hero__badge {
    left: auto;
    right: var(--space-4);
    bottom: calc(-1 * var(--space-6));
  }
  .hero {
    padding-bottom: var(--space-8);
  }
}

/* ---------- page header ---------- */
.pagehead {
  padding-block: clamp(var(--space-10), 6vw, var(--space-16)) clamp(var(--space-6), 3vw, var(--space-10));
  border-bottom: 1px solid var(--color-border);
}
/* Page headings run the full width of their container: 1180px on the hub pages,
   860px on articles and archive posts. They used to be capped at 22ch, which
   broke short headlines onto three lines with half the row left empty. Ledes
   keep a reading measure. */
.pagehead .lede {
  margin-top: var(--space-5);
}

/* ---------- grids & cards ---------- */
.grid {
  display: grid;
  gap: clamp(var(--space-5), 2.5vw, var(--space-8));
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
/* An even number of wide cards should pair up into full rows rather than
   leaving one card orphaned on a row of its own. The 420px floor means two
   columns fit the content width and a third never does. */
.grid--pairs {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
/* With an odd number of cards the final one would sit alone on a half row, so
   it spans the full width instead. */
.grid > .card--full {
  grid-column: 1 / -1;
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
a.card {
  text-decoration: none;
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.card__body > :last-child {
  margin-top: auto;
}
.tag {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-sage);
}
.price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}
.plain-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
}
.note {
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  padding: var(--space-5);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm);
}
.note strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

/* ---------- tables ---------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 0;
}
/* amounts never break across lines; labels and notes wrap instead, so tables fit
   the card they sit in at any window size rather than hiding a column off the edge */
td.num {
  white-space: nowrap;
}
/* two-column tables (a label and an amount) never need to scroll: the label wraps and
   the amount stays whole on one line, however narrow the card they sit in */
table:not(:has(thead th:nth-child(3))) {
  min-width: 0;
}
table:not(:has(thead th:nth-child(3))) td.num,
table:not(:has(thead th:nth-child(3))) th.num {
  white-space: nowrap;
  width: 1%;
  padding-left: var(--space-4);
}
@media (max-width: 560px) {
  table {
    font-size: var(--text-xs);
  }
  /* wide tables stay readable and scroll horizontally instead of squeezing */
  table:not(:has(thead th:nth-child(3))) {
    min-width: 0;
  }

  /* the format comparison drops its prose column on a phone and fits without
     scrolling. Nothing is lost: each format repeats its "Best for" note in
     the card directly below the table. */
  .cmp {
    min-width: 0;
    width: 100%;
  }
  .cmp th:last-child,
  .cmp td:last-child {
    display: none;
  }
  .cmp th:first-child,
  .cmp td:first-child {
    min-width: 0;
  }
  /* on a phone the style name is allowed to wrap again, otherwise the three
     remaining columns cannot fit inside 375px */
  .cmp td.keep,
  .cmp th.keep {
    white-space: normal;
  }
  /* short column headings on a phone, so all three columns fit */
  .cmp .on-wide {
    display: none;
  }
  .cmp .on-narrow {
    display: inline;
  }
  .cmp th,
  .cmp td {
    padding: var(--space-2);
  }
  th,
  td {
    padding: var(--space-2) var(--space-3);
  }
}
caption {
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
  padding-bottom: var(--space-3);
}
th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: 600;
}
td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* short range columns read better centred under their heading than
   right-aligned, because the values are all the same width */
td.num--c,
th.num--c {
  text-align: center;
}
/* short labels that should never break across lines */
td.keep,
th.keep {
  white-space: nowrap;
}
/* paired long/short column headings: the short one only shows on phones */
.on-narrow {
  display: none;
}
tfoot td {
  font-weight: 700;
  border-bottom: 0;
  border-top: 2px solid var(--color-border-strong);
}
tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- steps ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
}
.steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.steps li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.steps .n {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent);
  line-height: 1.1;
}

/* ---------- feature / split ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: center;
}
.split--top {
  align-items: start;
}
.split img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.split--tall img {
  aspect-ratio: 4 / 5;
}
.fullbleed {
  width: 100%;
  height: clamp(240px, 38vw, 460px);
  object-fit: cover;
}

/* ---------- list of links ---------- */
.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.linklist li {
  border-bottom: 1px solid var(--color-border);
}
.linklist a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  text-decoration: none;
  transition: padding-inline 0.25s var(--ease), color 0.2s;
}
.linklist a:hover {
  padding-inline: var(--space-2);
  color: var(--color-accent);
}
.linklist .t {
  font-weight: 600;
  font-size: var(--text-base);
}
.linklist a .tiny {
  text-align: left;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .linklist a {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* ---------- newsletter ---------- */
.signup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 460px;
}
.signup input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 46px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  border-radius: 999px;
  font-size: var(--text-sm);
}
.signup input::placeholder {
  color: var(--color-text-faint);
}
.signup[hidden],
[data-signup-note][hidden] {
  display: none !important;
}
.signup input:disabled,
.signup button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.form-msg {
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  min-height: 1.5em;
}
.form-msg:empty {
  min-height: 0;
  margin-top: 0;
}
.form-msg[data-tone='success'] {
  color: var(--color-sage);
  font-weight: 500;
}
.form-msg[data-tone='error'] {
  color: var(--color-accent);
}

/* ---------- footer ---------- */
.footer {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-8);
}
.footer__grid {
  display: grid;
  /* Mobile-first: single column stack. The brand block, then each link group,
     each with room to breathe. */
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 720px) {
  .footer__grid {
    /* Tablet: brand row-spans across the top and links go 2x2 below it. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) clamp(var(--space-6), 3vw, var(--space-10));
  }
}
@media (min-width: 1024px) {
  .footer__grid {
    /* Desktop: brand column carries the wordmark, description and starter-kit form,
       so it needs real width. Link columns pack tighter — the labels are short. */
    grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 0.8fr));
    gap: clamp(var(--space-6), 3vw, var(--space-10)) clamp(var(--space-6), 3vw, var(--space-8));
  }
}
.footer h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.footer a {
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.footer a:hover {
  color: var(--color-accent);
}
.footer__base {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.footer__base p {
}
/* Bottom bar, modeled on The Aisle Agency footer: copyright on the left, small
   underlined legal links on the right. Stacks and centers on a phone. */
.footer__legal {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.footer__legal p {
  text-wrap: balance;
}
.footer__legal nav {
  display: flex;
  gap: var(--space-5);
}
.footer .footer__legal a {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 180ms ease;
}
.footer .footer__legal a:hover {
  color: var(--color-text-faint);
  opacity: 0.7;
}
@media (min-width: 640px) {
  .footer__legal {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.legal table td:first-child {
  white-space: nowrap;
  font-weight: 600;
}

/* ---------- prose (articles) ---------- */
.prose {
  max-width: 100%;
}
.prose > * + * {
  margin-top: var(--space-5);
}
.prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-12);
}
.prose h3 {
  margin-top: var(--space-8);
}
.prose ul,
.prose ol {
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}
.prose blockquote {
  margin: var(--space-8) 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.4;
}
.prose figure {
  margin: var(--space-10) 0;
}
.prose figure img {
  border-radius: var(--radius);
  width: 100%;
}
.prose figcaption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
}

/* ---------- budget builder ---------- */
.builder {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: start;
}
@media (max-width: 940px) {
  .builder {
    grid-template-columns: minmax(0, 1fr);
  }
}
.builder > * {
  min-width: 0;
}
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(var(--space-5), 2.5vw, var(--space-6));
}
.panel--sticky {
  position: sticky;
  top: 88px;
}
@media (max-width: 940px) {
  .panel--sticky {
    position: static;
  }
}
.field + .field {
  margin-top: var(--space-6);
}
.field > label,
.field .flabel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.field .val {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--color-surface-3);
  border-radius: 999px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
}
input[type='range']::-moz-range-track {
  height: 4px;
  background: var(--color-surface-3);
  border-radius: 999px;
}
input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid var(--color-surface);
}
.choices {
  display: grid;
  gap: var(--space-2);
}
.choices--2 {
  grid-template-columns: 1fr 1fr;
}
.choice {
  position: relative;
}
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice > span {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  line-height: 1.3;
}
.choice input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-weight: 600;
}
.choice input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.choice input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
}
.choice > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 var(--space-2);
}
.choice .tip {
  flex: 1 0 100%;
  padding: 0;
  border: 0;
}
.choice .rank {
  flex: none;
  padding: 0;
  border: 0;
  font-size: var(--text-xs);
  color: var(--color-accent-hover);
  font-weight: 700;
}
.budget-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
}
.budget-input span {
  color: var(--color-text-faint);
}
.budget-input input {
  border: 0;
  background: transparent;
  width: 100%;
  min-height: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.budget-input input:focus {
  outline: none;
}
.result-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--space-6);
}
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.kpi {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--color-surface);
}
.kpi .k {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
}
.kpi .v {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
}
.chart-box {
  position: relative;
  height: 300px;
  margin-bottom: var(--space-8);
}
.alloc-row td:first-child {
  font-weight: 600;
}
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: var(--space-2);
}
.tip {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
  margin-top: 2px;
  font-weight: 400;
}
.pri-flag {
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: 700;
  margin-left: var(--space-2);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-8);
  transform: translate(-50%, 20px);
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  font-size: var(--text-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 200;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- print ---------- */
@media print {
  .header,
  .footer,
  .mobile-nav,
  .no-print,
  .toast {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .panel,
  .card,
  .plain-card {
    border-color: #ccc;
  }
  section {
    padding-block: var(--space-6);
  }
  .builder {
    display: block !important;
  }
  .table-scroll {
    overflow: visible !important;
  }
  table {
    min-width: 0 !important;
    width: 100% !important;
  }
  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr 1fr !important;
  }
  a {
    text-decoration: none !important;
  }
  /* printing a single tool: hide everything else on the page */
  body.print-timeline .pagehead,
  body.print-timeline main > section:not(#timeline),
  body.print-timeline #timeline .panel,
  body.print-timeline #timeline .eyebrow,
  body.print-timeline #timeline > .wrap > h2,
  body.print-timeline #timeline > .wrap > p {
    display: none !important;
  }
}

/* ---------- archive: cards, chips, search ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(var(--space-6), 2.5vw, var(--space-10));
}
.pcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pcard__img {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  margin-bottom: var(--space-5);
}
.pcard__img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.pcard:hover .pcard__img img {
  transform: scale(1.035);
}
.pcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.pcard__cat {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}
.pcard__cat a {
  color: inherit;
  text-decoration: none;
}
.pcard__cat a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pcard h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.22;
  margin: 0;
  text-wrap: pretty;
}
.pcard h3 a {
  color: inherit;
  text-decoration: none;
}
.pcard h3 a:hover {
  color: var(--color-accent);
}
.pcard .small {
  margin: 0;
}
.pcard__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chip span {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}
.chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.chip:hover span {
  color: var(--color-accent);
}
.catgroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(var(--space-7), 3vw, var(--space-10));
}
.catgroup h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.searchbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  max-width: 40rem;
}
.searchbar input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
}
.searchbar input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.note--warn {
  border-left-color: var(--color-sage);
  background: var(--color-sage-soft);
}
.prose--archive img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: var(--space-8) auto;
}
.prose--archive h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-10);
}
.prose--archive h3,
.prose--archive h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  margin-top: var(--space-8);
}
.prose--archive blockquote {
  margin: var(--space-8) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-style: italic;
}
.skel {
  display: block;
  height: 0.9em;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface-3), var(--color-surface-2));
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
.pcard[aria-hidden='true'] .pcard__img {
  background: var(--color-surface-2);
  animation: skel 1.4s ease-in-out infinite;
  background-image: linear-gradient(90deg, var(--color-surface-2), var(--color-surface-3), var(--color-surface-2));
  background-size: 200% 100%;
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel, .pcard[aria-hidden='true'] .pcard__img { animation: none; }
}

/* Tick list, used on the bookshop cards. A two-column grid rather than a list
   marker, so a line that wraps lines up with the first word of the item instead of
   hanging underneath the dot. */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.ticks li {
  display: grid;
  grid-template-columns: 0.55rem 1fr;
  gap: var(--space-3);
  align-items: start;
}
.ticks li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------------------------------------------------------------------------
   Advertise page: rate table, numbered criteria, and the enquiry form.
   --------------------------------------------------------------------------- */

/* The rate table is a real <table> because it is real tabular data, and because a
   screen reader announcing "row, Sponsored post you write it, $250" is better than
   anything a stack of divs produces. */
.rates {
  /* Capped rather than full width. In the 1180px wrapper a 100% wide table threw the
     price column so far from its placement name that the two stopped reading as a
     pair. Every section on this page shares one left edge, so the table is constrained
     here instead of by shrinking its wrapper. */
  width: 100%;
  max-width: 48rem;
  border-collapse: collapse;
  margin-top: var(--space-6);
  text-align: left;
}
.rates caption {
  caption-side: bottom;
  text-align: left;
  padding-top: var(--space-4);
  color: var(--color-text-muted);
}
.rates th,
.rates td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  vertical-align: baseline;
}
.rates th[scope='row'] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-text);
  padding-right: var(--space-6);
}
.rate__detail {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans, inherit);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.rate__price {
  white-space: nowrap;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent);
}
.rates tr:last-child th,
.rates tr:last-child td {
  border-bottom: 0;
}

/* Numbered criteria. Two columns so the body copy of a wrapped line lines up under
   the heading rather than under the number. */
.numbered-list {
  display: grid;
  gap: var(--space-7);
}
.numbered {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-5);
  align-items: start;
}
.numbered__n {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.1;
  color: var(--color-accent);
  padding-top: 0.15em;
  font-variant-numeric: tabular-nums;
}
.numbered h3 {
  margin: 0;
  font-size: var(--text-base);
}
.numbered p {
  margin-top: var(--space-3);
}

/* A crossed-out variant of .ticks for the decline list, so it does not read as a
   second list of things on offer. Inherits the grid, so wrapped lines still align. */
.ticks--no li::before {
  background: none;
  border-top: 1.5px solid var(--color-border-strong);
  border-radius: 0;
  width: 0.5rem;
  height: 0;
  margin-top: 0.75em;
}
.ticks--no li {
  color: var(--color-text-muted);
}

/* Form */
.form {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-6);
  max-width: 34rem;
}
.form__row {
  display: grid;
  gap: var(--space-2);
}
.form__row label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.form input[type='text'],
.form input[type='email'],
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.form__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
.form__check {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: var(--space-3);
  align-items: start;
}
.form__check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2em 0 0;
  accent-color: var(--color-accent);
}
.form__check label {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.form__check code {
  font-size: 0.9em;
}

/* The honeypot. Kept out of the accessibility tree with aria-hidden and out of the
   tab order with tabindex, then moved off screen rather than display:none, because
   some bots skip anything that is not rendered. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__row--bad input,
.form__row--bad select,
.form__row--bad textarea {
  border-color: #a04b4b;
}
.form__err {
  margin: 0;
  font-size: var(--text-sm);
  color: #8a3d3d;
}
.form__status {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-height: 1.5em;
}
.form__status--good {
  color: var(--color-sage);
}
.form__status--bad {
  color: #8a3d3d;
}
@media (prefers-color-scheme: dark) {
  .form__err,
  .form__status--bad {
    color: #d99a9a;
  }
  .form__row--bad input,
  .form__row--bad select,
  .form__row--bad textarea {
    border-color: #a86a6a;
  }
}

/* ------------------------------------------------------------------ */
/* Guest list, vendor templates and 30/60/90 checklist pages.         */
/* ------------------------------------------------------------------ */

/* A phase or tier heading: small caps label, then the name, then a right-aligned meta. */
.when {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-right: var(--space-3);
}

/* --- three-tier guest list --- */
.tierbox {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--color-surface);
}
.tierbox__hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-weight: 600;
}
.tierbox__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-2);
}
.tierbox .tiny {
  margin-top: var(--space-2);
}
.tierlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tierbox:has(.tierlist:empty) .tierlist__hd {
  display: none;
}
.tierlist:empty::after {
  content: "Nothing here yet.";
  display: block;
  font-size: var(--text-sm);
  opacity: 0.55;
}
.tierlist__hd,
.tierlist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.2em 4.6em 6.6em;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.tierlist__hd {
  border-top: 0;
  border-bottom: 1px solid var(--color-border);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.tierlist__hd span + span,
.gparty,
.grun {
  text-align: right;
}
.gacts {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.tierlist li:first-child {
  border-top: 0;
}
.tierlist li:first-child {
  padding-top: var(--space-3);
}
.tierlist .gname {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
.tierlist .gparty {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  opacity: 0.7;
}
.tierlist .grun {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  opacity: 0.55;
}
.tierlist .gdel {
  flex: 0 0 auto;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  font-size: var(--text-base);
  color: inherit;
  opacity: 0.45;
  border-radius: 4px;
}
.tierlist .gdel:hover,
.tierlist .gdel:focus-visible {
  opacity: 1;
}
.tierlist .gmove {
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: 999px;
  color: inherit;
  opacity: 0.75;
}
.tierlist .gmove:hover,
.tierlist .gmove:focus-visible {
  opacity: 1;
}

@media (max-width: 520px) {
  .tierlist__hd {
    display: none;
  }
  .tierlist li {
    grid-template-columns: minmax(0, 1fr) 4.6em 6.6em;
  }
  .tierlist .grun {
    display: none;
  }
}

/* --- conversation scripts --- */
.scripts {
  display: grid;
  gap: var(--space-6);
}
.script {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.script__hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}
.script__hd .tag {
  margin-left: auto;
}
.script__bd {
  margin: 0;
  padding: var(--space-5);
  border-left: 3px solid var(--color-accent);
  font-size: var(--text-base);
  line-height: 1.7;
}
.script__why {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}

/* --- vendor email templates --- */
.tp-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.tmpls {
  display: grid;
  gap: var(--space-7);
}
.tmpl {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
  scroll-margin-top: 90px;
}
.tmpl__hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.tmpl__hd h3 {
  margin: 0;
  font-size: var(--text-base);
}
.tmpl__hd .tag {
  margin-left: auto;
}
.tmpl__bd {
  padding: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.68;
}
.tmpl__bd p {
  margin: 0 0 var(--space-4);
}
.tmpl__bd p:last-child {
  margin-bottom: 0;
}
.tmpl__subj {
  font-weight: 600;
  padding-bottom: var(--space-4);
  border-bottom: 1px dashed var(--color-border);
}
.tmpl__list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  counter-reset: tl;
}
/* Hanging indent: a wrapped line lines up with the first word, not the marker. */
.tmpl__list li {
  counter-increment: tl;
  padding: var(--space-2) 0 var(--space-2) 2.1em;
  text-indent: -2.1em;
  border-top: 1px solid var(--color-border);
}
.tmpl__list li::before {
  content: counter(tl) ".";
  display: inline-block;
  width: 2.1em;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  opacity: 0.6;
}
.tmpl__ft {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.tmpl__why {
  margin: 0;
  flex: 1 1 320px;
  font-size: var(--text-sm);
}
.tmpl__ft .btn {
  flex: 0 0 auto;
}
/* A bracket the reader replaces themselves. */
.fillin {
  color: var(--color-accent);
  opacity: 0.85;
}
/* A bracket the details panel fills in. */
.tok {
  border-bottom: 1px dotted var(--color-accent);
}
.tok.is-filled {
  border-bottom: 0;
  font-weight: 600;
  background: var(--color-accent-soft);
  border-radius: 3px;
  padding: 0 2px;
}

/* --- 30/60/90 checklist --- */
.cl-top {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
.cl-progress {
  margin: var(--space-3) 0 var(--space-4);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
}
.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.25s ease;
}
.phase {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.phase__hd {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}
.phase__date {
  display: block;
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: 400;
  opacity: 0.7;
}
.phase.is-done .phase__hd {
  background: var(--color-surface-2);
}
.checks {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
}
.checks li + li {
  border-top: 1px solid var(--color-border);
}
/* Flex keeps a wrapped task aligned with the first word rather than the box. */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.check input {
  flex: 0 0 auto;
  margin: 0.22em 0 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-accent);
}
.check > span {
  flex: 1 1 auto;
  min-width: 0;
}
.check input:checked + span {
  opacity: 0.5;
  text-decoration: line-through;
}
.check:hover {
  background: var(--color-surface-2);
}

@media print {
  .tmpl,
  .script,
  .phase,
  .tierbox {
    break-inside: avoid;
    box-shadow: none;
  }
  .tierlist .gdel,
  .tierlist .gmove {
    display: none;
  }
  .tok.is-filled {
    background: none;
  }
}

.small.is-warn {
  color: var(--color-accent);
  font-weight: 600;
}

/* The cross-link strip at the foot of each tool page. */
.othertools {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.othertools li {
  border-bottom: 1px solid var(--color-border);
}
.othertools a {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  text-decoration: none;
  color: inherit;
}
.othertools a:hover .ot__name,
.othertools a:focus-visible .ot__name {
  color: var(--color-accent);
}
.ot__name {
  font-weight: 600;
}
.ot__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 640px) {
  .othertools a {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* narrow windows and narrow cards: tighter cell padding so every column fits */
@media (max-width: 900px) {
  .table-scroll th,
  .table-scroll td {
    padding: var(--space-2) var(--space-2) !important;
  }
  .table-scroll th {
    letter-spacing: 0.04em;
  }
}

/* very narrow phones: keep the logo, theme switch and menu button inside the window */
@media (max-width: 360px) {
  .header__inner {
    gap: var(--space-3);
  }
  .header__actions {
    margin-left: auto;
    gap: var(--space-1);
  }
  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .brand__sub {
    letter-spacing: 0.1em;
  }
}

/* mid-size windows: the format comparison's style names may wrap so all four columns fit */
@media (max-width: 760px) {
  .cmp td.keep,
  .cmp th.keep {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  /* on a phone, long quantities may wrap too, and long single words hyphenate
     instead of pushing the last column past the edge of the card */
  .table-scroll td.num {
    white-space: normal !important;
  }
  .table-scroll th {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}
@media (max-width: 360px) {
  .table-scroll th,
  .table-scroll td {
    padding-inline: 6px !important;
  }
}

/* ---------------------------------------------------------------- resources */
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: var(--space-10) var(--space-12);
}
.res h2 {
  font-size: var(--text-lg);
}
.res > .small {
  margin-top: var(--space-3);
}
.res__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.res__list li {
  border-bottom: 1px solid var(--color-border);
}
.res__list a {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-3) 0;
  text-decoration: none;
  transition: padding-inline 0.25s var(--ease), color 0.2s;
}
.res__list a:hover {
  padding-inline: var(--space-2);
  color: var(--color-accent);
}
.res__list .t {
  font-weight: 600;
  font-size: var(--text-sm);
}
.res__why {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.empty-card {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  background: var(--color-surface);
}

/* ---------------------------------------------------------------- contact */
.share-fields {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin: 0;
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}
.share-fields[hidden] {
  display: none;
}
.share-fields legend {
  font-family: var(--font-display);
  font-size: var(--text-base);
  padding: 0 var(--space-2);
}
.form__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form__check[hidden],
.form__hint[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- 404 */
.notfound__search {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  max-width: 40rem;
}
.notfound__search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  padding: 0.75rem 1.1rem;
}
.notfound__search input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
@media (max-width: 480px) {
  .notfound__search {
    flex-direction: column;
  }
}