/* ---------------------------------------------------------
   RunsLinux - C5 Corvette
   --------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body.corvette-page {
  display: block;
  min-height: 100vh;
  margin: 0;
  padding: 0;

  background:
    radial-gradient(circle at 82% 14%, rgba(47, 129, 247, 0.06), transparent 28%),
    #0d1117;

  color: #e6edf3;
}

.corvette-shell {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0 38px;
}

/* Brand / Back */

.corvette-brand {
  display: inline-block;
  margin-bottom: 16px;

  color: #e6edf3;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.corvette-brand span {
  color: #3fb950;
}

.corvette-brand:hover {
  opacity: 0.86;
}

.corvette-back {
  display: block;
  width: fit-content;
  margin-bottom: 16px;

  color: #58a6ff;
  font-size: 0.82rem;
  text-decoration: none;
}

.corvette-back:hover {
  opacity: 0.85;
}

/* Video hero */

.corvette-video-card {
  overflow: hidden;

  margin-bottom: 24px;

  background: #090d12;
  border: 1px solid #30363d;
  border-radius: 14px;

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.012) inset;
}

.corvette-hero-video {
  width: 100%;
  height: clamp(340px, 47vw, 560px);

  display: block;
  object-fit: cover;

  background: #080b0f;
}

/* Intro */

.corvette-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.7fr);
  gap: 26px;

  align-items: start;
  margin-bottom: 18px;
}

.corvette-intro-copy {
  min-width: 0;
  padding: 8px 0;
}

.corvette-terminal {
  margin-bottom: 8px;

  color: #58a6ff;
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 0.78rem;
}

.corvette-intro h1 {
  margin: 0;

  color: #f0f6fc;
  font-size: clamp(3rem, 7vw, 5.3rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.corvette-kicker {
  margin-top: 18px;

  color: #2f81f7;
  font-size: clamp(0.82rem, 1.8vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.28em;
}

.corvette-intro-copy p {
  max-width: 760px;
  margin: 22px 0 0;

  color: #9aa4af;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.68;
}

/* Specs */

.corvette-specs {
  padding: 4px 18px;

  background:
    linear-gradient(180deg, rgba(16, 22, 29, 0.98), rgba(13, 18, 24, 0.98));

  border: 1px solid #30363d;
  border-radius: 12px;
}

.corvette-spec-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;

  min-height: 68px;

  border-bottom: 1px solid #242c35;
}

.corvette-spec-row:last-child {
  border-bottom: 0;
}

.corvette-spec-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  color: #2f81f7;
  background: rgba(47, 129, 247, 0.11);
  border-radius: 8px;

  font-size: 1.15rem;
}

.corvette-spec-row strong {
  display: block;
  margin-bottom: 2px;

  color: #f0f6fc;
  font-size: 0.8rem;
}

.corvette-spec-row span:not(.corvette-spec-icon) {
  color: #9aa4af;
  font-size: 0.76rem;
}

/* Projects */

.corvette-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;

  margin-top: 18px;
}

.corvette-project-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;

  padding: 18px;

  background:
    linear-gradient(180deg, #10161d 0%, #0f151b 100%);

  border: 1px solid #30363d;
  border-radius: 12px;
}

.corvette-project-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  color: #58a6ff;
  background: rgba(88, 166, 255, 0.11);
  border-radius: 9px;
}

.corvette-project-card h2 {
  margin: 0 0 6px;

  color: #f0f6fc;
  font-size: 0.92rem;
}

.corvette-project-card p {
  margin: 0;

  color: #8b949e;
  font-size: 0.72rem;
  line-height: 1.5;
}

/* Footer */

.corvette-footer {
  margin-top: 24px;
  padding-top: 16px;

  border-top: 1px solid #21262d;

  color: #6e7681;
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
  font-size: 0.75rem;
}

.corvette-footer .online {
  color: #3fb950;
}

/* Responsive */

@media (max-width: 900px) {
  .corvette-intro {
    grid-template-columns: 1fr;
  }

  .corvette-specs {
    max-width: none;
  }

  .corvette-project-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .corvette-shell {
    width: min(100% - 28px, 1160px);
    padding-top: 20px;
  }

  .corvette-hero-video {
    height: 300px;
  }

  .corvette-kicker {
    letter-spacing: 0.18em;
  }
}

@media (max-width: 440px) {
  .corvette-hero-video {
    height: 240px;
  }

  .corvette-intro h1 {
    font-size: 2.8rem;
  }
}

/* Route 66 page background */
html {
  min-height: 100%;
  background: #090d12;
}

body.corvette-page {
  background:
    linear-gradient(rgba(5, 9, 14, 0.46), rgba(5, 9, 14, 0.58)),
    url("/assets/corvette/c5-route66-tux-background.png") center top / cover fixed no-repeat;
}

@media (max-width: 900px) {
  body.corvette-page {
    background-position: center top;
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.corvette-page {
    background-attachment: scroll;
  }
}

/* Corvette hero: a photograph revealed through a torn opening in the page. */
.corvette-page .corvette-video-card {
  --corvette-tear: polygon(
    0.8% 2.2%, 2.1% 1.1%, 4.3% 2.0%, 6.4% 0.6%, 9.2% 1.5%,
    12.5% 0.9%, 15.8% 1.9%, 18.1% 0.7%, 21.6% 1.4%, 24.7% 0.4%,
    27.5% 1.7%, 31.4% 0.8%, 34.6% 1.3%, 37.2% 0.3%, 40.8% 1.6%,
    44.1% 0.9%, 47.2% 1.9%, 50.4% 0.5%, 54.1% 1.4%, 57.3% 0.7%,
    61.0% 1.8%, 64.5% 0.8%, 67.9% 1.3%, 71.2% 0.4%, 74.7% 1.7%,
    78.2% 0.9%, 81.4% 1.8%, 84.9% 0.6%, 88.1% 1.5%, 91.7% 0.7%,
    95.0% 1.9%, 98.4% 1.0%, 99.1% 3.6%, 98.6% 9.4%,
    99.5% 15.2%, 98.9% 22.1%, 99.7% 28.4%, 98.6% 35.2%,
    99.4% 42.3%, 98.9% 49.1%, 99.8% 55.3%, 98.8% 62.7%,
    99.5% 69.4%, 98.7% 76.6%, 99.6% 83.2%, 98.9% 90.5%, 99.2% 97.9%,
    96.8% 99.0%, 93.4% 98.0%, 90.7% 99.5%, 86.9% 98.6%,
    83.4% 99.1%, 80.2% 97.9%, 76.9% 99.2%, 73.7% 98.4%,
    70.1% 99.6%, 66.5% 98.6%, 63.2% 99.0%, 59.6% 97.9%,
    56.2% 99.2%, 52.5% 98.5%, 49.3% 99.6%, 45.7% 98.3%,
    42.5% 99.1%, 39.0% 97.8%, 35.6% 99.2%, 32.4% 98.4%,
    28.8% 99.5%, 25.3% 98.7%, 21.9% 99.1%, 18.6% 97.9%,
    15.2% 99.3%, 11.8% 98.6%, 8.4% 99.5%, 5.1% 98.1%, 1.1% 98.8%,
    0.6% 94.3%, 1.4% 87.7%, 0.3% 80.6%, 1.1% 73.5%,
    0.5% 66.8%, 1.4% 59.5%, 0.3% 52.7%, 1.0% 45.3%,
    0.4% 38.9%, 1.3% 31.7%, 0.2% 24.5%, 1.0% 17.6%, 0.5% 10.4%
  );
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-bottom: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .72))
          drop-shadow(0 17px 25px rgba(0, 0, 0, .38));
}

/* Uneven exposed backing creates a narrow, weathered fiber edge. */
.corvette-page .corvette-video-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px -4px -6px -5px;
  pointer-events: none;
  clip-path: var(--corvette-tear);
  background:
    repeating-linear-gradient(117deg, transparent 0 3px, rgba(230, 221, 202, .13) 3px 4px, transparent 4px 9px),
    linear-gradient(153deg, #c0b6a4, #736b60 28%, #ada28e 51%, #4c4844 74%, #998d79);
}

.corvette-page .corvette-hero-video {
  position: relative;
  z-index: 0;
  border-radius: 0;
  clip-path: var(--corvette-tear);
}

/* A recessed rim makes this read as a tear through the page surface. */
.corvette-page .corvette-video-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  clip-path: var(--corvette-tear);
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .28), transparent 4%, transparent 95%, rgba(0, 0, 0, .20)),
    linear-gradient(to right, rgba(0, 0, 0, .18), transparent 3%, transparent 97%, rgba(0, 0, 0, .22));
}

@media (max-width: 650px) {
  .corvette-page .corvette-video-card::before {
    inset: -3px;
  }
  .corvette-page .corvette-video-card {
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .65))
            drop-shadow(0 10px 16px rgba(0, 0, 0, .30));
  }
}