/* About and career history share a dedicated page. */
.about-page>.site-header{border-bottom:0}
.about-page .about-grid{display:block;margin-top:0}
.about-page .about-grid>h1{font-size:clamp(34px,4.2vw,61px);white-space:nowrap}

@media(max-width:700px){.about-page .about-grid>h1{font-size:clamp(22px,6.8vw,40px)}}

.about-page .about-bio{max-width:850px;margin-top:32px;font-size:18px;line-height:1.75;color:#455660}
.about-page .about-bio p+p{margin-top:20px}
@media(max-width:700px){.about-page .about-bio{margin-top:24px;font-size:16px}}

/* Keep the About introduction and principles in the site's dark palette. */
.about-page .about-section{background:var(--bg);color:var(--text)}
.about-page .about-bio,.about-page .principles p{color:var(--muted)}
.about-page .principles>div{border-color:var(--line)}

/* Match the home hero's type and quiet, grainy radial gradient. */
.about-page{--large-headline-size:56px}
@media(max-width:1000px){.about-page{--large-headline-size:55px}}
@media(max-width:700px){.about-page{--large-headline-size:clamp(24px,7vw,40px)}}
@media(max-height:600px){.about-page{--large-headline-size:clamp(22px,4vw,36px)}}
@media(max-height:500px) and (min-width:701px){.about-page{--large-headline-size:clamp(22px,2.8vw,28px)}}
.about-page #awards-title,.about-page .about-grid>h1,:is(.about-page,.home-page) .contact h2,.about-page #experience #experience-title{font-size:var(--large-headline-size);font-weight:500;line-height:1.04;letter-spacing:-2px;text-align:left;white-space:normal;padding:0 0 .08em;overflow:visible}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .about-page #awards-title,.about-page .about-grid>h1,:is(.about-page,.home-page) .contact h2,.about-page #experience #experience-title{
  background-image:url("assets/headline-grain.svg"),radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--surface) 90%,white 10%) 0%,#a4a4a4 22%,#dedede 42%,#f5f5f5 68%);
  background-size:180px 180px,180% 200%;background-repeat:repeat,no-repeat;background-position:0 0,0% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:about-headline-drift 15.652174s ease-in-out infinite alternate;
 }
}
@keyframes about-headline-drift{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
@media(prefers-reduced-motion:reduce){.about-page #awards-title,.about-page .about-grid>h1,:is(.about-page,.home-page) .contact h2,.about-page #experience #experience-title{animation:none;background-position:0 0,45% 50%}}
@media(forced-colors:active){.about-page #awards-title,.about-page .about-grid>h1,:is(.about-page,.home-page) .contact h2,.about-page #experience #experience-title{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;animation:none}}

@media(min-width:1200px){:is(.about-page,.home-page) .contact h2{white-space:nowrap}:is(.about-page,.home-page) .contact h2 br{display:none}}

.about-page #experience #experience-title{text-align:center}

/* Keep the journey introduction in view alongside the career history. */
.about-page #experience .experience-intro{text-align:center}
@media(min-width:1100px){
 .about-page #experience{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,.72fr);gap:48px;align-items:start}
 .about-page #experience .experience-intro{position:sticky;top:146px;align-self:start;max-width:none;margin:0;text-align:left}
 .about-page #experience #experience-title{text-align:left;margin-top:0}
 .about-page #experience .experience-timeline{width:100%;min-width:0;margin:0;max-width:none}
}

/* Match the Food Network case study body-copy treatment. */
.about-page .about-bio{font-size:16px;font-weight:400;line-height:1.75;color:#b9bec4;max-width:830px}

/* Principle cards echo the project card surfaces. */
.about-page .principles{gap:24px;align-items:stretch}
.about-page .principles>div{background:var(--surface);border:0;border-radius:var(--card-radius);padding:30px}
.about-page .principles h3{line-height:1.3}
@media(max-width:1000px) and (min-width:701px){.about-page .principles{gap:16px}.about-page .principles>div{padding:24px}}
@media(max-width:700px){.about-page .principles{gap:16px}.about-page .principles>div{padding:24px;border-radius:var(--card-radius)}}

/* Match the tighter shared heading-to-description rhythm. */
.about-page .about-bio{margin-top:10px}
.about-page #experience #experience-title{margin-bottom:10px}
.about-page #experience .experience-intro>p{margin-top:0}

/* Contact availability matches the timeline company-name typography. */
:is(.about-page,.home-page) .contact-availability{font-size:clamp(14px,1.7vw,24px);font-weight:600;line-height:1.2;letter-spacing:-.035em;color:var(--text)}
:is(.about-page,.home-page) .contact-availability+.contact-bottom{margin-top:24px}
@media(max-width:700px){:is(.about-page,.home-page) .contact-availability{font-size:18px}}

:is(.about-page,.home-page) .contact .email{font-size:16px;line-height:1.65}

/* Editorial awards lists, grouped by industry and company recognition. */
.about-page .awards-section{padding-block:40px 100px}
.about-page .awards-columns{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:72px;margin-top:40px}
.about-page .award-group-title{font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.about-page .awards-grid{list-style:none;padding:0;margin:0}
.about-page .awards-grid>li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:24px;row-gap:8px;padding:26px 0;border-top:1px solid var(--line)}
.about-page .awards-grid>li{align-content:start}
/* Share row heights between adjacent award groups. */
@media(min-width:701px){
 .about-page .awards-columns{grid-template-rows:auto repeat(3,auto);row-gap:0}
 .about-page .award-group{display:grid;grid-template-rows:subgrid;grid-row:1 / span 4}
 .about-page .award-group:first-child{grid-column:1}
 .about-page .award-group:last-child{grid-column:2}
 .about-page .award-group>.awards-grid{grid-row:2 / span 3;grid-template-rows:subgrid}
}
.about-page .award-year{grid-column:1;grid-row:1 / span 2;padding-top:5px;font-size:13px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.about-page .awards-grid h3{grid-column:2;font-size:24px;font-weight:500;line-height:1.3;letter-spacing:-.035em;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.about-page .awards-grid h3:has(+ p){margin-bottom:0}
.about-page .awards-grid p{grid-column:2;font-size:14px;line-height:1.7;color:var(--muted)}
.about-page .award-distinction{display:inline-block;padding:4px 8px;border-radius:6px;background:var(--surface);color:#c4c9cf;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:0;white-space:nowrap}
.about-page .award-distinction--gold{color:#d6bd83;background:#d6bd8310}
.about-page .awards-grid p a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.about-page .awards-grid p a:hover{color:var(--text);text-decoration-color:currentColor}
@media(max-width:1000px){.about-page .awards-columns{gap:36px}.about-page .awards-grid>li{column-gap:16px}.about-page .awards-grid h3{font-size:22px}}
@media(max-width:700px){.about-page .awards-section{padding-block:24px 64px}.about-page .awards-columns{grid-template-columns:1fr;gap:36px;margin-top:28px}.about-page .awards-grid>li{padding-block:22px}.about-page .award-group-title{margin-bottom:16px}}

.about-page .awards-grid .award-company-note{font-weight:300;font-style:italic}

.about-page .awards-grid h3.company-award-title{display:block}
.about-page .company-award-icon{display:inline-block;font-size:14px;line-height:1;vertical-align:middle}

/* Repeating italic banner from byshiro.com, moving right to left. */
@font-face{font-family:ShiroGambettaItalic;src:url("assets/gambetta-italic.woff2") format("woff2");font-style:italic;font-weight:300 700;font-display:swap}
:is(.about-page,.home-page) .design-marquee{overflow:hidden;width:100%;padding-block:68px;margin-bottom:40px;color:var(--muted)}
:is(.about-page,.home-page) .design-marquee-track{display:flex;width:max-content;animation:design-marquee-drift 80s linear infinite}
:is(.about-page,.home-page) .design-marquee-group{display:flex;flex-shrink:0;align-items:center}
:is(.about-page,.home-page) .design-marquee-group span{display:block;flex-shrink:0;padding-right:60px;font:italic 400 18px/68px ShiroGambettaItalic,Georgia,serif;letter-spacing:0;white-space:nowrap}
@keyframes design-marquee-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){:is(.about-page,.home-page) .design-marquee{padding-block:36px;margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){:is(.about-page,.home-page) .design-marquee-track{animation:none}}

:is(.about-page,.home-page) .contact .design-marquee{padding-block:0;margin-bottom:12px}
:is(.about-page,.home-page) .contact .design-marquee+h2{margin-top:0}

:is(.about-page,.home-page) .contact .email{display:inline-flex;align-items:center;gap:8px}
:is(.about-page,.home-page) .contact .email-icon{flex-shrink:0;width:18px;height:18px}

:is(.about-page,.home-page) .contact .email{border-bottom:0;text-decoration:none}

/* A gentle lift for the About principle cards on pointer devices. */
@media(hover:hover) and (pointer:fine){
 .about-page .principles>div{transition:transform .22s ease,box-shadow .22s ease}
 .about-page .principles>div:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
}
@media(prefers-reduced-motion:reduce){.about-page .principles>div{transition:none}.about-page .principles>div:hover{transform:none}}

@media(max-width:700px){.about-page #awards-title,.about-page .about-grid>h1,:is(.about-page,.home-page) .contact h2,.about-page #experience #experience-title{font-weight:600;letter-spacing:-1px}}

/* Match the larger mobile homepage introduction. */
@media(max-width:700px){
 .about-page .about-grid>h1,
 .about-page #experience #experience-title,
 .about-page #awards-title,
 .about-page .contact h2{font-size:30px;line-height:33px}
}

/* Match the desktop homepage introduction. */
@media(min-width:701px){
 .about-page .about-grid>h1,
 .about-page #experience #experience-title,
 .about-page #awards-title,
 :is(.about-page,.home-page) .contact h2{font-size:56px;font-weight:600;line-height:60px;letter-spacing:-2px}
}

/* Equal-sized award labels with a soft satin metal finish. */
.about-page .award-distinction{box-sizing:border-box;width:70px;text-align:center}
.about-page .award-distinction--gold,
.about-page .award-distinction--silver{
 border:0;
 box-shadow:inset 0 1px 0 #ffffff0d,inset 0 -1px 0 #00000020;
 text-shadow:none;
 font-weight:500;
}
.about-page .award-distinction--gold{
 color:#d6bd83;
 background:linear-gradient(165deg,#393222 0%,#463c28 45%,#362f21 100%);
}
.about-page .award-distinction--silver{
 color:#c6cbd2;
 background:linear-gradient(165deg,#30343a 0%,#3b4047 45%,#2d3238 100%);
}

/* Availability sits between the headline and biography at every size. */
.about-page .about-bio .about-role-status{font-size:clamp(22px,2vw,28px);font-style:italic;font-weight:400;line-height:1.35;color:var(--text,#f5f5f5);margin:0 0 24px}

/* Larger principle cards on tablet portrait and desktop. */
@media(min-width:1024px){
 .about-page .principles>div{padding:37.5px}
 .about-page .principles h3{font-size:27.5px;margin-bottom:15px}
 .about-page .principles p{font-size:20px}
}

.about-page .company-award-label{display:flex;align-items:center;gap:8px;white-space:nowrap}