/* Common contact and typography rules for active pages. */
#contact.mr-contact{box-sizing:border-box;width:100%;text-align:center;scroll-margin-top:104px;font-family:Urbanist,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--mr-body-color, #eae6dc);padding:0}
#contact .mr-contact-eyebrow{margin:0 0 12px;color:#cf8797;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:1.4px;text-transform:uppercase;max-width:none}
#contact h2{margin:0 0 18px;color:#eae6dc;font-size:clamp(34px,3vw,40px);font-weight:700;line-height:1.1;letter-spacing:-1px;text-wrap:balance}
#contact .mr-contact-intro{max-width:560px;margin:0 auto 28px;font-size:17px;line-height:1.55;text-wrap:pretty}
#contact .mr-contact-email{display:inline-block;max-width:100%;padding:4px 0;color:#eae6dc;font-size:clamp(22px,3vw,30px);line-height:1.3;font-weight:600;letter-spacing:-.4px;overflow-wrap:anywhere;text-decoration:none;transition:color .2s}
#contact .mr-contact-email:hover{color:#cf8797}
#contact .mr-contact-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px;margin:20px 0 0}
#contact .mr-contact-copy{min-height:48px;min-width:152px;border:0;border-radius:999px;padding:13px 24px;background:#b8455a;color:#fff;font:700 16px/1.4 Urbanist,sans-serif;cursor:pointer;transition:background .2s}
#contact .mr-contact-copy:hover{background:#9f394e}
#contact .mr-contact-linkedin{display:inline-flex;align-items:center;min-height:48px;padding:10px 4px;color:#eae6dc;font-size:16px;font-weight:600;text-decoration:underline;text-decoration-color:#b8455a;text-underline-offset:5px}
#contact .mr-contact-copyright{max-width:none;margin:72px 0 0;color:#8f978e;font-size:13px;font-weight:400;line-height:1.5;letter-spacing:.01em}
#contact a:focus-visible,#contact button:focus-visible{outline:2px solid #cf8797;outline-offset:5px}
#contact .mr-contact-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#cs-root #contact{padding:clamp(72px,8vw,104px) 0 12px}
#contact.mr-contact-compact{margin-top:80px}
@media(max-width:768px){#contact h2{font-size:38px;line-height:1.05;letter-spacing:-1.3px}#contact .mr-contact-intro{font-size:16px}#contact .mr-contact-copyright{margin-top:56px}#cs-root #contact{padding:64px 0 12px}#contact.mr-contact-compact{margin-top:64px}}
@media(max-width:380px){#contact h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){#contact a,#contact button{transition:none}}
/* Secondary text actions match the colored underline used by the contact LinkedIn link. */
.mr-secondary-button{
  color:#eae6dc !important;
  font-size:16px !important;
  font-weight:600 !important;
  text-decoration-line:underline !important;
  text-decoration-color:#b8455a !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:5px !important;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.mr-secondary-button:hover,.mr-secondary-button:focus-visible{color:#cf8797 !important}
@media(prefers-reduced-motion:reduce){.mr-secondary-button{transition:none}}
/* Shared visual system for the five active portfolio pages. */
:root{--mr-card-surface:#171d18;--mr-section-accent:#cf8797;--mr-content-width:1180px}
#contact.mr-contact{max-width:var(--mr-content-width);margin-inline:auto}
main#story .eyebrow{color:var(--mr-section-accent)}
#career-story .cs-main h3{font-size:24px}
#career-story .cs-small-panel h3,
#career-story .cs-thought h3,
#career-story .cs-roadmap-note h3,
main#story .audience-grid h3,
main#story .zone-grid h3,
main#story .tradeoff h3,
main#story .frog-thought h3{font-size:18px;line-height:1.3;font-weight:700}
main#story .attempts h3,
main#story .explorations h3,
main#story .frog-mobile-panel h3{font-size:24px;line-height:1.25;font-weight:700}
#career-story .cs-main,
main#story{padding-bottom:64px}
@media(min-width:960px){
  #career-story h1,
  main#story>.hero h1,
  main#story>.frog-hero h1{
    font-size:clamp(40px,3.5vw,52px);line-height:1.05;letter-spacing:-2px
  }
}
@media(max-width:768px){
  #cs-root .mr-cert-card h3{font-size:18px;line-height:1.3;font-weight:700}
  #career-story .cs-main,
  main#story{padding-bottom:48px}
}

/* About me follows the homepage section spacing at every width. */
#cs-root .about-page{--mr-about-section-gap:240px;display:flex;flex-direction:column;gap:var(--mr-about-section-gap)}
#cs-root .about-page>.about-hero{padding-bottom:0}
#cs-root .about-page>.about-section{padding-block:0}
#cs-root .about-page>#contact.mr-contact{margin-top:0;padding-top:0}
@media(max-width:768px){
  #cs-root .about-page{--mr-about-section-gap:128px}
}

/* Tablet section spacing follows the homepage; other widths retain their existing rules. */
@media(min-width:640px) and (max-width:959px){
  #career-story .cs-main,
  main#story{--mr-tablet-section-gap:128px}
  #career-story .cs-hero,
  #career-story .cs-section,
  main#story>.hero,
  main#story>.chapter,
  main#story>.frog-hero,
  main#story>.frog-chapter{margin-bottom:var(--mr-tablet-section-gap)}
  main#story>#contact.mr-contact-compact{margin-top:var(--mr-tablet-section-gap)}
}
@media(min-width:769px) and (max-width:959px){
  #career-story .cs-main,
  main#story{--mr-tablet-section-gap:240px}
}

/* Desktop main sections share the homepage spacing. */
@media(min-width:960px){
  #career-story .cs-hero,
  #career-story .cs-section,
  main#story>.hero,
  main#story>.chapter,
  main#story>.frog-hero,
  main#story>.frog-chapter,
  main#story>.reflection{margin-bottom:240px}
  main#story>#contact.mr-contact-compact{margin-top:240px}
}

/* Keep next-project navigation close to the final section on desktop. */
@media(min-width:769px){
  #career-story .cs-reflection,
  main#story>.frog-reflection,
  main#story>.reflection{margin-bottom:100px}
  main#story>.next-case{margin-top:0;justify-content:flex-end;text-align:right}
}