/* Desktop presentation only (index.html loads this with media="(min-width: 1025px)").
The mobile and tablet carousel is unchanged. A sticky introduction sits beside
the career chapters, which use the same paper colours as the mobile cards. */
/* Registered so the chapter colour can fade from one chapter to the next. */
@property --about-glow {
syntax: '';
inherits: true;
initial-value: #dce9dd;
}
@media (min-width: 1025px) {
#about { padding-top: 100px; padding-bottom: 85px; }
#about > .section-header {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
max-width: 1560px; margin: 0 auto 48px; gap: 16px;
}
#about > .section-header .section-label { flex-basis: 100%; margin: 0; }
#about > .section-header .section-title {
font-size: clamp(58px, 5.4vw, 84px); font-weight: 500; letter-spacing: -.065em; line-height: 1;
}
#about > div:not(.section-header) {
width: calc(100% - clamp(40px, 8vw, 120px)); max-width: 1440px; margin: 0 auto;
}
#about > div:not(.section-header) > svg { display: none; }
#about .about-grid { display: block; padding: 0; }
/* ---------- Two columns: introduction beside the chapters ---------- */
#about .roadmap-wrapper {
display: grid;
grid-template-columns: minmax(290px, .68fr) minmax(0, 1.8fr);
column-gap: clamp(36px, 4.4vw, 76px);
align-items: start;
margin: 0 0 64px; padding: 0;
}
#about .about-aside {
--about-glow: #dce9dd;
position: sticky; top: calc(var(--nav-height) + 36px);
display: flex; flex-direction: column; gap: 14px;
min-width: 0;
transition: --about-glow .9s ease;
}
#about .about-portrait {
position: relative; isolation: isolate; overflow: hidden;
height: clamp(280px, calc(100vh - 540px), 400px);
border: 1px solid #ffffff10; border-radius: 26px;
background: #0f1110;
}
/* Light behind the portrait takes the colour of the chapter being read. */
#about .about-portrait::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(70% 62% at 60% 34%, color-mix(in srgb, var(--about-glow) 30%, transparent), transparent 72%),
radial-gradient(55% 45% at 12% 100%, color-mix(in srgb, var(--about-glow) 12%, transparent), transparent 70%);
}
#about .about-portrait img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 16%;
-webkit-mask-image: linear-gradient(#000 60%, transparent 98%);
mask-image: linear-gradient(#000 60%, transparent 98%);
}
#about .about-portrait-caption {
position: absolute; left: 22px; right: 22px; bottom: 18px;
display: flex; flex-direction: column; gap: 4px;
}
#about .about-portrait-name {
color: #f5f0eb; font: 600 21px/1.15 var(--font-heading); letter-spacing: -.02em;
}
#about .about-portrait-meta {
color: #a3afa7; font: 500 10px/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
/* Voice introduction (overrides the old floating round button). */
#about #portraitAudioBtn.about-listen {
position: relative; inset: auto !important;
display: flex; align-items: center; gap: 14px;
width: 100% !important; height: 56px !important; padding: 0 20px 0 8px;
border: 1px solid #ffffff14; border-radius: 100px;
background: #111413; color: #e4eae6; box-shadow: none; backdrop-filter: none;
font: 500 13px/1.2 var(--font-body); text-align: left; cursor: pointer;
animation: none; transform: none;
transition: border-color .3s ease, background-color .3s ease, transform .4s var(--ease-out-expo);
}
#about #portraitAudioBtn.about-listen:hover {
border-color: color-mix(in srgb, var(--about-glow) 45%, transparent);
background: #151918; box-shadow: none; transform: translateY(-1px);
}
#about #portraitAudioBtn.about-listen.playing {
border-color: color-mix(in srgb, var(--about-glow) 60%, transparent); animation: none;
}
#about #portraitAudioBtn.about-listen:focus-visible { outline: 2px solid var(--about-glow); outline-offset: 3px; }
#about .about-listen-icon {
display: grid; place-items: center; flex: none;
width: 40px; height: 40px; border-radius: 50%;
background: var(--about-glow); color: #15201a;
}
#about .about-listen-icon svg { display: block; }
#about .about-listen-text { flex: 1; min-width: 0; }
#about .about-listen-wave { display: flex; align-items: center; gap: 3px; height: 18px; }
#about .about-listen-wave i {
display: block; width: 3px; height: 28%; border-radius: 3px; background: #5f6b64;
}
#about #portraitAudioBtn.playing .about-listen-wave i {
background: var(--about-glow); animation: aboutWave 1s ease-in-out infinite;
}
#about #portraitAudioBtn.playing .about-listen-wave i:nth-child(2) { animation-delay: -.25s; }
#about #portraitAudioBtn.playing .about-listen-wave i:nth-child(3) { animation-delay: -.55s; }
#about #portraitAudioBtn.playing .about-listen-wave i:nth-child(4) { animation-delay: -.1s; }
#about #portraitAudioBtn.playing .about-listen-wave i:nth-child(5) { animation-delay: -.4s; }
/* Chapter index, built by about-desktop.js from the cards. */
#about .about-index {
padding: 18px 20px 8px;
border: 1px solid #ffffff0e; border-radius: 22px; background: #0e100f;
}
#about .about-index[hidden] { display: none; }
#about .about-index-head {
display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
color: #78857d; font: 500 10px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
}
#about .about-index-count b { color: #f5f0eb; font-weight: 600; }
#about .about-index-bar { height: 2px; margin-bottom: 6px; overflow: hidden; border-radius: 2px; background: #ffffff12; }
#about .about-index-bar i {
display: block; height: 100%; background: var(--about-glow);
transform: scaleX(var(--about-progress, 0)); transform-origin: left;
}
#about .about-index ol { margin: 0; padding: 0; list-style: none; }
#about .about-index a {
display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px;
min-height: 36px; padding: 0 2px;
border-top: 1px solid #ffffff08;
color: #7c8781; font: 500 13px/1.3 var(--font-body); text-decoration: none;
transition: color .3s ease;
}
#about .about-index li:first-child a { border-top: 0; }
#about .about-index a:hover { color: #d7ded9; }
#about .about-index a:focus-visible { outline: 2px solid var(--paper, #dce9dd); outline-offset: 2px; border-radius: 6px; }
#about .about-index .ix-num { color: #59645e; font: 600 10px/1 var(--font-body); letter-spacing: .06em; transition: color .3s ease; }
#about .about-index .ix-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#about .about-index .ix-label::before {
content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: 1px;
border-radius: 50%; background: var(--paper, #dce9dd); opacity: .4;
transition: opacity .3s ease, box-shadow .3s ease;
}
#about .about-index .ix-meta { color: #59645e; font: 500 9px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
#about .about-index li.is-active a { color: #f5f0eb; }
#about .about-index li.is-active .ix-num { color: var(--paper, #dce9dd); }
#about .about-index li.is-active .ix-label::before {
opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper, #dce9dd) 18%, transparent);
}
/* ---------- Chapters ---------- */
#about #roadmapContainer { min-width: 0; min-height: 0 !important; height: auto !important; }
#about #roadmapContainer > svg,
#about #roadmapContainer > img,
#about #roadmapContainer > canvas,
#about .roadmap-milestones,
#about .roadmap-card-connector,
#about .roadmap-expand-btn,
#about .roadmap-dots { display: none !important; }
#about #roadmapCards {
position: relative; inset: auto; z-index: auto;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
width: 100%; height: auto; overflow: visible;
opacity: 1 !important; transform: none !important; pointer-events: auto;
counter-reset: chapter;
}
#about #rc1 { --chapter-paper: #dce9dd; --chapter-accent: #285a40; }
#about #rc2 { --chapter-paper: #f0e4ce; --chapter-accent: #755526; }
#about #rc3 { --chapter-paper: #dce7ee; --chapter-accent: #385d76; }
#about #rcProof { --chapter-paper: #e8def1; --chapter-accent: #665080; }
#about #rc4 { --chapter-paper: #efdcd1; --chapter-accent: #81513c; }
#about #rc5 { --chapter-paper: #dce5e9; --chapter-accent: #385d68; }
#about #rc6 { --chapter-paper: #e9e4d7; --chapter-accent: #645a3c; }
#about #roadmapCards .roadmap-card {
--chapter-ink: #1d2823;
--chapter-muted: #4a5850;
--accent: var(--chapter-accent);
counter-increment: chapter;
position: relative !important; inset: auto !important; isolation: isolate; overflow: hidden;
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
grid-template-rows: auto auto auto auto 1fr;
grid-template-areas:
"badge count"
"year ."
"title text"
"title links"
"title tags";
column-gap: clamp(28px, 3.4vw, 56px);
width: auto !important; min-width: 0; min-height: 0;
padding: clamp(28px, 2.6vw, 40px) clamp(28px, 2.9vw, 44px) !important;
border: 0; border-radius: 28px;
/* Fine grain gives the colour a printed-paper feel. */
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
var(--chapter-paper);
color: var(--chapter-ink);
box-shadow: none; backdrop-filter: none;
opacity: 1; transform: none;
scroll-margin-top: calc(var(--nav-height) + 40px);
transition: transform .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo),
opacity .9s var(--ease-out-expo), translate .9s var(--ease-out-expo);
}
#about #roadmapCards .roadmap-card:hover {
border: 0; transform: translateY(-4px);
box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .75);
}
#about #roadmapCards .roadmap-card:focus-visible { outline: 2px solid var(--chapter-paper); outline-offset: 5px; }
#about #roadmapCards .roadmap-card:focus:not(:focus-visible) { outline: none; }
/* Soft light that follows the pointer (position set by about-desktop.js). */
#about #roadmapCards .roadmap-card::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(460px circle at var(--mx, 80%) var(--my, 0%), rgba(255, 255, 255, .5), transparent 62%);
opacity: 0; transition: opacity .5s ease;
}
#about #roadmapCards .roadmap-card:hover::after { opacity: 1; }
#about #roadmapCards .roadmap-card::before {
content: counter(chapter, decimal-leading-zero) " / 07";
position: static; grid-area: count; justify-self: end; align-self: start;
color: var(--chapter-muted); -webkit-text-stroke: 0;
font: 500 11px/1.4 var(--font-body); letter-spacing: .1em;
}
/* Reveal as each chapter scrolls into view (class added by about-desktop.js). */
#about #roadmapCards.about-reveal .roadmap-card:not(.is-in) { opacity: 0; translate: 0 48px; }
#about #roadmapCards.about-reveal #rc6 { transition-delay: 0s, 0s, .08s, .08s; }
#about #roadmapCards .roadmap-card-badge {
grid-area: badge; display: inline-flex; align-items: center; gap: 9px; align-self: start;
margin: 0 0 6px; padding: 0; background: none; border: 0;
color: var(--chapter-accent); font: 700 10.5px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
#about #roadmapCards .roadmap-card-badge::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
#about .roadmap-card-badge-icon { display: none; }
/* The current role is live. */
#about #roadmapCards #rc1 .roadmap-card-badge::before { animation: aboutLive 2.4s ease-out infinite; }
#about #roadmapCards .roadmap-card-year {
grid-area: year; display: block; margin: 0 0 clamp(26px, 3vw, 44px);
color: var(--chapter-muted); font: 500 11px/1.5 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
}
#about #roadmapCards .roadmap-card h4 {
grid-area: title; align-self: start;
display: flex; flex-direction: column; gap: 12px; margin: 0;
color: var(--chapter-ink); font-family: var(--font-heading);
font-size: clamp(30px, 2.7vw, 42px) !important; font-weight: 600; line-height: 1.06; letter-spacing: -.04em;
text-wrap: balance;
}
#about #roadmapCards .roadmap-organisation { order: 0; }
#about #roadmapCards .roadmap-role {
order: 1; color: var(--chapter-accent); font: 500 15px/1.4 var(--font-body); letter-spacing: 0;
}
#about #roadmapCards .roadmap-role-join { display: none; }
#about #roadmapCards .roadmap-card > p {
grid-area: text; max-width: 60ch; margin: 4px 0 0;
}
#about #roadmapCards .roadmap-card p {
color: var(--chapter-muted); font-size: 15px !important; line-height: 1.7;
}
#about #roadmapCards .roadmap-project-links {
grid-area: links; display: flex; flex-wrap: wrap; gap: 10px;
margin: 26px 0 0; padding: 0; border: 0;
}
#about #roadmapCards .roadmap-project-link {
display: inline-flex; align-items: center; gap: 14px;
min-height: 46px; padding: 0 18px 0 20px;
border: 1px solid var(--chapter-ink); border-radius: 100px;
background: var(--chapter-ink); color: var(--chapter-paper);
font: 500 13px/1 var(--font-body); text-decoration: none;
transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
#about #roadmapCards .roadmap-project-link:hover { background: var(--chapter-accent); border-color: var(--chapter-accent); color: var(--chapter-paper); }
#about #roadmapCards .roadmap-project-link + .roadmap-project-link {
background: transparent; color: var(--chapter-ink);
border-color: color-mix(in srgb, var(--chapter-ink) 32%, transparent);
}
#about #roadmapCards .roadmap-project-link + .roadmap-project-link:hover {
background: var(--chapter-ink); border-color: var(--chapter-ink); color: var(--chapter-paper);
}
#about #roadmapCards .roadmap-project-link:focus-visible { outline: 2px solid var(--chapter-ink); outline-offset: 3px; }
#about #roadmapCards .roadmap-card-tags {
grid-area: tags; align-self: end; display: flex; flex-wrap: wrap; gap: 6px !important;
margin: 28px 0 0; padding: 0;
}
#about #roadmapCards .roadmap-tag {
padding: 6px 11px !important;
border: 1px solid color-mix(in srgb, var(--chapter-ink) 18%, transparent); border-radius: 100px;
background: transparent; color: var(--chapter-accent);
font-size: 10px !important; font-weight: 600; line-height: 1.2; letter-spacing: .08em;
}
/* Chapters with a Works list keep it in an inset panel on the right. */
#about #roadmapCards .roadmap-card:has(.roadmap-card-expandable) {
grid-template-rows: auto auto auto auto auto 1fr;
grid-template-areas:
"badge count"
"year works"
"title works"
"text works"
"links works"
"tags works";
}
#about #roadmapCards .roadmap-card:has(.roadmap-card-expandable) > p { margin-top: 22px; }
#about #roadmapCards .roadmap-card-expandable {
grid-area: works; display: block; align-self: stretch;
margin-top: 4px; opacity: 1; grid-template-rows: 1fr;
}
#about #roadmapCards .roadmap-card-expandable-inner { height: 100%; overflow: visible; }
#about #roadmapCards .roadmap-card-details {
height: 100%; margin: 0; padding: 26px 28px 22px;
border: 1px solid color-mix(in srgb, var(--chapter-ink) 9%, transparent); border-radius: 20px;
background: rgba(255, 255, 255, .4);
}
#about #roadmapCards .roadmap-card-details h5 {
margin: 0 0 10px; color: var(--chapter-accent);
font: 700 10.5px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
#about #roadmapCards .roadmap-card-details ul { margin: 0; }
#about #roadmapCards .roadmap-card-details li {
margin: 0; padding: 13px 0 13px 22px;
border-top: 1px solid color-mix(in srgb, var(--chapter-ink) 10%, transparent);
color: var(--chapter-ink); font-size: 14px; line-height: 1.55;
}
#about #roadmapCards .roadmap-card-details li:first-child { border-top: 0; }
#about #roadmapCards .roadmap-card-details li::before {
content: ""; position: absolute; left: 0; top: calc(13px + .74em);
width: 9px; height: 1.5px; background: var(--chapter-accent);
}
#about #roadmapCards .roadmap-card-details a { color: var(--chapter-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
/* Current role leads with a larger title. */
#about #roadmapCards #rc1 { padding: clamp(32px, 3.2vw, 50px) clamp(32px, 3.2vw, 50px) !important; }
#about #roadmapCards #rc1 h4 { font-size: clamp(42px, 4vw, 62px) !important; font-weight: 500; line-height: 1; letter-spacing: -.05em; }
#about #roadmapCards #rc1 .roadmap-role { font-size: 16px; }
#about #roadmapCards #rc3 h4 { font-size: clamp(24px, 2vw, 31px) !important; line-height: 1.18; letter-spacing: -.03em; }
/* Education shares one row. */
#about #roadmapCards #rc5,
#about #roadmapCards #rc6 {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"badge count"
"year year"
"title title"
"text text"
"tags tags";
}
#about #roadmapCards #rc5 { grid-column: 1; }
#about #roadmapCards #rc6 { grid-column: 2; }
#about #roadmapCards #rc5 .roadmap-card-year,
#about #roadmapCards #rc6 .roadmap-card-year { margin-bottom: 26px; }
#about #roadmapCards #rc5 h4,
#about #roadmapCards #rc6 h4 { font-size: clamp(24px, 2vw, 30px) !important; }
#about #roadmapCards #rc5 > p,
#about #roadmapCards #rc6 > p { margin-top: 14px; }
#about .about-grid > .about-card {
margin-top: 20px; padding: 36px 0; border: 0; border-top: 1px solid #ffffff18; border-radius: 0;
background: transparent; box-shadow: none; transform: none !important;
}
#about .tools-head { margin-bottom: 24px; }
}
/* Smaller desktops: each chapter stacks its own content. */
@media (min-width: 1025px) and (max-width: 1240px) {
#about .roadmap-wrapper { grid-template-columns: 280px minmax(0, 1fr); }
#about #roadmapCards .roadmap-card,
#about #roadmapCards .roadmap-card:has(.roadmap-card-expandable) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: none;
grid-template-areas:
"badge count"
"year year"
"title title"
"text text"
"works works"
"links links"
"tags tags";
}
#about #roadmapCards #rc5,
#about #roadmapCards #rc6 { grid-column: 1 / -1; }
#about #roadmapCards .roadmap-card > p { margin-top: 18px; }
#about #roadmapCards .roadmap-card-expandable { margin-top: 24px; }
#about .about-index a { grid-template-columns: 24px minmax(0, 1fr); }
#about .about-index .ix-meta { display: none; }
}
/* Shorter screens: the portrait becomes a profile card (face beside the name),
so a wide, shallow crop never cuts the face off. */
@media (min-width: 1025px) and (max-height: 839px) {
#about .about-portrait { height: 168px; }
#about .about-portrait::before {
background: radial-gradient(60% 90% at 22% 45%, color-mix(in srgb, var(--about-glow) 30%, transparent), transparent 75%);
}
#about .about-portrait img {
inset: 0 auto 0 0; width: 168px;
object-position: 50% 18%;
-webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
mask-image: linear-gradient(90deg, #000 72%, transparent);
}
#about .about-portrait-caption { top: 0; bottom: 0; left: 176px; right: 18px; justify-content: center; gap: 6px; }
}
@media (min-width: 1025px) and (max-height: 700px) {
#about .about-aside { gap: 10px; top: calc(var(--nav-height) + 20px); }
#about .about-portrait { height: 140px; }
#about .about-portrait img { width: 140px; }
#about .about-portrait-caption { left: 150px; }
#about .about-index { padding-top: 14px; }
#about .about-index a { min-height: 30px; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
#about .about-aside { transition: none; }
#about #roadmapCards .roadmap-card,
#about #roadmapCards .roadmap-card:hover { transform: none; transition: none; }
#about #roadmapCards #rc1 .roadmap-card-badge::before,
#about #portraitAudioBtn.playing .about-listen-wave i { animation: none; }
#about #portraitAudioBtn.playing .about-listen-wave i { height: 70%; }
}
@keyframes aboutWave {
0%, 100% { height: 25%; }
50% { height: 100%; }
}
@keyframes aboutLive {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
70%, 100% { box-shadow: 0 0 0 7px transparent; }
}