/* /about/ page layout: masthead, letter, thesis ledger, studio cards.
   Shared system in pylon.css. No mockup kit -- nothing on this page is drawn. */
body{--acc:var(--indigo);--acc-txt:var(--indigo-txt)}
/* ---- masthead hero: no product plate, no portrait. The page opens on the
        claim itself, set wide, with a dateline rail underneath. ---- */
.mh{border-bottom:1px solid var(--rule);padding:clamp(3.5rem,9vh,6.5rem) 0 0}
.mh-k{grid-column:1/13;display:flex;align-items:baseline;gap:.875rem;padding-bottom:1.25rem;border-bottom:1px solid var(--rule-2);color:var(--t4)}
.mh-k b{color:var(--t2);font-weight:500}
.mh-k .sp{flex:1}
@media(max-width:760px){.mh-k .r{display:none}}
.mh-h{grid-column:1/12;padding:clamp(2.25rem,5vw,3.75rem) 0 clamp(1.5rem,3vw,2.25rem);font-size:clamp(2.5rem,7.4vw,6.5rem);letter-spacing:-.052em;line-height:.9;font-weight:500}
.mh-h .fade{color:var(--fade)}
@media(max-width:1024px){.mh-h{grid-column:1/-1}}
.mh-l{grid-column:1/6;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.mh-r{grid-column:7/13;padding-bottom:clamp(2.5rem,5vw,3.5rem);display:flex;flex-direction:column;justify-content:flex-end;gap:1.5rem}
@media(max-width:1024px){.mh-l,.mh-r{grid-column:1/-1}.mh-l{padding-bottom:2rem}}
.mh-l .body{max-width:40ch}
.mh-act{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:clamp(1.5rem,3vw,2rem)}
.mh-seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);padding-top:1.25rem;border-top:1px solid var(--rule)}
@media(max-width:560px){.mh-seats{grid-template-columns:1fr;gap:1.125rem}}
.mh-seats div b{display:block;font-size:clamp(1rem,1.3vw,1.125rem);font-weight:500;letter-spacing:-.03em;color:var(--t1);line-height:1.25}
.mh-seats div span{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);line-height:1.55}
/* ---- letter ---- */
.lt-h{grid-column:1/5}
.lt-b{grid-column:6/12}
@media(max-width:1024px){.lt-h,.lt-b{grid-column:1/-1}.lt-b{margin-top:2.5rem}}
.lt-b p{font-size:1.0625rem;line-height:1.75;color:var(--t2);text-wrap:pretty}
.lt-b p+p{margin-top:1.375rem}
.lt-b p b{color:var(--t1);font-weight:500}
.pull{margin:2.25rem 0;padding:.25rem 0 .25rem 1.5rem;border-left:2px solid var(--acc);font-size:clamp(1.1875rem,1.8vw,1.4375rem);font-weight:500;letter-spacing:-.03em;line-height:1.3;color:var(--t1)}
/* letterhead signature: the portrait belongs here, at the size of a stamp */
.sign{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:1.125rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.sign .pt{width:64px;height:64px;overflow:hidden;border:1px solid var(--rule);background:var(--ink-2)}
.sign .pt img{width:100%;height:100%;object-fit:cover;object-position:center 14%;filter:grayscale(.4) contrast(1.04)}
.sign b{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.025em;color:var(--t1)}
.sign span{display:block;margin-top:.25rem;font-size:.9375rem;color:var(--t3)}
.sign em{display:block;margin-top:.5rem;font-style:normal;font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t4)}
.lt-h .aside{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:1.125rem}
.lt-h .aside div b{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);margin-bottom:.375rem}
.lt-h .aside div span{font-size:.9375rem;color:var(--t2);line-height:1.5}
/* ---- thesis ---- */
.th{border-top:1px solid var(--rule);margin-top:clamp(3rem,5vw,4.5rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(2.5rem,5vw,4.5rem)}
@media(max-width:860px){.th{grid-template-columns:1fr}}
.th-r{padding:1.75rem 0;border-bottom:1px solid var(--rule-2)}
.th-r b{display:block;font-size:1.125rem;font-weight:500;letter-spacing:-.025em;color:var(--t1);margin-bottom:.625rem}
.th-r span{display:block;font-size:.9375rem;line-height:1.65;color:var(--t3)}
/* ---- studio ---- */
.st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)}
@media(max-width:1024px){.st{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.st{grid-template-columns:1fr}}
.st-c{display:flex;flex-direction:column;gap:.875rem;padding:1.625rem var(--gut) 1.75rem 0;position:relative;transition:background .35s var(--e)}
.st-c+.st-c{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
@media(max-width:1024px){.st-c:nth-child(3){border-left:0;padding-left:0}.st-c:nth-child(n+3){border-top:1px solid var(--rule-2)}}
@media(max-width:620px){.st-c+.st-c{border-left:0;padding-left:0;border-top:1px solid var(--rule-2)}}
.st-c::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--sc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.st-c:hover::before{transform:scaleX(1)}
.st-t{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sc)}
.st-t .glyph{width:12px;height:12px;flex:none}
.st-t i{width:6px;height:6px;background:var(--sc);font-style:normal;flex:none}
.st-c h3{font-size:1.125rem;font-weight:500;letter-spacing:-.025em;color:var(--t1);line-height:1.25}
.st-c p{font-size:.875rem;line-height:1.6;color:var(--t3);flex:1}
.st-c .lnk{align-self:flex-start;margin-top:auto}