/*
  Shared site styles - loaded by ALL pages right after the app bundle CSS.
  taxi.js only swaps [data-taxi-view]; the entry page's <head> persists across
  SPA navigations, so per-page <style> blocks leak onto other views (or go
  missing). Page-specific rules MUST live here, scoped by the view wrapper
  class (.home / .works / .about) - never in a page's <head>.
*/

/* ---------- Shared (all views) ---------- */

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

.header-logo-wordmark {
  display: block;
  color: #fff;
  font-family: "DrukWide", "Hypik", "HYPIK", sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .header-logo-wordmark {
    font-size: 1.6rem;
    letter-spacing: 0.09em;
  }
}

.hero-content-bottom-right {
  position: absolute;
  right: clamp(0.6rem, 1.2vw, 1.4rem);
  bottom: 0;
  z-index: 2;
  width: auto;
  max-width: min(92vw, 62rem);
  text-align: right;
}

.hero-content-bottom-right p {
  margin: 0;
}

.section-head {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 1.2rem var(--spacing-margin) 0;
}

.contact-link {
  display: inline-block;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.contact-link:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* ---------- About view ---------- */

.about .fact-row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem 2rem;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2.4rem var(--spacing-margin);
}

.about .fact-row:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.about .fact-label {
  grid-column: 2;
}

.about .fact-value {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.64);
}

@media (min-width: 64rem) {
  .about .fact-row {
    grid-template-columns: 8rem 1fr 1.4fr;
  }

  .about .fact-label {
    grid-column: 2;
  }

  .about .fact-value {
    grid-column: 3;
  }
}

.about .focus-item {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 2.6rem var(--spacing-margin);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.about .focus-item:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.about .focus-item:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* ---------- Works view ---------- */

.works .work-row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.2rem 2rem;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3.2rem var(--spacing-margin);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.works .work-row:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.works .work-row:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

.works .work-row-title {
  grid-column: 2;
}

.works .work-row-desc {
  grid-column: 2;
  max-width: 60rem;
  color: rgba(255, 255, 255, 0.64);
}

.works .work-row:hover .work-row-desc {
  color: rgba(0, 0, 0, 0.64);
}

.works .work-row-meta {
  grid-column: 2;
}

@media (min-width: 64rem) {
  .works .work-row {
    grid-template-columns: 8rem 1.4fr 1fr auto;
    align-items: baseline;
  }

  .works .work-row-title {
    grid-column: 2;
  }

  .works .work-row-desc {
    grid-column: 3;
  }

  .works .work-row-meta {
    grid-column: 4;
    text-align: right;
  }
}

/*
  Mobile: DrukWide is very wide - scale display sizes down and unpin the
  hero caption. Scoped to the works/about heroes only; the home hero
  ("Bachelor's...", "OSCP & CPTS...") keeps its default size and pinning.
*/

@media (max-width: 47.99rem) {
  .about .hero-title,
  .works .hero-title {
    font-size: var(--text-48);
    letter-spacing: -0.1rem;
    overflow-wrap: anywhere;
  }

  .about .hero-content-bottom-right,
  .works .hero-content-bottom-right {
    position: static;
    margin-top: 2rem;
    text-align: left;
    max-width: none;
  }

  .about .about-hero-title {
    font-size: var(--text-24);
    letter-spacing: -0.05rem;
  }

  .about .focus-item {
    font-size: var(--text-24);
    letter-spacing: -0.05rem;
    padding-block: 2rem;
  }

  .about .fact-row {
    grid-template-columns: 3rem 1fr;
    padding-block: 2rem;
  }

  .works .work-row {
    grid-template-columns: 3rem 1fr;
    padding-block: 2.4rem;
  }

  .works .work-row-title {
    font-size: var(--text-24);
    letter-spacing: -0.05rem;
    overflow-wrap: anywhere;
  }

  .contact-link {
    font-size: var(--text-24);
    letter-spacing: -0.05rem;
    overflow-wrap: anywhere;
  }
}
