/* About Me uses the portfolio's colors, fluid scale, gutters, and components. */
@font-face{font-family:'Bagel Fat One';src:url('https://fonts.gstatic.com/s/bagelfatone/v2/hYkPPucsQOr5dy02WmQr5Zkd4Blsv98eWbI.woff2') format('woff2');font-weight:100 900;size-adjust:95%;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
:root{--dark:#23301F;--light:#FAF6EC;--light-plus:#fff;--pink:#A7C7E7;--yellow:#F2C14E;--mango:#6BA368;--orange:#E8836B;--blue:#CFE3C4;--display:'Bagel Fat One','Arial Black',sans-serif;--body:'Quicksand',Arial,sans-serif;--site-unit:calc(clamp(992px,100vw,1920px)/90);--page-gutter:4em;--bw:calc(var(--site-unit)*.125);--line:var(--bw) solid var(--dark);--shadow:0 .5em 0 rgb(0 0 0 / .15);--shadow-sm:0 .25em 0 rgb(0 0 0 / .15);--sunny:4em;--nav-h:4.625em;--section:4.5em}
*,*::before,*::after{box-sizing:border-box}body{margin:0;background:var(--light);color:var(--dark);font:500 var(--site-unit)/1.5 var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--display);font-weight:500;font-synthesis:none;line-height:1.08}h1{font-size:4.1em;letter-spacing:-.01em}h2{font-size:2.9em}h3{font-size:1.2em;line-height:1.3}p+p{margin-top:1em}.container{width:100%;padding-inline:var(--page-gutter);margin-inline:auto}main section[id]{scroll-margin-top:calc(var(--nav-h) + 1em)}
/* Shared navigation and pill buttons. */
.nav-bar{position:sticky;top:0;z-index:100;height:var(--nav-h);background:var(--light);border-bottom:var(--line)}.nav-inner{position:relative;padding-inline:var(--page-gutter);display:flex;align-items:center;justify-content:space-between;height:100%}.nav-links{display:flex;gap:1.75em;padding:0;margin:0;list-style:none;font-weight:700}.nav-links a:hover,.text-link:hover{text-decoration:underline}.nav-links [aria-current]{text-decoration:underline;text-underline-offset:.3em}.nav-logo{position:absolute;left:50%;transform:translateX(-50%)}.nav-logo img{width:auto;height:2.7rem;max-height:calc(var(--nav-h) - .6rem)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375em;height:2.75em;padding:0 1.25em .1em;background:var(--pink);border:var(--line);border-radius:10em;font-weight:700;line-height:1.3;white-space:nowrap;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.625,.05,0,1)}.btn:hover{transform:translateY(-.1em)}.btn.light,.contact .btn{background:var(--light-plus)}.pill{display:inline-block;background:var(--pink);border:var(--line);border-radius:10em;padding:.08em .25em .12em;box-shadow:0 .08em 0 rgb(35 48 31 / .2);transform:rotate(-2deg)}.pill.yellow{background:var(--yellow)}.pill.green{background:var(--mango);color:var(--light)}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.75em;font-weight:700;margin-bottom:1em}
/* A personal introduction, with the portfolio's shared navigation and tokens. */
.nav-bar{position:fixed;inset:0 0 auto;height:var(--nav-h)}
.nav-links [aria-current]{text-decoration:none}
.nav-links a{position:relative;line-height:1.5}
.nav-links a::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:.125em;background:var(--dark);border-radius:.125em;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.625,.05,0,1)}
.nav-links a:hover{text-decoration:none}.nav-links a:hover::before{transform:scaleX(1);transform-origin:left}
.about-hero{display:flex;flex-direction:column;align-items:center;gap:3em;text-align:center;padding-top:calc(var(--nav-h) + 4em);padding-bottom:4.5em}.about-story{width:100%;max-width:52em}.about-story>p{margin-inline:auto}
.about-story .eyebrow{margin-bottom:1.5em}
.about-story h1{font-size:3.6em;line-height:1.12;letter-spacing:-.015em;margin-bottom:.6em}
.story-accent{color:#A84630}
.story-lead{font-size:1.25em;line-height:1.45;font-weight:700;margin-bottom:1em;max-width:29em}
.about-story>p:not(.eyebrow):not(.story-lead){max-width:40em;line-height:1.6}
.about-story .btn{margin-top:1.75em}
.about-portrait-column{width:min(100%,24em);padding:1em 0}
.portrait{width:100%;margin:0;background:var(--light-plus);border:var(--line);border-radius:2em;overflow:hidden;box-shadow:var(--shadow);transform:rotate(2deg)}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;transform:none}
.portrait figcaption{display:flex;flex-direction:column;gap:.15em;font-size:.9em;line-height:1.5;padding:1em 1.25em}
.portrait figcaption span{font-size:.85em}
.portrait-note{font-size:.8em;font-weight:700;text-align:center;margin-top:1.75em}
/* Section rhythm matches the compact case-study pages. */
.approach{padding:var(--section) 0;background:var(--dark);color:var(--light)}.approach h2{max-width:26em}.approach .pill{color:var(--dark)}.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5em;margin-top:2em}.principle{padding:1.25em;background:var(--pink);color:var(--dark);border:var(--line);border-radius:1em;box-shadow:var(--shadow-sm)}.principle:nth-child(2){background:var(--yellow)}.principle:nth-child(3){background:var(--orange)}.principle h3{margin:.75em 0}.principle p{font-size:1em;line-height:1.5}.number{display:inline-grid;place-items:center;width:2.25em;height:2.25em;background:var(--light-plus);border:var(--line);border-radius:50%;font-weight:700}.path{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:4em;padding-block:var(--section)}.path h2{max-width:10em}.text-link{display:inline-block;font-weight:700;border-bottom:var(--line);margin-top:1.25em}.section-heading{margin-bottom:2em}.experience{padding-block:0 var(--section)}.experience-list,.education-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5em;list-style:none;margin:0;padding:0}.experience-card{display:flex;flex-direction:column;background:var(--light-plus);border:var(--line);border-radius:1em;padding:1.25em;box-shadow:var(--shadow-sm);border-top:.5em solid var(--accent)}.experience-top{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:1em}.experience-top img{width:3em;height:3em;object-fit:contain}/* wide wordmark logos: sized by height so they stay readable, never wider than ~60% of the card */
.experience-top .wide-logo{width:auto;height:2em;max-width:60%;object-fit:contain;object-position:left center}
.experience-top .tvs-logo{height:1.75em;border-radius:.3em}
.experience-top .date{white-space:nowrap}.organization-mark{display:grid;place-items:center;width:1.5em;height:1.5em;background:var(--orange);border:var(--line);border-radius:.4em;font-size:2em;line-height:1}.date{font-size:.8em;font-weight:700}.organization{font-weight:700;margin:.35em 0 .85em}.experience-card .organization+p{margin-top:0}.experience-card>p:last-of-type{margin-bottom:.5em}.tags{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;margin:auto 0 0;padding:1em 0 0}.tags li{background:var(--light);border:var(--line);border-radius:10em;padding:.2em .65em;font-size:.75em;font-weight:700}.education{background:var(--blue);padding-block:var(--section)}.education-card{background:var(--light);border:var(--line);border-radius:1em;padding:1.25em;box-shadow:var(--shadow-sm)}.education-card .date{margin-bottom:.75em}.education-card h3{margin-bottom:.5em}.education-card .organization{margin-bottom:0}
.outside{padding-block:var(--section);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:4em;align-items:center}.outside h2{margin-bottom:.5em}.photo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5em;align-items:start}.photo-pair img{width:100%;height:auto;border:var(--line);border-radius:1em;box-shadow:var(--shadow-sm)}.photo-pair img:first-child{transform:rotate(-3deg)}.photo-pair img:last-child{transform:rotate(3deg)}.contact.container{width:calc(100% - var(--page-gutter)*2);padding:3em 2em;margin-bottom:3em;text-align:center;background:var(--pink);border:var(--line);border-radius:2em}.contact p{max-width:42em;margin:1.5em auto}.page-footer{display:flex;justify-content:space-between;gap:1em;padding-block:1em 2em;font-size:1em;font-weight:700}.skip-link{position:fixed;top:-100px;left:1em;z-index:200;padding:.5em 1em;background:var(--light-plus)}.skip-link:focus{top:1em}a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
@media(max-width:991px){:root{--site-unit:calc(clamp(768px,100vw,991px)/52.125);--page-gutter:3em;--section:3.5em}h1{font-size:3.4em}h2{font-size:2.5em}.about-hero{gap:2.5em}.about-story h1{font-size:3em}.nav-links{display:none}.nav-inner>.btn{margin-left:auto}.path,.outside{gap:2em}.principles{gap:1.2em}}
@media(max-width:767px){:root{--site-unit:calc(clamp(480px,100vw,767px)/24.375);--page-gutter:1em;--section:3em}h1{font-size:2.65em}h2{font-size:2.1em}.nav-logo{position:absolute;left:var(--page-gutter);transform:none}.nav-inner{gap:.6em}.nav-links{font-size:.8em;gap:.8em}.nav-inner .btn{font-size:1em;padding-inline:1.25em}.nav-logo img{height:2.7rem}.path,.outside{grid-template-columns:minmax(0,1fr);gap:2em}.about-hero{gap:2em;padding-top:calc(var(--nav-h) + 2em);padding-bottom:3em}.about-story h1{font-size:2.65em}.story-lead{font-size:1.1em}.about-portrait-column{width:min(100% - 1em,22em)}.principles,.experience-list,.education-list{grid-template-columns:minmax(0,1fr)}.experience-top{flex-wrap:wrap}.contact.container{padding:2em 1.25em}.page-footer{padding-bottom:6em}}
@media(max-width:479px){:root{--site-unit:calc(clamp(320px,100vw,479px)/24.375)}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* Homepage sticker outline, retaining About Me's title size and alignment. */
.about-story h1{position:relative;isolation:isolate}
.about-title-word{position:relative;display:inline-block;isolation:isolate;line-height:inherit}
.about-title-word::before,.about-title-word::after{content:attr(data-text);position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none}
.about-title-word::before{z-index:-2;color:var(--dark);-webkit-text-stroke:.25em var(--dark);filter:drop-shadow(0 .1em 0 rgb(0 0 0 / .15))}
.about-title-word::after{z-index:-1;color:#fff;-webkit-text-stroke:.21em #fff}

.principle{position:relative}.principle:focus-visible{outline:3px solid var(--light);outline-offset:5px}