/* ==========================================================================
   components.css — Reusable UI, organised by atomic scale
   ATOMS      — indivisible primitives (labels, rules, buttons, nav links)
   MOLECULES  — small compositions of atoms (skill row, field, social link)
   ORGANISMS  — full sections (skills block, career timeline, contact)
   RESPONSIVE — loaded last so these media queries win without !important

   Markup contract is the component API: to add a role copy a `.cv-entry`
   block; to add a competency copy a `.skill` block. No new CSS required.
   ========================================================================== */

/* ==========================================================================
   ATOMS
   ========================================================================== */

/* ---- Mono label (eyebrow / section number) ---------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-placeholder);
}

.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-signal-ink);
}
/* On the dark contact section the same label needs the brighter red for AA. */
.contact .section-label { color: var(--c-signal-bright); }

/* horizontal hairline that follows a section label */
.rule {
  height: 1px;
  background: var(--c-rule);
  margin-top: 0.875rem;
}
.rule--dark { background: var(--c-dark-rule-3); }

/* ---- Brand wordmark --------------------------------------------------- */
.brand {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  letter-spacing: var(--ls-logo);
  text-transform: uppercase;
  color: var(--c-ink);
}

/* ---- Nav links -------------------------------------------------------- */
.nav__list {
  display: flex;
  align-items: center;
  gap: 2.375rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--c-text-subtle);
  transition: color var(--transition);
}
.nav__link:hover,
.nav__link.is-active { color: var(--c-signal); }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-btn);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.125rem 2rem;
  border: none;
  transition: background var(--transition);
}
.btn--primary {
  background: var(--c-signal);
  color: var(--c-white);
}
.btn--primary:hover { background: var(--c-signal-dark); }

/* ---- Section headings (inherit display grotesque from base h1–h3) ----- */
.section__heading {
  font-size: var(--fs-h2);
  line-height: 1;
  margin-bottom: var(--space-6);
}
.section__heading--display {
  font-size: var(--fs-display);
  line-height: 0.98;
  margin: 2.125rem 0 5rem;
}

/* ==========================================================================
   Hero — the expressive "type fills the frame" moment
   ========================================================================== */
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-stretch: 125%;            /* Archivo Expanded width axis */
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  margin-top: 1.5rem;
}
.hero__subtitle {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-subtitle);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-top: var(--space-6);
}
.hero__lead {
  max-width: var(--measure);
  margin-top: var(--space-7);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-text);
}

/* ==========================================================================
   MOLECULES
   ========================================================================== */

/* ---- About ------------------------------------------------------------ */
.portrait {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--c-portrait-edge);
  display: flex;
  align-items: flex-end;
  padding: 1.125rem;
  position: relative;
  overflow: hidden;
}
.portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.portrait__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-placeholder);
}

.prose {
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
}
.prose + .prose { margin-top: var(--space-5); }

/* Pull-quote re-set as a heavy grotesque statement (no serif italic). */
.pullquote {
  padding-left: 1.5rem;
  border-left: 0.1875rem solid var(--c-signal);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-quote);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}

/* ---- Skill row -------------------------------------------------------- */
.skill {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-5);
  padding-block: 1.5rem;
  border-top: 1px solid var(--c-rule-soft);
}
.skill:first-child { border-top: none; }
.skill:last-child { border-bottom: 1px solid var(--c-rule-soft); }

.skill__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--c-signal-ink);
}
.skill__title {
  font-family: var(--font-grotesk);
  font-size: var(--fs-skill-title);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  margin-bottom: var(--space-2);
}
.skill__desc {
  font-size: var(--fs-desc);
  line-height: var(--lh-list);
  color: var(--c-text-muted);
}

/* ---- Form field ------------------------------------------------------- */
.field {
  width: 100%;
  background: transparent;
  color: var(--c-dark-input);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  border: none;
  border-bottom: 1px solid var(--c-dark-field);
  padding: 0.75rem 0;
  margin-bottom: var(--space-6);
}
.field--area {
  border: 1px solid var(--c-dark-field);
  padding: 0.875rem;
  resize: vertical;
}
.field::placeholder {
  color: var(--c-dark-placeholder);
  letter-spacing: 0.14em;
}
.field:focus {
  outline: none;
  border-color: var(--c-signal);
}

/* Honeypot — kept in the DOM for bots, removed from the visual + a11y tree */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Social link ------------------------------------------------------ */
.social-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-min);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--c-dark-rule);
  transition: background var(--transition);
}
.social-link:hover { background: color-mix(in srgb, var(--c-signal) 5%, transparent); }
.social-link__id {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.social-link__icon { width: 1.125rem; height: 1.125rem; fill: var(--c-signal); }
.social-link__text {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: #D9D4CC;
}
.social-link__arrow {
  font-family: var(--font-mono);
  color: var(--c-dark-label);
}

/* ==========================================================================
   ORGANISMS
   ========================================================================== */

/* ---- Skills heading block --------------------------------------------- */
.skills__heading {
  font-size: var(--fs-h2-sm);
  line-height: 1.04;
  padding-right: var(--space-4);
}
/* The ampersand becomes a signal-red accent rather than a faux-italic. */
.skills__heading em {
  font-style: normal;
  color: var(--c-signal);
}

/* ==========================================================================
   .cv-entry — the reusable career timeline item
   Markup contract:
   <article class="cv-entry cv-entry--left|--right">
     <span class="cv-entry__node"></span>
     <div class="cv-entry__body">
       <p   class="cv-entry__period">…</p>
       <h3  class="cv-entry__title">…</h3>
       <p   class="cv-entry__org">…</p>
       <p   class="cv-entry__note">…</p>   (optional)
       <ul  class="cv-entry__list"><li>…</li></ul>
     </div>
   </article>
   --left places the body in columns 1–6, --right in 7–12.
   ========================================================================== */
.cv-entry {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--gutter);
  position: relative;
  margin-bottom: var(--space-9);
}
.cv-entry:last-child { margin-bottom: 0; }

/* Body takes 5 of the 6 columns on its side of the spine; the column adjacent
   to the centre line (6 on the left, 7 on the right) stays open as breathing
   room so fluent paragraphs don't run all the way to the spine. */
.cv-entry--left  .cv-entry__body { grid-column: 1 / span 5; }
.cv-entry--right .cv-entry__body { grid-column: 8 / span 5; }

.cv-entry__node {
  position: absolute;
  left: 50%;
  top: 0.375rem;
  width: 0.6875rem;
  height: 0.6875rem;
  background: var(--c-signal);
  transform: translateX(-50%);
}

.cv-entry__period {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  color: var(--c-signal-ink);
}
.cv-entry__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-role);
  letter-spacing: var(--ls-tight);
  margin: var(--space-2) 0 0.125rem;
}
.cv-entry__org {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.cv-entry__note {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--c-signal-ink);
  margin-top: 0.375rem;
}
.cv-entry__list { margin-top: 1.25rem; }
.cv-entry__list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-bullet);
  line-height: var(--lh-list);
  color: var(--c-text-bullet);
}
.cv-entry__list li + li { margin-top: var(--space-3); }
.cv-entry__list li::before {
  content: "—";
  color: var(--c-signal);
  flex: none;
}

/* ---- Contact (dark) section ------------------------------------------- */
.contact {
  background: var(--c-dark-bg);
  padding: var(--space-section) var(--gutter) 3.5rem;
}
.contact__heading {
  font-size: var(--fs-h2-contact);
  line-height: 0.96;
  margin-bottom: var(--space-6);
  color: var(--c-dark-text);
}
.contact__intro {
  max-width: 32rem;
  margin-bottom: var(--space-7);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-dark-input);
}

/* Form status message (under the submit button, on the dark section) */
.form-status {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  margin-top: var(--space-4);
  min-height: 1em;
  color: var(--c-dark-label);
}
.form-status[data-state="ok"]      { color: #6FBF73; }
.form-status[data-state="error"]   { color: var(--c-signal); }
.form-status[data-state="pending"] { color: var(--c-dark-input); }

/* Socials column header */
.socials__title {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-dark-label);
  margin-bottom: var(--space-2);
}

/* Footer — its own dark band continuing the contact section, page landmark */
.footer {
  background: var(--c-dark-bg);
  padding-block: var(--space-6);
  border-top: 1px solid var(--c-dark-rule-2);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.footer__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--c-dark-foot);
}

/* ==========================================================================
   RESPONSIVE
   Loaded last (this file is the final stylesheet), so these media queries win
   over every base rule above and the layout grids — no !important needed
   except where a more specific modifier (.cv-entry--right) must be undone.
   ========================================================================== */

/* Tablet — collapse the 12-column field to one column, story order preserved */
@media (max-width: 53.75em) {
  .grid-about,
  .grid-skills,
  .grid-contact { grid-template-columns: 1fr; }

  /* Stacked: every placed region reclaims the single column. These match the
     column-placement selectors in layout.css at equal specificity (0,2,0) and
     win by loading later — a bare `> *` (0,1,0) would lose and the grid would
     never collapse. */
  .grid-about > .portrait,
  .grid-about > .about__body,
  .grid-about > .pullquote,
  .grid-skills > .skills__heading,
  .grid-skills > .skill-list,
  .grid-contact > .contact__form-col,
  .grid-contact > .contact__socials { grid-column: auto; }

  .nav__list { gap: var(--space-4); }
  .nav__link { font-size: 0.6875rem; letter-spacing: 0.12em; }

  /* Timeline becomes a single left-aligned rail */
  .timeline__spine { left: 0.4375rem; }

  .cv-entry { grid-template-columns: 1fr; }
  .cv-entry--left  .cv-entry__body,
  .cv-entry--right .cv-entry__body {
    grid-column: 1;
    padding-left: 2.125rem;
    padding-right: 0;
  }
  .cv-entry__node { left: 0.4375rem; }
}

/* Phone — drop brand + spacer so the menu fits on one line */
@media (max-width: 35em) {
  .site-header { padding-inline: var(--gutter-sm); }
  .nav { grid-template-columns: 1fr; }
  .nav__brand,
  .nav__spacer { display: none; }
  .nav__list { justify-self: center; gap: var(--space-2); }
  .nav__link { font-size: 0.625rem; letter-spacing: 0.04em; }

  .hero { padding-top: 9.375rem; }
  /* Tame the tracked mono subtitle so it wraps inside narrow viewports. */
  .hero__subtitle { letter-spacing: 0.16em; }
}