.about-stage{container-type:inline-size;container-name:about}
.about-channels{margin-top:48px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.about-channels h2{font-size:24px;line-height:1.45;letter-spacing:-.025em;margin:0 0 24px;word-break:keep-all;overflow-wrap:anywhere}
.about-channel-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.about-channel-links a{display:flex;align-items:center;gap:12px;min-width:0;min-height:64px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-decoration:none;font-size:16px;font-weight:600}
.about-channel-links img{width:28px;height:28px;flex:none;object-fit:contain}
.about-channel-links .channel-arrow{margin-left:auto;color:var(--muted);font-size:18px}
.about-channel-links a:hover{border-color:var(--accent)}
.about-channel-links a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@container about (max-width:480px){.about-channels{padding:20px;margin-top:32px}.about-channels h2{font-size:21px;margin-bottom:20px}.about-channel-links{grid-template-columns:1fr;gap:10px}.about-channel-links a{min-height:60px}}
.about-review{padding:16px;margin-bottom:28px;background:var(--surface);border:1px solid var(--line);border-radius:8px;font-size:13px}
.about-review nav{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.about-review a{padding:8px 14px;min-height:44px;display:flex;align-items:center;border:1px solid var(--accent);border-radius:6px;text-decoration:none}
.about-review a[aria-current]{background:var(--accent);color:#fff}
.about-review small{display:block;color:var(--muted)}
.about-design .back{margin-bottom:28px}
.about-hero{display:grid;gap:24px}
.about-text h1{font-size:30px;line-height:1.4;font-weight:700;letter-spacing:-.8px;margin-bottom:20px}
.about-intro{font-size:16px;line-height:1.8;margin-bottom:20px}
.about-case-link{min-height:48px;display:flex;align-items:center;font-size:15px;font-weight:700}
.work-portrait{margin:0 auto;width:100%;max-width:400px;min-width:0}
.work-portrait img{display:block;width:100%;height:auto;object-fit:contain;border-radius:8px}
.work-portrait figcaption{margin-top:10px;font-size:14px;line-height:1.65;color:var(--muted);word-break:keep-all}
.about-support{margin-top:36px}
.about-support h2{font-size:22px;line-height:1.45;margin-bottom:24px}
.about-photo-pair{display:grid;gap:28px}
.about-senior .about-photo-pair .work-portrait{max-width:320px}
.about-junior{max-width:800px;margin-inline:auto;margin-bottom:64px}
.about-junior .work-portrait img{border-radius:0}
.about-junior .about-text h1{color:var(--accent)}
.about-junior .about-intro{line-height:27px;margin-bottom:16px}
.about-junior .about-case-link{font-size:16px;font-weight:400;text-decoration:underline;width:fit-content}
.about-junior .about-support{margin-top:40px}
.about-junior .about-support h2{font-size:24px;line-height:34px;font-weight:600;margin-bottom:20px}
.about-junior .about-photo-pair{gap:32px}
@container about (max-width:300px){.about-text h1{font-size:28px}}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
@container about (min-width:600px){.about-senior .about-photo-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.about-senior .about-photo-pair .work-portrait{max-width:300px}}
}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
@container about (min-width:680px){
 .about-junior .about-hero{grid-template-columns:54% 40%;gap:6%}
 .about-junior .about-text{padding-top:40px}
 .about-junior .about-text h1{font-size:36px;line-height:1.35;letter-spacing:-.025em;margin-bottom:24px}
 .about-junior .about-intro{font-size:17px;line-height:29px;max-width:376px;margin-bottom:24px}
 .about-junior .about-support{margin-top:64px}
 .about-junior .about-support h2{margin-bottom:24px}
 .about-junior .about-photo-pair{max-width:640px;margin-inline:auto;grid-template-columns:336px 240px;gap:64px;align-items:start}
 .about-junior .about-photo-pair .work-portrait:last-child{margin-top:72px}
}
}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
@container about (min-width:720px){
 .about-senior .about-hero{grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:center}
 .about-senior .about-text h1{font-size:32px;line-height:1.35;margin-bottom:24px}
 .about-senior .about-intro{font-size:17px;max-width:390px;margin-bottom:24px}
 .about-senior .about-case-link{width:fit-content;padding-inline:20px}
 .about-senior .about-support{margin-top:48px}
}
}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
@container about (min-width:800px){
 .about-senior .about-hero{grid-template-columns:minmax(0,1fr) 360px;gap:32px}
 .about-senior .about-text h1{font-size:36px}
 .about-junior .about-text h1{font-size:40px}
}
}

/* Approved action style applies to both alternatives. */
.about-junior .about-case-link{font-size:15px;font-weight:700;text-decoration:none;width:100%;padding-inline:20px}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
@container about (min-width:680px){.about-junior .about-case-link{width:fit-content}}
}

/* One embedded album asset; preserve its full frame at every viewport. */
.central-work-album{margin:0;width:100%;min-width:0}
.central-work-album img{display:block;width:100%;height:auto}


/* Keep the entire B album and heading inside the viewport's fixed bars. */
.about-junior .central-work-album img{max-height:calc(100svh - 260px);object-fit:contain}
.about-junior .central-work-album picture{display:block}


.about-metric{color:var(--accent);font-size:22px;font-weight:700;line-height:1.5;margin:0 0 20px}
.about-metric [data-about-count]{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.about-strengths{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:18px}
.about-strengths li{min-width:0}
.about-strengths strong{display:block;font-size:16px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.about-strengths p{font-size:15px;line-height:1.7;color:var(--muted);margin:4px 0 0;word-break:keep-all;overflow-wrap:anywhere}
.about-junior .about-text{min-width:0}
@media(min-width:1200px) and (hover:hover) and (pointer:fine){
 @container about (min-width:680px){.about-junior .about-text{padding-top:0}.about-junior .about-text h1{font-size:34px}.about-junior .about-hero{align-items:center}}
}