/* Local Microsoft portfolio review. Segoe files from Carlos's Holiday presentation. */
@font-face{font-family:'Review Segoe';src:url('assets/fonts/segoe-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Review Segoe';src:url('assets/fonts/segoe-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --paper:#fafafa;--ink:#242424;--muted:#616161;--line:#dedede;
  --orange:#242424;--sans:'Review Segoe','Segoe UI',Arial,sans-serif;--serif:var(--sans);
  --suno-accent:linear-gradient(110deg,#242424,#242424);
}
html{color-scheme:light}
html body{background:var(--paper);color:var(--ink);font-weight:400}
html body,html body *{font-family:var(--sans)!important;font-synthesis:none}
::selection{background:#dedede;color:#242424}
html body :is(.hero h1,.hero h1 *,.family-heading,.family-heading *,.purpose-title,.purpose-title *,.belief-title,.belief-title *,.simplify-title,.simplify-title *,.culture-quote-text,.culture-quote-text *,.closing h2,.closing h2 *){
  font-family:var(--sans)!important;font-weight:400!important;font-style:normal;letter-spacing:-.035em;
}
html body :is(.work-card h2,.microsoft-work h2,.career-row h2,.beliefs-heading h2){font-weight:400;letter-spacing:-.025em}
html body :is(.reading details>p,.work-card-caption p:not(.eyebrow),.foound-description){font-size:18px;line-height:1.55;letter-spacing:0;font-weight:400;color:var(--muted)}
html body :is(.header-links a,.text-link,.footer-links a,.blurb-toggle){font-weight:400;letter-spacing:0}
html body .eyebrow{font-size:12px!important;font-weight:400;letter-spacing:.08em;color:var(--muted)}
html body .family-caption{font-weight:400;letter-spacing:-.025em;line-height:1.12;color:var(--ink)}
html body :is(a,button,summary,input):focus-visible{outline:2px solid #242424;outline-offset:5px}
/* Solid color follows each glyph's visibility, including animated punctuation. */
html body .accent,html body .simplify-keep,
html body .belief-simplify .simplify-keep,html body .belief-culture .culture-quote .accent,
html body .belief-craft .belief-title .accent,
html body .career-section.is-interactive .career-row.is-active .career-trigger,
html body .career-row .career-trigger:hover,html body .career-row .career-trigger:focus-visible{
  background:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important;
  color:var(--orange)!important;-webkit-text-fill-color:currentColor;animation:none!important;
}
/* Quiet surfaces; purposeful photo and type animations carry the presentation. */
html body .color-stage{background:var(--paper);color:var(--ink)}
.color-field{display:none}
.color-stage::after,.hero::before{display:none}
html body .color-stage :is(h1,h2,h3,h4,p,a,span,em,strong,cite,summary){color:var(--ink)!important;-webkit-text-fill-color:currentColor!important}
html body .hero h1{font-size:clamp(80px,9vw,144px);max-width:none;line-height:1.06}
html body .hero h1 .greeting-salutation{font-size:.7em;font-weight:400!important;line-height:1.12;letter-spacing:-.035em}
html body .hero h1 .greeting-name{font-size:1em;letter-spacing:-.045em}
.landing-signature{align-items:center;gap:24px;font-size:16px;font-weight:400;color:var(--ink)}
.landing-signature .review-brand{display:block;opacity:1}
.review-logo{width:140px;height:auto;max-width:none}
.review-context{position:absolute;left:var(--gutter);bottom:44px;font-size:14px;line-height:1.5;letter-spacing:0}
html body .hero .review-context span{display:block;color:var(--muted)!important;font-size:12px;margin-top:6px}
.family-section.wrap{
  --paper:#fafafa;--ink:#242424;--muted:#616161;--line:#dedede;--orange:#242424;
  background:var(--paper);color:var(--ink);
}
.family-heading{line-height:1.08}
.family-photo img{border-radius:0;box-shadow:none}
.family-section .reading{border-color:var(--line)}
.career-row p,.belief-thought{color:var(--muted)}
.point-of-view{background:#fff}
.purpose-title{line-height:1.1}
.point-of-view .reading{border-color:var(--line)}
.point-of-view .blurb-toggle,.point-of-view .reading details>p{color:var(--muted)}
.beliefs{background:#f0f0f0;color:var(--ink)}
html body .beliefs-heading h2{font-size:24px;font-weight:400;letter-spacing:-.015em;color:var(--muted)}
.belief-marker{color:var(--muted)}
html body .culture-quote-text,html body .culture-quote-text *{font-weight:400!important;line-height:1.15}
.belief-title{line-height:1.12}
.belief-scene+.belief-scene{border-color:#d6d6d6}
.work-card-heading .eyebrow,.microsoft-work-heading>.eyebrow{margin-bottom:16px}
.work-card .text-link,.microsoft-caption .text-link{color:#242424;border-color:#bdbdbd}
.work-card .text-link:hover,.microsoft-caption .text-link:hover{border-color:#242424}
.future-section{background:#f0f0f0;color:var(--ink)}
.future-intro>.eyebrow{background:none;-webkit-text-fill-color:currentColor;color:var(--muted)}
.foound-summary .foound-description{max-width:31ch!important}
/* FOOUND keeps its own identity inside the personal portfolio. */
html body #future .foound-title,html body #future .foound-title *,html body #future .foound-summary,html body #future .foound-summary *{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important}
/* Closing: one left-aligned composition, with the logo as a quiet signature. */
html body .closing{background:#fff;border-top:1px solid var(--line);padding:clamp(72px,7vw,112px) 0;min-height:0;display:block}
.closing-content.wrap{max-width:1160px}
html body .closing .eyebrow{color:var(--muted)!important;margin:0 0 28px}
html body .closing h2{font-size:clamp(48px,6.4vw,96px);line-height:1.12;max-width:13ch;margin:0}
html body .closing.color-stage .accent{color:#242424!important;-webkit-text-fill-color:currentColor!important}
html body .closing-subtitle{font-size:clamp(18px,1.45vw,22px);line-height:1.55;letter-spacing:0;max-width:48ch;margin:28px 0 0;color:var(--muted)!important}
html body .closing .closing-wordmark{width:144px;max-width:144px;height:auto;margin:40px 0 0;justify-self:start;align-self:start;opacity:1;image-rendering:auto!important}
html body .footer.wrap{max-width:1160px;padding-block:26px 88px;display:flex;justify-content:flex-start;align-items:center;color:var(--muted);font-size:14px}
html body .footer-links{justify-content:flex-start;gap:20px 32px;margin:0}
html body .footer-links a{font-size:14px;font-weight:400}
.footer a:hover{color:#242424}
/* The presenter index stays out of the story until requested. */
html body .header-inner{background:#fffffffa;border:1px solid #dedede;border-radius:10px;box-shadow:0 12px 44px #0000000d}
html body .header-inner .identity{color:var(--ink);border-color:var(--line)}
html body .header-links a{color:var(--muted);background:none}
html body .header-links a:hover,html body .header-links a[aria-current=location]{color:#242424}
html body .header-links a[aria-current=location]::before{color:#242424}
.chapter-toggle{background:#fffffff2;color:#424242;border:1px solid #d6d6d6;opacity:1;font-size:13px;box-shadow:none}
.chapter-toggle:hover,.chapter-toggle:focus-visible,.chapter-toggle[aria-expanded=true]{background:#f0f0f0;border-color:#bdbdbd}
@media(max-width:700px){
  html body .hero h1{font-size:clamp(48px,11vw,78px)}
  html body .hero h1 .greeting-salutation{font-size:.8em}
  .landing-signature{font-size:14px;gap:18px}.review-logo{width:112px}
  .review-context{bottom:84px;max-width:calc(100% - 48px);font-size:13px}
  html body .hero .review-context span{font-size:12px}
  html body .closing h2{font-size:clamp(42px,8.5vw,60px)}
  html body .closing .closing-wordmark{width:128px;max-width:128px;margin-top:32px}
  .family-heading,.purpose-title{font-size:clamp(36px,7.5vw,54px)}
  html body :is(.reading details>p,.work-card-caption p:not(.eyebrow),.foound-description){font-size:17px}
}
/* Mistral photo choreography: the glasses and photo share the same transform. */
.family-gallery .family-column{gap:clamp(8px,1vw,14px)}
.childhood-memory{position:relative;transform-origin:0 0;transition:transform 700ms var(--ease)}
.childhood-glasses{position:absolute;left:calc(50.8% - 2px);top:44.1%;width:11%;height:auto;overflow:visible;pointer-events:none;transform:rotate(-7deg);transform-origin:center}
.family-stage.is-entering .childhood-glasses{opacity:0}
@media(hover:hover) and (pointer:fine){
  .family-stage:not(.is-entering) .family-origin:hover .childhood-memory{transform:translateY(-4px) scale(1.015)}
  .family-stage:not(.is-entering) .family-origin:hover img{transform:none}
}
@media(max-width:600px){
  .family-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .family-gallery .family-column{grid-row:auto;grid-column:auto}
  html body .family-column .family-caption{font-size:20px;line-height:1.15}
}
@media(prefers-reduced-motion:reduce){
  .family-stage.is-entering .childhood-glasses{opacity:1!important}
  .childhood-memory{transition:none}
}
@media print{.childhood-glasses{opacity:1!important}}

/* A small, warm greeting, aligned with the salutation. */
html body .hero h1 .greeting-wave{display:inline-block;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:.65em;vertical-align:.08em;letter-spacing:0}

/* Present: two Microsoft projects, each with its own title and destination. */
.present-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:start}
.present-project{min-width:0}
.present-project .project-video,.present-project-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.present-project-heading{margin-bottom:24px}
.present-project-heading .eyebrow{margin-bottom:12px}
html body .present-project-heading h3{font-size:clamp(30px,3.6vw,48px);font-weight:400;line-height:1.1;letter-spacing:-.025em}
.present-project-image{display:block;border-radius:4px;overflow:hidden}
.present-project-image img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

@media(max-width:600px){.present-projects{grid-template-columns:1fr;gap:64px}}

/* Override legacy light glyph fills on the closing's animated inner spans. */
html body .closing.color-stage h2 .type-line{color:var(--ink)!important;-webkit-text-fill-color:currentColor!important}
html body .closing.color-stage h2 .accent .type-line{color:#242424!important;-webkit-text-fill-color:currentColor!important}
/* Segoe descenders need space inside the reveal mask. */
html body .closing h2 .type-mask{padding-block:.06em .24em;margin-block:-.06em -.24em}

/* Future: one ambition, the portfolio, three concrete priorities. */
.team-vision{background:#f5f5f5;color:var(--ink)}
.vision-sheet.wrap{max-width:1160px;padding-block:clamp(64px,6vw,96px)}
.vision-sheet>.eyebrow{margin-bottom:24px}
html body .vision-sheet h2{font-size:clamp(40px,4.8vw,72px);font-weight:400;line-height:1.12;letter-spacing:-.035em;margin:0}
.vision-sheet h2>span{color:#242424}
.vision-context{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:#616161;max-width:52ch;margin-top:24px}
.vision-portfolio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:780px;margin:36px 0 40px}
.vision-portfolio dt{font-size:22px;font-weight:400;line-height:1.25;letter-spacing:-.02em}
.vision-portfolio dd{font-size:14px;color:var(--muted);line-height:1.5;margin:6px 0 0}
.vision-focus{margin:0;border-top:1px solid #d6d6d6;max-width:920px}
.vision-focus>div{display:grid;grid-template-columns:160px 1fr;gap:24px;padding-block:19px;border-bottom:1px solid #d6d6d6;align-items:baseline}
.vision-focus dd strong{font-weight:400}
.vision-focus dd p{font-size:16px;line-height:1.5;letter-spacing:0;color:var(--muted);margin-top:8px;max-width:56ch;opacity:0;transition:opacity .18s ease}
.vision-focus dt{font-size:14px;color:var(--muted);line-height:1.5}
.vision-focus dd{font-size:clamp(20px,2vw,28px);font-weight:400;line-height:1.35;letter-spacing:-.015em;margin:0}
.vision-next{font-size:16px;line-height:1.5;color:#242424;margin-top:26px}
@media(max-width:600px){
 .vision-portfolio{gap:16px;margin-block:30px}
 .vision-portfolio dt{font-size:18px}.vision-portfolio dd{font-size:12px}
 .vision-focus>div{grid-template-columns:1fr;gap:6px;padding-block:18px}
 .vision-next{max-width:30ch}
}

/* Optional leadership thought, tucked between portfolio and priorities. */
.vision-approach{max-width:920px;margin:-12px 0 24px}
.vision-approach summary{display:inline-flex;align-items:center;gap:12px;font-size:14px;line-height:1.5;color:#242424;cursor:pointer;list-style:none}
.vision-approach summary::-webkit-details-marker{display:none}
.vision-approach summary>span{display:inline-block;transition:transform .2s}
.vision-approach[open] summary>span{transform:rotate(45deg)}
.vision-approach>p{font-size:clamp(18px,2vw,27px);line-height:1.4;letter-spacing:-.015em;font-weight:400;margin:18px 0 30px;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.vision-approach summary>span{transition:none}}

/* Reveal supporting detail without shifting the surrounding priorities. */
.vision-focus>div:hover dd p,.vision-focus>div:focus-within dd p{opacity:1}
.vision-focus>div:focus-visible{outline:2px solid #242424;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.vision-focus dd p{transition:none}}

html body .hero .hero-portfolio{display:inline-block;margin-top:14px;font-size:14px;color:#242424!important;text-decoration:none;text-underline-offset:4px}
html body .hero .hero-portfolio:hover{text-decoration:underline}

/* Keep the section label legible on the light Microsoft background. */
html body .point-of-view>.wrap>.eyebrow{color:#616161!important;-webkit-text-fill-color:#616161!important}

/* Navigation text uses the same accessible palette, including legacy controls. */
html body .header-inner .application-cta,html body .header-inner .application-cta span{color:#242424!important;-webkit-text-fill-color:currentColor!important}
html body .header-inner .application-cta:hover{background:#f0f0f0;color:#242424!important}