.about-page .about-hero{padding:42px 9vw 95px;position:relative;overflow:hidden}
.about-page .about-hero-top{display:flex;justify-content:space-between;align-items:center}
.about-page .about-hero-top span{font:10px "DM Mono";letter-spacing:.09em;text-transform:uppercase;color:#666}
.about-page .about-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:center;margin-top:70px}
.about-page .about-hero h1{font-size:clamp(64px,9vw,126px);line-height:.82;letter-spacing:-.09em;margin:0}
.about-page .about-hero h1 em{font-family:"Playfair Display";font-weight:600;color:#d93b22;letter-spacing:-.07em}
.about-page .about-intro{font-size:17px;line-height:1.65;max-width:450px;margin:34px 0 22px}
.about-page .about-tags{display:flex;flex-wrap:wrap;gap:7px}
.about-page .about-tags span{padding:9px 12px;font:9px "DM Mono";letter-spacing:.07em;text-transform:uppercase}
.about-page .about-tags span:nth-child(1){background:#ffc928}
.about-page .about-tags span:nth-child(2){background:#d00059;color:white}
.about-page .about-tags span:nth-child(3){background:#1758d5;color:white}
.about-page .portrait-stage{position:relative;max-width:440px;justify-self:end;width:100%;padding:0 22px 22px 0}
.about-page .portrait-stage:before{content:"";position:absolute;inset:8% 0 0 13%;background:#d93b22}
.about-page .portrait-stage:after{content:"";position:absolute;width:130px;height:130px;border:1px solid #ffc928;border-radius:50%;right:-35px;top:-28px}
.about-page .portrait-stage img{position:relative;z-index:1;width:100%;height:520px;object-fit:cover;object-position:center 30%;filter:grayscale(100%)}
.about-page .portrait-note{position:absolute;z-index:2;left:-25px;bottom:44px;background:#ffc928;color:#111;padding:12px 15px;font:9px "DM Mono";letter-spacing:.08em;transform:rotate(-5deg)}
.about-page .approach-band{background:#111;color:#f5f2ed;padding:100px 9vw 105px}
.about-page .approach-band .eyebrow{color:#ffc928;margin:0 0 24px}
.about-page .approach-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw}
.about-page .approach-band h2{font-size:clamp(48px,7vw,92px);line-height:.88;letter-spacing:-.085em;margin:0}
.about-page .approach-band h2 em{font-family:"Playfair Display";font-weight:600;color:#ffc928}
.about-page .approach-lede{font-size:15px;line-height:1.7;color:#c9c5bf;max-width:430px;margin:12px 0 38px}
.about-page .question-list{border-top:1px solid #555}
.about-page .question{display:grid;grid-template-columns:105px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #555}
.about-page .question .qnum{font:10px "DM Mono";letter-spacing:.08em;color:#ffc928}
.about-page .question h3{font-size:22px;letter-spacing:-.05em;margin:0 0 8px}
.about-page .question p{font-size:12px;line-height:1.6;color:#c9c5bf;margin:0;max-width:440px}
.about-page .maker-section{padding:105px 9vw 100px;background:#e9e5de}
.about-page .maker-heading{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:end;margin-bottom:50px}
.about-page .maker-heading .eyebrow{margin:0 0 20px}
.about-page .maker-heading h2{font-size:clamp(48px,7vw,88px);line-height:.86;letter-spacing:-.085em;margin:0}
.about-page .maker-heading h2 em{font-family:"Playfair Display";font-weight:600;color:#d93b22}
.about-page .maker-heading p{font-size:14px;line-height:1.7;color:#555;max-width:410px;margin:0}
.about-page .maker-grid{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:12px;align-items:stretch}
.about-page .maker-card{min-height:265px;padding:22px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.about-page .maker-card h3{font-size:29px;line-height:.92;letter-spacing:-.07em;margin:0;position:relative;z-index:1}
.about-page .maker-card p{font-size:11px;line-height:1.55;max-width:220px;margin:12px 0 0;position:relative;z-index:1}
.about-page .maker-card small{font:9px "DM Mono";letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.about-page .maker-card.make{background:#ffc928}
.about-page .maker-card.read{background:#1758d5;color:white}
.about-page .maker-card.play{background:#d00059;color:white}
.about-page .maker-shape{position:absolute;width:160px;height:160px;border:1px solid currentColor;border-radius:50%;right:-35px;top:40px;opacity:.4}
.about-page .maker-card.read .maker-shape{border-radius:0;transform:rotate(22deg);border-style:dashed}
.about-page .maker-card.play .maker-shape{width:125px;height:125px;border-radius:0;transform:rotate(45deg)}
.about-page .oatmeal-note{margin-top:35px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #aaa;padding-top:18px;gap:20px}
.about-page .oatmeal-note strong{font-size:22px;letter-spacing:-.05em}
.about-page .oatmeal-note span{font:9px "DM Mono";letter-spacing:.08em;text-transform:uppercase;color:#666}
.about-page .closing{padding:90px 9vw;background:#d93b22;color:white;display:flex;justify-content:space-between;align-items:end;gap:30px}
.about-page .closing h2{font-size:clamp(42px,6vw,78px);line-height:.9;letter-spacing:-.08em;margin:0}
.about-page .closing h2 em{font-family:"Playfair Display";font-weight:600;color:#ffc928}
.about-page .closing a{font:11px "DM Mono";text-transform:uppercase;border-bottom:1px solid white;padding-bottom:8px;white-space:nowrap}
@media(max-width:760px){
.about-page .about-hero{padding:25px 6vw 70px}.about-page .about-hero-top span:last-child{max-width:150px;text-align:right}.about-page .about-hero-grid{grid-template-columns:1fr;gap:45px;margin-top:65px}.about-page .about-hero h1{font-size:clamp(60px,14vw,96px)}.about-page .about-intro{font-size:15px;margin-top:26px}.about-page .portrait-stage{justify-self:start;max-width:100%;padding-right:15px}.about-page .portrait-stage img{height:min(120vw,560px)}.about-page .portrait-note{left:-8px}.about-page .approach-band{padding:75px 7vw}.about-page .approach-layout{grid-template-columns:1fr;gap:32px}.about-page .approach-band h2{font-size:clamp(48px,11vw,76px)}.about-page .question{grid-template-columns:65px 1fr;gap:12px}.about-page .question h3{font-size:20px}.about-page .maker-section{padding:75px 7vw}.about-page .maker-heading{grid-template-columns:1fr;gap:22px}.about-page .maker-heading h2{font-size:clamp(48px,11vw,76px)}.about-page .maker-grid{grid-template-columns:1fr}.about-page .maker-card{min-height:210px}.about-page .oatmeal-note{display:block}.about-page .oatmeal-note span{display:block;margin-top:8px}.about-page .closing{padding:70px 7vw;display:block}.about-page .closing a{display:inline-block;margin-top:30px}
}

/* Build 27 readability pass */
.about-page .about-intro{font-size:17px;line-height:1.65;max-width:450px}
.about-page .approach-lede{font-size:16px;line-height:1.7}
.about-page .question p{font-size:14px;line-height:1.65}
.about-page .maker-heading p{font-size:15px;line-height:1.65}
.about-page .maker-card p{font-size:13px;line-height:1.6}
@media(max-width:760px){
  .about-page .about-intro{font-size:16px;line-height:1.6}
  .about-page .approach-lede,.about-page .maker-heading p{font-size:15px;line-height:1.65}
  .about-page .question p,.about-page .maker-card p{font-size:14px;line-height:1.6}
}


/* Build 28: comfortable reading size without turning About into an essay. */
.about-page .about-intro{font-size:17px;line-height:1.58;max-width:430px}
.about-page .approach-lede{font-size:16px;line-height:1.6}
.about-page .question p,.about-page .maker-heading p,.about-page .maker-card p{font-size:15px;line-height:1.58}
@media(max-width:760px){
  .about-page .about-intro{font-size:16px;line-height:1.55}
  .about-page .approach-lede,.about-page .question p,.about-page .maker-heading p,.about-page .maker-card p{font-size:15px;line-height:1.55}
  .about-page .approach-band,.about-page .maker-section{padding-top:62px;padding-bottom:62px}
  .about-page .maker-heading{margin-bottom:32px}
  .about-page .maker-card{min-height:190px}
}


/* Build 31: About page readability */
.about-page .about-hero-top span{font-size:11px}
.about-page .about-intro{font-size:18px;line-height:1.6;max-width:470px}
.about-page .approach-lede{font-size:17px;line-height:1.6}
.about-page .question .qnum{font-size:11px}
.about-page .question h3{font-size:24px}
.about-page .question p{font-size:16px;line-height:1.6}
.about-page .maker-heading p{font-size:16px;line-height:1.6}
.about-page .maker-card p{font-size:15px;line-height:1.55}
.about-page .oatmeal-note strong{font-size:24px}
.about-page .closing a{font-size:12px}
@media(max-width:760px){
 .about-page .about-intro{font-size:16px;line-height:1.6}
 .about-page .approach-lede,.about-page .question p,.about-page .maker-heading p,.about-page .maker-card p{font-size:15px;line-height:1.55}
 .about-page .question h3{font-size:21px}
 .about-page .maker-card{min-height:200px}
}

/* Build 32: readable supporting copy and labels across About. */
.about-page .about-hero-top span,.about-page .about-tags span,.about-page .portrait-note,.about-page .maker-card small,.about-page .oatmeal-note span,.about-page .closing a{font-size:12px}
.about-page .about-intro{font-size:18px;line-height:1.65;max-width:470px}
.about-page .approach-lede,.about-page .maker-heading p,.about-page .maker-card p{font-size:16px;line-height:1.65}
.about-page .question .qnum{font-size:12px}
.about-page .question p{font-size:16px;line-height:1.65}
.about-page .maker-card h3{font-size:31px}
.about-page .oatmeal-note strong{font-size:24px}
@media(max-width:760px){
 .about-page .about-intro{font-size:17px;line-height:1.6}
 .about-page .approach-lede,.about-page .question p,.about-page .maker-heading p,.about-page .maker-card p{font-size:16px;line-height:1.6}
 .about-page .about-hero-top span,.about-page .about-tags span,.about-page .portrait-note,.about-page .maker-card small,.about-page .oatmeal-note span,.about-page .closing a{font-size:11px}
}


/* BUILD 33: readable supporting copy and labels */
.about-page, .career-page { font-size: 16px; }
.about-page p, .career-page p, .about-page li, .career-page li {
  font-size: 16px; line-height: 1.65;
}
.about-page small, .career-page small, .about-page .eyebrow,
.career-page .eyebrow, .about-page .meta, .career-page .meta,
.about-page .date, .career-page .date, .about-page .label,
.career-page .label {
  font-size: 12px !important; line-height: 1.5; letter-spacing: .045em;
}

/* Build 36: finish the readable type scale on About, after page-specific rules */
.about-page .about-hero-top span,.about-page .about-tags span,.about-page .portrait-note,.about-page .maker-card small,.about-page .oatmeal-note span,.about-page .closing a{font-size:13px;line-height:1.5}
.about-page .about-intro{font-size:19px;line-height:1.65}
.about-page .approach-lede,.about-page .question p,.about-page .maker-heading p,.about-page .maker-card p{font-size:16px;line-height:1.7}
.about-page .question .qnum{font-size:13px}
@media(max-width:760px){
 .about-page .about-hero-top span,.about-page .about-tags span,.about-page .portrait-note,.about-page .maker-card small,.about-page .oatmeal-note span,.about-page .closing a{font-size:12px;line-height:1.55}
 .about-page .about-intro{font-size:18px;line-height:1.65}
 .about-page .approach-lede,.about-page .question p,.about-page .maker-heading p,.about-page .maker-card p{font-size:16px;line-height:1.65}
}