/* Home: Build log, as chapters (docs/chapters.md). Hub, Experience, Skills, About, Contact.
   The project chapters are in previews.css (loaded with this file).
   chapters.css supplies the full-screen sizing, centring, snapping and fades; this file supplies the
   inline padding and what is inside each chapter. At 1440x900 every chapter fits next to the fixed
   header (--header-h); only Experience, Skills and the project chapters may run taller on phones. */

main { padding-bottom: 0; }

/* Every chapter is a full-bleed palette field; the content is held to --max-w by padding,
   so no strip of another color shows at the sides without JS (docs/palettes.md 4.3). */
main > [data-chapter] {
  padding-inline: max(var(--margin), calc((100% - var(--max-w)) / 2 + var(--margin)));
  row-gap: var(--space-6);
}

/* ---------- Hub ---------- */
.hub { row-gap: var(--space-6); }
.hub-head { display: grid; gap: var(--space-4); }
.hub-name {
  font-size: clamp(2.75rem, 14.5vw, 9rem);
  font-weight: 800; letter-spacing: -0.05em; line-height: 0.9;
  text-wrap: balance;
  padding-bottom: 0.14em; /* room for the "y" descender above the tagline */
}
.hub-lead { font-size: var(--step-lead); line-height: 1.25; max-width: 34ch; letter-spacing: -0.015em; }

.hub-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--gutter);
  font-size: var(--step-small); line-height: 1.4;
}
.hub-facts li { display: flex; flex-direction: column; min-width: 0; }
.hub-facts li:nth-child(1), .hub-facts li:nth-child(3) { grid-column: 1 / -1; }
.hub-facts__label { color: var(--muted); }
.hub-facts b { font-weight: 600; overflow-wrap: break-word; }
.hub-facts a { color: var(--ink); }
.hub-facts li > span:last-child:not(.hub-facts__label) { color: var(--muted); }

.hub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.hub-cue { font-size: var(--step-small); font-weight: 600; color: var(--muted); text-decoration-color: var(--accent); }
.hub-cue:hover { color: var(--ink); }

/* ---------- Experience ---------- */
.xp { display: grid; gap: var(--space-6); }
.xp-group__title { font-size: var(--step-small); font-weight: 600; color: var(--muted); letter-spacing: 0; margin-bottom: var(--space-2); }

.xp-row { border-top: 1px solid var(--surface-2); }
.xp-row > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: center;
  padding: var(--space-4) var(--space-3);
}
.xp-row > summary::-webkit-details-marker { display: none; }
.xp-row > summary::marker { content: ""; }
.xp-row > summary:hover { background: var(--surface); }
.xp-row[open] > summary { background: var(--surface); }
.xp-row > summary:focus-visible { outline-offset: -3px; }

.xp-role { grid-column: 1; display: flex; flex-wrap: wrap; column-gap: var(--space-3); min-width: 0; }
.xp-role b { font-weight: 600; }
.xp-role span { color: var(--muted); }
.xp-dates { grid-column: 1; font-variant-numeric: tabular-nums; font-size: var(--step-small); color: var(--muted); }

/* The marker: a boxed plus that becomes a filled minus when the row is open. */
.xp-row > summary::after {
  content: "+"; grid-column: 2; grid-row: 1 / span 2; align-self: center;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 2px solid var(--accent); color: var(--accent);
  font-size: 1.25rem; font-weight: 600; line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.xp-row[open] > summary::after { content: "\2212"; background: var(--accent); color: var(--accent-ink); }

.details-body { background: var(--surface); }
.xp-row ul { margin: 0; padding: 0 var(--space-3) var(--space-4) calc(var(--space-3) + 1.25em); }
.xp-row li { max-width: 62ch; }
.xp-row li + li { margin-top: var(--space-2); }

/* ---------- Skills ---------- */
.skills-lead { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.015em; max-width: 36ch; }
.skills-cols { display: grid; gap: var(--space-6) var(--gutter); }
.skill-group h3 { font-size: var(--step-body); letter-spacing: -0.015em; margin-bottom: var(--space-3); }
.skill-group ul { list-style: none; margin: 0; padding: 0; }
.skill-group li { margin-bottom: var(--space-2); line-height: 1.35; font-size: 1rem; }
.skill-group li a { font-size: var(--step-small); font-weight: 600; color: var(--accent); white-space: nowrap; margin-left: 0.3em; }
.skill-group--pair { display: grid; gap: var(--space-6); align-content: start; }

/* ---------- About ---------- */
.about-grid { display: grid; gap: var(--space-5); align-items: start; }
.about-photo { width: 160px; aspect-ratio: 1; }
.about-body { max-width: 60ch; }
.education { margin-top: var(--space-5); display: grid; gap: var(--space-1); }
.education h3 { font-size: var(--step-body); margin-bottom: var(--space-2); }
.education b { font-weight: 600; }

/* ---------- Contact ---------- */
.contact-body { display: grid; gap: var(--space-5); }
.contact-email { font-size: clamp(1.375rem, 0.6rem + 4.5vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; overflow-wrap: anywhere; }
.contact-email a { text-decoration-color: var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.contact-text { max-width: 52ch; }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contact-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-weight: 600; }

/* ---------- 404 (one chapter) ---------- */
.notfound { row-gap: var(--space-5); }
.notfound__title { font-size: var(--step-display); letter-spacing: -0.05em; line-height: 0.9; }
.notfound__body { font-size: var(--step-lead); line-height: 1.25; max-width: 30ch; }

/* Skills: four short lists, the rest behind a smooth "More skills" row. */
.skills-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 44px; font-weight: 600; font-size: var(--step-small);
}
.skills-more > summary::-webkit-details-marker { display: none; }
.skills-more > summary::marker { content: ""; }
.skills-more > summary::before {
  content: "+"; display: grid; place-items: center; width: 32px; height: 32px;
  border: 2px solid var(--accent); color: var(--accent); font-size: 1.25rem; line-height: 1;
}
.skills-more[open] > summary::before { content: "\2212"; background: var(--accent); color: var(--accent-ink); }
.skills-more .details-body { padding-top: var(--space-4); }
.skills-more .skill-group h3 { color: var(--muted); font-size: var(--step-small); }

/* Phone: About must fit one screen, so the headshot shrinks and the copy tightens. */
@media (max-width: 767px) {
  .about { row-gap: var(--space-4); }
  .about-grid { gap: var(--space-3); }
  .about-photo { width: 112px; }
  .about-body { font-size: 1rem; line-height: 1.4; }
  .education { margin-top: var(--space-3); }
  .education h3 { margin-bottom: 0; }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .hub-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
  .hub-facts li:nth-child(n) { grid-column: auto; background: var(--surface); padding: var(--space-3) var(--space-4); }
  .skills-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .hub-name { font-size: clamp(5rem, 13.5vw, 14rem); white-space: nowrap; }

  /* Service and Tech and repair stack on the left, Trades fills the right. */
  .xp { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); row-gap: var(--space-5); align-items: start; }
  .xp-group:nth-child(1) { grid-column: 1; grid-row: 1; }
  .xp-group:nth-child(2) { grid-column: 1; grid-row: 2; }
  .xp-group:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }

  .skills-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Short chapters rest in the middle of the screen instead of hugging the top. */
  main > .experience[data-chapter-tall], main > .skills[data-chapter-tall] { justify-content: center; }

  .about-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .about-photo { grid-column: 1 / span 3; width: 100%; max-width: 280px; }
  .about-text { grid-column: 5 / -1; }
  .about-body { font-size: 1.25rem; line-height: 1.45; max-width: 52ch; letter-spacing: -0.015em; }

  /* Sentence and links share a first baseline; the buttons sit under the sentence. */
  .contact-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
  .contact-email { grid-column: 1 / -1; grid-row: 1; }
  .contact-text { grid-column: 1 / span 6; grid-row: 2; }
  .contact-actions { grid-column: 1 / span 6; grid-row: 3; }
  .contact-links { grid-column: 10 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .xp-row > summary::after { transition: none; }
}

/* Depth (tokens.css): the headshot casts a soft shadow. */
.about-photo { box-shadow: var(--shadow-photo); }