.about-main {max-width:1320px;margin:auto;padding:64px var(--gutter) 72px;}
.about-intro {display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;padding-bottom:64px;}
.about-intro h1 {font-size:clamp(40px,4.9vw,64px);line-height:1.1;letter-spacing:-.05em;margin:24px 0;}
.about-intro h1 span {color:var(--blue);}
.about-lead {font-size:21px;line-height:1.65;color:var(--muted);max-width:560px;}
.about-intro-note {font-size:14px;line-height:1.7;color:var(--blue);margin-top:28px;}
.about-visual {margin:0;min-width:0;}
.about-artwork {padding:18px;background:linear-gradient(145deg,#edf2fa,#efede8);border:1px solid #dce3ef;border-radius:20px;box-shadow:0 16px 30px #23344a0d;transform:rotate(2deg);}
.visual-label {display:flex;align-items:center;gap:10px;font-size:11px;color:#5f6e86;padding:4px 0 16px;}.visual-label>span {width:22px;height:4px;border-radius:3px;background:#3184f5;flex-shrink:0;}
.about-artwork>img {display:block;width:100%;height:360px;object-fit:cover;object-position:center 32%;border-radius:10px;border:1px solid #fff;}
.visual-caption {display:flex;justify-content:space-between;padding:18px 5px 2px;font-size:14px;color:var(--blue);}
.about-visual figcaption {font-size:12px;line-height:1.6;color:var(--muted);margin-top:22px;text-align:center;}
.about-story {display:grid;grid-template-columns:1fr 1.25fr;gap:72px;border-top:1px solid var(--line);padding:52px 0;}
.about-story h2,.about-principles h2,.about-contact h2 {font-size:clamp(28px,3vw,38px);line-height:1.2;letter-spacing:-1.2px;margin:20px 0;}
.story-copy p {font-size:17px;color:var(--muted);line-height:1.75;margin:0 0 20px;}
.about-link {display:inline-flex;align-items:center;gap:20px;font-size:15px;color:var(--blue);padding:12px 0;text-decoration:none;}.about-link:hover {text-decoration:underline;text-underline-offset:5px;}.about-link:focus-visible {outline:2px solid var(--blue);outline-offset:5px;}
.about-principles {border-top:1px solid var(--line);padding:48px 0 52px;}
.principles-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px;}
.principles-grid article {padding:24px;border:1px solid #dde3ed;border-radius:16px;background:#ffffff55;}
.principle-symbol {display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#e8eef9;color:var(--blue);font-size:28px;margin-bottom:22px;}
.principle-symbol svg {width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;}
.principles-grid h3 {font-size:21px;line-height:1.25;letter-spacing:-.7px;margin:0 0 14px;}
.principles-grid p {color:var(--muted);font-size:16px;line-height:1.7;margin:0;}
.about-contact {border-top:1px solid var(--line);text-align:center;padding-top:44px;}
.about-contact>p:not(.eyebrow) {color:var(--muted);font-size:18px;line-height:1.65;max-width:630px;margin:20px auto;}
.about-contact .course-cta {font-size:16px;}
.about-direct {justify-content:center;margin-top:28px;font-size:14px;gap:24px;}
@media(max-width:1000px) {.about-intro {gap:32px;}.about-intro h1 {font-size:44px;}.about-lead {font-size:19px;}.about-artwork>img {height:320px;}.about-story {gap:36px;}.principles-grid {gap:16px;}.principles-grid article {padding:20px;}}
@media(max-width:750px) {.about-main {padding-top:40px;}.about-intro,.about-story {grid-template-columns:1fr;}.about-intro {gap:34px;padding-bottom:42px;}.about-visual {max-width:500px;width:100%;justify-self:center;}.about-story {gap:12px;padding:38px 0;}.principles-grid {grid-template-columns:1fr;}.about-principles {padding:36px 0;}.about-intro h1 {font-size:clamp(38px,7vw,50px);}.about-direct {flex-wrap:wrap;gap:12px 24px;}.about-contact .course-cta {font-size:14px;padding:18px 21px;}}
@media(max-width:400px) {.about-artwork {padding:14px;}.about-artwork>img {height:300px;}.visual-label {font-size:10px;}}

.about-name-story {display:grid;grid-template-columns:1fr 1.25fr;gap:72px;border-top:1px solid var(--line);padding:44px 0;}
.about-name-story h2 {font-size:clamp(28px,3vw,38px);line-height:1.2;letter-spacing:-1.2px;margin:20px 0;}
.about-name-story>div>p:not(.eyebrow) {font-size:17px;color:var(--muted);line-height:1.75;margin:0 0 20px;}
@media(max-width:1000px) {.about-name-story {gap:36px;}}
@media(max-width:750px) {.about-name-story {grid-template-columns:1fr;gap:12px;padding:38px 0;}}

/* Preserve the complete landscape illustration in the About frame. */
.about-artwork>img {height:auto;object-fit:contain;object-position:center;}