/* blocks: every b-* component, one @scope each */

/*** tag-solutions.hbs ***/
.b-solutions-section {
  display: flex;
  /* 72px heading-to-content step */
  padding-block: 4.5rem clamp(4rem, 8vi, 6rem);
  flex-direction: column;
  gap: clamp(2rem, 5vi, 4rem); /* 64px -> 32px */
}
/* a group folds away when the filter hides its every row */
.tags-index .b-solutions:has(.b-card[hidden]):not(:has(.b-card:not([hidden]))) {
  display: none;
}
/* three groups per row */
.tags-index .tags-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}
/* the column tracks size the rows */
.tags-index .tags-columns .b-card {
  min-inline-size: 0;
}
/* the head's own hairline opens the group; the rows draw the rest */
.tags-index .tags-columns .b-solutions {
  gap: 0;
}
/* the group head: sans family name left, mono tag count right */
.tags-group-head {
  inline-size: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--border-secondary);
}
.tags-group-head h2 {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}
.tags-group-head p {
  color: var(--text-tertiary);
  /* counts are data — the mono digits voice */
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* rows are native <details> folds under their own hairlines */
.tags-index .tag-fold {
  border-block-end: 1px solid var(--border-secondary);
}
.tags-index .tag-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.875rem;
  /* the hover pill: wings overhang, content stays put */
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
  list-style: none; /* the summary triangle */
}
.tags-index .tag-row:hover {
  background-color: color-mix(in srgb, var(--fg-quaternary) 7%, transparent);
}
.tags-index .tag-row::-webkit-details-marker {
  display: none;
}
.tags-index .tag-row h3 {
  min-inline-size: 0; /* lets the ellipsis engage inside the flex row */
  margin-inline-end: auto; /* count + door hold the end edge */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: lowercase; /* display voice only — names stay as entered */
  color: color-mix(in oklch,
    var(--utility-brand-700) var(--badge-mix, 100%),
    var(--badge-to, var(--utility-brand-700)));
}
.tags-index .tag-row h3::before {
  content: "# ";
}
/* the fold caret rides inside the h3, so it wears the name's tint */
.tags-index .tag-row h3 svg {
  margin-inline-start: 0.25rem;
  vertical-align: -0.0625em;
  transition: rotate 0.2s ease;
}
.tags-index .tag-fold[open] .tag-row h3 svg {
  rotate: 180deg;
}
.tags-index .tag-row .tag-count {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
/* the door: a boxed button sliding in after the count on hover/focus, zero at rest */
.tags-index .tag-door {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  inline-size: 0;
  padding: 0.25rem 0;
  border: 1px solid var(--border-secondary);
  border-inline-width: 0;
  border-radius: 0.375rem;
  background-color: var(--bg-primary);
  color: var(--fg-quaternary);
  opacity: 0;
  margin-inline-start: -0.5rem; /* cancels the row gap while collapsed */
  transition: inline-size 0.15s ease, padding 0.15s ease,
    border-inline-width 0.15s ease, margin-inline-start 0.15s ease,
    opacity 0.15s ease, color 0.2s ease, background-color 0.2s ease;
}
.tags-index .tag-row:hover .tag-door,
.tags-index .tag-fold:has(:focus-visible) .tag-door {
  inline-size: 1.625rem;
  padding-inline: 0.25rem;
  border-inline-width: 1px;
  margin-inline-start: 0;
  opacity: 1;
}
/* no hover, no slide-in — touch keeps the door standing */
@media (hover: none) {
  .tags-index .tag-door {
    position: relative;
    overflow: visible;
    inline-size: 1.625rem;
    padding-inline: 0.25rem;
    border-inline-width: 1px;
    margin-inline-start: 0;
    opacity: 1;
  }
  .tags-index .tag-door::after {
    content: "";
    position: absolute;
    inset: -0.5625rem;
  }
}
.tags-index .tag-door:hover,
.tags-index .tag-door:focus-visible {
  color: var(--text-brand-secondary);
  background-color: color-mix(in srgb, var(--fg-quaternary) 12%, var(--bg-primary));
}
/* the unfolded reads: quiet sans links closing over the fold's line */
.tags-index .tag-reads {
  list-style: none;
  margin: 0;
  padding-block: 0 0.875rem;
  display: grid;
  gap: 0.375rem;
}
.tags-index .tag-reads a {
  display: block;
  padding-block: 0.6875rem; /* 44px rows for touch */
  margin-block: -0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.tags-index .tag-reads a:hover,
.tags-index .tag-reads a:focus-visible {
  text-decoration: underline;
}
/* stretch both links of the chain so every row shares the column width */
.tags-index .b-solutions > .stack {
  inline-size: 100%;
  gap: 0; /* the rows' hairline padding owns the rhythm */
}
.tags-index .stack > .b-card {
  inline-size: 100%;
  max-inline-size: none;
}
/* columns step down 3 to 2 to 1 */
@media (width <= 64rem) {
  .tags-index .tags-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width <= 40rem) {
  .tags-index .tags-columns {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vi, 4rem);
  }
}

/* Solutions list: heading + card grid; :scope-anchored selectors only */
@scope (.b-solutions) {
  :scope {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 3rem;
    @media (width <= 375px) {
      gap: 2rem;
    }
  }
  /* card grid */
  :scope > div {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 2rem;
    /* explicit width: align-items:start would let this box grow past the section */
    inline-size: 100%;
    & > * {flex: 1;}
    /* explicit single column: wrap alone lets zero-min cards share a line */
    @media (width <= 480px) {
      flex-direction: column;
      align-items: stretch;
    }
  }
  /* tags index: cards stack in a single column under the heading */
  :scope > div.stack {
    flex-direction: column;
    gap: 1rem;
    & > * {flex: none;}
  }
}
/* the shared card system (.b-card scope, badges, künye) lives in cards.css */

/* the homepage's own blocks live in home.css */

/*** error.hbs — view-all CTA button (the span's white text assumes the primary look) ***/
@scope (.b-cta) {
  :scope {
    display: flex;
    margin-block-start: 1rem;
  }
  /* the primary look comes from buttons.css; the cta runs larger */
  a[data-button] {
    margin-inline: auto;
    padding-block: calc(0.75rem - 2px);
    padding-inline: calc(1.125rem - 2px);
    border-width: 2px;
  }
  span {
    display: block;
    padding-inline: 0.125rem;
    color: var(--text-white);
    font-weight: 600;
    line-height: 1.5;
  }
}


/*** challenge filter — challenge-filter.hbs + assets/js/filter.js: one row under one hairline ***/
@scope (.b-filter-bar) {
  :scope {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* count row sits 10px over the fields */
  }
  .filter-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  /* the row folds away while Clear all hides */
  .filter-heading:not(:has([data-filter-clear]:not([hidden]))) {
    display: none;
  }
  /* Clear all rides the right edge as bare mono text */
  [data-filter-clear] {
    margin-inline-start: auto;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.5;
    transition: color 0.2s ease;
  }
  [data-filter-clear]:hover {
    color: var(--text-brand-secondary);
    text-decoration: underline;
  }
  /* the empty state: a quiet sans sentence */
  [data-filter-empty] {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  /* one row over one hairline; narrow: search on its own row, the pairs in a 2x2 grid */
  .filter-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.25rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--border-primary);
    @media (width <= 700px) {
      label {
        flex: 1 1 calc(50% - 1.125rem);
        min-inline-size: 0;
      }
      /* in-box tap room lifts the 17px pairs toward the 44px floor */
      label:has(select) {
        padding-block: 0.625rem;
      }
      /* an unfused pair (before filter.js) must shrink, never overflow the phone viewport */
      select {
        min-inline-size: 0;
      }
      .filter-search {
        flex-basis: 100%;
      }
    }
  }
  /* each select is an inline LABEL VALUE pair */
  label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  /* hover/focus: one underline under the whole pair (the transparent border reserves the pixel) */
  label:has(select) {
    cursor: pointer;
    border-block-end: 1px solid transparent;
    transition: border-color 0.2s ease;
  }
  label:has(select):hover,
  label:has(select:focus-visible) {
    border-block-end-color: var(--fg-quaternary);
  }
  /* fused pair (filter.js): the label overlays the select's start padding */
  label.is-fused {
    position: relative;
  }
  label.is-fused > span:not(.field) {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    translate: 0 -50%;
    pointer-events: none;
    white-space: nowrap;
  }
  /* field labels in the mono register */
  label > span:not(.field) {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.5;
  }
  .filter-search {
    flex: 1;
    min-inline-size: min(16rem, 100%);
  }
  /* the input fills the label instead of its ~250px default */
  .filter-search .field {
    flex: 1;
  }
  .field {
    position: relative;
    display: flex;
    align-items: center;
    min-inline-size: 0;
  }
  /* bare fields; block padding is the 44px tap floor, the margin keeps the row height */
  input,
  select {
    inline-size: 100%;
    padding: 0.625rem 0;
    margin-block: -0.625rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
  }
  input::placeholder {
    color: var(--text-tertiary);
  }
  /* placeholder clears on :focus (tap and click too) */
  input:focus::placeholder {
    color: transparent;
  }
  /* focus draws nothing of its own; the pair underline answers below */
  input:focus-visible,
  select:focus-visible {
    outline: none;
  }
  /* selects: native arrow off, mono value, small solid caret; field-sizing keeps it snug */
  select {
    appearance: none;
    inline-size: auto;
    field-sizing: content;
    padding-block: 0.8125rem;
    margin-block: -0.8125rem;
    padding-inline-end: 1.125rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .field:has(select)::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inline-size: 0.5rem;
    block-size: 0.3125rem;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: var(--fg-quaternary);
    pointer-events: none;
  }
}



/*** partials/header.hbs ***/
@scope (.b-header-section) {
  :scope {
    /* 96px nav-to-breadcrumb step */
    padding-block-start: 6rem;
    text-align: center;
    text-wrap: pretty;
  }
  /* breadcrumbs above the heading — 16px to the h1 */
  :scope > nav {
    margin-block-end: 1rem;
  }
  hgroup {
    max-inline-size: 48rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  hgroup > p:first-child {
    color: var(--text-brand-secondary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    @media (width <= 375px) {
      font-size: 0.875rem;
      line-height: 1.42857;
    }
  }
  h1 {
    color: var(--text-primary);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    @media (width <= 375px) {
      font-size: 2.25rem;
      line-height: 1.22222;
    }
  }
  hgroup > h1 + p {
    /* 0.75rem hgroup gap + margin = 1.5rem (1rem mobile) to the heading pair */
    margin-block-start: 0.75rem;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    @media (width <= 375px) {
      margin-block-start: 0.25rem;
      font-size: 1.125rem;
      line-height: 1.55556;
    }
  }
}


/*** author.hbs — the author hero: avatar, hgroup, social doors ***/
@scope (.b-author-hero) {
  /* the avatar disc: the brand icon on the brand tint, a profile image replaces it */
  .author-avatar {
    inline-size: 9rem;
    aspect-ratio: 1;
    margin-inline: auto;
    margin-block: 2.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--utility-brand-50);
    overflow: hidden;
  }
  .author-avatar svg {
    inline-size: 4rem;
    block-size: 4rem;
  }
  .author-avatar svg + svg {
    display: none;
  }
  .author-avatar > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  /* the social doors: bordered squares, the tag-door's wash on hover */
  .author-socials {
    margin-block-start: 1.75rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .author-socials:empty {
    display: none;
  }
  .social-door {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    aspect-ratio: 1;
    border: 1px solid var(--border-secondary);
    border-radius: 0.625rem;
    color: var(--text-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .social-door:hover,
  .social-door:focus-visible {
    background-color: color-mix(in srgb, var(--fg-quaternary) 12%, var(--bg-primary));
    color: var(--text-primary);
  }
  /* the hero-to-list breath under the social doors */
  :scope {
    padding-block-end: 2.5rem;
  }
  @media (width <= 375px) {
    .author-avatar {
      inline-size: 8rem;
    }
    .author-avatar svg {
      inline-size: 3.5rem;
      block-size: 3.5rem;
    }
  }
}

/*** author.hbs — the head row over the read-card grid ***/
.b-author-latest {
  gap: 0;
}
.b-author-latest .author-latest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-block-end: 2.5rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--border-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.b-author-latest .author-latest-head h2 {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}


/*** partials/navigation.hbs ***/
@scope (.b-navigation-section) {
  :scope {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background-color: var(--bg-primary);

    /* three zones: logo | menu | controls, the menu on the true center */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1rem;
    /* the items carry the 44px touch floor; the bar itself stays flat */
    padding-block: 0.1875rem;
    /* full-width bar; the padding realigns content to the 76rem column */
    padding-inline: max(var(--padding-inline, 1rem), calc((100% - 76rem) / 2));
    /* narrow screens: a flatter bar (same line the logo hides at) */
    @media (width <= 700px) {
      padding-block: 0.125rem;
      font-size: 0.875rem; /* inherits into every nav label */
    }
    /* (view-transition-name lives in interactive.css) */
    /* narrow: the nav scrolls sideways; thin scrollbar on hover devices only */
    overflow-x: auto;
    scrollbar-width: none;
    @media (hover: hover) {
      scrollbar-width: thin;
      scrollbar-color: var(--fg-quaternary) transparent;
    }
  }
  /* scroll hint: a sticky end-edge fade while overflowed and not at the end (nav-scroll.js) */
  :scope::after {
    content: "";
    grid-area: 1 / 1 / 2 / -1;
    justify-self: end;
    align-self: stretch;
    position: sticky;
    inset-inline-end: 0;
    inline-size: 3rem;
    margin-block: -0.5rem;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-primary));
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  :scope[data-nav-overflow]:not([data-nav-end])::after {
    opacity: 1;
  }
  :scope > ul {
    justify-self: center;
  }
  /* every door owns the 44px touch floor; labels never wrap */
  :scope > div:first-child > a,
  ul a,
  ul button,
  :scope > div:last-child a:not(.nav-account) {
    min-block-size: 2.75rem;
    white-space: nowrap;
  }
  ul a {
    display: flex;
    align-items: center;
  }
  /* the icon squares take an invisible 44px tap box */
  :scope button[data-settings-toggle],
  :scope > div:last-child a.nav-account {
    position: relative;
  }
  :scope button[data-settings-toggle]::after,
  :scope > div:last-child a.nav-account::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
  }
  a {
    display: block;
    text-decoration: none;
  }
  /* brand mark: icon + wordmark; the wordmark viewBox carries whitespace */
  :scope > div:first-child > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  :scope > div:first-child > a svg {
    display: block;
    inline-size: auto;
  }
  :scope > div:first-child > a svg:first-child {
    block-size: 1.875rem; /* the square icon */
  }
  :scope > div:first-child > a svg:last-child {
    /* sized so the lettering sits just under the menu font size */
    block-size: 1.5rem;
  }
  /* logo zone */
  :scope > div:first-child {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  /* phones: the menu stays; the wordmark drops, the icon steps down */
  @media (width <= 55rem) {
    :scope > div:first-child > a svg:last-child {
      display: none;
    }
  }
  @media (width <= 44rem) {
    :scope {
      column-gap: 0.375rem;
    }
    :scope > div:first-child > a svg:first-child {
      block-size: 1.625rem;
    }
    :scope > div:last-child {
      gap: 0.625rem;
    }
  }
  ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  ul a {
    padding-inline: 0.375rem;
    padding-block: 0.25rem;
    border-radius: 0.5rem;
  }
  /* menu voice: mono small caps */
  ul span {
    padding-inline: 0.125rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.5;
    transition: color 0.2s ease;
  }
  /* search: a <button> menu item, chrome stripped */
  ul button {
    display: flex;
    align-items: center;
    /* tight: label + hint read as one item */
    gap: 0.25rem;
    padding-inline: 0.375rem;
    padding-block: 0.25rem;
    border-radius: 0.5rem;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: var(--text-secondary);
    transition: color 0.2s ease;
  }
  /* bare gray hint via CSS content keyed on the platform stamp; hidden without a keyboard */
  ul button kbd {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1;
    color: var(--fg-quaternary);
    @media (hover: none) {
      display: none;
    }
  }
  /* phones: a tighter menu (after the ul rules above, source order wins) */
  @media (width <= 44rem) {
    ul {
      gap: 0.25rem;
    }
    ul a,
    ul button {
      padding-inline: 0.25rem;
    }
    ul span {
      font-size: 0.75rem;
    }
  }
  /* current page: the shared accent */
  ul a[aria-current="page"] span {
    color: var(--accent-text);
    /* second, non-color signal (WCAG 1.4.1) */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
  }
  /* login / signup group */
  :scope > div:last-child {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    justify-self: end;
  }
  /* bare icon trigger (buttons.css look, interactive.css hover) */
  :scope button[data-settings-toggle] {
    padding: 0.25rem;
  }
  :scope button[data-settings-toggle] svg {
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
  /* account doors in the menu's mono voice; sign up alone speaks brand */
  :scope > div:last-child a:not(.nav-account) {
    display: flex;
    align-items: center; /* centers the label in the 44px hit box */
    padding-block: 0.25rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.5;
    transition: color 0.2s ease;
  }
  :scope > div:last-child a.nav-signup {
    color: var(--accent-text);
  }
  /* phones: the text account links fold into the .nav-account square */
  :scope > div:last-child a.nav-account {
    display: none;
  }
  @media (width <= 44rem) {
    :scope > div:last-child a:not(.nav-account) {
      display: none;
    }
    :scope > div:last-child a.nav-account {
      display: flex;
      align-items: center;
      justify-content: center;
      min-inline-size: 0;
      inline-size: 1.8125rem;
      block-size: 1.8125rem;
      padding: 0;
    }
    :scope > div:last-child a.nav-account svg {
      display: block;
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
  }
}
/* outside the nav @scope: :root can't match inside a scoped block */
.b-navigation-section ul button kbd::before {
  content: "Ctrl+K";
}
:root[data-mac] .b-navigation-section ul button kbd::before {
  content: "⌘K";
}

/*** post.hbs ***/
/* scoped to the article; .editor-content is the lower boundary */
@scope (.b-post) to (.editor-content) {
  /* :scope > header, so nested headers don't inherit the centering */
  :scope > header {
    /* nav to breadcrumb 96px, breadcrumb to title 16px (the gap) */
    padding-block-start: 6rem;
    /* the hero arrow's tooltip pill would widen the phone viewport; clip */
    overflow-x: clip;
    text-align: center;
    text-wrap: pretty;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  /* static-page feature images share the hero's 48rem measure */
  :scope > header > figure {
    inline-size: min(100%, 48rem);
  }
  :scope > header > figure img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  hgroup {
    max-inline-size: 48rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  h1 {
    color: var(--text-primary);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    @media (width <= 375px) {
      font-size: 2.25rem;
      line-height: 1.22222;
    }
  }
  /* external door to the original challenge, glued to the last word */
  h1 .hero-external {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    margin-inline-start: 0.75rem;
    color: var(--fg-quaternary);
  }
  hgroup > h1 + p {
    /* 0.75rem hgroup gap + margin = 1.5rem (1rem mobile) to the heading pair */
    margin-block-start: 0.75rem;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    @media (width <= 375px) {
      margin-block-start: 0.25rem;
      font-size: 1.125rem;
      line-height: 1.55556;
    }
  }
  /* the challenge hero's meta line: the card kicker's words, dotted */
  .collection-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .collection-meta span + span::before {
    content: "· ";
    color: var(--fg-quaternary);
  }
}

/*** post footer — post.hbs: one small uppercase line, meta left, refs right ***/
@scope (.b-post-footer) {
  :scope {
    padding-block: 1.5rem;
    /* meta left, refs right; wraps when narrow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1.5;
    @media (width <= 375px) {
      padding-block-end: 0;
    }
    /* phones: everything centers, avatar over the text */
    @media (width <= 480px) {
      justify-content: center;
      text-align: center;
    }
  }
  /* the meta zone: the avatar disc beside author-over-dates */
  :scope > div:first-child {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    @media (width <= 480px) {
      flex-direction: column;
      gap: 0.75rem;
    }
  }
  /* the author-page avatar recipe at footer scale */
  .post-avatar {
    flex-shrink: 0;
    inline-size: 3rem;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--utility-brand-50);
    overflow: hidden;
  }
  .post-avatar svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }
  .post-avatar svg + svg {
    display: none;
  }
  .post-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  :scope > div:first-child > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    @media (width <= 480px) {
      align-items: center;
    }
  }
  .tags {
    /* parent ref over the tag line on the end edge; the auto margin holds it when wrapping */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    margin-inline-start: auto;
    /* takes the remaining width so the tag fold happens on the meta row */
    flex: 1 1 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    /* phones: the block takes its own full row under the meta */
    @media (width <= 480px) {
      flex-basis: 100%;
      align-items: center;
    }
  }
  /* the tags' own row: one line; post-tags.js folds the overflow behind +N */
  .tag-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.375rem 1rem;
    max-inline-size: 100%;
    @media (width <= 480px) {
      justify-content: center;
    }
  }
  .tag-line > * {
    flex-shrink: 0;
  }
  /* the +N fold chip: a quiet mono pill on the quaternary wash */
  .tag-more {
    font: inherit;
    font-family: var(--font-mono);
    letter-spacing: 0;
    color: var(--text-secondary);
    background: color-mix(in oklch, var(--fg-quaternary) 12%, var(--bg-primary));
    border: 0;
    border-radius: 999px;
    padding: 0.125rem 0.625rem;
    cursor: pointer;
  }
  .tag-more:hover,
  .tag-more:focus-visible {
    background: color-mix(in oklch, var(--fg-quaternary) 20%, var(--bg-primary));
  }
  .tag-line:not(:has(*)),
  .tags:not(:has(a)) {
    display: none;
  }
  address {
    font-style: normal;
  }
  /* the author is the line's one ink-strong door */
  a,
  p a {
    text-decoration: none;
    color: var(--text-primary);
    text-transform: uppercase;
  }
  /* the date lines speak mono */
  p {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: inherit;
    text-transform: uppercase;
    line-height: inherit;
    margin-block-end: 0;
  }
  /* the cards' footer-reference voice, mirrored from cards.css */
  .card-ref {
    font-family: var(--font-mono);
    color: var(--utility-blue-light-700);
  }
  .card-tag {
    font-family: var(--font-mono);
    color: color-mix(in oklch,
      var(--utility-brand-700) var(--badge-mix, 100%),
      var(--badge-to, var(--utility-brand-700)));
    text-transform: lowercase;
  }
  .card-tag::before {
    content: "# ";
  }
  .card-ref:hover,
  .card-ref:focus-visible,
  .card-tag:hover,
  .card-tag:focus-visible {
    text-decoration: underline;
  }
}

/*** sibling pager — post-siblings.hbs + post-siblings.js ***/
@scope (.b-post-siblings) {
  :scope {
    margin-block: 2.5rem 3.5rem;
  }
  /* the JS-off face: a quiet plain list */
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .sib-row {
    padding-block: 0.375rem;
  }
  .sib-row a {
    color: var(--text-primary);
    text-decoration: none;
  }
  .sib-row a:hover,
  .sib-row a:focus-visible {
    text-decoration: underline;
  }
  /* the pager: prev on the start edge, next on the end, hairlines above and below */
  .sib-pager {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    padding-block: 1.25rem;
    border-block: 1px solid var(--border-secondary);
  }
  /* two-line door: mono kicker (arrowed) over the number + title line */
  .sib-door {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-inline-size: 0;
    color: var(--text-primary);
    text-decoration: none;
  }
  /* a lone next door keeps the end edge */
  .sib-next {
    margin-inline-start: auto;
    align-items: flex-end;
    text-align: end;
  }
  /* phones: each door on its own centered row; the chevron fills hide */
  @media (width <= 480px) {
    .sib-pager {
      flex-direction: column;
      align-items: center;
    }
    .sib-door,
    .sib-next {
      margin-inline-start: 0;
      align-items: center;
      text-align: center;
    }
    .sib-fill {
      display: none;
    }
  }
  /* one hover for the whole door: every piece answers in brand together */
  .sib-door:hover,
  .sib-door:focus-visible {
    color: var(--text-brand-secondary);
  }
  .sib-door:hover :is(.door-kicker, .door-num),
  .sib-door:focus-visible :is(.door-kicker, .door-num) {
    color: inherit;
  }
  .door-kicker {
    display: inline-flex;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .door-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-inline-size: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
  }
  .door-num {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
  }
  /* the doorless seat's chevron marks (first/last reads) */
  .sib-fill {
    align-self: center;
    display: inline-flex;
    gap: 0.25rem;
    color: var(--fg-quaternary);
    user-select: none;
  }
  .door-arrow {
    display: inline-flex;
    align-self: center;
  }
}

/*** text-size controls — injected by assets/js/text-size.js above the toc ***/
/* the active-direction button glows; :root carries the flag, so outside the scope */
:root[data-text-scaled="up"] .b-text-size button[data-step="1"],
:root[data-text-scaled="down"] .b-text-size button[data-step="-1"] {
  color: var(--text-brand-secondary);
}
@scope (.b-text-size) {
  :scope {
    position: relative; /* anchors the transient %-label */
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-block-end: 1rem;
    user-select: none; /* double-clicks must not select neighbors */
  }
  button {
    position: relative;
  }
  button::after {
    content: "";
    position: absolute;
    inset: -0.3125rem;
  }
  /* flashes the current size right above the buttons after a click */
  .scale-label {
    position: absolute;
    inset-block-end: calc(100% + 0.125rem);
    inset-inline-end: 0.25rem;
    color: var(--text-brand-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .scale-label[data-show] {
    opacity: 1;
    transition: opacity 0.15s ease;
  }
}

/*** table of contents — injected by assets/js/toc.js on post pages ***/
@scope (.b-toc-inline) {
  :scope {
    border: 1px solid var(--border-primary);
    border-radius: 0.75rem;
    margin-block-end: 3rem;
    @media (width <= 375px) {
      margin-block-end: 2.5rem;
    }
  }
  summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
  /* the mono header word; with code blocks it becomes CONTENTS · CODE tabs (toc.js) */
  .toc-label,
  .toc-tabs [role="tab"] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .toc-tabs {
    display: flex;
    align-self: stretch;
    gap: 0.25rem;
    margin-block: -0.75rem; /* tabs span the bar's full height */
  }
  .toc-tabs [role="tab"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    border: 0;
    background: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .toc-tabs [role="tab"]:first-child {
    margin-inline-start: -0.5rem;
  }
  .toc-tabs [role="tab"]:hover,
  .toc-tabs [role="tab"][aria-selected="true"] {
    color: var(--text-primary);
  }
  /* the active tab's underline: gray closed, brand open */
  .toc-tabs [role="tab"][aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 0.5rem;
    inset-block-end: -1px;
    block-size: 2px;
    background-color: var(--fg-quaternary);
  }
  :scope[open] .toc-tabs [role="tab"][aria-selected="true"]::after {
    background-color: var(--accent);
  }
  /* one panel shows at a time, keyed on the box's data-tab */
  :scope[data-tab="code"] .toc-list,
  :scope[data-tab="contents"] .toc-code {
    display: none;
  }
  /* code rows: block-name door under a hairline, caption doors on the end edge */
  .toc-code li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-block-end: 1px solid var(--border-secondary);
  }
  .toc-code li:last-child {
    border-block-end: 0;
  }
  .toc-code li > a:first-child {
    flex: 1;
    min-inline-size: 0;
    padding-block: 0.625rem;
    font-weight: 500;
  }
  /* the doors sit apart like the footer's social squares */
  .toc-doors {
    display: flex;
    gap: 0.5rem;
    margin-inline-end: -0.5rem;
  }
  .toc-doors a {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 0.5rem;
    color: var(--fg-quaternary);
  }
  .toc-doors a:hover,
  .toc-doors a:focus-visible {
    background-color: color-mix(in srgb, var(--fg-quaternary) 12%, var(--bg-primary));
  }
  .toc-doors a::after {
    content: "";
    position: absolute;
    inset: -0.25rem;
  }
  /* the bar names the section in view on the end edge; one line, truncates */
  .toc-current {
    flex: 1;
    min-inline-size: 0;
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    /* the toc reads alongside the body, so it follows A-/A/A+ too */
    font-size: calc(0.875rem * var(--reader-scale, 1));
    font-weight: 600;
    line-height: 1.42857;
  }
  /* the toggle mark: chevron-down, flipped while open */
  .toc-caret {
    display: flex;
    color: var(--fg-quaternary);
    transition: rotate 0.2s ease;
  }
  :scope[open] .toc-caret {
    rotate: 180deg;
  }
  .toc-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  /* 24px squares at the old 22px spot: the margin cancels the padding */
  summary button[data-button] {
    position: relative;
    padding: 0.3125rem;
    margin: -0.0625rem;
  }
  /* and a 44px hit box on top, still without moving */
  summary button[data-button]::after {
    content: "";
    position: absolute;
    inset: -0.625rem;
  }
  /* hop arrows answer hover with the quaternary wash square */
  summary button[data-button]:hover,
  summary button[data-button]:focus-visible {
    background-color: color-mix(in srgb, var(--fg-quaternary) 12%, var(--bg-primary));
  }
  /* a hop click flashes the arrow in the brand color (toc.js) */
  button[data-hop].is-hopped {
    color: var(--text-brand-secondary);
  }
  ol {
    list-style: none;
    padding: 0.5rem 1.25rem 1rem;
    margin-block-end: 0;
    border-block-start: 1px solid var(--border-primary);
  }
  li + li {
    margin-block-start: 0;
  }
  li a {
    display: block;
    padding-block: 0.25rem;
    color: var(--text-primary);
    font-size: calc(0.875rem * var(--reader-scale, 1));
    font-weight: 600;
    line-height: 1.42857;
    text-decoration: none;
    /* long titles truncate with … instead of wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* subheadings hang quiet off a left guide line */
  .toc-sub a {
    margin-inline-start: 0.375rem;
    border-inline-start: 1px solid var(--border-primary);
    padding-inline-start: 1rem;
    color: var(--text-tertiary);
    font-weight: 400;
  }
  /* scrollspy: the section currently in view answers in the accent */
  a[aria-current="true"] {
    color: var(--accent-text);
    font-weight: 600;
  }
}

/* data-floating (toc.js): a frosted bar dropping its panel on click */

/* docked list: ~6 rows, scrolls inside; scales with the reader text */
.b-toc-inline ol {
  max-block-size: min(40vb, calc(12rem * var(--reader-scale, 1)));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--fg-quaternary) transparent;
}
/* glass on summary and dropdown separately, never the container */
.b-toc-inline[data-floating] {
  box-shadow:
    0 4px 6px -2px rgb(var(--shadow-rgb) / 0.03),
    0 12px 16px -4px rgb(var(--shadow-rgb) / 0.08);
  transition: opacity 0.2s ease;
}
/* hiding fades, revealing snaps; pointer events stay on for the hover way back */
.b-toc-inline[data-floating][data-hidden] {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.b-toc-inline[data-floating] summary {
  border-radius: calc(0.75rem - 1px);
  background-color: color-mix(in srgb, var(--bg-primary) 75%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* floating open list drops down absolutely, the page never shifts */
.b-toc-inline[data-floating] ol {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline: 0;
  padding: 0.5rem 1.25rem 1rem;
  border: 1px solid var(--border-primary);
  border-radius: 0.75rem;
  /* lighter blur than the bar */
  background-color: color-mix(in srgb, var(--bg-primary) 75%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 6px -2px rgb(var(--shadow-rgb) / 0.03),
    0 12px 16px -4px rgb(var(--shadow-rgb) / 0.08);
}
/* fixed under the nav (toc.js sets the top), content-column wide; a placeholder holds the slot */
.b-post .b-toc-inline[data-floating] {
  position: fixed;
  z-index: 5;
  inset-block-start: 5rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(45rem, 100vi - 2rem);
  margin-block-end: 0;
}

/*** breadcrumbs — partials/breadcrumbs.hbs: terminal path in mono ***/
@scope (.b-breadcrumbs) {
  ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  /* the / separator */
  li > span[aria-hidden] {
    color: var(--fg-quaternary);
  }
  a {
    position: relative;
    padding: 0.25rem;
    color: var(--text-tertiary);
    text-decoration: none;
    border-radius: 0.375rem;
  }
  a::after {
    content: "";
    position: absolute;
    inset: -0.5rem 0;
  }
  span[aria-current] {
    padding: 0.25rem;
    color: var(--text-primary);
    font-weight: 600;
  }
  /* phones: a three-segment trail drops its current segment */
  @media (width <= 480px) {
    ol:has(> li:nth-child(3)) > li:last-child {
      display: none;
    }
  }
}

/*** pagination — Ghost's {{pagination}} helper output ***/
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  color: var(--text-tertiary);
  font-size: 0.875rem;
  line-height: 1.42857;
}
.pagination a {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
}

/*** back-to-top — injected by assets/js/to-top.js ***/
/* a bare data-button="icon" that floats; the icon draws its own ring */
.b-to-top {
  position: fixed;
  /* lifted off the very corner */
  inset-block-end: 2.5rem;
  inset-inline-end: 1.5rem;
  z-index: 1000;
  @media (width <= 44rem) {
    inset-block-end: calc(4.25rem + env(safe-area-inset-bottom));
  }
  /* (reduced-motion damping is global, in interactive.css) */
  transition: opacity 0.25s ease, translate 0.25s ease;
}
/* pointer: hidden at rest, revealed on approach; touch keeps it visible; :where() keeps the reveals winning */
@media (hover: hover) {
  .b-to-top.is-shown:where(:not(.is-active)) {
    opacity: 0;
    /* linger before fading, whatever revealed it */
    transition-delay: 1.5s;
  }
  .b-to-top:hover,
  .b-to-top:focus-visible,
  .b-to-top.is-intro,
  .b-to-top.is-bottom {
    opacity: 1; /* is-intro: hello on arrival; is-bottom: page's end */
    transition-delay: 0s; /* revealing is instant */
  }
  .b-to-top::before {
    content: "";
    position: absolute;
    inset: -1.25rem;
  }
}
.b-to-top:not(.is-shown) {
  opacity: 0;
  translate: 0 0.75rem;
  pointer-events: none;
}
/* is-active: action color until the cycle resets; color on the svg beats the icon-hover */
.b-to-top svg {
  transition: rotate 0.25s ease;
}
.b-to-top.is-active svg {
  color: var(--editor-accent, var(--utility-brand-700));
}
.b-to-top.is-return svg {
  rotate: 180deg;
}

/*** site footer — partials/footer.hbs: signup bar over the band (brand, links, social, legal row) ***/
@scope (.b-footer) {
  :scope {
    display: flex;
    flex-direction: column;
    margin-block-start: clamp(2.5rem, 5vi, 4rem);
  }
  .footer-band {
    padding-inline: max(var(--padding-inline, 1rem), calc((100% - 76rem) / 2));
  }
  /* the signup card: a rounded --bg-secondary box; the column is margin here, so the box ends at its edges */
  .footer-signup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 3rem;
    margin-inline: max(var(--padding-inline, 1rem), calc((100% - 76rem) / 2));
    margin-block-end: 2.5rem;
    padding: 2.25rem 2.5rem;
    border-radius: 0.75rem;
    /* page ground under a brand hairline; dark mode uses the secondary hairline */
    background-color: var(--bg-primary);
    border: 1px solid light-dark(var(--utility-brand-200), var(--border-secondary));
  }
  .footer-signup-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }
  /* the wordmark's --solutions voice as a kicker over the headline */
  .footer-signup-kicker {
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    line-height: 1.5;
    margin-block-end: 0.75rem; /* with the copy gap, a 14px breath over the headline */
    margin-inline-start: -1px; /* the dash's side bearing: ink flush with the headline's N */
  }
  .footer-signup-title {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .footer-band {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-block: 3rem;
    background-color: var(--bg-secondary);
  }
  /* row one: wordmark left, social right; row two: the link rows */
  .footer-top,
  .footer-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 3rem;
  }
  /* wordmark only: the band hides logo.hbs's icon */
  .footer-brand {
    display: flex;
    align-items: center;
  }
  .footer-brand svg:first-child {
    display: none;
  }
  .footer-brand svg:last-child {
    display: block;
    inline-size: auto;
    block-size: 1.2rem; /* the nav wordmark's 1.5rem minus 20% */
  }
  nav {
    display: flex;
    gap: 1.5rem;
    /* link rows scroll sideways; thin scrollbar on hover devices only */
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    @media (hover: hover) {
      scrollbar-width: thin;
      scrollbar-color: var(--fg-quaternary) transparent;
    }
  }
  /* an empty navigation folds its row away */
  nav:not(:has(a)) {
    display: none;
  }
  a {
    text-decoration: none;
    color: var(--text-tertiary);
    font-weight: 500;
    line-height: 1.75; /* the 28px content line */
    transition: color 0.2s ease;
  }
  /* link rows in mono small caps; the CC line's link stays sans */
  nav a {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap; /* a wrapping label would defeat the scroll */
  }
  a:hover {
    color: var(--text-brand-secondary);
  }
  /* social doors: quiet marks on 44px squares overlapping the gap */
  .footer-social {
    gap: 0.25rem;
    margin-inline-end: -0.8125rem; /* the last square's air, marks end flush */
    overflow-x: visible;
  }
  .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--fg-quaternary);
  }
  .footer-social a:hover,
  .footer-social a:focus-visible {
    color: var(--text-primary);
  }
  p {
    color: var(--text-tertiary);
    line-height: 1.75; /* the 28px content line */
  }
  /* newsletter signup: underline field + bare text button on one line */
  .footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    /* the block owns the width, the input flexes into it */
    inline-size: min(27rem, 100%);
  }
  .footer-newsletter form {
    display: flex;
    flex-wrap: wrap;
    /* placeholder and SUBSCRIBE share one baseline */
    align-items: baseline;
    gap: 0.75rem 1.5rem;
    inline-size: 100%;
  }
  .footer-newsletter input[type="email"] {
    flex: 1 1 10rem;
    min-inline-size: 0;
    /* the nav buttons' height keeps field and button on one line */
    block-size: 2.1875rem;
    /* underline-only field: a bottom hairline, no box */
    padding-inline: 0;
    border: 0;
    border-block-end: 1px solid var(--border-primary);
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
  }
  /* Subscribe: bare text in the nav account doors' voice */
  .footer-newsletter button[type="submit"] {
    block-size: 2.1875rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  /* already brand at rest, so hover underlines */
  .footer-newsletter button[type="submit"]:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
  }
  /* focus: accent underline doubled by a shadow row, no ring */
  .footer-newsletter input[type="email"]:focus-visible {
    outline: none;
    border-block-end-color: var(--accent);
    box-shadow: 0 1px 0 0 var(--accent);
  }
  /* placeholder clears on :focus (tap and click too) */
  .footer-newsletter input[type="email"]:focus::placeholder {
    color: transparent;
  }
  /* the trust line under the headline */
  .footer-form-note {
    font-size: 0.8125rem;
    line-height: 1.5;
  }
  /* the consent sentence under the field row; folds with the form on success */
  .footer-form-consent {
    inline-size: 100%;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-tertiary);
  }
  /* the legal doors sit plain in the sentence; hover answers in color only */
  .footer-form-consent a {
    text-decoration: none;
  }
  /* Portal's members states: success shows the confirmation line, the error slot once filled */
  .footer-newsletter form.success {
    display: none;
  }
  .footer-signup:has(form.success) .footer-form-note {
    display: none;
  }
  .footer-form-success {
    display: none;
    font-size: 0.875rem;
  }
  .footer-newsletter:has(form.success) .footer-form-success {
    display: block;
  }
  .footer-form-error {
    flex-basis: 100%;
    color: var(--utility-red-700);
    font-size: 0.875rem;
  }
  .footer-form-error:empty {
    display: none;
  }
  /* legal row under the footer's one hairline */
  .footer-legal {
    display: flex;
    justify-content: space-between;
    /* first-line alignment against the two-line CC text */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    border-block-start: 1px solid var(--border-primary);
    padding-block-start: 1.5rem;
  }
  /* the CC line's inline license link shrinks WITH its sentence */
  .footer-legal p {
    font-size: 0.875rem;
  }
  /* platform attribution: a breath quieter than the CC line, still AA */
  .footer-ghost a {
    color: var(--text-tertiary);
  }
  /* stacked footer keeps the start edge; link rows wrap */
  @media (width <= 700px) {
    .footer-signup {
      flex-direction: column;
      align-items: stretch;
      padding: 1.5rem;
    }
    .footer-newsletter {
      inline-size: 100%;
    }
    /* stacked form: full-width field at 44px, the button under it */
    .footer-newsletter form {
      flex-direction: column;
      align-items: flex-start;
    }
    /* block-size sizes the field (a flex basis would read the column axis) */
    .footer-newsletter input[type="email"] {
      flex: none;
      align-self: stretch;
      block-size: 2.75rem;
    }
    .footer-newsletter button[type="submit"] {
      block-size: 2.75rem;
    }
    .footer-top,
    .footer-links,
    .footer-legal {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.25rem;
    }
    nav {
      flex-wrap: wrap;
      overflow-x: visible;
      row-gap: 0.25rem;
    }
    .footer-social {
      margin-inline-end: 0;
      margin-inline-start: -0.8125rem; /* the first square's air, marks align with the text */
    }
  }
}

/*** nav display-settings menu — partials/navigation.hbs + nav-settings.js: a fixed sibling of the nav ***/
.b-nav-settings {
  position: fixed;
  z-index: 20; /* above the sticky nav's 10 */
  display: flex;
  flex-direction: column;
  min-inline-size: 15.5rem; /* room for the value column's sans names */
  padding-block: 0.3125rem; /* rows carry their own inline padding */
  /* phones (the nav's own phone line): one more notch down */
  @media (width <= 44rem) {
    min-inline-size: 13.5rem;
    padding-block: 0.25rem;
  }
  border: 1px solid var(--border-primary);
  border-radius: 0.75rem;
  background-color: var(--bg-primary);
  box-shadow: 0 4px 12px light-dark(rgb(var(--shadow-rgb) / 0.08), rgb(var(--shadow-rgb) / 0.4));
}
/* rows: mono label left, state column right, inset hairline between */
.b-nav-settings button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5625rem 0.875rem;
  @media (width <= 44rem) {
    gap: 0.75rem;
    padding: 0.4375rem 0.75rem;
  }
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: 1.5;
}
.b-nav-settings button:hover {
  background-color: color-mix(in srgb, var(--fg-quaternary) 7%, transparent);
}
/* the label voice — the nav menu's mono register, a step smaller */
.b-nav-settings button > span:first-of-type {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* inset row separators; the reset row's goes full-bleed below */
.b-nav-settings button + button::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0.875rem;
  border-block-start: 1px solid var(--border-secondary);
  @media (width <= 44rem) {
    inset-inline: 0.75rem;
  }
}
/* state column: the cycler's current look (editor-theme.js) or ON/OFF for dark mode */
.b-nav-settings .set-value {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-inline-start: auto;
}
.b-nav-settings .set-value [data-current] {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  @media (width <= 44rem) {
    font-size: 0.8125rem;
  }
}
.b-nav-settings .set-value svg {
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
  color: var(--fg-quaternary);
}
/* CSS content keyed on aria-pressed (theme.js) */
.b-nav-settings .set-state {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.b-nav-settings .set-state::before {
  content: "Off";
}
.b-nav-settings [data-theme-toggle][aria-pressed="true"] .set-state::before {
  content: "On";
}
/* the reset steps back under its own full-bleed hairline */
.b-nav-settings [data-display-reset] {
  color: var(--text-tertiary);
}
.b-nav-settings [data-display-reset] > span:first-of-type {
  color: inherit;
}
.b-nav-settings [data-display-reset]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  border-block-start: 1px solid var(--border-secondary);
}
/* restate [hidden]: the display above would beat the UA default */
.b-nav-settings[hidden] {
  display: none;
}

/* route Ghost's accent card through the theme's accent chain; the doubled class beats cards.min.css */
:root .kg-card.kg-style-accent {
  background-color: var(--accent);
}

/*** Ghost search overlay (sodo-search) ***/
/* color-scheme must match the light-only frame; the dim blur sits on the iframe element */
#sodo-search-root iframe {
  color-scheme: light;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/*** Ghost Portal (sign-up/account modal) ***/
/* same pin as the search frame, keeps it transparent */
#ghost-portal-root iframe {
  color-scheme: light;
}

/*** Ghost comments (comments-ui) ***/
/* same pin; the widget's own ink detection colors its text */
iframe[title="comments-frame"] {
  color-scheme: light;
}

/* (reading progress bar lives in interactive.css) */