.hardware-page {
  --cyan: #8cffc6;
  --cyan-dark: #247d62;
  --pink: #ffc45c;
  --yellow: #ffe99a;
  --line: rgba(140, 255, 198, .42);
  background-image:
    radial-gradient(circle at 15% 18%, rgba(140, 255, 198, .2), transparent 22rem),
    radial-gradient(circle at 80% 14%, rgba(255, 196, 92, .12), transparent 20rem),
    linear-gradient(180deg, rgba(7, 14, 15, .8), rgba(7, 11, 14, .96)),
    linear-gradient(135deg, #06100e 0%, #0b1918 42%, #17130d 100%);
  text-shadow: 0 0 12px rgba(140, 255, 198, .12);
}
.hardware-page .brand-wordmark { text-shadow: 0 0 12px rgba(140, 255, 198, .75), 0 0 24px rgba(255, 196, 92, .34), 3px 3px 0 rgba(255, 196, 92, .55); }
.hardware-page .archive-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: clamp(32px, 7vw, 90px); align-items: center; padding: 92px 0 88px; }
.hardware-page .archive-hero h1 { margin-bottom: 24px; }
.hardware-page .archive-lede { max-width: 680px; color: var(--muted); font-size: 17px; }
.hardware-page .archive-stamp, .hardware-page .record-number { color: var(--yellow); font-size: 10px; letter-spacing: .12em; }
.archive-index-panel, .archive-note { padding: 24px; border: 1px solid var(--line); background: rgba(0, 0, 0, .66); box-shadow: 6px 6px 0 rgba(255, 196, 92, .4); }
.archive-index-panel p:not(.panel-label) { color: var(--muted); font-size: 13px; }
.archive-index-panel .button { margin-top: 12px; }
.catalog-section { padding: 20px 0 100px; }
.component-catalog { padding: 36px 0 54px; }
.component-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.component-record .record-back { flex-wrap: wrap; }
.component-card { display: flex; flex-direction: column; min-height: 230px; padding: 20px; border: 1px solid rgba(140, 255, 198, .35); background: rgba(0, 0, 0, .75); color: var(--paper); text-decoration: none; transition: border-color .15s, transform .15s; }
.component-card:hover, .component-card:focus-visible { border-color: var(--yellow); transform: translateY(-3px); }
.component-card span { color: var(--yellow); font-size: 9px; letter-spacing: .1em; }
.component-card strong { margin: 12px 0 8px; color: var(--cyan); font-family: var(--display); font-size: 25px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.component-card p { flex: 1; color: var(--muted); font-size: 12px; }
.component-card b { color: var(--yellow); font-size: 10px; letter-spacing: .1em; }
.component-record .record-hero h1 { font-size: clamp(42px, 5vw, 64px); overflow-wrap: anywhere; }
.hardware-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hardware-card { display: block; min-height: 190px; padding: 22px; border: 1px solid rgba(140, 255, 198, .35); background: rgba(0, 0, 0, .75); color: var(--paper); text-decoration: none; transition: border-color .15s, transform .15s; }
.hardware-card:hover, .hardware-card:focus-visible { border-color: var(--yellow); transform: translateY(-3px); }
.hardware-card h3 { margin: 12px 0; font-size: 25px; }
.hardware-card p { min-height: 56px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.hardware-card b { color: var(--yellow); font-size: 10px; letter-spacing: .1em; }
.archive-note { margin-bottom: 100px; max-width: 880px; }
.archive-note h2 { font-size: clamp(34px, 4vw, 50px); }
.archive-note p:last-child { margin: 0; color: var(--muted); }
.hardware-record { padding: 52px 0 100px; }
.hardware-record > .section-heading h1 { margin-bottom: 18px; font-size: clamp(34px, 5vw, 60px); overflow-wrap: anywhere; }
.record-back { display: flex; gap: 18px; margin-bottom: 34px; color: var(--yellow); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.record-back a { text-decoration: none; }
.record-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); gap: 38px; align-items: center; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.record-hero h1 { font-size: clamp(48px, 7vw, 82px); margin-bottom: 18px; }
.record-hero .record-intro { max-width: 700px; color: var(--muted); font-size: 16px; }
.record-art { width: 100%; border: 1px solid var(--line); background: #080e0d; box-shadow: 6px 6px 0 rgba(255, 196, 92, .38); }
.record-figure { margin: 0; }
.record-figure figcaption { padding-top: 10px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.record-scope { padding: 14px 16px; margin: 28px 0; border-left: 2px solid var(--pink); background: rgba(0, 0, 0, .5); color: var(--muted); font-size: 12px; }
.record-section { padding: 32px 0; border-bottom: 1px solid rgba(140, 255, 198, .2); }
.record-section h2 { font-size: clamp(32px, 4vw, 46px); }
.record-section h3 { margin-top: 24px; font-size: 23px; }
.record-section p, .record-section li { color: var(--muted); }
.record-section ul { padding-left: 22px; }
.spec-table { width: 100%; border-collapse: collapse; background: rgba(0, 0, 0, .55); font-size: 13px; }
.spec-table th, .spec-table td { padding: 12px 14px; border: 1px solid rgba(140, 255, 198, .24); text-align: left; vertical-align: top; }
.spec-table th { width: 24%; color: var(--yellow); font-weight: 400; letter-spacing: .05em; }
.spec-table td { color: var(--paper); }
.record-sources { display: grid; gap: 9px; padding-left: 20px; }
.record-sources a { color: var(--cyan); overflow-wrap: anywhere; }
.record-sources small { color: var(--muted); }
.hardware-page .footer { border-top-color: var(--line); }
/* A part record with a verified photograph shows it in place of the drawn
   schematic, in the same artwork cell of the record hero grid. */
.record-photo .record-art { width: auto; height: auto; max-width: 100%; max-height: 340px; margin: 0 auto; display: block; }
.record-photo figcaption a { color: var(--cyan); }
/* Browse-by pivot pages: manufacturers, connections and storage. */
.pivot-list { list-style: none; margin: 16px 0 0; padding: 0; }
.pivot-list li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.pivot-list a { color: var(--paper); text-decoration: none; overflow-wrap: anywhere; }
.pivot-list a:hover, .pivot-list a:focus-visible { color: var(--cyan); }
.pivot-list small { color: var(--muted); font-size: 11px; letter-spacing: .12em; }

.pivot-cols { columns: 3; column-gap: 34px; }
.pivot-cols li { break-inside: avoid; }

@media (max-width: 900px) { .pivot-cols { columns: 2; } }
@media (max-width: 560px) { .pivot-cols { columns: 1; } }

@media (max-width: 800px) {
  .hardware-page .archive-hero, .record-hero { grid-template-columns: minmax(0, 1fr); }
  .hardware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-art { max-width: 540px; }
}
@media (max-width: 520px) {
  .hardware-grid { grid-template-columns: 1fr; }
  .component-grid { grid-template-columns: 1fr; }
  .hardware-page .archive-hero { padding: 66px 0; }
  .record-hero h1 { font-size: clamp(36px, 9vw, 42px); overflow-wrap: anywhere; }
  .hardware-card { min-height: 0; }
  .hardware-card p { min-height: 0; }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; }
  .spec-table th { padding-bottom: 4px; border-bottom: 0; }
  .spec-table td { border-top: 0; }
}