/* style.css — heyimchris.com, personal site of Chris Edington
   Visual system referenced from nitro.framer.website: pure black canvas,
   Manrope for display/body/nav, DM Mono for small meta labels. */

:root {
  /* ---------- spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- radius ---------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ---------- type scale ---------- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.3rem + 3.8vw, 3.75rem);
  --text-hero: clamp(2.75rem, 0.9rem + 6.8vw, 6.25rem);

  /* ---------- color: pure black canvas ---------- */
  --color-bg: #000000;
  --color-surface: #0a0a0a;
  --color-fg: #ffffff;
  --color-text: #ffffff;
  --color-fg-muted: rgba(255, 255, 255, 0.55);
  --color-fg-dim: rgba(255, 255, 255, 0.34);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-accent: #f1ffb3;
  --color-primary: #ffffff;

  /* ---------- fonts ---------- */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- content widths ---------- */
  --content-max: 1240px;
  --content-narrow: 620px;
  --content-default: 760px;

  /* ---------- motion / shadow ---------- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card:
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --shadow-card-hover:
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 20px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* =========================================================
   LAYOUT PRIMITIVES
   ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-12));
}

.section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
}
.section--tight {
  padding-block: clamp(var(--space-12), 6vw, var(--space-16));
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
  max-width: 56ch;
  line-height: 1.55;
}

.text-muted {
  color: var(--color-fg-muted);
}

.display-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--color-fg);
}
.display-3xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.display-xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}

.prose p + p {
  margin-top: var(--space-5);
}
.prose {
  color: var(--color-fg-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}
.prose strong {
  color: var(--color-fg);
}

/* =========================================================
   HEADER / NAV
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-border);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
}

.brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  color: var(--color-fg);
  text-decoration: none;
}
.brand-mark .brand-dot {
  color: var(--color-accent);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
}
.main-nav a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-fg-muted);
  text-decoration: none;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current='page'] {
  color: var(--color-fg);
}

.mobile-menu-btn {
  display: none;
  color: var(--color-fg);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 760px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: 65px;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-6);
    padding: var(--space-10) clamp(var(--space-5), 6vw, var(--space-8));
    transform: translateX(100%);
    transition: transform var(--transition-interactive);
  }
  .main-nav.is-open {
    transform: translateX(0);
  }
  .main-nav a {
    font-size: var(--text-xl);
    color: var(--color-fg);
  }
  .mobile-menu-btn {
    display: inline-flex;
  }
}

/* =========================================================
   BUTTONS / LINKS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-fg);
  color: #000000;
}
.btn-primary:hover {
  background: var(--color-fg-muted);
}
.btn-secondary {
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover {
  border-color: var(--color-fg);
  background: rgba(255, 255, 255, 0.06);
}
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
  text-decoration: none;
}
.btn-text svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-interactive);
}
.btn-text:hover svg {
  transform: translateX(3px);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  padding-block: clamp(var(--space-8), 4vw, var(--space-12)) var(--space-16);
}
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px 1px var(--color-accent);
  flex-shrink: 0;
}
.hero-headline {
  margin-bottom: var(--space-8);
}
.hero-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 640px;
}

/* =========================================================
   STAT STRIP
   ========================================================= */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.stat-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}
@media (max-width: 760px) {
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-8);
  }
}

/* =========================================================
   WORK — STICKY STACKING CARDS
   ========================================================= */

.work-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: var(--space-4);
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-24));
}
.work-stack::after {
  /* keeps the full deck pinned for a beat before it scrolls away */
  content: "";
  height: 24vh;
}

/* True pinned stack: every card is a direct child of .work-stack and
   shares the same sticky top, so each card's sticky range runs to the
   END of the stack, not to a per-card wrapper. A covered card
   therefore stays pinned dead-still underneath the incoming one and
   the whole deck only releases together when the stack ends, which is
   the reference behavior. Later cards paint over earlier ones via
   z-index. */
/* Taller than the viewport on purpose: while a card is pinned its
   bottom edge (and the image's rounded bottom corners) sit below the
   fold, so the media reads as bleeding down past the fold, matching
   the reference. Only the final card ever shows its bottom, at the
   very end of the scroll. */
:root {
  --card-h: clamp(640px, 108vh, 1240px);
}

/* Zero-height flow markers. Each sits at its card's natural slot in
   the stack, never moves (no sticky, no transform), and is what
   app.js measures to drive the recede without feedback. The margin
   between a card and the next sentinel is the HOLD: how long a card
   sits fully pinned before the next one starts its approach. */
.work-sentinel {
  height: 0;
}
.work-card + .work-sentinel {
  margin-top: 38vh;
}

.work-card {
  position: sticky;
  top: clamp(88px, 8vw, 112px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow:
    var(--shadow-card),
    0 -50px 90px -40px rgba(0, 0, 0, 0.45),
    0 -110px 160px -60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-decoration: none;
  color: var(--card-ink, var(--color-fg));
  background-color: var(--card-bg, var(--color-surface));
  height: var(--card-h);
  flex-shrink: 0;
  will-change: transform;
  transform-origin: center top;
  z-index: 1;
  /* --recede (0..1) is written by app.js as the next card approaches its
     pin line. The transform and dim derive from it here, so scroll only
     ever touches one custom property and never fights other transforms. */
  --recede: 0;
  transform: translateY(calc(var(--recede) * -14px)) scale(calc(1 - 0.05 * var(--recede)));
}
/* Receding cards dim under the incoming card, nitro-style. */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--recede) * 0.3);
  pointer-events: none;
  z-index: 6;
  border-radius: inherit;
}
.work-stack > .work-card:nth-child(4) { z-index: 2; }
.work-stack > .work-card:nth-child(6) { z-index: 3; }
.work-stack > .work-card:nth-child(8) { z-index: 4; }
/* Hover lifts with shadow only. A hover transform here would override
   the scroll-linked recede transform and snap. */
a.work-card:hover {
  box-shadow:
    var(--shadow-card-hover),
    0 -50px 90px -40px rgba(0, 0, 0, 0.45),
    0 -110px 160px -60px rgba(0, 0, 0, 0.3);
}
.work-card--static {
  cursor: default;
}

.work-card-head {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-5), 3vw, var(--space-8)) clamp(var(--space-5), 3vw, var(--space-8)) 0;
}

.work-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
}
.work-card-top span {
  opacity: 0.8; /* 0.72 fell just under 4.5:1 on the cream and coral cards */
}

.work-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: clamp(var(--space-6), 4vw, var(--space-10));
}
.work-card-logo {
  height: clamp(28px, 3.6vw, 44px);
  width: auto;
  max-width: min(60vw, 260px);
}
.work-card-logo img,
.work-card-logo svg {
  height: 100%;
  width: auto;
}
.work-card-arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-card-arrow svg {
  width: 16px;
  height: 16px;
}

.work-card-media {
  flex: 1;
  min-height: 200px;
}
.work-card-media--placeholder {
  margin: 0 clamp(var(--space-5), 3vw, var(--space-8)) clamp(var(--space-5), 3vw, var(--space-8));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, currentColor 7%, transparent);
  border: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
}
.work-card-media--image {
  margin: 0 clamp(var(--space-5), 3vw, var(--space-8)) clamp(var(--space-5), 3vw, var(--space-8));
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
}
.work-card-media span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  opacity: 0.55;
  max-width: 32ch;
}

/* =========================================================
   NOTE / TEASER GRID
   ========================================================= */

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .teaser-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
a.card {
  text-decoration: none;
  color: inherit;
  display: block;
}
a.card:hover {
  border-color: var(--color-border-strong);
  background: #101010;
}

.note-meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 760px) {
  .split-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PAGE HERO (interior pages)
   ========================================================= */

.page-hero {
  padding-block: clamp(var(--space-16), 10vw, 7rem) var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-6);
}
.info-item dt {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-1);
}
.info-item dd {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.timeline-item:first-child {
  padding-top: 0;
  border-top: none;
}
.timeline-date {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}
@media (max-width: 640px) {
  .timeline-item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* =========================================================
   GOVERNMENT PAGE
   ========================================================= */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
}
.badge svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
}

/* =========================================================
   NOTES PAGE
   ========================================================= */

.note-entry {
  padding-block: clamp(var(--space-12), 6vw, var(--space-16));
  border-bottom: 1px solid var(--color-border);
}
.note-entry:last-child {
  border-bottom: none;
}
.notes-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}
.notes-list-item:first-child {
  border-top: 1px solid var(--color-border);
}
.notes-list-item:hover .notes-list-title {
  color: var(--color-fg-muted);
}
.notes-list-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--color-fg);
}
.notes-list-date {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  white-space: nowrap;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}
.contact-tile:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}
.contact-tile-label {
  display: block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-1);
}
.contact-tile-value {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
}
.contact-tile svg {
  width: 20px;
  height: 20px;
  color: var(--color-fg-muted);
  flex-shrink: 0;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-16) var(--space-10);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
.footer-brand {
  max-width: 340px;
}
.footer-cols {
  display: flex;
  gap: clamp(var(--space-8), 6vw, var(--space-20));
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-dim);
  margin-bottom: var(--space-1);
  font-weight: 400;
}
.footer-col a {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
}
.footer-col a:hover {
  color: var(--color-fg);
}
.footer-veteran {
  margin-top: var(--space-5);
  font-weight: 600;
}
.footer-veteran span {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: 400;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-fg-dim);
}
@media (max-width: 640px) {
  .footer-top {
    flex-direction: column;
    gap: var(--space-10);
  }
  .footer-cols {
    gap: var(--space-10);
  }
}

/* =========================================================
   404
   ========================================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-fg);
  color: #000;
  padding: var(--space-3) var(--space-5);
  z-index: 100;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}