/* ==========================================================================
   christianhowardtrombone.com
   Phase 2 — home, about, teaching. Full-bleed hero, dark treatment.
   ========================================================================== */

:root {
  /* Palette */
  --bg:      #14120F;   /* page background */
  --ink:     #F2EEE6;   /* body text */
  --muted:   #A79E90;   /* captions, metadata */
  --accent:  #C9A063;   /* links, eyebrow — brass */
  --rule:    #2E2A23;   /* hairlines */
  --panel:   #1D1A15;   /* video placeholder fill */

  /* Type */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Measure */
  --content-max: 820px;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
}

/* --------------------------------------------------------------- Reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { list-style: none; padding: 0; }
img { display: block; }

/* --------------------------------------------------------------- Skip link */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--accent);
  font-size: 0.8125rem;
  text-decoration: none;
}

/* --------------------------------------------------------------- Nav */

.nav { border-bottom: 1px solid var(--rule); }

.nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  flex-wrap: wrap;
}

.nav__name {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--ink);
  text-decoration: none;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.nav__links a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.nav__links a:hover,
.nav__links a:focus-visible,
.nav__name:hover,
.nav__name:focus-visible { color: var(--ink); }

.nav__links a[aria-current="page"] { color: var(--accent); }

/* Home only: the bar floats over the hero photo rather than sitting above it,
   so the photo still runs edge to edge from the top of the viewport. */
.nav--over-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-bottom: 0;
}

.nav--over-hero .nav__inner {
  max-width: 1400px;
  justify-content: flex-end;
}

.nav--over-hero .nav__links a { color: rgba(255, 255, 255, 0.78); }

.nav--over-hero .nav__links a:hover,
.nav--over-hero .nav__links a:focus-visible { color: #fff; }

.nav--over-hero .nav__links a[aria-current="page"] { color: #E4C68C; }

/* --------------------------------------------------------------- Hero */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keeps his face in frame as the viewport aspect changes */
  object-position: 66% 22%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(8, 7, 5, 0.88) 0%,
    rgba(8, 7, 5, 0.66) 40%,
    rgba(8, 7, 5, 0.06) 72%,
    rgba(8, 7, 5, 0.30) 100%
  );
}

.hero__inner {
  position: relative;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--gutter);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E4C68C;
  margin-bottom: 1rem;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  color: #fff;
  font-size: clamp(3rem, 1.6rem + 6.2vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

.hero__roles {
  margin-top: 1.25rem;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9875rem);
  line-height: 1.85;
}

.hero__roles b { font-weight: 500; color: #fff; }

/* --------------------------------------------------------------- Layout */

main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter) 0;
}

/* Interior pages have no hero, so the nav sits in flow directly above main
   and the top padding can come in. On home this selector never matches,
   because the hero header sits between the nav and main. */
.nav + main { padding-top: clamp(2.75rem, 7vw, 4.5rem); }

section + section { margin-top: clamp(3.5rem, 8vw, 5.5rem); }

/* --------------------------------------------------------------- Bio */

.bio p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.55;
}

/* --------------------------------------------------------------- Page head */

.pagehead { margin-bottom: clamp(2.5rem, 6vw, 3.75rem); }

.pagehead .eyebrow { margin-bottom: 0.875rem; }

.pagehead h1 {
  font-family: var(--serif);
  font-weight: 500;
  color: #fff;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------- Prose */

.prose p { margin-bottom: 1.15rem; }
.prose p:last-child { margin-bottom: 0; }

.prose h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  line-height: 1.2;
  margin: clamp(2.75rem, 6vw, 3.75rem) 0 1.1rem;
}

.prose h2:first-child { margin-top: 0; }

/* The Education label is an eyebrow, not a section head. `.prose h2` outranks
   `.eyebrow` on family, size, and weight, so restate them rather than losing
   the specificity fight silently — it rendered as serif small caps. */
.prose h2.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  margin-bottom: 1.25rem;
}

/* Cormorant has a small x-height and an anemic 400. At the old size and weight
   the lede rendered visually smaller than the Inter body copy beneath it, which
   inverted the hierarchy. 500 at this scale is the minimum that reads as a lead. */
.prose .lede {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  line-height: 1.45;
  margin-bottom: 1.6rem;
}

.prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 160, 99, 0.4);
}

.prose a:hover,
.prose a:focus-visible {
  color: #fff;
  border-bottom-color: currentColor;
}

.prose i { font-style: italic; }

.meta {
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------- Studios */

.studio {
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.studio + .studio { margin-top: 2.5rem; }

.studio h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem);
  line-height: 1.2;
}

.studio__role {
  margin: 0.35rem 0 1.1rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.studio__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin-top: 1.25rem;
}

.studio__links a {
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 160, 99, 0.4);
}

.studio__links a:hover,
.studio__links a:focus-visible {
  color: #fff;
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------- Outcomes */

/* Student outcomes are list-shaped: four categories, each with several names.
   Every attempt to write them as a paragraph read as a data dump wearing a
   sentence. The label/values pair is what the content actually is. */
.outcomes > div {
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}

.outcomes > div:last-of-type { border-bottom: 1px solid var(--rule); }

.outcomes dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.outcomes dd { color: var(--ink); }

/* --------------------------------------------------------------- Credentials */

.creds > div {
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}

.creds > div:last-child { border-bottom: 1px solid var(--rule); }

.creds dt { font-weight: 500; }

.creds dd {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------- Shared */

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------- Video */

.video__frame,
.video__placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--rule);
}

.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.video__caption {
  margin-top: 0.875rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------- Contact */

/* The address on the Contact page, set apart from the prose around it.
   `.prose a` would otherwise fade the underline; the contact link keeps its
   solid one. */
.contact-email { margin: 2rem 0 2.25rem; }

.prose .contact__link { border-bottom-color: currentColor; }

.contact__lead {
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.contact__link {
  font-family: var(--serif);
  /* Shallower floor than Phase 1 used: at ~375px the address rendered wider
     than the gutter and was clipped. break-word is the backstop below 360px,
     where no type size short of unreadable fits it on one line. */
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.9rem);
  overflow-wrap: break-word;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.contact__link:hover,
.contact__link:focus-visible { color: #fff; }

/* --------------------------------------------------------------- Footer */

footer {
  max-width: var(--content-max);
  margin: clamp(4rem, 10vw, 6rem) auto 0;
  padding: 1.75rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------- A11y */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}