/* ==========================================================================
   Netkravler Design Manual
   Live presentation of theme.json tokens — theme.json remains source of truth.
   ========================================================================== */

.nk-design-manual {
  --nk-dm-rule: color-mix(in srgb, var(--wp--preset--color--border) 76%, transparent);
  --nk-dm-panel: color-mix(in srgb, var(--wp--preset--color--surface) 72%, transparent);
  --nk-dm-panel-strong: var(--wp--preset--color--surface-elevated);
  overflow: clip;
  color: var(--wp--preset--color--foreground);
  background: var(--wp--preset--color--background);
}

.nk-design-manual code {
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .78em;
}

/* Hero — full image with real HTML text layered above it. */
.nk-dm-hero {
  position: relative;
  min-height: clamp(34rem, 53vw, 48rem);
  isolation: isolate;
  overflow: hidden;
  border-block-end: 1px solid var(--nk-dm-rule);
  background: var(--wp--preset--color--background);
}

.nk-dm-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(17 19 21 / .99) 0%, rgb(17 19 21 / .9) 27%, rgb(17 19 21 / .38) 44%, rgb(17 19 21 / .08) 58%, transparent 72%);
}

.nk-dm-hero__picture,
.nk-dm-hero__picture img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nk-dm-hero__picture img {
  object-fit: cover;
  object-position: 56% center;
}

.nk-dm-hero__inner {
  position: relative;
  display: grid;
  min-height: inherit;
  align-items: center;
}

.nk-dm-hero__copy {
  width: min(34rem, 44%);
  padding-block: clamp(3rem, 6vw, 6rem);
}

.nk-dm-kicker {
  margin: 0 0 1.35rem;
  color: var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.nk-dm-hero h1 {
  max-width: 8ch;
  margin: 0;
  font-size: clamp(3.25rem, 6.5vw, 6.5rem);
  line-height: .88;
  letter-spacing: -.055em;
}

.nk-dm-hero__rule {
  display: block;
  width: 3rem;
  height: 3px;
  margin-block: 2rem;
  background: var(--wp--preset--color--accent);
}

.nk-dm-lead {
  margin: 0;
  color: var(--wp--preset--color--secondary);
  font-size: clamp(1.15rem, .95rem + .6vw, 1.65rem);
  line-height: 1.4;
}

.nk-dm-intro {
  max-width: 31rem;
  margin: 1.6rem 0 0;
  color: var(--wp--preset--color--secondary);
  font-size: .96rem;
  line-height: 1.65;
}

.nk-dm-signature {
  margin: 2rem 0 0;
  color: var(--wp--preset--color--accent);
}

.nk-dm-signature--wordmark {
  display: block;
  width: min(100%, 15rem);
  line-height: 0;
}

.nk-dm-signature--wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.nk-dm-signature--text {
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: .02em;
  line-height: 1.35;
}


/* Index bar */
.nk-dm-index {
  position: sticky;
  z-index: 5;
  inset-block-start: var(--nk-header-height, 5.5rem);
  background: rgb(17 19 21 / .95);
  border-block-end: 1px solid var(--nk-dm-rule);
  backdrop-filter: blur(14px);
}

.nk-dm-index__inner {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-x: auto;
}

.nk-dm-index a {
  min-width: 8rem;
  padding: .95rem .85rem;
  color: var(--wp--preset--color--foreground);
  border-inline-end: 1px solid var(--nk-dm-rule);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .69rem;
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.nk-dm-index a:first-child { border-inline-start: 1px solid var(--nk-dm-rule); }
.nk-dm-index a span { margin-inline-end: .35rem; color: var(--wp--preset--color--muted); }
.nk-dm-index a:hover,
.nk-dm-index a:focus-visible { color: var(--wp--preset--color--accent); }

/* Poster grid mirrors the original design concept. */
.nk-dm-poster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "colours colours colours colours colours colours colours colours type type type type"
    "spacing spacing spacing spacing spacing spacing spacing spacing radius radius radius radius"
    "buttons buttons buttons buttons forms forms forms forms card card card card"
    "icons icons icons icons imagery imagery imagery imagery card card card card"
    "access access access access access access access access quote quote quote quote";
  padding-block: 0 clamp(2rem, 3vw, 3rem);
}

.nk-dm-panel {
  min-width: 0;
  padding: clamp(1.6rem, 2.7vw, 2.5rem);
  border-inline-end: 1px solid var(--nk-dm-rule);
  border-block-end: 1px solid var(--nk-dm-rule);
}
.nk-dm-panel--colours { grid-area: colours; border-inline-start: 1px solid var(--nk-dm-rule); }
.nk-dm-panel--type { grid-area: type; }
.nk-dm-panel--spacing { grid-area: spacing; border-inline-start: 1px solid var(--nk-dm-rule); }
.nk-dm-panel--radius { grid-area: radius; }
.nk-dm-panel--buttons { grid-area: buttons; border-inline-start: 1px solid var(--nk-dm-rule); }
.nk-dm-panel--forms { grid-area: forms; }
.nk-dm-panel--card { grid-area: card; }
.nk-dm-panel--icons { grid-area: icons; border-inline-start: 1px solid var(--nk-dm-rule); }
.nk-dm-panel--imagery { grid-area: imagery; }
.nk-dm-panel--access { grid-area: access; border-inline-start: 1px solid var(--nk-dm-rule); }
.nk-dm-quote { grid-area: quote; }

.nk-dm-panel__heading { margin-block-end: 1.45rem; }
.nk-dm-panel__heading h2 {
  margin: 0;
  font-size: clamp(1.35rem, 1.2rem + .5vw, 1.8rem);
  line-height: 1.1;
}
.nk-dm-panel__heading h2 span {
  margin-inline-end: .45rem;
  color: var(--wp--preset--color--secondary);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .72em;
  font-weight: 500;
}
.nk-dm-panel__heading p {
  max-width: 42rem;
  margin: .5rem 0 0;
  color: var(--wp--preset--color--secondary);
  font-size: .84rem;
  line-height: 1.5;
}

/* Colours */
.nk-dm-colours-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
  gap: 1.2rem;
}
.nk-dm-colour-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem .75rem;
}
.nk-dm-swatch__sample {
  aspect-ratio: 1;
  background: var(--nk-dm-swatch);
  border: 1px solid rgb(244 244 242 / .28);
  border-radius: var(--wp--custom--radius--medium);
}
.nk-dm-swatch__meta { display: grid; gap: .12rem; padding-block-start: .55rem; }
.nk-dm-swatch__meta strong { font-size: .7rem; line-height: 1.15; }
.nk-dm-swatch__meta code { font-size: .64rem; }
.nk-dm-callout {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--nk-dm-panel);
  border: 1px solid var(--nk-dm-rule);
  border-radius: var(--wp--custom--radius--medium);
}
.nk-dm-callout strong { font-size: .88rem; }
.nk-dm-callout p { color: var(--wp--preset--color--secondary); font-size: .76rem; line-height: 1.55; }
.nk-dm-callout a { margin-block-start: auto; color: var(--wp--preset--color--foreground); font-size: .75rem; text-decoration: none; }
.nk-dm-contrast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-block-start: 1.3rem; }
.nk-dm-contrast { display: grid; grid-template-columns: 1fr auto; gap: .1rem .7rem; padding: .7rem .8rem; background: var(--nk-dm-panel); border: 1px solid var(--nk-dm-rule); border-radius: var(--wp--custom--radius--small); }
.nk-dm-contrast span { color: var(--wp--preset--color--secondary); font-size: .68rem; }
.nk-dm-contrast strong { font-size: .74rem; }
.nk-dm-contrast small { grid-column: 2; color: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--mono); font-size: .62rem; }

/* Typography */
.nk-dm-type-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; margin-block-end: 1.4rem; }
.nk-dm-type-hero > span { font-size: clamp(4.25rem, 7vw, 6.5rem); font-weight: 700; line-height: .8; letter-spacing: -.06em; }
.nk-dm-type-hero strong { display: block; font-size: .78rem; }
.nk-dm-type-hero p { margin: .12rem 0 .65rem; color: var(--wp--preset--color--secondary); font-size: .72rem; }
.nk-dm-alphabet { margin-block: 1rem; color: var(--wp--preset--color--secondary); font-family: var(--wp--preset--font-family--mono); font-size: .72rem; line-height: 1.65; overflow-wrap: anywhere; }
.nk-dm-token-list { border-block-start: 1px solid var(--nk-dm-rule); }
.nk-dm-token-list > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding-block: .42rem; border-block-end: 1px solid var(--nk-dm-rule); }
.nk-dm-token-list span { color: var(--wp--preset--color--secondary); font-size: .68rem; }
.nk-dm-token-list code { text-align: end; font-size: .62rem; }

/* Spacing and widths */
.nk-dm-spacing-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: .7rem; align-items: end; }
.nk-dm-space { display: grid; gap: .35rem; align-content: end; min-height: 7.2rem; }
.nk-dm-space__bar { display: block; width: min(100%, max(.3rem, var(--nk-dm-space))); height: min(4.4rem, max(.3rem, var(--nk-dm-space))); background: var(--wp--preset--color--secondary); border-radius: 3px; }
.nk-dm-space strong { font-size: .66rem; }
.nk-dm-space code { font-size: .57rem; }
.nk-dm-widths { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1px; margin-block-start: 1rem; overflow: hidden; border: 1px solid var(--nk-dm-rule); border-radius: var(--wp--custom--radius--medium); background: var(--nk-dm-rule); }
.nk-dm-widths > div { display: grid; gap: .2rem; padding: .65rem .8rem; background: var(--wp--preset--color--surface); }
.nk-dm-widths span { color: var(--wp--preset--color--secondary); font-size: .65rem; }
.nk-dm-widths strong { font-size: .82rem; }

/* Radius */
.nk-dm-radius-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: 1rem; align-items: end; min-height: 8rem; }
.nk-dm-radius-row > div { display: grid; justify-items: start; gap: .55rem; }
.nk-dm-radius-row > div > span { width: 3.25rem; height: 3.25rem; background: var(--wp--preset--color--surface-elevated); border: 1px solid var(--wp--preset--color--border); border-radius: var(--nk-dm-radius); }
.nk-dm-radius-row small { color: var(--wp--preset--color--secondary); font-size: .7rem; }

/* Components */
.nk-dm-button-row { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.nk-dm-button-row .wp-element-button,
.nk-dm-form-row .wp-element-button { padding: .72rem 1rem; font-size: .76rem; }
.nk-dm-button-secondary { padding: .7rem .95rem; color: var(--wp--preset--color--foreground); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--medium); text-decoration: none; font-size: .76rem; font-weight: 700; }
.nk-dm-text-link { color: var(--wp--preset--color--accent); text-decoration: none; font-size: .76rem; font-weight: 700; }
.nk-dm-form-row { display: grid; grid-template-columns: 1fr auto; gap: .65rem; }
.nk-dm-field input { width: 100%; min-height: 2.75rem; box-sizing: border-box; padding: .7rem .8rem; color: var(--wp--preset--color--foreground); background: var(--wp--preset--color--background); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--medium); }
.nk-dm-check { display: flex; gap: .5rem; align-items: center; margin-block-start: .75rem; color: var(--wp--preset--color--secondary); font-size: .72rem; }
.nk-dm-card-live {
  min-width: 0;
}

/* The Design Manual intentionally renders the real shared Card component.
 * Do not duplicate its visual rules here: card.css is the source of truth. */
.nk-dm-card-live > .card {
  width: 100%;
}

/* Icons and imagery */
.nk-dm-icons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.8rem, 1.5vw, 1.45rem);
  align-items: start;
  max-width: 44rem;
}
.nk-dm-icon-item {
  display: grid;
  min-width: 0;
  gap: .55rem;
  justify-items: center;
  text-align: center;
}
.nk-dm-icon {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--wp--preset--color--foreground);
}
.nk-dm-icon svg,
.nk-dm-access-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nk-dm-icons small {
  width: 100%;
  color: var(--wp--preset--color--secondary);
  font-size: .68rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.nk-dm-image-style {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--nk-dm-rule);
  border-radius: var(--wp--custom--radius--medium);
}
.nk-dm-image-style img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Accessibility and quote */
.nk-dm-access-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
  max-width: 62rem;
}
.nk-dm-access-item {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}
.nk-dm-access-icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  color: var(--wp--preset--color--foreground);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 50%;
  box-sizing: border-box;
}
.nk-dm-access-icon svg {
  width: 1.48rem;
  height: 1.48rem;
  stroke-width: 1.7;
}
.nk-dm-access-icon--aa {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .72rem;
  font-weight: 700;
}
.nk-dm-access-item--contrast .nk-dm-access-icon {
  border-color: transparent;
}
.nk-dm-contrast-mark {
  position: relative;
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  border: 2px solid var(--wp--preset--color--accent);
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
}
.nk-dm-contrast-mark::before {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: var(--wp--preset--color--foreground);
}
.nk-dm-contrast-mark::after {
  content: "";
  position: absolute;
  inset: .35rem;
  border: 2px solid var(--wp--preset--color--accent);
  border-radius: 50%;
  background: var(--wp--preset--color--background);
}
.nk-dm-access-item strong {
  display: block;
  font-size: .78rem;
  line-height: 1.25;
}
.nk-dm-access-item p {
  margin: .3rem 0 0;
  color: var(--wp--preset--color--secondary);
  font-size: .71rem;
  line-height: 1.5;
}
.nk-dm-quote { margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-inline-start: clamp(2rem, 4vw, 3.5rem); font-size: clamp(1.2rem, 1rem + .65vw, 1.75rem); font-style: italic; line-height: 1.45; }
.nk-dm-quote::before { content: ""; position: absolute; }
.nk-dm-quote cite { display: block; margin-block-start: 1.25rem; color: var(--wp--preset--color--foreground); font-family: var(--wp--preset--font-family--mono); font-size: .72rem; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nk-dm-panel.nk-dm-quote { position: relative; border-inline-start: 1px solid var(--nk-dm-rule); }
.nk-dm-panel.nk-dm-quote::after { content: ""; position: absolute; inset-block: 2.2rem; inset-inline-start: 1.25rem; width: 3px; background: var(--wp--preset--color--accent); }

@media (max-width: 1100px) {
  .nk-dm-hero {
    min-height: clamp(34rem, 66vw, 42rem);
  }
  .nk-dm-hero__picture img {
    object-position: 60% center;
  }
  .nk-dm-hero__copy {
    width: min(31rem, 48%);
    padding-block: clamp(3rem, 5vw, 4.5rem);
  }
  .nk-dm-hero h1 {
    font-size: clamp(3.4rem, 7vw, 5.5rem);
  }
  .nk-dm-poster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "colours colours"
      "type radius"
      "spacing spacing"
      "buttons forms"
      "card card"
      "icons imagery"
      "access access"
      "quote quote";
  }
  .nk-dm-panel { border-inline-start: 1px solid var(--nk-dm-rule); }
  .nk-dm-colours-layout { grid-template-columns: 1fr; }
  .nk-dm-colour-grid { grid-template-columns: repeat(5, 1fr); }
  .nk-dm-spacing-grid { grid-template-columns: repeat(5, 1fr); }
  .nk-dm-access-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet: preserve the desktop composition, but keep the hero balanced in a narrower frame. */
@media (min-width: 721px) and (max-width: 900px) {
  .nk-dm-hero {
    min-height: clamp(36rem, 72vw, 40rem);
  }
  .nk-dm-hero::after {
    background: linear-gradient(90deg, rgb(17 19 21 / .98) 0%, rgb(17 19 21 / .88) 34%, rgb(17 19 21 / .48) 54%, rgb(17 19 21 / .14) 72%, transparent 100%);
  }
  .nk-dm-hero__picture img {
    object-position: 64% center;
  }
  .nk-dm-hero__copy {
    width: min(29rem, 52%);
  }
  .nk-dm-hero h1 {
    font-size: clamp(3.25rem, 8vw, 4.75rem);
  }
  .nk-dm-lead {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
  }
  .nk-dm-signature--wordmark {
    width: min(100%, 13.5rem);
  }
  .nk-dm-index a {
    min-width: 7.25rem;
  }
}

@media (max-width: 720px) {
  .nk-dm-hero {
    min-height: 0;
  }
  .nk-dm-hero::after {
    background:
      linear-gradient(90deg, rgb(17 19 21 / .97) 0%, rgb(17 19 21 / .82) 54%, rgb(17 19 21 / .44) 100%),
      linear-gradient(180deg, rgb(17 19 21 / .38) 0%, rgb(17 19 21 / .18) 46%, rgb(17 19 21 / .88) 100%);
  }
  .nk-dm-hero__picture img {
    object-position: 63% center;
    opacity: .72;
  }
  .nk-dm-hero__inner {
    align-items: center;
  }
  .nk-dm-hero__copy {
    width: min(100%, 31rem);
    padding-block: clamp(3rem, 9vw, 4.25rem) clamp(1.8rem, 6vw, 2.5rem);
  }
  .nk-dm-kicker {
    margin-block-end: .9rem;
    font-size: .68rem;
    letter-spacing: .11em;
  }
  .nk-dm-hero h1 {
    max-width: 7.5ch;
    font-size: clamp(3rem, 14.5vw, 4.25rem);
    line-height: .9;
  }
  .nk-dm-hero__rule {
    width: 2.65rem;
    margin-block: 1.35rem;
  }
  .nk-dm-lead {
    max-width: 24rem;
    font-size: clamp(1.06rem, 4.8vw, 1.28rem);
    line-height: 1.42;
  }
  .nk-dm-intro {
    max-width: 29rem;
    margin-block-start: 1.05rem;
    font-size: .88rem;
    line-height: 1.58;
  }
  .nk-dm-signature {
    margin-block-start: 1.35rem;
  }
  .nk-dm-signature--wordmark {
    width: min(64vw, 11rem);
  }

  /* Keep the anchor navigation useful without squeezing seven labels into the viewport. */
  .nk-dm-index {
    inset-block-start: 0;
  }
  .nk-dm-index__inner {
    display: flex;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nk-dm-index__inner::-webkit-scrollbar {
    display: none;
  }
  .nk-dm-index a {
    flex: 0 0 auto;
    min-width: 7.2rem;
    padding: .78rem .72rem;
  }

  .nk-dm-poster { display: block; }
  .nk-dm-panel { border-inline: 1px solid var(--nk-dm-rule); }
  .nk-dm-colour-grid { grid-template-columns: repeat(3, 1fr); }
  .nk-dm-contrast-grid { grid-template-columns: 1fr; }
  .nk-dm-spacing-grid { grid-template-columns: repeat(3, 1fr); }
  .nk-dm-icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.35rem;
  }
  .nk-dm-access-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .nk-dm-panel.nk-dm-quote { padding-block: 3rem; }
}

@media (max-width: 460px) {
  .nk-dm-hero__copy {
    padding-block-start: 2.6rem;
  }
  .nk-dm-hero h1 {
    font-size: clamp(2.85rem, 14vw, 3.7rem);
  }
  .nk-dm-signature--wordmark {
    width: min(66vw, 10.5rem);
  }
  .nk-dm-colour-grid { grid-template-columns: repeat(2, 1fr); }
  .nk-dm-form-row { grid-template-columns: 1fr; }
  .nk-dm-spacing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile scroll affordance for the sticky section index. */
.nk-dm-index__control {
  display: none;
}

@media (max-width: 782px) {
  .nk-dm-index {
    --nk-dm-index-control-size: 2.75rem;
  }

  .nk-dm-index--scrollable .nk-dm-index__control {
    position: absolute;
    z-index: 3;
    inset-block: 0;
    display: grid;
    width: var(--nk-dm-index-control-size);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    color: var(--wp--preset--color--accent);
    border: 0;
    background: linear-gradient(90deg, var(--wp--preset--color--background) 58%, transparent);
    cursor: pointer;
  }

  .nk-dm-index__control[hidden] {
    display: none;
  }

  .nk-dm-index__control--prev {
    inset-inline-start: 0;
  }

  .nk-dm-index__control--next {
    inset-inline-end: 0;
    background: linear-gradient(270deg, var(--wp--preset--color--background) 58%, transparent);
  }

  .nk-dm-index__control span {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-.05em);
  }

  .nk-dm-index__control:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: -4px;
  }

  .nk-dm-index__inner:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: -2px;
  }
}