@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/bodoni-moda-latin-600-normal-a4975772d3.woff2) format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/bodoni-moda-latin-ext-600-normal-b27be6e9d8.woff2) format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/bodoni-moda-latin-600-italic-f9f9f4ae37.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal-5717f37059.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal-e3a28eade2.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/dm-mono-latin-400-normal-e1896b13b2.woff2) format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/dm-mono-latin-500-normal-9964608a84.woff2) format('woff2');
}

/* The live 4 stays in the flow and sets the box. A drawn 4 fills that box
   from outside the flow, so showing one cannot move anything. */
.wordmark-four { position: relative; }

.wordmark-four[data-cutting='true'] .wordmark-four-live { visibility: hidden; }

.wordmark-four-glyph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/*
 * heuristics.4thcltr.com: the 4thcltr.com `noir` recipe, copied (2026-10-25) rather than imported.
 * Tokens from 4thcltr.com src/index.css `@theme` and src/themes.ts `noir`; type roles from its
 * `.label`, `.type-body`, `.type-lede`, `.type-title` and `.type-sub-title`; the call to action is
 * `.hero-door-primary.button-solid`. The text line is the unit: every line-height is a whole or
 * half line, and every gap between blocks a whole number of them. One accent per page: the call
 * to action (the focus ring and a figure's frame are function, not decoration).
 *
 * Fonts are self-hosted (fonts.css, written by the build from the @fontsource packages): the same
 * three faces 4thcltr.com loads from Google Fonts, served from this origin so the build's PDF and
 * card renders never wait on a network.
 */
:root {
  --color-ground: #0a0a0b;
  --color-ground-lift: #121214;
  --color-card: #121214;
  --color-card-strong: #2c2c2d;
  --color-bone: #ede9e3;
  --color-copy: #c2bfba;
  --color-muted: #8e8b88;
  --color-faint: #838180;
  --color-accent: #ff6b4a;
  --color-accent-deep: #ff4a2a;
  --color-on-accent: #0a0a0b;
  --color-line: rgba(237, 233, 227, 0.14);
  --color-line-soft: rgba(237, 233, 227, 0.07);

  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  --line: 1.75rem;
  --text-label: 0.75rem;
  --text-label--line-height: 0.875rem;
  --text-body: 1.0625rem;
  --text-lede: 1.25rem;
  --text-sub-title: 1.25rem;
  --text-title: max(min(1.75rem, 6.2vw + 4.7px), min(2.25rem, 2.9vw));
  --text-title--line-height: 2.1875rem;
  --tracking-display: -0.028em;
  --tracking-title: -0.02em;
  --tracking-label: 0.06em;

  /*
   * The measure and its gutters are 4thcltr.com's (src/index.css `.shell`, `--shell-max` of the
   * noir recipe's `editorial` layout, and the `--shell-inline-space` steps), so the header row,
   * which matches 4thcltr.com's (e2e/fixtures/header-reference.json), stands on the same edges as
   * every section below it: 1.25rem under 640, 1.5rem, 2.5rem from 768, 3rem from 1024, 4rem
   * from 1400, inside 84rem. Until 2026-10-25 they were 1rem, 1.5rem and 2.5rem inside 72rem.
   */
  --gutter: 1.25rem;
  --shell: 84rem;
  --measure: 36rem;
  --figure: 52rem;

  color-scheme: dark;
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 2.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 3rem;
  }
}

@media (min-width: 1400px) {
  :root {
    --gutter: 4rem;
  }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-ground);
  color: var(--color-copy);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line);
  font-synthesis-weight: none;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-bone);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Roles: a face, a size and its line, a tracking and a wrap, together. Colour is ink, chosen where the text is. */
.label {
  font-family: var(--font-sans);
  font-stretch: 88%;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: var(--text-label--line-height);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-bone);
  text-wrap: balance;
}

.type-body {
  font-size: var(--text-body);
  line-height: var(--line);
  max-width: 62ch;
  text-wrap: pretty;
}

.type-lede {
  font-size: var(--text-lede);
  line-height: var(--line);
  max-width: 62ch;
  color: var(--color-copy);
  text-wrap: pretty;
}

.type-title {
  font-family: var(--font-sans);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--text-title--line-height);
  letter-spacing: var(--tracking-title);
  color: var(--color-bone);
  text-wrap: balance;
}

.type-sub-title {
  font-family: var(--font-sans);
  font-size: var(--text-sub-title);
  font-weight: 600;
  line-height: var(--line);
  letter-spacing: -0.01em;
  color: var(--color-bone);
  text-wrap: balance;
}

.muted,
.muted-copy {
  color: var(--color-muted);
}

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

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

/* Skip link: first focusable thing in the document, shown only when focused. */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.5rem;
  z-index: 80;
  padding: 0.625rem 1rem;
  background: var(--color-bone);
  color: var(--color-ground);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/*
 * The header: 4thcltr.com's, in the noir recipe with the top-inline navigation (owner,
 * 2026-10-25: one header for both sites), measured there and written to
 * e2e/fixtures/header-reference.json with the commit it was read from; e2e/header.spec.ts holds
 * this one to it within 1px at 1440, 768 and 375. Its lessons hold here too (4thcltr.com
 * REVIEW.md): the band and the measure are different elements, so `.site-header` spans the
 * viewport and paints the ground and the rule, and `.site-header-row` carries the measure; and a
 * tap target and its ink are different boxes, so the links carry no inline padding and their text
 * stands on the gutter.
 *
 * The band is 4thcltr.com's solid state: the ground and a 1px rule in line-soft, under a row of
 * 1.25rem, a 44px control and 1.25rem (85px). On 4thcltr.com a desktop band is transparent over the
 * hero until the page scrolls; this one is in the flow over no hero, so it is always the scrolled
 * state. Fixed Latin chrome: no Shuffle, no settings and no design axis here (the subdomain stays
 * noir).
 */
.site-header {
  background-color: var(--color-ground);
  border-bottom: 1px solid var(--color-line-soft);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}

/*
 * The wordmark, as 4thcltr.com sets it (its Layout.tsx Wordmark and src/index.css): a 44px row,
 * centred, 8px between the mark and the label; the "4" in the display serif at 1.65rem, line 0.86,
 * tracked -0.028em (-0.035em under 640px); "th" at 0.55em, italic, superscript; "Culture" in the
 * label style in bone, its line the label's 14px under 1024 and 1 from there (the top-inline rule).
 * Hover softens both to copy. The drawn 4's box rules are 4thcltr.com's own, vendored in
 * site/vendor/wordmark/wordmark.css and appended to this stylesheet by the build.
 */
.wordmark {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--color-bone);
  text-decoration: none;
}

/*
 * The lockup's boxes are reserved, so nothing in the header moves when its faces arrive (they load
 * with `font-display: swap`; on a slow connection the fallback lockup is up to 4.4px narrower, and
 * "Culture" and "Heuristics" stood 4.4px further left until Bodoni came). Each part is as wide as
 * its text in its own face, measured 2026-10-25 in Chromium and written in the part's own em, so it
 * follows the text size: the mark 26.94px (27.50px from 640px, where its tracking is tighter) of
 * 26.4px, "Culture" 55.02px and "Heuristics" 72.63px of 12px. The text inside may still swap; the
 * boxes cannot. e2e/wordmark.spec.ts holds the boxes still while the faces are withheld, and holds
 * each reservation to its text. This is this site's addition: 4thcltr.com's lockup reserves nothing.
 */
.wordmark-mark {
  display: block;
  inline-size: 1.04167em;
  block-size: 0.89016em;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 0.86;
  letter-spacing: -0.028em;
  color: var(--color-bone);
  transition: color 300ms;
}

@media (max-width: 639px) {
  .wordmark-mark {
    inline-size: 1.02036em;
    letter-spacing: -0.035em;
  }
}

.wordmark-th {
  font-size: 0.55em;
  font-style: italic;
  vertical-align: super;
}

.wordmark-label {
  display: block;
  inline-size: 4.58464em;
  color: var(--color-bone);
  transition: color 300ms;
}

.wordmark:hover {
  text-decoration: none;
}

.wordmark:hover .wordmark-mark,
.wordmark:hover .wordmark-label {
  color: var(--color-copy);
}

/* This site's name after the studio's lockup, set off by a rule (a border, never generated content). */
.wordmark-site {
  display: block;
  /* Border-box: its text, then the padding and rule that set it off. */
  inline-size: calc(6.05209em + 0.5rem + 1px);
  padding-inline-start: 0.5rem;
  border-inline-start: 1px solid var(--color-line);
}

@media (min-width: 1024px) {
  .wordmark-label,
  .wordmark-site {
    line-height: 1;
  }
}

@media (max-width: 399px) {
  .wordmark-site {
    display: none;
  }
}

/*
 * The navigation: 4thcltr.com's top-inline links. The label style in bone (Archivo 12px, 500, at
 * 88% width, tracked 0.06em, upper case), 2.5rem apart, each a 44px target with no inline padding,
 * its text centred on a line of 1; a 1px bone rule under the current page's link, and drawn in
 * under any other on hover or focus. This site's own four links (Analyses, Patterns, Method,
 * 4th Culture), at the row's inline end where 4thcltr.com has Shuffle and its settings.
 *
 * Each link's text box is reserved (`.site-nav-text`), as the lockup's are: the nav is at the
 * inline end and as wide as its text, so a face arriving late moved every link (5.8px at 1440,
 * backlog header-nav-font-swap-shift). The widths are each text in Archivo at the label style,
 * measured 2026-10-25 in Chromium and written in em: "Analyses" 61.28px, "Patterns" 62.11px,
 * "Method" 51.67px and "4th Culture" 80.67px of 12px, tracking included. e2e/wordmark.spec.ts holds them still while
 * the faces are withheld, and holds each to its text.
 */
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: 0.35rem;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-stretch: 88%;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-bone);
  text-decoration: none;
  transition: color 240ms ease;
}

.site-nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--color-bone);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav-text {
  display: block;
}

.site-nav-text[data-reserve='analyses'] {
  inline-size: 5.1068em;
}

.site-nav-text[data-reserve='patterns'] {
  inline-size: 5.1758em;
}

.site-nav-text[data-reserve='method'] {
  inline-size: 4.306em;
}

.site-nav-text[data-reserve='studio'] {
  inline-size: 6.7227em;
}

.site-nav-arrow {
  flex-shrink: 0;
  margin-inline-start: 0.3125rem;
}

/*
 * Under 640px the wordmark and four links do not share a line (at 375 they need some 380px of
 * 335, and 4thcltr.com folds its links into a menu there, which this site has no script for), so
 * the links take a second line of their own, spread across the measure: the first one's text on the
 * start gutter, the last one's arrow on the end gutter. The wordmark's line keeps 4thcltr.com's
 * 20px above it; the links' 44px line sits under it with a quarter rem before the rule.
 */
@media (max-width: 639.98px) {
  .site-header-row {
    flex-wrap: wrap;
    row-gap: 0;
    padding-block-end: 0.25rem;
  }

  .site-nav {
    flex-basis: 100%;
  }

  .site-nav ul {
    justify-content: space-between;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a,
  .site-nav a::after {
    transition: none;
  }
}

main {
  display: block;
  padding-block: calc(var(--line) * 1.5) calc(var(--line) * 3);
}

/* Breadcrumbs: Home -> Sector -> Report. The separator is a border, never generated content. */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.breadcrumbs li + li {
  margin-inline-start: 0.625rem;
  padding-inline-start: 0.625rem;
  /* A drawn rule, not generated content: a pseudo-element's text reaches some screen readers. */
  background: linear-gradient(var(--color-line), var(--color-line)) no-repeat left center / 1px 1rem;
}

[dir='rtl'] .breadcrumbs li + li {
  background-position: right center;
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-muted);
}

.breadcrumbs a[aria-current='page'] {
  color: var(--color-copy);
  text-decoration: none;
}

/* Heads of pages. */
.index-head,
.report-head {
  padding-block: var(--line) calc(var(--line) / 2);
  display: grid;
  gap: var(--line);
  max-width: 56rem;
}

.report-kicker,
.index-head > .label {
  margin-block-end: calc(var(--line) * -0.5);
}

.report-audience {
  color: var(--color-bone);
}

.dateline {
  display: grid;
  gap: calc(var(--line) / 2);
  padding-block-start: calc(var(--line) / 2);
  border-top: 1px solid var(--color-line);
  max-width: var(--measure);
}

.dateline > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.dateline dd {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.report-pdf a,
.sector-link,
.card-title a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

/*
 * The index hero (plan E): the analysed sites are the first screen. The title is a sub-title, so
 * the display serif belongs to the sites' names; each ruled row is a name and its headline finding,
 * beside it from 768px and under it on a phone, the level running on after the headline. From
 * 1024px the list takes seven of twelve columns and the studio card five, top-aligned; narrower,
 * the card follows the list.
 */
.index-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--line) * 1.5);
  align-items: start;
  padding-block-start: calc(var(--line) / 2);
}

.index .index-hero {
  margin-block-start: 0;
}

@media (min-width: 1024px) {
  .index-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .index-hero-list {
    grid-column: 1 / span 7;
  }

  .index-hero .studio-card {
    grid-column: 8 / span 5;
  }
}

.index-title {
  max-width: 32rem;
  margin-block-end: calc(var(--line) / 2);
}

.hero-list {
  border-top: 1px solid var(--color-line);
}

.hero-row {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-line-soft);
}

@media (min-width: 768px) {
  .hero-row {
    grid-template-columns: minmax(10rem, 2fr) minmax(0, 3fr);
    column-gap: var(--gutter);
    align-items: baseline;
  }
}

.hero-site {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-bone);
  text-decoration: none;
}

.hero-site:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.hero-finding {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-muted);
  text-wrap: pretty;
}

.hero-level {
  white-space: nowrap;
}

.analyses-meta {
  display: block;
  margin: 0;
}

.analyses-meta a {
  display: inline-block;
  line-height: 2.75rem;
}

@media (min-width: 768px) {
  .analyses .hero-row {
    align-items: start;
  }

  .analyses .hero-finding {
    padding-block-start: 0.625rem;
  }
}

.hero-more a,
.hero-facts a {
  /* Inline, not flex: a flex row makes each figure its own item, which breaks the underline between
     them and drops the spaces around them. The tap height comes from line-height. */
  display: inline-block;
  line-height: 2.75rem;
}

.hero-more {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
}

.hero-more a {
  line-height: 1.2;
  min-height: 2.75rem;
  color: var(--color-bone);
  text-decoration-thickness: 1px;
}

.hero-more a .hero-more-arrow {
  width: 0.7em;
  height: 0.7em;
  margin-inline-start: 0.25em;
  vertical-align: baseline;
}

.hero-facts {
  margin-block-start: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-muted);
}

.hero-facts a {
  color: var(--color-copy);
}

/*
 * The studio card: who made these, the page's one solid button and a ruled row to the studio's
 * site. Rules and the ground, no shadow: on the index hero a sidebar inside the soft line; at the
 * end of a report or sector page a full-width band between two rules, its text at the measure.
 */
.studio-card-body {
  display: grid;
  gap: calc(var(--line) / 2);
}

.studio-card-sidebar {
  border: 1px solid var(--color-line-soft);
  padding: var(--line) var(--gutter);
}

@media (min-width: 1024px) {
  .studio-card-sidebar {
    padding-inline: 1.5rem;
  }
}

.studio-card-band {
  margin-block-start: calc(var(--line) * 2.5);
  padding-block: calc(var(--line) * 1.5);
  border-block: 1px solid var(--color-line);
}

.studio-card-band .studio-card-body {
  max-width: var(--measure);
}

/* The report's own foot follows the band: the band's lower rule is its top one. */
.studio-card-band + .report-foot {
  margin-block-start: 0;
  border-top: 0;
}

.studio-card-text {
  font-size: var(--text-lede);
  line-height: var(--line);
  color: var(--color-bone);
  text-wrap: pretty;
}

.studio-card .cta {
  margin-block-start: 0;
}

.studio-card-visit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  margin-block-start: calc(var(--line) / 4);
  padding-block: 0.5rem;
  border-block: 1px solid var(--color-line-soft);
  color: var(--color-bone);
  text-decoration: none;
}

.studio-card-visit:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.studio-card-arrow,
.hero-more-arrow {
  flex-shrink: 0;
}

/* Sections of an analysis. */
.report section,
.report-findings,
.index section,
.sector section,
.method section {
  margin-block-start: calc(var(--line) * 2);
}

.report-summary {
  display: grid;
  gap: var(--line);
}

.summary-theme {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-bone);
  text-wrap: balance;
}

.report-start h2,
.report-examined h2,
.report-checks h2,
.index section > h2,
.sector section > h2,
.method section > h2 {
  margin-block-end: calc(var(--line) / 2);
}

.start-list {
  counter-reset: none;
  border-top: 1px solid var(--color-line-soft);
}

.start-list li {
  border-bottom: 1px solid var(--color-line-soft);
  padding-block: 0.25rem;
}

/* Number in its own column; the title and its level run as one line of text after it. */
.start-item {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
}

.start-text {
  display: block;
  padding-block: 0.5rem;
  line-height: 1.5rem;
}

.start-list a {
  text-decoration: none;
  padding-block: 0.625rem;
}

.start-list a:hover {
  text-decoration: underline;
}

.start-level {
  white-space: nowrap;
}

.start-number {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Tables: rules, not boxes. */
.counts,
.checks {
  width: 100%;
  max-width: 48rem;
  border-collapse: collapse;
  margin-block-start: var(--line);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.counts caption {
  text-align: start;
  padding-block-end: 0.5rem;
  font-family: var(--font-sans);
  font-stretch: 88%;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.counts th,
.counts td,
.checks th,
.checks td {
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--color-line-soft);
  text-align: start;
  vertical-align: baseline;
  font-weight: 400;
}

.counts thead th {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-stretch: 88%;
  font-weight: 500;
  color: var(--color-muted);
  border-bottom-color: var(--color-line);
}

.counts tbody th,
.checks th {
  color: var(--color-copy);
}

.counts tfoot th,
.counts tfoot td {
  color: var(--color-bone);
  font-weight: 600;
  border-bottom: 0;
}

.num {
  text-align: end !important;
  font-variant-numeric: tabular-nums;
  padding-inline-end: 0 !important;
  padding-inline-start: 0.5rem !important;
}

.checks td.num {
  font-family: var(--font-mono);
  color: var(--color-bone);
}

/*
 * Figures at even intervals. From 560px the comparison table is fixed: the name column takes 28% and
 * the five number columns share the rest equally, so no header ("Best practice" is the longest) pulls
 * one column wider than its neighbours (owner, 2026-10-25: "table looks lopsided"). Narrower, five
 * equal columns cannot each hold the word PRACTICE (60px), so the table sizes to its content and its
 * headers wrap; under 400px the cells tighten so it fits a 320px phone (it was 324px wide in a 288px
 * column). The one-analysis table has four columns and is fixed at every width. Headers share a
 * bottom line whether or not they wrap.
 */
.counts thead th {
  vertical-align: bottom;
}

.counts-one {
  table-layout: fixed;
}

@media (min-width: 560px) {
  .counts:not(.counts-one) {
    table-layout: fixed;
  }

  .counts .col-name {
    width: 28%;
  }

  .counts .col-num {
    width: 14.4%;
  }
}

@media (max-width: 399.98px) {
  .counts {
    font-size: 0.875rem;
  }

  .counts th,
  .counts td {
    padding-inline-end: 0.25rem;
  }

  .counts .num {
    padding-inline-start: 0.25rem !important;
  }
}

/* A finding: kicker, title, details, figure, the three parts, the measurements. */
.findings-intro {
  margin-block-end: calc(var(--line) / 2);
}

.finding {
  margin-block-start: calc(var(--line) * 2.5);
  padding-block-start: calc(var(--line) * 1.5);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: var(--line);
}

.finding > :not(.finding-figure) {
  max-width: var(--measure);
}

.finding-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.finding-title {
  margin-block-start: calc(var(--line) / 2);
}

.level {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-line);
  color: var(--color-bone);
}

.level-mark {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid currentColor;
}

.level-high .level-mark {
  background: currentColor;
}

.level-medium .level-mark {
  background: linear-gradient(to top, currentColor 50%, transparent 50%);
}

.level-practice .level-mark {
  border-radius: 50%;
}

.finding-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  margin-block-start: var(--line);
  padding-block: 0.75rem;
  border-block: 1px solid var(--color-line-soft);
}

.finding-meta dd {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-bone);
  margin-block-start: 0.25rem;
}

.finding-wcag {
  grid-column: 1 / -1;
}

.wcag-line {
  display: block;
}

.finding-figure {
  margin-block-start: var(--line);
  max-width: var(--figure);
  margin-inline: calc(var(--gutter) * -1);
}

.finding-figure img {
  width: 100%;
  background: var(--color-ground-lift);
}

.finding-figure figcaption {
  padding-inline: var(--gutter);
  margin-block-start: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.3125rem;
  color: var(--color-muted);
}

@media (min-width: 640px) {
  .finding-figure {
    margin-inline: 0;
  }

  .finding-figure figcaption {
    padding-inline: 0;
  }

  .finding-meta {
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: start;
  }
}

/* A phone capture is tall and narrow; it is shown at a phone's width rather than stretched to the column. */
.finding-figure-phone {
  max-width: 26rem;
}

.oir {
  margin-block-start: var(--line);
}

.oir h3,
.facts h3 {
  margin-block-end: 0.375rem;
}

.oir p {
  color: var(--color-copy);
}

.facts {
  margin-block-start: var(--line);
}

.facts-list {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.3125rem;
  color: var(--color-muted);
  display: grid;
  gap: 0.375rem;
}

.facts-list li {
  padding-inline-start: 0.875rem;
  border-inline-start: 1px solid var(--color-line);
}

.examined-list {
  display: grid;
  gap: 0.25rem;
  margin-block-end: var(--line);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.examined-list a {
  display: inline-block;
  padding-block: 0.625rem;
}

/* axe as rules: the summary in the table, each rule behind a disclosure (the only place an element count is printed). */
.checks td.checks-rules {
  color: var(--color-bone);
  text-align: end;
  padding-inline-end: 0;
}

.axe-rules {
  max-width: 48rem;
  margin-block-start: calc(var(--line) / 2);
  border-bottom: 1px solid var(--color-line-soft);
}

.axe-rules summary {
  cursor: pointer;
  padding-block: 0.75rem;
  color: var(--color-copy);
}

.axe-rule-list {
  padding-block-end: calc(var(--line) / 2);
}

.axe-rule {
  padding-block: 0.5rem;
  border-top: 1px solid var(--color-line-soft);
}

.axe-rule-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  align-items: baseline;
}

.axe-rule-id {
  font-family: var(--font-mono);
  color: var(--color-bone);
  overflow-wrap: anywhere;
}

.axe-rule-exemption {
  color: var(--color-copy);
}

.report-checks .axe-rule p {
  margin-block-start: 0;
}

@media print {
  .axe-rules::details-content {
    content-visibility: visible;
    display: block;
  }
}

.report-examined p + p,
.report-checks p {
  margin-block-start: calc(var(--line) / 2);
}

/* The foot of an analysis. */
.report-foot {
  margin-block-start: calc(var(--line) * 2.5);
  padding-block-start: calc(var(--line) * 1.5);
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: calc(var(--line) * 1.5);
}

.notice {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--color-muted);
}

.author h2 {
  margin-block-end: 0.5rem;
}

/* The call to action: .hero-door-primary.button-solid, the page's one accent. */
.cta-block {
  margin-block-start: calc(var(--line) * 2.5);
  padding-block-start: calc(var(--line) * 1.5);
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: calc(var(--line) / 2);
  max-width: var(--measure);
}

.report-foot .cta-block {
  margin-block-start: 0;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  width: 100%;
  max-width: 46rem;
  margin-block-start: calc(var(--line) / 2);
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 500;
  font-size: var(--text-body);
  line-height: 1.5rem;
  text-align: start;
  text-decoration: none;
  transition: background-color 250ms ease, border-color 250ms ease, transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cta:hover,
.cta:focus-visible {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  transform: translateY(-1px);
}

.cta-arrow {
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .cta {
    width: auto;
    padding-inline: 1.25rem;
  }
}

/* Cards, sectors and lists on the index and sector pages. */
.cards {
  display: grid;
  gap: var(--line);
  grid-template-columns: minmax(0, 1fr);
}

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

@media (min-width: 1200px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  display: grid;
  align-content: start;
  gap: calc(var(--line) / 2);
  padding-block-start: calc(var(--line) / 2);
  border-top: 1px solid var(--color-line);
}

.card-title a {
  text-decoration: none;
}

.card-title a:hover {
  text-decoration: underline;
}

.card-summary {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.card-facts {
  font-size: 0.8125rem;
  line-height: 1.3125rem;
  color: var(--color-muted);
}

.sector-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line-soft);
  max-width: var(--measure);
}

.sector-list li {
  border-bottom: 1px solid var(--color-line-soft);
  padding-block: 0.25rem 0.75rem;
}

.sector-link {
  gap: 0.75rem;
  align-items: baseline !important;
  padding-block-start: 0.5rem;
  text-decoration: none;
}

.sector-name {
  font-size: var(--text-sub-title);
  font-weight: 600;
  color: var(--color-bone);
}

.sector-link:hover .sector-name {
  text-decoration: underline;
}

.sector-names {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-muted);
}

.recurring-list,
.bullets,
.heuristic-list {
  display: grid;
  gap: 0.5rem;
}

.bullets li,
.heuristic-list li,
.recurring-list li {
  padding-inline-start: 0.875rem;
  border-inline-start: 1px solid var(--color-line);
}

.heuristic-list {
  margin-block-start: calc(var(--line) / 2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .heuristic-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.recurring-name {
  color: var(--color-bone);
}

.method section p + p,
.method section p + ul,
.method section ul + p,
.method section dl + p {
  margin-block-start: calc(var(--line) / 2);
}

.levels-list {
  display: grid;
  gap: var(--line);
}

.levels-list dt {
  font-weight: 600;
  color: var(--color-bone);
}

.error-page {
  padding-block: calc(var(--line) * 2);
  display: grid;
  gap: var(--line);
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.error-links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.error-marker {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Footer band. */
.site-footer {
  border-top: 1px solid var(--color-line-soft);
}

.site-footer-row {
  display: grid;
  gap: 0.75rem;
  padding-block: calc(var(--line) * 1.5);
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-muted);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
}

.site-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-copy);
}

.site-footer-host {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.site-footer-copyright {
  color: var(--color-faint);
}

/*
 * The patterns page (plan F1). Figures are rules and type, not boxes. The charts' colours are one
 * neutral ramp from bone down to the ground, validated as ordinal ramps on #0a0a0b with the dataviz
 * skill's validator (levels and screen sizes, brightest = most severe or widest), and the one accent
 * marks the median on the strip chart. Text in a chart is in the text tokens, never a series colour.
 *
 * The steps are spaced evenly in contrast, the most four steps above the ground can be: each 2.0:1
 * from its neighbour (three sizes: 2.8:1), the darkest 2.07:1 on the ground. 3:1 between neighbours
 * would need a ground darker than black, so the levels also differ in shape: a 2px ground gap
 * between segments, and best practice drawn hollow.
 */
:root {
  --chart-level-high: #ede9e3;
  --chart-level-medium: #a9a7a2;
  --chart-level-low: #73726f;
  --chart-level-practice: #464543;
  --chart-viewport-desktop: #ede9e3;
  --chart-viewport-tablet: #8d8b87;
  --chart-viewport-mobile: #464543;
}

.patterns-section {
  margin-block-start: calc(var(--line) * 2.5);
  padding-block-start: var(--line);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: var(--line);
}

.patterns-section > h2 {
  margin-block-end: 0.25rem;
}

.patterns-n {
  margin-block-end: calc(var(--line) / 2);
  text-transform: none;
  letter-spacing: 0.01em;
}

.patterns-section > p + p,
.patterns-section > p + .chart-legend,
.patterns-section > .chart-legend + .chart {
  margin-block-start: calc(var(--line) / 2);
}

.patterns-figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--line) var(--gutter);
  max-width: 56rem;
}

@media (min-width: 640px) {
  .patterns-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .patterns-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.patterns-figures > div {
  padding-block-start: 0.75rem;
  border-top: 1px solid var(--color-line-soft);
}

.patterns-figure {
  margin-block-start: 0.5rem;
  font-size: 3rem;
  line-height: calc(var(--line) * 2);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-bone);
}

.patterns-sentence {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* The levels' shares: the one-analysis table's look (.counts-one), its own class so the count-table checks stay about counts. */
.patterns-levels {
  width: 100%;
  max-width: 36rem;
  table-layout: fixed;
  border-collapse: collapse;
  margin-block-start: var(--line);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.patterns-levels caption {
  text-align: start;
  padding-block-end: 0.5rem;
  font-stretch: 88%;
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.patterns-levels tbody th {
  text-align: start;
  color: var(--color-copy);
}

.patterns-levels th,
.patterns-levels td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-weight: 400;
  vertical-align: bottom;
}

.patterns-levels thead th {
  font-size: var(--text-label);
  line-height: var(--text-label--line-height);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-stretch: 88%;
  font-weight: 500;
  color: var(--color-muted);
  border-bottom-color: var(--color-line);
}

.patterns-heuristics,
.patterns-wcag,
.patterns-sectors,
.patterns-platforms {
  display: grid;
  gap: var(--line);
  margin-block-start: calc(var(--line) * 1.5);
  max-width: var(--measure);
}

.patterns-heuristic,
.patterns-wcag-item,
.patterns-sector,
.patterns-platform {
  padding-inline-start: 0.875rem;
  border-inline-start: 1px solid var(--color-line);
  scroll-margin-top: var(--line);
}

.patterns-heuristic-name,
.patterns-wcag-name,
.patterns-sector-name {
  font-size: var(--text-body);
  line-height: var(--line);
  font-weight: 600;
  color: var(--color-bone);
}

.patterns-sector-name a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.patterns-findings {
  margin-block-start: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.patterns-findings li + li {
  margin-block-start: 0.5rem;
}

.patterns-findings a {
  display: inline-block;
  padding-block: 0.25rem;
}

.patterns-subhead {
  margin-block-start: var(--line);
}

.patterns-platform-name {
  color: var(--color-bone);
}

.patterns-checks {
  margin-block-start: var(--line);
}

/*
 * At 320 the checks table's narrowest is its column's 280px and half a pixel more (four columns of
 * unbreakable words and one-line figures, since the gutter became 4thcltr.com's 1.25rem on
 * 2026-10-25), so under 400px the cells keep a quarter rem between them rather than a half.
 */
@media (max-width: 399.98px) {
  .patterns-checks th,
  .patterns-checks td {
    padding-inline-end: 0.25rem;
  }

  .patterns-checks .num {
    padding-inline-start: 0.25rem !important;
  }
}

/* Figures stay on one line; the check's name is what wraps on a phone. */
.patterns-checks td.num {
  white-space: nowrap;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.patterns-checks thead th {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-stretch: 88%;
  font-weight: 500;
  color: var(--color-muted);
}

/* Charts. */
.chart {
  display: block;
  max-width: 48rem;
  margin-block-start: calc(var(--line) / 2);
  overflow: visible;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-copy);
}

.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.chart-label {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: var(--color-copy);
}

.chart-value,
.chart-tick,
.chart-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--color-bone);
}

.chart-value-small {
  font-size: 11px;
}

.chart-tick {
  fill: var(--color-muted);
}

.chart-median-label {
  fill: var(--color-copy);
}

.chart-cell-dark {
  fill: var(--color-ground);
}

.chart-axis,
.chart-rule {
  stroke: var(--color-line);
  stroke-width: 1;
}

.chart-rule {
  stroke: var(--color-line-soft);
}

.chart-gap {
  fill: var(--color-ground);
}

.chart-median {
  fill: var(--color-accent);
}

.chart-dot {
  fill: var(--color-bone);
  stroke: var(--color-ground);
  stroke-width: 2;
}

.chart-hit {
  fill: transparent;
}

.chart-strip a:focus-visible {
  outline: none;
}

.chart-strip a:focus-visible .chart-dot,
.chart-strip a:hover .chart-dot {
  stroke: var(--color-accent);
}

.fill-level-high {
  fill: var(--chart-level-high);
}

.fill-level-medium {
  fill: var(--chart-level-medium);
}

.fill-level-low {
  fill: var(--chart-level-low);
}

/* Best practice is an outline in low's grey, never a fourth fill alone (see charts.tsx, Series.hollow). */
.fill-level-practice {
  fill: var(--color-ground);
  stroke: var(--chart-level-low);
  stroke-width: 1.5;
}

.fill-viewport-desktop {
  fill: var(--chart-viewport-desktop);
}

.fill-viewport-tablet {
  fill: var(--chart-viewport-tablet);
}

.fill-viewport-mobile {
  fill: var(--chart-viewport-mobile);
}

/* The heatmap's four steps, dark to light: the same ramp read the other way, more findings brighter. */
.fill-heat-1 {
  fill: var(--chart-level-practice);
}

.fill-heat-2 {
  fill: var(--chart-level-low);
}

.fill-heat-3 {
  fill: var(--chart-level-medium);
}

.fill-heat-4 {
  fill: var(--chart-level-high);
}

/* The one fixed-size chart scrolls inside its own box, never the page. */
.chart-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-block-start: calc(var(--line) / 2);
}

.chart-scroll:focus-visible {
  outline-offset: 2px;
}

.chart-scroll .chart {
  max-width: none;
  margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/*
 * The PDF (scripts/build.mjs prints each analysis with Playwright): the same article on paper,
 * dark ink on white so it prints, with the chrome, the skip link and the download link left out.
 * The call to action stays as a line of text with its address.
 */
@page {
  size: Letter;
  margin: 16mm 16mm 18mm;
}

@media print {
  :root {
    --color-ground: #ffffff;
    --color-ground-lift: #f3f2f0;
    --color-bone: #0a0a0b;
    --color-copy: #2b2a29;
    --color-muted: #5c5a58;
    --color-faint: #6b6967;
    --color-line: rgba(10, 10, 11, 0.22);
    --color-line-soft: rgba(10, 10, 11, 0.12);
    --gutter: 0;
    color-scheme: light;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .skip-link,
  .site-nav,
  .report-pdf,
  .breadcrumbs,
  .site-footer-links {
    display: none !important;
  }

  main {
    padding-block: 12pt 0;
  }

  .display {
    font-size: 30pt;
  }

  .summary-theme {
    font-size: 17pt;
  }

  .type-title {
    font-size: 15pt;
    line-height: 1.25;
  }

  .finding {
    break-before: page;
    margin-block-start: 0;
    border-top: 0;
    padding-block-start: 0;
  }

  .finding-figure {
    break-inside: avoid;
    margin-inline: 0;
    max-width: 100%;
  }

  .finding-figure img {
    max-height: 4.4in;
    width: auto;
    max-width: 100%;
  }

  .finding-figure-phone img {
    max-height: 3.6in;
  }

  h1,
  h2,
  h3,
  .finding-kicker {
    break-after: avoid;
  }

  .oir,
  .facts,
  .finding-meta,
  .counts,
  .checks,
  .start-list li {
    break-inside: avoid;
  }

  .finding > :not(.finding-figure),
  .measure,
  .cta-block,
  .studio-card-band .studio-card-body {
    max-width: none;
  }

  .studio-card-band {
    break-inside: avoid;
  }

  .studio-card-arrow {
    display: none;
  }

  .report-examined {
    break-before: page;
  }

  .cta {
    background: none;
    border: 0;
    color: var(--color-bone);
    padding: 0;
    text-decoration: underline;
    width: auto;
  }

  .cta::after {
    content: ' ' attr(href);
    font-family: var(--font-mono);
    font-size: 9pt;
  }

  .cta-arrow {
    display: none;
  }

  /* The wordmark at rest on paper, whatever the screen was showing. */
  .wordmark-four-glyph {
    display: none;
  }

  .wordmark-four[data-cutting='true'] .wordmark-four-live {
    visibility: visible;
  }

  a {
    color: inherit;
  }
}