/*
 * Task 388 -- About-page history timeline (ported from
 * timeline-mock/AO-thirty-years-timeline-v3.50.html, approved design).
 * Enqueued on /about/ only. Every selector is namespaced under .ao-tl so the
 * page's base styles cannot skew the block and the block cannot leak out.
 *
 * DELIBERATE DIFFERENCES FROM THE MOCK, and why:
 *
 * 1. NO overflow-x:hidden on .ao-tl. The mock set it on <body>. Task 386
 *    proved that overflow hidden/auto/scroll on an ancestor creates a scroll
 *    container and kills position:sticky -- and this block has nine pinned
 *    sections. The site's own <body> already clips horizontally, so nothing
 *    is lost. Do not re-add it.
 *
 * 2. --tl-top. In the mock the timeline owned the whole viewport. Here a
 *    fixed 80px site header sits above it (64px at <=1200px), so every
 *    pinned element uses top:var(--tl-top) and every one-screen layout uses
 *    calc(100svh - var(--tl-top)). Values measured in Task 386.
 *
 * 3. Colour tokens are NOT redeclared where the site already defines them
 *    identically: --navy (#002855), --navy-deep (#001c3d), --red (#DA291C)
 *    and --white all match shared.css byte for byte, so they inherit.
 *    THE ONE EXCEPTION IS --ink: the mock uses #0b1220, the site's shared.css
 *    uses #17181A. Different colour, same token name. It is redeclared below
 *    so the timeline keeps the approved design; without this line the block
 *    would silently shift.
 *
 * 4. Font tokens (--serif/--sans/--cond) are declared here because the site
 *    has NO font custom properties at all -- shared.css writes the families
 *    out literally. There was nothing to map them to.
 *
 * 5. The mock's own fake top bar (.nav -- logo + Donate) is NOT ported. The
 *    real site header handles itself.
 */

.ao-tl{
  /* measured in Task 386: #nav is fixed, 80px, z-index 200 */
  --tl-top: 80px;
  /* Task 390 (BUG-2): both "Our Story" links target #ao-timeline, and the
     header is fixed, so without this the block's top edge lands beneath it
     (measured 48px hidden). --tl-top is already the header height at every
     breakpoint, including the admin-bar offsets. */
  scroll-margin-top: var(--tl-top);
}
@media (max-width:1200px){ .ao-tl{ --tl-top: 64px; } }
body.admin-bar .ao-tl{ --tl-top: 112px; }           /* 80 + 32 */
@media (max-width:1200px){ body.admin-bar .ao-tl{ --tl-top: 96px; } }  /* 64 + 32 */
@media (max-width:782px){ body.admin-bar .ao-tl{ --tl-top: 110px; } }  /* 64 + 46 */

/* Own base: the page imposes Barlow 16/25.6, h2-h4 at 500 weight with
   8px/16px margins, and p margin-bottom 14.4px (Task 386 measured these).
   Neutralised here so the block renders as designed. */
.ao-tl h1, .ao-tl h2, .ao-tl h3, .ao-tl h4, .ao-tl h5, .ao-tl h6,
.ao-tl p, .ao-tl figure, .ao-tl blockquote, .ao-tl ul, .ao-tl ol{
  margin:0; padding:0; font-weight:inherit; line-height:inherit;
}
.ao-tl figure{ margin:0; }
.ao-tl blockquote{ margin:0; border:0; }

.ao-tl{--navy:#002855;--navy-deep:#001c3d;--ink:#0b1220;--paper:#f4f2ec;--red:#DA291C;--white:#fff;--serif:"AO Ampersand", "Fraunces", Georgia, "Times New Roman", serif;--sans:"Barlow", "Helvetica Neue", Arial, sans-serif;--cond:"Barlow Condensed", "Arial Narrow", Arial, sans-serif;--ease:cubic-bezier(.2,.7,.2,1);}
.ao-tl, .ao-tl *{box-sizing:border-box;}
.ao-tl{margin:0;background:var(--navy-deep);color:var(--white);font-family:var(--sans);font-weight:300;line-height:1.5;-webkit-font-smoothing:antialiased;}
.ao-tl img{max-width:100%;display:block;}
.ao-tl a{color:inherit;}
.ao-tl .intro{min-height:calc(100svh - var(--tl-top));display:grid;place-items:center;text-align:center;padding:120px 24px 80px;position:relative;}
.ao-tl .intro .ao-tl-h2{font-family:var(--serif);font-weight:900;font-size:clamp(3rem,9vw,8.5rem);line-height:.92;letter-spacing:-.02em;margin:0 0 28px;}
.ao-tl .intro .ao-tl-h2 em{font-weight:300;font-style:italic;color:rgba(255,255,255,.72);}
.ao-tl .intro p{max-width:34ch;margin:0 auto;font-size:clamp(1rem,1.4vw,1.25rem);color:rgba(255,255,255,.72);}
/* Task 397 (2026-09-23): the SCROLL word + 40px rule was position:absolute
   bottom:32px inside a 100svh section, so on SHORT viewports it collided with
   the intro paragraph -- measured overlap at 768x600 (-20px), 1024x600 (-24px)
   and 1440x700 (-24px), and only 22-31px clear at 1024x768/1440x900/1920x900.
   Height-driven, not width-driven. Replaced with a chevron in NORMAL FLOW inside
   the copy block, which makes the collision structurally impossible at any size
   rather than merely tuned away. Chevron path is the one single-investigation.php
   already uses for "Start Reading" -- no new icon language. */
.ao-tl .intro .scroll{margin:40px auto 0;line-height:0;color:rgba(255,255,255,.5);}
.ao-tl .intro .scroll svg{width:26px;height:26px;display:block;margin:0 auto;animation:scrollcue 2.4s var(--ease) infinite;}
@keyframes scrollcue{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
/* shared.css:2830 already kills all animation under reduced motion with
   !important; this is the component-local belt-and-braces. */
@media (prefers-reduced-motion:reduce){.ao-tl .intro .scroll svg{animation:none;}}
.ao-tl .rail{position:fixed;left:0;top:0;bottom:0;width:112px;z-index:40;display:flex;flex-direction:column;justify-content:center;padding-left:24px;opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;}
.ao-tl .rail.on{opacity:1;transform:none;pointer-events:auto;}
.ao-tl .rail .line{position:absolute;left:31px;top:18vh;bottom:18vh;width:1px;background:rgba(255,255,255,.18);}
.ao-tl .rail .fill{position:absolute;left:31px;top:18vh;width:1px;height:0;background:var(--red);transition:height .6s var(--ease);}
.ao-tl .rail ol{list-style:none;margin:0;padding:0;position:relative;height:64vh;display:flex;flex-direction:column;justify-content:space-between;}
.ao-tl .rail li{position:relative;height:0;}
.ao-tl .rail button{all:unset;cursor:pointer;position:absolute;left:0;top:0;transform:translateY(-50%);display:flex;align-items:center;gap:14px;height:32px;}
.ao-tl .rail .tick{width:15px;height:1px;background:rgba(255,255,255,.35);transition:background .3s,width .3s;}
.ao-tl .rail .yr{font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.42);transition:color .3s;}
.ao-tl .rail li.active .tick{background:var(--red);width:22px;}
.ao-tl .rail li.active .yr{color:#fff;}
.ao-tl .rail .big{position:absolute;left:24px;bottom:9vh;font-family:var(--serif);font-weight:900;font-size:44px;letter-spacing:-.02em;line-height:1;color:#fff;white-space:nowrap;}
.ao-tl .rail .big span{display:block;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.ao-tl .rail .big span.out{opacity:0;transform:translateY(6px);}
.ao-tl .rail button:focus-visible .yr{outline:2px solid var(--red);outline-offset:4px;}
.ao-tl .strip{position:fixed;top:0;left:0;right:0;height:44px;z-index:45;background:rgba(0,28,61,.92);backdrop-filter:blur(8px);display:none;align-items:center;gap:16px;padding:0 20px;opacity:0;transform:translateY(-100%);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.ao-tl .strip.on{opacity:1;transform:none;}
.ao-tl .strip .big{font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:-.02em;width:72px;}
.ao-tl .strip .track{position:relative;flex:1;height:1px;background:rgba(255,255,255,.2);}
.ao-tl .strip .track i{position:absolute;top:-3px;width:1px;height:7px;background:rgba(255,255,255,.35);}
.ao-tl .strip .track b{position:absolute;top:-4px;width:9px;height:9px;background:var(--red);transform:translateX(-50%);transition:left .6s var(--ease);}
.ao-tl .strip .end{font-family:var(--cond);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.5);}
.ao-tl .m{position:relative;}
.ao-tl .m .pin{position:sticky;top:var(--tl-top);height:calc(100svh - var(--tl-top));overflow:hidden;}
.ao-tl .m .pin img{width:100%;height:100%;object-fit:cover;object-position:center;}
.ao-tl .m .pin::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,28,61,.92) 0%,rgba(0,28,61,.35) 45%,rgba(0,28,61,.05) 100%);}
.ao-tl .m .txt{position:relative;z-index:2;padding:0 24px 18vh 140px;margin-top:-58svh;max-width:1100px;}
.ao-tl .m .year{font-family:var(--serif);font-weight:900;font-size:clamp(5rem,18vw,15rem);line-height:.85;letter-spacing:-.04em;margin:0 0 .12em;color:#fff;}
.ao-tl .m .year small{font-size:.28em;font-weight:300;font-style:italic;letter-spacing:0;margin-left:.15em;color:rgba(255,255,255,.7);}
.ao-tl .m .ao-tl-h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 .5em;max-width:18ch;}
.ao-tl .m p{font-size:clamp(1rem,1.25vw,1.15rem);color:rgba(255,255,255,.78);max-width:46ch;margin:0;}
.ao-tl .m .cap{font-family:var(--cond);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-top:18px;}
.ao-tl .m.tall{height:190svh;}
.ao-tl .archive .pin img{filter:contrast(1.05) saturate(.85);}
.ao-tl .archive .pin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.ao-tl .archive .pin::after{background:linear-gradient(to top,rgba(0,28,61,.95) 0%,rgba(0,28,61,.45) 50%,rgba(0,0,0,.25) 100%);}
.ao-tl .type{min-height:calc(100svh - var(--tl-top));display:grid;align-content:center;padding:18vh 24px 18vh 140px;background:var(--navy);}
.ao-tl .type .year{font-family:var(--serif);font-weight:900;font-size:clamp(6rem,24vw,20rem);line-height:.82;letter-spacing:-.05em;margin:0;}
.ao-tl .type .ao-tl-h3{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.8rem,4.2vw,3.6rem);line-height:1.05;margin:.3em 0 .5em;max-width:16ch;}
.ao-tl .type p{max-width:44ch;color:rgba(255,255,255,.75);font-size:clamp(1rem,1.25vw,1.15rem);}
.ao-tl .type .lockup{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);margin-top:24px;letter-spacing:-.01em;}
.ao-tl .type .lockup b{font-weight:900;}
.ao-tl .type .lockup i{font-weight:300;}
.ao-tl .type .aside{display:grid;grid-template-columns:1fr minmax(240px,380px);gap:48px;align-items:end;max-width:1100px;}
.ao-tl .type .frame{background:#fff;padding:10px 10px 34px;transform:rotate(1.5deg);box-shadow:0 30px 60px rgba(0,0,0,.45);}
.ao-tl .type .frame img{width:100%;}
.ao-tl .type .frame span{display:block;font-family:var(--cond);font-size:11px;letter-spacing:.08em;color:#333;margin-top:10px;}
.ao-tl .collage{position:relative;min-height:calc(100svh - var(--tl-top));padding:16vh 24px 12vh 140px;background:var(--navy-deep);overflow:hidden;}
.ao-tl .collage .lead{position:relative;z-index:3;max-width:520px;}
.ao-tl .collage .lead .year{font-family:var(--serif);font-weight:900;font-size:clamp(4rem,12vw,9rem);line-height:.85;letter-spacing:-.04em;margin:0 0 .15em;}
.ao-tl .collage .lead .ao-tl-h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.1;margin:0 0 .5em;}
.ao-tl .collage .lead p{color:rgba(255,255,255,.75);max-width:42ch;margin:0;}
.ao-tl .collage .board{position:relative;height:84svh;margin-top:4vh;}
.ao-tl .collage .ph{position:absolute;box-shadow:0 18px 40px rgba(0,0,0,.55);background:#fff;padding:8px 8px 26px;opacity:0;transform:translate(var(--dx,0),var(--dy,120px)) rotate(var(--r,0deg)) scale(.96);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:var(--t,0s);}
.ao-tl .collage .ph img{width:100%;height:auto;}
.ao-tl .collage .ph span{position:absolute;left:8px;bottom:7px;font-family:var(--cond);font-size:11px;letter-spacing:.08em;color:#444;white-space:nowrap;overflow:hidden;max-width:calc(100% - 16px);text-overflow:ellipsis;}
.ao-tl .collage.in .ph{opacity:1;transform:translate(0,0) rotate(var(--r,0deg)) scale(1);}
.ao-tl .collage .ph.clip{background:#f6f3ea;padding:6px 6px 22px;}
.ao-tl .logos{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:center;margin-top:28px;opacity:.85;}
.ao-tl .logos span{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.01em;color:#fff;}
.ao-tl .logos span.s{font-family:var(--cond);font-weight:600;letter-spacing:.08em;font-size:15px;}
.ao-tl .close{background:var(--navy);padding:14vh 24px 14vh 140px;}
.ao-tl .close .wrap{max-width:1100px;}
.ao-tl .close .ao-tl-h3{font-family:var(--serif);font-weight:900;font-size:clamp(2.4rem,6vw,5.5rem);line-height:.95;letter-spacing:-.03em;margin:0 0 .35em;}
.ao-tl .close .ao-tl-h3 em{font-weight:300;font-style:italic;color:rgba(255,255,255,.72);}
.ao-tl .video{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;margin:40px 0;}
.ao-tl .video img{width:100%;height:100%;object-fit:cover;opacity:.75;}
.ao-tl .video button{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center;}
.ao-tl .video .play{width:96px;height:96px;background:var(--red);display:grid;place-items:center;transition:transform .3s var(--ease);}
.ao-tl .video button:hover .play, .ao-tl .video button:focus-visible .play{transform:scale(1.06);}
.ao-tl .video .play::after{content:"";border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #fff;margin-left:6px;}
.ao-tl .video .lbl{position:absolute;left:24px;bottom:20px;font-family:var(--cond);letter-spacing:.1em;font-size:13px;color:#fff;}
.ao-tl .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.ao-tl .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);margin:48px 0;}
.ao-tl .stats div{background:var(--navy);padding:34px 20px;text-align:center;}
.ao-tl .stats b{display:block;font-family:var(--serif);font-weight:900;font-size:clamp(2.2rem,4.5vw,3.8rem);line-height:1;letter-spacing:-.03em;}
.ao-tl .stats b i{font-style:normal;font-weight:300;font-size:.6em;color:rgba(255,255,255,.7);}
.ao-tl .stats span{display:block;font-family:var(--cond);font-weight:600;letter-spacing:.14em;font-size:13px;margin-top:12px;color:rgba(255,255,255,.85);}
.ao-tl .cta{display:flex;gap:14px;flex-wrap:wrap;}
.ao-tl .btn{font-family:var(--cond);font-weight:600;letter-spacing:.1em;font-size:14px;padding:16px 26px;text-decoration:none;display:inline-block;}
.ao-tl .btn.red{background:var(--red);color:#fff;}
.ao-tl .btn.ghost{border:1px solid rgba(255,255,255,.6);color:#fff;}
.ao-tl .note{font-size:13px;color:rgba(255,255,255,.45);margin-top:40px;max-width:60ch;}
@media (max-width:900px){
.ao-tl .ph.m-hide{display:none;}
.ao-tl .rail{display:none;}
.ao-tl .strip{display:flex;}
.ao-tl .m .txt, .ao-tl .type, .ao-tl .collage, .ao-tl .close{padding-left:24px;}
.ao-tl .close .wrap{padding-inline:0;} /* T619 (2026-11-11): the section's own 24px is the side padding on phones; .wrap's added another 24 (content sat 48px in) */
.ao-tl .m .txt{margin-top:-62svh;padding-bottom:12vh;}
.ao-tl .m.tall{height:175svh;}
.ao-tl .type .aside{grid-template-columns:1fr;}
.ao-tl .type .frame{max-width:320px;margin-top:32px;}
.ao-tl .collage .board{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;}
.ao-tl .collage .ph{position:relative;--dx:0;--dy:40px;--r:0deg !important;width:auto !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;}
.ao-tl .collage .ph.wide{grid-column:span 2;}
.ao-tl .stats{grid-template-columns:1fr 1fr;}}
@media (prefers-reduced-motion:reduce){
.ao-tl .collage .ph{opacity:1;transform:rotate(var(--r,0deg));transition:none;}
.ao-tl .rail, .ao-tl .rail .fill, .ao-tl .strip .track b, .ao-tl .rail .big span{transition:none;}}
.ao-tl .m .pin::after{background:
  linear-gradient(to top, rgba(0,20,45,.96) 0%, rgba(0,20,45,.78) 38%, rgba(0,20,45,.35) 65%, rgba(0,20,45,.10) 100%),
  linear-gradient(to right, rgba(0,20,45,.85) 0%, rgba(0,20,45,.45) 42%, rgba(0,20,45,0) 75%);}
.ao-tl .archive .pin::after{background:
  linear-gradient(to top, rgba(0,10,28,.97) 0%, rgba(0,10,28,.8) 40%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.2) 100%),
  linear-gradient(to right, rgba(0,10,28,.8) 0%, rgba(0,10,28,.35) 45%, rgba(0,10,28,0) 75%);}
.ao-tl .m p{color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.4);}
.ao-tl .m .cap{font-size:15px;letter-spacing:.14em;color:rgba(255,255,255,.72);margin-top:22px;font-weight:600;}
.ao-tl .collage .ph span{font-size:13px;letter-spacing:.09em;color:#2a2a2a;font-weight:600;}
.ao-tl .collage .ph{padding:9px 9px 30px;}
.ao-tl .type .frame span{font-size:13px;letter-spacing:.08em;}
.ao-tl .intro .scroll, .ao-tl .rail .yr, .ao-tl .strip .end{font-size:13px;}
.ao-tl .m .pin img{transform:scale(1.08);transition:transform 1.6s var(--ease);}
.ao-tl .m.in .pin img{transform:scale(1);}
.ao-tl .m .txt>*{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .9s var(--ease);}
.ao-tl .m.in .txt>*{opacity:1;transform:none;}
.ao-tl .m.in .txt .year{transition-delay:.05s;}
.ao-tl .m.in .txt .ao-tl-h3{transition-delay:.18s;}
.ao-tl .m.in .txt p{transition-delay:.3s;}
.ao-tl .m.in .txt .cap{transition-delay:.42s;}
.ao-tl .type .aside>*{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .9s var(--ease);}
.ao-tl .type.in .aside>*{opacity:1;transform:none;}
.ao-tl .type.in .aside>*:nth-child(2){transition-delay:.25s;}
.ao-tl .collage .lead>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .8s var(--ease);}
.ao-tl .collage.in .lead>*{opacity:1;transform:none;}
.ao-tl .collage.in .lead>*:nth-child(2){transition-delay:.1s;}
.ao-tl .collage.in .lead>*:nth-child(3){transition-delay:.2s;}
.ao-tl .collage .ph{transform:translate(calc(var(--dx,0) * 2.2),calc(var(--dy,120px) * 1.6)) rotate(calc(var(--r,0deg) + 6deg)) scale(.9);transition:opacity .9s var(--ease),transform 1.3s cubic-bezier(.16,.8,.24,1);}
.ao-tl .collage.in .ph{transform:translate(0,0) rotate(var(--r,0deg)) scale(1);}
.ao-tl .close .wrap>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease);}
.ao-tl .close.in .wrap>*{opacity:1;transform:none;}
.ao-tl .close.in .wrap>*:nth-child(2){transition-delay:.15s;}
.ao-tl .close.in .wrap>*:nth-child(3){transition-delay:.3s;}
.ao-tl .close.in .wrap>*:nth-child(4){transition-delay:.45s;}
@media (prefers-reduced-motion:reduce){
.ao-tl .m .pin img, .ao-tl .m .txt>*, .ao-tl .type .aside>*, .ao-tl .collage .lead>*, .ao-tl .close .wrap>*{opacity:1;transform:none;transition:none;}
.ao-tl .collage .ph{transform:rotate(var(--r,0deg));transition:none;}}
.ao-tl .collage .ph, .ao-tl .collage .ph.clip{background:none;padding:0;box-shadow:none;}
.ao-tl .collage .ph img{box-shadow:0 22px 48px rgba(0,0,0,.6);}
.ao-tl .collage .ph span{position:static;display:block;margin-top:10px;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.12em;white-space:normal;max-width:100%;}
.ao-tl .type .frame{background:none;padding:0;box-shadow:none;transform:none;}
.ao-tl .type .frame img{box-shadow:0 22px 48px rgba(0,0,0,.6);}
.ao-tl .type .frame span{color:rgba(255,255,255,.7);margin-top:12px;}
.ao-tl .collage .board{height:92svh;margin-top:3vh;}
.ao-tl .collage .ph{cursor:zoom-in;}
.ao-tl .collage .ph img{transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.ao-tl .collage .ph:hover img{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.7);}
.ao-tl .collage .ph span:empty{display:none;}
.ao-tl .lb{position:fixed;inset:0;background:rgba(0,10,28,.94);display:none;align-items:center;justify-content:center;z-index:100;padding:5vw;cursor:zoom-out;}
.ao-tl .lb.on{display:flex;}
.ao-tl .lb img{max-width:100%;max-height:100%;box-shadow:0 40px 100px rgba(0,0,0,.8);}
.ao-tl .lb span{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-family:var(--cond);letter-spacing:.12em;font-size:13px;color:rgba(255,255,255,.75);}
@media (max-width:900px){
.ao-tl .collage .ph.m-hide{display:none;}
.ao-tl .collage .ph.m-hero{grid-column:span 2;}}
.ao-tl .quote{position:relative;min-height:calc(100svh - var(--tl-top));display:grid;grid-template-columns:minmax(280px,38%) 1fr;align-items:stretch;background:var(--navy);overflow:hidden;}
.ao-tl .quote .portrait{position:relative;min-height:60svh;}
.ao-tl .quote .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:saturate(.75) contrast(1.05);}
.ao-tl .quote .portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(0,40,85,0) 60%,var(--navy) 100%),linear-gradient(to top,var(--navy) 0%,rgba(0,40,85,0) 40%);}
.ao-tl .quote .body{position:relative;padding:18vh 8vw 14vh 6vw;display:flex;flex-direction:column;justify-content:center;}
.ao-tl .quote .mark{font-family:var(--serif);font-weight:900;font-size:clamp(8rem,16vw,15rem);line-height:.6;color:var(--red);margin:0 0 .1em -.06em;}
.ao-tl .quote blockquote{margin:0;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.8rem,3.4vw,3.4rem);line-height:1.18;letter-spacing:-.01em;max-width:22ch;}
.ao-tl .quote blockquote.tbd{color:rgba(255,255,255,.55);}
.ao-tl .quote .who{margin-top:36px;display:flex;align-items:center;gap:16px;}
.ao-tl .quote .who .bar{width:40px;height:1px;background:var(--red);}
.ao-tl .quote .who b{font-family:var(--cond);font-weight:600;letter-spacing:.14em;font-size:14px;}
.ao-tl .quote .who span{font-family:var(--cond);letter-spacing:.1em;font-size:13px;color:rgba(255,255,255,.55);}
.ao-tl .quote .body>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease);}
.ao-tl .quote.in .body>*{opacity:1;transform:none;}
.ao-tl .quote.in .body blockquote{transition-delay:.15s;}
.ao-tl .quote.in .body .who{transition-delay:.3s;}
.ao-tl .quote .portrait img{transform:scale(1.06);transition:transform 1.6s var(--ease);}
.ao-tl .quote.in .portrait img{transform:scale(1);}
@media (max-width:900px){
.ao-tl .quote{grid-template-columns:1fr;min-height:auto;}
.ao-tl .quote .portrait{min-height:52svh;}
.ao-tl .quote .portrait::after{background:linear-gradient(to top,var(--navy) 0%,rgba(0,40,85,0) 45%);}
.ao-tl .quote .body{padding:0 24px 12vh;margin-top:-10vh;}
.ao-tl .quote .mark{font-size:7rem;}}
@media (prefers-reduced-motion:reduce){
.ao-tl .quote .body>*, .ao-tl .quote .portrait img{opacity:1;transform:none;transition:none;}}
.ao-tl .logos{gap:34px 56px;margin-top:40px;opacity:1;align-items:center;}
.ao-tl .logos img{filter:brightness(0) invert(1);opacity:0;transform:translateY(18px) scale(.94);transition:opacity .7s var(--ease),transform .8s var(--ease);}
.ao-tl .collage.in .logos img{opacity:.92;transform:none;}
.ao-tl .logos img:nth-child(1){transition-delay:.05s;}
.ao-tl .logos img:nth-child(2){transition-delay:.15s;}
.ao-tl .logos img:nth-child(3){transition-delay:.25s;}
.ao-tl .logos img:nth-child(4){transition-delay:.35s;}
.ao-tl .logos img:nth-child(5){transition-delay:.45s;}
.ao-tl .logos img:nth-child(6){transition-delay:.55s;}
.ao-tl .logos img:nth-child(7){transition-delay:.65s;}
.ao-tl .logos img:nth-child(8){transition-delay:.75s;}
@media (max-width:900px){
.ao-tl .logos{gap:20px 28px;}
.ao-tl .logos img{transform:scale(.8);transform-origin:left center;}
.ao-tl .collage.in .logos img{transform:scale(.8);}}
@media (prefers-reduced-motion:reduce){
.ao-tl .logos img{opacity:.92;transform:none;transition:none;}}
@media (min-width:901px){
.ao-tl .collage .board{height:auto !important;aspect-ratio:16/9;max-height:none;}}
.ao-tl .collage .ph{position:absolute;}
.ao-tl .collage .ph span{position:absolute;left:0;bottom:0;margin:0;display:inline-block;background:rgba(0,10,28,.88);color:#fff;font-size:11px;letter-spacing:.1em;padding:6px 10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(4px);}
.ao-tl .collage .ph span:empty{display:none;}
.ao-tl .press-logos{display:flex;flex-wrap:wrap;align-items:center;gap:28px 48px;margin:0 0 5vh;max-width:none;position:relative;z-index:3;}
.ao-tl .press-logos img{height:34px;width:auto !important;filter:brightness(0) invert(1);opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease);}
.ao-tl .press-logos img.tall{height:56px;}
.ao-tl .collage.in .press-logos img{opacity:.9;transform:none;}
.ao-tl .press-logos img:nth-child(1){transition-delay:.05s;}
.ao-tl .press-logos img:nth-child(2){transition-delay:.13s;}
.ao-tl .press-logos img:nth-child(3){transition-delay:.21s;}
.ao-tl .press-logos img:nth-child(4){transition-delay:.29s;}
.ao-tl .press-logos img:nth-child(5){transition-delay:.37s;}
.ao-tl .press-logos img:nth-child(6){transition-delay:.45s;}
.ao-tl .press-logos img:nth-child(7){transition-delay:.53s;}
.ao-tl .press-logos img:nth-child(8){transition-delay:.61s;}
.ao-tl .press-logos .kicker{width:100%;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.4rem,2.4vw,2.2rem);color:rgba(255,255,255,.85);margin:0 0 6px;}
@media (max-width:900px){
.ao-tl .collage .ph{position:relative;}
.ao-tl .press-logos{gap:18px 26px;}
.ao-tl .press-logos img{height:24px;}
.ao-tl .press-logos img.tall{height:40px;}}
@media (prefers-reduced-motion:reduce){
.ao-tl .press-logos img{opacity:.9;transform:none;transition:none;}}
.ao-tl .press-logos img.sm{height:26px;}
.ao-tl .press-logos img.lg{height:44px;}
@media (max-width:900px){
.ao-tl .press-logos img.sm{height:20px;}
.ao-tl .press-logos img.lg{height:32px;}}
.ao-tl .quote.compact{min-height:50svh;}
.ao-tl .quote.compact .portrait{min-height:50svh;}
.ao-tl .quote.compact .body{padding:8vh 8vw 8vh 6vw;}
.ao-tl .quote.compact .mark{font-size:clamp(5rem,9vw,8rem);}
.ao-tl .quote.compact blockquote{font-size:clamp(1.5rem,2.6vw,2.6rem);}
@media (max-width:900px){
.ao-tl .quote.compact .portrait{min-height:34svh;}
.ao-tl .quote.compact .body{padding:0 24px 8vh;margin-top:-6vh;}}
.ao-tl .press-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 40px;align-items:center;justify-items:center;max-width:1100px;margin:0 auto 5vh;}
.ao-tl .press-logos img{height:auto !important;max-height:40px;max-width:78%;width:auto;}
.ao-tl .press-logos img.tall{max-height:64px;}
.ao-tl .press-logos img.sm{max-height:30px;}
.ao-tl .press-logos img.lg{max-height:50px;}
@media (min-width:901px) and (max-width:1200px){
.ao-tl .m .txt, .ao-tl .type, .ao-tl .collage, .ao-tl .close, .ao-tl .quote .body{padding-left:24px;}
.ao-tl .rail{width:96px;padding-left:16px;}
.ao-tl .rail .line, .ao-tl .rail .fill{left:23px;}
.ao-tl .m .txt{padding-left:120px;}
.ao-tl .type, .ao-tl .collage, .ao-tl .close{padding-left:120px;}}
@media (max-width:900px){
.ao-tl .press-logos{grid-template-columns:repeat(2,1fr);gap:22px 24px;max-width:none;}
.ao-tl .press-logos img{max-height:28px;max-width:88%;}
.ao-tl .press-logos img.tall{max-height:48px;}
.ao-tl .press-logos img.sm{max-height:22px;}
.ao-tl .press-logos img.lg{max-height:36px;}}
.ao-tl .quote.ben blockquote{max-width:28ch;}
.ao-tl .quote.ben blockquote strong{display:block;font-style:normal;font-weight:900;font-size:clamp(3.4rem,8.5vw,9rem);line-height:.92;letter-spacing:-.035em;margin-top:.25em;color:#fff;position:relative;}
.ao-tl .quote.ben blockquote strong span{display:inline-block;opacity:0;transform:translateY(.35em) rotate(1.5deg);transition:opacity .7s var(--ease),transform .9s cubic-bezier(.16,.8,.24,1);}
.ao-tl .quote.ben.in blockquote strong span{opacity:1;transform:none;}
.ao-tl .quote.ben.in blockquote strong span:nth-child(1){transition-delay:.55s;}
.ao-tl .quote.ben.in blockquote strong span:nth-child(2){transition-delay:.72s;}
.ao-tl .quote.ben.in blockquote strong span:nth-child(3){transition-delay:.9s;color:var(--red);text-shadow:0 0 40px rgba(218,41,28,.35);}
.ao-tl .quote.ben blockquote strong::after{content:"";display:block;height:6px;width:0;background:var(--red);margin-top:.22em;transition:width 1.1s cubic-bezier(.16,.8,.24,1) 1.25s;}
.ao-tl .quote.ben.in blockquote strong::after{width:38%;}
.ao-tl .quote.ben .portrait::after{background:linear-gradient(to right,rgba(0,40,85,0) 55%,var(--navy) 100%),linear-gradient(to top,var(--navy) 0%,rgba(0,40,85,0) 45%);}
@media (max-width:900px){
.ao-tl .quote.ben blockquote strong{font-size:clamp(2.8rem,14vw,4.6rem);}}
@media (prefers-reduced-motion:reduce){
.ao-tl .quote.ben blockquote strong span{opacity:1;transform:none;transition:none;}
.ao-tl .quote.ben blockquote strong::after{width:38%;transition:none;}}
.ao-tl .quote.black{background:#000;}
.ao-tl .quote.black .portrait::after{background:linear-gradient(to right,rgba(0,0,0,0) 60%,#000 100%),linear-gradient(to top,#000 0%,rgba(0,0,0,0) 40%);}
.ao-tl .quote.black .portrait img{filter:grayscale(1) contrast(1.1);}
.ao-tl .quote.white{background:var(--paper);color:var(--ink);}
.ao-tl .quote.white .portrait::after{background:linear-gradient(to right,rgba(244,242,236,0) 60%,var(--paper) 100%),linear-gradient(to top,var(--paper) 0%,rgba(244,242,236,0) 40%);}
.ao-tl .quote.white .portrait img{filter:grayscale(1) contrast(1.05);}
.ao-tl .quote.white .who span{color:rgba(11,18,32,.55);}
.ao-tl .quote.white blockquote{color:var(--ink);}
@media (max-width:900px){
.ao-tl .quote.black .portrait::after{background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 45%);}
.ao-tl .quote.white .portrait::after{background:linear-gradient(to top,var(--paper) 0%,rgba(244,242,236,0) 45%);}}
.ao-tl .quote.solo{grid-template-columns:1fr;min-height:calc(100svh - var(--tl-top));}
.ao-tl .quote.solo .body{padding:16vh 8vw 14vh;max-width:1250px;margin:0 auto;width:100%;}
.ao-tl .quote.ben blockquote{max-width:none;}
.ao-tl .quote.ben blockquote br.d{display:block;}
.ao-tl .quote.ben blockquote strong{white-space:nowrap;font-size:clamp(3rem,8.2vw,9.5rem);color:var(--ink);letter-spacing:-.04em;}
.ao-tl .quote.ben.in blockquote strong span:nth-child(3){color:var(--ink);text-shadow:none;}
.ao-tl .quote.ben blockquote strong::after{height:5px;width:0;}
.ao-tl .quote.ben.in blockquote strong::after{width:22%;}
@media (max-width:900px){
.ao-tl .quote.ben blockquote strong{white-space:normal;font-size:clamp(2.8rem,14vw,4.6rem);}
.ao-tl .quote.ben blockquote br.d{display:none;}
.ao-tl .quote.solo .body{padding:12vh 24px 10vh;margin-top:0;}}
.ao-tl .quote.solo{min-height:0;position:relative;padding:0;}
.ao-tl .quote.solo::before, .ao-tl .quote.solo::after{content:"";position:absolute;left:0;right:0;height:14vh;pointer-events:none;z-index:2;}
.ao-tl .quote.solo::before{top:0;background:linear-gradient(to bottom,var(--navy-deep),rgba(244,242,236,0));}
.ao-tl .quote.solo::after{bottom:0;background:linear-gradient(to top,var(--navy-deep),rgba(244,242,236,0));}
.ao-tl .quote.solo .body{min-height:56svh;padding:20vh 24px 18vh;max-width:none;margin:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.ao-tl .quote.ben .lead-in{display:block;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.3rem,2.2vw,2.1rem);color:rgba(11,18,32,.7);letter-spacing:-.005em;margin-bottom:.35em;}
.ao-tl .quote.ben blockquote{max-width:none;font-size:inherit;line-height:1.1;}
.ao-tl .quote.ben blockquote strong{display:block;white-space:nowrap;margin:0;font-size:clamp(2.6rem,7.2vw,7.6rem);letter-spacing:-.04em;line-height:1;color:var(--ink);}
.ao-tl .quote.ben blockquote strong::after{display:none;}
.ao-tl .quote.ben .who{margin-top:34px;justify-content:center;}
.ao-tl .quote.ben .who .bar{width:28px;}
@media (max-width:900px){
.ao-tl .quote.ben blockquote strong{white-space:normal;font-size:clamp(2.6rem,12.5vw,4.2rem);}
.ao-tl .quote.solo .body{min-height:0;padding:16vh 24px 14vh;}}
.ao-tl .video img{object-position:center 45%;}
.ao-tl .video button{display:block;position:absolute;inset:0;}
.ao-tl .video .play{position:absolute;left:32px;bottom:64px;width:88px;height:88px;}
.ao-tl .video .lbl{left:136px;bottom:96px;font-size:14px;}
@media (max-width:900px){
.ao-tl .video .play{left:20px;bottom:56px;width:64px;height:64px;}
.ao-tl .video .lbl{left:98px;bottom:78px;font-size:12px;}}
.ao-tl .quote.solo::before, .ao-tl .quote.solo::after{display:none;}
.ao-tl .quote.solo .body{padding:14vh 24px 12vh;}
.ao-tl .quote.solo{overflow:hidden;}
.ao-tl .quote.solo .bg{position:absolute;inset:0;z-index:0;}
.ao-tl .quote.solo .bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%;transform:scale(1.06);transition:transform 1.8s var(--ease);}
.ao-tl .quote.solo.in .bg img{transform:scale(1);}
.ao-tl .quote.solo .bg::after{content:"";position:absolute;inset:0;background:rgba(244,242,236,.8);}
.ao-tl .quote.solo .body{position:relative;z-index:1;}
@media (prefers-reduced-motion:reduce){
.ao-tl .quote.solo .bg img{transform:none;transition:none;}}
.ao-tl .m.xfade{height:230svh;}
.ao-tl .m.xfade .pin img{position:absolute;inset:0;}
.ao-tl .m.xfade .pin img.after{opacity:var(--x,0);}
.ao-tl .m.xfade .pin img.before{filter:saturate(.7) contrast(1.05);}
.ao-tl .m.xfade .tag{position:absolute;top:calc(64px + 4vh);right:5vw;z-index:3;font-family:var(--cond);font-weight:600;letter-spacing:.16em;font-size:13px;color:#fff;}
.ao-tl .m.xfade .tag span{display:inline-block;padding:8px 14px;border:1px solid rgba(255,255,255,.55);transition:opacity .4s var(--ease);}
.ao-tl .m.xfade .tag .b{opacity:calc(1 - var(--x,0));}
.ao-tl .m.xfade .tag .a{position:absolute;right:0;top:0;opacity:var(--x,0);background:var(--red);border-color:var(--red);}
@media (max-width:900px){
.ao-tl .m.xfade{height:210svh;}
.ao-tl .m.xfade .tag{top:calc(44px + 3vh);right:24px;}}
@media (prefers-reduced-motion:reduce){
.ao-tl .m.xfade .pin img.after{opacity:1;}
.ao-tl .m.xfade .tag .b{opacity:0;}
.ao-tl .m.xfade .tag .a{opacity:1;}}
.ao-tl .m.xfade .tag{display:none;}
.ao-tl .m.xfade .txt>*{transition:none;}
.ao-tl .m.xfade.in .txt>*{opacity:var(--t2,0);transform:translateY(calc((1 - var(--t2,0)) * 28px));}
.ao-tl .m.xfade .pin{z-index:auto;}
.ao-tl .m.xfade .pin::after{z-index:1;}
.ao-tl .m.xfade .pin img{z-index:0;}
.ao-tl .m.xfade .pin .txt{position:absolute;left:0;right:0;bottom:0;margin:0;z-index:2;padding-bottom:10vh;}
.ao-tl .m.xfade .txt>*{transition:none !important;}
.ao-tl .m.xfade .txt>*{opacity:var(--t2,0);transform:translateY(calc((1 - var(--t2,0)) * 28px));}
.ao-tl #aotl-y2017 .pin::after{background:
  linear-gradient(to top, #00142d 0%, rgba(0,20,45,0) 16%),
  linear-gradient(to top, rgba(0,20,45,.96) 0%, rgba(0,20,45,.78) 38%, rgba(0,20,45,.35) 65%, rgba(0,20,45,.10) 100%),
  linear-gradient(to right, rgba(0,20,45,.85) 0%, rgba(0,20,45,.45) 42%, rgba(0,20,45,0) 75%);}
.ao-tl .quote.voice{display:block;position:relative;z-index:3;min-height:0;overflow:visible;pointer-events:none;margin-top:-calc(100svh - var(--tl-top));height:230svh;background:linear-gradient(to bottom, rgba(0,20,45,0) 0, rgba(0,20,45,0) calc(100svh - var(--tl-top)), #00142d calc(100svh - var(--tl-top)), #000 165svh, #000 calc(100% - 45svh), var(--navy-deep) 100%);}
.ao-tl .quote.voice .body{position:sticky;top:var(--tl-top);height:calc(100svh - var(--tl-top));min-height:0;max-width:none;margin:0;padding:0 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1)) * 32px));will-change:opacity,transform;}
.ao-tl .quote.voice .body>*{opacity:1 !important;transform:none !important;transition:none !important;}
.ao-tl .quote.voice .mark{font-size:clamp(6rem,11vw,10rem);margin-left:0;}
.ao-tl .quote.voice blockquote{font-size:clamp(1.9rem,3.8vw,3.8rem);}
.ao-tl .quote.voice .who{justify-content:center;}
.ao-tl .quote.voice blockquote{max-width:none;text-wrap:balance;}
.ao-tl .quote.voice .src{margin-top:14px;font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.42);}
@media (max-width:900px){
.ao-tl .quote.voice blockquote br.d{display:none;}
.ao-tl .quote.voice blockquote{max-width:16ch;}}
@media (max-width:900px){
.ao-tl .quote.voice{height:215svh;}
.ao-tl .quote.voice .body{padding:0 24px;margin-top:0;}
.ao-tl .quote.voice .who{flex-direction:column;gap:10px;}
.ao-tl .quote.voice .who .bar:last-child{display:none;}}
@media (prefers-reduced-motion:reduce){
.ao-tl .quote.voice{margin-top:0;height:auto;background:linear-gradient(to bottom,#00142d 0,#000 50svh,#000 calc(100% - 40svh),var(--navy-deep) 100%);}
.ao-tl .quote.voice .body{position:static;opacity:1;transform:none;}}
@media (min-width:901px){
.ao-tl .quote.mid{min-height:66svh;}
.ao-tl .quote.mid .portrait{min-height:66svh;}
.ao-tl .quote.mid .portrait img{object-position:center 18%;}
.ao-tl .quote.mid .body{padding:9vh 8vw 9vh 6vw;}
.ao-tl .quote.mid .mark{font-size:clamp(6rem,11vw,10rem);}}
.ao-tl .collage .ph.parked{display:none !important;}
@media (min-width:901px){
.ao-tl .collage .ph span{font-size:clamp(13px,1.05vw,16px);letter-spacing:.09em;line-height:1.3;padding:8px 13px;white-space:normal;overflow:visible;text-overflow:clip;}}
.ao-tl .bgword{position:absolute;top:50%;left:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font-family:var(--serif);font-weight:900;font-size:clamp(11rem,38vw,42rem);line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.055);transform:translate3d(calc(var(--gx,6) * 1vw),-52%,0);will-change:transform;}
.ao-tl .bgword img{display:block;height:1em;width:auto;opacity:.06;}
.ao-tl .bgword.long{font-size:clamp(8rem,26vw,30rem);letter-spacing:-.04em;}
.ao-tl .intro{overflow:hidden;}
.ao-tl .intro>div:not(.bgword):not(.scroll){position:relative;z-index:1;}
.ao-tl .intro .scroll{z-index:1;}
/* T542/T555: each year sits on its own navy-deep chip (the timeline's own ground), so it reads over any section; the -6px margins keep text and click target where they were. */
.ao-tl .rail .yr{display:inline-block;transform-origin:6px 50%;font-size:14px;color:var(--ondark-muted);background:var(--navy-deep);padding:2px 6px;margin:0 -6px;transition:transform .45s cubic-bezier(.16,.8,.24,1),color .35s var(--ease),text-shadow .35s var(--ease);}
.ao-tl .rail .tick{transition:background .35s var(--ease),width .45s cubic-bezier(.16,.8,.24,1),height .35s var(--ease);}
.ao-tl .rail li.passed .tick{background:rgba(218,41,28,.75);}
.ao-tl .rail li.near .yr{transform:scale(1.22);}
.ao-tl .rail li.near .tick{width:20px;}
.ao-tl .rail li.active .yr{transform:scale(1.75);color:#fff;font-weight:600;text-shadow:0 0 22px rgba(218,41,28,.55);}
.ao-tl .rail li.active .tick{width:30px;height:2px;background:var(--red);}
.ao-tl .rail button:hover .yr{color:#fff;}
@media (prefers-reduced-motion:reduce){
.ao-tl .rail .yr, .ao-tl .rail .tick{transition:none;}}
@media (max-width:900px){
.ao-tl .collage .board{height:auto !important;aspect-ratio:auto;align-items:start;}
.ao-tl .collage .ph span{position:static;display:block;white-space:normal;overflow:visible;text-overflow:clip;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:8px 0 2px;font-size:11.5px;line-height:1.35;letter-spacing:.08em;color:rgba(255,255,255,.78);}
.ao-tl .strip{top:auto;bottom:0;height:calc(50px + env(safe-area-inset-bottom,0px));padding:0 20px env(safe-area-inset-bottom,0px);transform:translateY(100%);border-top:1px solid rgba(255,255,255,.08);}
.ao-tl .strip.on{transform:none;}
.ao-tl .strip .big{font-size:26px;width:84px;}
.ao-tl .strip .track b{width:11px;height:11px;top:-5px;box-shadow:0 0 14px rgba(218,41,28,.7);}
.ao-tl .close{padding-bottom:calc(14vh + 50px);}
.ao-tl .cta .btn{flex:1 1 100%;text-align:center;padding:18px 20px;}}
.ao-tl .type .lockup img{display:block;height:clamp(30px,3.4vw,48px);width:auto;}
.ao-tl .type{position:relative;overflow:hidden;padding-bottom:calc(10.5vw + 15vh);}
.ao-tl .type .aside{position:relative;z-index:1;}
.ao-tl .bgword.logo-bg{top:auto;bottom:5vh;font-size:10.5vw;line-height:1;letter-spacing:0;transform:translate3d(calc(var(--gx,6) * 1vw),0,0);}
.ao-tl .bgword.logo-bg img{height:1em;width:auto;opacity:.075;}
@media (max-width:900px){
.ao-tl .bgword.logo-bg{font-size:17vw;bottom:calc(4vh + 50px);}
.ao-tl .type{padding-bottom:calc(17vw + 12vh + 50px);}}
.ao-tl .rail .big{display:none;}
@media (max-width:900px){
.ao-tl .collage .board{aspect-ratio:auto !important;}}
@media (max-width:900px){}
.ao-tl .finale{position:relative;height:200svh;overflow:clip;background:linear-gradient(to bottom,var(--navy) 0,var(--navy-deep) 45svh);}
.ao-tl .finale .pinwrap{position:sticky;top:var(--tl-top);height:calc(100svh - var(--tl-top));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;}
.ao-tl .finale .l1, .ao-tl .finale .l2{font-family:var(--serif);font-size:clamp(2.5rem,9.4vw,9.5rem);line-height:.98;letter-spacing:-.03em;white-space:nowrap;will-change:transform,opacity;}
.ao-tl .finale .l1{font-weight:900;opacity:var(--a,1);transform:translate3d(calc((1 - var(--a,1)) * -55vw),0,0);}
.ao-tl .finale .l2{font-weight:300;font-style:italic;color:rgba(255,255,255,.78);opacity:var(--b,1);transform:translate3d(calc((1 - var(--b,1)) * 55vw),0,0);}
.ao-tl .finale .rule{height:5px;background:var(--red);margin-top:5vh;width:calc(var(--c,1) * min(26vw,300px));}
.ao-tl .finale .fl{display:block;height:clamp(26px,2.5vw,38px);width:auto;margin-top:5vh;opacity:var(--c,1);transform:translateY(calc((1 - var(--c,1)) * 18px));}
.ao-tl .finale .cta{margin-top:5vh;justify-content:center;opacity:var(--c,1);transform:translateY(calc((1 - var(--c,1)) * 18px));}
@media (max-width:900px){
.ao-tl .finale .pinwrap{padding:0 24px 50px;}
.ao-tl .finale .cta{width:100%;max-width:420px;}
.ao-tl .close{padding-bottom:12vh;}}
.ao-tl{--ink:#17181A;--muted:#454C55;--dark-body:#F4F6F8;--ondark:#E4E7EB;--ondark-muted:#B9BEC6;--font-display:var(--serif);--font-body:var(--sans);--font-label:var(--cond);}
.ao-tl{font-weight:400;font-optical-sizing:auto;font-variation-settings:'WONK' 0;}
.ao-tl .intro .ao-tl-h2, .ao-tl .finale .l1, .ao-tl .finale .l2, .ao-tl .m .year, .ao-tl .collage .lead .year, .ao-tl .type .year, .ao-tl .stats b, .ao-tl .bgword, .ao-tl .strip .big, .ao-tl .quote.ben blockquote strong{font-variation-settings:'opsz' 144,'WONK' 0;}
.ao-tl .intro .ao-tl-h2{line-height:1.0;letter-spacing:-.028em;}
.ao-tl .finale .l1, .ao-tl .finale .l2{letter-spacing:-.028em;line-height:1.0;}
.ao-tl .intro .ao-tl-h2 em, .ao-tl .close .ao-tl-h3 em, .ao-tl .finale .l2{font-weight:700;color:var(--ondark-muted);}
.ao-tl .m .year small{font-weight:600;}
.ao-tl .type .ao-tl-h3, .ao-tl .quote blockquote, .ao-tl .press-logos .kicker, .ao-tl .quote.ben .lead-in{font-weight:300;}
.ao-tl .stats b i{font-weight:400;}
.ao-tl .m .ao-tl-h3, .ao-tl .collage .lead .ao-tl-h3{font-weight:600;font-size:clamp(32px,4vw,40px);line-height:1.1;letter-spacing:-.032em;}
.ao-tl .intro p, .ao-tl .m p, .ao-tl .collage .lead p, .ao-tl .type p{font-weight:400;font-size:18px;line-height:1.7;color:var(--dark-body);}
.ao-tl .m .cap, .ao-tl .quote .who b, .ao-tl .quote .who span, .ao-tl .video .lbl, .ao-tl .type .frame span, .ao-tl .lb span, .ao-tl .m.xfade .tag{font-family:var(--font-label);font-weight:600;font-size:16px;letter-spacing:.10em;}
.ao-tl .m .cap, .ao-tl .type .frame span, .ao-tl .quote .who span, .ao-tl .lb span{color:var(--ondark-muted);}
.ao-tl .quote.white .who span{color:var(--muted);}
.ao-tl .quote.voice .src{font-weight:600;font-size:15px;letter-spacing:.10em;color:var(--ondark-muted);}
.ao-tl .intro .scroll, .ao-tl .strip .end{font-weight:600;font-size:15px;letter-spacing:.10em;color:var(--ondark-muted);}
.ao-tl .rail .yr{font-size:15px;}
@media (min-width:901px){
.ao-tl .collage .ph span{font-weight:600;font-size:clamp(15px,1.05vw,16px);letter-spacing:.10em;}}
@media (max-width:900px){
.ao-tl .collage .ph span{font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--ondark-muted);}}
.ao-tl .stats span{font-weight:600;font-size:18px;letter-spacing:.11em;color:#fff;}
@media (max-width:900px){
.ao-tl .stats span{font-size:16px;}
.ao-tl .stats div{padding:30px 12px;}}
.ao-tl .btn{font-family:var(--font-label);font-weight:700;font-size:15px;letter-spacing:.10em;text-transform:uppercase;border-radius:0;display:inline-flex;align-items:center;justify-content:center;transition:background .18s,color .18s,border-color .18s,background-size .28s var(--ease),box-shadow .28s var(--ease);}
.ao-tl .btn{padding:15px 30px;gap:9px;}
.ao-tl .btn svg{width:17px;height:17px;display:block;flex:none;}
.ao-tl .btn .arr{transition:transform .18s;}
.ao-tl .btn:hover .arr{transform:translateX(4px);}
.ao-tl .btn.red:hover, .ao-tl .btn.red:focus-visible{background:#fff;color:var(--navy-deep);}
.ao-tl .btn.ghost{border:1.5px solid var(--ondark-muted);background:linear-gradient(#fff,#fff) no-repeat left center/0% 100%;}
.ao-tl .btn.ghost:hover, .ao-tl .btn.ghost:focus-visible{background-size:100% 100%;border-color:#fff;color:var(--navy-deep);box-shadow:0 0 30px rgba(218,41,28,.45);}
.ao-tl .btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.ao-tl a.aolink{color:#8fb4e0;text-decoration:none;font-weight:500;background-image:linear-gradient(#8fb4e0,#8fb4e0);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px;transition:background-size .18s,color .18s;}
.ao-tl a.aolink:hover, .ao-tl a.aolink:focus-visible{background-size:100% 2px;color:#fff;}
.ao-tl a.aolink:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.ao-tl .type .frame span a.aolink{font-weight:600;}
.ao-tl .lb{flex-direction:column;}
.ao-tl .lb span{position:static;transform:none;margin-top:18px;text-align:center;max-width:min(90vw,900px);}
.ao-tl #aotl-lbLink{margin-top:14px;font-family:var(--font-label);font-weight:700;font-size:15px;letter-spacing:.10em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;background-image:none;color:#fff;border:1.5px solid var(--ondark-muted);padding:12px 22px;}
.ao-tl #aotl-lbLink[hidden]{display:none;}
.ao-tl #aotl-lbLink svg{width:17px;height:17px;transition:transform .18s;}
.ao-tl #aotl-lbLink:hover{background:#fff;color:var(--navy-deep);border-color:#fff;}
.ao-tl #aotl-lbLink:hover svg{transform:translateX(4px);}
.ao-tl .lb img{max-height:74vh;}
.ao-tl .collage .ph[data-href] span::after{content:" \2197\FE0E";color:inherit;} /* T621: \FE0E = text presentation (iOS drew the blue emoji), in the caption color */
.ao-tl .quote .who{flex-wrap:wrap;row-gap:7px;align-items:center;}
.ao-tl .quote .who b{white-space:nowrap;}
.ao-tl .quote .who span:not(.bar){flex-basis:100%;padding-left:56px;line-height:1.25;}
.ao-tl .quote .who b + span:not(.bar), .ao-tl .quote .who .bar.t + span{margin-top:3px;}
.ao-tl .quote.voice .who span:not(.bar), .ao-tl .quote.ben .who span:not(.bar){padding-left:0;text-align:center;}
.ao-tl .quote.voice .who .src{margin-top:6px;font-size:15px;opacity:.8;}
.ao-tl .quote blockquote{text-wrap:balance;}
@media (max-width:900px){
.ao-tl .quote.voice .who{flex-direction:row;gap:16px;row-gap:7px;}
.ao-tl .quote.voice .who .bar:last-child{display:inline-block;}
.ao-tl .quote .who span:not(.bar){padding-left:56px;}
.ao-tl .quote.voice .who span:not(.bar), .ao-tl .quote.ben .who span:not(.bar){padding-left:0;}}
.ao-tl .nb{white-space:nowrap;}
.ao-tl .type{background:#000;padding-top:14vh;padding-bottom:calc(14.2vw + 13vh);}
.ao-tl .type .bgphoto{position:absolute;inset:0;z-index:0;}
.ao-tl .type .bgphoto img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;filter:grayscale(1) contrast(1.08);}
.ao-tl .type .bgphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--navy-deep) 0,rgba(0,0,0,.8) 14%,rgba(0,0,0,.8) 78%,var(--navy) 100%);}
.ao-tl .type .bgword{z-index:1;}
.ao-tl .type .aside{z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,46%);column-gap:clamp(32px,5vw,84px);row-gap:clamp(8px,2vh,28px);align-items:center;max-width:1250px;}
.ao-tl .type .aside .year{grid-column:1 / -1;}
.ao-tl .type .ao-tl-h3{max-width:none;text-wrap:balance;}
.ao-tl .type .frame{max-width:none;margin:0;}
.ao-tl .type .frame img{display:block;width:100%;height:auto;}
.ao-tl .bgword.logo-bg{font-size:14.2vw;bottom:5vh;}
@media (max-width:900px){
.ao-tl .type{padding-bottom:calc(17vw + 12vh + 50px);}
.ao-tl .type .aside{grid-template-columns:1fr;row-gap:22px;}
.ao-tl .type .frame{max-width:none;margin-top:8px;}
.ao-tl .bgword.logo-bg{font-size:17vw;bottom:calc(4vh + 50px);}}
.ao-tl .stats.three{grid-template-columns:repeat(3,1fr);margin-bottom:0;}
.ao-tl .closure{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;border:1px solid rgba(255,255,255,.08);border-top:0;padding:clamp(28px,4vw,56px) clamp(20px,3.4vw,48px);margin:0 0 48px;background:linear-gradient(to right,rgba(218,41,28,.10),rgba(218,41,28,0) 55%);}
.ao-tl .closure .big{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.3vw,46px);line-height:1.08;letter-spacing:-.03em;margin:0;color:#fff;text-wrap:balance;border-left:4px solid var(--red);padding-left:clamp(16px,2vw,28px);}
.ao-tl .closure .side p{font-size:18px;line-height:1.6;color:var(--dark-body);margin:0 0 14px;}
@media (max-width:900px){
.ao-tl .stats.three{grid-template-columns:1fr 1fr;}
.ao-tl .stats.three div:nth-child(3){grid-column:1 / -1;}
.ao-tl .closure{grid-template-columns:1fr;}}
@media (min-width:901px){
.ao-tl .collage .ph{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent;}
.ao-tl .collage .ph img{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent;}
.ao-tl .collage .ph:hover img{transform:translate3d(0,-4px,0);}
.ao-tl .collage .ph span{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,10,28,.96);backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent;}
.ao-tl .type .frame img{outline:1px solid transparent;}}
@media (min-width:901px){
.ao-tl .collage .ph img{box-sizing:border-box;border:1px solid transparent;background-clip:padding-box;}
.ao-tl .collage .ph span{border:1px solid transparent;background-clip:padding-box;}}
.ao-tl h2, .ao-tl h3, .ao-tl h4, .ao-tl blockquote, .ao-tl .closure .big, .ao-tl .collage .ph span, .ao-tl .type .frame span, .ao-tl .m .cap, .ao-tl .video .lbl, .ao-tl #aotl-lbCap{text-wrap:balance;}
.ao-tl p{text-wrap:pretty;}
.ao-tl .press-logos{grid-template-columns:1.55fr 1fr 1fr 1fr;max-width:1180px;gap:30px 40px;}
.ao-tl .press-logos img{max-width:100%;max-height:none;}
.ao-tl .press-logos img[alt="nyt"]{height:38px !important;}
.ao-tl .press-logos img[alt="wapo"]{height:44px !important;}
.ao-tl .press-logos img[alt="abc"]{height:52px !important;}
.ao-tl .press-logos img[alt="cnn"]{height:43px !important;}
.ao-tl .press-logos img[alt="cbs"]{height:26px !important;}
.ao-tl .press-logos img[alt="nbc"]{height:60px !important;}
.ao-tl .press-logos img[alt="guardian"]{height:50px !important;}
.ao-tl .press-logos img[alt="wnt"]{height:62px !important;}
@media (max-width:900px){
.ao-tl .press-logos{grid-template-columns:1fr 1fr;gap:22px 24px;max-width:none;}
.ao-tl .press-logos img[alt="nyt"], .ao-tl .press-logos img[alt="wapo"]{grid-column:1 / -1;order:-1;}
.ao-tl .press-logos img[alt="nyt"]{height:34px !important;}
.ao-tl .press-logos img[alt="wapo"]{height:39px !important;}
.ao-tl .press-logos img[alt="abc"]{height:38px !important;}
.ao-tl .press-logos img[alt="cnn"]{height:31px !important;}
.ao-tl .press-logos img[alt="cbs"]{height:19px !important;}
.ao-tl .press-logos img[alt="nbc"]{height:44px !important;}
.ao-tl .press-logos img[alt="guardian"]{height:36px !important;}
.ao-tl .press-logos img[alt="wnt"]{height:45px !important;}}
.ao-tl .finale .cta.primary{margin-top:5vh;}
.ao-tl .finale .btn.big{padding:18px 40px 18px 44px;font-size:16px;gap:6px;}
.ao-tl .finale .cta.areas{margin-top:16px;gap:12px;}
.ao-tl .finale .cta.areas .btn{padding:13px 22px;}
.ao-tl .finale .home{margin-top:clamp(22px,4vh,40px);font-size:16px;opacity:var(--c,1);transform:translateY(calc((1 - var(--c,1)) * 18px));}
@media (max-width:900px){
.ao-tl .finale .l1, .ao-tl .finale .l2{font-size:clamp(2.2rem,10.4vw,3.2rem);}
.ao-tl .finale .rule{margin-top:3.5vh;}
.ao-tl .finale .fl{margin-top:3.5vh;}
.ao-tl .finale .cta.primary{margin-top:3.5vh;}
.ao-tl .finale .cta.areas{flex-direction:column;gap:10px;margin-top:10px;}
.ao-tl .finale .cta.areas .btn, .ao-tl .finale .btn.big{width:100%;flex:none;}
.ao-tl .finale .pinwrap{padding:64px 24px 56px;}}
@media (min-width:901px) and (max-height:760px){
.ao-tl .finale .rule, .ao-tl .finale .fl, .ao-tl .finale .cta.primary{margin-top:3.5vh;}}
.ao-tl .type .bgphoto img{object-position:58% 50%;filter:grayscale(.45) contrast(1.05);}
.ao-tl .type .bgphoto::before{content:"";position:absolute;inset:0;z-index:1;opacity:.22;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.ao-tl .type .bgphoto::after{z-index:2;}
.ao-tl .memoriam{--glow:255,236,200;position:relative;background:#000;color:#fff;}
.ao-tl .memoriam .ao-tl-h3, .ao-tl .memoriam .ao-tl-h4{margin:0;}
.ao-tl .mem-open{position:relative;min-height:78svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18vh 24px 10vh;background:linear-gradient(to bottom,var(--navy-deep) 0,#000 46%);overflow:hidden;}
.ao-tl .mem-open::before{content:"";position:absolute;left:50%;top:56%;width:min(90vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(var(--glow),.17) 0,rgba(var(--glow),.06) 34%,rgba(var(--glow),0) 64%);animation:membreathe 6s ease-in-out infinite alternate;pointer-events:none;}
.ao-tl .mem-open>*{position:relative;}
.ao-tl .mem-open .eyebrow{font-family:var(--font-label);font-weight:600;font-size:19px;letter-spacing:.19em;text-transform:uppercase;color:var(--ondark-muted);margin-bottom:var(--ink-gap);text-box:trim-end cap alphabetic;}
.ao-tl .mem-open .ao-tl-h3{text-box:trim-start cap alphabetic;font-family:var(--font-display);font-weight:900;font-variation-settings:'opsz' 144,'WONK' 0;font-size:clamp(2.4rem,6.2vw,5.6rem);line-height:1.0;letter-spacing:-.028em;max-width:16ch;text-shadow:0 0 28px rgba(var(--glow),.45),0 0 90px rgba(var(--glow),.28);}
/* T484 (2026-10-22): eyebrow -> heading on the sitewide rule (shared.css
   .section-optical: measured to ink, --ink-gap = --space-s). Was 18px between
   line boxes = 31.6-39px of ink. Only the two facing edges are trimmed. Fallback
   values measured here: eyebrow (lh 1.5) 0.395em below the baseline, heading
   (lh 1.0) 0.150-0.161em above cap height. */
.ao-tl .mem-open{--ink-gap:var(--space-s);}
@supports not (text-box: trim-both cap alphabetic){
.ao-tl .mem-open .eyebrow{margin-bottom:calc(var(--ink-gap) - .395em);}
.ao-tl .mem-open .ao-tl-h3{margin-top:-.155em;}}
/* T485 (2026-10-22): .memoriam added to the selector so this rule outranks the
   later `.ao-tl .memoriam p{margin:0}` (same specificity, later in the file),
   which was cancelling the opener's own top margin and measure. */
.ao-tl .memoriam .mem-open p{font-size:18px;line-height:1.7;color:var(--dark-body);max-width:46ch;margin:26px auto 0;}
.ao-tl .mem-person{position:relative;min-height:calc(100svh - var(--tl-top));display:grid;align-items:center;padding:14vh 8vw 14vh 140px;overflow:hidden;}
.ao-tl .mem-person .bg, .ao-tl .mem-card .bg{position:absolute;inset:0;}
.ao-tl .mem-person .bg img, .ao-tl .mem-card .bg img{width:100%;height:100%;object-fit:cover;display:block;}
.ao-tl .mem-person .bg img{object-position:50% 30%;}
.ao-tl .mem-person .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#000 0,rgba(0,0,0,.64) 16%,rgba(0,0,0,.64) 82%,#000 100%),linear-gradient(to right,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 70%);}
.ao-tl .mem-person .inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(200px,330px) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:center;max-width:1180px;}
.ao-tl .mem-portrait{aspect-ratio:4/5;overflow:hidden;box-shadow:0 0 0 1px rgba(var(--glow),.6),0 0 46px rgba(var(--glow),.38),0 0 150px rgba(var(--glow),.22);animation:memglow 6s ease-in-out infinite alternate;}
.ao-tl .mem-portrait img{width:100%;height:100%;object-fit:cover;object-position:30% 40%;display:block;}
.ao-tl .mem-name{font-family:var(--font-display);font-weight:900;font-variation-settings:'opsz' 144,'WONK' 0;font-size:clamp(2.3rem,5.2vw,4.8rem);line-height:1.0;letter-spacing:-.028em;text-wrap:balance;text-shadow:0 0 22px rgba(var(--glow),.5),0 0 80px rgba(var(--glow),.3);}
.ao-tl .mem-name.sm{font-size:clamp(2rem,3.6vw,3.2rem);}
.ao-tl .mem-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 22px;font-family:var(--font-label);font-weight:600;font-size:16px;letter-spacing:.10em;text-transform:uppercase;color:var(--ondark-muted);}
.ao-tl .mem-meta span:first-child{color:#fff;}
.ao-tl .memoriam p{font-size:18px;line-height:1.7;color:var(--dark-body);max-width:56ch;margin:0;}
.ao-tl .tweet{margin:30px 0 0;max-width:520px;background:#000;border:1px solid #2f3336;border-radius:16px;padding:16px 18px 18px;box-shadow:0 0 0 1px rgba(var(--glow),.10),0 0 60px rgba(var(--glow),.10);}
.ao-tl .tweet .th{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.ao-tl .tweet .av{width:42px;height:42px;border-radius:50%;background:#1b1f23;display:grid;place-items:center;font-family:var(--font-label);font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--ondark-muted);flex:none;}
.ao-tl .tweet b{display:flex;align-items:center;gap:5px;font-family:var(--font-body);font-weight:600;font-size:17px;color:#fff;}
.ao-tl .tweet .vb{width:19px;height:19px;flex:none;}
.ao-tl .tweet small{display:block;font-size:15px;color:#8b98a5;font-family:var(--font-body);}
.ao-tl .tweet blockquote{margin:0;font-family:var(--font-body);font-style:normal;font-weight:400;font-size:20px;line-height:1.4;color:#fff;max-width:none;text-wrap:pretty;}
.ao-tl .mem-credit{margin-top:22px;font-family:var(--font-label);font-weight:600;font-size:15px;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.ao-tl .mem-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);padding:6vh 8vw 18vh 140px;background:linear-gradient(to bottom,#000 0,#000 62%,var(--navy) 100%);}
.ao-tl .mem-card{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;border:1px solid rgba(var(--glow),.42);box-shadow:0 0 40px rgba(var(--glow),.16),0 0 120px rgba(var(--glow),.10);background:#05080f;animation:memglow2 6s ease-in-out infinite alternate;}
.ao-tl .mem-card:nth-child(2){animation-delay:-3s;}
.ao-tl .mem-card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0,rgba(0,0,0,.78) 55%,rgba(0,0,0,.62) 100%);}
.ao-tl .mem-card .cin{position:relative;z-index:1;padding:clamp(26px,3.4vw,52px);}
.ao-tl .mem-card .aolink{display:inline-block;margin-top:18px;}
.ao-tl .memoriam .mem-open, .ao-tl .memoriam .mem-person .inner, .ao-tl .memoriam .mem-card{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);}
.ao-tl .memoriam .in.mem-open, .ao-tl .memoriam .mem-person.in .inner, .ao-tl .memoriam .mem-card.in{opacity:1;transform:none;}
@keyframes membreathe{from{opacity:.65;transform:translate(-50%,-50%) scale(.94);}to{opacity:1;transform:translate(-50%,-50%) scale(1.04);}}
@keyframes memglow{from{box-shadow:0 0 0 1px rgba(var(--glow),.5),0 0 34px rgba(var(--glow),.28),0 0 110px rgba(var(--glow),.16);}to{box-shadow:0 0 0 1px rgba(var(--glow),.7),0 0 56px rgba(var(--glow),.46),0 0 170px rgba(var(--glow),.27);}}
@keyframes memglow2{from{box-shadow:0 0 30px rgba(var(--glow),.11),0 0 90px rgba(var(--glow),.07);}to{box-shadow:0 0 48px rgba(var(--glow),.22),0 0 140px rgba(var(--glow),.13);}}
@media (max-width:1200px) and (min-width:901px){
.ao-tl .mem-person, .ao-tl .mem-pair{padding-left:120px;}}
@media (max-width:900px){
.ao-tl .mem-person{padding:12vh 24px;min-height:0;}
.ao-tl .mem-person .inner{grid-template-columns:1fr;gap:28px;}
.ao-tl .mem-portrait{max-width:230px;}
.ao-tl .mem-pair{grid-template-columns:1fr;padding:4vh 24px 14vh;}
.ao-tl .mem-card{min-height:0;}
.ao-tl .tweet blockquote{font-size:18px;}}
@media (prefers-reduced-motion:reduce){
.ao-tl .mem-open::before, .ao-tl .mem-portrait, .ao-tl .mem-card{animation:none;}
.ao-tl .memoriam .mem-open, .ao-tl .memoriam .mem-person .inner, .ao-tl .memoriam .mem-card{opacity:1;transform:none;transition:none;}}
.ao-tl .mem-person .inner{grid-template-columns:minmax(0,560px);gap:0;}
.ao-tl .mem-head{display:grid;grid-template-columns:clamp(120px,13vw,180px) minmax(0,1fr);gap:clamp(20px,2.4vw,36px);align-items:center;margin-bottom:26px;}
.ao-tl .mem-head .mem-meta{margin:14px 0 0;}
.ao-tl .mem-person .mem-name{font-size:clamp(2.1rem,4.2vw,3.9rem);}
.ao-tl .mem-person .bg::after{background:linear-gradient(to bottom,#000 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 80%,#000 100%),linear-gradient(to right,rgba(0,0,0,.88) 0,rgba(0,0,0,.8) 38%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.55) 100%);}
.ao-tl .mem-person .bg img{object-position:50% 35%;}
@media (max-width:900px){
.ao-tl .mem-person .inner{grid-template-columns:1fr;}
.ao-tl .mem-head{grid-template-columns:104px minmax(0,1fr);gap:18px;}
.ao-tl .mem-portrait{max-width:none;}
.ao-tl .mem-person .bg::after{background:linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 14%,rgba(0,0,0,.78) 86%,#000 100%);}
.ao-tl .mem-person .bg img{object-position:62% 30%;}}
.ao-tl .mem-person{display:block;padding:0;overflow:clip;min-height:calc(100svh - var(--tl-top));}
.ao-tl .mem-person .bg{position:sticky;top:var(--tl-top);inset:auto;height:calc(100svh - var(--tl-top));overflow:hidden;}
.ao-tl .mem-person .bg img{object-position:50% 35%;transform:translateX(calc(10% + 140px)) scale(1.25);}
.ao-tl .mem-person .bg::after{background:linear-gradient(to right,rgba(0,0,0,.9) 0,rgba(0,0,0,.82) 40%,rgba(0,0,0,.46) 70%,rgba(0,0,0,.6) 100%);}
.ao-tl .mem-person::before, .ao-tl .mem-person::after{content:"";position:absolute;left:0;right:0;height:24vh;z-index:1;pointer-events:none;}
.ao-tl .mem-person::before{top:0;background:linear-gradient(to bottom,#000,rgba(0,0,0,0));}
.ao-tl .mem-person::after{bottom:0;background:linear-gradient(to top,#000,rgba(0,0,0,0));}
.ao-tl .mem-person .inner{z-index:2;margin-top:-calc(100svh - var(--tl-top));min-height:calc(100svh - var(--tl-top));box-sizing:border-box;padding:15vh 8vw 15vh 140px;max-width:none;align-content:center;grid-template-columns:minmax(0,560px);}
@media (max-width:1200px) and (min-width:901px){
.ao-tl .mem-person .inner{padding-left:120px;}}
@media (max-width:900px){
.ao-tl .mem-person .inner{padding:13vh 24px 13vh;grid-template-columns:1fr;}
.ao-tl .mem-person .bg img{transform:none;object-position:42% 30%;}
.ao-tl .mem-person .bg::after{background:rgba(0,0,0,.76);}}
.ao-tl .finale .cta.areas{margin-top:30px;}
@media (max-width:900px){
.ao-tl .finale .cta.areas{margin-top:20px;}}
@media (min-width:901px) and (max-height:760px){
.ao-tl .finale .cta.areas{margin-top:22px;}}
@media (prefers-reduced-motion:reduce){
.ao-tl .m.xfade .txt>*{opacity:1 !important;transform:none !important;}}
.ao-tl .collage .ph:focus-visible{outline:3px solid #fff;outline-offset:4px;}
.ao-tl .lbx{position:absolute;top:18px;right:18px;width:48px;height:48px;border:1.5px solid rgba(255,255,255,.6);background:rgba(0,0,0,.4);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;}
.ao-tl .lbx:hover, .ao-tl .lbx:focus-visible{background:#fff;color:var(--navy-deep);outline:none;}
@media (min-width:901px){
.ao-tl .collage .ph span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.ao-tl .collage .ph.short span{-webkit-line-clamp:1;}
.ao-tl .collage .ph span{padding-top:0;padding-bottom:0;border:0 solid transparent;border-width:8px 0;background-clip:border-box;}
.ao-tl .collage .ph:hover span, .ao-tl .collage .ph:focus-visible span{-webkit-line-clamp:unset;overflow:visible;}
.ao-tl .collage .ph{container-type:inline-size;container-name:tile;}
@container tile (max-width:250px){
.ao-tl .ph span{font-size:15px;padding:0 10px;border-width:6px 0;letter-spacing:.08em;}}}
.ao-tl .mem-person .bg{background:#000;}
.ao-tl .mem-person .bg img{position:absolute;right:0;left:auto;top:50%;width:min(80vw,1560px);height:86svh;transform:translateY(-50%);object-fit:cover;object-position:72% 40%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 13%,#000 85%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 13%,#000 85%,transparent 100%);mask-composite:intersect;}
.ao-tl .mem-person .bg::after{background:linear-gradient(to right,rgba(0,0,0,.9) 0,rgba(0,0,0,.74) 36%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.46) 100%);}
.ao-tl .mem-person .inner{grid-template-columns:minmax(0,500px);}
@media (max-width:900px){
.ao-tl .mem-person .bg{position:absolute;top:0;left:0;right:0;height:auto;inset:0 0 auto 0;}
.ao-tl .mem-person .bg img{position:static;display:block;width:100%;height:auto;transform:none;object-fit:contain;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add;}
.ao-tl .mem-person .bg::after{background:linear-gradient(to bottom,rgba(0,0,0,.55) 0,rgba(0,0,0,.35) 40%,rgba(0,0,0,.6) 100%);}
.ao-tl .mem-person .inner{margin-top:0;min-height:0;padding:calc(52vw + 24px) 24px 12vh;grid-template-columns:1fr;}
.ao-tl .mem-credit{margin-top:18px;}}
/* T565 (2026-11-05): at 1440 and up, collage captions show in full and these photos sit slightly
   elsewhere (moves of 12% or less) so no photo covers another's caption. The CNN caption sits a little
   higher in its own photo. T568: the ABC caption is narrowed to end before the AP photo and raised 22px. Below 1440 the inline positions and the clamp apply unchanged. */
@media (min-width: 1440px) {
	.ao-tl .collage .ph span, .ao-tl .collage .ph.short span { -webkit-line-clamp: unset; overflow: visible; }
	.ao-tl .collage[data-year="2012"] .board > .ph:nth-child(2) { top: 0% !important; left: 33% !important; } /* was 0% / 30% */
	.ao-tl .collage[data-year="2012"] .board > .ph:nth-child(3) { top: 3% !important; left: 58% !important; } /* was 4% / 58% */
	.ao-tl .collage[data-year="2012"] .board > .ph:nth-child(4) { top: 44% !important; left: -2% !important; } /* was 44% / 4% */
	.ao-tl .collage[data-year="2012"] .board > .ph:nth-child(6) { top: 47% !important; left: 74% !important; } /* was 36% / 74% */
	.ao-tl .collage[data-year="2012"] .board > .ph:nth-child(8) { top: 80% !important; left: 2% !important; } /* was 70% / 2% */
	.ao-tl .collage[data-year="2018"] .board > .ph:nth-child(3) { top: 54% !important; left: 68% !important; } /* was 44% / 68% */
	.ao-tl .collage[data-year="2018"] .board > .ph:nth-child(5) { top: 54% !important; left: 38% !important; } /* was 50% / 38% */
	.ao-tl .collage[data-year="2019"] .board > .ph:nth-child(2) { top: 8% !important; left: 41% !important; } /* was 2% / 44% */
	.ao-tl .collage[data-year="2012"] .board > .ph:nth-child(1) span { bottom: 112px; }
	.ao-tl .collage[data-year="2012"] .board > .ph:nth-child(2) span { max-width: 88%; bottom: 22px; } /* T568: ends just before the AP photo, raised clear of the Erica Meier photo */
}

/* T621 (2026-11-11): timeline polish.
   - 2012 press logos sat on the bottom edge of the photo section above (0px): room above at every width.
   - Phones: every photo section -> collage edge had the same problem; same room there.
   - Phones: Scott David quote overlapped into its neighbours' padding (and fades in earlier, about-timeline.js) so no screen is an empty stretch over 40%.
   - Phones: the press clips (2012) in one column, a smaller shadow with room under it, captions one step smaller.
   - Year bar prev/next buttons; the closing area links as text links. */
.ao-tl .collage[data-year="2012"]{padding-top:var(--space-2xl) !important;}
.ao-tl .finale .pinwrap .cta.areas{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 var(--space-l);margin-top:var(--space-xl);}
.ao-tl .finale .cta.areas .more{display:inline-flex;align-items:center;min-height:44px;font-family:var(--cond);font-size:15px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ondark);text-decoration:none;}
.ao-tl .finale .cta.areas .more::after{content:'\2192';margin-left:var(--space-2xs);display:inline-block;transition:transform .2s ease;}
.ao-tl .finale .cta.areas .more:hover::after, .ao-tl .finale .cta.areas .more:focus-visible::after{transform:translateX(var(--space-3xs));}
.ao-tl .strip .yb{display:none;}
@media (max-width:900px){
.ao-tl .m.tall + .collage{padding-top:var(--space-2xl) !important;}
.ao-tl .finale .pinwrap .cta.areas{flex-direction:column;}
.ao-tl .strip{padding-left:var(--space-2xs);padding-right:var(--space-2xs);}
.ao-tl .strip .yb{all:unset;box-sizing:border-box;flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ondark);cursor:pointer;}
.ao-tl .strip .yb svg{width:var(--space-m);height:var(--space-m);}
.ao-tl .strip .yb:focus-visible{outline:2px solid var(--red);outline-offset:-2px;}
.ao-tl .strip .yb.is-end, .ao-tl .strip:not(.on) .yb{visibility:hidden;} /* keeps its slot, so the bar never shifts */
/* T625 (2026-11-11): the press-clip treatment now covers every timeline collage on phones (was 2012 only) */
.ao-tl .collage .board{grid-template-columns:1fr;}
.ao-tl .collage .ph.m-hero, .ao-tl .collage .ph.wide{grid-column:auto;}
.ao-tl .collage .ph img{box-shadow:0 var(--space-2xs) var(--space-s) rgba(0,0,0,.6);}
.ao-tl .collage .ph span{padding-top:var(--space-m);font-size:13px;}}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
.ao-tl .quote.voice{margin-top:calc(-1 * var(--space-3xl));margin-bottom:calc(-1 * var(--space-4xl));}}

/* T668 (2026-11-14): the 2020 lockup and the finale use the real white logo with its tagline (attachment 37538, was the
   wordmark-only 37536). Heights scaled by the file's aspect ratio (900x182 vs 900x111) so the wordmark stays the size it
   was and the tagline sits under it. Finale: a small Home link on its own row under the three area links, same style. */
.ao-tl .type .lockup img{height:clamp(52px,5.6vw,79px);}
.ao-tl .finale .fl{height:clamp(52px,4.1vw,62px);flex-shrink:0;}
/* short phones (e.g. 320x568): the pinned finale has 100svh to work with -- smaller logo and tighter gaps there,
   and the logo never flex-shrinks to nothing */
@media (max-height:620px){.ao-tl .finale .fl{height:44px;margin-top:2.5vh;}.ao-tl .finale .rule,.ao-tl .finale .cta.primary{margin-top:2.5vh;}.ao-tl .finale .pinwrap .cta.areas{margin-top:var(--space-s);}.ao-tl .finale .cta.areas .more{min-height:36px;}}
.ao-tl .finale .pinwrap .cta.areas.home{margin-top:var(--space-2xs);}