/* Tektura: styles for the About page only, loaded after site.css. A rule another page
   needs goes in site.css.
   The page answers what a visitor wants to know, in order: who they’ll deal with, the work
   that shows they can be trusted, why we do it, whether we understand their kind of
   organisation, what working with us is like, and a little about the two of us. */

/* Short measures and cards stay left-aligned: justifying under about thirty characters a
   line opens gaps between words. */
/* (Doubled class: the site’s justify rule weighs two classes.) */
.ab-l.ab-l :is(p,li){text-align:left;hyphens:manual;-webkit-hyphens:manual}

/* A section heading set larger than h2, used where the section has no tab. */
.ab-h2,.ab-orgs-row h2{line-height:1.15}
/* A long tab heading breaks where we choose on a phone, so the tab wraps its words. */
.ab-br{display:none}
@media (max-width:560px){.ab-br{display:inline}}

/* ---------- 1. Who you’ll be dealing with ---------- */
.ab-title{font-weight:600;font-size:clamp(36px,4.5vw,64px);line-height:1.05;letter-spacing:-.012em;color:var(--ink);margin:0 0 26px;text-wrap:balance;max-width:16ch}
.ab-intro .lede{margin:0;max-width:34ch}
.ab-faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:44px}
.ab-face .label{display:block;margin-top:18px}
.ab-face h2{font-size:clamp(19px,1.7vw,23px);margin:6px 0 8px;letter-spacing:0}
.ab-face p{margin:0;color:var(--body);font-size:16px;line-height:1.5;max-width:30ch}
/* Portraits. Until there are photos each one is a flat tile in ink or stone with the
   initials and the corner mark; a 4:5 photo dropped in as img.ab-ph fills the same box. */
.ab-ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;background:var(--ink);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
img.ab-ph{height:auto}
div.ab-ph{position:relative;display:grid;align-content:end;padding:clamp(14px,2vw,24px);color:var(--paper);overflow:hidden}
div.ab-ph.stone{background:#E2E0DA;color:var(--ink)}
div.ab-ph span{display:block;font-size:clamp(48px,6.4vw,96px);font-weight:600;line-height:.85;letter-spacing:-.045em}
div.ab-ph::after{content:"";position:absolute;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);width:clamp(20px,2.2vw,30px);aspect-ratio:1;background:var(--signal);border-top-right-radius:8px;border-bottom-left-radius:8px}
@media (min-width:861px){
  .ab-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  .ab-faces{margin-top:0}
  /* The two portraits are set a step apart, so they read as two people. */
  .ab-face:nth-child(2){margin-top:64px}
}
/* The tiles open upwards one after the other, then the initials and the mark arrive.
   Played once as the page opens, done inside a second. */
@media (prefers-reduced-motion:no-preference){
  div.ab-ph{animation:ab-open .55s cubic-bezier(.6,0,.2,1) both}
  div.ab-ph span{animation:ab-up .4s cubic-bezier(.2,.7,.2,1) .3s both}
  div.ab-ph::after{animation:ab-pop .3s cubic-bezier(.3,1.4,.5,1) .5s both}
  .ab-face:nth-child(2) div.ab-ph{animation-delay:.12s}
  .ab-face:nth-child(2) div.ab-ph span{animation-delay:.42s}
  .ab-face:nth-child(2) div.ab-ph::after{animation-delay:.62s}
}
@keyframes ab-open{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ab-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ab-pop{from{transform:scale(0)}to{transform:none}}

/* ---------- Drawn icons: paper or ink line, one orange dot ----------
   Once site.js has said a piece is on screen (.in) its lines draw and the dot follows.
   Without the script, or with less motion, they are simply there. */
.ab-ico{display:block;width:40px;height:40px;overflow:visible}
.ab-ico .ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-ico .fo{fill:var(--signal)}
.dark .ab-ico .fo{fill:var(--signal-dark)}
.ab-ico .fo{display:none}
img.ab-in{object-fit:cover;object-position:50% 25%}
@media (prefers-reduced-motion:no-preference){
  html.rv .reveal :is(.ln,.ab-ticks path){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.45,0,.35,1) calc(var(--i,0)*80ms + .1s)}
  html.rv .reveal .fo{opacity:0;transition:opacity .25s ease calc(var(--i,0)*80ms + .5s)}
  html.rv .reveal.in :is(.ln,.ab-ticks path){stroke-dashoffset:0}
  html.rv .reveal.in .fo{opacity:1}
}

/* ---------- 2. Our work ---------- */
.ab-head{margin-bottom:clamp(32px,4vw,48px)}
.ab-head .wk-stand{color:var(--on-ink)}
.ab-cases,.ab-facts,.ab-beliefs,.ab-ticks{list-style:none;margin:0;padding:0}
.ab-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.ab-cases li{display:flex}
.dark a.ab-case,.dark a.ab-case:hover{color:var(--paper)}
.ab-case{display:flex;flex-direction:column;width:100%;background:var(--ink-raised);border:0;text-decoration:none;padding-bottom:26px;overflow:hidden;border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);transition:background-color .2s ease}
.ab-case:hover,.ab-case:focus-visible{background:var(--ink-hi)}
.ab-shot{position:relative;aspect-ratio:16/11;background:var(--ink-hi);overflow:hidden}
.ab-case:hover .ab-shot,.ab-case:focus-visible .ab-shot{background:#343C46}
/* The site as it looks on a computer: a window rising from the foot of the panel, its top
   showing. On hover the page scrolls on a little. */
.ab-shot img{position:absolute;left:9%;top:11%;width:82%;height:auto;border-top-right-radius:10px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ab-case:hover .ab-shot img,.ab-case:focus-visible .ab-shot img{transform:translateY(-6%)}
.ab-case .label{margin:22px 26px 8px;color:var(--on-ink-dim)}
.ab-case h3{margin:0 26px 8px;font-size:22px;color:var(--paper)}
.ab-case p{margin:0 26px 20px;color:var(--on-ink);font-size:16px;line-height:1.5}
/* The site’s arrow link (site.css), at the foot of each card */
.ab-go{margin:auto 26px 0;align-self:flex-start}
.ab-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(48px,6vw,80px)}
.ab-facts li{border-top:1px solid rgba(242,241,238,.16);padding-top:26px;color:var(--paper)}
.ab-facts h3{margin:18px 0 8px;font-size:19px}
.ab-facts p{margin:0;font-size:16px;line-height:1.5;max-width:34ch}

/* ---------- 3. Why we do this ---------- */
/* The story: four drawings on one orange line, drawn by hand. Each line is two pen strokes
   laid almost on top of each other, so its width wanders a little like ink. about.js draws
   it all in once when the section arrives; with less motion, or without the script, it is
   simply there. */
.ab-story{margin-top:clamp(40px,5vw,64px)}
.ab-why .wk-stand{margin-top:0}
.ab-story .sk{fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ab-story .sm .sk{stroke-width:3.6}
/* The cornets are drawn at 1.1, so their lines are set to match the rest */
.ab-story .cn .sk{stroke-width:2.55}
.ab-story .sr{stroke:var(--signal)}
.ab-story .dm{stroke:var(--rule-strong)}
.ab-story .so{fill:var(--signal)}
.ab-story .pl{fill:var(--paper)}
.ab-story .ik{fill:var(--ink)}
.ab-story .sf{fill:var(--signal)}
.ab-story .sg{fill:none;stroke:var(--signal);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ab-story .tm{font-family:var(--mono);font-size:9px;letter-spacing:.16em;fill:var(--ink)}
.ab-story .tb{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--paper)}
.ab-line{display:block;width:100%;height:auto;overflow:visible}
.ab-stops{list-style:none;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-stops li{display:grid;align-content:start;justify-items:center;gap:8px;padding:0 12px;text-align:center}
.ab-stops .label{color:var(--ink)}
.ab-story .ab-stops li{text-align:center;hyphens:manual;-webkit-hyphens:manual}
.ab-stops .ab-l{font-size:16px;line-height:1.5;color:var(--body);max-width:17em}
.ab-pic,.ab-v{display:none}
@media (max-width:860px){
  .ab-line{display:none}
  .ab-stops{grid-template-columns:minmax(0,1fr);margin:0}
  .ab-stops li{position:relative;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:20px;row-gap:4px;justify-items:start;text-align:left;padding:0 0 32px}
  .ab-stops li:last-child{padding-bottom:0}
  .ab-story .ab-stops li{text-align:left}
  .ab-v{display:block;position:absolute;left:42px;top:0;width:12px;height:100%;overflow:visible}
  .ab-stops li:first-child .ab-v{top:82px;height:calc(100% - 82px)}
  .ab-stops li:last-child .ab-v{height:48px}
  .ab-story .ab-v .sg{stroke-width:2.8}
  .ab-pic{display:block;position:relative;grid-row:span 2;width:96px;height:96px;overflow:visible;z-index:1}
  /* Paper behind the seats and the mark, so the line passes under them */
  .ab-story .mk{fill:var(--paper);stroke:none}
  /* 2.1px at this size (the drawing is shown at 0.6), set in the drawing’s own units so a
     line drawn on keeps its length. */
  .ab-pic .sk{stroke-width:3.5}
  .ab-pic .sm .sk{stroke-width:4.5}
  .ab-pic .cn .sk{stroke-width:3.2}
  .ab-stops .label{padding-top:14px}
  .ab-stops li:first-child .label{padding-top:38px}
}

/* ---------- 4. Organisations like yours ---------- */
.ab-orgs-row h2{margin:0 0 22px}
.ab-orgs-row p{color:var(--body);max-width:none}
.ab-orgs-row p:last-child{margin-bottom:0}
@media (min-width:861px){.ab-orgs-row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,6vw,96px);align-items:start}
  .ab-orgs-row>.ab-l{padding-top:10px}}
.ab-ticks{margin-top:14px}
.ab-ticks li{display:flex;align-items:center;gap:16px;padding:17px 0;border-top:1px solid var(--rule);font-size:clamp(18px,1.6vw,22px);font-weight:500;line-height:1.3;color:var(--ink)}
.ab-ticks li:last-child{border-bottom:1px solid var(--rule)}
.ab-ticks svg{flex:none;width:24px;height:24px;overflow:visible}
.ab-ticks path{fill:none;stroke:var(--signal);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ab-ticks li:nth-child(2){--i:1}.ab-ticks li:nth-child(3){--i:2}.ab-ticks li:nth-child(4){--i:3}

/* ---------- 5. What working with us is like ---------- */
.ab-ways .ab-h2{margin:0 0 clamp(36px,4.4vw,60px);color:var(--paper)}
.ab-beliefs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.ab-beliefs li{color:var(--paper)}
.ab-beliefs h3{margin:20px 0 10px;font-size:20px;line-height:1.25;text-wrap:pretty}
.ab-beliefs p{margin:0;font-size:16px;line-height:1.55}

/* ---------- 6. A bit about us, the name, and the next step ---------- */
.ab-us .ab-h2{margin:0 0 clamp(28px,3.6vw,44px)}
.ab-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.ab-people>div{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:22px;align-items:start}
/* Outside Tektura: a photo of each of us away from work, the same shape, above the words. */
.ab-people>div.ab-person{display:block}
.ab-out{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;margin-bottom:22px;background:var(--ink);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.ab-in{display:grid;place-items:center;width:64px;height:64px;background:var(--ink);color:var(--paper);font-weight:600;font-size:22px;letter-spacing:-.02em;border-top-right-radius:12px;border-bottom-left-radius:12px}
.ab-in.stone{background:#E2E0DA;color:var(--ink)}
.ab-people h3{margin:2px 0 8px;font-size:22px}
.ab-people p{margin:0;color:var(--body);max-width:44ch}
.ab-name{margin-top:clamp(56px,7vw,96px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--rule)}
/* With Outside Tektura gone (25 Oct), the name follows its own heading: no rule or gap above it. */
.ab-h2+.ab-name{margin-top:0;padding-top:0;border-top:0}
.ab-word{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:clamp(16px,2vw,28px);row-gap:8px;margin:0 0 18px}
.ab-word>span:not(.ab-plus){display:flex;flex-direction:column;gap:6px}
.ab-word b{font-size:clamp(34px,4vw,56px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.ab-word i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.ab-plus{font-size:clamp(34px,4vw,56px);font-weight:400;line-height:1;color:var(--signal)}
.ab-name>p:last-child{margin:0;color:var(--body);max-width:56ch}
@media (min-width:861px){.ab-name{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,96px);align-items:center}.ab-word{margin:0}}
.ab-cta{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin-top:clamp(48px,6vw,80px)}
.ab-cta .as-h3{margin:10px 0 8px;text-transform:none;letter-spacing:0}
.ab-cta p{margin:0;max-width:60ch;text-align:left}

/* ---------- Tablets and phones ---------- */
@media (max-width:1000px){.ab-beliefs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .ab-cases,.ab-facts{grid-template-columns:minmax(0,1fr)}
  .ab-cases{gap:16px}
  /* On a phone the screenshot fills the card, top of the page showing */
  .ab-shot{aspect-ratio:4/3}
  .ab-shot img,.ab-case:hover .ab-shot img,.ab-case:focus-visible .ab-shot img{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:none;border-radius:0}
  .ab-facts{gap:0;margin-top:44px}
  .ab-facts li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;padding:22px 0}
  .ab-facts li .ab-ico{grid-row:span 2}
  .ab-facts h3{margin:0 0 6px}
  .ab-orgs-row>.ab-l{margin-top:36px}
  .ab-people{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .ab-title{font-size:clamp(34px,9.4vw,40px);margin-bottom:20px}
  .ab-face p{font-size:15px}
  .ab-beliefs{grid-template-columns:minmax(0,1fr);gap:34px}
  .ab-beliefs li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px}
  .ab-beliefs li .ab-ico{grid-row:span 2}
  .ab-beliefs h3{margin:0 0 6px}
  .ab-people>div{grid-template-columns:52px minmax(0,1fr);column-gap:16px}
  .ab-in{width:52px;height:52px;font-size:18px}
  .ab-ticks li{gap:14px;padding:15px 0}
  .ab-word i{font-size:10.5px;letter-spacing:.08em}
}