/* About: the same cold wall, a name, a few facts, and the five projects as a plain index. */
html[data-page=about]{--w-bg:#ffffff}
.ab{padding:clamp(112px,20svh,200px) var(--gut) clamp(64px,12svh,130px)}
.ab__intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);align-items:end}
.ab__img{grid-column:1/5;margin:0}
.ab__img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease)}
.ab__img:hover img{filter:none}
.ab__txt{grid-column:6/-1}
.ab__name{font-size:clamp(28px,3vw,52px);font-weight:400;line-height:1;letter-spacing:-.032em;margin:0}
.ab__lead{text-wrap:balance;margin-top:.5em;color:var(--w-ink2);font-size:clamp(28px,3vw,52px);font-weight:400;line-height:1.08;letter-spacing:-.032em;max-width:14em}
.ab__txt p:not(.ab__lead):not(.ab__reach){margin-top:clamp(24px,4svh,44px);max-width:36em;color:var(--w-ink2);font-size:clamp(16px,1.2vw,20px);line-height:1.45;letter-spacing:-.008em}
.ab__reach{margin-top:clamp(24px,4svh,44px);display:flex;flex-wrap:wrap;gap:8px clamp(18px,2.4vw,36px);font-size:clamp(16px,1.2vw,20px)}
.ab__reach a{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}
/* A 44px target for a finger, drawn by nothing: the line and the type stay where they are. */
@media (pointer:coarse){.ab__reach a{position:relative}.ab__reach a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;translate:0 -50%}}
.cvs{padding:0 var(--gut) clamp(64px,12svh,130px)}
.cvg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(16px,2vw,32px);border-top:1px solid var(--w-line);padding:clamp(16px,2svh,22px) 0 clamp(36px,6svh,64px)}
.cvg h2{grid-column:1/5;font-size:var(--cap);font-weight:400;letter-spacing:-.005em;line-height:1.3;color:var(--w-ink2)}
.cvg dl{grid-column:6/-1;display:grid;gap:10px}
/* The first column keeps the width it always had, so every row lines up in every group; the year takes what it needs (Expected 2030 is wider than 7rem at 18px). */
.cvg dl>div{--g:clamp(12px,2vw,28px);display:grid;grid-template-columns:calc((100% - 7rem - 2*var(--g))*.4) minmax(0,1fr) max-content;gap:0 var(--g);align-items:baseline;font-size:var(--cap)}
.cvg dd{margin:0;color:var(--w-ink2)}
.cvg dd.cvg__y{text-align:right;white-space:nowrap}
.bands{display:block;padding:0 var(--gut) clamp(40px,8svh,84px)}
.band{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid var(--w-line);padding:clamp(14px,2.2svh,22px) 0;transition:opacity .3s}
.band span{font-size:clamp(22px,2.2vw,38px);line-height:1.1;letter-spacing:-.026em;white-space:nowrap}
.band i{font-style:normal;color:var(--w-ink2);font-size:var(--cap);white-space:nowrap}
.band:last-child{border-bottom:1px solid var(--w-line)}
@media (hover:hover){.bands:hover .band{opacity:.4}.bands .band:hover{opacity:1}}
@media (max-width:760px){
  .ab__img{grid-column:1/8;margin-bottom:28px}
  .ab__txt{grid-column:1/-1}
  .cvg{display:block}
  .cvg dl{margin-top:14px}
  .cvg dl>div{grid-template-columns:minmax(0,1fr) auto}
  .cvg dd{grid-column:1/-1}
  .cvg dd.cvg__y{grid-column:2;grid-row:1}
}