/* About page. Builds on styles.css: same surfaces (0.19 page, 0.22 card, 0.24 raised),
   borders (0.30 / 0.34), text (0.94 / 0.85 / 0.76 / 0.62), lavender links and the
   per-project accents from projects.html. */

/* Header: shared PageHeader (.ph in styles.css). The portrait sits in its media slot. */
.ph-media img{object-position:50% 30%;}

/* The story: the paragraphs that follow the header intro */
.abt-story{margin-top:28px;}
.abt-story p{margin:0 0 18px;max-width:700px;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-2);}
.abt-story p:last-child{margin-bottom:0;}

/* Sections */
.abt-section{padding:96px 40px;border-top:1px solid var(--line-soft);}
.abt-section-head{margin-bottom:40px;}
.abt-h2{margin:0;font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);}
.abt-section-intro{margin:16px 0 0;max-width:56ch;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-2);}

/* How I work */
.abt-work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.abt-work-card{
  background:var(--surface);border-radius:var(--r-lg);padding:36px 36px 32px;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
}
.abt-work-card h3{margin:0 0 14px;font-size:var(--fs-h4);font-weight:var(--fw-bold);line-height:var(--lh-snug);color:var(--lavender);}
.abt-work-card p{margin:0 0 28px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2);}

/* Link hover: shared .link-wipe utility in styles.css. */
.abt-inline{font-weight:var(--fw-semibold);}
.abt-card-link{margin-top:auto;align-self:flex-start;}

/* Domains */
.abt-domains{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.abt-domains li{border-bottom:1px solid var(--line);}
.abt-domain{
  display:grid;grid-template-columns:minmax(0,1fr) 160px 140px;align-items:baseline;gap:24px;
  padding:26px 8px;color:var(--text);transition:background var(--dur) ease,padding var(--dur) ease;border-radius:var(--r-md);
}
.abt-domain-name{font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);}
.abt-domain-co{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--muted);}
.abt-domain-go{justify-self:end;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--fw-semibold);}
a.abt-domain:hover{background:var(--surface);padding-left:20px;padding-right:20px;color:var(--text);}
a.abt-domain:hover .abt-domain-name{color:var(--lavender);}
a.abt-domain:hover .abt-domain-go{background-size:100% 100%;color:var(--on-accent);}
a.abt-domain:focus-visible{outline:var(--focus-width) solid var(--lavender);outline-offset:var(--focus-offset);}
.abt-domain--static .abt-domain-name{color:var(--text-2);}

/* Outside of work */
.abt-outside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:center;}
.abt-outside-text .abt-h2{margin-bottom:24px;}
.abt-outside-text p{margin:0 0 18px;font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-2);}

.abt-project-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.abt-tile{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4.4;
  border:1px solid var(--line);background:var(--surface);
  transition:border-color var(--dur) ease,transform var(--dur) ease;
}
.abt-tile:nth-child(2){transform:translateY(32px);}
.abt-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) ease;}
.abt-tile:nth-child(1) img{object-position:50% 60%;}
.abt-tile:nth-child(3) img{object-position:62% 50%;}
.abt-tile::after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,oklch(0.14 0.02 300 / 0.92));pointer-events:none;}
.abt-tile-label{position:absolute;left:16px;right:16px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:4px;}
.abt-tile-role{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-2);}
.abt-tile-name{font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:var(--lh-snug);color:var(--accent);}
.abt-tile:hover{border-color:var(--accent);}
.abt-tile:hover img{transform:scale(1.04);}
.abt-tile:focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-offset);}

@media (prefers-reduced-motion: reduce){
  .abt-domain,.abt-tile,.abt-tile img{transition:none;}
}

@media (max-width: 900px){
  .abt-outside{grid-template-columns:1fr;gap:40px;}
}

@media (max-width: 900px){
  .ph-split{gap:40px;}
  .ph-media{flex-basis:100%;max-width:460px;}
  .abt-section{padding:64px 20px;}
  .abt-work-grid{gap:16px;}
  .abt-work-card{padding:28px 24px 24px;border-radius:var(--r-lg);}
  .abt-domain{grid-template-columns:1fr auto;gap:6px 16px;padding:20px 4px;}
  .abt-domain-name{grid-column:1 / -1;}
  a.abt-domain:hover{padding-left:12px;padding-right:12px;}
  .abt-project-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .abt-tile{border-radius:var(--r-md);}
  .abt-tile:nth-child(2){transform:none;}
  .abt-tile-label{left:10px;right:10px;bottom:10px;}
  .abt-tile-role{display:none;}
  .abt-tile-name{font-size:var(--fs-small);}
}

/* Candid team photo, How I work */
.abt-candid{margin:24px 0 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:21/9;background:var(--surface);}
.abt-candid img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 35%;}
@media (max-width: 900px){
  .abt-candid{aspect-ratio:4/3;border-radius:var(--r-lg);margin-top:16px;}
  .abt-candid img{object-position:56% 30%;}
}
@media (max-width: 640px){
  .abt-work-grid{grid-template-columns:1fr;}
}

/* colour-fallback:start (generated by build/casestudy/colours.py, don't edit) */
@supports not (color: oklch(0 0 0)) {
.abt-tile::after{background:linear-gradient(transparent,rgba(10,7,16,0.92));}
}
/* colour-fallback:end */