/* about.css — About: intro, timeline ("The Long Way Round"), quote panel and the PhD dream passage. */

.about{ padding-top: 55px; padding-bottom: 0px; }
.about-lead{ display: flex; gap: 80px; align-items: center; justify-content: space-between; margin-bottom: 46px; }
.about-lead .eyebrow{ color: var(--muted); display: block; margin-bottom: 20px; }
.about-lead h2{ font-size: clamp(27px, 3.55vw, 55px); line-height: 1.17; letter-spacing: -0.01em; }
.about-lead > p{ max-width: 360px; font-size: 12px; color: var(--muted); }
.studio-grid{ display: grid; grid-template-columns: 1.1fr 1.15fr 0.72fr; border-top: 1px solid var(--line); }
.panel-heading{ font-size: 16px; letter-spacing: -0.035em; font-weight: 600; margin-bottom: 30px; }
.education-panel{ padding: 29px 35px 34px 0px; }
.education-panel > .eyebrow{ font-size: 10px; }
.education-row{ display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 14px 0px; border-bottom: 1px solid var(--line); font-size: 11px; }
.education-row strong{ font-weight: 600; }
.education-row > span{ font-size: 9px; color: var(--red); }
.education-row p{ grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.6; }
.skills-heading{ margin: 24px 0px 14px; }
.skill-tags{ display: flex; flex-wrap: wrap; gap: 7px; }
.skill-tags > span{ padding: 6px 9px; border: 1px solid rgb(48, 40, 42); font-size: 9px; color: rgb(194, 189, 185); line-height: 1.4; }
.software-row{ display: flex; gap: 14px; margin-top: 24px; }
.software-row img{ width: 26px; height: 26px; opacity: 0.8; transition: opacity 0.2s, transform 0.3s; }
.software-row img:hover{ opacity: 1; transform: translateY(-3px); }
.process-panel{ border-left: 1px solid var(--line); padding: 29px 32px 30px; }
.process-list{ position: relative; }
.process-track{ position: absolute; left: 48px; top: 9px; bottom: 36px; width: 1px; background: rgb(51, 35, 38); }
.process-track > div{ height: 100%; background: var(--red); transform-origin: center top; }
.process-row{ display: grid; grid-template-columns: 24px 20px 1fr; gap: 15px; padding-bottom: 27px; position: relative; align-items: start; }
.process-row:last-child{ padding-bottom: 0px; }
.process-num{ color: var(--red); font-size: 20px; line-height: 1.3; }
.process-node{ height: 14px; width: 14px; border: 1px solid var(--red); border-radius: 50%; margin-top: 5px; background: var(--bg); position: relative; }
.process-node::after{ content: ""; position: absolute; inset: 4px; background: var(--red); border-radius: 50%; }
.process-row h4{ font-size: 11px; font-weight: 700; line-height: 1.5; margin-bottom: 4px; }
.process-row p{ font-size: 10px; color: var(--muted); line-height: 1.65; max-width: 260px; }
.quote-panel{ padding: 30px 28px; background: linear-gradient(140deg, rgb(139, 15, 27), rgb(65, 8, 15)); display: flex; flex-direction: column; align-items: start; position: relative; overflow: hidden; border-left: 1px solid rgb(173, 26, 42); }
.quote-panel::before{ content: ""; position: absolute; width: 200%; height: 45px; background: rgba(191, 32, 48, 0.17); transform: rotate(-45deg); top: 80px; left: -65%; pointer-events: none; }
.quote-mark{ font-size: 76px; height: 55px; color: rgb(239, 56, 72); }
.quote-panel blockquote{ font-size: clamp(17px, 1.8vw, 27px); line-height: 1.4; letter-spacing: -0.035em; margin: 24px 0px; font-weight: 400; z-index: 1; }
.quote-panel blockquote em{ font-style: normal; color: rgb(255, 164, 172); }
.quote-panel > .handwriting{ font-size: 42px; transform: rotate(-10deg); margin-bottom: 40px; }
.quote-bottom{ font-size: 9px; line-height: 1.7; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.quote-symbol{ color: rgb(255, 66, 85); font-size: 29px; }
.journey{ padding-top: 48px; padding-bottom: 50px; }
.journey .section-heading{ margin-bottom: 34px; }
.journey .section-heading h2{ font-size: clamp(20px, 2.1vw, 31px); }
.journey-grid{ display: grid; grid-template-columns: 1.65fr 1fr; gap: 65px; }
.experience-row{ border-top: 1px solid var(--line); }
.experience-row:last-child{ border-bottom: 1px solid var(--line); }
.experience-row > button{ display: grid; grid-template-columns: 145px 1fr 24px; gap: 18px; align-items: center; width: 100%; text-align: left; min-height: 89px; padding: 12px 0px; }
.experience-date{ font-size: 9px; color: var(--muted); }
.experience-row h3{ font-size: 17px; letter-spacing: -0.04em; font-weight: 500; line-height: 1.5; }
.experience-place{ color: var(--muted); font-size: 10px; display: block; margin-top: 3px; }
.experience-row.is-open .experience-date, .experience-row.is-open > button > svg{ color: var(--red); }
.experience-row > div{ overflow: hidden; }
.experience-row p{ font-size: 11px; color: var(--muted); margin-left: 163px; padding-bottom: 24px; max-width: 450px; }

@media (min-width: 1600px){
.education-row{ font-size: 13px; }
.education-row p{ font-size: 12px; }
.process-row h4{ font-size: 13px; }
.skill-tags > span{ font-size: 11px; }
.studio-grid{ grid-template-columns: 1.1fr 1.15fr 0.72fr; }
}

@media (max-width: 1100px){
.about-lead{ gap: 40px; }
.about-lead > p{ max-width: 300px; }
.studio-grid{ grid-template-columns: 1fr 1.1fr 0.75fr; }
.education-panel{ padding-right: 22px; }
.process-panel{ padding-left: 22px; padding-right: 22px; }
.panel-heading{ font-size: 14px; }
.quote-panel{ padding: 30px 20px; }
.quote-panel blockquote{ font-size: 21px; }
.process-row{ gap: 10px; grid-template-columns: 21px 18px 1fr; }
.process-track{ left: 38px; }
.journey-grid{ gap: 35px; }
.experience-row > button{ grid-template-columns: 112px 1fr 20px; gap: 14px; }
.experience-row p{ margin-left: 126px; }
}

@media (max-width: 800px){
.about-lead{ gap: 30px; margin-bottom: 32px; }
.about-lead h2{ font-size: 29px; }
.about-lead > p{ font-size: 11px; max-width: 240px; }
.studio-grid{ grid-template-columns: 1fr 1fr; }
.education-panel{ padding-bottom: 25px; }
.process-panel{ padding-right: 0px; }
.quote-panel{ grid-column: 1 / -1; display: grid; grid-template-columns: 40px 1.6fr 1fr; gap: 20px; align-items: center; padding: 20px 25px; min-height: 150px; border-top: 1px solid rgb(173, 26, 42); }
.quote-panel blockquote{ font-size: 23px; margin: 0px; line-height: 1.4; }
.quote-panel blockquote br{ display: none; }
.quote-panel blockquote em{ display: block; }
.quote-mark{ height: 50px; }
.quote-panel > .handwriting{ font-size: 40px; margin: 0px; text-align: center; }
.quote-bottom{ display: none; }
.journey .section-heading h2{ font-size: 23px; }
.journey-grid{ gap: 30px; grid-template-columns: 1.3fr 1fr; }
.experience-row > button{ grid-template-columns: 1fr 24px; gap: 5px; min-height: 84px; padding: 14px 0px; }
.experience-date{ grid-column: 1; font-size: 8px; }
.experience-row > button > span:nth-child(2){ grid-column: 1; }
.experience-row > button > svg{ grid-area: 1 / 2 / 3; }
.experience-row h3{ font-size: 16px; }
.experience-row p{ margin-left: 0px; }
}

@media (max-width: 600px){
.about-lead{ flex-direction: column; gap: 18px; align-items: start; margin-bottom: 26px; }
.about-lead .eyebrow{ font-size: 8px; margin-bottom: 13px; }
.about-lead h2{ font-size: 32px; line-height: 1.14; }
.about-lead > p{ max-width: 100%; font-size: 11px; line-height: 1.8; }
.studio-grid{ grid-template-columns: 1fr; }
.panel-heading{ font-size: 16px; margin-bottom: 24px; }
.education-panel{ padding: 24px 0px; }
.education-panel > .eyebrow{ font-size: 9px; }
.education-row{ font-size: 11px; padding: 12px 0px; gap: 5px; }
.education-row p{ font-size: 10px; }
.skills-heading{ margin-top: 21px; }
.skill-tags{ gap: 6px; }
.skill-tags > span{ font-size: 9px; padding: 6px 8px; }
.software-row{ gap: 18px; margin-top: 20px; }
.software-row img{ width: 25px; height: 25px; }
.process-panel{ border-left: 0px; border-top: 1px solid var(--line); padding: 24px 0px; }
.process-row{ grid-template-columns: 22px 18px 1fr; gap: 14px; padding-bottom: 21px; }
.process-track{ left: 42px; bottom: 28px; }
.process-row h4{ font-size: 11px; }
.process-row p{ max-width: none; font-size: 10px; line-height: 1.7; }
.quote-panel{ grid-column: auto; grid-template-columns: 30px 1fr 65px; padding: 21px 17px; gap: 12px; min-height: 135px; margin-inline: -20px; }
.quote-panel blockquote{ font-size: 20px; letter-spacing: -0.04em; }
.quote-panel > .handwriting{ font-size: 27px; transform: rotate(-12deg); }
.quote-mark{ font-size: 64px; height: 50px; }
.journey{ padding-top: 30px; }
.journey .section-heading{ margin-bottom: 22px; }
.journey .section-heading h2{ font-size: 18px; max-width: 260px; }
.journey-grid{ grid-template-columns: 1fr; gap: 30px; }
.experience-row > button{ grid-template-columns: 85px 1fr 20px; min-height: 78px; gap: 11px; padding: 13px 0px; }
.experience-date{ grid-column: 1; font-size: 7px; }
.experience-row > button > span:nth-child(2){ grid-column: 2; }
.experience-row > button > svg{ grid-area: auto / 3; }
.experience-row h3{ font-size: 15px; }
.experience-place{ font-size: 8px; margin-top: 3px; }
.experience-row p{ margin-left: 96px; padding-bottom: 20px; font-size: 10px; }
}

@media (max-width: 370px){
.about-lead h2{ font-size: 28px; }
.experience-row > button{ grid-template-columns: 73px 1fr 18px; gap: 10px; }
.experience-row p{ margin-left: 83px; }
.experience-row h3{ font-size: 14px; }
.experience-date{ font-size: 6px; }
.quote-panel blockquote{ font-size: 17px; }
.quote-panel{ grid-template-columns: 25px 1fr 55px; }
.quote-panel > .handwriting{ font-size: 24px; }
}

.about-lead > p{ font-size: 14px; }
.education-row, .education-row p, .process-row p{ font-size: 12px; }
.education-row > span{ font-size: 10px; }
.process-row h4{ font-size: 12px; }
.skill-tags > span{ font-size: 10px; }
.experience-row p{ font-size: 13px; }
.experience-date{ font-size: 10px; }
.experience-place{ font-size: 11px; }

@media (max-width: 1100px) and (min-width: 601px){
/* cascade-pinned: overrides a rule in an earlier-loading file, so it must stay in this file */
.filters button, .process-row p, .education-row p, .project-caption h3{ font-size: 11px; }
.about-lead > p{ font-size: 12px; }
}

@media (max-width: 600px){
.about-lead > p{ font-size: 12px; }
.education-row p, .process-row p, .education-row{ font-size: 12px; }
.experience-date{ font-size: 8px; }
.experience-place{ font-size: 10px; }
.experience-row p{ font-size: 12px; }
}

@media (max-width: 370px){
.experience-row > button{ grid-template-columns: 80px 1fr 18px; }
.experience-row p{ margin-left: 0px; }
.experience-date{ font-size: 7px; }
.experience-place{ font-size: 9px; }
}

.dream{padding-bottom:clamp(30px,4vw,48px)}
.process-row.gap h4{color:var(--red)}
.process-row.gap p{font-style:italic}
.process-row.gap .process-node{border-style:dashed}
.quote-panel blockquote{text-wrap:balance;overflow-wrap:break-word}
.dream{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px 48px;margin-top:clamp(44px,6vw,80px);padding-top:clamp(30px,4vw,48px);border-top:1px solid var(--line)}
.dream h3{font-size:clamp(30px,4.4vw,60px);line-height:.98}
.dream-body{display:grid;gap:16px;max-width:60ch}
.dream-body p{color:var(--muted);font-size:14px;line-height:1.8}
.dream-body p:last-child{color:var(--ink)}

@media(max-width:820px){
.dream{grid-template-columns:1fr}
}