/* About: the homepage's periwinkle field, continued.
   Hero over the sky, then the story, what Eli believes, and a timeline whose rail fills as you read. */
.about-page{--tl-rail:clamp(8.5rem,15vw,14rem);background:#c1bcdd}

/* Hero, one column, centred. */
.ab-hero{padding-top:clamp(7rem,18svh,11rem);padding-bottom:clamp(6rem,14svh,9rem);text-align:center}
.ab-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:62rem;margin:0 auto}
.ab-title{margin:0 0 clamp(1.4rem,3vw,2.2rem);font-weight:800;font-size:clamp(4.6rem,14vw,13.5rem);line-height:.84;letter-spacing:-.06em;text-transform:uppercase;color:var(--cream)}
.ab-word{display:inline-block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em;vertical-align:top}
.ab-word>span{display:inline-block}
.ab-lede{max-width:40rem;margin:0;font-size:clamp(1.125rem,1.6vw,1.45rem);line-height:1.5;color:var(--cream);text-wrap:balance}
.ab-hero .intro-actions{justify-content:center;margin-top:clamp(2rem,4svh,2.8rem)}

/* Bands share the homepage's periwinkle tokens. */
.ab-band{--paper:#c1bcdd;--ink:#38335f;--lilac:rgba(255,244,234,.42);position:relative;background:#c1bcdd;color:var(--deep);padding:clamp(5rem,10vw,9rem) var(--gutter);overflow-x:clip}
.ab-band h2{margin:0;font-weight:700;font-size:clamp(2.4rem,4.6vw,5rem);line-height:1.02;letter-spacing:-.045em;color:var(--cream);text-wrap:balance}
.ab-band .text-link{color:var(--deep)}
.ab-band .text-link:hover{color:var(--cream)}

/* Story: the headline and portrait hold while the story reads beside them. */
.ab-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2.5rem,7vw,8rem);align-items:start;padding-top:clamp(4rem,8vw,7rem)}
.ab-story-head{position:sticky;top:clamp(6rem,14svh,8rem);display:grid;gap:clamp(2rem,4vw,3rem);min-width:0}
.ab-story-head h2{max-width:15ch}
.ab-portrait{margin:0;width:min(100%,21rem);transform:rotate(-2.5deg)}
.ab-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;box-shadow:0 2rem 3.5rem -1.5rem rgba(56,51,95,.45)}
.ab-story-copy{min-width:0;padding-top:.4rem}
.ab-story-copy p{max-width:34rem;margin:0 0 1.2rem;font-size:1.0625rem;line-height:1.66}
.ab-story-copy p:first-child{font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.38;letter-spacing:-.015em;color:var(--cream)}
.ab-signoff{display:flex;align-items:center;gap:1.4rem;margin-top:2rem}
.ab-signoff .about-signature{width:4rem;filter:brightness(0) invert(1)}

/* What I believe: four cards on a rule, two by two. */
.ab-beliefs{padding-top:clamp(3rem,6vw,5rem)}
.ab-beliefs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,5vw,4rem)}
.ab-belief{position:relative;min-width:0;padding-top:1.6rem}
.ab-belief::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,244,234,.6)}
.ab-belief p{margin:0;max-width:30rem;font-size:1.0625rem;line-height:1.6}
.ab-belief strong{display:block;margin-bottom:.55rem;font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:600;line-height:1.12;letter-spacing:-.03em;color:var(--cream)}

/* Timeline. Year on the left, rail in the middle, story and photographs on the right. */
.ab-tl-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(3.5rem,7vw,6rem)}
.ab-tl-head p{max-width:30rem;margin:0;font-size:1.0625rem;line-height:1.6}
.ab-tl{position:relative;list-style:none;margin:0;padding:0}
.ab-tl::before,.ab-tl::after{content:"";position:absolute;left:var(--tl-rail);top:.6rem;bottom:2rem;width:1px;background:rgba(255,244,234,.35)}
.ab-tl::after{background:var(--cream);transform:scaleY(var(--fill,1));transform-origin:50% 0}
.ab-entry{position:relative;display:grid;grid-template-columns:var(--tl-rail) minmax(0,1fr);padding-bottom:clamp(4.5rem,10vw,8rem)}
.ab-entry:last-child{padding-bottom:2rem}
.ab-when{position:sticky;top:clamp(5.5rem,13svh,7.5rem);align-self:start;margin:0;padding-right:clamp(1.4rem,2.6vw,2.4rem);text-align:right;font-weight:800;font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:.9;letter-spacing:-.055em;color:var(--cream);font-variant-numeric:tabular-nums}
.ab-node{position:absolute;left:var(--tl-rail);top:0;z-index:1;width:2.2rem;margin-left:-1.1rem;text-align:center;background:#c1bcdd;font-size:2.4rem;font-weight:300;line-height:1;color:var(--lavender)}
.ab-body{min-width:0;padding-left:clamp(2.2rem,4.5vw,4rem)}
.ab-body h3{margin:0 0 .9rem;font-size:clamp(1.7rem,2.8vw,2.6rem);font-weight:600;line-height:1.08;letter-spacing:-.035em;color:var(--cream);text-wrap:balance}
.ab-body>p{max-width:38rem;margin:0;font-size:1.0625rem;line-height:1.66}
.ab-body>.text-link{margin-top:1.4rem}
.ab-media{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(1rem,2.2vw,1.8rem);margin-top:clamp(1.8rem,3.2vw,2.6rem)}
.ab-media figure{margin:0;min-width:0;max-width:100%}
.ab-media figcaption{margin-top:.65rem;font-size:.875rem;line-height:1.4;color:var(--deep)}
.ab-shot .frame{overflow:hidden;background:rgba(255,244,234,.2)}
.ab-shot img{display:block;width:100%;height:auto}
.ab-shot.w-s{width:min(100%,14.5rem)}
.ab-shot.w-m{width:min(100%,22rem)}
.ab-shot.w-l{width:min(100%,32rem)}
.ab-shot-low{margin-bottom:-2.5rem!important}
.ab-chain{width:min(36%,10.5rem);align-self:center}
.ab-chain img{display:block;width:100%;height:auto;transform:rotate(5deg);filter:drop-shadow(0 1.4rem 1.6rem rgba(56,51,95,.32))}
.ab-chain figcaption{text-align:center}
.ab-badge{width:min(100%,10rem)}
.ab-badge img{display:block;width:100%;height:auto;border-radius:50%;box-shadow:0 1.2rem 2.4rem -1rem rgba(56,51,95,.45)}
.ab-mark{width:min(100%,14rem)}
.ab-mark-logo{display:block;width:100%;aspect-ratio:3/1;background:var(--cream);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.ab-cover{width:min(100%,12rem);transform:rotate(-3deg)}
.ab-cover img{display:block;width:100%;height:auto;box-shadow:0 1.6rem 3rem -1.2rem rgba(56,51,95,.5)}

/* Wide screens: each entry's story on the left of its column, its photographs beside it. */
@media (min-width:1100px){
  .ab-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:clamp(2.5rem,4vw,4.5rem);grid-template-rows:auto auto 1fr}
  .ab-body>h3,.ab-body>p,.ab-body>.text-link{grid-column:1}
  .ab-body>.text-link{justify-self:start;align-self:start}
  .ab-body>.ab-media{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:start}
}

/* Close. */
.ab-close{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(1.8rem,3vw,2.4rem);padding-top:clamp(3rem,6vw,5rem)}
.ab-close-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem}

@media (max-width:900px){
  .ab-story{grid-template-columns:1fr}
  .ab-story-head{position:static}
  .ab-portrait{width:min(70vw,18rem)}
  .ab-tl-head{grid-template-columns:1fr}
}
@media (max-width:700px){
  .about-page{--tl-rail:.75rem}
  .ab-beliefs-grid{grid-template-columns:1fr}
  .ab-tl::before,.ab-tl::after{top:.9rem}
  .ab-entry{grid-template-columns:1fr;padding-left:2.6rem;padding-bottom:4rem}
  .ab-node{top:.15rem;font-size:2rem;width:1.8rem;margin-left:-.9rem}
  .ab-when{position:static;padding:0 0 .7rem;text-align:left;font-size:2.4rem}
  .ab-body{padding-left:0}
  .ab-shot.w-s{width:calc(50% - .5rem)}
  .ab-shot-low{margin-bottom:0!important}
  .ab-chain{width:32%}
}
@media (prefers-reduced-motion:reduce){
  .ab-portrait,.ab-chain img,.ab-cover{transform:none}
}

/* Timeline additions: screenshots of articles and pages sit on cream like a printed clipping; one extra-small size. */
.ab-shot.w-xs{width:min(100%,10rem)}
.ab-doc .frame{background:var(--cream);padding:.45rem;box-shadow:0 1.2rem 2.4rem -1.2rem rgba(56,51,95,.45)}
/* About: the link band to the timeline page. */
.ab-tl-link{display:grid;gap:1.4rem;justify-items:start;padding-top:clamp(3rem,6vw,5rem)}
.ab-tl-link p{max-width:36rem;margin:0;font-size:1.0625rem;line-height:1.6}
@media (max-width:700px){.ab-shot.w-xs{width:calc(50% - .5rem)}}
/* Inline source links inside timeline text. */
.ab-body>p a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.ab-body>p a:hover{color:var(--cream)}
/* Sources under a timeline entry: the press, posts and pages behind it. */
.ab-links{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.55rem;max-width:38rem}
.ab-links a{font-size:.9375rem;line-height:1.4;color:var(--deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .2s}
.ab-links a:hover{color:var(--cream)}
@media (min-width:1100px){.ab-body>.ab-links{grid-column:1;align-self:start}}
/* Timeline: month under the year, a year only where it changes, and lighter client entries. */
.ab-when .ab-month{display:block;margin-top:.7rem;font-size:.9375rem;font-weight:500;line-height:1.2;letter-spacing:0;color:var(--deep)}
.ab-when-cont{padding-top:.55rem;font-size:.9375rem;font-weight:500;line-height:1.2;letter-spacing:0;color:var(--deep)}
.ab-entry.is-client{padding-bottom:clamp(3rem,6.5vw,5rem)}
.ab-entry.is-client h3{font-size:clamp(1.45rem,2.2vw,2rem);margin-bottom:.45rem}
.ab-meta{margin:0 0 .85rem!important;font-size:.9375rem!important;line-height:1.4!important;color:var(--deep);opacity:.82}
.ab-years{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 clamp(3rem,6vw,5rem)}
.ab-years a{display:inline-block;padding:.5rem 1rem;border:1px solid rgba(255,244,234,.7);border-radius:999px;font-size:.9375rem;font-weight:600;color:var(--cream);text-decoration:none;transition:background .2s,color .2s}
.ab-years a:hover{background:var(--cream);color:var(--deep)}
.ab-entry[id],.ab-when[id]{scroll-margin-top:6rem}
@media (min-width:1100px){.ab-body>.ab-meta{grid-column:1}}
@media (max-width:700px){.ab-when .ab-month{display:inline;margin:0 0 0 .6rem;font-size:.9375rem}.ab-when-cont{padding:0 0 .5rem}}
/* Client entries: smaller pieces that sit side by side instead of stacking. */
.is-client .ab-media{gap:clamp(.8rem,1.6vw,1.2rem)}
.is-client .ab-shot.w-m{width:min(100%,17.5rem)}
.is-client .ab-shot.w-s{width:min(100%,11.5rem)}
.is-client .ab-shot.w-l{width:min(100%,24rem)}
.is-client .ab-shot-low{margin-bottom:0!important}
@media (max-width:700px){.is-client .ab-shot.w-m,.is-client .ab-shot.w-l{width:100%}.is-client .ab-shot.w-s{width:calc(50% - .4rem)}}
/* Client quotes on timeline entries. */
.ab-quote{margin:1.3rem 0 0;padding:0 0 0 1.1rem;border-left:2px solid var(--cream);max-width:36rem}
.ab-quote p{margin:0;font-size:clamp(1.0625rem,1.3vw,1.2rem);line-height:1.5;letter-spacing:-.01em;color:var(--cream)}
.ab-quote cite{display:block;margin-top:.45rem;font-style:normal;font-size:.875rem;line-height:1.4;color:var(--deep)}
@media (min-width:1100px){.ab-body>.ab-quote{grid-column:1}}
/* Wide screens: text stacks in column one with no gaps; the media column spans every row. */
@media (min-width:1100px){
  .ab-body{grid-template-rows:repeat(8,auto) 1fr}
  .ab-body>.ab-media{grid-row:1 / -1}
}

.ab-body>p+p:not(.ab-meta){margin-top:.85em}
.ab-shot video{display:block;width:100%;height:auto;background:#000}
.ab-logos{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;margin:1.4rem 0 0;padding:0;font-size:1.05rem}
.ab-logos.is-wall{font-size:.72rem;gap:.8rem 1.2rem}
.ab-logos li{display:block;max-width:100%}
.ab-logos span{display:block;width:var(--w);height:var(--h);max-width:100%;background:var(--cream);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
@media (min-width:1100px){.ab-body>.ab-logos{grid-column:1;align-self:start}.ab-body{grid-template-rows:repeat(9,auto) 1fr}}
.ab-roster{margin:1.4rem 0 0;max-width:100%}
.ab-roster summary{cursor:pointer;font-weight:600;color:var(--cream);text-decoration:underline;text-underline-offset:.25em}
.ab-roster table{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:.9rem;font-size:.8rem;line-height:1.3}
.ab-roster th,.ab-roster td{text-align:left;padding:.35rem .4rem .35rem 0;border-bottom:1px solid rgba(255,244,234,.25);overflow-wrap:anywhere;vertical-align:top}
.ab-roster th{font-weight:600}
.ab-roster th:nth-child(1){width:34%}.ab-roster th:nth-child(2){width:34%}.ab-roster th:nth-child(3){width:17%}.ab-roster th:nth-child(4){width:15%}
@media (min-width:1100px){.ab-body>.ab-roster{grid-column:1;align-self:start}}
.ab-tl>.ab-entry{content-visibility:auto;contain-intrinsic-size:auto 720px}
.ab-tl-more{display:flex;justify-content:center;padding:1rem 0 4rem}
.ab-tl-load{border:1px solid rgba(255,244,234,.7);background:transparent;color:var(--cream);cursor:pointer;font:inherit}
.ab-tl-load:hover{background:var(--cream);color:var(--deep)}
.ab-tl-noscript{text-align:center;padding:1rem 0 4rem}