/* Route bundle: experience-base:start */
/* Single-line page headline replacing the boxed Selected-work banner.
   #main > out-ranks main.css's ID-weighted `#main > *` spacing. */
#main > .portfolio-headline {
  margin: 0;
  padding: 1.75rem 2rem 0;
}

.portfolio-headline h1 {
  margin: 0;
  color: var(--color-ink-900);
  font-size: 1.45rem;
  line-height: 1.2;
  text-align: left;
}
.portfolio-overview {
  padding: 2rem !important;
}

.credentials {
  padding: 4rem !important;
}

#selected-work {
  scroll-margin-top: 1.5rem;
}

.case-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.internship-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: auto auto;
  min-width: 0;
}

.internship-group__label {
  margin: 0 0 0.65rem;
  color: #20343d;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
}

.internship-group__label span {
  margin-right: 0.45rem;
  color: #11807d;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.internship-group__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.case-study {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.case-study--work {
  grid-column: 1 / -1;
  padding: 1.6rem 1.75rem;
}

.case-study__company {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  text-align: left;
}

.case-study--work > .case-study__company {
  margin-bottom: 1rem;
}

.company-logo {
  display: block;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 2.75rem;
  padding: 0.35rem;
  border-radius: 0.4rem;
  background: #fff;
  object-fit: contain;
}

.company-logo--dsta {
  width: 5.5rem;
  height: 2.75rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(22, 65, 148, 0.14);
  border-radius: 0.55rem;
  background: #f2f0e9;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0.3rem 0.8rem rgba(4, 28, 33, 0.1);
}

.company-logo--shopee {
  width: 5.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
}

.company-logo--league {
  width: 5.25rem;
  background: #102d34;
  padding: 0.55rem;
}

.company-logo--nuhs {
  width: 5rem;
  height: 2.9rem;
  padding: 0;
  background: transparent;
}

.case-study__company-label,
.case-study__company-role {
  display: block;
}

.case-study__company-label {
  color: var(--color-ink-900);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
}

.case-study__company-role {
  margin-top: 0.2rem;
  color: var(--color-ink-500);
  font-size: 0.84rem;
  line-height: 1.35;
}

.case-study__company-meta {
  display: block;
  margin-top: 0.25rem;
  /* Keep at least ink-500: lighter greys fall below WCAG AA 4.5:1 at this
     size on the card backgrounds. */
  color: var(--color-ink-500);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Slim replacement for a repeated company header — the second DSTA card
   defers to the dark hero card above it. */
.case-study__company-context {
  margin: 0;
  color: var(--color-ink-500);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-align: left;
  text-transform: uppercase;
}

.case-study header {
  text-align: left;
}

.case-study h2 {
  margin: 0 0 0.8rem;
  color: var(--color-ink-900);
  font-size: 1.55rem;
  line-height: 1.2;
  text-align: left;
}

.case-study__lede {
  margin: 0 0 1.4rem;
  color: var(--color-ink-600);
  line-height: 1.65;
  text-align: left;
}

.case-study__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 1.15rem;
  padding: 0;
  border: 0;
  list-style: none;
}

.case-study__highlights li {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-compact);
  background: var(--color-surface-subtle);
}

.case-study__highlights li:first-child {
  border-left: 1px solid var(--color-border-soft);
}

.case-study__highlights li > span,
.case-study__highlights strong {
  display: block;
}

.case-study__highlights li > span {
  margin-bottom: 0.25rem;
  color: var(--color-brand-600);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-study__highlights strong {
  color: var(--color-ink-700);
  font-size: 0.9rem;
  line-height: 1.4;
}

.case-study--internship {
  padding: 1.15rem;
  background: var(--color-surface-subtle);
  box-shadow: none;
}

.case-study--internship .case-study__company {
  min-height: 5.4rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.case-study--internship h2 {
  min-height: 2.8rem;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.case-study--internship .case-study__lede {
  margin-bottom: 0.85rem;
  font-size: 0.86rem;
  line-height: 1.5;
}

.case-study--internship .case-study__tags {
  gap: 0.35rem;
}

.case-study--internship .case-study__tags li {
  padding: 0.28rem 0.5rem;
  font-size: 0.7rem;
}

.case-study__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.case-study__tags li {
  margin: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #edf6f5;
  color: #285a59;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
}

/* #main > .earlier-work out-ranks main.css's ID-weighted `#main > *`
   (margin: 0), which silently flattens a bare class margin. Horizontal
   margins mirror .portfolio-overview's padding so the box edges align
   with the case-study grid above. */
#main > .earlier-work {
  margin: 0 2rem 4rem;
  border: 1px solid #dde5e7;
  border-radius: 0.65rem;
  background: #f8faf9;
}

.earlier-work summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  cursor: pointer;
  list-style: none;
}

.earlier-work summary::-webkit-details-marker { display: none; }

.earlier-work summary strong,
.earlier-work summary small {
  display: block;
}

.earlier-work summary strong {
  color: #20343d;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 1rem;
}

.earlier-work summary small {
  margin-top: 0.2rem;
  color: var(--color-ink-500);
}

.earlier-work[open] summary .icon { transform: rotate(45deg); }
.earlier-work summary .icon { transition: transform 0.2s ease; }

.earlier-work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0 1.5rem 1.5rem;
}

.earlier-work__grid article {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid #e1e7e9;
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 0.45rem 1.35rem rgba(3, 14, 30, 0.07);
  overflow: hidden;
  transition: border-color var(--motion-standard) ease,
    box-shadow var(--motion-standard) ease,
    transform var(--motion-standard) var(--ease-standard);
}

.earlier-work__grid article:hover,
.earlier-work__grid article:focus-within {
  border-color: rgba(18, 138, 134, 0.38);
  box-shadow: 0 0.9rem 2rem rgba(3, 14, 30, 0.12);
  transform: translateY(-3px);
}

.earlier-work__grid .earlier-project-card__image {
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #edf2f2;
  overflow: hidden;
}

.earlier-project-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-standard);
}

.earlier-project-card:hover .earlier-project-card__image img,
.earlier-project-card:focus-within .earlier-project-card__image img {
  transform: scale(1.025);
}

.earlier-project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.15rem;
}

.earlier-project-card__body > span {
  color: #11807d;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.earlier-work__grid h3 {
  margin: 0.35rem 0;
  color: #20343d !important;
  font-size: 1rem;
}

.earlier-work__grid p {
  flex: 1;
  margin-bottom: 0.85rem;
  color: #59696f;
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: left;
}

.earlier-work__grid a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: #0f7470;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
}

.earlier-project-card__body > a {
  align-self: flex-start;
  gap: 0.3rem;
  margin-top: auto;
  border-bottom: 0;
}

/* Route bundle: experience-base:end */