/*
 * THE OLD COMPUTER — HALL OF FAME PAGE
 * ------------------------------------
 *
 * This stylesheet contains ONLY Hall of Fame-specific sections.
 * Global colours, typography, universal menu, buttons and footer remain
 * in /toc-theme/css/toc-theme.css so future shared design changes update
 * every redesigned TOC page together.
 *
 * The original TOC system-collage background is intentionally reused.
 */

.hall-of-fame-page {
  background:#0a0e17
}

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

/*
 * HERO: inherit exactly the donation page's .hero background,
 * collage treatment, and decorative grid from toc-theme.css.
 * Future theme changes to that shared class reach both pages.
 */
.hof-hero {
  border-bottom:1px solid #293e48
}

.hof-hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:34px;
  align-items:center
}

.hof-kicker,.hof-section-kicker {
  font-family:'Space Mono',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  color:var(--green)
}

.hof-kicker {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border:1px solid #325444;
  background:rgba(36,77,58,.14);
  border-radius:4px
}

.hof-signal {
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 12px rgba(180,245,137,.55)
}

.hof-hero h1 {
  /* Font sizing comes from the global h1 shared with donate.php. */
  color:var(--cream)
}

.hof-hero h1 span {
  color:var(--orange)
}

.hof-hero-lead {
  font:700 13px 'Space Mono',monospace;
  color:var(--cyan);
  letter-spacing:.04em;
  margin-bottom:22px
}

.hof-hero-text {
  max-width:525px;
  font-size:17px;
  line-height:1.76;
  color:#c0cbd2;
  margin-bottom:30px
}

.hof-hero-text strong {
  color:var(--cream)
}

.hof-actions {
  display:flex;
  flex-wrap:wrap;
  gap:13px
}

.hof-hero-footnote {
  display:flex;
  align-items:center;
  gap:10px;
  color:#a4bdb6;
  font-size:12px;
  line-height:1.5;
  margin:25px 0 0
}

.hof-hero-footnote span {
  color:var(--green);
  font-size:16px
}

/* Only the picture ON the screen differs from the donated-page CRT. */
.hof-machine-stage {height:560px}
.hof-crt-screen {text-align:left}
.hof-crt-screen .screen-cmd {font-size:11px;margin-bottom:7px}
.hof-crt-heart {
  text-align:center;
  color:var(--green);
  font-size:68px;
  line-height:1;
  text-shadow:0 0 25px rgba(180,245,137,.65)
}
.hof-crt-title {
  text-align:center;
  font:700 27px/1.08 'Space Grotesk',sans-serif;
  letter-spacing:-.04em;
  color:#c7ffac;
  text-shadow:0 0 16px rgba(180,245,137,.4)
}
.hof-crt-title span {color:#fff1bb}
.hof-crt-lines {
  margin-top:12px;
  font:10px/1.8 'Space Mono',monospace;
  color:#9bdfaa
}

/* Small archival promise strip shared in spirit with the donation page. */
.hof-promise-strip {
  padding:25px 0;
  background:#101c2a;
  border-bottom:1px solid #253847
}

.hof-promise-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0
}

.hof-promise-grid>div {
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:15px;
  row-gap:3px;
  padding:0 25px;
  border-right:1px solid #304255
}

.hof-promise-grid>div:first-child {
  padding-left:0
}

.hof-promise-grid>div:last-child {
  border:0;
  padding-right:0
}

.hof-promise-grid span {
  grid-row:span 2;
  font:700 26px 'Space Mono',monospace;
  color:var(--orange)
}

.hof-promise-grid strong {
  font:700 11px 'Space Mono',monospace;
  letter-spacing:.035em
}

.hof-promise-grid small {
  color:var(--muted);
  font-size:12px
}

/* The original hand-drawn thank-you image is framed, not reinterpreted. */
.hof-thanks-section {
  padding:80px 0 90px;
  background:linear-gradient(145deg,#111a29,#0a0f19)
}

.hof-thanks-grid {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
  gap:64px
}

.hof-thanks-copy h2,.hof-letter-intro h2,.hof-super-heading h2,.hof-supporters-head h2,.hof-final-cta h2 {
  max-width:none;
  /* Shared h2 sizing/line height from toc-theme.css. */
  margin:24px 0
}

.hof-thanks-copy h2 em,.hof-final-cta h2 em {
  color:var(--orange);
  font-style:normal
}

.hof-thanks-copy p {
  max-width:520px;
  font-size:16px;
  color:#b9c7cf;
  line-height:1.85;
  margin:0 0 18px
}

.hof-thanks-copy p strong {
  color:var(--cream)
}

.hof-text-link,.hof-help-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--green);
  font-weight:700;
  margin-top:15px;
  text-decoration:underline;
  text-decoration-color:rgba(180,245,137,.35);
  text-underline-offset:5px
}

.hof-text-link:hover,.hof-help-link:hover {
  color:var(--orange)
}

.hof-art-card {
  margin:34px 0 0;
  background:#192735;
  border:1px solid #34515b;
  padding:17px;
  border-radius:8px;
  box-shadow:var(--shadow);
  transform:rotate(-1deg)
}

.hof-art-heading {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:0 5px 13px;
  color:var(--green);
  font:700 9px 'Space Mono',monospace;
  letter-spacing:.045em
}

.hof-art-paper {
  background:#f3efe9;
  padding:12px;
  border-radius:3px
}

.hof-art-paper img {
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  mix-blend-mode:multiply
}

.hof-art-card figcaption {
  padding:15px 5px 1px;
  font-size:12px;
  color:#b5c4cc
}

/* Letter and original thank-you illustration now share ONE compact section. */
.hof-letter-column {
  min-width:0;
  padding:4px 0 0
}

.hof-letter-intro h2 span,.hof-supporters-head h2 span {
  color:var(--orange)
}

.hof-letter-intro p {
  color:var(--muted);
  line-height:1.7;
  max-width:350px;
  margin:0 0 28px
}

.hof-letter-paper {
  background:linear-gradient(152deg,#fff5e3,#e9dbc6);
  color:#253342;
  border:1px solid #ffdfae;
  border-radius:4px;
  box-shadow:18px 22px 0 rgba(255,184,93,.09),0 28px 70px rgba(0,0,0,.33);
  transform:rotate(1deg)
}

.hof-letter-head,.hof-letter-bottom {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:15px 27px;
  border-bottom:1px dashed #9f998e;
  font:700 9px 'Space Mono',monospace;
  letter-spacing:.075em;
  color:#4c5550
}

.hof-letter-inner {
  padding:29px 35px 23px;
  font:14px/1.72 'DM Sans',sans-serif
}

.hof-letter-inner p {
  margin-bottom:15px
}

.hof-letter-inner .hof-salutation {
  font:700 20px 'Space Grotesk',sans-serif;
  margin-bottom:19px
}

.hof-letter-inner strong {
  color:#0b4c42
}

.hof-letter-signoff {
  padding-top:10px
}

.hof-letter-signoff span {
  display:inline-block;
  color:#df7960;
  font-size:21px;
  margin-left:8px
}

.hof-letter-bottom {
  border-top:1px dashed #9f998e;
  border-bottom:0
}

.hof-letter-bottom span {
  color:#af7246
}

/* Lifetime thanks: aggregation lives in PHP, cards have no hard-coded totals. */
.hof-super-section {
  padding:108px 0 112px;
  background:radial-gradient(ellipse at 95% 15%,rgba(97,121,75,.12),transparent 55%),#101928;
  border-top:1px solid #263d45
}
.hof-super-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:38px;
  margin-bottom:36px
}
.hof-super-heading h2 span {color:var(--orange)}
.hof-super-heading p {max-width:640px;color:var(--muted);font-size:16px;line-height:1.75;margin:0}
/* Match the Roll of Honour: the shared SVG and .hof-pixel-heart rule
   give each of these two hearts the same large size and green glow. */
.hof-super-hearts {
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--green)
}
.hof-super-hearts .hof-pixel-heart {
  flex:none;
  margin:0
}
.hof-super-hearts .hof-pixel-heart:first-child {transform:rotate(-4deg) translateY(5px)}
.hof-super-hearts .hof-pixel-heart:last-child {transform:rotate(4deg) translateY(-5px)}
.hof-super-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hof-super-card {
  min-width:0;
  padding:25px;
  background:linear-gradient(145deg,#1e313b,#12212d);
  border:1px solid #3c5a56;
  border-top:3px solid var(--green);
  border-radius:7px;
  box-shadow:0 15px 45px rgba(0,0,0,.15)
}
.hof-super-rank {color:var(--green);font:700 10px 'Space Mono',monospace;letter-spacing:.05em}
.hof-super-name {margin:20px 0 19px;font:700 clamp(23px,2.5vw,33px)/1.15 'Space Grotesk',sans-serif;color:var(--cream);overflow-wrap:anywhere}
.hof-super-amount {display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--orange);font:700 33px 'Space Grotesk',sans-serif}
.hof-super-amount small {font:700 9px 'Space Mono',monospace;color:#a7bcb7;letter-spacing:.03em}
.hof-super-meta {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:17px;border-top:1px solid #375052;color:#b2c9c4;font:10px 'Space Mono',monospace}
.hof-super-meta span:first-child {color:var(--green)}
.hof-super-note {color:#a9b9c1;max-width:920px;font-size:12px;line-height:1.7;margin:21px 0 0}
.hof-super-empty {grid-column:1/-1;padding:26px;border:1px dashed #455a5c;border-radius:7px;color:#d1d8cc;text-align:center}
.hof-super-more {margin-top:18px}
.hof-super-more[hidden] {display:none!important}

/* A proper, searchable roll of honour with a PHP-friendly table body. */
.hof-supporters-section {
  padding:116px 0 108px;
  background:linear-gradient(#0a111c,#0c141f)
}

.hof-supporters-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:43px
}

.hof-supporters-head h2 {
  margin-bottom:18px
}

.hof-supporters-head p {
  color:var(--muted);
  font-size:16px;
  margin:0
}

.hof-log-marker {
  align-self:center;
  flex:none;
  padding:8px 17px;
  transform:rotate(3deg);
  color:var(--green);
  font:700 11px/1.5 'Space Mono',monospace;
  letter-spacing:.065em;
  text-align:center
}

.hof-svg-definitions {position:absolute;width:0;height:0;overflow:hidden}

.hof-pixel-heart {
  display:block;
  width:145px;
  height:auto;
  margin:0 auto 15px;
  fill:currentColor;
  filter:drop-shadow(0 0 6px rgba(180,245,137,.8)) drop-shadow(0 0 23px rgba(180,245,137,.6))
}

.hof-log-marker span {
  display:block;
  color:#bedab4;
  text-shadow:0 0 12px rgba(180,245,137,.4)
}

.hof-listing-shell {
  border:1px solid #34505a;
  border-radius:8px;
  background:#111d2a;
  box-shadow:0 22px 65px rgba(0,0,0,.25);
  overflow:hidden
}

.hof-listing-toolbar {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding:20px 23px;
  border-bottom:1px solid #35505a;
  background:#1b2c37
}

.hof-table-label {
  color:var(--cyan);
  font:700 11px 'Space Mono',monospace;
  letter-spacing:.075em
}

.hof-filter-label {
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--green);
  font:700 11px 'Space Mono',monospace
}

.hof-filter-label select {
  appearance:none;
  min-width:138px;
  padding:13px 35px 13px 14px;
  background:#0e1a25;
  border:1px solid #3c5763;
  border-radius:5px;
  color:var(--cream);
  font:13px 'DM Sans',sans-serif;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23b4f589' stroke-width='2' d='m4 7 6 6 6-6'/%3E%3C/svg%3E");
  background-position:right 10px center;
  background-size:15px;
  background-repeat:no-repeat
}

.hof-filter-label select:focus-visible {
  outline:2px solid var(--green);
  outline-offset:2px
}

.hof-table-wrap {
  width:100%;
  overflow-x:auto
}

.hof-table {
  width:100%;
  border-collapse:collapse;
  text-align:left
}

.hof-table th {
  padding:17px 23px;
  border-bottom:1px solid #32505a;
  background:#162735;
  color:#98b2bd;
  font:700 10px 'Space Mono',monospace;
  letter-spacing:.065em
}

.hof-table th:nth-child(1) { width:22% }
.hof-table th:nth-child(2) { width:15% }
.hof-table th:nth-child(3) { width:13% }
.hof-table th:nth-child(4) { width:50% }

.hof-table td {
  padding:19px 23px;
  border-bottom:1px solid #283d49;
  color:#c4d0d8;
  font-size:13px;
  line-height:1.55;
  vertical-align:top;
  overflow-wrap:anywhere
}

.hof-table tr:last-child td {
  border-bottom:0
}

.hof-table tbody tr {
  background:#101c28;
  transition:background .2s
}

.hof-table tbody tr:nth-child(even) {
  background:#13212e
}

.hof-table tbody tr:hover {
  background:#203443
}

.hof-table td:first-child {
  font:700 13px 'Space Mono',monospace;
  color:var(--cyan)
}

.hof-table td:nth-child(2) {
  font:12px 'Space Mono',monospace;
  color:#9fc0b9;
  white-space:nowrap
}

.hof-table td:nth-child(3) {
  font:700 13px 'Space Mono',monospace;
  color:var(--green)
}

.hof-table .hof-empty {
  padding:35px 23px;
  color:#d3c3a0;
  font:14px/1.65 'DM Sans',sans-serif;
  text-align:center
}

.hof-table tr[hidden] {
  display:none!important
}

.hof-listing-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:19px 25px;
  border-top:1px solid #3b5360;
  background:#1b2c37
}

.hof-listing-bottom p {
  margin:0;
  color:#acc0c9;
  font:12px 'Space Mono',monospace
}

.hof-load-more {
  border:1px solid #729b78;
  border-radius:5px;
  padding:12px 16px;
  cursor:pointer;
  color:var(--green);
  font:700 11px 'Space Mono',monospace;
  letter-spacing:.015em;
  background:rgba(80,142,83,.09)
}

.hof-load-more:hover {
  background:rgba(80,142,83,.2)
}

.hof-load-more:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:3px
}

.hof-load-more[hidden] {
  display:none!important
}

.hof-list-note {
  max-width:880px;
  margin:22px 0 0;
  color:#8fa5b1;
  font-size:12px;
  line-height:1.7
}

.hof-list-note strong {
  color:#c2d2d6
}

/* An unambiguous next step, linked to the existing donation workflow. */
.hof-final-cta {
  position:relative;
  padding:90px 0;
  background:linear-gradient(110deg,rgba(34,88,72,.37),rgba(18,34,48,.9)),#10222a;
  border-top:1px solid #386c65;
  overflow:hidden
}

.hof-final-cta:before {
  content:'';
  position:absolute;
  inset:0;
  background:url('/toc-theme/images/toc-legacy-system-collage.gif') center / 900px repeat;
  filter:brightness(7) sepia(1) hue-rotate(120deg);
  opacity:.08;
  pointer-events:none
}

.hof-final-inner {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.hof-final-cta .eyebrow {
  color:var(--green)
}

.hof-final-cta h2 {
  margin:19px 0 23px
}

.hof-final-cta p {
  max-width:590px;
  font-size:16px;
  line-height:1.75;
  color:#bcd0d0;
  margin:0
}

.hof-final-actions {
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:19px
}

.hof-final-actions .button {
  white-space:nowrap
}

.hof-final-actions .hof-help-link {
  margin:0;
  font-size:12px
}

/* Responsive page sections. The universal header/footer use shared CSS. */
@media(max-width:1080px) {
  .hof-hero-grid {gap:32px}
  .hof-crt-lines {font-size:9px}
  .hof-thanks-grid {gap:38px}
  .hof-promise-grid>div {padding:0 13px}
  .hof-promise-grid span {font-size:22px}
  .hof-promise-grid strong {font-size:10px}
  .hof-table td {padding:17px}
}

@media(max-width:850px) {
  .hof-hero {padding:70px 0 75px}
  .hof-hero-grid {grid-template-columns:1fr}
  .hof-hero-copy {max-width:690px}
  .hof-machine-stage {max-width:540px;width:100%;margin:0 auto}
  .hof-crt-lines {font-size:10px}
  .hof-thanks-grid {grid-template-columns:1fr;gap:54px}
  .hof-thanks-copy {max-width:690px}
  .hof-art-card {max-width:650px}
  .hof-letter-column {max-width:680px}
  .hof-super-heading {align-items:flex-start;flex-direction:column;gap:18px}
  .hof-super-hearts {align-self:flex-end}
  .hof-super-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .hof-final-inner {align-items:start;flex-direction:column}
  .hof-final-actions {align-items:start}
  .hof-promise-grid {grid-template-columns:1fr;gap:18px}
  .hof-promise-grid>div,.hof-promise-grid>div:first-child,.hof-promise-grid>div:last-child {padding:0;border:0}
}

@media(max-width:620px) {
  .hof-hero {padding:55px 0 66px}
  .hof-kicker {font-size:9px}
  .hof-hero-lead {font-size:11px;line-height:1.5}
  .hof-hero-text {font-size:15px}
  .hof-actions {align-items:stretch;flex-direction:column}
  .hof-actions .button {width:100%}
  .hof-machine-stage {height:430px}
  .hof-machine-stage .crt {transform:rotate(-3deg) scale(.8);transform-origin:center}
  .hof-crt-heart {font-size:53px}
  .hof-crt-title {font-size:25px}
  .hof-crt-lines {font-size:9px}
  .hof-thanks-section,.hof-super-section,.hof-supporters-section {padding:64px 0}
  .hof-thanks-grid {gap:45px}
  .hof-thanks-copy p {font-size:15px}
  .hof-art-card {padding:12px;transform:none}
  .hof-art-heading {font-size:8px}
  .hof-letter-paper {transform:none}
  .hof-letter-inner {padding:29px 24px 18px;font-size:14px}
  .hof-letter-head,.hof-letter-bottom {padding:14px 21px;font-size:8px}
  .hof-super-hearts {gap:8px}
  .hof-super-grid {grid-template-columns:1fr}
  .hof-supporters-head {align-items:start}
  .hof-log-marker {padding:0;transform:none}
  .hof-pixel-heart {width:88px;margin-bottom:7px}
  .hof-log-marker span {font-size:8px}
  .hof-listing-toolbar {align-items:stretch;flex-direction:column;padding:17px}
  .hof-filter-label {justify-content:space-between}
  .hof-filter-label select {min-width:160px}
  .hof-table thead {display:none}
  .hof-table,.hof-table tbody,.hof-table tr,.hof-table td {display:block;width:100%}
  .hof-table tbody tr {padding:15px 18px;border-bottom:1px solid #34505a}
  .hof-table td,.hof-table td:first-child,.hof-table td:nth-child(2),.hof-table td:nth-child(3) {display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;padding:5px 0;border:0;white-space:normal;font-size:12px;line-height:1.5}
  .hof-table td:before {content:attr(data-label);color:#8299a7;font:700 9px 'Space Mono',monospace;letter-spacing:.02em;padding-top:3px}
  .hof-listing-bottom {align-items:stretch;flex-direction:column;padding:18px}
  .hof-load-more {width:100%}
  .hof-final-cta {padding:65px 0}
  .hof-final-actions,.hof-final-actions .button {width:100%}
}

@media(max-width:390px) {
  .hof-machine-stage .crt {transform:rotate(-3deg) scale(.72)}
  .hof-crt-lines {font-size:8px}
  .hof-art-heading {flex-direction:column;gap:4px}
  .hof-table td,.hof-table td:first-child,.hof-table td:nth-child(2),.hof-table td:nth-child(3) {grid-template-columns:85px minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce) {
  .hof-crt-screen .cursor {animation:none!important}
}