/* ==========================================================================
   SECTION-RAIL PAGES  (Experience, Service)
   Section titles in a left rail with an orange rule; content on the right.
   Tokens follow the site's own light/dark mechanism (html[data-theme="dark"]).
   ========================================================================== */

:root {
  /* Cool neutral ramp, matching the site's blue-gray typography
     (--global-text-color #494e52, publications' #555 / #2c3e50) rather than
     the warm cream background — warm tan furniture read as a different theme. */
  --exp-card-bg: #ffffff;
  --exp-chip-bg: #f4f5f6;
  --exp-border: #e5e7e9;
  --exp-border-strong: #d2d6d9;
  --exp-faint: #7f868b;
  --exp-muted: #555555;
  --exp-heading: #2c3e50;
  --exp-accent-soft: #fbe7dc;
}

html[data-theme="dark"] {
  --exp-card-bg: #343434;
  --exp-chip-bg: #3a3a3a;
  --exp-border: #484848;
  --exp-border-strong: #5a5a5a;
  --exp-faint: #a6a6a6;
  --exp-muted: #d8d8d8;
  --exp-heading: #ffffff;
  --exp-accent-soft: #4a3527;
}

/* Sidebar is off on these pages, so let the content use the full container. */
body.experience .archive,
body.service .archive,
body.awards .archive,
body.publications .archive {
  width: 100%;
  max-width: 100%;
  float: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
}

/* Title is set in the nav, not repeated here — drop the empty heading's space. */
body.experience .page__title:empty,
body.service .page__title:empty,
body.awards .page__title:empty,
body.publications .page__title:empty {
  display: none;
}

.exp {
  margin-top: 0.5em;
}

/* --- section: label rail + content ------------------------------------- */
.exp-sec {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  padding-bottom: 46px;
}

/* Long publication titles / links must not widen the content column and push
   the rail out of alignment with the other pages. */
.exp-sec > * {
  min-width: 0;
  overflow-wrap: break-word;
}

.exp-sec:last-child {
  padding-bottom: 8px;
}

.exp-label h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--exp-heading);
}

.exp-rule {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 10px;
  background: var(--global-link-color);
}

/* --- cards -------------------------------------------------------------- */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.exp-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--exp-card-bg);
  border: 1px solid var(--exp-border);
  border-radius: 6px;
}

.exp-card--now {
  border-color: var(--exp-border-strong);
  box-shadow: inset 3px 0 0 var(--global-link-color);
}

/* --- shared text bits --------------------------------------------------- */
.exp-role {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--global-text-color);
}

.exp-org {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--exp-muted);
}

.exp-dates {
  margin: 3px 0 0;
  font-size: 0.875rem;
  color: var(--exp-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.exp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 7px 0 0;
}

.exp-chip {
  padding: 3px 11px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--exp-muted);
  background: var(--exp-chip-bg);
  border: 1px solid var(--exp-border);
  border-radius: 100px;
}

.exp-chip--accent {
  color: var(--global-link-color);
  background: var(--exp-accent-soft);
  border-color: transparent;
}

/* --- education list ----------------------------------------------------- */
.exp-list {
  display: flex;
  flex-direction: column;
}

.exp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--exp-border);
}

.exp-row:first-child {
  padding-top: 0;
}

.exp-row:last-child {
  border-bottom: none;
}

/* --- skills ------------------------------------------------------------- */
.exp-skills {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exp-skill-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.exp-skill-label {
  min-width: 96px;
  font-size: 0.9rem;
  color: var(--exp-faint);
}

.exp-skill-line .exp-chips {
  margin: 0;
  flex: 1;
}

/* --- narrow screens ----------------------------------------------------- */
@media screen and (max-width: 900px) {
  .exp-sec {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
  }

  .exp-intro {
    margin-left: 174px; /* 150px rail + 24px gap */
  }
}

@media screen and (max-width: 768px) {
  .exp-sec {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 34px;
  }

  .exp-grid {
    grid-template-columns: 1fr;
  }

  .exp-intro {
    margin-left: 0;
  }
}

/* --- plain item lists (Service) ----------------------------------------- */
.exp-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exp-items > li {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 17px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--global-text-color);
}

.exp-items > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--exp-border-strong);
}

.exp-items .exp-when {
  color: var(--exp-faint);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.exp-items .exp-note {
  display: block;
  font-size: 1rem;
  color: var(--exp-muted);
}

/* Paper / work titles inside a note line — lifted out of the muted text with
   italics, full-strength color and an accent underline. */
.exp-paper {
  font-style: italic;
  color: var(--global-text-color);
  text-decoration: underline;
  text-decoration-color: var(--global-link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Venue lists read better as chips than as bullets. */
.exp-venues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exp-venues > li {
  padding: 4px 13px;
  font-size: 1rem;
  color: var(--global-text-color);
  background: var(--exp-chip-bg);
  border: 1px solid var(--exp-border);
  border-radius: 100px;
}

.exp-venues > li .exp-when {
  color: var(--exp-faint);
}

/* --- publications ------------------------------------------------------- */

/* Google Scholar line, lifted out of the old sidebar to the top of the page. */
.exp-intro {
  margin: 0 0 34px 232px; /* 200px rail + 32px gap — aligns with section content */
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--exp-muted);
}

/* Publication items sit in the right-hand column of each rail section. */
.exp-pubs .publication-item:last-child {
  margin-bottom: 0;
}