.directory-section {
  inline-size: var(--page);
  min-inline-size: 0;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-block-start: 7px solid var(--ink);
  border-radius: var(--radius);
}

.directory-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--line);
}

.directory-head h2 { max-inline-size: 880px; margin: .5rem 0; font-size: clamp(1.7rem, 4vw, 3.35rem); line-height: .98; letter-spacing: -.055em; }
.directory-head p:not(.eyebrow) { max-inline-size: 760px; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.58; text-wrap: pretty; }
.directory-freshness { min-inline-size: 160px; padding: .8rem; background: var(--paper-soft); border-inline-start: 3px solid var(--indigo); }
.directory-freshness span,
.directory-freshness strong,
.directory-freshness small { display: block; }
.directory-freshness strong { margin-block: .4rem; font-family: var(--font-data); font-size: .92rem; }
.directory-freshness small { color: var(--muted); font-size: .82rem; }

.directory-notice { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr); gap: 1rem; padding: .85rem 1rem; margin-block: 1rem; background: var(--indigo-soft); border-inline-start: 4px solid var(--indigo); font-size: .94rem; line-height: 1.55; }
.directory-notice span { color: var(--muted); }
.directory-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; padding-block: .7rem; }
.directory-controls label { display: flex; min-inline-size: 0; align-items: center; gap: .45rem; color: var(--muted); font-size: .84rem; font-weight: 700; }
.directory-controls select { min-block-size: 42px; max-inline-size: 230px; padding: .35rem 2rem .35rem .65rem; background: #fff; border: 1px solid var(--line); border-radius: 7px; font-size: .9rem; }
.directory-count { margin: 0 0 .65rem; color: var(--muted); font-family: var(--font-data); font-size: .84rem; }
.directory-table-wrap { max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.directory-table { inline-size: 100%; min-inline-size: 920px; border-collapse: collapse; }
.directory-table th,
.directory-table td { padding: .8rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; font-size: .88rem; }
.directory-table thead th { position: sticky; z-index: 1; inset-block-start: 0; color: var(--muted); background: var(--paper-soft); font-family: var(--font-data); font-size: .75rem; text-transform: uppercase; }
.directory-table tbody tr:last-child td { border-block-end: 0; }
.directory-table tbody tr:hover { background: #fafbfc; }
.directory-table td:nth-child(1) { inline-size: 64px; }
.directory-table td:nth-child(2) { inline-size: 42%; }
.directory-table td p { margin: .3rem 0; color: var(--muted); line-height: 1.45; }
.directory-table td small { display: block; margin-block-start: .3rem; color: var(--muted); font-size: .75rem; }
.directory-table td a { color: var(--indigo); font-weight: 700; text-decoration: none; }
.rank-number { color: var(--indigo); font-family: var(--font-data); }
.directory-chip { display: inline-block; padding: .2rem .38rem; color: var(--muted); background: var(--paper-soft); border: 1px solid var(--line); border-radius: 99px; font-size: .75rem; }
.unknown-price { color: var(--amber); font-weight: 700; }
.license-known { color: var(--green); font-family: var(--font-data); font-size: .75rem; }

.hardware-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.hardware-card { container-type: inline-size; display: grid; min-inline-size: 0; align-content: start; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; }
.hardware-image { inline-size: calc(100% + 2rem); aspect-ratio: 16 / 10; margin: -1rem -1rem 1rem; border-radius: 8px 8px 0 0; object-fit: contain; background: #eef1f7; }
.hardware-card header span,
.hardware-card header strong { display: block; }
.hardware-card header span { color: var(--indigo); font-family: var(--font-data); font-size: .75rem; text-transform: uppercase; }
.hardware-card header strong { margin-block-start: .35rem; font-size: 1rem; }
.hardware-mode { display: inline-flex; inline-size: fit-content; margin-block-start: .55rem; padding: .28rem .48rem; color: #274c3a; background: #e8f5ed; border: 1px solid #b8d9c5; border-radius: 99px; font-family: var(--font-data); font-size: .7rem; font-style: normal; font-weight: 700; line-height: 1.25; }
.hardware-card > p { min-block-size: 4.2em; margin: .75rem 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.hardware-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-block-start: 1px solid var(--line); }
.hardware-card dl div { min-inline-size: 0; padding: .55rem; border-block-end: 1px solid var(--line); }
.hardware-card dl div:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.hardware-card dt { color: var(--muted); font-family: var(--font-data); font-size: .75rem; text-transform: uppercase; }
.hardware-card dd { margin: .25rem 0 0; font-size: .78rem; }
.hardware-price { padding-block: .8rem; }
.hardware-price strong,
.hardware-price small { display: block; }
.hardware-price strong { font-family: var(--font-data); font-size: .78rem; }
.hardware-price small { margin-block-start: .2rem; color: var(--muted); font-size: .75rem; }
.hardware-offers { display: grid; gap: .55rem; padding: .75rem; margin-block-end: .75rem; background: var(--paper-soft); border: 1px solid var(--line); border-radius: 7px; }
.hardware-offers > strong { font-family: var(--font-data); font-size: .72rem; text-transform: uppercase; }
.hardware-offers > div { display: grid; gap: .4rem; }
.hardware-offers a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; min-inline-size: 0; padding: .52rem .6rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.hardware-offers a:hover { border-color: var(--indigo); }
.hardware-offers a span { min-inline-size: 0; overflow-wrap: anywhere; font-size: .78rem; font-weight: 700; }
.hardware-offers a b { color: var(--indigo); font-family: var(--font-data); font-size: .76rem; }
.hardware-offers a small { grid-column: 1 / -1; color: var(--muted); font-size: .7rem; }
.hardware-card footer { display: flex; align-items: end; justify-content: space-between; gap: .7rem; padding-block-start: .75rem; margin-block-start: auto; border-block-start: 1px solid var(--line); }
.hardware-card footer span { color: var(--muted); font-size: .75rem; }
.hardware-card footer a { flex: 0 0 auto; color: var(--indigo); font-size: .75rem; font-weight: 700; text-decoration: none; }
.hardware-card footer div { display: grid; gap: .35rem; justify-items: end; }

@container (min-width: 380px) {
  .hardware-offers > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gates-shelf { margin-block: 1.25rem; padding: clamp(.9rem, 2vw, 1.3rem); color: #fff; background: linear-gradient(135deg, #18203a, #30458d); border-radius: 12px; }
.gates-shelf > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.gates-shelf > header span { color: #bac8ff; font-family: var(--font-data); font-size: .75rem; text-transform: uppercase; }
.gates-shelf h3 { margin: .2rem 0 0; font-size: clamp(1.15rem, 2.6vw, 1.65rem); }
.gates-shelf > header a { color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none; }
#gates-book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
#gates-book-grid article { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .7rem; min-inline-size: 0; padding: .7rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 9px; }
#gates-book-grid img { inline-size: 72px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.24); }
#gates-book-grid strong,
#gates-book-grid span { display: block; }
#gates-book-grid strong { font-size: .94rem; line-height: 1.25; }
#gates-book-grid span { margin-block-start: .2rem; color: #dbe2ff; font-size: .82rem; }
#gates-book-grid p { margin: .45rem 0; color: #f1f3ff; font-size: .84rem; line-height: 1.48; }
#gates-book-grid a { color: #fff; font-size: .8rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.book-card { container-type: inline-size; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: .9rem; min-inline-size: 0; padding: .9rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 3px 12px rgba(18, 25, 44, .04); }
.book-card figure { position: relative; min-inline-size: 0; margin: 0; }
.book-card figure img { display: block; inline-size: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--paper-soft); border-radius: 6px; box-shadow: 0 8px 20px rgba(18, 25, 44, .17); }
.book-rank { position: absolute; inset: .4rem auto auto .4rem; display: grid; min-inline-size: 30px; block-size: 30px; padding-inline: .3rem; place-items: center; color: #fff; background: rgba(18, 25, 44, .92); border-radius: 99px; font-family: var(--font-data); font-size: .72rem; }
.book-copy { min-inline-size: 0; }
.book-copy > strong { display: block; margin-block-start: .55rem; font-size: .96rem; line-height: 1.2; overflow-wrap: anywhere; }
.book-copy > p { margin: .3rem 0 .55rem; color: var(--muted); font-size: .86rem; }
.book-copy > span { display: block; font-size: .86rem; line-height: 1.5; }
.book-copy > small { display: block; margin-block-start: .65rem; padding: .5rem; color: #704b12; background: #fff7e7; border-radius: 6px; font-size: .8rem; line-height: 1.42; }
.book-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.book-badges span,
.book-badges em { padding: .22rem .4rem; border-radius: 99px; font-family: var(--font-data); font-size: .67rem; font-style: normal; font-weight: 700; }
.book-badges span { color: var(--indigo); background: var(--indigo-soft); }
.book-badges em { color: #573c05; background: #f4d77a; }
.book-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; background: var(--paper-soft); border-radius: 7px; }
.book-card dl div { min-inline-size: 0; padding: .6rem; }
.book-card dt { color: var(--muted); font-family: var(--font-data); font-size: .7rem; text-transform: uppercase; }
.book-card dd { margin: .25rem 0 0; font-size: .82rem; overflow-wrap: anywhere; }
.book-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; }
.book-actions a { display: inline-flex; min-block-size: 40px; align-items: center; padding: .4rem .6rem; color: var(--indigo); background: var(--paper-soft); border: 1px solid var(--line); border-radius: 6px; font-size: .8rem; font-weight: 700; text-decoration: none; }
.book-actions a:hover { border-color: var(--indigo); }

.media-resource-grid,
.site-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.media-resource-card,
.site-resource-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .7rem; min-inline-size: 0; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.resource-number { display: grid; inline-size: 36px; block-size: 36px; place-items: center; color: var(--indigo); background: var(--indigo-soft); border-radius: 50%; font-family: var(--font-data); font-size: .72rem; }
.resource-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.resource-tags span { padding: .2rem .4rem; color: var(--muted); background: var(--paper-soft); border: 1px solid var(--line); border-radius: 99px; font-size: .68rem; }
.media-resource-card h3,
.site-resource-card h3 { margin: .55rem 0 .35rem; font-size: 1.06rem; }
.media-resource-card p,
.site-resource-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.media-resource-card small { display: block; margin-block-start: .6rem; color: var(--muted); font-size: .8rem; }
.media-resource-card footer { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: .8rem; }
.media-resource-card a,
.site-resource-card a { display: inline-flex; min-block-size: 40px; align-items: center; color: var(--indigo); font-size: .82rem; font-weight: 700; text-decoration: none; }
.site-resource-card a { display: inline-block; margin-block-start: .8rem; }

.benchmark-grid { display: grid; gap: .6rem; margin-block: 1rem; }
.benchmark-card { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; }
.benchmark-card > span { color: var(--indigo); font-family: var(--font-data); font-size: .75rem; }
.benchmark-card h3 { margin: 0; font-size: .86rem; }
.benchmark-card p { margin: .3rem 0; color: var(--muted); font-size: .82rem; }
.benchmark-card strong { display: block; font-size: .78rem; }
.benchmark-card a { display: inline-block; margin-block-start: .55rem; color: var(--indigo); font-size: .75rem; font-weight: 700; text-decoration: none; }

.coverage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-block: 1rem; }
.coverage-grid article { min-inline-size: 0; padding: .8rem; background: var(--paper-soft); border-inline-start: 3px solid var(--indigo); }
.coverage-grid strong,
.coverage-grid span,
.coverage-grid small { display: block; }
.coverage-grid strong { font-family: var(--font-data); font-size: 1.05rem; }
.coverage-grid span { margin-block: .3rem; font-size: .78rem; font-weight: 700; }
.coverage-grid small { color: var(--muted); font-size: .75rem; }
.change-list { display: grid; gap: .55rem; }
.change-list article { display: grid; grid-template-columns: 90px 100px minmax(0, 1fr); gap: .75rem; padding: .85rem; border: 1px solid var(--line); border-radius: 8px; }
.change-list time { color: var(--muted); font-family: var(--font-data); font-size: .75rem; }
.change-list h3 { margin: 0; font-size: .75rem; }
.change-list p { margin: .3rem 0; color: var(--muted); font-size: .78rem; }
.change-list a { color: var(--indigo); font-size: .75rem; font-weight: 700; text-decoration: none; }

@media (max-width: 980px) {
  .hardware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-grid,
  .media-resource-grid,
  .site-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #gates-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .directory-section { padding: .8rem; }
  .directory-head { grid-template-columns: 1fr; }
  .directory-freshness { max-inline-size: 300px; }
  .directory-notice { grid-template-columns: 1fr; gap: .25rem; }
  .directory-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .directory-controls label { display: grid; align-content: start; }
  .directory-controls select { inline-size: 100%; max-inline-size: none; }
  .directory-table-wrap { border: 0; overflow: visible; }
  .directory-table,
  .directory-table tbody,
  .directory-table tr,
  .directory-table td { display: block; inline-size: 100%; min-inline-size: 0; }
  .directory-table thead { display: none; }
  .directory-table tr { padding: .75rem; margin-block-end: .6rem; border: 1px solid var(--line); border-radius: 8px; }
  .directory-table td,
  .directory-table td:nth-child(1),
  .directory-table td:nth-child(2) { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .6rem; inline-size: 100%; padding: .48rem 0; border-block-end: 1px solid var(--line); }
  .directory-table td:last-child { border-block-end: 0; }
  .directory-table td::before { content: attr(data-label); color: var(--muted); font-family: var(--font-data); font-size: .75rem; text-transform: uppercase; }
  .directory-table td > :where(strong, span, a, p, small) { grid-column: 2; }
  .directory-table td p { margin-block-start: 0; }
  .hardware-grid,
  .book-grid,
  .media-resource-grid,
  .site-resource-grid { grid-template-columns: 1fr; }
  #gates-book-grid { grid-template-columns: 1fr; }
  .hardware-card > p { min-block-size: 0; }
  .change-list article { grid-template-columns: 80px minmax(0, 1fr); }
  .change-list article > div { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .directory-controls { grid-template-columns: 1fr; }
  .hardware-card dl { grid-template-columns: 1fr; }
  .hardware-card dl div:nth-child(odd) { border-inline-end: 0; }
  .book-card { grid-template-columns: 92px minmax(0, 1fr); gap: .7rem; }
  .book-card dl { grid-template-columns: 1fr; }
  .book-actions { display: grid; }
  .gates-shelf > header { align-items: start; flex-direction: column; }
  .coverage-grid { grid-template-columns: 1fr; }
  .benchmark-card { grid-template-columns: 34px minmax(0, 1fr); }
}