/* ccshan · simple pages: secondary cases (Figma 06–10), About (11), Thinking (12), Contact (13).
 * Built only from ui.css components + tokens; generated markup comes from tools/build_pages.py.
 */

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-center{text-align:center}
.t-keep{word-break:keep-all}             /* CJK: break only at punctuation / spaces */
.gap-12{gap:var(--space-12)}
.gap-32{gap:var(--space-32)}
/* ui.css caps head-stack children at 100%; keep the 720 measure for hero / intro copy */
.head-stack > .l-measure{max-width:var(--layout-measure)}
/* Figma blank lines between paragraphs = one line of the running text */
:is(.t-lead,.t-body-l) > p{margin:0}
:is(.t-lead,.t-body-l) > p + p{margin-top:1lh}

/* ---------- Secondary case gallery: rows of 2 / 3 / 1 images with captions ---------- */
.case-gallery{display:flex;flex-direction:column;gap:var(--space-32);padding-block:var(--space-48)}
.case-gallery__row{display:grid;gap:var(--layout-gutter);align-items:start}
.case-gallery__row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-gallery__row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-figure{margin:0;display:flex;flex-direction:column;gap:var(--space-12)}
.case-figure img{width:100%;height:auto}
.case-figure figcaption{font:var(--type-body-large)}
@media (max-width:1199px){
  .case-gallery__row--2{grid-template-columns:1fr}
  .case-gallery__row--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .case-gallery{padding-top:var(--space-32)}
  .case-gallery__row--3{grid-template-columns:1fr}
}

/* ---------- About ---------- */
.profile-band{display:flex;align-items:center;gap:var(--layout-margin-desktop);padding-block:var(--space-48);
  background:#09090a;color:var(--color-text-on-inverse)}
.profile-band__photo{flex:0 0 264px;aspect-ratio:4/5;overflow:hidden}
.profile-band__photo img{width:100%;height:100%;object-fit:cover}
.profile-band__title{font:var(--type-h2);margin:0}
@media (max-width:1199px){
  .profile-band{flex-direction:column;align-items:stretch;gap:var(--space-24)}
  .profile-band__photo{flex-basis:auto}
}
@media (max-width:767px){
  .profile-band{padding-top:var(--space-32)}
  .profile-band__title{font:var(--type-h3)}
}

.stat-groups{display:flex;flex-direction:column;gap:var(--space-48);max-width:1000px;margin:var(--space-24) auto 0}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)}
.stat{display:flex;flex-direction:column;gap:var(--space-12)}
.stat p{margin:0}
.stat__value{font:var(--type-h2)}
.stat__label{font:var(--type-label-strong);color:var(--color-text-secondary)}
.stat__desc{font:var(--type-body);color:var(--color-text-secondary)}
@media (max-width:1199px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.stat-grid{grid-template-columns:1fr}.stat__value{font:var(--type-h3)}}

.skill-cols{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:129px;margin-top:var(--space-48)}
.skill-cols::before{content:"";position:absolute;inset:0 auto 0 50%;width:1px;background:var(--color-border-default)}
.skill-col{display:flex;flex-direction:column;gap:var(--space-16)}
.skill-col .t-h4{margin:0}
.skill-col__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-12);font:var(--type-body-large);color:var(--color-text-secondary)}
@media (max-width:767px){
  .skill-cols{grid-template-columns:1fr;row-gap:var(--space-32)}
  .skill-cols::before{display:none}
  .skill-col + .skill-col{padding-top:var(--space-32);border-top:1px solid var(--color-border-default)}
}

.job-list,.ai-list{display:flex;flex-direction:column;gap:var(--space-48);margin-top:var(--space-48)}
.ai-list{gap:var(--space-32);margin-top:var(--space-32)}
.job-card{gap:var(--space-12);padding:30px var(--space-32)}
.job-card .experience-card__title{font:var(--type-h3)}
.job-card .experience-card__desc{font:var(--type-body-large)}
.job-card .link{align-self:flex-start}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-12)}
.timeline__row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);padding-block:var(--space-12);border-top:1px solid var(--color-border-default)}
.timeline__org{display:flex;gap:var(--space-16);font:var(--type-body);color:var(--color-text-secondary)}
.timeline__org strong{color:var(--color-text-primary)}
.timeline__date{font:var(--type-caption);color:var(--color-text-secondary)}
.ai-card{display:flex;flex-direction:column;gap:var(--space-16);padding:var(--space-32);border-radius:var(--radius-md);background:var(--color-bg-subtle)}
.ai-card p{margin:0}
.ai-card__meta{font:var(--type-body);color:var(--color-text-secondary)}
@media (max-width:767px){
  .job-card .experience-card__title,.ai-card .experience-card__title{font:var(--type-h4)}
  .timeline__row{flex-direction:column;align-items:flex-start;gap:0}
}

/* ---------- Thinking: cards stack below desktop (Figma 12 Tablet / Mobile: cover on top, 672×416 / 327×202) ---------- */
.thought-list{padding-bottom:var(--space-32)}
@media (max-width:1199px){
  .article-card--stack{flex-direction:column;align-items:stretch;gap:var(--space-24)}
  .article-card--stack .card-cover{flex-basis:auto;height:auto;aspect-ratio:672/416}
  .article-card--stack .article-card__body{padding:0 var(--space-24) var(--space-24)}
}

/* ---------- Contact ---------- */
.contact-band__mail{font:var(--type-h3);color:var(--color-text-primary);text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.contact-band__mail:hover{color:var(--color-text-brand)}}
@media (max-width:767px){.contact-band__mail{font:var(--type-h4)}}