:root {
      --void: #0a0e1a;
      --panel: #121729;
      --panel-2: #171d35;
      --ink: #eef0f7;
      --ink-dim: #8b93ad;
      --beam: #9b8cff;
      --beam-2: #6f5cff;
      --beam-soft: rgba(155, 140, 255, .16);
      --signal: #ffb454;
      --signal-dim: rgba(255, 180, 84, .16);
      --line: rgba(238, 240, 247, .12);
      --line-strong: rgba(238, 240, 247, .22);
      --radius: 2px;
      --radius-card: 16px;
      --wrap: 1180px;
  }

  * {
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      margin: 0;
      background: var(--void);
      color: var(--ink);
      font-family: 'IBM Plex Sans', sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
  }

  h1,
  h2,
  h3 {
      margin: 0;
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      letter-spacing: .01em;
  }

  p {
      margin: 0;
  }

  a {
      color: inherit;
  }

  ::selection {
      background: var(--beam);
      color: var(--void);
  }

  .mono {
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: .14em;
      text-transform: uppercase;
  }

  .eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .72rem;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--signal);
      display: flex;
      align-items: center;
      gap: .6rem;
  }

  .eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      background: var(--signal);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--signal);
      flex: none;
  }

  /* ---------- fixed atmosphere layers ---------- */
  #stars {
      position: fixed;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background:
          radial-gradient(ellipse at 50% -10%, #1a2140 0%, var(--void) 55%);
  }

  .scanlines {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: repeating-linear-gradient(to bottom,
              rgba(255, 255, 255, 0.018) 0px,
              rgba(255, 255, 255, 0.018) 1px,
              transparent 1px,
              transparent 3px);
      mix-blend-mode: overlay;
      opacity: .5;
  }

  .grain-vignette {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      box-shadow: inset 0 0 220px rgba(0, 0, 0, .75);
  }

  .mini-drone {
      position: fixed;
      top: 96px;
      right: 5%;
      z-index: 6;
      opacity: 0;
      pointer-events: none;
      transition: opacity .7s ease;
      filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5));
  }

  .mini-drone.visible {
      opacity: .85;
  }

  .mini-drone-bob {
      animation: mini-idle 3.8s ease-in-out infinite;
  }

  @keyframes mini-idle {

      0%,
      100% {
          transform: translateY(0) rotate(-2deg);
      }

      50% {
          transform: translateY(-9px) rotate(2deg);
      }
  }

  @media (max-width:760px) {
      .mini-drone {
          display: none;
      }
  }

  @media (prefers-reduced-motion:reduce) {
      .mini-drone-bob {
          animation: none;
      }
  }

  .wrap {
      max-width: var(--wrap);
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
  }

  /* ---------- nav ---------- */
  .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(10, 14, 26, .72);
      border-bottom: 1px solid var(--line);
  }

  /* ---------- active case banner (top-center, shows on flip) ---------- */
  .active-banner {
      position: fixed;
      top: 14px;
      left: 50%;
      transform: translate(-50%, -18px);
      z-index: 60;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 18px 8px 8px;
      background: rgba(18, 23, 41, .92);
      backdrop-filter: blur(10px);
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease, transform .35s ease;
      max-width: min(92vw, 380px);
  }

  .active-banner.show {
      opacity: 1;
      transform: translate(-50%, 0);
  }

  .active-banner img {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--line-strong);
      flex: none;
  }

  .active-banner-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      overflow: hidden;
  }

  .active-banner-eyebrow {
      font-family: 'IBM Plex Mono';
      font-size: .6rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--signal);
  }

  .active-banner-name {
      font-family: 'Anton';
      font-size: .95rem;
      letter-spacing: .01em;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  @media (max-width:640px) {
      .active-banner {
          top: 8px;
          padding: 6px 14px 6px 6px;
      }

      .active-banner img {
          width: 32px;
          height: 32px;
      }
  }

  @media (prefers-reduced-motion:reduce) {
      .active-banner {
          transition: none;
      }
  }

  .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 32px;
      max-width: var(--wrap);
      margin: 0 auto;
  }

  .brand {
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  .brand-row {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .brand-mark {
      flex: none;
  }

  .brand .b1 {
      font-family: 'IBM Plex Mono';
      font-size: .68rem;
      letter-spacing: .24em;
      color: var(--ink-dim);
      text-transform: uppercase;
  }

  .brand .b2 {
      font-family: 'Anton';
      font-size: 1.15rem;
      letter-spacing: .04em;
  }

  .nav-links {
      display: flex;
      gap: 32px;
      font-family: 'IBM Plex Mono';
      font-size: .72rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--ink-dim);
  }

  .nav-links a {
      text-decoration: none;
      transition: color .2s;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
      color: var(--signal);
  }

  @media (max-width:760px) {
      .nav-links {
          display: none;
      }
  }

  /* ---------- hero ---------- */
  .hero {
      position: relative;
      z-index: 2;
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 120px 32px 80px;
      gap: 28px;
  }

  .hero .eyebrow {
      justify-content: center;
  }

  .hero h1 {
      font-size: clamp(3.6rem, 12vw, 9rem);
      line-height: .92;
      color: var(--ink);
      text-shadow: 0 0 60px var(--beam-soft);
  }

  .hero h1 span {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1.5px var(--ink);
  }

  .hero .sub {
      max-width: 560px;
      color: var(--ink-dim);
      font-size: 1.02rem;
  }

  .hero .sub strong {
      color: var(--ink);
      font-weight: 600;
  }

  .meta-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 6px;
  }

  .chip {
      font-family: 'IBM Plex Mono';
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 8px 14px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      color: var(--ink-dim);
      background: rgba(255, 255, 255, .02);
  }

  .cta-row {
      margin-top: 10px;
  }

  .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'IBM Plex Mono';
      font-size: .78rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 15px 26px;
      background: var(--signal);
      color: var(--void);
      text-decoration: none;
      border-radius: var(--radius);
      border: 1px solid var(--signal);
      font-weight: 600;
      transition: transform .18s ease, box-shadow .18s ease;
  }

  .btn:hover,
  .btn:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(255, 180, 84, .25);
  }

  .btn.ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line-strong);
  }

  .btn.ghost:hover,
  .btn.ghost:focus-visible {
      border-color: var(--beam);
      color: var(--beam);
      box-shadow: 0 10px 30px var(--beam-soft);
  }

  /* ---------- UFO signature element ---------- */
  .ufo-stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 300px;
      margin-top: 6px;
  }

  .beam {
      position: absolute;
      top: 150px;
      left: 50%;
      width: 34px;
      height: 150px;
      z-index: 3;
      transform: translateX(-50%) rotate(0deg);
      transform-origin: top center;
      background: linear-gradient(to bottom, rgba(155, 140, 255, .55), rgba(155, 140, 255, 0));
      clip-path: polygon(38% 0%, 62% 0%, 100% 100%, 0% 100%);
      filter: blur(1.5px);
      animation: beam-pulse 3.2s ease-in-out infinite, beam-sway 5.4s ease-in-out infinite;
  }

  @keyframes beam-pulse {

      0%,
      100% {
          opacity: .5;
      }

      50% {
          opacity: .9;
      }
  }

  @keyframes beam-sway {

      0%,
      100% {
          transform: translateX(-50%) rotate(-3deg) scaleY(1);
      }

      50% {
          transform: translateX(-50%) rotate(3deg) scaleY(1.05);
      }
  }

  .saucer-wrap {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      animation: hover-float 5s ease-in-out infinite;
      z-index: 4;
  }

  @keyframes hover-float {
      0% {
          transform: translate(-50%, 0) rotate(-1.5deg);
      }

      25% {
          transform: translate(calc(-50% - 8px), -16px) rotate(0deg);
      }

      50% {
          transform: translate(-50%, -22px) rotate(1.5deg);
      }

      75% {
          transform: translate(calc(-50% + 8px), -16px) rotate(0deg);
      }

      100% {
          transform: translate(-50%, 0) rotate(-1.5deg);
      }
  }

  .saucer-wrap svg {
      display: block;
      filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6));
  }

  .saucer-light {
      animation: light-blink 1.8s ease-in-out infinite;
  }

  .saucer-light:nth-child(2) {
      animation-delay: .25s;
  }

  .saucer-light:nth-child(3) {
      animation-delay: .5s;
  }

  @keyframes light-blink {

      0%,
      100% {
          opacity: 1;
      }

      50% {
          opacity: .35;
      }
  }

  .dome-highlight {
      animation: dome-shimmer 4s ease-in-out infinite;
  }

  @keyframes dome-shimmer {

      0%,
      100% {
          opacity: .5;
      }

      50% {
          opacity: .85;
      }
  }

  .ground-shadow {
      position: absolute;
      left: 50%;
      bottom: -2px;
      transform: translateX(-50%);
      width: 200px;
      height: 16px;
      background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%);
      animation: shadow-pulse 5s ease-in-out infinite;
  }

  .orbit-stars {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
  }

  @keyframes shadow-pulse {

      0%,
      100% {
          opacity: .55;
          transform: translateX(-50%) scale(1);
      }

      50% {
          opacity: .32;
          transform: translateX(-50%) scale(.86);
      }
  }

  @media (prefers-reduced-motion:reduce) {

      .beam,
      .saucer-wrap,
      .saucer-light,
      .dome-highlight,
      .ground-shadow {
          animation: none !important;
      }
  }

  /* ---------- countdown ---------- */
  .countdown-outer {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--panel);
      padding: 36px 0;
  }

  .countdown-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
  }

  .countdown-label {
      display: flex;
      flex-direction: column;
      gap: 6px;
  }

  .countdown-label .cl-1 {
      font-family: 'IBM Plex Mono';
      font-size: .68rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--ink-dim);
  }

  .countdown-label .cl-2 {
      font-family: 'Anton';
      font-size: 1.5rem;
      letter-spacing: .01em;
  }

  .clock {
      display: flex;
      gap: 14px;
  }

  .clock-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 76px;
      padding: 14px 10px;
      background: var(--panel-2);
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
  }

  .clock-unit .val {
      font-family: 'IBM Plex Mono';
      font-weight: 600;
      font-size: 1.9rem;
      color: var(--beam);
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 18px var(--beam-soft);
  }

  .clock-unit .unit {
      font-family: 'IBM Plex Mono';
      font-size: .6rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-dim);
  }

  .clock-sep {
      display: flex;
      align-items: center;
      font-family: 'IBM Plex Mono';
      color: var(--line-strong);
      font-size: 1.5rem;
      padding-bottom: 22px;
  }

  .countdown-outer.landed .clock-unit .val {
      color: var(--signal);
      text-shadow: 0 0 18px var(--signal-dim);
  }

  @media (max-width:640px) {
      .clock {
          gap: 8px;
      }

      .clock-unit {
          min-width: 56px;
          padding: 10px 6px;
      }

      .clock-unit .val {
          font-size: 1.3rem;
      }

      .clock-sep {
          display: none;
      }
  }

  /* ---------- ticker ---------- */
  .ticker-outer {
      position: relative;
      z-index: 2;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--panel);
      overflow: hidden;
      white-space: nowrap;
  }

  .ticker-track {
      display: inline-block;
      padding: 12px 0;
      animation: scroll-left 32s linear infinite;
  }

  @media (prefers-reduced-motion:reduce) {
      .ticker-track {
          animation: none;
      }
  }

  @keyframes scroll-left {
      from {
          transform: translateX(0);
      }

      to {
          transform: translateX(-50%);
      }
  }

  .ticker-track span {
      font-family: 'IBM Plex Mono';
      font-size: .74rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin: 0 26px;
  }

  .ticker-track span b {
      color: var(--signal);
      font-weight: 600;
  }

  /* ---------- section shell ---------- */
  section {
      position: relative;
      z-index: 2;
  }

  .section-pad {
      padding: 120px 0 40px;
  }

  .section-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 56px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 28px;
  }

  .section-head h2 {
      font-size: clamp(2.2rem, 5vw, 3.4rem);
      line-height: 1;
  }

  .section-head p {
      max-width: 420px;
      color: var(--ink-dim);
      font-size: .94rem;
  }

  /* ---------- about ---------- */
  .about-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 60px;
      align-items: start;
  }

  .about-grid p {
      color: var(--ink-dim);
      font-size: 1.02rem;
      margin-bottom: 18px;
  }

  .about-grid p strong {
      color: var(--ink);
      font-weight: 600;
  }

  .stat-list {
      display: grid;
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
  }

  .stat-item {
      background: var(--panel);
      padding: 22px 24px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
  }

  .stat-item .num {
      font-family: 'Anton';
      font-size: 2rem;
      color: var(--beam);
  }

  .stat-item .lbl {
      font-family: 'IBM Plex Mono';
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-dim);
      text-align: right;
  }

  @media (max-width:820px) {
      .about-grid {
          grid-template-columns: 1fr;
      }
  }

  /* ---------- case files ---------- */
  .case-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 26px;
  }

  .case {
      position: relative;
      perspective: 1600px;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s ease, transform .6s ease;
  }

  .case.in-view {
      opacity: 1;
      transform: translateY(0);
  }

  /* plain card fallback for cases with no banner (e.g. Quizverse) */
  .case.no-cover {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      padding: 26px 30px 30px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: border-color .25s ease, box-shadow .25s ease;
  }

  .case.no-cover:hover {
      border-color: var(--line-strong);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }

  /* ---------- click-to-flip: banner+name shows first, click reveals full brief ---------- */
  .case-flip {
      position: relative;
      height: 100%;
      display: grid;
      transform-style: preserve-3d;
      transition: transform .7s cubic-bezier(.22, .61, .34, 1);
  }

  .case.flipped .case-flip {
      transform: rotateY(180deg);
  }

  .case-front,
  .case-back {
      grid-area: 1/1;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transition: border-color .25s ease, box-shadow .25s ease;
  }

  .case-front {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      padding: 32px 26px;
      cursor: pointer;
  }

  .case-front:hover {
      border-color: var(--line-strong);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }

  .case-front-name {
      font-size: 1.5rem;
      line-height: 1.1;
  }

  .case-front-tagline {
      font-family: 'IBM Plex Mono';
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--beam);
  }

  .case-flip-hint {
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 7px;
      font-family: 'IBM Plex Mono';
      font-size: .64rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--signal);
  }

  .case-flip-hint svg {
      width: 14px;
      height: 14px;
      animation: hint-spin 2.6s ease-in-out infinite;
  }

  @keyframes hint-spin {

      0%,
      65%,
      100% {
          transform: rotate(0deg);
      }

      82% {
          transform: rotate(180deg);
      }
  }

  @media (prefers-reduced-motion:reduce) {
      .case-flip-hint svg {
          animation: none;
      }
  }

  .case-back {
      transform: rotateY(180deg);
      padding: 26px 30px 30px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      pointer-events: none;
  }

  .case.flipped .case-back {
      pointer-events: auto;
  }

  .case.flipped .case-front {
      pointer-events: none;
  }

  /* small banner, centered at the top of the card */
  .case-banner {
      display: block;
      width: 300px;
      max-width: 100%;
      height: auto;
      margin: 0 auto 4px;
      border-radius: 10px;
      border: 1px solid var(--line);
  }

  .case-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
  }

  .case-no {
      font-family: 'IBM Plex Mono';
      font-size: .72rem;
      letter-spacing: .18em;
      color: var(--ink-dim);
  }

  .stamp {
      font-family: 'IBM Plex Mono';
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--signal);
      border: 1px solid var(--signal);
      padding: 4px 9px;
      border-radius: var(--radius);
      transform: rotate(3deg);
      flex: none;
  }

  .case-icon {
      width: 38px;
      height: 38px;
      color: var(--beam);
      flex: none;
  }

  .case h3 {
      font-size: 1.55rem;
      letter-spacing: .01em;
      margin-top: 2px;
  }

  .case .tagline {
      font-family: 'IBM Plex Mono';
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--beam);
  }

  .case .desc {
      color: var(--ink-dim);
      font-size: .92rem;
  }

  .case-facts {
      display: grid;
      gap: 8px;
      padding-top: 8px;
      margin-top: auto;
      border-top: 1px solid var(--line);
      padding-top: 14px;
  }

  .case-facts div {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: .78rem;
  }

  .case-facts .k {
      font-family: 'IBM Plex Mono';
      color: var(--ink-dim);
      letter-spacing: .06em;
      text-transform: uppercase;
      font-size: .66rem;
  }

  .case-facts .v {
      color: var(--ink);
      text-align: right;
      font-weight: 500;
  }

  .case-note {
      font-family: 'IBM Plex Mono';
      font-size: .68rem;
      letter-spacing: .04em;
      color: var(--ink-dim);
      padding: 10px 12px;
      border-left: 2px solid var(--signal);
      background: rgba(255, 180, 84, .06);
      line-height: 1.5;
  }

  .case-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
  }

  .tag {
      font-family: 'IBM Plex Mono';
      font-size: .62rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-dim);
      border: 1px solid var(--line-strong);
      padding: 3px 8px;
      border-radius: var(--radius);
  }

  .case-actions {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }

  .case-action {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: 'IBM Plex Mono';
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 9px 13px;
      border-radius: var(--radius);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  }

  .case-action.primary {
      background: var(--signal);
      color: var(--void);
      font-weight: 600;
      border: 1px solid var(--signal);
  }

  .case-action.primary:hover,
  .case-action.primary:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(255, 180, 84, .22);
  }

  .case-action.secondary {
      color: var(--ink-dim);
      border: 1px solid var(--line-strong);
      background: transparent;
  }

  .case-action.secondary:hover,
  .case-action.secondary:focus-visible {
      color: var(--beam);
      border-color: var(--beam);
      box-shadow: 0 8px 22px var(--beam-soft);
  }

  .case-action svg {
      width: 12px;
      height: 12px;
  }

  /* ---------- timeline ---------- */
  .timeline-list {
      border-top: 1px solid var(--line);
  }

  .t-row {
      display: grid;
      grid-template-columns: 150px 1fr 160px;
      gap: 24px;
      align-items: center;
      padding: 20px 0;
      border-bottom: 1px solid var(--line);
  }

  .t-row.flag {
      background: var(--signal-dim);
  }

  .t-date {
      font-family: 'IBM Plex Mono';
      font-size: .8rem;
      letter-spacing: .08em;
      color: var(--signal);
  }

  .t-desc {
      font-size: .94rem;
      color: var(--ink);
  }

  .t-desc span {
      color: var(--ink-dim);
      font-size: .82rem;
      display: block;
      margin-top: 2px;
  }

  .t-tag {
      font-family: 'IBM Plex Mono';
      font-size: .64rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-dim);
      text-align: right;
  }

  @media (max-width:700px) {
      .t-row {
          grid-template-columns: 1fr;
          gap: 6px;
          text-align: left;
      }

      .t-tag {
          text-align: left;
      }
  }

  /* ---------- footer ---------- */
  footer {
      border-top: 1px solid var(--line);
      padding: 80px 0 40px;
      margin-top: 60px;
  }

  .foot-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 56px;
  }

  .foot-grid h4 {
      font-family: 'IBM Plex Mono';
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-bottom: 18px;
  }

  .foot-grid p,
  .foot-grid a {
      font-size: .9rem;
      color: var(--ink-dim);
      text-decoration: none;
      display: block;
      margin-bottom: 8px;
  }

  .foot-grid a:hover,
  .foot-grid a:focus-visible {
      color: var(--signal);
  }

  .foot-link-highlight {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--signal) !important;
      font-family: 'IBM Plex Mono';
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 600;
      padding: 9px 13px;
      margin-top: 6px;
      border: 1px solid var(--signal);
      border-radius: var(--radius);
      transition: transform .15s ease, box-shadow .15s ease;
  }

  .foot-link-highlight:hover,
  .foot-link-highlight:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(255, 180, 84, .22);
  }

  .foot-link-highlight svg {
      width: 12px;
      height: 12px;
  }

  .foot-brand h3 {
      font-size: 2rem;
      margin-bottom: 14px;
  }

  .foot-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      font-family: 'IBM Plex Mono';
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-dim);
  }

  @media (max-width:820px) {
      .foot-grid {
          grid-template-columns: 1fr;
      }
  }

  .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      background: var(--signal);
      color: var(--void);
      padding: 10px 16px;
      z-index: 100;
  }

  .skip-link:focus {
      left: 16px;
      top: 16px;
  }