/* Home, below the hero. Zones `section-`, `parcours-`, `stat-`, `acc-`,
   `project-`, `pli-`, `exp-`, `edu-`. Loaded after hero.css. */

/* Page container: full width up to --page-max, proportional gutters, and the
   page clears the fixed header and its corners. */
.home-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  padding-block-start: calc(var(--header-h) + var(--header-corner) + var(--space-4));
}

/* Sections: one gap between them, one inside them. */
.section,
.stats-bar { margin-block-start: var(--rhythm-section); }

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Narrow screens: the aside drops under the title instead of squeezing the rule. */
.section-head { flex-wrap: wrap; row-gap: var(--space-2); }

/* Career path. Five stops driving one panel. */
.parcours-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-stop-min)), 1fr));
  gap: var(--space-5);
}

.parcours-stop {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: var(--touch-min);
  border-radius: var(--radius-sm);
}

.parcours-stop:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* The bar. Third and last of the gradient placements, on the active stop. */
.parcours-dot {
  height: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--career-bar);
  transition: background-color var(--motion-state);
}

.parcours-stop:hover .parcours-dot { background: var(--border-strong); }
.parcours-stop:active .parcours-dot { background: var(--border-control); }
.parcours-stop.is-active .parcours-dot { background: var(--career-bar-active); }

.parcours-stop-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.parcours-stop-role {
  font-size: var(--type-small);
  font-weight: 700;
  line-height: var(--leading-entry);
  color: var(--text-primary);
}

.parcours-stop.is-active .parcours-stop-role { color: var(--text-accent); }

.parcours-stop-studio {
  font-size: var(--type-label);
  font-style: italic;
  color: var(--text-meta);
}

.parcours-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.parcours-card:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.parcours-card-role {
  font-size: var(--type-entry);
  font-weight: 700;
  line-height: var(--leading-entry);
  text-transform: uppercase;
  color: var(--text-accent);
}

.parcours-card-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--type-small);
  font-weight: 700;
  font-style: italic;
  color: var(--text-primary);
}

.parcours-card-period::before {
  content: "\00B7";
  margin-inline: var(--space-2);
}

.parcours-card-highlight {
  max-width: var(--measure);
  color: var(--text-secondary);
}

/* Key figures. Anton, primary text, no card, no orange. */
.stats-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-stat-min)), 1fr));
  gap: var(--space-7) var(--space-6);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.stat-value {
  font-family: var(--type-family-display);
  font-size: var(--type-figure);
  font-weight: 400;
  line-height: var(--leading-display);
  color: var(--text-primary);
}

.stat-label {
  font-size: var(--type-small);
  font-weight: 700;
  line-height: var(--leading-entry);
  color: var(--text-primary);
}

.stat-note {
  font-size: var(--type-note);
  color: var(--text-meta);
}

/* Project groups: a heading and its roles, then the cards. No fold, no count. D-271. */
.acc-block {
  display: flex;
  flex-direction: column;
}

.side-projects-section { margin-block-start: var(--space-8); }

.acc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
}

.acc-title {
  font-size: var(--type-entry);
  font-weight: 700;
  line-height: var(--leading-entry);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
}

.acc-tags {
  font-size: var(--type-small);
  font-style: italic;
  color: var(--text-meta);
}


/* Project cards */
.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-card-min)), 1fr));
  gap: var(--space-7) var(--space-6);
  padding-block-start: var(--space-5);
}

.project-list-item { min-width: 0; }

/* Hidden until the Dungeon door has been seen. D-220. */
.project-list .project-list-item.is-locked { display: none; }

.pli-body,
.pli-side-body,
.pli-wip {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  border-radius: var(--thumb-radius);
}

.pli-body:focus-visible,
.pli-side-body:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.pli-body:active .pli-visual,
.pli-side-body:active .pli-visual { transform: translateY(1px); }

/* The picture leads the card; the heading stays first for a screen reader. */
.pli-visual {
  order: -1;
  position: relative;
  aspect-ratio: var(--pp-figure-ratio);
  background: var(--panel-bg);
  border-radius: var(--thumb-radius);
  overflow: hidden;
  transition: transform var(--motion-feedback);
}

.pli-img,
.pli-video,
.pli-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pli-img--bottom { object-position: center bottom; }

/* Trailer over the cover while the card is hovered or focused. */
.pli-video,
.pli-gif {
  opacity: 0;
  transition: opacity var(--motion-structural);
}

.project-list-item:hover .pli-video,
.project-list-item:focus-within .pli-video,
.project-list-item:hover .pli-gif,
.project-list-item:focus-within .pli-gif { opacity: 1; }

.pli-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* NEW sits on the thumbnail, so the title keeps its place. D-274. */
.pli-flag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  padding: 0 var(--space-3);
  background: var(--action-default);
  color: var(--text-on-action);
  border-radius: var(--radius-pill);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

/* "No page yet" follows the title on its line, wrapping under it when tight. */
.pli-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}

/* A card with no page says so in words, not with a badge. */
.pli-note {
  font-size: var(--type-note);
  font-style: italic;
  color: var(--text-meta);
}

.pli-name {
  font-size: var(--type-entry);
  font-weight: 700;
  line-height: var(--leading-entry);
  color: var(--text-accent);
  text-decoration: underline transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--motion-state);
}

.pli-body:hover .pli-name,
.pli-side-body:hover .pli-name { text-decoration-color: currentColor; }

.pli-role {
  font-size: var(--type-small);
  font-weight: 700;
  font-style: italic;
  color: var(--text-primary);
}

.pli-studio {
  font-size: var(--type-note);
  font-weight: 700;
  color: var(--text-secondary);
}

.pli-year { font-weight: 400; }

.pli-desc {
  max-width: var(--measure);
  font-size: var(--type-small);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.pli-tags {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--type-note);
  color: var(--text-meta);
}

/* Each tag holds together; the dot before it wraps with it. */
.pli-tag { white-space: nowrap; }

.pli-tag + .pli-tag::before {
  content: "\00B7";
  margin-inline: var(--space-2);
}

/* First studio project: full row, picture and text side by side. */
.project-list-item--lead { grid-column: 1 / -1; }

.project-list-item--lead .pli-body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) clamp(var(--space-5), 3vw, var(--space-8));
}

.project-list-item--lead .pli-visual {
  flex: 3 1 var(--lead-visual-basis);
  max-width: var(--lead-visual-max);
  border-radius: var(--media-radius);
}

.project-list-item--lead .pli-content {
  flex: 2 1 var(--lead-text-basis);
  gap: var(--space-3);
}

.project-list-item--lead .pli-name { font-size: var(--type-entry-lead); }
.project-list-item--lead .pli-desc { font-size: var(--type-body); }

/* Dungeon card: its door art is the one place the terminal voice shows here. */
.pli-visual--dungeon {
  display: grid;
  place-items: center;
  container-type: inline-size;
  background: var(--surface-ink);
}

.pli-dungeon-art {
  font-size: 1.7cqw;
  line-height: 1.15;
  color: var(--text-accent);
}

/* Experience */
.experience-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.exp-header-left,
.exp-sm-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.exp-logo {
  flex: 0 0 auto;
  width: var(--logo-lg);
  height: var(--logo-lg);
  object-fit: contain;
}

.exp-sm-logo {
  flex: 0 0 auto;
  width: var(--logo-md);
  height: var(--logo-md);
  object-fit: contain;
}

.exp-header-info {
  display: flex;
  flex-direction: column;
}

.exp-company,
.exp-sm-company {
  font-size: var(--type-entry);
  font-weight: 700;
  line-height: var(--leading-entry);
  text-transform: uppercase;
  color: var(--text-accent);
}

.exp-period,
.exp-sm-period {
  font-size: var(--type-small);
  font-weight: 700;
  font-style: italic;
  color: var(--text-primary);
}

.exp-progression {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  font-size: var(--type-small);
  color: var(--text-secondary);
}

.exp-prog-arrow { color: var(--text-meta); }

.exp-prog-role.current {
  font-weight: 700;
  color: var(--text-primary);
}

.exp-body {
  max-width: var(--measure-wide);
  color: var(--text-secondary);
}

.exp-body strong,
.exp-sm-body strong,
.exp-bullet-list strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* The long list on the left, the two short ones stacked on the right. */
.exp-bullets {
  display: grid;
  /* max() with 40% caps the grid at two columns however wide the panel gets. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-entry-min), 40%)), 1fr));
  gap: var(--space-6) clamp(var(--space-6), 5vw, var(--space-9));
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--border-default);
}

.exp-bullet-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.exp-bullet-group:first-child { grid-row: span 2; }

.exp-bullet-label {
  font-size: var(--type-entry);
  font-weight: 700;
  line-height: var(--leading-entry);
  color: var(--text-accent);
}

.exp-bullet-sublabel {
  font-size: var(--type-small);
  font-weight: 700;
  font-style: italic;
  color: var(--text-primary);
}

.exp-bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--measure);
  color: var(--text-secondary);
}

.exp-bullet-list li {
  position: relative;
  padding-left: var(--space-5);
}

.exp-bullet-list li::before {
  content: "";
  position: absolute;
  left: var(--space-1);
  top: 0.62em;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

.exp-projects-label {
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-meta);
}

.exp-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  font-size: var(--type-small);
  font-weight: 700;
  color: var(--text-primary);
}

.exp-project-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

a.exp-project-chip {
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--motion-state);
}

a.exp-project-chip:hover { text-decoration-color: var(--link-underline-hv); }
a.exp-project-chip:active { text-decoration-color: var(--action-default); }

a.exp-project-chip:focus-visible {
  outline: var(--focus-outline);
  outline-offset: calc(var(--focus-offset) * -1);
}

.exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-entry-min)), 1fr));
  gap: var(--space-5);
}

.experience-card-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.exp-sm-role {
  font-size: var(--type-small);
  font-weight: 700;
  font-style: italic;
  color: var(--text-primary);
}

.exp-sm-body {
  max-width: var(--measure);
  color: var(--text-secondary);
}

/* Unused today: nothing calls window.highlightExperience. Kept with its hook. */
.experience-highlight { animation: exp-highlight var(--dur-theatre) var(--ease-out); }

@keyframes exp-highlight {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* Education. A title of its own, inside the experience section. */
.edu-head { margin-block-start: var(--space-8); }

.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-entry-min)), 1fr));
  gap: var(--space-5);
}

.edu-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.edu-left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

/* Light plate: the Studio M mark is too dark for the ground. */
.edu-logo {
  flex: 0 0 auto;
  width: calc(var(--logo-md) + var(--space-4));
  height: calc(var(--logo-md) + var(--space-4));
  padding: var(--space-2);
  object-fit: contain;
  background: var(--text-primary);
  border-radius: var(--radius-sm);
}

.edu-school {
  font-size: var(--type-entry);
  font-weight: 700;
  line-height: var(--leading-entry);
  text-transform: uppercase;
  color: var(--text-accent);
}

.edu-degrees {
  font-size: var(--type-small);
  color: var(--text-secondary);
}

.edu-period {
  margin-block-end: var(--space-1);
  font-size: var(--type-small);
  font-weight: 700;
  font-style: italic;
  color: var(--text-primary);
}