@import url('project-01/design-system.css');

/* Portfolio content layout. Colors and components belong to design-system.css. */
body{background:var(--content-bg);color:var(--text);font-family:var(--font-body);font-weight:500}
.reference-hero{background:var(--color-bg);color:var(--color-text);color-scheme:dark}
.content,.project-list{width:calc(100% - 64px);max-width:1120px;margin-inline:auto}
.about{padding-block:var(--space-section);scroll-margin-top:104px}
.about-intro{width:min(100%,780px)}
.about h2,.works>h2,.work-group h2,.background-section h2,.case-more h2{
 font-family:var(--font-heading);font-style:normal;font-weight:600;
 font-size:var(--type-section);line-height:1.18;letter-spacing:-.025em;text-wrap:balance;
}
.about h2 span{color:var(--accent)}
.about-intro>p,.approach p,.project-info>p,.background-section p,.case p{
 font-family:var(--font-body);font-size:var(--type-body);font-weight:500;line-height:1.55;letter-spacing:-.012em;
}
.content-slot,.case-label,.resume-eyebrow,.resume-empty{color:var(--text-muted)}
.approach{margin-top:var(--space-detail)}
.approach h3,.case h3{
 font-family:var(--font-ui);font-weight:600;font-size:var(--text-caption);line-height:1.5;
 letter-spacing:.08em;color:var(--text);
}
.approach h4{font-family:var(--font-body);font-size:18px;font-weight:500;line-height:1.4;color:var(--text);letter-spacing:-.015em}
.approach-grid{gap:32px}
.works{padding-bottom:var(--space-section);scroll-margin-top:112px}
.works>h2{margin-bottom:48px}
.project-list{gap:var(--space-detail)}
.project{padding:0;gap:64px;border:0;border-radius:var(--radius-card);background:transparent}
.project:hover{background:transparent;border-color:transparent}
.project-media{height:420px;border-radius:var(--radius-media);transition:transform .25s ease,box-shadow .25s ease}
.project-info{align-self:center;padding:0}
.project h3,.case-text h2{font-family:var(--font-heading);font-style:normal;font-size:var(--type-title);font-weight:600;line-height:1.2;letter-spacing:-.025em}
.project-info>p{max-width:44ch}
.tone-blue,.case-media{background:var(--surface-alt);color:var(--text-muted)}
.tone-sand{background:var(--color-media);color:var(--color-text-muted)}
.tags{gap:8px;margin-bottom:20px}
.tags span,.project:nth-child(2) .tags span{font-family:var(--font-ui);font-weight:500;font-size:14px;line-height:1.25;padding:7px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-muted)}
.tags span:first-child,.project:nth-child(2) .tags span:first-child{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.background-sections{gap:64px;padding-bottom:var(--space-section)}
.background-section{border-top:1px solid var(--border);padding-top:32px;scroll-margin-top:112px}
.background-section p{margin-top:20px}
.case{padding-top:160px;padding-bottom:var(--space-section)}
.case .case-label{font-family:var(--font-ui);font-size:16px;font-weight:500;line-height:1.5;margin-bottom:32px}
.case-label b{color:var(--text);font-weight:500}
.case h1,.resume-page h1{font-family:var(--font-heading);font-style:normal;font-size:60px;font-weight:600;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.case-section{margin-top:96px;gap:64px}
.case-text h2{margin:24px 0 40px}
.case h3{margin-top:28px;margin-bottom:12px}
.section-label{font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1.25;padding:8px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)}
.case-media{border-radius:var(--radius-media)}
.case-wide{margin-top:48px}
.case-more{margin-top:96px}
.case-more h2{margin-bottom:40px}
.case-more-links a{padding:32px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);color:var(--text);font-family:var(--font-heading);font-size:28px;font-weight:600;line-height:1.3}
.case-more-links a:hover{background:var(--surface-alt)}
.resume-role{font-family:var(--font-body);font-weight:500;color:var(--text)}
.resume-eyebrow{font-family:var(--font-ui);font-weight:600;font-size:var(--text-caption);line-height:1.5;letter-spacing:.08em}
.resume-empty{border-color:var(--border);border-radius:var(--radius-card);background:var(--surface)}
.contact{height:auto;min-height:0;gap:80px;padding:var(--space-section) 32px 40px;border-top:1px solid var(--border);background:var(--surface-alt);color:var(--text);scroll-margin-top:112px}
.contact-main{max-width:1120px;margin-inline:auto}
.contact h2{font-family:var(--font-heading);font-style:normal;font-weight:600;font-size:72px;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.contact-slot{display:block;font-family:var(--font-body);font-size:18px;font-weight:500;line-height:1.55;color:var(--text-muted);background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin-top:28px}
.contact-bottom{align-items:center;gap:24px;width:100%;max-width:1120px;margin-inline:auto;color:var(--text-muted);font-family:var(--font-ui);font-size:16px;line-height:1.25}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px}
.reference-hero a:focus-visible,[data-header-theme=dark] .site-header a:focus-visible,[data-header-theme=dark] .site-header button:focus-visible{outline-color:var(--color-focus)}
[data-header-theme=light] .site-header .nav{background:var(--color-surface);border-color:var(--border);box-shadow:var(--shadow-nav);backdrop-filter:blur(12px);color:var(--text)}
[data-header-theme=light] .header-brand{color:var(--text)}
[data-header-theme=light] .header-avatar{background:var(--surface-alt);border-color:var(--border);box-shadow:var(--shadow-small)}
[data-header-theme=light] .site-header .nav-links a{color:var(--text)}
[data-header-theme=light] .site-header .nav-links a:hover{color:var(--color-text);background:var(--neutral-100)}
[data-header-theme=light] .site-header .nav.open .nav-links{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-nav)}
[data-header-theme=light] .site-header .menu-toggle span{background:var(--text)}
.page-loader{background:var(--content-bg);color:var(--text)}
.page-loader::before{background:radial-gradient(ellipse at 50% 100%,#d2e8de55,transparent 72%)}
@media(hover:hover) and (pointer:fine){.project:hover .project-media{transform:translateY(-3px);box-shadow:var(--shadow-small)}}
@media(max-width:1199px) and (min-width:810px){.content,.project-list{max-width:900px}.project{gap:40px}.project-media{height:360px}}
@media(max-width:809px){
 :root{--type-section:34px;--type-title:28px;--type-body:17px;--space-section:72px;--space-detail:48px}
 .content,.project-list{width:calc(100% - 48px)}
 .about{scroll-margin-top:96px}.approach-grid{gap:28px}
 .works>h2{margin-bottom:32px}.works{scroll-margin-top:100px}
 .project{padding:0;gap:28px;border-radius:var(--radius-card)}
 .project-media{height:290px}.project-info{padding:0}
 .project h3{font-size:26px}.tags{margin-bottom:16px}
 .background-sections{gap:48px}.background-section{padding-top:24px;scroll-margin-top:100px}
 .background-section p{margin-top:16px}
 .case{padding-top:120px}.case h1,.resume-page h1{font-size:40px}
 .case-section{margin-top:64px;gap:32px}.case-text h2{margin-bottom:32px}
 .case-wide{margin-top:32px}.case-more{margin-top:64px}
 .case-more-links a{padding:24px;font-size:26px}
 .contact{gap:48px;padding:72px 24px 24px;scroll-margin-top:100px}
 .contact h2{font-size:40px}.contact-slot{font-size:17px;margin-top:24px}
 .contact-bottom{font-size:14px;gap:16px}
}

@media(max-width:359px){:root{--type-section:32px;--type-title:26px}.case h1,.resume-page h1{font-size:36px}.contact h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.project-media{transition:none}.project:hover .project-media{transform:none}}

/* Case families: product cards in two columns, growth cases in broad rows. */
.work-group{scroll-margin-top:112px}
.work-group+.work-group{margin-top:96px}
.work-group-header{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:40px}
.work-count{flex:none;font-family:var(--font-ui);font-size:14px;font-weight:500;line-height:1.25;color:var(--text-muted)}
.product-grid.project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:56px;width:100%;max-width:none;margin:0}
.product-grid .project{display:flex;flex-direction:column;align-items:stretch;gap:24px;min-width:0;height:100%}
.product-grid .project-media{height:auto;aspect-ratio:16/10}
.product-grid .project-info{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;flex:1;width:100%}
.product-grid .project-info>p{margin-bottom:24px}
.product-grid .read-more{margin-top:auto}
.growth-list.project-list{display:flex;flex-direction:column;gap:56px;width:100%;max-width:none;margin:0}
.growth-list .project{grid-template-columns:1.17fr 1fr;gap:64px}
.growth-list .project-media{height:380px}
@media(min-width:810px) and (max-width:1199px){.growth-list .project{gap:40px}.growth-list .project-media{height:340px}}
@media(max-width:809px){
 .work-group{scroll-margin-top:100px}
 .work-group+.work-group{margin-top:64px}
 .work-group-header{gap:16px;margin-bottom:32px}
 .product-grid.project-list{grid-template-columns:minmax(0,1fr);gap:48px}
 .product-grid .project{gap:24px}
 .growth-list.project-list{gap:48px}
 .growth-list .project{grid-template-columns:minmax(0,1fr);gap:28px}
 .growth-list .project-media{height:auto;aspect-ratio:16/10}
}



/* Current desk and navigation surfaces consume the same semantic roles. */
body .white-desk-hero{background-color:var(--color-bg);background-blend-mode:luminosity;color:var(--color-text);--desk-surface:var(--color-surface);--desk-border:var(--color-border);--desk-shadow-large:#1f253014;--desk-shadow-small:#1f253008}
body .desk-intro h1{color:var(--color-text)}
body .about-intro>p,body .approach p,body .project-info>p,body .background-section p{color:var(--color-text-secondary)}
body .desk-role,body .vinyl-copy{color:var(--color-text-secondary)}
body .vinyl-copy .playlist-link{color:var(--color-link)}
body .vinyl-copy>p:last-child{color:var(--color-text-muted)}
body .terminal-bar{background:var(--color-surface-alt);border-color:var(--color-border)}
body .terminal-title{color:var(--color-text-muted)}
body .terminal-body,body .terminal-command{color:var(--color-text)}
body .terminal-answer{color:var(--color-text-secondary)}
body .terminal-prompt{color:var(--color-link)}
body .desk-terminal{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-object)}
body .vinyl-card{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-small)}
body .vinyl-record{filter:hue-rotate(118deg) saturate(1.05)}
body .badge-frame,body .badge-strap-extension{filter:grayscale(1)}
body .badge-portrait{background:var(--neutral-600);border-color:var(--neutral-500)}
body .badge-portrait-sprite{background-color:var(--neutral-600)}
body .badge-links a:hover{color:var(--neutral-200)}
body .traffic-green{color:var(--color-accent)}
body .site-header .nav{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-nav);color:var(--color-text);color-scheme:light}
body .site-header .header-brand,body .site-header .header-brand:hover,body .site-header .nav-links a{color:var(--color-text)}
body .site-header .header-avatar{background:var(--color-surface-alt);border-color:var(--color-border);box-shadow:var(--shadow-small)}
body .site-header .nav-links a:hover{background:var(--neutral-50);color:var(--color-text)}
body .site-header .nav.open .nav-links{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-nav)}
body .site-header .menu-toggle span{background:var(--color-text)}
body .white-desk-hero a:focus-visible,body .white-desk-hero button:focus-visible{outline-color:var(--color-focus)}
body .tone-blue,body .tone-sand,body .case-media{background:var(--color-surface-alt);color:var(--color-text-muted)}
body .finestro-preview{background:var(--color-accent-soft);color:var(--color-link)}
body .case-more-links .read-more{display:table;margin-top:20px}
@media(hover:hover) and (pointer:fine){body .desk-vinyl:hover .vinyl-card{border-color:var(--neutral-200);box-shadow:var(--shadow-card-hover)}}

/* Design system v2: two families. Mori carries headings and reading text, Instrument Sans
   carries interface text at 16 / 14 / 12 only. Desk objects keep their own scaling. */
body .header-brand{font-size:var(--text-ui)}
body .white-desk-hero .vinyl-copy h2{font-family:var(--font-display)}
body .vinyl-eyebrow{font-size:var(--text-caption);letter-spacing:.1em}
body .terminal-title{font-size:var(--text-caption)}

/* Skills and experience (home). Same two-column rhythm as case chapters: title left, content right. */
.profile-sections{display:grid;gap:var(--space-20);padding-bottom:var(--space-section)}
.profile-block{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;scroll-margin-top:112px}
.profile-block h2{font-family:var(--font-heading);font-weight:600;font-size:var(--type-section);line-height:1.18;letter-spacing:-.025em}
.profile-body{min-width:0}
.profile-label{font-family:var(--font-ui);font-size:var(--text-caption);font-weight:600;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:16px}
.skills-grid{display:grid;gap:40px}
.skill-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.skill-tags li{font-family:var(--font-ui);font-size:var(--text-label);font-weight:500;line-height:1.25;padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--color-text)}
.xp-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.xp-details{border:0;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card);transition:box-shadow var(--motion-base) var(--ease-ui)}
.xp-details:hover,.xp-details[open]{box-shadow:var(--shadow-card-hover)}
.xp-details summary{display:grid;grid-template-columns:130px minmax(0,1fr) 32px;align-items:center;gap:24px;min-height:72px;padding:18px 24px;cursor:pointer;list-style:none;border-radius:inherit}
.xp-details summary::-webkit-details-marker{display:none}
.xp-details summary:hover .xp-company{color:var(--neutral-600)}
.xp-details summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
.xp-years{font-family:var(--font-ui);font-size:var(--text-label);font-weight:500;line-height:1.5;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.xp-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0;font-family:var(--font-heading);font-weight:600;line-height:1.3}
.xp-company{font-size:24px;letter-spacing:-.02em;color:var(--color-text);transition:color var(--motion-fast) var(--ease-ui)}
.xp-role{font-size:17px;font-weight:400;color:var(--color-text-secondary)}
.xp-chevron{justify-self:end;width:32px;height:32px;border-radius:50%;background:var(--color-surface-alt);position:relative;transition:transform var(--motion-base) var(--ease-ui),background var(--motion-fast) var(--ease-ui)}
.xp-chevron::before{content:'';position:absolute;left:50%;top:45%;width:8px;height:8px;border-right:1.5px solid var(--color-text);border-bottom:1.5px solid var(--color-text);transform:translate(-50%,-50%) rotate(45deg)}
.xp-details[open] .xp-chevron{transform:rotate(180deg);background:var(--color-accent-soft)}
.xp-points{list-style:none;margin:0;padding:0 24px 24px calc(130px + 48px);display:grid;gap:10px}
.xp-points li{position:relative;padding-left:18px;font-size:16px;line-height:1.6;color:var(--color-text-secondary)}
.xp-points li::before{content:'';position:absolute;left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}
.xp-points b{font-weight:600;color:var(--color-text)}
@media(prefers-reduced-motion:reduce){.xp-chevron,.xp-details,.xp-company{transition:none}}
.profile-label--edu{margin-top:48px}
@media(max-width:1199px) and (min-width:810px){.profile-block{grid-template-columns:1fr;gap:32px}}
@media(max-width:809px){
 .profile-sections{gap:56px}
 .profile-block{grid-template-columns:1fr;gap:28px;scroll-margin-top:100px}
 .xp-details summary{grid-template-columns:minmax(0,1fr) 32px;gap:6px 16px;padding:18px 20px}
 .xp-years{grid-column:1;grid-row:1}.xp-title{grid-column:1;grid-row:2}.xp-chevron{grid-column:2;grid-row:1/3}
 .xp-points{padding:0 20px 22px}
 .xp-company{font-size:21px}.xp-role{font-size:16px}
 .profile-label--edu{margin-top:36px}
}

/* CV block: same two-column rhythm, no divider */
.cv-block{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;padding-bottom:var(--space-section);scroll-margin-top:112px}
.cv-block h2{font-family:var(--font-heading);font-weight:600;font-size:var(--type-section);line-height:1.18;letter-spacing:-.025em}
.cv-body{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-top:12px}
.cv-body p{font-family:var(--font-body);font-size:var(--type-body);line-height:1.55;color:var(--color-text-secondary)}
@media(max-width:1199px) and (min-width:810px){.cv-block{grid-template-columns:1fr;gap:24px}}
@media(max-width:809px){.cv-block{grid-template-columns:1fr;gap:20px;scroll-margin-top:100px}.cv-body{padding-top:0}}

/* Case cards: one clickable card (image, title, short description), no button */
.product-grid.project-list{row-gap:32px;column-gap:24px}
body .product-grid .project{gap:0;padding:12px;border:0;border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--shadow-card);transition:transform var(--motion-base) var(--ease-ui),box-shadow var(--motion-base) var(--ease-ui)}
body .product-grid .project-media{border-radius:16px;transform:none!important;box-shadow:none!important}
body .product-grid .project-info{padding:24px 16px 16px}
body .product-grid .project h3{font-size:26px}
body .product-grid .project-info>p{margin:8px 0 0;font-size:16px;line-height:1.55}
.project h3{transition:color var(--motion-fast) var(--ease-ui)}
@media(hover:hover) and (pointer:fine){
 body .product-grid .project:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
 body .product-grid .project:hover h3{color:var(--neutral-600)}
}
@media(max-width:809px){.product-grid.project-list{row-gap:20px}body .product-grid .project{padding:10px}body .product-grid .project-info{padding:20px 12px 12px}body .product-grid .project h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){body .product-grid .project{transition:none}body .product-grid .project:hover{transform:none}}

.cv-actions{display:flex;flex-wrap:wrap;gap:12px}
.cv-block{padding-bottom:var(--space-section)}
body .product-grid .tags{margin-bottom:14px}

/* About: two-column intro and card approach */
body .about-intro{width:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:start}
body .about-text{display:grid;gap:16px;padding-top:8px}
body .about-text p{margin:0;font-size:18px;line-height:1.6;color:var(--color-text-secondary)}
body .about-text .about-lead{font-size:22px;line-height:1.4;letter-spacing:-.015em;color:var(--color-text)}
body .approach{margin-top:56px}
body .approach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
body .approach-grid article{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--shadow-card)}
body .approach-grid article p.content-slot{color:var(--color-text-muted)}
@media(max-width:809px){body .about-intro{grid-template-columns:1fr;gap:20px}body .approach{margin-top:36px}body .approach-grid{grid-template-columns:1fr;gap:12px}body .approach-grid article{padding:22px}}

/* CV block: compact, centred, paper pattern as in the hero */
body .cv-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;width:100%;max-width:none;margin:0;padding:72px 24px;border-radius:0;background:#fafaf8 url('assets/white-desk/paper-daylight.webp') center/cover no-repeat;box-shadow:none}
body .cv-block h2{font-size:32px;line-height:1.2}
body .cv-body{align-items:center;gap:20px;padding-top:0}
body .cv-body p{max-width:460px;font-size:16px}
body .cv-actions{justify-content:center}
@media(max-width:809px){body .cv-block{width:100%;padding:48px 20px}body .cv-block h2{font-size:24px}}
body:has(.cv-block) main{padding-bottom:0}
body .cv-block{margin-top:var(--space-section)}
body .case-footer{margin-top:0}

/* Loader: dark navy gradient, same as the dark blocks in the cases */
html #page-loader.page-loader{background:radial-gradient(110% 120% at 88% 0%,#3b4fb8 0%,rgba(59,79,184,0) 52%),radial-gradient(90% 90% at 0% 100%,#1d2a6b 0%,rgba(29,42,107,0) 60%),#0f1428;color:#fff}
html #page-loader.page-loader::before{background:radial-gradient(ellipse 60% 70% at 12% 70%,#2f43a855 0%,transparent 75%),radial-gradient(ellipse 60% 70% at 90% 28%,#4a62d655 0%,transparent 78%);filter:blur(60px);opacity:.9}
html #page-loader.page-loader::after{background:radial-gradient(ellipse 55% 55% at 30% 15%,#6387ff2e 0%,transparent 80%),radial-gradient(ellipse 65% 55% at 66% 90%,#1d2a6b66 0%,transparent 80%);filter:blur(64px)}
html #page-loader.page-loader .loader-stage{background:#151c3d;box-shadow:0 20px 56px #05081c88,inset 0 1px 0 #ffffff1f}
html #page-loader.page-loader .loader-caption{color:#fff}
html #page-loader.page-loader .loader-preview-close{background:#ffffff14;border:1px solid #ffffff33;color:#fff}
html #page-loader.page-loader .loader-preview-close:hover{background:#ffffff26;border-color:#ffffff55;color:#fff}
#experience.profile-block{padding-bottom:var(--space-section)}

/* Experience: vertical layout with a timeline */
#experience.profile-block{grid-template-columns:1fr;gap:36px}
#experience .xp-list{position:relative;gap:16px;padding-left:36px}
#experience .xp-list::before{content:'';position:absolute;left:5px;top:44px;bottom:44px;width:2px;border-radius:2px;background:linear-gradient(var(--color-accent),var(--color-border) 40%,var(--color-border))}
#experience .xp-item{position:relative}
#experience .xp-item::before{content:'';position:absolute;left:-36px;top:30px;width:12px;height:12px;border-radius:50%;background:var(--color-surface);border:2px solid var(--color-border-strong);box-sizing:border-box}
#experience .xp-item:first-child::before{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 0 5px #6387ff26}
#experience .xp-details summary{grid-template-columns:150px minmax(0,1fr) 36px;min-height:88px;padding:22px 28px}
#experience .xp-years{justify-self:start;padding:5px 12px;border-radius:var(--radius-pill);background:var(--color-surface-alt);color:var(--color-text-secondary);font-weight:600}
#experience .xp-company{font-size:26px}
#experience .xp-points{padding:0 28px 28px calc(150px + 52px);gap:12px;max-width:860px}
#experience .xp-points li{font-size:17px}
@media(max-width:809px){
 #experience .xp-list{padding-left:28px}
 #experience .xp-list::before{left:3px;top:36px;bottom:36px}
 #experience .xp-item::before{left:-28px;top:26px;width:10px;height:10px}
 #experience .xp-details summary{grid-template-columns:minmax(0,1fr) 36px;min-height:0;padding:18px 20px}
 #experience .xp-company{font-size:22px}
 #experience .xp-points{padding:0 20px 22px}
}

/* Experience: "next challenge" node at the top of the timeline */
#experience .xp-item:first-child::before{background:var(--color-bg);border:2px dashed var(--color-accent);box-shadow:none}
#experience .xp-item:nth-child(2)::before{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 0 5px #6387ff26}
#experience .xp-list::before{top:36px;background:linear-gradient(var(--color-border-strong),var(--color-accent) 14%,var(--color-border) 46%,var(--color-border))}
#experience .xp-next-card{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:24px;min-height:88px;padding:22px 28px;border-radius:var(--radius-card);color:#fff;background:radial-gradient(110% 160% at 92% 0%,#3b4fb8 0%,rgba(59,79,184,0) 55%),radial-gradient(90% 120% at 0% 100%,#1d2a6b 0%,rgba(29,42,107,0) 60%),#0f1428;box-shadow:0 16px 40px #1d2a6b40}
#experience .xp-next-card .xp-years{background:#ffffff1f;color:#fff}
#experience .xp-next-card .xp-company{color:#fff}
#experience .xp-next-card .xp-role{color:#c3cbe0}
#experience .xp-next-card .ds-button{white-space:nowrap}
@media(max-width:809px){#experience .xp-next-card{grid-template-columns:1fr;gap:12px;padding:20px;justify-items:start}}

/* Experience: left date panel, pinned latest job */
#experience .xp-details{position:relative;overflow:hidden}
#experience .xp-details::before{content:'';position:absolute;left:0;top:0;bottom:0;width:172px;background:linear-gradient(180deg,var(--color-surface-alt),#f6f8fb);pointer-events:none}
#experience .xp-details summary,#experience .xp-points{position:relative}
#experience .xp-details summary{grid-template-columns:116px minmax(0,1fr) 36px;gap:28px;padding:20px 28px;min-height:96px}
#experience .xp-years{display:flex;flex-direction:column;align-items:flex-start;justify-self:start;gap:6px;padding:0;background:none;border-radius:0}
#experience .xp-years b{font-family:var(--font-heading);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums}
#experience .xp-years b:last-child{color:var(--color-text-muted)}
#experience .xp-years i{width:18px;height:2px;border-radius:2px;background:var(--color-accent)}
#experience .xp-points{padding:4px 28px 28px 172px}
#experience .xp-pinned[open] summary{cursor:default}
#experience .xp-pinned .xp-chevron{display:none}
#experience .xp-pinned summary{grid-template-columns:116px minmax(0,1fr)}
@media(max-width:809px){
 #experience .xp-details::before{width:100%;height:auto;bottom:auto;top:0;height:76px}
 #experience .xp-details summary{grid-template-columns:minmax(0,1fr) 36px;gap:6px 16px;padding:18px 20px;min-height:0}
 #experience .xp-years{flex-direction:row;align-items:center;gap:8px}
 #experience .xp-years b{font-size:18px}
 #experience .xp-pinned summary{grid-template-columns:minmax(0,1fr)}
 #experience .xp-points{padding:4px 20px 22px}
}
#experience .xp-details summary{gap:56px}
#experience .xp-points{padding-left:200px}
#experience .xp-next-card .xp-years{display:inline-flex;flex-direction:row;padding:5px 12px;border-radius:var(--radius-pill);background:#ffffff1f;justify-self:start}
#experience .xp-next-card .xp-years{font-size:14px;font-weight:600;color:#fff}
@media(max-width:809px){#experience .xp-details summary{gap:6px 16px}#experience .xp-points{padding-left:20px}}
@media(max-width:809px){#experience .xp-details::before{display:none}}

/* Experience: years back in chips, calmer spacing */
#experience .xp-details::before{display:none}
#experience .xp-years{display:inline-flex;flex-direction:row;align-items:center;gap:6px;justify-self:start;padding:5px 12px;border-radius:var(--radius-pill);background:var(--color-surface-alt)}
#experience .xp-years b,#experience .xp-years b:last-child{font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:0;line-height:1.5;color:var(--color-text-secondary)}
#experience .xp-years i{width:8px;height:1.5px;border-radius:2px;background:var(--color-text-muted)}
@media(min-width:810px){
 #experience .xp-details summary{grid-template-columns:150px minmax(0,1fr) 36px;gap:24px;padding:24px 28px;min-height:88px}
 #experience .xp-pinned summary{grid-template-columns:150px minmax(0,1fr)}
 #experience .xp-details[open] summary{padding-bottom:16px}
 #experience .xp-points{padding:0 28px 30px 202px;gap:14px}
}
@media(max-width:809px){
 #experience .xp-years{flex-direction:row;gap:6px}
 #experience .xp-details[open] summary{padding-bottom:12px}
 #experience .xp-points{padding:0 20px 22px;gap:12px}
}

/* Timeline: dots centred on each card's first line, clean line */
@media(min-width:810px){
 #experience .xp-list::before{top:48px;bottom:44px;left:5px;width:2px;transform:none}
 #experience .xp-item::before{top:38px;left:-36px;width:12px;height:12px}
 #experience .xp-item:first-child::before,#experience .xp-item:nth-child(2)::before{top:42px}
}
#experience .xp-item:first-child::before{background:var(--color-surface);border:2px solid var(--color-accent);box-shadow:none}

/* CV: buttons in a tidy 2x2 grid on mobile */
@media(max-width:809px){
 body .cv-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:340px;gap:12px}
 body .cv-actions .ds-button{width:100%;justify-content:center}
}

/* Next challenge: same card language as the other jobs (light surface, dashed outline = open slot) */
#experience .xp-next-card{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-card);border:1.5px dashed #6387ff80}
#experience .xp-next-card .xp-years{background:#6387ff1f;color:var(--color-link,#4056BD)}
#experience .xp-next-card .xp-company{color:var(--color-text)}
#experience .xp-next-card .xp-role{color:var(--color-text-secondary)}

/* Timeline line: calm, uniform rail (no gradient that reads like a progress bar) */
#experience .xp-list::before{background:var(--color-border);width:2px;border-radius:2px}
#experience .xp-item:nth-child(2)::before{box-shadow:0 0 0 4px #6387ff26}

/* Experience rail doubles as a scroll progress bar */
#experience .xp-list{--xp-p:0}
#experience .xp-list::after{content:'';position:absolute;left:5px;top:48px;bottom:44px;width:2px;border-radius:2px;background:linear-gradient(var(--color-accent),#4056BD);transform-origin:top;transform:scaleY(var(--xp-p));box-shadow:0 0 12px #6387ff80;pointer-events:none}
@media(max-width:809px){#experience .xp-list::after{left:3px;top:36px;bottom:36px}}
#experience .xp-item::before{z-index:2}
#experience .xp-next-card{border:0}

/* Next challenge: quieter type than the job titles */
#experience .xp-next-card .xp-company{font-size:20px;font-weight:500}
#experience .xp-next-card .xp-role{font-size:15px}
@media(max-width:809px){#experience .xp-next-card .xp-company{font-size:19px}#experience .xp-next-card .xp-role{font-size:14px}}

/* About + Experience read as one block: smaller Experience heading, tighter gap between them */
#aboutme.about{padding-bottom:32px}
#experience.profile-block{gap:24px}
#experience.profile-block h2{font-size:26px;line-height:1.2;letter-spacing:-.02em;color:var(--color-text-secondary)}
@media(max-width:809px){#aboutme.about{padding-bottom:24px}#experience.profile-block h2{font-size:22px}}

/* Bigger progress rail: thicker line, larger dots that light up as the bar reaches them */
@media(min-width:810px){
 #experience .xp-list{padding-left:48px}
 #experience .xp-list::before,#experience .xp-list::after{left:8px;width:4px;border-radius:4px;top:48px;bottom:44px}
 #experience .xp-item::before{left:-48px;top:34px;width:20px;height:20px;border-width:3px}
 #experience .xp-item:first-child::before,#experience .xp-item:nth-child(2)::before{top:38px}
}
@media(max-width:809px){
 #experience .xp-list{padding-left:36px}
 #experience .xp-list::before,#experience .xp-list::after{left:6px;width:4px;border-radius:4px}
 #experience .xp-item::before{left:-36px;width:16px;height:16px;border-width:3px}
}
#experience .xp-item::before,#experience .xp-item:first-child::before,#experience .xp-item:nth-child(2)::before{background:var(--color-surface);border-color:var(--color-border-strong);border-style:solid;box-shadow:0 0 0 0 #6387ff00;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease}
#experience .xp-item.is-reached::before{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 0 6px #6387ff29;transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){#experience .xp-item::before{transition:none}}
#experience .xp-list::before,#experience .xp-list::after{top:var(--xp-top,48px)!important;bottom:var(--xp-end,44px)!important}

/* Experience: calmer type across the whole company block */
#experience .xp-company,#experience .xp-next-card .xp-company{font-size:20px;font-weight:500;letter-spacing:-.015em}
#experience .xp-role,#experience .xp-next-card .xp-role{font-size:15px}
#experience .xp-points li{font-size:16px;line-height:1.55}
#experience .xp-years b,#experience .xp-next-card .xp-years{font-size:13px}
@media(max-width:809px){#experience .xp-company,#experience .xp-next-card .xp-company{font-size:18px}#experience .xp-role,#experience .xp-next-card .xp-role{font-size:14px}#experience .xp-points li{font-size:15px}}
#experience .xp-company,#experience .xp-next-card .xp-company{font-weight:600}

/* Progress uses the same spectrum gradient as the primary button */
#experience .xp-list::after{background:linear-gradient(180deg,var(--spectrum-peach),var(--spectrum-pink) 28%,var(--spectrum-lilac) 54%,var(--spectrum-blue) 77%,var(--spectrum-teal));box-shadow:0 0 14px #a374ff59}
#experience .xp-item.is-reached::before{background:var(--button-spectrum);border-color:transparent;box-shadow:0 0 0 6px #a374ff26,0 4px 12px #a374ff4d}
#experience .xp-item.is-reached::before{background-origin:border-box;background-size:100% 100%;background-repeat:no-repeat}

/* Dots: fully white fill; the ring takes the spectrum gradient once reached */
#experience .xp-item::before{background:#fff}
#experience .xp-item.is-reached::before{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--button-spectrum) border-box;background-origin:border-box;box-shadow:0 0 0 6px #a374ff1f,0 4px 12px #a374ff40;transform:scale(1.05)}

/* Experience heading: same ink as other headings, mid size */
#experience.profile-block h2{color:var(--color-text);font-size:32px;font-weight:600}
@media(max-width:809px){#experience.profile-block h2{font-size:26px}}

/* Progress dots: larger and dark; the ring picks up the spectrum once reached */
@media(min-width:810px){
 #experience .xp-list{padding-left:56px}
 #experience .xp-list::before,#experience .xp-list::after{left:12px}
 #experience .xp-item::before{left:-56px;top:30px;width:28px;height:28px;border-width:4px}
 #experience .xp-item:first-child::before,#experience .xp-item:nth-child(2)::before{top:34px}
}
@media(max-width:809px){
 #experience .xp-list{padding-left:40px}
 #experience .xp-list::before,#experience .xp-list::after{left:9px}
 #experience .xp-item::before{left:-40px;top:23px;width:22px;height:22px;border-width:3px}
}
#experience .xp-item::before,#experience .xp-item:first-child::before,#experience .xp-item:nth-child(2)::before{background:#252B36;border-color:#252B36}
#experience .xp-item.is-reached::before{background:linear-gradient(#252B36,#252B36) padding-box,var(--button-spectrum) border-box;border-color:transparent;box-shadow:0 0 0 7px #a374ff1f,0 6px 16px #a374ff40}

/* Progress: dark fill, white dots with a dark ring once reached */
#experience .xp-list::after{background:#252B36;box-shadow:none}
#experience .xp-item::before,#experience .xp-item:first-child::before,#experience .xp-item:nth-child(2)::before{background:#fff;border-color:var(--color-border-strong)}
#experience .xp-item.is-reached::before{background:#fff;border-color:#252B36;box-shadow:0 0 0 6px #252b3614,0 4px 12px #252b3622}

/* About + Experience: one clear rhythm — intro, hairline, then the timeline */
#aboutme.about{padding-bottom:64px}
#experience.profile-block{border-top:1px solid var(--color-border);padding-top:56px;gap:32px}
@media(max-width:809px){#aboutme.about{padding-bottom:48px}#experience.profile-block{padding-top:40px;gap:24px}}

/* Progress colour = the accent blue used for the highlighted words in the About headline */
#experience .xp-list::after{background:var(--accent)}
#experience .xp-item.is-reached::before{border-color:var(--accent);box-shadow:0 0 0 6px #6387ff26,0 4px 12px #6387ff33}

/* Latest job is open by default but can be collapsed and expanded like the others */
#experience .xp-pinned[open] summary{cursor:pointer}
#experience .xp-pinned .xp-chevron{display:block}
@media(min-width:810px){#experience .xp-pinned summary{grid-template-columns:150px minmax(0,1fr) 36px}}
@media(max-width:809px){#experience .xp-pinned summary{grid-template-columns:minmax(0,1fr) 32px}}

/* Chevron button: clean circle, centred icon, rotates when open */
#experience .xp-chevron{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--color-border);box-sizing:border-box;display:block;position:relative;transition:transform .25s ease,background .2s ease,border-color .2s ease}
#experience .xp-chevron::before{content:'';position:absolute;inset:0;width:auto;height:auto;border:0;transform:none;background:var(--color-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M12.5 15.25 18 20.75l5.5-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M12.5 15.25 18 20.75l5.5-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
#experience .xp-details summary:hover .xp-chevron{background:var(--color-surface-alt);border-color:var(--color-border-strong)}
#experience .xp-details[open] .xp-chevron{transform:rotate(180deg);background:var(--color-surface-alt)}
@media(prefers-reduced-motion:reduce){#experience .xp-chevron{transition:none}}

/* Progress dots: identical size and stroke in every state */
#experience .xp-item::before,#experience .xp-item:first-child::before,#experience .xp-item:nth-child(2)::before,#experience .xp-item.is-reached::before{border-width:3px;border-style:solid;transform:none;box-sizing:border-box}

/* Experience type audit: one chip size, regular-weight body text */
#experience .xp-years,#experience .xp-years b,#experience .xp-years b:last-child,#experience .xp-next-card .xp-years{font-family:var(--font-ui);font-size:13px;line-height:1.5;font-weight:600}
#experience .xp-points li{font-weight:400}
#experience .xp-points b{font-weight:600}

/* Desktop: same stacked layout as tablet/mobile (chip, title, points), calmer spacing */
@media(min-width:810px){
 #experience .xp-list{gap:16px}
 #experience .xp-details summary,#experience .xp-pinned summary{display:grid;grid-template-columns:minmax(0,1fr) 32px;grid-template-areas:"years chev" "title title";align-items:center;gap:12px 16px;min-height:0;padding:28px 28px}
 #experience .xp-details[open] summary{padding-bottom:20px}
 #experience .xp-details .xp-years{grid-area:years}
 #experience .xp-details .xp-title{grid-area:title}
 #experience .xp-details .xp-chevron{grid-area:chev;align-self:center}
 #experience .xp-points{padding:0 28px 28px;gap:14px;max-width:none}
 #experience .xp-points li{max-width:880px}
 #experience .xp-next-card{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;justify-items:start;min-height:0;padding:28px}
 #experience .xp-next-card .ds-button{margin-top:8px}
 #experience .xp-item::before,#experience .xp-item:first-child::before,#experience .xp-item:nth-child(2)::before{top:30px}
}

/* Dropdown buttons: small, soft, centred chevron */
#experience .xp-chevron{width:32px;height:32px;border:0;background:var(--color-surface-alt);box-shadow:none}
#experience .xp-chevron::before{background:var(--color-text-secondary);-webkit-mask-size:100% 100%;mask-size:100% 100%}
#experience .xp-details summary:hover .xp-chevron{background:#E7ECF3;border:0}
#experience .xp-details[open] .xp-chevron{background:var(--color-surface-alt)}
#experience .xp-details summary:hover .xp-chevron::before{background:var(--color-text)}
#experience .xp-details summary:focus-visible .xp-chevron{outline:2px solid var(--color-focus);outline-offset:2px}

/* Progress colour = the slate grey behind the portrait on the contact badge */
#experience .xp-list{--xp-slate:#525E6E}
#experience .xp-list::after{background:var(--xp-slate)}
#experience .xp-item.is-reached::before{border-color:var(--xp-slate);box-shadow:0 0 0 6px #525e6e1f,0 4px 12px #525e6e26}

/* Back to the accent blue; the Next card and its dot are tied to the progress bar with the same accent */
#experience .xp-list{--xp-slate:var(--accent)}
#experience .xp-list::after{background:var(--accent)}
#experience .xp-item.is-reached::before{border-color:var(--accent);box-shadow:0 0 0 6px #6387ff26,0 4px 12px #6387ff33}
#experience .xp-next-card{background:linear-gradient(180deg,#fff,#f4f7ff);box-shadow:0 0 0 1.5px #6387ff66,0 10px 28px #6387ff26}
#experience .xp-next-card .xp-years{background:var(--accent);color:#fff}
#experience .xp-item.xp-next::before,#experience .xp-item.xp-next.is-reached::before{background:var(--accent);border-color:#fff;box-shadow:0 0 0 2px var(--accent),0 0 0 8px #6387ff26}

/* Next card: softer shadow, dark button */
#experience .xp-next-card{box-shadow:0 0 0 1.5px #6387ff4d,0 2px 8px #1f253014}
#experience .xp-next-card .ds-button--primary{background:var(--graphite,#252B36);color:#fff;border:0;box-shadow:none}
#experience .xp-next-card .ds-button--primary:hover{background:#1F2530;color:#fff}

/* More space between the date chip and the company name */
#experience .xp-details>summary{row-gap:20px}
@media (max-width:809px){#experience .xp-details>summary{row-gap:16px}}

/* Mobile header: burger on the first screen, "Connect with me" after it; CV in the burger opens the PDF */
.site-header .nav-cta,.site-header .nav-cv-pdf{display:none}
@media(max-width:600px){
 .site-header .nav-links a[href$="#cv"]{display:none!important}
 .site-header .nav-links .nav-cv-pdf{display:block}
 .past-hero .site-header .menu-toggle,.past-hero .site-header .nav-links{display:none!important}
 .past-hero .site-header .nav-cta{display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:auto;height:44px;padding:0 18px;border:2px solid transparent;border-radius:14px;background:linear-gradient(#fff,#fff) padding-box,var(--button-spectrum,linear-gradient(110deg,#ff9854,#f16b9d 28%,#a374ff 54%,#6387ff 77%,#64d4cf)) border-box;font-family:'Instrument Sans',Arial,sans-serif;font-weight:500;font-size:15px;line-height:1;letter-spacing:-.01em;color:#101014;white-space:nowrap;text-decoration:none;animation:navCtaIn .25s ease}
 .past-hero .site-header .nav-cta:active{transform:translateY(1px)}
}
@keyframes navCtaIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Burger: one crisp icon so all three lines render the same thickness */
@media(max-width:809px){body .site-header .menu-toggle,body .site-header .nav.open .menu-toggle{background:transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%231F2530%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M2%205h16M2%2010h16M2%2015h16%22/%3E%3C/svg%3E") center/20px 20px no-repeat!important;filter:none!important}
body .site-header .nav.open .menu-toggle{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20stroke%3D%22%231F2530%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%204l12%2012M16%204L4%2016%22/%3E%3C/svg%3E")!important}
body .site-header .menu-toggle span{display:none!important}}

/* Back-to-top arrow: on every screen size, never over the footer buttons, lift only with a real mouse */
body.finestro-page .to-top{position:fixed;right:32px;bottom:32px;z-index:40;display:grid;place-items:center;width:52px;height:52px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--primary-background);color:var(--color-text);box-shadow:var(--shadow-card);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--motion-base) var(--ease-ui),transform var(--motion-base) var(--ease-ui),visibility 0s var(--motion-base),box-shadow var(--motion-fast) var(--ease-ui);-webkit-tap-highlight-color:transparent}
body.finestro-page .to-top.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
body.finestro-page .to-top:hover{transform:none}
@media(hover:hover) and (pointer:fine){body.finestro-page .to-top.is-visible:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}}
body.finestro-page .to-top:focus{outline:none}
body.finestro-page .to-top:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
@media(max-width:809px){body.finestro-page .to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:46px;height:46px}body.finestro-page .to-top svg{width:20px;height:20px}}