.co-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.co-block { padding: clamp(22px, 2.8vw, 40px); }
.co-block h2 { margin: 0 0 16px; font-size: var(--t-h3); letter-spacing: .05em; }
.info { margin: 0; }
.info div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.info dt { color: var(--muted); font-size: 14px; }
.info dd { margin: 0; font-weight: 500; line-height: 1.8; }
.info a { color: var(--blue); }
.hist { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.hist::before { content: ""; position: absolute; left: 33px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--sky), var(--blue)); border-radius: 2px; }
.hist li { display: flex; gap: 22px; align-items: baseline; padding: 0 0 26px; position: relative; }
.hist .y { flex: none; width: 60px; text-align: center; font: 700 22px/1 var(--en); color: var(--blue); background: #fff; padding: 6px 0; position: relative; letter-spacing: .04em; }
.hist p { margin: 0; line-height: 1.8; }
.logos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 0 0 18px; }
.lg { margin: 0; border-radius: var(--r-md); padding: clamp(28px, 4vw, 52px); display: grid; place-items: center; position: relative; }
.lg img { width: min(100%, 360px); }
.lg.light { background: var(--bg); }
.lg.dark { background: var(--navy); }
.lg figcaption { position: absolute; left: 14px; bottom: 10px; font-size: 11.5px; color: var(--muted); }
.lg.dark figcaption { color: #8a99b8; }
.brand-note { margin: 0 0 20px; color: var(--muted); }
.swatch { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.swatch li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--bg); }
.swatch i { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; }
.swatch b { font-size: 14px; line-height: 1.4; }
.swatch code { font: 500 12.5px/1.4 ui-monospace, Menlo, monospace; color: var(--muted); }
.fonts { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fonts div { padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.fonts dt { font-size: 12px; color: var(--muted); }
.fonts dd { margin: 2px 0 0; font-weight: 700; }
@media (max-width: 860px) {
  .co-grid, .logos, .fonts { grid-template-columns: 1fr; }
}
.hist li:last-child { padding-bottom: 0; }