/* about — entity readout hero + two-column ledger */
.ahero{max-width:var(--wide); margin-inline:auto; padding:clamp(40px,7vh,88px) var(--gut) clamp(40px,6vh,72px)}
.ahero__in{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr); gap:clamp(28px,5vw,96px); align-items:start}
.ahero h1{font-size:clamp(2.4rem,5.2vw,4.6rem); font-weight:800; letter-spacing:-.04em; text-wrap:balance; margin-bottom:clamp(18px,2.6vh,28px); animation:fadeUp .9s var(--ease) both}
.ahero .lead{animation:fadeUp .9s var(--ease) .12s both}
/* the entity readout: a definition list styled as the instrument's readout card */
.entity{margin:0; background:var(--bg-3); border:1px solid var(--line-struct); border-radius:var(--radius-frame); padding:clamp(18px,2vw,26px); display:grid; gap:0; animation:fadeUp .9s var(--ease) .2s both}
.entity > div{display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:13px 0; border-bottom:1px solid var(--line-struct)}
.entity > div:last-child{border-bottom:0; padding-bottom:0}
.entity dt{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); flex:none}
.entity dd{margin:0; text-align:right; font-size:15px; color:var(--txt-2)}
.entity__addr{flex-direction:column; align-items:flex-start !important; gap:8px !important; padding-top:0 !important}
.entity__addr dd{text-align:left}
.entity__addr address{font-style:normal; font-family:var(--disp); font-weight:600; font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.3; color:var(--txt); letter-spacing:-.02em}
.entity__note{flex-direction:column; align-items:flex-start !important; gap:6px !important}
.entity__note dd{text-align:left; font-size:12px; letter-spacing:.04em; color:var(--warn); line-height:1.6}

/* 01 intro + framed photograph in the gutter */
.about-intro{display:grid; grid-template-columns:minmax(0,var(--measure)) minmax(300px,1fr); gap:clamp(28px,5vw,96px); align-items:start}
.about-intro .prose h2{margin-top:0; border-top:0; padding-top:0}
.about-intro__fig{position:sticky; top:calc(var(--rail-h) + 28px)}

/* the ledger: supply scope left, method right */
.ledger{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px; background:var(--line-struct); border:1px solid var(--line-struct); border-radius:var(--radius-frame); overflow:hidden}
.ledger__col{background:var(--bg); padding:clamp(24px,3vw,48px); min-width:0}
.ledger__col:first-child{background:var(--bg-2); display:flex; flex-direction:column}
/* A1-15: `margin-top:auto` pushed this note to the foot of the panel, leaving ~215px of
   empty --bg-2 in the middle of the column while the column beside it ran continuously --
   the widest dead area on the page. The two columns are parallel accounts, not a pair of
   equal-height cards; one is allowed to be shorter, and the hairline boundary already
   carries the shape. */
.ledger__col:first-child .note{padding-top:24px}
.ledger h2{font-size:clamp(1.5rem,2.6vw,2.3rem); display:flex; gap:18px; align-items:baseline}
.ledger h2 .num{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--txt-2); flex:none}
.ledger .lede{margin-bottom:clamp(20px,3vh,32px)}
.ledger .note{margin-top:20px; max-width:52ch}
.ledger .note a{color:var(--sig)}
.hairlist{list-style:none; border-top:1px solid var(--line-struct)}
.hairlist li{display:grid; grid-template-columns:3.2ch 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line-struct); font-size:15px; color:var(--txt)}
.hairlist li .mono{font-size:12px; letter-spacing:.12em; color:var(--dim); padding-top:.3em}
.hairlist a{color:var(--txt); transition:color .2s}
.hairlist a:hover{color:var(--sig)}
/* .steps .t is styled in site.css with the component (A4-03) */

/* cells without h3 (rhythm) */
.cell p.cell__t,.cell__t{font-family:var(--disp); font-size:clamp(1.05rem,1.4vw,1.3rem); font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--txt)}
.cell p a{color:var(--sig)}

/* 05 lines + figure */
.about-lines{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr); gap:clamp(20px,3vw,48px); align-items:start}

/* 07 standards */
.about-std{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); align-items:start}
.about-std .panel{max-width:none}
.about-std .panel a{color:var(--sig)}

/* 08 where */
.about-where{display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr); gap:clamp(24px,4vw,72px); align-items:start}
.about-where__addr{font-style:normal; font-family:var(--disp); font-size:clamp(1.2rem,1.9vw,1.7rem); line-height:1.35; letter-spacing:-.02em; color:var(--txt-2); padding-left:18px; border-left:2px solid var(--sig)}
.about-where__addr strong{display:block; color:var(--txt); font-weight:700; margin-bottom:6px}

@media (max-width:1180px){
  .ahero__in,.about-intro,.about-lines,.about-std,.about-where{grid-template-columns:1fr}
  .about-intro__fig{position:static}
  .ledger{grid-template-columns:1fr}
}
@media (max-width:720px){
  .entity > div{flex-direction:column; gap:6px; align-items:flex-start}
  .entity dd{text-align:left}
}

/* A2-08: the buyer list. `.hairlist` already exists for §02's six categories; this variant
   carries a lead-in phrase plus its reason on one row instead of a bare link. */
.hairlist--buyers li{align-items:baseline; font-size:15px; color:var(--txt-2); line-height:1.6}
.hairlist--buyers b{color:var(--txt); font-weight:600; margin-right:.5em}
.hairlist--buyers div{max-width:var(--exhibit); text-wrap:pretty}
/* The FRAME goes full-column; the PROSE inside it does not. Setting max-width:none here put
   a 166-character line on the page against a locked --measure of 68ch -- fixing a layout by
   breaking a lock, which is the one thing the review brief says not to do. */
/* the component's own cap (site.css) governs now -- this override is what kept about §04 at
   247px of empty frame after the cap was supposedly applied everywhere */
.hairlist--buyers div{max-width:var(--measure)}
#services .steps__h a{color:inherit}
#services .steps__h a:hover{color:var(--sig)}