/* About page. Builds on tokens, base, home.css and service.css (crumbs, closing band). */

.ns-ab-head{padding-block:var(--ns-s6) var(--ns-s7)}
.ns-ab-top{margin-top:var(--ns-s6);display:grid;gap:var(--ns-s5)}
.ns-ab-h1{margin:0;font-family:var(--ns-f-display);font-weight:800;font-stretch:82%;letter-spacing:-.035em;line-height:.9;font-size:clamp(3rem,1.6rem + 6vw,7rem)}
.ns-ab-lead{max-width:44ch;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.5}
@media (min-width:768px){
  .ns-ab-top{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ns-gutter);align-items:last baseline}
  .ns-ab-h1{grid-column:1 / 8}
  .ns-ab-lead{grid-column:8 / 13;margin:0}
}

.ns-ab-para{margin:0;max-width:62ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;color:var(--ns-ink)}
.ns-ab-note{margin:var(--ns-s4) 0 0;font-size:.875rem;color:var(--ns-ink-2);display:flex;gap:var(--ns-s3);align-items:baseline;flex-wrap:wrap}

/* three scales */
.ns-ab-scales{list-style:none;margin:var(--ns-s7) 0 0;padding:0;display:grid;gap:var(--ns-s6)}
@media (min-width:768px){.ns-ab-scales{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ns-gutter)}}
.ns-ab-scale .ns-ann{margin:var(--ns-s4) 0 var(--ns-s2)}
.ns-ab-scale .ns-body{margin:0}

/* split: heading left, text right on desktop */
.ns-ab-split{display:grid;gap:var(--ns-s5)}
@media (min-width:1024px){
  .ns-ab-split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ns-gutter)}
  .ns-ab-split > .ns-plate-h{grid-column:1 / 6;margin-bottom:0;align-self:start}
  .ns-ab-split > div:last-child{grid-column:6 / 13;border-top:1px solid var(--ns-ink);padding-top:var(--ns-s4)}
}

/* how we work */
.ns-ab-method{list-style:none;margin:0;padding:0;display:grid;gap:var(--ns-s6)}
@media (min-width:768px){.ns-ab-method{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ns-gutter)}}
.ns-ab-method li{border-top:1px solid var(--ns-ink);padding-top:var(--ns-s4);display:grid;gap:var(--ns-s3);justify-items:start;align-content:start}
.ns-ab-method .ns-h3,.ns-ab-method .ns-body{margin:0}
.ns-ab-more{margin:var(--ns-s6) 0 0}

/* principles */
.ns-ab-princ{list-style:none;margin:0;padding:0;display:grid;gap:var(--ns-s5)}
@media (min-width:768px){.ns-ab-princ{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ns-s6) var(--ns-gutter)}}
@media (min-width:1024px){.ns-ab-princ{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ns-ab-princ li{border-left:1px solid var(--ns-ink);padding-left:var(--ns-s4);display:grid;gap:var(--ns-s2);align-content:start}
.ns-ab-princ .ns-h3,.ns-ab-princ .ns-body{margin:0}

/* founder */
.ns-ab-name{margin:0 0 var(--ns-s4)}
.ns-ab-creds{list-style:none;margin:0;padding:0;border-top:1px solid var(--ns-rule)}
.ns-ab-creds li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ns-s4);padding:var(--ns-s3) 0;border-bottom:1px solid var(--ns-rule);line-height:1.5}
.ns-ab-creds .ns-tag{flex:none}
.ns-ab-split .ns-ph{color:var(--ns-ink-2)}   /* placeholders on light paper: keep the dashed ochre rule, darker text for contrast */
.ns-ab-fig{margin:var(--ns-s7) 0 0;border-top:1px solid var(--ns-ink);padding-top:var(--ns-s5)}
.ab-net{display:block;width:100%;height:auto}
.ab-edge{fill:none;stroke:var(--ns-ink-2);stroke-width:1;opacity:.55}
.ab-hub{fill:var(--ns-paper)}
.ns-ab-scales{margin-top:var(--ns-s5)}
.ns-ab-scale{border-top:1px solid var(--ns-rule);padding-top:var(--ns-s3)}
.ns-ab-scale .ns-ann{margin:0 0 var(--ns-s2)}
.ns-ab-letter p{margin:0 0 var(--ns-s4);max-width:62ch;font-size:clamp(1rem,.97rem + .2vw,1.125rem);line-height:1.65;color:var(--ns-ink)}
.ns-ab-sign{margin:var(--ns-s5) 0 0;display:grid;gap:4px;border-top:1px solid var(--ns-rule);padding-top:var(--ns-s4)}
.ns-ab-sname{font-family:var(--ns-f-display);font-weight:700;font-stretch:95%;font-size:1.25rem;letter-spacing:-.01em}
.ns-ab-founder{display:grid;gap:var(--ns-s5)}
.ns-abf-h{margin-bottom:0}
.ns-abf-side{display:grid;gap:var(--ns-s4);align-content:start;margin-top:var(--ns-s5)}
.ns-ab-photo{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:375/463;object-fit:cover;border:1px solid var(--ns-rule)}
.ns-ab-bio{border-top:1px solid var(--ns-rule);padding-top:var(--ns-s3)}
.ns-ab-bio .ns-ann{margin:0 0 var(--ns-s3)}
.ns-ab-bio p:not(.ns-ann){margin:0 0 var(--ns-s3);font-size:.9375rem;line-height:1.6;color:var(--ns-ink-2)}
.ns-ab-bio p:last-child{margin-bottom:0}
@media (min-width:1024px){
  .ns-ab-founder{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ns-gutter);row-gap:0;grid-template-rows:auto 1fr}
  .ns-abf-h{grid-column:1 / 6;grid-row:1}
  .ns-abf-side{grid-column:1 / 6;grid-row:2;margin-top:var(--ns-s5);padding-right:var(--ns-s5)}
  .ns-ab-photo{max-width:none}
  .ns-abf-note{grid-column:6 / 13;grid-row:1 / 3;border-top:1px solid var(--ns-ink);padding-top:var(--ns-s4)}
}

/* founder note: handwritten face, justified copy, greyscale photo that colours on hover */
@font-face{font-family:"Kalam";src:url("../fonts/kalam-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.ns-ab-letter p{font-family:"Kalam",var(--ns-f-body);font-size:clamp(1.125rem,1.06rem + .3vw,1.3125rem);line-height:1.6;max-width:none}
.ns-ab-letter p,.ns-ab-bio p:not(.ns-ann){text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.ns-ab-bio p:not(.ns-ann){max-width:none}
.ns-ab-photo{filter:grayscale(1) brightness(1.18) contrast(.95);transition:filter .4s ease}
.ns-ab-photo:hover,.ns-abf-side:focus-within .ns-ab-photo{filter:grayscale(0) brightness(1) contrast(1) saturate(.82)}
@media (prefers-reduced-motion:reduce){.ns-ab-photo{transition:none}}
.ns-ab-photo,.ns-abf-side .ns-ab-photo{max-width:375px}   /* never shown larger than the file, so it stays sharp */
@media (min-width:1024px){.ns-abf-side .ns-ab-photo{max-width:none;width:100%}}   /* desktop: photo spans the column, flush with the bio rule */