/* Two local typefaces: Notebook Ink for emphasis, Easy Hello for supporting text. */
@font-face{font-family:'Notebook Ink';src:url('fonts/NotebookInk-Regular.woff?v=2') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{--font-display:'Notebook Ink',cursive;--font-body:'Easy Hello',cursive}
body,button,input,select,textarea{font-family:var(--font-body)}
/* The supplied regular cut is synthesized at bold weight for the display role. */
body h1,body h2,body h3,body h4,body h5,body h6,
body strong,body b,body .entry-title,body .stack-label,body dt{
 font-family:var(--font-display)!important;font-weight:700!important;letter-spacing:0;text-transform:uppercase;
}
body{font-size:20px}
.about-story .about-copy>p:not(.hand){font-size:20px;line-height:1.65}
.fun-intro>p,.contact-footer p,.project-grid p{font-size:20px}
.stack-count,.copyright,.meta{font-size:18px}
.resume-page .entry-company,.resume-page .entry-date,.resume-contact,
.resume-intro p,.education-entry .resume-secondary,.preview-copy>span,.preview-copy small{font-size:18px}
.resume-page .entry-description li,.education-entry p,.resume-facts{font-size:20px;line-height:1.6}
.resume-section{grid-template-columns:145px minmax(0,1fr)}
@media(max-width:700px){.resume-section{grid-template-columns:1fr}}

/* Keep uppercase résumé lettering compact and clear of the illustrations. */
.resume-page .resume-intro h1{font-size:28px}
.resume-page .resume-section>h2{font-size:17px;line-height:1.35;overflow-wrap:normal}
.resume-page .entry-title,.resume-page .education-heading h3{font-size:19px;line-height:1.35}
.resume-page .resume-section{grid-template-columns:155px minmax(0,1fr);gap:24px}
@media(max-width:700px){
 .resume-page .resume-section{grid-template-columns:1fr;gap:16px}
 .resume-page .resume-intro h1{font-size:26px}
 .resume-page .entry-title,.resume-page .education-heading h3{font-size:18px}
}

/* Stronger ink contrast for handwritten body copy and supporting details. */
:root{--muted:#45433e}
.about-story .about-copy>p,.fun-intro>p,.contact-footer p,.project-grid p,
.resume-page .entry-description li,.education-entry p,.resume-facts,
.resume-page .entry-company,.resume-page .entry-date,.resume-contact,
.resume-intro p,.education-entry .resume-secondary,.preview-copy>span,.preview-copy small,
.stack-count,.copyright,.meta{color:#3b3934}

/* About prose stays in one consistent, readable handwriting style. */
.about-story .about-copy>p{color:#292823}
.about-story .about-copy>p strong,.about-story .about-copy>p b{
 font-family:var(--font-body)!important;font-weight:400!important;
 text-transform:none;color:inherit;
}

.about-story h1{font-size:26px;line-height:1.3;margin-bottom:22px}
@media(max-width:600px){.about-story h1{font-size:23px}}

/* A quiet, handwritten website preview beside the project details. */
.resume-page .autostitch-preview{max-width:460px;gap:20px;padding:0;border:0;border-radius:0;margin:22px 0 8px;align-items:center}
.resume-page .autostitch-preview>img{width:180px;height:112px;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:2px}
.resume-page .preview-copy{gap:5px}
.resume-page .preview-copy strong{font-family:var(--font-body)!important;font-weight:400!important;text-transform:none;font-size:21px;line-height:1.35;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.resume-page .preview-copy>span{font-size:17px;line-height:1.4;color:#3b3934}
@media(max-width:600px){.resume-page .autostitch-preview{align-items:flex-start;gap:12px}.resume-page .autostitch-preview>img{width:220px;max-width:100%;height:auto}}

.home-page .ink-spills{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:4}
.home-page .handwriting-fact{grid-column:1/-1;font:19px/1.5 var(--font-body);color:#3b3934;margin:16px 0 0;max-width:520px;transform:rotate(-1deg)}
.home-page .handwriting-fact+.copyright{margin-top:4px}

.work-entry .entry-toggle::after{transition:transform 220ms ease,opacity 220ms ease}
.work-entry[data-expanding="true"] .entry-toggle::after{transform:rotate(90deg);opacity:0}
.work-entry[data-expanding="false"] .entry-toggle::after{transform:rotate(90deg);opacity:1}
@media(prefers-reduced-motion:reduce){.work-entry .entry-toggle::after{transition:none}}
.work-entry[open] .entry-toggle::after{display:block;transform:rotate(0deg);opacity:0}
.work-entry[data-expanding="false"] .entry-toggle::after{transform:rotate(90deg);opacity:1}