/* ═══════════════════════════════════════════════════════════════════════
   HONEY COMB VISUALS - about.css
   Page-specific styles for the About / Lucas Romano page
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Nav current-page indicator ─────────────────────────────────────── */
.nav-links a[aria-current="page"] {
  color: var(--gold);
}

/* ── About Hero ──────────────────────────────────────────────────────── */
.about-hero {
  position: relative;
  min-height: 72dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(80px + var(--sp-16)) var(--sp-8) var(--sp-20);
  overflow: hidden;
  background: var(--color-bg);
  animation: crtflicker 0.6s ease-out 0.1s both;
}

/* Vertical SMPTE bar column - right side accent */
.about-hero-bars {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  opacity: 0.08;
  pointer-events: none;
}
.about-hero-bars .bar { flex: 1; }

/* Horizontal scanlines */
.about-hero .scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    oklch(0 0 0 / 0.055) 2px,
    oklch(0 0 0 / 0.055) 4px
  );
}

/* Corner marks (reuse .corner-marks from style.css) */
.about-hero .corner-marks { position: absolute; inset: var(--sp-6); pointer-events: none; z-index: 2; }

/* Hero inner content */
.about-hero-inner {
  position: relative;
  z-index: 4;
  max-width: var(--content-default);
  margin: 0 auto;
  width: 100%;
}

.about-hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.about-hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-6);
  max-width: 18ch;
}
.about-hero-headline em {
  font-style: italic;
  color: var(--gold);
}

.about-hero-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 50ch;
  margin-bottom: var(--sp-10);
}

.about-hero-meta {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.about-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.about-meta-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.about-meta-value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text);
}

/* Signal strip at bottom */
.about-hero .signal-strip {
  position: absolute;
  bottom: var(--sp-6);
  left: var(--sp-8);
  right: var(--sp-8);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: oklch(from var(--gold-raw) l c h / 0.3);
  pointer-events: none;
  z-index: 3;
}

/* ── Bio Section ─────────────────────────────────────────────────────── */
.about-bio {
  padding: clamp(var(--sp-16), 10vw, var(--sp-32)) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.about-bio-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--sp-20);
  align-items: start;
}

.bio-text { }
.bio-text .body-copy {
  max-width: 62ch;
}
.bio-text p + p {
  margin-top: var(--sp-6);
}

/* Bio aside - identity card */
.bio-card {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
}

.bio-card-bars {
  display: flex;
  height: 3px;
}
.bio-card-bars .bar { flex: 1; }

.bio-card-inner {
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.bio-monogram {
  width: 64px;
  height: 64px;
  background: oklch(from var(--gold-raw) l c h / 0.1);
  border: 1px solid oklch(from var(--gold-raw) l c h / 0.25);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}

.bio-card-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.15;
}
.bio-card-name span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}

.bio-card-divider {
  height: 1px;
  background: var(--color-border);
}

.bio-contact-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.bio-contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: none;
}
.bio-contact-list .bio-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.bio-contact-list .bio-value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--t-ui);
}
.bio-contact-list a.bio-value:hover { color: var(--gold); }

/* Corner registration mark on the bio card */
.bio-card-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: oklch(from var(--gold-raw) l c h / 0.2);
  border-style: solid;
}
.bio-card-corner.bl { bottom: var(--sp-4); left: var(--sp-4); border-width: 0 0 1px 1px; }
.bio-card-corner.br { bottom: var(--sp-4); right: var(--sp-4); border-width: 0 1px 1px 0; }

/* ── Credits Section ─────────────────────────────────────────────────── */
.about-credits {
  padding: clamp(var(--sp-16), 10vw, var(--sp-32)) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.credits-header {
  margin-bottom: var(--sp-12);
}
.credits-header .body-copy {
  margin-top: var(--sp-4);
}

.credits-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
}

.credit-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  transition: background var(--t-ui);
  cursor: default;
}
.credit-item:last-child { border-bottom: none; }
.credit-item:hover { background: var(--color-surface-2); }

/* Featured / top credit */
.credit-item--featured {
  background: oklch(from var(--gold-raw) 0.08 0.03 85);
  border-left: 2px solid var(--gold);
  grid-template-columns: 48px 1fr auto;
}
.credit-item--featured:hover {
  background: oklch(from var(--gold-raw) 0.10 0.04 85);
}

.credit-index {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: oklch(from var(--gold-raw) l c h / 0.2);
  line-height: 1;
  text-align: right;
}
.credit-item--featured .credit-index {
  color: oklch(from var(--gold-raw) l c h / 0.5);
}

.credit-body { }
.credit-event {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: var(--sp-1);
}
.credit-item--featured .credit-event {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
}
.credit-role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  max-width: none;
}

.credit-badge {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-text-muted);
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: start;
}
.credit-badge--gold {
  background: var(--gold);
}
.credit-badge--ongoing {
  background: var(--bar-cyan);
  color: var(--color-bg);
}

/* ── Technical Capabilities ──────────────────────────────────────────── */
.about-skills {
  padding: clamp(var(--sp-16), 10vw, var(--sp-32)) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.skills-header {
  margin-bottom: var(--sp-12);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--color-border);
  background: var(--color-border);
}

.skill-cell {
  background: var(--color-surface);
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  overflow: hidden;
  transition: background var(--t-ui);
}
.skill-cell:hover { background: var(--color-surface-2); }

/* Top accent bar - SMPTE color per category */
.skill-cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cell-accent, var(--color-border));
  transition: opacity var(--t-ui);
}
.skill-cell[data-cat="playback"]   { --cell-accent: var(--gold); }
.skill-cell[data-cat="led"]        { --cell-accent: var(--bar-cyan); }
.skill-cell[data-cat="projection"] { --cell-accent: var(--bar-magenta); }
.skill-cell[data-cat="virtual"]    { --cell-accent: var(--bar-green); }
.skill-cell[data-cat="lighting"]   { --cell-accent: var(--bar-yellow); }
.skill-cell[data-cat="switching"]  { --cell-accent: var(--bar-red); }
.skill-cell[data-cat="motion"]     { --cell-accent: var(--bar-blue); }
.skill-cell[data-cat="stage"]      { --cell-accent: var(--amber); }

.skill-icon {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cell-accent, var(--gold));
}

.skill-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.2;
}

.skill-tools {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: auto;
}
.skill-tools li {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  padding-left: var(--sp-4);
  position: relative;
  line-height: 1.5;
  max-width: none;
}
.skill-tools li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--cell-accent, var(--gold));
  font-size: 10px;
}

/* Bottom SMPTE strip below skills grid */
.skills-smpte {
  display: flex;
  height: 4px;
  margin-top: 1px;
  background: var(--color-border);
}
.skills-smpte .bar { flex: 1; opacity: 0.5; }

/* ── Bilingual tag / language badge ──────────────────────────────────── */
.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(from var(--gold-raw) l c h / 0.7);
  border: 1px solid oklch(from var(--gold-raw) l c h / 0.2);
  padding: 2px var(--sp-3);
  border-radius: 2px;
  margin-left: var(--sp-2);
}

/* ── Divider / section separator with test bars ──────────────────────── */
.bar-divider {
  display: flex;
  height: 3px;
}
.bar-divider .bar { flex: 1; }

/* ── Residency Callout ───────────────────────────────────────────────── */
.about-residency-cta {
  padding: clamp(var(--sp-12), 6vw, var(--sp-20)) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.residency-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-12);
  align-items: center;
}

.residency-cta-text h2 { margin-bottom: var(--sp-3); }
.residency-cta-text p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 48ch;
}

.residency-cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-bio-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }
  .bio-card { max-width: 420px; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .residency-cta-inner { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .about-hero { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .about-hero-meta { gap: var(--sp-6); flex-direction: column; }
  .about-bio { padding: var(--sp-16) 0; }
  .about-bio-layout { gap: var(--sp-10); }
  .credits-header { margin-bottom: var(--sp-8); }
  .credit-item {
    grid-template-columns: 36px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
  }
  .credit-badge { display: none; }
  .skills-grid { grid-template-columns: 1fr 1fr; }
  .skill-cell { padding: var(--sp-6) var(--sp-4); }
  .residency-cta-inner { gap: var(--sp-8); }
  .residency-cta-actions { flex-direction: row; flex-wrap: wrap; }
  .about-hero .signal-strip { left: var(--sp-4); right: var(--sp-4); }
}

@media (max-width: 420px) {
  .skills-grid { grid-template-columns: 1fr; }
  .credit-item { grid-template-columns: 36px 1fr; }
}