/* About / layout tidy (about-layout-01, October 5). Cody picked "a": jump links, the bio first and compact, one measure for
   every section, the Stack as six closed groups, Follow last. Written by _source/build-about-layout.py.
   The accepted contact grid (about-grid-02) is not styled here: about-links.css owns it, untouched. */

/* header (about-header-01): the room family's heading (art, title, lede, back link) on the left and an
   "On this page" list on the right, where the other rooms carry their side panel */
body.page-about .about-top{align-items:end}
body.page-about .about-top .kicker{flex-wrap:wrap;row-gap:0;max-width:none}
body.page-about .about-top .kicker span{white-space:nowrap}
/* the slash rides at the end of a line, so a wrapped line starts with a word, never a lone slash */
body.page-about .about-top .kicker span+span::before{content:none}
body.page-about .about-top .kicker span:not(:last-child)::after{content:"/";margin:0 10px}
body.page-about .about-jump{display:block;align-self:end;border:1px solid currentColor;background:var(--paper,#fff)}
body.page-about .about-jump-h{margin:0;padding:10px 16px;font:11px/1.2 var(--meta);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid currentColor}
body.page-about .about-jump ol{list-style:none;margin:0;padding:0}
body.page-about .about-jump li+li{border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
body.page-about .about-jump a{display:grid;grid-template-columns:28px minmax(0,1fr) 16px;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:11px 16px;min-height:52px;color:inherit;text-decoration:none}
body.page-about .about-jump .n{grid-row:1/3;font:11px/1 var(--meta);letter-spacing:.06em;opacity:.55}
body.page-about .about-jump .t{font-weight:600;font-size:16px;line-height:1.2}
body.page-about .about-jump .d{grid-column:2;font-size:13px;line-height:1.3;opacity:.7}
body.page-about .about-jump .a{grid-column:3;grid-row:1/3;font-size:16px;transition:transform .15s}
body.page-about .about-jump a:hover,body.page-about .about-jump a:focus-visible{background:#000;color:#fff}
body.page-about .about-jump a:hover .a{transform:translateX(3px)}
body.page-about .about-jump a:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
@media (prefers-reduced-motion:reduce){body.page-about .about-jump .a{transition:none}}
@media (max-width:1100px){body.page-about .about-jump{max-width:520px;width:100%}}

/* one measure and one rhythm: every section sits in the contact grid's 840px column */
body.page-about #heraldic,body.page-about #hooks,body.page-about #follow{max-width:840px;margin-inline:auto}
body.page-about #heraldic,body.page-about #contact,body.page-about #stack,body.page-about #hooks,body.page-about #follow{scroll-margin-top:64px}
body.page-about #contact{margin-top:56px}
body.page-about .stack{margin-top:56px}

/* About me: the same shield, knights, cartouche and crafts, packed tighter */
body.page-about .ach{padding:22px 0 20px}
body.page-about .quarters{grid-template-columns:repeat(4,minmax(0,1fr))}
body.page-about .quarters a{min-height:0;height:100%}
@media (min-width:861px){
  body.page-about .ach{grid-template-columns:92px minmax(0,1fr) 92px;gap:16px 20px}
  body.page-about .ach .knight img{height:176px}
  body.page-about .ach .shield img{width:128px}
  body.page-about .ach .centre{gap:12px}
}
@media (max-width:860px){
  body.page-about .quarters{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-about #contact,body.page-about .stack{margin-top:44px}
}

/* Stack: six closed groups, name and count on each; open one, or all */
body.page-about .stack-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:end}
body.page-about .stack-heading h2{grid-column:1/-1}
body.page-about .stack-heading .stack-all{margin:0 0 24px;padding:7px 12px;font-size:11px;white-space:nowrap}
body.page-about .stack .stack-grid{grid-template-columns:minmax(0,1fr);gap:8px}
body.page-about details.stack-group{padding:0}
body.page-about .stack-group>summary{display:flex;align-items:center;gap:12px;padding:14px 22px;min-height:44px;cursor:pointer;list-style:none}
body.page-about .stack-group>summary::-webkit-details-marker{display:none}
body.page-about .stack-group>summary h3{margin:0;flex:1 1 auto;min-width:0}
body.page-about .stack-group>summary .stack-count{font:11px var(--meta);letter-spacing:.06em;text-transform:uppercase;color:var(--stack-muted);white-space:nowrap}
body.page-about .stack-group>summary::after{content:"+";font:400 20px/1 var(--meta);width:14px;text-align:center}
body.page-about details.stack-group[open]>summary::after{content:"\2212"}
body.page-about .stack-group>summary:hover h3{text-decoration:underline;text-underline-offset:3px}
body.page-about .stack-group>summary:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
body.page-about details.stack-group>ul{padding:0 22px 6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
body.page-about details.stack-group .stack-item{align-content:start}
@media (max-width:620px){
  body.page-about .stack-group>summary{padding:12px 14px}
  body.page-about details.stack-group>ul{padding:0 14px 4px;grid-template-columns:minmax(0,1fr)}
}

/* Since your last visit, then Follow last: four slots in two rows inside the measure */
body.page-about #hooks .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){body.page-about #hooks .slots{grid-template-columns:minmax(0,1fr)}}

/* flock-links-01: the Printed objects card carries a second link, 012 DDD Flock camera, under the card's own link */
body.page-about .quarters li.has-also{display:flex;flex-direction:column}
body.page-about .quarters li.has-also>a:not(.craft-also){flex:1 1 auto;height:auto}
body.page-about .quarters a.craft-also{flex:0 0 auto;height:auto;min-height:44px;flex-direction:row;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--ink);font:12px/1.3 var(--meta);letter-spacing:.04em}
body.page-about .quarters a.craft-also .craft-also-no{opacity:.6}
body.page-about .quarters a.craft-also .craft-also-name{flex:1 1 auto;min-width:0}
body.page-about .quarters a.craft-also:focus-visible{outline:2px solid currentColor;outline-offset:-4px}