/* 1/9 Association: interactive history timeline (mockup). Mounts into #tl19. */
.tl,.tl-dr{--y:#F2B51A;--yh:#FFC53D;--red:#CC0F1F;--sand:#FAF7F2;--bone:#EFE4CE;--mg:#293024;--dg:#171A17;--blk:#0E0E0E;--mut:#BBBBB4;--line:rgba(250,247,242,.16);--ease:cubic-bezier(.2,.7,.2,1);
  -webkit-font-smoothing:antialiased}
.tl{position:relative;background:var(--dg);color:var(--sand);font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;overflow:clip}
.tl-dr *,.tl-dr *::before,.tl-dr *::after{box-sizing:border-box}
.tl *,.tl *::before,.tl *::after{box-sizing:border-box}
.tl button{font:inherit;color:inherit}
.tl-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip;isolation:isolate}
.tl.is-native .tl-stage{position:relative}

/* layout pass that measures cards fully open (timeline.js fitCards) */
.tl-measure *{transition:none!important}

/* backdrop: per-era photo, texture, grain, vignette */
.tl-bg{position:absolute;inset:-4%;z-index:-3}
.tl-bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;filter:grayscale(.85) contrast(1.1) brightness(.55);transform:scale(1.08);transition:opacity 1.2s var(--ease),transform 8s linear}
.tl-bg-layer.is-on{opacity:.55;transform:scale(1)}
.tl-tex{position:absolute;inset:0;z-index:-2;background:url(img/texture-deepgreen.jpg) center/cover;mix-blend-mode:multiply;opacity:.9}
.tl-shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 90% at 50% 50%,rgba(23,26,23,.15) 0%,rgba(23,26,23,.78) 70%,rgba(14,14,14,.96) 100%),linear-gradient(180deg,rgba(14,14,14,.7) 0%,rgba(14,14,14,0) 22%,rgba(14,14,14,0) 74%,rgba(14,14,14,.85) 100%)}
.tl-grain{position:absolute;inset:-50%;z-index:-1;pointer-events:none;opacity:.07;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='.85' 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 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:tl-grain 1.2s steps(6) infinite}
@keyframes tl-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* HUD */
.tl-hud{position:absolute;left:clamp(20px,4vw,56px);top:clamp(104px,14vh,132px);z-index:5;pointer-events:none}
.tl-hud-era{font-family:"General Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--y);display:flex;gap:10px;align-items:center}
.tl-hud-era::before{content:"";width:28px;height:2px;background:var(--y)}
/* the map's story panel starts at the date: no period line above it */
.tl-map .tl-hud-era{display:none}
.tl-hud-year{font-family:"Warband Stencil","Clash Display",Impact,sans-serif;font-size:clamp(56px,7vw,104px);line-height:.9;color:var(--sand);margin-top:8px;font-variant-numeric:tabular-nums;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.tl-hud-sub{font-size:14px;color:var(--mut);margin-top:6px;max-width:28ch}
.tl-jump{position:absolute;right:clamp(20px,4vw,56px);top:clamp(108px,14vh,132px);z-index:6;display:flex;gap:4px}
.tl .tl-jump-btn{--c:8px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:92px;padding:8px 12px 9px;border:0;cursor:pointer;text-align:left;background:rgba(14,14,14,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--mut);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:background-color .2s,color .2s}
.tl .tl-jump-btn:hover{background:rgba(250,247,242,.14);color:var(--sand)}
.tl .tl-jump-btn.is-on{background:var(--y);color:var(--dg)}
.tl .tl-jump-btn:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.tl-jump-yr{font-family:"Warband Stencil","Clash Display",Impact,sans-serif;font-size:20px;line-height:1}
.tl-jump-lbl{font-family:"General Sans",sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* track */
.tl-viewport{position:absolute;inset:0;z-index:2;cursor:grab;touch-action:pan-y}
.tl.is-native .tl-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:auto;touch-action:auto}
.tl.is-native .tl-viewport::-webkit-scrollbar{display:none}
.tl-viewport.is-drag{cursor:grabbing}
.tl-track{position:absolute;top:0;left:0;height:100%;will-change:transform}
.tl.is-native .tl-track{position:relative}
.tl-axis{position:absolute;left:0;top:var(--axis,56%);height:3px;margin-top:-.5px;background:linear-gradient(90deg,rgba(250,247,242,0),rgba(250,247,242,.28) 120px,rgba(250,247,242,.28) calc(100% - 120px),rgba(250,247,242,0))}
.tl-axis-fill{position:absolute;left:0;top:var(--axis,56%);height:4px;margin-top:-1px;background:var(--y);box-shadow:0 0 18px rgba(242,181,26,.55),0 0 2px var(--y);transform-origin:left;width:0}
.tl-axis-future{position:absolute;top:var(--axis,56%);height:3px;margin-top:-.5px;background:repeating-linear-gradient(90deg,var(--y) 0 10px,transparent 10px 20px);opacity:.6}
.tl-tick{position:absolute;top:var(--axis,56%);width:1px;height:12px;margin-top:-5px;background:rgba(250,247,242,.35);pointer-events:none}
.tl-tick span{position:absolute;top:16px;left:6px;font-family:"General Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;color:rgba(250,247,242,.45);white-space:nowrap;transition:color .3s}
.tl-tick.is-event{background:transparent}
.tl-tick.is-event span{left:12px;top:14px}
.tl-tick.is-now span{color:var(--y)}

/* era chapter panels */
.tl-era{position:absolute;top:0;width:0;height:100%;pointer-events:none}
.tl-era::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:repeating-linear-gradient(180deg,rgba(242,181,26,.55) 0 6px,transparent 6px 12px)}
.tl-era-big{position:absolute;top:calc(var(--axis,56%) - .62em);left:-.04em;font-family:"Warband Stencil","Clash Display",Impact,sans-serif;font-size:clamp(180px,30vh,360px);line-height:1;color:var(--mg);white-space:nowrap;will-change:transform;z-index:-1}
.tl-era-copy{position:absolute;left:0;top:calc(var(--axis,56%) - 34px);display:flex;align-items:center;gap:8px;padding:5px 10px 5px 9px;background:var(--dg);border-left:2px solid var(--y);white-space:nowrap}
.tl-era-num{font-family:"Warband Stencil","Clash Display",Impact,sans-serif;font-size:15px;line-height:1;color:var(--y)}
.tl-era-title{font-family:"General Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}

/* intro + outro panels */
.tl-panel{position:absolute;top:0;height:100%;display:flex;flex-direction:column;justify-content:center}
.tl-intro .tl-eyebrow{font-family:"General Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--y)}
.tl-intro h2{font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:clamp(44px,6vw,104px);white-space:nowrap;line-height:.9;text-transform:uppercase;margin:16px 0 22px;letter-spacing:-.01em;max-width:calc(100vw - 600px)}
.tl-intro h2 em{font-style:normal;color:inherit;display:block}
.tl-intro p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:46ch;color:rgba(250,247,242,.85)}
.tl-cue{display:flex;align-items:center;gap:14px;margin-top:36px;font-family:"General Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.tl-cue i{display:block;width:72px;height:2px;background:var(--y);position:relative;overflow:hidden}
.tl-cue i::after{content:"";position:absolute;inset:0;background:var(--sand);transform:translateX(-100%);animation:tl-cue 1.8s var(--ease) infinite}
@keyframes tl-cue{to{transform:translateX(100%)}}
.tl-stats{display:flex;gap:clamp(20px,3vw,44px);margin-top:40px}
.tl-stat b{display:block;font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:clamp(32px,3.4vw,52px);line-height:1;color:var(--sand)}
.tl-stat span{display:block;font-size:13px;color:var(--mut);margin-top:6px;max-width:16ch;line-height:1.35}
/* desktop: the intro sits between the year buttons and the bottom controls, and its type scales with the
   screen height so the heading and stats stay clear of both */
@media (min-width:992px){
  .tl-intro{box-sizing:border-box;padding:calc(clamp(108px,14vh,132px) + 70px) 0 calc(clamp(18px,4vh,36px) + 112px)}
  .tl-intro h2{font-size:clamp(40px,min(6vw,9vh),104px);margin:10px 0 14px}
  .tl-intro p{font-size:clamp(15px,min(1.4vw,2.1vh),20px);max-width:52ch}
  .tl-cue{margin-top:min(36px,2.5vh)}
  .tl-stats{margin-top:min(40px,3vh)}
  .tl-stat b{font-size:clamp(28px,min(3.4vw,5.5vh),52px)}
}
@media (min-width:992px) and (max-width:1279px){
  .tl-intro{padding-bottom:calc(clamp(18px,4vh,36px) + 150px)}
}
@media (min-width:992px) and (max-height:820px){
  .tl-stats{display:none}
}
.tl-outro{align-items:flex-start}
.tl-outro h3{font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:clamp(48px,6vw,96px);line-height:.9;text-transform:uppercase;margin:12px 0 18px;max-width:11ch}
.tl-outro p{font-size:18px;line-height:1.55;color:rgba(250,247,242,.85);max-width:40ch}
.tl-reaper{position:absolute;width:min(46vh,440px);opacity:.09;right:0;top:50%;transform:translateY(-50%);pointer-events:none}
.tl-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;pointer-events:auto}
.tl-btn{--c:10px;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font-family:"General Sans",sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:background-color .2s,color .2s}
.tl-btn.is-primary{background:var(--y);color:var(--dg)}
.tl-btn.is-primary:hover{background:var(--yh)}
.tl-btn.is-ghost{background:rgba(250,247,242,.1);color:var(--sand)}
.tl-btn.is-ghost:hover{background:rgba(250,247,242,.2)}
.tl-btn:focus-visible{outline:2px solid var(--y);outline-offset:3px}

/* nodes */
.tl-node{--f:0;position:absolute;top:var(--axis,56%);width:0;height:0;z-index:3}
.tl-node.is-active{z-index:4}
.tl-dot{position:absolute;left:-7px;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--dg);border:2px solid var(--sand);transition:background-color .3s,border-color .3s,transform .4s var(--ease)}
.tl-node.is-passed .tl-dot{background:var(--y);border-color:var(--y)}
.tl-node.is-reunion .tl-dot{border-radius:0;transform:rotate(45deg);left:-8px;top:-7px;width:16px;height:16px}
.tl-node.is-memorial .tl-dot{border-color:var(--red)}
.tl-node.is-memorial.is-passed .tl-dot{background:var(--red);border-color:var(--red)}
.tl-node.is-honors .tl-dot{left:-10px;top:-9px;width:20px;height:20px;border:0;border-radius:0;background:var(--sand);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tl-node.is-honors.is-passed .tl-dot{background:var(--y)}
.tl-node.is-battalion .tl-dot{border-radius:2px}
.tl-node.is-battalion.is-passed .tl-dot{background:var(--bone);border-color:var(--bone)}
.tl-node.is-battalion.is-passed .tl-stem,.tl-node.is-battalion.is-active .tl-stem{background:var(--bone)}
.tl-node.is-battalion .tl-card-in{background:rgba(41,48,36,calc(.7 + .25 * var(--f)))}
.tl-node.is-battalion.is-active .tl-card-in,.tl-node.is-battalion .tl-card:hover .tl-card-in{border-left-color:var(--bone)}
.tl-node.is-battalion .tl-meta{color:var(--bone)}
.tl-key{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-family:"General Sans",sans-serif;font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.tl-key .is-up{color:var(--bone)}
.tl-key .is-up::before{content:"\2191  ";}
.tl-key .is-down{color:var(--y)}
.tl-key .is-down::before{content:"\2193  ";}
.tl-node.is-future .tl-dot{border-style:dashed;border-color:var(--y);background:transparent}
.tl-node.is-active .tl-dot{transform:scale(1.5)}
.tl-node.is-reunion.is-active .tl-dot{transform:rotate(45deg) scale(1.5)}
.tl-pulse{position:absolute;left:-22px;top:-21px;width:44px;height:44px;border-radius:50%;border:1px solid var(--y);opacity:0;pointer-events:none}
.tl-node.is-active .tl-pulse{animation:tl-pulse 1.8s var(--ease) infinite}
@keyframes tl-pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
/* branch: stem from the axis, elbow chamfer, then card */
.tl-stem{position:absolute;left:-1px;width:2px;background:rgba(250,247,242,.32);transition:background-color .3s}
.tl-node.is-up .tl-stem{bottom:8px;height:var(--stem)}
.tl-node.is-down .tl-stem{top:10px;height:var(--stem)}
.tl-node.is-active .tl-stem,.tl-node.is-passed .tl-stem{background:var(--y)}
.tl-node.is-memorial.is-passed .tl-stem{background:var(--red)}

.tl-card{position:absolute;left:-1px;width:calc(232px + 148px * var(--f));padding:0;background:none;border:0;text-align:left;cursor:pointer;transform-origin:left bottom;transition:width .45s var(--ease)}
.tl-node.is-up .tl-card{bottom:calc(8px + var(--stem))}
.tl-node.is-down .tl-card{top:calc(10px + var(--stem));transform-origin:left top}
.tl-card-in{position:relative;display:block;padding:14px 16px 16px;background:rgba(14,14,14,calc(.55 + .35 * var(--f)));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:2px solid rgba(250,247,242,.32);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);transition:border-color .3s,background-color .3s;opacity:calc(.62 + .38 * var(--f))}
.tl-node.is-active .tl-card-in,.tl-card:hover .tl-card-in,.tl-card:focus-visible .tl-card-in{border-left-color:var(--y);opacity:1}
.tl-node.is-memorial.is-active .tl-card-in{border-left-color:var(--red)}
.tl-card:focus-visible{outline:none}
.tl-card:focus-visible .tl-card-in{box-shadow:inset 0 0 0 2px var(--y)}
.tl-thumb{position:relative;display:block;width:100%;aspect-ratio:16/10;max-height:max(0px,calc(58px + 66px * var(--f) - var(--cut,0px) * var(--f)));overflow:hidden;margin-bottom:12px;background:#0E0E0E;transition:max-height .45s var(--ease)}
.tl-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(calc(.7 - .7 * var(--f))) contrast(1.05);transform:scale(calc(1.12 - .12 * var(--f)));transition:filter .4s,transform .8s var(--ease)}
.tl-thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px rgba(14,14,14,.6)}
.tl-card:hover .tl-thumb img{filter:none;transform:scale(1.03)}
.tl-meta{display:flex;align-items:center;gap:10px;font-family:"General Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.tl-node.is-memorial .tl-meta{color:#FF6B6B}
.tl-meta .tl-kind{color:var(--mut);letter-spacing:.12em}
.tl-title{display:block;font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:calc(19px + 7px * var(--f));line-height:1.05;text-transform:uppercase;margin-top:6px;color:var(--sand);transition:font-size .45s var(--ease);text-wrap:balance}
.tl-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .35s}
.tl-node.is-active .tl-more,.tl-card:hover .tl-more{grid-template-rows:1fr;opacity:1}
.tl-more>span{overflow:hidden;display:block}
.tl-short{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.45;color:rgba(250,247,242,.85);margin-top:8px}
.tl-speaker{display:flex;gap:10px;align-items:baseline;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;line-height:1.35}
.tl-speaker small{flex:none;font-family:"General Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.tl-speaker b{font-weight:700;color:var(--sand)}
.tl-open{display:inline-flex;gap:8px;align-items:center;margin-top:12px;font-family:"General Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.tl-verify{display:inline-block;margin-left:auto;padding:2px 6px;font-size:10px;letter-spacing:.12em;color:var(--dg);background:var(--bone)}
/* scope reticle on the focused node */
.tl-scope{position:absolute;left:50%;top:var(--axis,56%);width:64px;height:64px;margin:-32px 0 0 -32px;z-index:2;pointer-events:none;opacity:.85;transition:opacity .3s}
.tl-scope::before,.tl-scope::after{content:"";position:absolute;background:var(--red)}
.tl-scope::before{left:50%;top:-14px;bottom:-14px;width:2px;margin-left:-1px}
.tl-scope::after{top:50%;left:-14px;right:-14px;height:2px;margin-top:-1px;opacity:0}
.tl-scope i{position:absolute;inset:0;border:2px solid var(--red);border-radius:50%}

/* scrubber */
.tl-scrub{position:absolute;left:calc(clamp(20px,4vw,56px) + 500px);right:clamp(20px,4vw,56px);bottom:clamp(18px,4vh,36px);z-index:6;height:44px;cursor:pointer;touch-action:none}
.tl-scrub-bands{position:absolute;left:0;right:0;top:18px;height:8px;display:flex;gap:3px}
.tl-band{position:relative;height:100%;background:rgba(250,247,242,.12);transition:background-color .3s}
.tl-band.is-on{background:rgba(242,181,26,.35)}
.tl-band span{position:absolute;bottom:14px;left:0;font-family:"General Sans",sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tl-band.is-on span{color:var(--sand)}
.tl-pip{position:absolute;top:20px;width:2px;height:4px;background:rgba(250,247,242,.5)}
.tl-pip.is-reunion{background:var(--y);height:4px}
.tl-pip.is-honors{background:var(--y);height:8px;top:18px}
.tl-scrub-thumb{position:absolute;top:12px;height:20px;border:1px solid var(--y);background:rgba(242,181,26,.12);pointer-events:none}
.tl-scrub:focus-visible{outline:2px solid var(--y);outline-offset:6px}

.tl-sides{position:absolute;left:clamp(20px,4vw,56px);bottom:calc(clamp(18px,4vh,36px) + 50px);z-index:6;display:flex;padding:3px;gap:3px;background:rgba(14,14,14,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tl .tl-side{padding:5px 10px;border:0;cursor:pointer;background:transparent;color:var(--mut);font-family:"General Sans",sans-serif;font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;transition:background-color .2s,color .2s;white-space:nowrap}
.tl .tl-side:hover{color:var(--sand)}
.tl .tl-side.is-on{background:var(--y);color:var(--dg)}
.tl .tl-side[data-k=unit].is-on{background:var(--bone)}
.tl .tl-side:focus-visible{outline:2px solid var(--y);outline-offset:2px}

/* detail drawer */
.tl-dr{position:fixed;inset:0;z-index:10000;display:grid;grid-template-columns:minmax(0,1fr) min(560px,100%);visibility:hidden;pointer-events:none}
.tl-dr.is-open{visibility:visible;pointer-events:auto}
.tl-dr-scrim{background:rgba(14,14,14,.6);opacity:0;transition:opacity .4s var(--ease);border:0;cursor:pointer}
.tl-dr.is-open .tl-dr-scrim{opacity:1}
.tl-dr-panel{position:relative;background:#121512;color:var(--sand);overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .5s var(--ease);border-left:2px solid var(--y);font-family:"Satoshi","Helvetica Neue",Arial,sans-serif}
.tl-dr.is-open .tl-dr-panel{transform:none}
.tl-dr-x{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border:0;background:rgba(14,14,14,.7);color:var(--sand);font-size:26px;line-height:1;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.tl-dr-x:hover{color:var(--y)}
.tl-dr-x:focus-visible{outline:2px solid var(--y)}
/* the photo sets the frame's shape; very tall photos stop at 70% of the screen */
.tl-dr-hero{position:relative;background:#0E0E0E;overflow:hidden}
.tl-dr-hero img{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block}
.tl-dr-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,21,18,0) 55%,#121512 100%)}
.tl-dr-strip{display:flex;gap:6px;padding:0 28px;margin-top:-36px;position:relative;z-index:2}
.tl-dr-strip button{flex:1;aspect-ratio:4/3;padding:0;border:1px solid rgba(250,247,242,.2);background:#0E0E0E;cursor:pointer;overflow:hidden;opacity:.7;transition:opacity .2s,border-color .2s}
.tl-dr-strip button.is-on,.tl-dr-strip button:hover{opacity:1;border-color:var(--y)}
.tl-dr-strip img{width:100%;height:100%;object-fit:cover;display:block}
.tl-dr-body{padding:24px 28px 40px}
.tl-dr-body .tl-meta{font-size:13px}
.tl-dr-body h3{font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:clamp(32px,4vw,44px);line-height:.95;text-transform:uppercase;margin:10px 0 16px}
.tl-dr-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0 0 20px;padding:1px}
.tl-dr-facts div{background:#121512;padding:12px 14px;outline:1px solid var(--line)}
.tl-dr-facts dt{font-family:"General Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tl-dr-facts dd{margin:4px 0 0;font-size:15px;line-height:1.35;color:var(--sand)}
.tl-dr-facts .is-wide{grid-column:1/-1}
.tl-dr-facts .is-speaker dd{font-weight:700;font-size:17px}
.tl-dr-facts .is-speaker dt{color:var(--y)}
.tl-dr-text{font-size:17px;line-height:1.6;color:rgba(250,247,242,.88)}
.tl-dr-text p{margin:0 0 14px}
.tl-dr-list{margin:4px 0 20px;padding:0;list-style:none}
.tl-dr-list li{position:relative;padding:8px 0 8px 22px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.tl-dr-list li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;background:var(--y);transform:rotate(45deg)}
.tl-dr-quote{margin:4px 0 22px;padding:4px 0 4px 18px;border-left:3px solid var(--y);font-family:"General Sans",sans-serif;font-weight:500;font-size:19px;line-height:1.4;color:var(--sand)}
.tl-dr-src{margin-top:22px;font-size:13px;line-height:1.5;color:var(--mut)}
.tl-dr-talks{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.tl-dr-talks h4{margin:0 0 12px;font-family:"General Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.tl-dr-talk{display:flex;gap:14px;align-items:flex-start;padding:12px;margin-bottom:8px;background:rgba(239,228,206,.05);color:inherit;text-decoration:none}
a.tl-dr-talk:hover{background:rgba(239,228,206,.1)}
.tl-dr-talk-th{flex:none;width:84px;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--y);color:var(--dg);overflow:hidden;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.tl-dr-talk-th img{width:100%;height:100%;object-fit:cover}
.tl-dr-talk-ep{font-family:"Warband Stencil","Clash Display",Impact,sans-serif;font-size:30px;line-height:1}
.tl-dr-talk-mic{font-family:"General Sans",sans-serif;font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.tl-dr-talk-tx{min-width:0}
.tl-dr-talk-q{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--bone)}
.tl-dr-talk .tl-dr-award-b{display:block;margin-top:8px}
.tl-dr-award.has-photo{display:grid;grid-template-columns:64px 1fr;column-gap:14px}
.tl-dr-award.has-photo > *:not(.tl-dr-award-ph){grid-column:2}
.tl-dr-award-ph{grid-row:1 / span 5;width:64px;height:80px;object-fit:cover;object-position:top}
.tl-cite-ph{float:right;width:120px;height:150px;margin:28px 0 12px 16px;object-fit:cover;object-position:top}
.tl-dr-fallen{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.tl-dr-fallen h4{margin:0 0 12px;font-family:"General Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.tl-dr-fall{display:flex;gap:14px;align-items:flex-start;padding:12px;margin-bottom:8px;background:rgba(239,228,206,.05);border-left:3px solid var(--bone)}
.tl-dr-fall-ph{flex:none;width:64px;height:80px;display:flex;align-items:center;justify-content:center;background:#232823;color:var(--mut);font-family:"Clash Display",Impact,sans-serif;font-size:22px;overflow:hidden}
.tl-dr-fall-cr{margin-top:4px;font-size:11px;color:var(--mut)}
.tl-dr-fall-ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.tl-dr-valor{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.tl-dr-valor h4{margin:0 0 12px;font-family:"General Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.tl-dr-award{position:relative;padding:12px 14px 12px 16px;margin-bottom:8px;background:rgba(239,228,206,.05);border-left:3px solid var(--bone)}
.tl-dr-award.is-medal-of-honor{border-left-color:#5FB0E0}
.tl-dr-award.is-navy-cross{border-left-color:var(--y)}
.tl-dr-award-t{font-family:"General Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tl-dr-award-n{margin-top:3px;font-weight:700;font-size:16px;color:var(--sand)}
.tl-dr-award-d{margin-top:2px;font-size:13px;color:var(--mut)}
.tl .tl-dr-award-b,.tl-dr .tl-dr-award-b{margin-top:8px;padding:0;border:0;background:none;cursor:pointer;color:var(--y);font-family:"General Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tl-dr-award-b:hover{color:var(--yh)}
.tl-cite{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:flex-start;padding:24px;background:rgba(14,14,14,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow-y:auto}
.tl-cite-box{position:relative;width:100%;padding:28px 26px 24px;background:#171A17;border-top:3px solid var(--y)}
.tl-cite-box h4{margin:4px 40px 14px 0;font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:24px;line-height:1.05;text-transform:uppercase;color:var(--sand)}
.tl-cite-box p{margin:0;font-size:15px;line-height:1.6;color:var(--bone)}
.tl-cite-src{display:inline-block;margin-top:16px;font-size:13px;color:var(--y)}
.tl-cite .tl-dr-x{position:absolute;top:12px;right:12px}
.tl-dr-src b{color:var(--sand);font-weight:700}
.tl-intro p.tl-wip{margin-top:-8px;font-size:15px;line-height:1.5;color:var(--mut)}
.tl-fix{color:var(--sand);text-decoration:underline;text-underline-offset:3px}
.tl-fix:hover{color:var(--y)}
.tl-dr-fix{margin-top:12px;font-size:13px;line-height:1.5;color:var(--mut)}
.tl-dr-note{margin-top:14px;padding:10px 12px;background:rgba(239,228,206,.08);border-left:3px solid var(--bone);font-size:13px;line-height:1.5;color:var(--bone)}
.tl-dr .tl-btns{margin-top:22px}
.tl-dr-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.tl-dr-nav button{background:none;border:0;cursor:pointer;color:var(--mut);font-family:"General Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 0;max-width:48%;text-align:left}
.tl-dr-nav button:last-child{text-align:right}
.tl-dr-nav button span{display:block;color:var(--sand);letter-spacing:0;text-transform:none;font-family:"Satoshi",sans-serif;font-size:15px;font-weight:700;margin-top:4px}
.tl-dr-nav button:hover span{color:var(--y)}
.tl-dr-nav button:disabled{visibility:hidden}

/* filters */
.tl-filter{position:absolute;left:clamp(20px,4vw,56px);bottom:clamp(18px,4vh,36px);height:44px;z-index:6;display:flex;gap:4px;align-items:flex-end}
.tl .tl-chip{--c:6px;padding:7px 10px;border:0;cursor:pointer;font-family:"General Sans",sans-serif!important;font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:rgba(14,14,14,.55);color:var(--mut);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));display:flex;gap:8px;align-items:center}
.tl-chip i{display:block;box-sizing:border-box;width:10px;height:10px;border:1.5px solid currentColor;background:transparent}
.tl-chip[data-k=association] i{border-radius:50%}
.tl-chip[data-k=battalion] i{border-radius:1px;border-color:var(--bone)}
.tl .tl-chip[data-k=battalion]{color:var(--bone)}
.tl-chip[data-k=reunion] i{width:9px;height:9px;transform:rotate(45deg)}
.tl-chip[data-k=honors] i{width:12px;height:12px;border:0;background:currentColor;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tl-chip[data-k=memorial] i{border-color:var(--red);border-radius:50%}
.tl-chip.is-on{background:rgba(250,247,242,.14);color:var(--sand)}
.tl-chip:focus-visible{outline:2px solid var(--y)}
.tl-node.is-dim{opacity:.18;pointer-events:none}
.tl-node.is-dim .tl-card{visibility:hidden}

@media (max-width:1279px){
  .tl-sides{bottom:calc(clamp(18px,4vh,36px) + 92px)}
  .tl-scrub{left:clamp(20px,4vw,56px)}
  .tl-filter{bottom:calc(clamp(18px,4vh,36px) + 50px);height:auto;right:0;overflow-x:auto;scrollbar-width:none}
  .tl .tl-chip{flex:none}
}
@media (max-width:1439px){
  .tl-jump-lbl{display:none}
  .tl .tl-jump-btn{min-width:0;padding:8px 12px}
}
@media (max-width:991px){
  .tl-sides{bottom:calc(clamp(18px,4vh,36px) + 92px)}
  .tl-scrub{left:clamp(20px,4vw,56px)}
  .tl-filter{bottom:calc(clamp(18px,4vh,36px) + 50px);height:auto}
  .tl-hud{top:84px}
  .tl-hud-sub{display:none}
  .tl-jump{left:clamp(20px,4vw,56px);right:0;top:auto;bottom:calc(clamp(18px,4vh,36px) + 134px);overflow-x:auto;scrollbar-width:none;padding-right:20px}
  .tl-jump::-webkit-scrollbar{display:none}
  .tl .tl-jump-btn{flex:none;min-width:0;padding:6px 10px 7px}
  .tl-jump-yr{font-size:16px}
  .tl-dr{grid-template-columns:1fr}
  .tl-dr-scrim{display:none}
  .tl-dr-panel{transform:translateY(100%);border-left:0;border-top:2px solid var(--y);margin-top:8vh}
  .tl-dr.is-open .tl-dr-panel{transform:none}
}
@media (max-width:767px){
  .tl-era-big{opacity:.6}
  .tl-card{width:calc(208px + 64px * var(--f))}
  .tl-title{font-size:calc(17px + 3px * var(--f))}
  .tl-hud-year{font-size:52px}
  .tl-stats{flex-wrap:wrap;gap:16px 24px}
  .tl-intro h2{font-size:min(40px,8.4vw);margin:12px 0 16px;max-width:none}
  .tl-intro p{font-size:16px}
  .tl-cue{display:none}
  .tl-stats{display:none}
  .tl-stat b{font-size:26px}
  .tl-stat span{font-size:11px}
  .tl .tl-filter{right:0;overflow-x:auto;scrollbar-width:none;padding-right:20px}
  .tl .tl-filter::-webkit-scrollbar{display:none}
  .tl .tl-chip{flex:none}
  .tl.is-native .tl-node{scroll-snap-align:start;scroll-margin-left:20vw}
  .tl-dr-strip{padding:0 20px}
  .tl-dr-body{padding:20px 20px 36px}
  .tl-band span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tl-grain,.tl-cue i::after,.tl-node.is-active .tl-pulse{animation:none}
  .tl-bg-layer,.tl-dr-panel,.tl-card,.tl-thumb,.tl-thumb img{transition:none}
}

/* Timeline / Map switch and the map view (timeline-map.js) */
.tl-view{position:absolute;right:clamp(20px,4vw,56px);bottom:calc(clamp(18px,4vh,36px) + 50px);z-index:7;display:flex;padding:3px;gap:3px;background:rgba(14,14,14,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tl .tl-view button{padding:6px 14px;border:0;cursor:pointer;background:transparent;color:var(--mut);font-family:"General Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:background-color .2s,color .2s}
.tl .tl-view button:hover{color:var(--sand)}
.tl .tl-skip{position:absolute;right:calc(clamp(20px,4vw,56px) + 170px);bottom:calc(clamp(18px,4vh,36px) + 50px);z-index:7;height:34px;padding:0 14px;border:0;cursor:pointer;background:rgba(14,14,14,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--mut);font-family:"General Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:color .2s}
.tl .tl-skip::after{content:" \2193"}
.tl .tl-skip:hover,.tl .tl-skip:focus-visible{color:var(--y)}
.tl.is-map .tl-skip{visibility:hidden}
/* phones scroll the track sideways, so the page scrolls past the timeline normally */
@media (max-width:991px),(pointer:coarse){.tl .tl-skip{display:none}}
.tl .tl-view button.is-on{background:var(--y);color:var(--dg)}
.tl .tl-view button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.tl-map-box{display:none;position:absolute;inset:0;z-index:4}
.tl.is-map .tl-map-box{display:block}
.tl.is-map .tl-viewport,.tl.is-map .tl-scope,.tl.is-map .tl-hud,.tl.is-map .tl-jump:not(.tl-map-legs),.tl.is-map .tl-sides,.tl.is-map .tl-filter,.tl.is-map .tl-scrub{visibility:hidden}
.tl-map{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 50%,#1d221c 0%,#121512 70%,#0b0d0b 100%)}
.tl-map::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 220px 60px rgba(0,0,0,.75)}
.tl-map-svg{position:relative;width:100%;height:100%;display:block}
.tl-map-cv{position:absolute;inset:0;pointer-events:none}
.tl-map-cv canvas{position:absolute;inset:0;width:100%;height:100%}
.tl-map-cv-r{opacity:0;transition:opacity .6s}
.tl-map-cv-r.is-on{opacity:1}
.tl-map-land{fill:#2b3326;stroke:rgba(239,228,206,.2);stroke-width:.6px;vector-effect:non-scaling-stroke}
.tl-map-grat{fill:none;stroke:rgba(239,228,206,.06);stroke-width:.5px;vector-effect:non-scaling-stroke}
.tl-map{--sea:#5FB0E0;--air:#EFE4CE;--helo:#9ED36A;--land:#E0323F}
.tl-map-done{fill:none;stroke:var(--land);stroke-width:3px;stroke-dasharray:14 4;vector-effect:non-scaling-stroke;opacity:.9}
.tl-map-done.is-sea{stroke:var(--sea);stroke-dasharray:9 6}
.tl-map-done.is-air{stroke:var(--air);stroke-dasharray:1 6;stroke-linecap:round}
.tl-map-done.is-join{stroke:var(--bone);stroke-dasharray:4 4}
.tl-map-done.is-helo{stroke:var(--helo);stroke-dasharray:7 4 1 4;stroke-linecap:round}
.tl-map-done.is-old{opacity:.3;stroke-width:2px}
.tl-map-route{fill:none;stroke:var(--land);stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(224,50,63,.6))}
.tl-map-route.is-sea{stroke:var(--sea);filter:drop-shadow(0 0 6px rgba(95,176,224,.6))}
.tl-map-route.is-air{stroke:var(--air);filter:drop-shadow(0 0 6px rgba(239,228,206,.5))}
.tl-map-route.is-helo{stroke:var(--helo);filter:drop-shadow(0 0 6px rgba(158,211,106,.5))}
.tl-map-stop circle{fill:var(--dg);stroke:rgba(239,228,206,.4);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.tl-map-stop.is-leg circle{stroke:var(--y);stroke-width:2.5px}
.tl-map-stop.is-on circle{fill:var(--y)}
.tl-map-stop text{display:none;font-family:"General Sans",sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--bone);paint-order:stroke;stroke:#121512;stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-stop.is-label text{display:block}
.tl-map-stop.is-under text,.tl-map-stop.is-hid text{display:none}
.tl-map-stop.is-on text{fill:var(--y);font-weight:700}
.tl-map-date.is-long{font-size:clamp(36px,4vw,56px)}
.tl-map-via{opacity:0;transition:opacity .4s}
.tl-map-via.is-hit{opacity:1}
.tl-map-via rect{fill:var(--dg);stroke:var(--bone);stroke-width:1.5px;vector-effect:non-scaling-stroke;transform:rotate(45deg)}
.tl-map-via text{font-family:"General Sans",sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:var(--mut);paint-order:stroke;stroke:#121512;stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-relief{opacity:0;transition:opacity .6s}
.tl-map-relief.is-on{opacity:1}
.tl-map-coast path{fill:none;stroke:rgba(239,228,206,.22);stroke-width:.6px;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .6s}
.tl-map-coast.is-on path{opacity:1}
.tl-map-detail{opacity:0;transition:opacity .6s;pointer-events:none}
.tl-map-detail.is-on{opacity:1}
.tl-map-dwater path{fill:rgba(104,136,156,.42);stroke:rgba(126,160,182,.5);stroke-width:.6px;vector-effect:non-scaling-stroke}
.tl-map-dlines path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-dlines .is-river{stroke:rgba(126,160,182,.8);stroke-width:1.8px}
.tl-map-dlines .is-canal{stroke:rgba(126,160,182,.42);stroke-width:.8px}
.tl-map-dlines .is-rail{stroke:rgba(239,228,206,.24);stroke-width:.8px;stroke-dasharray:4 3}
.tl-map-dlines .is-motorway{stroke:rgba(239,228,206,.55);stroke-width:2.2px}
.tl-map-dlines .is-trunk{stroke:rgba(239,228,206,.38);stroke-width:1.3px}
.tl-map-dlines .is-primary{stroke:rgba(239,228,206,.2);stroke-width:.8px}
.tl-map-dlabs text{font-family:"Satoshi",sans-serif;font-weight:500;font-style:italic;letter-spacing:.04em;text-anchor:middle;fill:rgba(239,228,206,.55);paint-order:stroke;stroke:rgba(18,21,18,.85);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-places g{opacity:0;transition:opacity .4s;pointer-events:none}
.tl-map-places g.is-show{opacity:1}
.tl-map-places g.is-show.is-hid{opacity:0}
.tl-map-places circle{fill:rgba(239,228,206,.55)}
.tl-map-places .is-base circle{fill:none;stroke:rgba(239,228,206,.6);stroke-width:1px;vector-effect:non-scaling-stroke}
.tl-map-places .is-area circle{display:none}
.tl-map-places text{font-family:"Satoshi",sans-serif;font-weight:500;fill:rgba(239,228,206,.62);paint-order:stroke;stroke:rgba(18,21,18,.85);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-places .is-area text{font-family:"General Sans",sans-serif;font-weight:600;letter-spacing:.25em;text-anchor:middle;fill:rgba(239,228,206,.38);font-style:normal}
.tl-map-stop.is-leg{transition:opacity .4s}
.tl-map-stop.is-leg:not(.is-on):not(.is-near){opacity:.38}
.tl-map-units rect{fill:var(--bone);stroke:#0E0E0E;stroke-width:1.5px;vector-effect:non-scaling-stroke;transform:rotate(45deg);animation:tl-unit 1.6s ease-in-out infinite}
.tl-map-units text{font-family:"General Sans",sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;fill:var(--bone);paint-order:stroke;stroke:#121512;stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-fleet text{font-family:"General Sans",sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--sea);paint-order:stroke;stroke:#121512;stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-co{fill:rgba(14,14,14,.85);stroke:var(--y);stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.tl-map-cos text,.tl-map-fleet .tl-map-co-l{font-family:"General Sans",sans-serif;font-weight:700;text-anchor:end;fill:var(--y);paint-order:stroke;stroke:#121512;stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-route.is-join{stroke:var(--bone);stroke-opacity:.55;filter:none}
@keyframes tl-unit{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.tl-map-units rect{animation:none}}
.tl-map-svg g.is-close .tl-map-land{fill:transparent;stroke:transparent}
.tl-map-svg g.is-close .tl-map-coast path{opacity:0}
.tl-map.is-explore .tl-map-stop{cursor:pointer}
.tl-map.is-explore .tl-map-stop circle{fill:var(--y);stroke:#121512;stroke-width:1.5px}
.tl-map.is-explore .tl-map-stop:hover circle{stroke:var(--sand);stroke-width:2.5px}
.tl-map.is-explore .tl-map-stop text{font-size:inherit}
.tl-map-credit{position:absolute;right:clamp(20px,4vw,56px);bottom:8px;z-index:6;font-size:10px;color:rgba(187,187,180,.7);opacity:0;transition:opacity .6s;pointer-events:none}
.tl-map-credit.is-on{opacity:1}
.tl-map-marker{fill:var(--land);stroke:#0E0E0E;stroke-width:1px;vector-effect:non-scaling-stroke;fill-rule:evenodd;filter:drop-shadow(0 0 6px rgba(0,0,0,.8))}
.tl-map-marker.is-sea{fill:var(--sea)}
.tl-map-marker.is-air{fill:var(--air)}
.tl-map-marker.is-helo{fill:var(--helo);fill-rule:nonzero}
.tl-map-key{position:absolute;left:clamp(20px,4vw,56px);bottom:calc(clamp(18px,4vh,36px) + 56px);z-index:6;display:flex;gap:14px;padding:7px 12px;background:rgba(14,14,14,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tl-map-key span{display:flex;align-items:center;gap:6px}
.tl-map-key svg{width:46px;height:14px;overflow:visible}
.tl-map-key line{stroke-width:2.5px}
.tl-map-key .is-sea line{stroke:var(--sea);stroke-dasharray:6 4}.tl-map-key .is-sea path{fill:var(--sea)}
.tl-map-key .is-air line{stroke:var(--air);stroke-dasharray:1 4;stroke-linecap:round}.tl-map-key .is-air path{fill:var(--air)}
.tl-map-key .is-helo line{stroke:var(--helo);stroke-dasharray:5 3 1 3}.tl-map-key .is-helo path{fill:var(--helo);fill-rule:nonzero}
.tl-map-key .is-land line{stroke:var(--land);stroke-dasharray:10 3}.tl-map-key .is-land path{fill:var(--land)}
.tl-map-key path{fill-rule:evenodd}
.tl-map-key b{font-family:"General Sans",sans-serif;font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.tl-map-hud{position:absolute;left:clamp(20px,4vw,56px);top:clamp(104px,14vh,132px);z-index:5;max-width:min(400px,calc(100% - 40px));pointer-events:none}
.tl-map-date{font-family:"Warband Stencil","Clash Display",Impact,sans-serif;font-size:clamp(44px,5.6vw,80px);line-height:.95;margin-top:8px;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.tl-map-place{font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;line-height:1;margin-top:6px}
.tl-map-note{font-size:16px;line-height:1.5;color:rgba(250,247,242,.85);margin:12px 0 0}
.tl-map-legs.tl-jump{z-index:6}
.tl-map-ctrl{position:absolute;left:clamp(20px,4vw,56px);bottom:clamp(18px,4vh,36px);z-index:6;display:flex;gap:6px;align-items:center}
.tl .tl-map-ctrl button{--c:8px;min-width:44px;min-height:44px;padding:0 16px;border:0;cursor:pointer;font-family:"General Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:rgba(14,14,14,.75);color:var(--sand);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.tl .tl-map-ctrl button.is-primary{background:var(--y);color:var(--dg);min-width:96px}
.tl .tl-map-ctrl button.is-arrow{min-width:52px;min-height:52px;padding:0;display:grid;place-items:center;color:var(--y);background:rgba(14,14,14,.85);transition:background .15s,color .15s}
.tl .tl-map-ctrl button.is-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:square;stroke-linejoin:miter}
.tl .tl-map-ctrl button.is-next svg{transform:scaleX(-1)}
.tl .tl-map-ctrl button.is-arrow:hover:not(:disabled){background:var(--y);color:var(--dg)}
.tl .tl-map-ctrl button.is-primary{min-height:52px}
.tl .tl-map-ctrl button:disabled{opacity:.35;cursor:default}
.tl-map-zread{position:absolute;left:clamp(20px,4vw,56px);bottom:calc(clamp(18px,4vh,36px) + 100px);z-index:7;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;background:var(--y);color:var(--dg);font-family:"General Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em}
.tl .tl-map-zread button{border:0;padding:4px 8px;background:var(--dg);color:var(--y);font:inherit;cursor:pointer}
.tl-map-pop-n{display:inline-block;margin-bottom:8px;padding:3px 7px;background:var(--y);color:var(--dg);font-family:"General Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em}
/* tooltips: the inverse of the dark controls (light sand, dark text), small, with a caret toward the control */
.tl-tip{position:absolute;z-index:40;left:0;top:0;max-width:260px;padding:6px 9px;border-radius:4px;background:#EFE4CE;color:#121512;font-family:"Satoshi",sans-serif;font-weight:600;font-size:12px;line-height:1.35;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,4px);transition:opacity .15s,transform .15s}
.tl-tip.is-on{opacity:1;transform:translate(-50%,0)}
.tl-tip::after{content:"";position:absolute;left:calc(50% + var(--caret,0px));top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#EFE4CE}
.tl-tip.is-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#EFE4CE}
.tl-tip.is-hint{padding:9px 13px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.tl-tip.is-hint b{display:block;font-family:"General Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.tl-tip.is-hint span{display:block;margin-top:2px;font-weight:500}
@media (prefers-reduced-motion:reduce){.tl-tip{transition:none}}
.tl .tl-map-ctrl button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
/* one tick per stop; with 60+ stops the ticks shrink rather than push the controls off screen */
.tl-map-pips{display:flex;gap:2px;margin:0 6px;width:min(320px,40vw);min-width:0;overflow:hidden}
.tl-map-pips i{min-width:1px}
.tl-map-pips i{flex:1;height:4px;background:rgba(250,247,242,.18)}
.tl-map-pips i.is-gap{margin-left:5px}
.tl-map-pips i.is-done{background:var(--red)}
.tl-map-pips i.is-on{background:var(--y)}
.tl-map-svg{cursor:grab;touch-action:pan-y}
.tl-map.is-grab .tl-map-svg{cursor:grabbing}
.tl-map-zoom{position:absolute;right:clamp(20px,4vw,56px);top:calc(clamp(108px,14vh,132px) + 72px);z-index:6;display:flex;flex-direction:column;gap:3px}
.tl .tl-map-zoom button{width:40px;height:40px;padding:0;border:0;cursor:pointer;background:rgba(14,14,14,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--sand);font-family:"General Sans",sans-serif;font-weight:600;font-size:20px;line-height:1}
.tl .tl-map-zoom button:hover{background:rgba(250,247,242,.14)}
.tl .tl-map-zoom button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.tl .tl-map-zoom button.is-full{display:grid;place-items:center;margin-top:6px}
.tl-map-zoom .is-full svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:square}
.tl .tl-map-zoom button.is-full[aria-pressed=true]{background:var(--y);color:var(--dg)}
/* the welcome card when the page opens on the map: the map shows dimmed behind it until "Explore the map" */
.tl-map-welcome{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:radial-gradient(70% 70% at 50% 50%,rgba(14,14,14,.55),rgba(14,14,14,.88));opacity:0;transition:opacity .4s var(--ease)}
.tl-map-welcome.is-on{opacity:1}
.tl-map-welcome-in{max-width:520px;text-align:center}
.tl-map-welcome-eye{margin:0 0 12px;font-family:"General Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--y)}
.tl-map-welcome h2{margin:0 0 16px;font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:clamp(34px,4.4vw,60px);line-height:.95;text-transform:uppercase;color:var(--sand)}
.tl-map-welcome p{margin:0 0 26px;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:rgba(250,247,242,.85)}
.tl .tl-map-welcome-go{min-height:52px;padding:0 30px;border:0;cursor:pointer;background:var(--y);color:var(--dg);font-family:"General Sans",sans-serif;font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.tl .tl-map-welcome-go:hover{background:var(--yh)}
.tl.is-map:has(.tl-map-welcome) .tl-view,.tl.is-map:has(.tl-map-welcome) .tl-map-zoom{visibility:hidden}
/* All places: the panel shows the overview only, without the last stop's place, facts and links */
.tl-map.is-explore .tl-map-hud .tl-map-pop{display:none}
/* after the welcome card, Play pulses until it's pressed */
.tl .is-beckon{animation:tl-beckon 1.6s ease-out infinite}
@keyframes tl-beckon{0%{box-shadow:0 0 0 0 rgba(242,181,26,.75)}70%{box-shadow:0 0 0 16px rgba(242,181,26,0)}100%{box-shadow:0 0 0 0 rgba(242,181,26,0)}}
@media (prefers-reduced-motion:reduce){.tl .is-beckon{animation:none;outline:3px solid var(--y);outline-offset:3px}}
.tl-map-zlvl{width:40px;padding:5px 0;background:var(--y);color:var(--dg);text-align:center;font-family:"General Sans",sans-serif;font-weight:700;font-size:13px}
/* story drawer open beside the map (desktop): the right-hand controls sit beside it; the period bar shows years only
   and scrolls if it still doesn't fit beside the heading */
@media (min-width:992px){
  .tl-map-legs.tl-jump,.tl-map-zoom,.tl-map-credit,.tl.is-map .tl-view{transition:right .5s var(--ease)}
  .tl-stage.is-inset .tl-map-legs.tl-jump{right:calc(clamp(20px,4vw,56px) + var(--inset));max-width:calc(100% - var(--inset) - clamp(20px,4vw,56px) - 522px);overflow-x:auto;scrollbar-width:none}
  .tl-stage.is-inset .tl-map-legs.tl-jump::-webkit-scrollbar{display:none}
  .tl-stage.is-inset .tl-map-legs .tl-jump-lbl{display:none}
  .tl-stage.is-inset .tl-map-legs .tl-jump-btn{flex:none;min-width:0;padding:8px 11px}
  .tl-stage.is-inset .tl-map-zoom,.tl-stage.is-inset .tl-map-credit,.tl.is-map .tl-stage.is-inset .tl-view{right:calc(clamp(20px,4vw,56px) + var(--inset))}
}
.tl-map-pop{position:absolute;z-index:6;width:280px;right:calc(clamp(20px,4vw,56px) + 52px);top:calc(clamp(108px,14vh,132px) + 72px);max-height:calc(100% - clamp(108px,14vh,132px) - 200px);overflow-y:auto;background:rgba(14,14,14,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:3px solid var(--y);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.tl-map-pop.is-on{opacity:1;transform:none;pointer-events:auto}
.tl-map-pop img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;background:#0E0E0E;filter:grayscale(.3) contrast(1.05)}
.tl-map-lead{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s}
.tl-map-lead.is-on{opacity:1}
.tl-map-lead polyline{fill:none;stroke:rgba(242,181,26,.7);stroke-width:1.2px}
.tl-map-lead circle{fill:none;stroke:var(--y);stroke-width:1.5px}
.tl-map-pop-b{padding:12px 14px 14px}
.tl-map-pop-d{font-family:"General Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.tl-map-pop-t{font-family:"Clash Display",Impact,sans-serif;font-weight:600;font-size:20px;text-transform:uppercase;line-height:1;margin:6px 0 8px}
.tl-map-pop-s{display:none;margin:0 0 8px;font-size:14px;line-height:1.45;color:rgba(250,247,242,.88)}
.tl-map-pop ul{margin:0;padding:0;list-style:none}
.tl-map-pop li{position:relative;padding:3px 0 3px 14px;font-size:13px;line-height:1.4;color:rgba(250,247,242,.88)}
.tl-map-pop li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--y);transform:rotate(45deg)}
.tl-map-pop-src{margin-top:8px;font-size:11px;line-height:1.45;color:var(--mut)}
.tl-map-pop-src a{display:block;margin-top:3px;color:var(--y);text-decoration:none;font-weight:700}
.tl-map-pop-src a:hover{text-decoration:underline}
.tl-map-pop-btns{display:flex;gap:16px;margin-top:10px}
.tl .tl-map-pop-btns button{padding:6px 0;border:0;background:none;cursor:pointer;color:var(--y);font-family:"General Sans",sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.tl .tl-map-pop-btns button.is-quiet{color:var(--mut)}
.tl .tl-map-pop-btns button:hover{color:var(--sand)}
.tl .tl-map-pop-btns button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.tl-dr.is-map.is-open{pointer-events:none}
.tl-dr.is-map .tl-dr-scrim{display:none}
.tl-dr.is-map .tl-dr-panel{pointer-events:auto;grid-column:2}
.tl-dr-cr{padding:6px 28px 0;font-size:12px;line-height:1.4;color:var(--mut)}
@media (max-width:1279px){
  .tl-view{bottom:calc(clamp(18px,4vh,36px) + 92px)}
}
@media (max-width:767px){
  .tl-map-note{display:none}
  .tl-map-date{font-size:44px}
  .tl-map-hud{top:84px}
  .tl-map-ctrl{right:clamp(20px,4vw,56px)}
  .tl-map-pips{flex:1;width:auto;gap:1px}
  .tl-map-pips i.is-gap{margin-left:3px}
  .tl-map-pop{left:16px;right:16px;width:auto;top:auto;bottom:calc(clamp(18px,4vh,36px) + 182px)}
  .tl-map-pop img,.tl-map-pop ul,.tl-map-pop-src{display:none}
  .tl-map-zoom{top:190px;right:16px}
  .tl-map-key{display:none}
  .tl-map-pop-s{display:block}
  .tl-dr-cr{padding:6px 20px 0}
}
@media (prefers-reduced-motion:reduce){
  .tl-map-pop{transition:none}
}

/* first-hand accounts: a player under the stop's title and copy, the stop's clips below it */
.tl-acc{display:none;margin-top:18px;width:min(400px,calc(100vw - 40px));pointer-events:auto}
.tl-acc.is-on{display:block}
.tl-acc-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;white-space:nowrap;font-family:"General Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--y)}
.tl-acc-hd b{margin-right:4px}
.tl .tl-acc-auto{display:flex;align-items:center;gap:8px;border:0;padding:4px 0;background:none;cursor:pointer;color:var(--sand);font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap}
.tl-acc-auto i{position:relative;width:30px;height:16px;border-radius:8px;background:rgba(250,247,242,.25);transition:background .2s}
.tl-acc-auto i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--sand);transition:transform .2s}
.tl-acc-auto[aria-pressed="true"] i{background:var(--y)}
.tl-acc-auto[aria-pressed="true"] i::after{transform:translateX(14px);background:var(--dg)}
.tl-acc-player{background:#121512;border-top:3px solid var(--y);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.tl-acc-pv{position:relative;aspect-ratio:16/9;background:#000}
.tl-acc-yt,.tl-acc-yt iframe,.tl-acc-yt > div{position:absolute;inset:0;width:100%;height:100%}
.tl-acc-yt{visibility:hidden}
.tl-acc.is-playing .tl-acc-yt{visibility:visible}
.tl .tl-acc-poster{position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:100%;padding:0;border:0;cursor:pointer;background:#000}
.tl-acc.is-playing .tl-acc-poster{display:none}
.tl-acc-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7;transition:opacity .2s}
.tl-acc-poster:hover img{opacity:.9}
.tl-acc-poster span{position:relative;display:flex;white-space:nowrap;align-items:center;gap:10px;padding:12px 18px;background:var(--y);color:var(--dg);font-family:"General Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.tl-acc-poster span::before{content:"";border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.tl-acc-ph{display:none;gap:10px;align-items:flex-start;justify-content:space-between;padding:8px 10px}
.tl-acc.is-playing .tl-acc-ph{display:flex}
.tl-acc-pt b{display:block;font-family:"General Sans",sans-serif;font-weight:700;font-size:13px;color:var(--sand)}
.tl-acc-pt span{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.tl-acc.is-blocked .tl-acc-pt span::after{content:" · Tap the video to start it";color:var(--y)}
.tl-acc-pb{display:flex;gap:6px;flex:none}
.tl .tl-acc-pb button{border:0;cursor:pointer;padding:6px 10px;background:rgba(250,247,242,.1);color:var(--sand);font-family:"General Sans",sans-serif;font-weight:700;font-size:12px}
.tl .tl-acc-pb button:hover{background:var(--y);color:var(--dg)}
.tl-acc-row{display:flex;gap:6px;margin-top:6px;overflow-x:auto;scrollbar-width:thin}
.tl .tl-acc-it{flex:none;display:flex;align-items:center;gap:8px;width:190px;padding:4px;border:1px solid rgba(250,247,242,.16);background:rgba(18,21,18,.9);cursor:pointer;text-align:left;color:var(--sand)}
.tl .tl-acc-it:hover,.tl .tl-acc-it.is-on{border-color:var(--y)}
.tl-acc-it img{flex:none;width:56px;aspect-ratio:16/9;object-fit:cover}
.tl-acc-it span{min-width:0}
.tl-acc-it b{display:block;font-family:"General Sans",sans-serif;font-weight:700;font-size:11px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-acc-it i{display:block;font-style:normal;font-size:10px;color:var(--mut);margin-top:1px}
/* short screens: a smaller player, so the key and controls stay clear */
@media (max-height:820px){.tl-acc{width:min(320px,calc(100vw - 40px))}.tl-acc-row{display:none}}
@media (max-width:767px){.tl-map.is-narrating .tl-map-pop,.tl-map.is-narrating .tl-map-lead{display:none}
  .tl-acc{width:calc(100vw - 92px);margin-top:10px}.tl-acc-row{display:none}.tl-acc-hd{font-size:10px;letter-spacing:.06em}
  .tl-acc:not(.is-playing) .tl-acc-pv{aspect-ratio:auto;height:44px}.tl-acc:not(.is-playing) .tl-acc-poster img{display:none}.tl .tl-acc-poster span{padding:10px 14px}
  .tl-acc:not(.is-playing) .tl-acc-player,.tl-acc:not(.is-playing) .tl-acc-pv,.tl .tl-acc:not(.is-playing) .tl-acc-poster{background:none;border:0;box-shadow:none;justify-items:start}}

/* the drawer tab on the map (desktop): on the drawer's left edge, or at the map's right edge when the drawer is hidden */
.tl-dr-tab{display:none}
@media (min-width:992px){
  .tl.is-map .tl-dr-tab{position:absolute;top:50%;right:var(--inset,0px);z-index:9;display:flex;flex-direction:column;align-items:center;gap:6px;width:40px;padding:12px 0 14px;border:0;cursor:pointer;transform:translateY(-50%);background:var(--y);color:var(--dg);transition:right .5s var(--ease),background .15s;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px),0 8px)}
  .tl.is-map .tl-dr-tab:hover{background:var(--yh)}
  .tl-dr-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
  .tl-dr-tab .tl-dr-tab-c{transition:transform .3s;transform-origin:7.5px 12px}
  .tl-dr-tab.is-open .tl-dr-tab-c{transform:scaleX(-1)}
  .tl-dr-tab span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"General Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
  .tl-stage.is-inset .tl-map-zoom{right:calc(clamp(20px,4vw,56px) + var(--inset) + 20px)}
}
/* search: an icon that opens into a box, results below it */
.tl-search{position:absolute;top:clamp(108px,14vh,132px);right:calc(clamp(20px,4vw,56px) + var(--inset,0px));z-index:12;display:flex;flex-wrap:wrap;justify-content:flex-end;width:44px;transition:width .3s var(--ease),right .5s var(--ease)}
.tl-search.is-open{width:min(440px,calc(100vw - 40px))}
.tl .tl-search-btn{flex:none;width:44px;height:44px;border:0;cursor:pointer;display:grid;place-items:center;background:rgba(14,14,14,.8);color:var(--y);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.tl .tl-search-btn:hover,.tl-search.is-open .tl-search-btn{background:var(--y);color:var(--dg)}
.tl-search-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
.tl .tl-search-in{display:none;flex:1;min-width:0;height:44px;margin-left:4px;padding:0 14px;border:0;border-bottom:2px solid var(--y);background:#121512;color:var(--sand);font-family:"Satoshi",sans-serif;font-size:15px;outline:none}
.tl-search.is-open .tl-search-in{display:block;order:-1}
.tl-search-in::placeholder{color:var(--mut)}
.tl-search-list{display:none;width:100%;max-height:min(60vh,520px);overflow-y:auto;margin-top:6px;background:rgba(14,14,14,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(0,0,0,.6)}
.tl-search.is-open.has-list .tl-search-list{display:block}
.tl .tl-search-hit{display:block;width:100%;padding:10px 14px;border:0;border-bottom:1px solid rgba(250,247,242,.08);background:none;cursor:pointer;text-align:left;color:var(--sand)}
.tl .tl-search-hit:hover,.tl .tl-search-hit.is-on{background:rgba(242,181,26,.14)}
.tl-search-k{display:block;font-family:"General Sans",sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.tl-search-hit b{display:block;margin-top:2px;font-weight:700;font-size:15px}
.tl-search-s{display:block;margin-top:2px;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-search-none{padding:14px;color:var(--mut);font-size:14px}
@media (max-width:767px){.tl-search{top:70px}}
/* the period bars make room for the search icon at their right end */
@media (min-width:768px){
  .tl-jump{right:calc(clamp(20px,4vw,56px) + 52px)}
  .tl-stage.is-inset .tl-map-legs.tl-jump{right:calc(clamp(20px,4vw,56px) + var(--inset) + 52px)}
}

/* the layout (default; ?ux=1 for the earlier one): one story panel on the left, the transport bar along the foot */
.tl-map-sub{display:none}
.tl-map.is-ux2::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:4;width:min(600px,62%);background:linear-gradient(90deg,rgba(12,14,12,.88) 0%,rgba(12,14,12,.72) 55%,rgba(12,14,12,0) 100%);pointer-events:none}
.tl-map.is-ux2 .tl-map-legs,.tl-map.is-ux2 .tl-map-lead,.tl-map.is-ux2 .tl-map-pips{display:none}
.tl-map.is-ux2 .tl-map-hud{top:clamp(100px,12vh,120px);bottom:calc(clamp(18px,4vh,36px) + 100px);width:min(400px,calc(100% - 40px));overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:rgba(250,247,242,.25) transparent}
.tl-map.is-ux2 .tl-map-date{font-size:clamp(40px,4.4vw,64px)}
.tl-map.is-ux2 .tl-map-place{font-size:clamp(22px,2.2vw,30px);margin-top:8px}
.tl-map.is-ux2 .tl-map-sub:not(:empty){display:flex;align-items:center;gap:8px;margin-top:8px;font-family:"General Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.tl-map.is-ux2 .tl-map-sub::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:2px solid var(--y);box-sizing:border-box}
.tl-map.is-ux2 .tl-map-pop{position:static;width:auto;max-height:none;overflow:visible;margin-top:14px;padding-top:12px;border-top:1px solid rgba(250,247,242,.14);border-left:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;clip-path:none;opacity:1;transform:none;transition:none;pointer-events:auto}
.tl-map.is-ux2 .tl-map-pop img{max-height:180px;margin-bottom:10px}
.tl-map.is-ux2 .tl-map-pop-b{padding:0}
.tl-map.is-ux2 .tl-map-pop-d,.tl-map.is-ux2 .tl-map-pop-t,.tl-map.is-ux2 .tl-map-pop-s{display:none}
.tl-map.is-ux2 .tl-map-pop li{font-size:14px}
/* while an account plays, the facts fold away so the player has the room */
.tl-map.is-ux2.is-narrating .tl-map-pop{display:none}
.tl-tx{position:absolute;left:clamp(20px,4vw,56px);right:calc(clamp(20px,4vw,56px) + 190px + var(--inset,0px));bottom:clamp(18px,4vh,36px);z-index:8;display:flex;align-items:stretch;gap:10px;transition:right .5s var(--ease)}
.tl-map.is-ux2 .tl-map-ctrl{position:static;flex:none}
.tl-tx-bar{flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;padding:8px 12px 10px;background:rgba(14,14,14,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tl .tl-tx-all{flex:none;align-self:center;margin-right:6px;padding:6px 8px;border:1px solid rgba(250,247,242,.2);background:none;cursor:pointer;color:var(--mut);font-family:"General Sans",sans-serif;font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.tl .tl-tx-all:hover,.tl .tl-tx-all.is-on{border-color:var(--y);color:var(--y)}
.tl-tx-seg{flex:1 1 0;min-width:34px;display:flex;flex-direction:column;gap:10px}
.tl-tx-seg:not(.is-on) .tl-tx-lbl span{display:none}
.tl .tl-tx-seg.is-on .tl-tx-lbl{overflow:visible;position:relative;z-index:1}
.tl-tx-seg.is-on .tl-tx-lbl b,.tl-tx-seg.is-on .tl-tx-lbl span{position:relative;background:#121512;box-shadow:0 0 0 3px #121512}
.tl-tx-seg.is-on .tl-tx-lbl span{padding-right:30px}
.tl .tl-tx-lbl{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mut);font-family:"General Sans",sans-serif;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.tl-tx-lbl b{font-family:"Warband Stencil","Clash Display",Impact,sans-serif;font-weight:400;font-size:13px;letter-spacing:.02em;color:var(--sand);margin-right:2px}
.tl .tl-tx-lbl:hover,.tl-tx-seg.is-on .tl-tx-lbl{color:var(--y)}
.tl-tx-seg.is-on .tl-tx-lbl b{color:var(--y)}
.tl-tx-track{display:flex;align-items:center;gap:1px;height:14px;border-left:2px solid rgba(250,247,242,.3);padding-left:2px}
.tl .tl-tx-tick{position:relative;flex:1 1 0;min-width:2px;height:6px;padding:0;border:0;cursor:pointer;background:rgba(250,247,242,.2);transition:height .15s,background .15s}
.tl .tl-tx-tick:hover{height:12px;background:var(--sand)}
.tl .tl-tx-tick.is-done{background:rgba(242,183,5,.55)}
.tl .tl-tx-tick.is-on{height:14px;background:var(--y)}
.tl-tx-tick.has-voice::after{content:"";position:absolute;left:50%;top:-7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--sand)}
.tl-tx-tick.has-voice.is-on::after,.tl-tx-tick.has-voice:hover::after{background:var(--y)}
.tl-tx-side{flex:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:4px;padding:0 12px;background:rgba(14,14,14,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:"General Sans",sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.tl-tx-time{color:var(--mut);font-weight:600;font-size:10px}
.tl-map.is-ux2 .tl-map-key{position:absolute;left:auto;right:0;bottom:calc(100% + 10px)}
.tl.is-ux2 .tl-view{bottom:calc(clamp(18px,4vh,36px) + 8px)}
@media (max-width:1279px){.tl-map.is-ux2 .tl-map-key{display:none}}
@media (max-width:767px){
  .tl-map.is-ux2::before{width:100%;height:60%;bottom:auto;background:linear-gradient(180deg,rgba(12,14,12,.85),rgba(12,14,12,0))}
  .tl-map.is-ux2 .tl-map-hud{top:84px;bottom:auto;max-height:46%}
  .tl-map.is-ux2 .tl-map-pop ul,.tl-map.is-ux2 .tl-map-pop-src,.tl-map.is-ux2 .tl-map-pop img{display:none}
  .tl-map.is-ux2 .tl-map-note{display:block;font-size:14px;margin-top:8px}
  .tl-map.is-ux2 .tl-map-pop{margin-top:8px;padding-top:6px}
  .tl-tx{left:16px;right:16px;flex-wrap:wrap;gap:6px}
  .tl-tx-bar{order:-1;flex:1 1 100%;padding:6px 8px 8px}
  .tl-map.is-ux2 .tl-map-ctrl{flex:1}
  .tl-tx-seg:not(.is-on) .tl-tx-lbl{visibility:hidden}
  .tl-tx-seg.is-on{flex-grow:12 !important}
  .tl .tl-tx-all{display:none}
  .tl.is-ux2 .tl-view{bottom:calc(clamp(18px,4vh,36px) + 132px)}
}

/* where a move lands: a ring that widens and fades */
.tl-map-pulse{fill:none;stroke:var(--y);stroke-width:2px;vector-effect:non-scaling-stroke;pointer-events:none}

/* explore points (map.explore): places to look at outside the story, quieter than its stops; a sand ring with a dot */
.tl-map-xp{display:none;cursor:pointer;outline:none}
.tl-map-xp.is-show{display:inline}
.tl-map-xp-r{fill:rgba(18,21,18,.75);stroke:var(--bone);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.tl-map-xp-d{fill:var(--bone)}
.tl-map-xp:hover .tl-map-xp-r,.tl-map-xp:focus-visible .tl-map-xp-r,.tl-map-xp.is-on .tl-map-xp-r{stroke:var(--y);stroke-width:2.5px}
.tl-map-xp.is-on .tl-map-xp-d{fill:var(--y)}
.tl-map-xp text{display:none;font-family:"Satoshi",sans-serif;font-weight:600;fill:var(--bone);paint-order:stroke;stroke:#121512;stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tl-map-xp.is-lab text,.tl-map-xp:hover text,.tl-map-xp:focus-visible text,.tl-map-xp.is-on text{display:inline}
.tl-map-xp.is-on text{fill:var(--y)}
.tl-map-xpbtn:empty{display:none}
.tl-map-xpbtn{margin-top:12px}
.tl-map-xpbtn button{font:600 12px/1 "General Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);background:rgba(18,21,18,.7);border:1px solid rgba(239,228,206,.45);padding:8px 12px;cursor:pointer;pointer-events:auto}
.tl-map-xpbtn button:hover,.tl-map-xpbtn button:focus-visible{border-color:var(--y);color:var(--y)}
.tl-map-pop-cap{margin:6px 14px 0;font-size:12px;line-height:1.45;color:var(--mut)}
/* on phones a stop card drops its photo for room, but an explore point's photo is the point of opening it */
@media (max-width:767px){
  .tl-map.is-ux2 .tl-map-pop.is-xp img{display:block;max-height:150px;margin-bottom:6px}
  .tl-map.is-ux2 .tl-map-pop.is-xp .tl-map-pop-cap{margin:0 0 6px;font-size:11px}
}

/* ---------- phones and tablets: the story drawer and citation (timeline.js) ---------- */
/* the drawer is a bottom sheet at 991 px and under: a grab handle (pull down to close), a ✕ that stays in view while
   the story scrolls, and a Close button at the end; the citation gets the same */
.tl-dr-grab,.tl .tl-dr-close,.tl-dr .tl-dr-close,.tl-dr .tl-cite-close{display:none}
@media (max-width:991px){
  .tl-dr-grab{display:block;position:absolute;left:50%;top:8px;z-index:4;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(250,247,242,.4);pointer-events:none}
  .tl-dr-panel>.tl-dr-x{position:sticky;top:10px;display:block;margin:10px 10px -54px auto}
  .tl-dr .tl-dr-close{display:flex;width:100%;margin-top:20px}
  .tl-dr .tl-dr-award-b{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  .tl-dr-nav button{min-height:44px}
}
@media (max-width:991px),(pointer:coarse){.tl .tl-search-in{font-size:16px}}
@media (max-width:767px){
  /* review notes on verify-tagged entries stay off phones */
  .tl-dr-note{display:none}
  .tl-cite{padding:0}
  .tl-cite-box{padding:56px 20px 28px;min-height:100%}
  .tl-cite .tl-dr-x{position:sticky;top:8px;display:block;margin:-44px -8px 0 auto}
  .tl-cite-src{display:block;padding:12px 0;font-size:15px}
  .tl-cite-ph{width:96px;height:120px}
  .tl-dr .tl-cite-close{display:flex;width:100%;margin-top:12px}
  .tl-dr-award.has-photo .tl-dr-award-b{justify-self:start;text-align:left}
  .tl-dr-award-d,.tl-dr-src,.tl-dr-talk-q{font-size:15px}
  .tl-dr-award-t,.tl-dr-talks h4,.tl-dr-fallen h4,.tl-dr-valor h4{font-size:13px}
}
@media (max-height:500px) and (max-width:991px) and (orientation:landscape){
  .tl-dr-strip button{flex:0 0 72px}
  .tl-dr-hero img{max-height:60vh}
}

/* ---------- the header offset and full-screen map (both views on phones) ---------- */
/* --tl-top: the site's fixed header height, set by the page on .tl; timeline.js measures it as --tl-hdr otherwise.
   Phone rules place things below it with --tl-y. Full screen covers the header, so it's 0 there. */
.tl{--tl-y:var(--tl-top,var(--tl-hdr,0px))}
.tl.is-fs{--tl-y:0px}
html.tl-lock,html.tl-lock body{overflow:hidden;overscroll-behavior:none}
.tl.is-fs .tl-stage{position:fixed;inset:0;z-index:9000;height:auto}
.tl.is-fs .tl-map-svg{touch-action:none}

/* timeline view on phones: the Timeline / Map switch moves up beside the year readout (it covered "Association"), the
   scrubber gives way to the year row, and every control is 44 px tall */
@media (max-width:767px){
  .tl-hud{top:calc(var(--tl-y) + 16px)}
  .tl .tl-search{top:calc(var(--tl-y) + 12px);right:12px}
  .tl.is-ux2 .tl-search.is-open,.tl .tl-search.is-open{width:calc(100vw - 24px)}
  .tl:not(.is-map) .tl-view{top:calc(var(--tl-y) + 40px);right:64px;bottom:auto}
  .tl .tl-view button{min-height:44px;padding:0 16px;font-size:13px}
  .tl-scrub{display:none}
  .tl .tl-filter{bottom:clamp(18px,4vh,36px)}
  .tl-sides{bottom:calc(clamp(18px,4vh,36px) + 52px)}
  .tl-jump{bottom:calc(clamp(18px,4vh,36px) + 104px)}
  .tl .tl-chip,.tl .tl-side{min-height:44px;padding:0 14px;font-size:12px}
  .tl .tl-jump-btn{min-height:44px;justify-content:center}
  .tl-search-hit b{font-size:16px}
  .tl-search-s{font-size:14px}
  .tl .tl-search-hit{padding:12px 14px}
}
/* phones, both ways up: the intro and closing panels sit in the room between the top and bottom controls and
   scroll inside it when they don't fit (centered when they do); cards that don't fit their side of the line lose
   their photo at rest (--cut0) and then their summary (.is-tight, set by fitCards in timeline.js) */
@media (max-width:767px),(max-height:500px) and (max-width:991px) and (orientation:landscape){
  .tl-panel{top:calc(var(--tl-y) + 102px);bottom:calc(clamp(18px,4vh,36px) + 160px);height:auto;justify-content:flex-start;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:none;padding-bottom:24px;box-sizing:border-box;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
  .tl-panel::-webkit-scrollbar{display:none}
  .tl-panel::before,.tl-panel::after{content:"";flex:1 0 0}
  .tl-thumb{max-height:max(0px,calc((58px - var(--cut0,0px)) * (1 - var(--f)) + (124px - var(--cut,0px)) * var(--f)))}
  .tl-node.is-tight .tl-more,.tl-node.no-thumb .tl-thumb{display:none}
}
/* timeline view, phone on its side: one row along the top (chapter years, Timeline / Map, search) and nothing below
   the cards. The year readout and both filter rows give way (the year on the line is lit, and the filters are there
   in portrait), and a card at rest shows its title only, so cards fit above and below the line under the site header */
@media (max-height:500px) and (max-width:991px) and (orientation:landscape){
  .tl-hud,.tl-scrub,.tl-sides,.tl .tl-filter{display:none}
  .tl-node:not(.is-active) .tl-meta,.tl-node.is-tight .tl-meta{display:none}
  .tl .tl-search{top:calc(var(--tl-y) + 6px);right:12px}
  .tl:not(.is-map) .tl-view{top:calc(var(--tl-y) + 6px);right:64px;bottom:auto}
  .tl .tl-view button{min-height:44px;padding:0 16px;font-size:13px}
  .tl-jump{top:calc(var(--tl-y) + 6px);bottom:auto;right:250px;padding-right:0}
  .tl .tl-chip,.tl .tl-jump-btn{min-height:44px;padding:0 14px;font-size:12px}
  .tl .tl-jump-btn{justify-content:center}
  .tl-panel{top:calc(var(--tl-y) + 62px);bottom:12px}
  .tl-card{width:236px}
  .tl-card-in{padding:10px 14px 12px}
  .tl-title{font-size:19px}
  .tl-intro h2{font-size:34px;margin:8px 0 12px;max-width:none}
  .tl-outro h3{font-size:34px;margin:8px 0 12px;max-width:none}
}
/* wider phones on their side space cards 320 px apart, so a card at rest can be wide enough for a one-line title */
@media (max-height:500px) and (min-width:768px) and (max-width:991px) and (orientation:landscape){
  .tl-card{width:300px}
}

/* ---------- map on phones: map first, the story in a bottom sheet (timeline-map.js "phones") ---------- */
/* on the desktop the sheet is display:contents, so the story panel and transport bar keep their places */
.tl-sheet{display:contents}
.tl-sheet-grab,.tl-map-top,.tl-scr,.tl .tl-tx-more,.tl .tl-map-accpill,.tl-map-mini,.tl-map-xpnav{display:none}
.tl-map-xp-h{fill:transparent;pointer-events:all}
.tl-map-toast{position:absolute;left:50%;top:42%;z-index:30;max-width:min(320px,calc(100% - 40px));padding:14px 18px;border-radius:10px;background:rgba(14,14,14,.9);color:var(--sand);font-size:16px;font-weight:600;line-height:1.4;text-align:center;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s;pointer-events:none}
.tl-map-toast.is-on{opacity:1}
.tl-map-menu{position:absolute;z-index:31;min-width:240px;max-width:calc(100% - 24px);max-height:calc(100% - 90px);overflow-y:auto;overscroll-behavior:contain;padding:6px 0;border-radius:12px;background:#1d221c;box-shadow:0 12px 36px rgba(0,0,0,.6)}
.tl .tl-map-menu button{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;width:100%;min-height:48px;padding:10px 18px;border:0;background:none;cursor:pointer;text-align:left;color:var(--sand);font-size:16px;font-weight:600}
.tl .tl-map-menu button.is-on{color:var(--y)}
.tl .tl-map-menu button:hover,.tl .tl-map-menu button:focus-visible{background:rgba(250,247,242,.08);outline:none}
.tl-map-menu button span{flex:1}
.tl-map-menu button em{font-style:normal;font-family:"General Sans",sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:12px;background:rgba(250,247,242,.12)}
.tl-map-menu button[aria-checked="true"] em{background:var(--y);color:var(--dg)}
.tl-map-menu button small{flex:1 1 100%;margin-top:2px;font-size:13px;font-weight:500;color:var(--mut)}
.tl-map-menu-key{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 18px 0;padding-top:12px;border-top:1px solid rgba(250,247,242,.12)}
.tl-map-menu-key span{display:flex;align-items:center;gap:6px}
.tl-map-menu-key svg{width:46px;height:14px;overflow:visible}
.tl-map-menu-key line{stroke-width:2.5px}
.tl-map-menu-key .is-sea line{stroke:var(--sea);stroke-dasharray:6 4}.tl-map-menu-key .is-sea path{fill:var(--sea)}
.tl-map-menu-key .is-air line{stroke:var(--air);stroke-dasharray:1 4;stroke-linecap:round}.tl-map-menu-key .is-air path{fill:var(--air)}
.tl-map-menu-key .is-helo line{stroke:var(--helo);stroke-dasharray:5 3 1 3}.tl-map-menu-key .is-helo path{fill:var(--helo);fill-rule:nonzero}
.tl-map-menu-key .is-land line{stroke:var(--land);stroke-dasharray:10 3}.tl-map-menu-key .is-land path{fill:var(--land)}
.tl-map-menu-key path{fill-rule:evenodd}
.tl-map-menu-key b{font-family:"General Sans",sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand)}
.tl-map-menu-cr{margin:10px 18px 6px;font-size:12px;line-height:1.45;color:var(--mut)}

@media (max-width:767px),(max-height:500px) and (max-width:991px) and (orientation:landscape){
  /* full brightness: the desktop's edge vignette (a 220 px inset shadow) and the story panel's gradient spread over
     the whole map at phone width and dimmed it; keep only a light shade behind the top bar */
  .tl-map.is-ux2::after{box-shadow:none}
  .tl-map.is-ux2::before{width:100%;height:110px;bottom:auto;background:linear-gradient(180deg,rgba(12,14,12,.55),rgba(12,14,12,0))}
  .tl.is-ux2.is-map .tl-view,.tl-map.is-ux2 .tl-map-credit,.tl-map.is-ux2 .tl-map-key{display:none}
  .tl.is-ux2 .tl-search{top:calc(var(--tl-y) + 12px);right:max(12px,env(safe-area-inset-right))}
  /* the sheet */
  .tl-map.is-ux2 .tl-sheet{display:flex;flex-direction:column;position:absolute;left:0;right:0;bottom:0;z-index:8;height:var(--sh-h,200px);max-height:100%;padding-bottom:max(6px,env(safe-area-inset-bottom));background:#121512;border-top:1px solid rgba(250,247,242,.14);border-radius:16px 16px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.45);transition:height .32s var(--ease)}
  .tl-map.is-ux2 .tl-sheet.is-drag{transition:none}
  .tl .tl-sheet-grab{display:block;flex:none;position:relative;width:100%;height:22px;padding:0;border:0;background:none;cursor:grab;touch-action:none}
  .tl-sheet-grab::before{content:"";position:absolute;left:50%;top:8px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(250,247,242,.4)}
  .tl-map.is-ux2 .tl-sheet .tl-map-hud{position:relative;left:auto;top:auto;bottom:auto;width:auto;max-width:none;max-height:none;flex:1 1 auto;min-height:0;margin:0;padding:0 16px 16px;overflow-y:auto;overscroll-behavior:contain}
  .tl-map.is-ux2 .tl-sheet[data-at=peek] .tl-map-hud{overflow:hidden}
  /* the text block lets go of its box so the header can stay pinned over the player and facts as well */
  .tl-map.is-ux2 .tl-sheet .tl-map-hud>div:first-child{display:contents}
  .tl-map.is-ux2 .tl-sheet .tl-hud-era{display:none}
  .tl-map.is-ux2 .tl-map-head{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:0 0 12px;background:#121512;touch-action:none;cursor:grab}
  .tl-map.is-ux2 .tl-map-head .tl-map-date{grid-column:1;margin:0;font-family:"General Sans",sans-serif;font-weight:700;font-size:13px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--y);text-shadow:none}
  .tl-map.is-ux2 .tl-map-head .tl-map-place{grid-column:1;margin:3px 0 0;font-size:21px;line-height:1.08;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tl .tl-map-head.has-acc .tl-map-accpill{display:flex;align-items:center;grid-column:2;grid-row:1 / span 2;min-height:44px;padding:0 14px;border:0;border-radius:22px;background:var(--y);color:var(--dg);cursor:pointer;font-family:"General Sans",sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
  .tl .tl-map.is-narrating .tl-map-accpill{display:none}
  .tl-map.is-narrating .tl-sheet[data-at=peek] .tl-map-mini{display:flex;grid-column:1 / -1;align-items:center;gap:10px;margin-top:8px;padding:4px 4px 4px 12px;border-radius:8px;background:rgba(242,181,26,.14)}
  .tl-map-mini i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--y);animation:tl-unit 1.6s ease-in-out infinite}
  .tl-map-mini span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:700;cursor:pointer}
  .tl .tl-map-mini button{min-height:40px;padding:0 14px;border:0;border-radius:6px;background:rgba(250,247,242,.12);color:var(--sand);cursor:pointer;font-family:"General Sans",sans-serif;font-weight:700;font-size:13px}
  /* the story at half and full: 16 px copy, the facts and source back in */
  .tl-map.is-ux2 .tl-sheet .tl-map-sub:not(:empty){margin-top:0;font-size:13px}
  .tl-map.is-ux2 .tl-sheet .tl-map-note{display:block;margin-top:10px;font-size:16px;line-height:1.55}
  .tl-map.is-ux2 .tl-sheet .tl-map-pop ul,.tl-map.is-ux2 .tl-sheet .tl-map-pop-src{display:block}
  .tl-map.is-ux2 .tl-sheet .tl-map-pop li{font-size:15px}
  .tl-map.is-ux2 .tl-sheet .tl-map-pop-src{font-size:13px}
  .tl-map.is-ux2 .tl-sheet .tl-map-pop{margin-top:12px;padding-top:10px}
  .tl .tl-sheet .tl-map-pop-btns{flex-wrap:wrap;gap:0 22px;margin-top:6px}
  .tl .tl-sheet .tl-map-pop-btns button{min-height:44px;font-size:13px}
  .tl-sheet .tl-map-xpbtn{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .tl-sheet .tl-map-xpbtn button{min-height:44px;font-size:13px}
  .tl-sheet .tl-map-xpnav{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:14px;font-weight:600;color:var(--bone)}
  .tl-sheet .tl-map-xpnav button{min-width:44px;font-size:22px;line-height:1;padding:0}
  .tl-map.is-ux2 .tl-sheet .tl-map-pop.is-xp img{max-height:200px}
  .tl-map.is-ux2 .tl-sheet .tl-map-pop.is-xp .tl-map-pop-cap{font-size:13px}
  .tl-sheet .tl-acc{width:auto;margin-top:14px}
  .tl-sheet .tl-acc-hd{font-size:12px}
  .tl .tl-sheet .tl-acc-pb button{min-height:44px;padding:0 14px;font-size:13px}
  .tl-sheet .tl-acc-pt b{font-size:15px}
  .tl-sheet .tl-acc-pt span{font-size:13px}
  /* transport: the scrubber above Previous / Play / Next and ⋯ */
  .tl-map.is-ux2 .tl-sheet .tl-tx{position:relative;left:auto;right:auto;bottom:auto;flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:0 12px 4px;border-top:1px solid rgba(250,247,242,.1)}
  .tl-sheet .tl-tx-bar,.tl-sheet .tl-tx-side{display:none}
  .tl .tl-scr{display:block;order:-1;flex:1 1 100%;position:relative;height:44px;cursor:pointer;touch-action:none;outline:none}
  .tl .tl-scr:focus-visible{outline:2px solid var(--y);outline-offset:-2px}
  .tl-scr-line{position:absolute;left:10px;right:10px;top:20px;display:flex;gap:3px;height:4px}
  .tl-scr-line i{flex:1 1 0;min-width:4px;border-radius:2px;background:rgba(250,247,242,.22)}
  .tl-scr-line i.is-done{background:rgba(242,181,26,.5)}
  .tl-scr-line i.is-on{background:rgba(242,181,26,.8)}
  .tl-scr-thumb{position:absolute;top:12px;left:10px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--y);box-shadow:0 0 0 4px rgba(242,181,26,.25),0 2px 6px rgba(0,0,0,.5);pointer-events:none;transition:left .3s var(--ease)}
  .tl-scr.is-drag .tl-scr-thumb{transition:none;transform:scale(1.25)}
  .tl-scr.is-all .tl-scr-thumb{display:none}
  .tl-scr-bub{display:none;position:absolute;bottom:42px;z-index:3;max-width:min(320px,calc(100vw - 32px));padding:9px 13px;border-radius:8px;background:var(--bone);color:#121512;font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(-50%);pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  .tl-scr.is-drag .tl-scr-bub{display:block}
  .tl-scr-bub b{margin-right:8px;font-family:"General Sans",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7a5c00}
  .tl-map.is-ux2 .tl-sheet .tl-map-ctrl{position:static;flex:1;display:flex;gap:8px;min-width:0}
  .tl .tl-sheet .tl-map-ctrl button.is-arrow{min-width:52px;min-height:52px}
  .tl .tl-sheet .tl-map-ctrl button.is-primary{flex:1;min-width:0;font-size:15px}
  .tl .tl-sheet .tl-tx-more{display:flex;align-items:center;justify-content:center;gap:4px;flex:none;width:52px;height:52px;padding:0;border:0;border-radius:26px;background:rgba(250,247,242,.1);cursor:pointer}
  .tl-tx-more i{width:5px;height:5px;border-radius:50%;background:var(--sand)}
  /* top bar: period chip, Full screen / Close map; search sits at its right end */
  .tl-map.is-ux2 .tl-map-top{display:flex;position:absolute;z-index:9;top:calc(var(--tl-y) + 12px);left:max(12px,env(safe-area-inset-left));right:64px;gap:8px;align-items:center;pointer-events:none}
  .tl .tl-map-top button{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:0;border-radius:22px;background:rgba(14,14,14,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--sand);cursor:pointer;pointer-events:auto;white-space:nowrap;font-family:"General Sans",sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 2px 10px rgba(0,0,0,.4)}
  .tl-map-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square}
  .tl .tl-map-top .tl-map-exit{background:var(--y);color:var(--dg)}
  .tl:not(.is-fs) .tl-map-exit,.tl.is-fs .tl-map-fsb{display:none}
  .tl .tl-map-top .tl-map-fsb{margin-left:auto}
  .tl-map-chip{min-width:0}
  .tl-map-chip span{overflow:hidden;text-overflow:ellipsis}
  .tl-map-chip b{font-family:"Warband Stencil","Clash Display",Impact,sans-serif;font-weight:400;font-size:17px;letter-spacing:.02em;color:var(--y)}
  .tl-map-chip i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor}
  /* zoom: pinch; ◎ (back to the stop) floats above the sheet */
  .tl-map.is-ux2 .tl-map-zoom{top:auto;right:12px;bottom:calc(var(--sh-h,200px) + 12px)}
  .tl .tl-map-zoom button:not(.is-fit){display:none}
  .tl .tl-map.is-ux2 .tl-map-zoom button{width:48px;height:48px;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.4)}
  /* a tap on open map: controls away, the sheet down to its header */
  .tl-map.is-bare .tl-map-top,.tl-map.is-bare .tl-map-zoom,.tl-map.is-bare .tl-sheet .tl-tx,.tl.is-map.is-bare .tl-search{display:none}
}
/* phone on its side: the story is a column on the left (tap its header to fold it down), the map on the right */
@media (max-height:500px) and (max-width:991px) and (orientation:landscape){
  .tl-map.is-ux2 .tl-sheet{right:auto;width:min(400px,50vw);max-height:calc(100% - var(--tl-y) - 8px);border-radius:0 16px 0 0}
  .tl .tl-sheet-grab{display:none}
  .tl-map.is-ux2 .tl-map-head{padding-top:12px}
  .tl-map.is-ux2 .tl-map-top{left:calc(min(400px,50vw) + 12px)}
  .tl-map.is-ux2 .tl-sheet .tl-tx{flex-wrap:nowrap;gap:6px;padding-top:4px}
  .tl .tl-scr{order:0;flex:1 1 auto;min-width:60px}
  .tl .tl-sheet .tl-map-ctrl{flex:none}
  .tl .tl-sheet .tl-map-ctrl button.is-arrow,.tl .tl-sheet .tl-tx-more{min-width:44px;width:44px;min-height:44px;height:44px}
  .tl .tl-sheet .tl-map-ctrl button.is-primary{flex:none;min-width:72px;min-height:44px;padding:0 14px}
  .tl .tl-sheet .tl-map-ctrl{gap:6px}
  .tl .tl-sheet .tl-tx-more{margin-left:4px}
  .tl-map.is-ux2 .tl-map-zoom{bottom:12px}
  .tl-map.is-ux2::before{height:80px}
}
@media (prefers-reduced-motion:reduce){
  .tl-map.is-ux2 .tl-sheet,.tl-scr-thumb,.tl-map-toast{transition:none}
  .tl-map-mini i{animation:none}
}