/* ==========================================================================
   components.css — Reusable UI components
   Each block here is a self-contained, named component (BEM-ish naming).
   To add a new role, copy the .cv-entry markup; to add a skill, copy .skill.
   No new CSS required for more content — that is the point of this layer.
   ========================================================================== */

/* ---- 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);
}

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

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

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

.nav__link {
  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-block;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-btn);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 32px;
  border: none;
  transition: background var(--transition);
}
.btn--primary {
  background: var(--c-signal);
  color: var(--c-white);
}
.btn--primary:hover { background: var(--c-signal-dark); }

/* ---- Hero text -------------------------------------------------------- */
.hero__title {
  font-weight: var(--fw-black);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-top: 24px;
}
.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: #46413A;
}

/* ---- Section headings ------------------------------------------------- */
.section__heading {
  font-weight: var(--fw-extrabold, 800);
  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: 34px 0 80px;
}

/* ---- About ------------------------------------------------------------ */
.portrait {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--c-portrait-edge);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  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); }

.pullquote {
  padding-left: 24px;
  border-left: 3px solid var(--c-signal);
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-quote);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

/* ---- Skills ----------------------------------------------------------- */
.skills__heading {
  font-weight: 800;
  font-size: var(--fs-h2-sm);
  line-height: 1.04;
  padding-right: var(--space-4);
}
.skills__heading em { font-style: italic; font-weight: var(--fw-bold); }

.skill {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-5);
  padding-block: 24px;
  border-top: 1px solid var(--c-rule-soft);
}
.skill:last-child { border-bottom: 1px solid var(--c-rule-soft); }

.skill__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-signal);
}
.skill__title {
  font-family: var(--font-sans);
  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);
}

/* ==========================================================================
   .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 column 1, --right in column 2.
   ========================================================================== */
.cv-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--timeline-gap);
  position: relative;
  margin-bottom: var(--space-9);
}
.cv-entry:last-child { margin-bottom: 0; }

.cv-entry--left  .cv-entry__body { grid-column: 1; }
.cv-entry--right .cv-entry__body { grid-column: 2; }

.cv-entry__node {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 11px;
  height: 11px;
  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);
}
.cv-entry__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-role);
  margin: var(--space-2) 0 2px;
}
.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-style: italic;
  font-size: var(--fs-meta);
  color: var(--c-signal);
  margin-top: 6px;
}
.cv-entry__list { margin-top: 20px; }
.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) 56px;
}
.contact__heading {
  font-weight: 800;
  font-size: var(--fs-h2-contact);
  line-height: 0.96;
  margin-bottom: 38px;
  color: var(--c-dark-text);
}

/* form fields */
.field {
  width: 100%;
  background: transparent;
  color: var(--c-dark-input);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  border: none;
  border-bottom: 1px solid var(--c-dark-field);
  padding: 12px 0;
  margin-bottom: var(--space-6);
}
.field--area {
  border: 1px solid var(--c-dark-field);
  padding: 14px;
  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;
}

/* 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 */
.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);
}
.social-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 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: 14px;
}
.social-link__icon { width: 18px; height: 18px; fill: var(--c-signal); }
.social-link__text {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: #D9D4CC;
}
.social-link__arrow {
  font-family: var(--font-mono);
  color: var(--c-dark-label);
}

/* footer */
.footer {
  margin-top: 72px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--c-dark-rule-2);
  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 overrides
   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 multi-column grids to a single column */
@media (max-width: 860px) {
  .grid-about,
  .grid-skills,
  .grid-contact { grid-template-columns: 1fr; }

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

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

  .cv-entry { grid-template-columns: 1fr; }
  .cv-entry--left  .cv-entry__body,
  .cv-entry--right .cv-entry__body {
    grid-column: 1;
    padding-left: 34px;
    padding-right: 0;
  }
  .cv-entry__node { left: 7px; }
}

/* Phone — drop brand + spacer so the menu fits on one line */
@media (max-width: 560px) {
  .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-3); }
  .nav__link { font-size: 11px; letter-spacing: 0.1em; }

  .hero { padding-top: 150px; }
}