/* =====================================================================
   home.css: homepage only (hero, timeline, project cards, contact)
   ===================================================================== */

/* ---------- Hero: 50/50 split ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.hero-text {
  padding: var(--pad);
  display: flex; flex-direction: column; gap: clamp(32px, 5vh, 56px);
  position: relative;
  line-height: 1.5;
  container-type: inline-size;       /* the timeline adapts to this column's width */
}
.hero-text > * { max-width: 680px; }
.hero-text > .topbar { max-width: none; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-top: -6px; }
.topbar-links { display: flex; align-items: center; gap: 16px; }

.who h1, .who p.role { font-size: var(--fs); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
/* First pitch line = the lede (same size as case study ledes); the second is supporting copy */
.who .pitch { margin-top: 24px; max-width: 34ch; font-size: var(--fs-xl); line-height: 1.3; }
.who .pitch + .pitch { margin-top: 12px; max-width: 52ch; font-size: var(--fs); line-height: 1.6; color: var(--fg-2); }
.status { margin-top: 24px; display: flex; gap: 10px; align-items: baseline; }

/* ---------- Timeline ---------- */
.timeline-label { margin-bottom: 12px; }
.timeline { list-style: none; display: grid; row-gap: 4px; }
.timeline li {
  position: relative;
  display: grid; grid-template-columns: 13ch minmax(0, 1fr) max-content; column-gap: 24px;
}
/* Hover: a terminal-style ">" prompt slides in and the row lights up */
.timeline li::before {
  content: ">"; position: absolute; left: -1.6ch; color: var(--accent-text);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.timeline li:hover::before { opacity: 1; transform: none; }
.timeline .o, .timeline .y { transition: color .25s var(--ease); }
.timeline li:hover .o, .timeline li:hover .y { color: var(--accent-text); }
.timeline .y { white-space: nowrap; }
/* Narrow column (phones, tablets, small laptops): organisation + years, role underneath */
@container (max-width: 520px) {
  .timeline { row-gap: 10px; }
  .timeline li { grid-template-columns: minmax(0, 1fr) max-content; }
  .timeline .r { grid-column: 1 / -1; grid-row: 2; color: var(--muted); }
}

.hero-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }

/* ---------- Hero art: the "flow" pattern (WebGL, see dither.js) ---------- */
.hero-art { position: relative; background: var(--dither-back); overflow: hidden; }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Mini nav: slides in once the hero's own top bar scrolls away ---------- */
.bar.minibar { position: fixed; inset: 0 0 auto 0; transform: translateY(-100%); transition: transform .25s; }
.bar.minibar.show { transform: none; }

/* ---------- Sections ---------- */
section { padding: clamp(64px, 10vh, 120px) var(--gutter); border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
/* Section titles match the case studies: sentence case, --fs-xl, medium weight */
h2 { font-size: var(--fs-xl); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }

/* ---------- Project cards ---------- */
.projects { list-style: none; }
.project { border-top: 1px solid var(--line); }
.project:last-child { border-bottom: 1px solid var(--line); }
.card {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px);
  padding: 32px 0;
}
.p-head { display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
.p-title { font-size: var(--fs-xl); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
/* Blinking terminal cursor after the title on hover */
.p-title::after { content: "_"; opacity: 0; color: var(--accent-text); }
a.card:hover .p-title::after, a.card:focus-visible .p-title::after { animation: blink 1s steps(1) infinite; }
.p-desc { margin-top: 12px; max-width: 52ch; }
.meta { margin-top: 20px; display: grid; grid-template-columns: 9ch minmax(0, 1fr); row-gap: 4px; color: var(--fg-2); }
/* Skills: plain, static metadata (no border, no hover) so they never read as buttons.
   Each skill is its own span that never breaks at its hyphen ("ux-research" stays on one line). */
.skills { color: var(--muted); display: flex; flex-wrap: wrap; }   /* wraps between skills, never inside one */
.skills span { white-space: nowrap; }
.skills i { font-style: normal; opacity: .55; padding: 0 .6ch; }
.read { display: inline-block; margin-top: 20px; }
a.card:hover .read .lbl, a.card:focus-visible .read .lbl { background-size: 100% 1px; }
a.card:hover .arr-e, a.card:focus-visible .arr-e { transform: translateX(5px); }
/* Content still to write */
.tbd { color: var(--accent-text); border-bottom: 1px dashed currentColor; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
/* The closing statement: clearly bigger than the section title above it */
.contact .big { margin-top: 32px; font-size: clamp(36px, 6vw, 72px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.email-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.copy {
  font: inherit; font-size: var(--fs-s); color: inherit; background: none;
  border: 1px solid var(--line); padding: 6px 12px; cursor: pointer; min-width: 12ch;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.copy:hover { border-color: var(--fg); }
.copy:active { transform: translateY(1px); }
.copy.done { border-color: var(--accent-text); color: var(--accent-text); }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { height: auto; aspect-ratio: 16 / 10; }
  .hero-links { margin-top: 0; }
  .card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .contact { grid-template-columns: 1fr; }
  .contact-links { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .hero-art { aspect-ratio: 1 / 1; }
  .card { grid-template-columns: 1fr; }
  .hero-links .cta { flex: 1 1 100%; text-align: center; }
}
@media (pointer: coarse) {
  .hero-links a:not(.cta), .contact-links a, .topbar a { padding-block: 12px; }
  .timeline li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bar.minibar { transition: none; } }