/**
 * Guides & tutorials — default presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Self-contained with neutral fallbacks, native on letcon by default: every
 * --kgd-* custom property below resolves through the theme's --bs-lc-* tokens
 * first and only then to its hardcoded fallback, so on this theme the block
 * inherits the brick accent, the ink text, the display face and the 16px card
 * radius without either side naming the other. Themes restyle by setting the
 * --kgd-* properties, never by overriding selectors.
 *
 *   --kgd-ink             headings, titles, prices
 *   --kgd-body            long-form copy
 *   --kgd-muted           meta lines, dates, captions
 *   --kgd-accent          links, step indexes, filled dots, CTA
 *   --kgd-accent-dark     CTA hover
 *   --kgd-accent-tint     step-index well
 *   --kgd-bar             the parts card's dark header
 *   --kgd-on-bar          text on that header
 *   --kgd-surface         cards
 *   --kgd-canvas          cover placeholder wash
 *   --kgd-sunken          chips, qty pills
 *   --kgd-border          hairlines
 *   --kgd-border-strong   card outlines
 *   --kgd-ok              in-stock state
 *   --kgd-shadow          card shadow colour
 *   --kgd-radius          cards (16px on letcon)
 *   --kgd-radius-sm       rows, buttons
 *   --kgd-radius-xs       chips
 *   --kgd-font-display    headings
 *   --kgd-font-mono       chips, meta figures
 *   --kgd-card-min        minimum card width before the grid wraps
 *   --kgd-measure         reading width of the detail column
 *   --kgd-transition      duration+easing for the few transitions
 *
 * Layered on purpose: layered CSS always loses to unlayered CSS, so a host
 * theme's ordinary stylesheet wins without matching specificity.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-guides {
  .kicked-guides,
  .kicked-guides-featured {
    --kgd-ink: var(--bs-lc-ink, #26241f);
    --kgd-body: var(--bs-lc-body, #45413a);
    --kgd-muted: var(--bs-lc-muted-soft, #6d675e);
    --kgd-accent: var(--bs-lc-brick, #c0432f);
    --kgd-accent-dark: var(--bs-lc-brick-dark, #a8392f);
    --kgd-accent-tint: var(--bs-lc-brick-tint, #fbeeeb);
    --kgd-bar: var(--bs-lc-bar, #2f2a26);
    --kgd-on-bar: var(--bs-lc-on-dark-max, #fff);
    --kgd-on-bar-soft: var(--bs-lc-on-dark, #c9c3ba);
    --kgd-surface: var(--bs-lc-surface, #fff);
    --kgd-canvas: var(--bs-lc-sunken, #f2efea);
    --kgd-sunken: var(--bs-lc-sunken, #f2efea);
    --kgd-border: var(--bs-lc-border, #eceae5);
    --kgd-border-strong: var(--bs-lc-border-strong, #e4e0da);
    --kgd-ok: var(--bs-lc-green, #2f9e6b);
    --kgd-shadow: var(--bs-lc-shadow-soft, rgb(43 41 38 / 5%));
    --kgd-radius: 1rem;
    --kgd-radius-sm: 0.625rem;
    --kgd-radius-xs: 0.375rem;
    --kgd-font-display: var(--bs-lc-font-display, inherit);
    --kgd-font-mono: var(--bs-font-monospace, ui-monospace, monospace);
    --kgd-card-min: 16.25rem;
    --kgd-measure: 68ch;
    --kgd-transition: var(--bs-lc-transition, 0.2s ease-in-out);

    color: var(--kgd-body);
  }

  /* ---------------------------------------------------------------- listing */

  .kicked-guides__lede {
    max-width: var(--kgd-measure);
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    color: var(--kgd-muted);
  }

  /* Rendered inside the theme's .page-header scaffold, directly under the
     h1 — pulled up against the h1's own bottom margin so title and lede read
     as one object, with the scaffold's air after them both. */
  .kicked-guides__lede--header {
    margin: -0.375rem 0 0;
  }

  .kicked-guides__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
  }

  .kicked-guides__filter {
    padding: 0.4375rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kgd-ink);
    text-decoration: none;
    background: var(--kgd-surface);
    border: 1px solid var(--kgd-border-strong);
    border-radius: 999px;
    transition: border-color var(--kgd-transition), background-color var(--kgd-transition);
  }

  .kicked-guides__filter:hover {
    color: var(--kgd-ink);
    text-decoration: none;
    border-color: var(--kgd-accent);
  }

  .kicked-guides__filter--active {
    color: var(--kgd-on-bar);
    background: var(--kgd-ink);
    border-color: var(--kgd-ink);
  }

  .kicked-guides__filter--active:hover {
    color: var(--kgd-on-bar);
    border-color: var(--kgd-ink);
  }

  .kicked-guides__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--kgd-card-min), 100%), 1fr));
    gap: 1.25rem;
  }

  .kicked-guides__empty {
    padding: 3rem 1rem;
    color: var(--kgd-muted);
    text-align: center;
  }

  .kicked-guides__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
    margin-top: 2rem;
  }

  .kicked-guides__page {
    min-width: 2.375rem;
    padding: 0.4375rem 0.625rem;
    font-family: var(--kgd-font-mono);
    font-size: 0.875rem;
    color: var(--kgd-ink);
    text-align: center;
    text-decoration: none;
    background: var(--kgd-surface);
    border: 1px solid var(--kgd-border-strong);
    border-radius: var(--kgd-radius-sm);
  }

  .kicked-guides__page:hover {
    color: var(--kgd-ink);
    text-decoration: none;
    border-color: var(--kgd-accent);
  }

  .kicked-guides__page--active {
    color: var(--kgd-on-bar);
    background: var(--kgd-ink);
    border-color: var(--kgd-ink);
  }

  /* ------------------------------------------------------------------ cards */

  .kicked-guides-card {
    height: 100%;
  }

  .kicked-guides-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: var(--kgd-surface);
    border: 1px solid var(--kgd-border-strong);
    border-radius: var(--kgd-radius);
    box-shadow: 0 0.375rem 1.5rem var(--kgd-shadow);
    transition: border-color var(--kgd-transition), transform var(--kgd-transition);
  }

  .kicked-guides-card__link:hover {
    color: inherit;
    text-decoration: none;
    border-color: var(--kgd-accent);
    transform: translateY(-2px);
  }

  .kicked-guides-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--kgd-canvas);
  }

  .kicked-guides-card__cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The quiet stand-in when neither an uploaded cover nor a part photo
     exists: the canvas wash with a soft accent gradient, not a broken glyph. */
  .kicked-guides-card__cover--empty {
    background:
      radial-gradient(120% 90% at 20% 0%, var(--kgd-accent-tint), transparent 60%),
      var(--kgd-canvas);
  }

  .kicked-guides-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.125rem 1.125rem;
  }

  .kicked-guides-card__meta,
  .kicked-guides__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  .kicked-guides-card__chip {
    padding: 0.1875rem 0.5rem;
    font-family: var(--kgd-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--kgd-ink);
    text-transform: uppercase;
    background: var(--kgd-sunken);
    border-radius: var(--kgd-radius-xs);
  }

  .kicked-guides-card__minutes,
  .kicked-guides__meta-item {
    font-family: var(--kgd-font-mono);
    font-size: 0.75rem;
    color: var(--kgd-muted);
  }

  .kicked-guides-card__title {
    font-family: var(--kgd-font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--kgd-ink);
  }

  .kicked-guides-card__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--kgd-body);
  }

  .kicked-guides-card__date {
    margin-top: auto;
    font-size: 0.8125rem;
    color: var(--kgd-muted);
  }

  /* Difficulty as three dots — filled up to the level. */
  .kicked-guides-dots {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
  }

  .kicked-guides-dots__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    background: var(--kgd-border-strong);
    border-radius: 50%;
  }

  .kicked-guides-dots__dot--on {
    background: var(--kgd-accent);
  }

  /* ----------------------------------------------------------------- detail */

  /* One flow on mobile — intro, then the parts aside, then the steps: you
     gather the parts before you build. Desktop turns the same source order
     into two columns; the main column starts at the shell's left edge like
     every other page, and its width (the 1fr against a 21.25rem aside in the
     1240px shell) is what yields the readable measure — no centered strip. */
  .kicked-guides--detail > * + * {
    margin-top: 2rem;
  }

  @media (min-width: 62rem) {
    .kicked-guides--with-aside {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 21.25rem;
      grid-template-areas:
        'intro aside'
        'flow  aside';
      column-gap: 2.5rem;
    }

    .kicked-guides--with-aside > * + * {
      margin-top: 0;
    }

    .kicked-guides--with-aside .kicked-guides__intro {
      grid-area: intro;
    }

    .kicked-guides--with-aside .kicked-guides__flow {
      grid-area: flow;
      margin-top: 2rem;
    }

    .kicked-guides--with-aside .kicked-guides__aside {
      grid-area: aside;
    }

    /* The rail: the quick-nav above scrolls away with the page, then the
       parts card pins at the viewport's top edge and follows the reader
       through the steps. 14px is the letcon house offset for pinned rails
       (product buy panel, pages aside) — NOT --scroll-padding-top, which is
       sized for anchor-jump clearance and left the card floating 170-odd px
       below a header that does not actually stick. The wrapper is
       full-height so the card has the whole column to travel in.
       Deliberately NO viewport-height cap and NO inner scrollbar: vh units
       ignore the body zoom the theme applies on very wide screens, so any
       100vh-based cap is wrong exactly there — and a rail with its own
       scrollbar steals the wheel from the page besides. */
    .kicked-guides--with-aside .kicked-guides__aside-inner {
      height: 100%;
    }

    .kicked-guides--with-aside .kicked-guides-parts {
      position: sticky;
      top: 0.875rem;
    }
  }

  .kicked-guides__aside-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .kicked-guides__preview-note {
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    color: var(--kgd-accent-dark);
    background: var(--kgd-accent-tint);
    border: 1px dashed var(--kgd-accent);
    border-radius: var(--kgd-radius-sm);
  }

  .kicked-guides__header {
    margin-bottom: 1.75rem;
  }

  .kicked-guides__header .kicked-guides__lede {
    margin: 1rem 0 0;
    font-size: 1.125rem;
    color: var(--kgd-body);
  }

  .kicked-guides__cover {
    margin: 0 0 2rem;
    overflow: hidden;
    border-radius: var(--kgd-radius);
  }

  .kicked-guides__cover img {
    display: block;
    width: 100%;
    height: auto;
  }

  .kicked-guides__prose {
    font-size: 1.0313rem;
    line-height: 1.65;
  }

  .kicked-guides__prose h2,
  .kicked-guides__prose h3,
  .kicked-guides__prose h4 {
    margin: 1.75rem 0 0.75rem;
    font-family: var(--kgd-font-display);
    color: var(--kgd-ink);
  }

  .kicked-guides__prose a {
    color: var(--kgd-accent);
    text-decoration: underline;
  }

  .kicked-guides__prose a:hover {
    color: var(--kgd-accent-dark);
  }

  .kicked-guides__prose code {
    padding: 0.125rem 0.375rem;
    font-family: var(--kgd-font-mono);
    font-size: 0.875em;
    background: var(--kgd-sunken);
    border-radius: var(--kgd-radius-xs);
  }

  .kicked-guides__prose pre {
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-family: var(--kgd-font-mono);
    font-size: 0.875rem;
    color: var(--kgd-on-bar-soft);
    background: var(--kgd-bar);
    border-radius: var(--kgd-radius-sm);
  }

  .kicked-guides__prose pre code {
    padding: 0;
    color: inherit;
    background: none;
  }

  .kicked-guides__prose blockquote {
    padding: 0.25rem 0 0.25rem 1.125rem;
    margin: 1.25rem 0;
    color: var(--kgd-muted);
    border-left: 3px solid var(--kgd-accent);
  }

  /* Authored tables scroll inside the column instead of widening the page. */
  .kicked-guides__prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    font-size: 0.9375rem;
    border-collapse: collapse;
  }

  .kicked-guides__prose th,
  .kicked-guides__prose td {
    padding: 0.5625rem 0.75rem;
    text-align: left;
    border: 1px solid var(--kgd-border-strong);
  }

  .kicked-guides__prose th {
    font-family: var(--kgd-font-display);
    color: var(--kgd-ink);
    background: var(--kgd-sunken);
  }

  .kicked-guides__prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kgd-radius-sm);
  }

  /* ------------------------------------------------------------------ steps */

  .kicked-guides__steps {
    padding: 0;
    margin: 0 0 2.5rem;
    list-style: none;
  }

  .kicked-guides__step {
    padding: 1.375rem 1.5rem;
    margin-bottom: 1rem;
    background: var(--kgd-surface);
    border: 1px solid var(--kgd-border-strong);
    border-radius: var(--kgd-radius);
    box-shadow: 0 0.375rem 1.5rem var(--kgd-shadow);
  }

  .kicked-guides__step-head {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .kicked-guides__step-index {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    font-family: var(--kgd-font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--kgd-accent);
    background: var(--kgd-accent-tint);
    border-radius: var(--kgd-radius-sm);
  }

  .kicked-guides__step-title {
    margin: 0;
    font-family: var(--kgd-font-display);
    font-size: 1.25rem;
    color: var(--kgd-ink);
  }

  .kicked-guides__step-body {
    font-size: 1rem;
    line-height: 1.6;
  }

  .kicked-guides__step-body p:last-child {
    margin-bottom: 0;
  }

  .kicked-guides__step-body code {
    padding: 0.125rem 0.375rem;
    font-family: var(--kgd-font-mono);
    font-size: 0.875em;
    background: var(--kgd-sunken);
    border-radius: var(--kgd-radius-xs);
  }

  .kicked-guides__step-body pre {
    padding: 0.875rem 1.125rem;
    overflow-x: auto;
    font-family: var(--kgd-font-mono);
    font-size: 0.875rem;
    color: var(--kgd-on-bar-soft);
    background: var(--kgd-bar);
    border-radius: var(--kgd-radius-sm);
  }

  .kicked-guides__step-body pre code {
    padding: 0;
    color: inherit;
    background: none;
  }

  .kicked-guides__step-figure {
    margin: 1rem 0 0;
    overflow: hidden;
    border-radius: var(--kgd-radius-sm);
  }

  .kicked-guides__step-figure img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* -------------------------------------------------------------- parts card */

  .kicked-guides-parts {
    overflow: hidden;
    background: var(--kgd-surface);
    border: 1px solid var(--kgd-border-strong);
    border-radius: var(--kgd-radius);
    box-shadow: 0 0.375rem 1.5rem var(--kgd-shadow);
  }

  /* The identity-card treatment the theme gives its own summary panels: a
     dark bar header that separates "the shopping part" from the prose. */
  .kicked-guides-parts__head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem;
    background: var(--kgd-bar);
  }

  .kicked-guides-parts__title {
    margin: 0;
    font-family: var(--kgd-font-display);
    font-size: 1.125rem;
    color: var(--kgd-on-bar);
  }

  .kicked-guides-parts__count {
    min-width: 1.75rem;
    padding: 0.125rem 0.5rem;
    font-family: var(--kgd-font-mono);
    font-size: 0.8125rem;
    color: var(--kgd-on-bar);
    text-align: center;
    background: rgb(255 255 255 / 14%);
    border-radius: 999px;
  }

  .kicked-guides-parts__list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .kicked-guides-parts__row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1.125rem;
    border-bottom: 1px solid var(--kgd-border);
  }

  .kicked-guides-parts__row--off {
    opacity: 0.55;
  }

  .kicked-guides-parts__media {
    flex: none;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    background: var(--kgd-canvas);
    border-radius: var(--kgd-radius-sm);
  }

  .kicked-guides-parts__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .kicked-guides-parts__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
  }

  .kicked-guides-parts__name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--kgd-ink);
    text-decoration: none;
  }

  .kicked-guides-parts__name:hover {
    color: var(--kgd-accent);
    text-decoration: none;
  }

  .kicked-guides-parts__note {
    font-size: 0.8125rem;
    color: var(--kgd-muted);
  }

  /* One line of figures under the name — qty, price, stock — instead of a
     third column, so the row fits the 21.25rem aside without wrapping games. */
  .kicked-guides-parts__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
    align-items: baseline;
  }

  .kicked-guides-parts__availability {
    font-family: var(--kgd-font-mono);
    font-size: 0.75rem;
    color: var(--kgd-muted);
  }

  .kicked-guides-parts__availability--ok {
    color: var(--kgd-ok);
  }

  .kicked-guides-parts__qty {
    font-family: var(--kgd-font-mono);
    font-size: 0.8125rem;
    color: var(--kgd-muted);
  }

  .kicked-guides-parts__price {
    font-weight: 700;
    color: var(--kgd-ink);
    white-space: nowrap;
  }

  .kicked-guides-parts__line-form {
    flex: none;
    margin: 0;
  }

  .kicked-guides-parts__line-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--kgd-accent);
    cursor: pointer;
    background: var(--kgd-surface);
    border: 1px solid var(--kgd-border-strong);
    border-radius: var(--kgd-radius-sm);
    transition: border-color var(--kgd-transition), background-color var(--kgd-transition);
  }

  .kicked-guides-parts__line-add:hover {
    background: var(--kgd-accent-tint);
    border-color: var(--kgd-accent);
  }

  .kicked-guides-parts__foot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    padding: 1rem 1.125rem;
  }

  .kicked-guides-parts__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
  }

  .kicked-guides-parts__total span {
    font-size: 0.8125rem;
    color: var(--kgd-muted);
  }

  .kicked-guides-parts__total strong {
    font-family: var(--kgd-font-display);
    font-size: 1.375rem;
    color: var(--kgd-ink);
  }

  .kicked-guides-parts__all-form {
    margin: 0;
  }

  .kicked-guides-parts__cta {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 0.9688rem;
    font-weight: 700;
    color: var(--kgd-on-bar);
    cursor: pointer;
    background: var(--kgd-accent);
    border: 1px solid var(--kgd-accent);
    border-radius: var(--kgd-radius-sm);
    transition: background-color var(--kgd-transition), border-color var(--kgd-transition);
  }

  .kicked-guides-parts__cta:hover {
    background: var(--kgd-accent-dark);
    border-color: var(--kgd-accent-dark);
  }

  .kicked-guides-parts__cta[disabled] {
    cursor: default;
    opacity: 0.6;
  }

  .kicked-guides-parts__status {
    padding: 0 1.125rem;
    margin: 0;
    font-size: 0.9375rem;
  }

  .kicked-guides-parts__status:not(:empty) {
    padding-bottom: 1rem;
  }

  .kicked-guides-parts__status a {
    color: var(--kgd-accent);
    text-decoration: underline;
  }

  .kicked-guides-parts__status--error {
    color: var(--kgd-accent-dark);
  }

  .kicked-guides-parts__status ul {
    padding-left: 1.25rem;
    margin: 0.25rem 0 0;
  }

  /* -------------------------------------------------------------- quick nav */

  .kicked-guides-nav {
    padding: 1rem 1.125rem;
    background: var(--kgd-surface);
    border: 1px solid var(--kgd-border-strong);
    border-radius: var(--kgd-radius);
    box-shadow: 0 0.375rem 1.5rem var(--kgd-shadow);
  }

  .kicked-guides-nav__title {
    margin: 0 0 0.625rem;
    font-family: var(--kgd-font-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--kgd-muted);
    text-transform: uppercase;
  }

  .kicked-guides-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .kicked-guides-nav__link {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--kgd-body);
    text-decoration: none;
  }

  .kicked-guides-nav__link:hover {
    color: var(--kgd-accent);
    text-decoration: none;
  }

  .kicked-guides-nav__number {
    flex: none;
    min-width: 1.125rem;
    font-family: var(--kgd-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kgd-accent);
  }

  /* ---------------------------------------------------------------- related */

  .kicked-guides__related-title {
    margin: 0 0 1rem;
    font-family: var(--kgd-font-display);
    font-size: 1.375rem;
    color: var(--kgd-ink);
  }

  /* ----------------------------------------------------- product-page block */

  .kicked-guides-featured {
    margin: 1.5rem 0;
  }

  /* The title doubles as the disclosure toggle. The button chrome is
     stripped so the closed state reads as a heading with a chevron, not as
     a form control that wandered in. */
  .kicked-guides-featured__summary {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0 0 1rem;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
  }

  .kicked-guides-featured__title {
    margin: 0;
    font-family: var(--kgd-font-display);
    font-size: 1.375rem;
    color: var(--kgd-ink);
  }

  .kicked-guides-featured__chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--kgd-muted);
    transition: transform 0.3s ease;
  }

  .kicked-guides-featured--closed .kicked-guides-featured__chevron {
    transform: rotate(-90deg);
  }

  /* The 0fr collapse — same mechanics as kickedresources' disclosure: the
     body is a one-row grid whose row shrinks to nothing, and the child
     provides the min-height/overflow the trick requires. */
  .kicked-guides-featured__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
  }

  .kicked-guides-featured--closed .kicked-guides-featured__body {
    grid-template-rows: 0fr;
  }

  .kicked-guides-featured--closed .kicked-guides-featured__summary {
    margin-bottom: 0;
  }

  .kicked-guides-featured__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
  }

  .kicked-guides-featured--closed .kicked-guides-featured__grid {
    visibility: hidden;
  }

  .kicked-guides-card--small .kicked-guides-card__media {
    aspect-ratio: 16 / 7;
  }

  .kicked-guides-card--small .kicked-guides-card__title {
    font-size: 1.0313rem;
  }

  .kicked-guides-card--small .kicked-guides-card__content {
    padding: 0.875rem 1rem 1rem;
  }

  /* ------------------------------------------------------------------ a11y */

  .kicked-guides__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* --------------------------------------------------------------- narrow */

  @media (max-width: 30rem) {
    .kicked-guides-parts__row {
      flex-wrap: wrap;
      row-gap: 0.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .kicked-guides *,
    .kicked-guides-featured * {
      transition: none !important;
    }

    .kicked-guides-card__link:hover {
      transform: none;
    }
  }
}

/* ============================================================== off-layer ==
   Outside @layer kicked-guides on purpose, and only this. The host theme's
   global reset strips markers and padding from every ul/ol, and layered CSS
   loses to unlayered CSS whatever its specificity — so restoring list
   semantics for authored guide HTML has to happen at the reset's own level.
   Scoped to the two containers that print author-written markup and nothing
   else; everything themable stays in the layer above. */

.kicked-guides__prose ul,
.kicked-guides__prose ol,
.kicked-guides__step-body ul,
.kicked-guides__step-body ol {
  padding-inline-start: 1.375rem;
  margin: 0 0 1.125rem;
}

.kicked-guides__prose ul,
.kicked-guides__step-body ul {
  list-style: disc;
}

.kicked-guides__prose ol,
.kicked-guides__step-body ol {
  list-style: decimal;
}

.kicked-guides__prose li,
.kicked-guides__step-body li {
  margin-block-end: 0.375rem;
}

.kicked-guides__prose li > ul,
.kicked-guides__prose li > ol,
.kicked-guides__step-body li > ul,
.kicked-guides__step-body li > ol {
  margin: 0.375rem 0 0;
}

.kicked-guides__prose li::marker,
.kicked-guides__step-body li::marker {
  color: var(--kgd-accent);
}