/* ==========================================================================
   ABOUT
   The intro, the horizontal life gallery, and the horizontal story timeline.
   Everything here sits on the tokens in global.css; the only new colour is a
   restrained terracotta, used for the selected story node and nowhere else.
   ========================================================================== */

:root {
  /* Borrowed from the Plus design system: periwinkle and orange as the brand
     pair, and its five pastels below, one per chapter. */
  --about-accent: #a3acf9;
  --about-accent-soft: rgba(163, 172, 249, 0.16);
  --about-orange: #f4975e;
}


/* ========================================
   INTRO
   Compact on purpose: the gallery should start before the first scroll ends.
======================================== */

.ab-intro {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
}

/* An h2, not an h1: the hero statement above is the page's title. Sized
   below it so the two do not compete. */
.ab-intro h2 {
  margin: 0 0 var(--space-md);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.ab-intro p {
  max-width: var(--reading-width);
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-secondary);
}

/* Specific enough to beat `.ab-intro p { margin: 0 }`, which otherwise
   flattens the gap above this line. */
.ab-intro .ab-route {
  margin-top: var(--space-lg);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}


/* ========================================
   SECTION HEADS
======================================== */

.ab-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);

  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}

.ab-head h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.ab-head p {
  margin: var(--space-xs) 0 0;
  font-size: 15px;
  color: var(--color-secondary);
}

.ab-eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
}


/* ========================================
   LIFE GALLERY
   One row, scrolled sideways. The track is the only thing that overflows;
   the page itself never scrolls horizontally.
======================================== */

.ab-gallery { padding-bottom: var(--space-2xl); }

.lg-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lg-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;

  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);

  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.lg-arrow:hover:not(:disabled) { background: var(--color-surface); }
.lg-arrow:disabled { opacity: 0.3; cursor: default; }
.lg-arrow svg { width: 16px; height: 16px; display: block; }

.lg-counter {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
  min-width: 4.5em;
  text-align: right;
}

/* The track. `scroll-padding` keeps a snapped item off the very edge, and the
   right-hand padding is what lets the next photo peek in. */
.lg-track {
  --row-h: 520px;                       /* the one place the row height lives */
  margin-top: var(--space-lg);

  display: flex;
  gap: 10px;                            /* tight, so the row reads as a feed */

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--page-padding);

  /* Bleed to the page edges so the row reads as continuing past the screen. */
  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding: 0 var(--page-padding) var(--space-sm);

  scrollbar-width: none;                /* the custom bar below replaces it */
  -ms-overflow-style: none;
  cursor: grab;
}

.lg-track::-webkit-scrollbar { display: none; }
.lg-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.lg-track.is-dragging .lg-shot { pointer-events: none; }

.lg-item {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
}

/* Photo-forward: no frame, no shadow, just the picture. The only chrome is
   a 2px radius, so a row of photographs reads as photographs. */
/* One height for the whole row; each photo's own ratio sets its width. */
.lg-shot {
  display: block;
  height: var(--row-h);
  aspect-ratio: var(--ar, 3 / 2);
  max-width: 86vw;
  padding: 0;
  border: 0;
  background: var(--color-surface);
  cursor: zoom-in;
  border-radius: 2px;
  overflow: hidden;
}

.lg-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}

.lg-shot:hover img { transform: scale(1.03); }

/* Captions sit quietly under the picture and only come forward on hover,
   so the row is a run of images rather than a run of labelled cards. */
.lg-caption {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-tertiary);
  transition: color 0.3s var(--ease);
}

.lg-item:hover .lg-caption { color: var(--color-secondary); }

.lg-location {
  display: block;
  color: var(--color-tertiary);
}

/* The scroll indicator: a hairline with a filled portion tracking position. */
.lg-bar {
  position: relative;
  height: 2px;
  margin-top: var(--space-md);
  background: var(--color-line);
  border-radius: 2px;
  overflow: hidden;
}

.lg-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  background: var(--color-text);
  border-radius: 2px;
  transform: translateX(calc(var(--progress, 0) * (100cqw - 100%)));
  transition: transform 0.12s linear;
}

.lg-bar { container-type: inline-size; }


/* ========================================
   ENLARGED VIEW
======================================== */

.lg-dialog {
  width: min(94vw, 1200px);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.lg-dialog::backdrop { background: rgba(28, 26, 23, 0.82); }

.lg-dialog-inner {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lg-dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  background: var(--color-surface);
}

.lg-dialog figcaption {
  padding: var(--space-md);
  font-size: 14px;
  color: var(--color-secondary);
}

.lg-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);

  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;

  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  cursor: pointer;
}


/* ========================================
   STORY TIMELINE
   One rail, five nodes, one reading panel. The rail scrolls sideways on
   narrow screens rather than stacking, so it stays a timeline.
======================================== */

.ab-story { padding-bottom: var(--space-2xl); }

.st-rail {
  margin-top: var(--space-2xl);

  display: flex;
  gap: 30px;
  align-items: stretch;

  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  margin-left: calc(-1 * var(--page-padding));
  margin-right: calc(-1 * var(--page-padding));
  padding: 0 var(--page-padding) var(--space-sm);
}

.st-rail::-webkit-scrollbar { display: none; }

/* Five cards, each in its own Plus pastel. No connector: the row of colours
   is what holds them together, the way the Plus cards do it. */
.st-tab {
  flex: 1 0 210px;
  position: relative;

  display: block;
  padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-md);
  border: 0;
  border-radius: 16px;
  background: var(--c-pale);
  text-align: left;
  cursor: pointer;
  color: var(--color-secondary);

  transition: background 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

/* Three dots in the gap: enough to read left-to-right as one sequence,
   without the ruled line that made it look like a chart axis. Dots behind
   the current chapter carry its colour, so the row shows progress. */
.st-tab:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  right: -21px;

  width: 19px;
  height: 5px;

  background-image: radial-gradient(circle, #cfcabf 2px, transparent 2.2px);
  background-size: 7px 5px;
  background-repeat: repeat-x;

  transition: background-image 0.3s var(--ease);
}

.st-tab.is-past::after,
.st-tab.is-selected::after {
  background-image: radial-gradient(circle, var(--c-ink) 1.8px, transparent 2px);
  opacity: 0.55;
}

.st-tab:nth-child(1) { --c: #d3eaff; --c-pale: #f2f8ff; --c-ink: #2f5f8c; }
.st-tab:nth-child(2) { --c: #ffe3a5; --c-pale: #fff9ec; --c-ink: #8a6413; }
.st-tab:nth-child(3) { --c: #ffdccb; --c-pale: #fff6f1; --c-ink: #9a5230; }
.st-tab:nth-child(4) { --c: #e1e9be; --c-pale: #f6f9ec; --c-ink: #5b6b2e; }
.st-tab:nth-child(5) { --c: #eaf0ff; --c-pale: #f6f8ff; --c-ink: #4a55a8; }

.st-tab:hover:not(.is-selected) {
  background: var(--c);
  transform: translateY(-2px);
}

.st-tab.is-past { background: var(--c-pale); }

.st-tab.is-selected {
  background: var(--c);
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(28, 26, 23, 0.10);
  z-index: 1;
}

/* Played once per pick: the card springs up, slightly past its resting size,
   so choosing a chapter feels like picking something up. */
.st-tab.is-picking {
  animation: st-pop 0.46s var(--ease);
}

@keyframes st-pop {
  0%   { transform: translateY(0) scale(0.97); }
  50%  { transform: translateY(-7px) scale(1.045); }
  100% { transform: translateY(-4px) scale(1); }
}

.st-panel.is-entering {
  animation: st-panel-in 0.44s var(--ease);
}

@keyframes st-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* The rounded-square badge Plus puts on every card. */
.st-tab-num {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;
  margin-bottom: var(--space-sm);

  border-radius: 10px;
  background: #fff;

  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);

  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.st-tab.is-past .st-tab-num {
  background: var(--c);
  color: var(--c-ink);
}

.st-tab.is-selected .st-tab-num {
  background: var(--c-ink);
  color: #fff;
}

.st-tab-title {
  display: block;
  font-size: 16px;
  line-height: 1.25;
  color: var(--color-text);
}

.st-tab-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
}

.st-tab.is-selected .st-tab-title { color: var(--c-ink); }

/* --- the reading panel --- */

.st-panels {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}

.st-panel h3 {
  margin: 0 0 var(--space-lg);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* A wide measure on purpose: these chapters are long, and a narrow column
   turned each one into a tall stack of short lines. Held at 54em rather than
   the full column because past roughly 110 characters the eye starts losing
   its place on the return sweep. */
.st-panel p {
  max-width: 54em;
  margin: 0 0 var(--space-lg);
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text);
}

.st-panel p:last-child { margin-bottom: 0; }

.st-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);

  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.st-nav button {
  padding: 10px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.st-nav button:hover:not(:disabled) { background: var(--color-surface); }
.st-nav button:disabled { opacity: 0.35; cursor: default; }

.st-position {
  margin-left: auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-secondary);
}


/* ========================================
   FOCUS
   Visible on keyboard, quiet on mouse.
======================================== */

.lg-arrow:focus-visible,
.lg-shot:focus-visible,
.st-tab:focus-visible,
.st-nav button:focus-visible,
.lg-close:focus-visible {
  outline: 2px solid var(--about-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ========================================
   RESPONSIVE
   The gallery and the rail stay horizontal at every width. That is the point
   of both, so neither collapses into a stack.
======================================== */

@media (max-width: 900px) {
  .ab-intro { padding-top: var(--space-xl); }
  .lg-track { --row-h: 320px; }
  .st-tab { flex: 0 0 168px; }
  .st-panel p { font-size: 16px; }
}

@media (max-width: 560px) {
  .lg-track { --row-h: 250px; }
  .st-tab { flex: 0 0 150px; }
  .st-nav { flex-wrap: wrap; }
  .st-position { margin-left: 0; width: 100%; }
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {
  .lg-track { scroll-behavior: auto; }
  .lg-shot img,
  .st-tab::after,
  .lg-bar::after { transition: none; }
  .lg-shot:hover img { transform: none; }
  .st-tab, .st-tab-num { transition: none; }
  .st-tab.is-picking, .st-panel.is-entering { animation: none; }
}


/* ==========================================================================
   COMPACT
   The page was 4.5 screens tall, most of it air. These rules are scoped to
   .about-page so the project pages keep the roomier rhythm they were tuned
   for. The aim is that the opening statement, the facts, the research
   paragraphs and the start of the gallery all arrive without hunting.
   ========================================================================== */

/* --- opening: title, description and facts in one screen --- */

/* The opening is one row: the statement on the left, the facts on the right,
   so the two do not stack into a screen and a half. */
.about-page .project-hero {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);

  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: var(--space-xl);
  align-items: start;
}

/* The About / Mindan Chen label row belongs to the page edges, not to the
   text column, or the right-hand label lands in the middle of the screen. */
.about-page .project-hero-meta { grid-column: 1 / -1; }

.about-page .project-hero-title,
.about-page .project-hero-description,
.about-page .ab-route { grid-column: 1; }

.about-page .project-hero .project-meta-list {
  grid-column: 2;
  grid-row: 2 / span 3;          /* alongside the title, not under the label */
  padding-top: 6px;              /* optically level with the title's cap height */
  margin: 0;
}

@media (max-width: 900px) {
  .about-page .project-hero { grid-template-columns: minmax(0, 1fr); }
  .about-page .project-hero .project-meta-list {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--space-lg);
  }
}

/* project.css leaves a 93px gap above this title, which is right on a case
   study opening and too much here. */
.about-page .project-hero-title {
  margin-top: var(--space-md);
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.1;
  max-width: 21ch;
}

.about-page .project-hero-description {
  margin-top: var(--space-sm);
  font-size: 19px;
  line-height: 1.55;
  max-width: 62ch;
}

.about-page .ab-route {
  margin-top: var(--space-sm);
}

.about-page .project-info-block {
  padding-top: 0;
  padding-bottom: var(--space-md);
}

/* Facts on the left, the research paragraphs on the right, and the
   paragraphs set in two columns so three of them do not become a tall
   ribbon down one side. */
/* The meta column moved up into the hero, so the paragraphs get the whole
   width here and set themselves in two columns. */
.about-page .project-info-grid {
  display: block;
}

.about-page .project-meta-list .meta-item + .meta-item {
  margin-top: var(--space-md);
}

.about-page .project-copy {
  columns: 2;
  column-gap: var(--space-xl);
  max-width: none;
}

.about-page .project-copy p {
  break-inside: avoid;
  margin: 0 0 var(--space-md);
  font-size: 15.5px;
  line-height: 1.62;
}

.about-page .project-copy p.text-large {
  font-size: 17px;
  line-height: 1.55;
}

/* --- gallery and story: tighter, and the pictures a little shorter --- */

.about-page .ab-gallery,
.about-page .ab-story { padding-bottom: var(--space-xl); }

.about-page .ab-head { padding-top: var(--space-md); }

.about-page .lg-track {
  --row-h: 380px;
  margin-top: var(--space-md);
}

.about-page .st-rail { margin-top: var(--space-lg); }

.about-page .st-panels {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
}

.about-page .st-panel h3 { margin-bottom: var(--space-md); }

.about-page .st-panel p {
  max-width: 66em;                 /* was 54em and still left of centre */
  font-size: 17px;
  line-height: 1.72;               /* long lines need the extra leading */
  margin-bottom: var(--space-md);
}

.about-page .st-nav {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
}

/* Two columns of prose only make sense when there is room for two. */
@media (max-width: 900px) {
  .about-page .project-copy { columns: 1; }
  .about-page .lg-track { --row-h: 300px; }
  .about-page .project-hero-title { max-width: none; }
}

@media (max-width: 560px) {
  .about-page .lg-track { --row-h: 240px; }
}