/* The craft (homepage section three and its own page). Shared by both.
   A full-screen picture of each craft, a frosted card with who flew it, how it got here and when we saw it,
   a timeline of the eight along the bottom, and the same pulsing arrows as the hero to step through them. */
.uf-stage{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#020304;isolation:isolate;color:var(--ink,#f3eee7)}
.uf-pic{position:absolute;inset:0 0 0 24%;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}
.uf-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);
  transition:opacity .9s ease,transform 9s cubic-bezier(.2,.6,.2,1)}
.uf-pic img.on{opacity:1;transform:scale(1)}
.uf-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,3,4,.92) 0%,rgba(2,3,4,.7) 30%,rgba(2,3,4,.15) 58%,transparent 75%),
             linear-gradient(0deg,rgba(2,3,4,.95) 0%,rgba(2,3,4,.4) 22%,transparent 40%),
             linear-gradient(180deg,rgba(2,3,4,.75) 0%,transparent 22%)}
.uf-ui{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:18px;
  padding:clamp(20px,3.6vh,40px) clamp(20px,5vw,84px) clamp(18px,3vh,32px) calc(clamp(20px,5vw,84px) + 40px)}
.uf-head{display:block;margin:0;max-width:560px}
.uf-back{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:9px 14px;border-radius:999px;
  border:1px solid rgba(243,238,231,.16);background:rgba(12,14,18,.5);backdrop-filter:blur(12px);font:500 12px/1 var(--sans,"Geist",Arial,sans-serif);color:var(--ink,#f3eee7)}
.uf-back:hover{border-color:var(--star,#ffa552)}
.uf-kicker{margin:0 0 10px;font:400 11px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.24em;text-transform:uppercase;color:var(--star,#ffa552)}
.uf-head h2{margin:0;font:400 clamp(44px,4.6vw,72px)/.95 var(--serif,"Instrument Serif",Georgia,serif);letter-spacing:-.015em}
.uf-intro{margin:10px 0 0;max-width:46ch;font:300 15px/1.55 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.78)}

/* The card */
.uf-card{align-self:end;width:min(540px,100%);max-height:max(300px,calc(100svh - 360px));overflow:auto;overscroll-behavior:contain;
  padding:22px 24px 20px;border-radius:18px;background:rgba(10,12,16,.62);border:1px solid rgba(243,238,231,.14);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  transition:opacity .3s ease,transform .3s ease;scrollbar-width:thin;scrollbar-color:rgba(243,238,231,.2) transparent}
.uf-card.swap{opacity:0;transform:translateY(8px)}
.uf-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.uf-role{margin:0;font:400 11px/1.3 var(--mono,"Geist Mono",monospace);letter-spacing:.18em;text-transform:uppercase;color:var(--uf-c,#ffa552)}
.uf-count{font:400 11px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.12em;color:rgba(243,238,231,.5)}
.uf-card h3{margin:8px 0 12px;font:400 clamp(38px,3.4vw,52px)/.95 var(--serif,"Instrument Serif",Georgia,serif)}
.uf-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.uf-meta li{padding:7px 11px;border-radius:999px;background:rgba(243,238,231,.06);border:1px solid rgba(243,238,231,.1);
  font:400 12px/1.2 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.82)}
.uf-meta li b{font-weight:500;color:var(--ink,#f3eee7)}
.uf-meta a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.uf-meta a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--uf-c,#ffa552);box-shadow:0 0 8px var(--uf-c,#ffa552)}
.uf-meta a:hover b{text-decoration:underline}
.uf-line{margin:0 0 12px;font:300 15px/1.55 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.9)}
.uf-journey{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:rgba(243,238,231,.05);border-left:2px solid var(--uf-c,#ffa552);
  font:300 13.5px/1.5 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.8)}
.uf-journey b{display:block;margin-bottom:4px;font:400 10.5px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,238,231,.55)}
.uf-seen{margin:0 0 12px;font:300 14px/1.5 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.85)}
.uf-seen b{display:block;margin-bottom:4px;font:400 10.5px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--uf-c,#ffa552)}
.uf-h4{margin:0 0 10px;font:400 10.5px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,238,231,.55)}
.uf-enc{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:12px}
.uf-enc li{position:relative;padding-left:18px}
.uf-enc li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--uf-c,#ffa552)}
.uf-enc li::after{content:"";position:absolute;left:3.5px;top:16px;bottom:-12px;width:1px;background:rgba(243,238,231,.14)}
.uf-enc li:last-child::after{display:none}
.uf-when{display:block;font:500 12.5px/1.3 var(--sans,"Geist",Arial,sans-serif);color:var(--ink,#f3eee7)}
.uf-where{font:400 11px/1.3 var(--mono,"Geist Mono",monospace);letter-spacing:.06em;color:rgba(243,238,231,.55)}
.uf-enc p{margin:4px 0 0;font:300 13.5px/1.5 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.84)}
.uf-ev{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.uf-ev li{padding:5px 9px;border-radius:6px;background:rgba(243,238,231,.07);font:400 11.5px/1.2 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.85)}
.uf-reports{margin:0 0 10px;font:400 12px/1.4 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.7)}
.uf-reports b{font:400 20px/1 var(--serif,"Instrument Serif",Georgia,serif);color:var(--uf-c,#ffa552);margin-right:4px}
.uf-official{margin:0;padding-top:10px;border-top:1px solid rgba(243,238,231,.1);font:300 12px/1.5 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.55)}
.uf-official b{font-weight:500;color:rgba(243,238,231,.7)}

/* The timeline of the eight */
.uf-foot{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px}
.uf-rail{position:relative;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding:4px 0}
.uf-rail::-webkit-scrollbar{display:none}
.uf-stop{all:unset;cursor:pointer;flex:0 0 auto;display:grid;gap:4px;padding:10px 13px;border-radius:12px;border:1px solid rgba(243,238,231,.12);
  background:rgba(10,12,16,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .3s,background .3s}
.uf-stop small{font:400 10.5px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.08em;color:rgba(243,238,231,.55)}
.uf-stop span{display:inline-flex;align-items:center;gap:6px;font:500 12px/1.1 var(--sans,"Geist",Arial,sans-serif)}
.uf-stop span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,#ffa552)}
.uf-stop:hover{border-color:rgba(243,238,231,.35)}
.uf-stop.on{border-color:var(--c,#ffa552);background:rgba(255,140,70,.14)}
.uf-stop:focus-visible{outline:1px solid var(--ink,#f3eee7);outline-offset:3px}
.uf-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:360px;text-align:right}
.uf-credit{margin:0;font:400 10.5px/1.45 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.42)}

/* Arrows: the hero's pulsing species arrows, in this section */
.uf-pick{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid rgba(255,190,140,.85);background:rgba(20,12,8,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;padding:0;box-shadow:0 0 22px -4px rgba(255,140,70,.55),0 10px 30px -12px rgba(0,0,0,.7);transition:border-color .3s,background .3s,transform .3s}
.uf-pick svg{width:24px;height:24px;filter:drop-shadow(0 0 6px rgba(255,170,110,.8))}
.uf-pick::before,.uf-pick::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid var(--star,#ffa552);pointer-events:none;opacity:0;
  animation:ufRing 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.uf-pick::after{animation-delay:1.4s}
.uf-pick.next::before{animation-delay:.7s}.uf-pick.next::after{animation-delay:2.1s}
@keyframes ufRing{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.75);opacity:0}}
.uf-pick.prev{left:clamp(12px,1.4vw,26px)}.uf-pick.next{right:clamp(12px,1.4vw,26px)}
.uf-pick:hover{border-color:var(--star,#ffa552);background:rgba(255,140,70,.28)}
.uf-pick.prev:hover{transform:translate(-3px,-50%)}.uf-pick.next:hover{transform:translate(3px,-50%)}
.uf-pick:focus-visible{outline:2px solid #fff;outline-offset:4px}

@media (max-width:760px){
  /* Phones: the picture on top with the title over it, then the timeline, the card and the credit, one under another. */
  .uf-stage{min-height:0}
  .uf-pic{position:relative;inset:auto;height:62vw;min-height:240px;-webkit-mask-image:none;mask-image:none}
  .uf-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#020304 0%,transparent 40%),linear-gradient(180deg,rgba(2,3,4,.88) 0%,transparent 48%)}
  .uf-shade{display:none}
  .uf-ui{position:static;min-height:0;display:flex;flex-direction:column;gap:12px;padding:0 16px 24px;margin-top:-14px}
  .uf-ui>*{min-width:0}
  .uf-head{position:absolute;z-index:3;top:16px;left:16px;right:16px}
  .uf-back{margin-bottom:10px}
  .uf-head h2{font-size:38px}
  .uf-intro{display:none}
  .uf-foot{display:contents}
  .uf-rail{order:-1}
  .uf-links{order:2;align-items:flex-start;text-align:left;max-width:none}
  .uf-card{max-height:none;width:100%;padding:18px 18px 16px}
  .uf-card h3{font-size:36px}
  .uf-pick{top:calc(62vw - 46px);width:44px;height:44px}
  .uf-pick svg{width:18px;height:18px}
  .uf-pick.prev{left:10px}.uf-pick.next{right:10px}
}
@media (prefers-reduced-motion:reduce){ .uf-pic img{transition:opacity .2s} .uf-pick::before,.uf-pick::after{animation:none} }
/* Short cards: one line and the first sighting; the rest behind "More about this craft" (owner, 15 October 2026). */
.uf-first{margin:0 0 14px;font:400 13px/1.45 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.72)}
.uf-first b{display:inline-block;margin-right:8px;font:400 10.5px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--uf-c,#ffa552)}
.uf-more{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid rgba(243,238,231,.3);
  font:500 11px/1 var(--sans,"Geist",Arial,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--ink,#f3eee7)}
.uf-more::after{content:"+";font-size:14px;line-height:1}
.uf-more[aria-expanded="true"]::after{content:"\2212"}
.uf-more:hover,.uf-more:focus-visible{border-color:var(--uf-c,#ffa552)}
.uf-detail{margin-top:16px;padding-top:14px;border-top:1px solid rgba(243,238,231,.1)}
/* Tabs (owner, 15 October 2026: no walls of text): one short panel at a time. */
.uf-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:4px 0 0}
.uf-tab{all:unset;cursor:pointer;display:grid;justify-items:center;gap:6px;padding:10px 6px 9px;border-radius:12px;border:1px solid rgba(243,238,231,.12);
  background:rgba(243,238,231,.03);font:400 10px/1.1 var(--mono,"Geist Mono",monospace);letter-spacing:.12em;text-transform:uppercase;color:rgba(243,238,231,.7);text-align:center;transition:border-color .25s,background .25s,color .25s}
.uf-tab svg,.uf-sight-ic svg,.uf-sight-ev svg,.uf-ev svg,.uf-route-ship svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.uf-tab svg{width:18px;height:18px}
.uf-tab:hover{border-color:rgba(243,238,231,.3);color:var(--ink,#f3eee7)}
.uf-tab[aria-selected="true"]{border-color:var(--uf-c,#ffa552);background:color-mix(in srgb,var(--uf-c,#ffa552) 14%,transparent);color:var(--ink,#f3eee7)}
.uf-tab:focus-visible{outline:1px solid var(--ink,#f3eee7);outline-offset:2px}
.uf-panel{margin-top:14px;animation:ufIn .35s ease both}
@keyframes ufIn{from{opacity:0;transform:translateY(6px)}}
.uf-hint{margin:0 0 8px;font:400 10.5px/1 var(--mono,"Geist Mono",monospace);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,238,231,.4)}

/* Sightings: one row each; tap for the story. */
.uf-sights{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.uf-sight-head{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:grid;grid-template-columns:34px 46px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:9px 10px;border-radius:12px;background:rgba(243,238,231,.04);border:1px solid transparent;transition:border-color .25s,background .25s}
.uf-sight-head:hover,.uf-sight-head[aria-expanded="true"]{border-color:color-mix(in srgb,var(--uf-c,#ffa552) 45%,transparent);background:rgba(243,238,231,.07)}
.uf-sight-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--uf-c,#ffa552);background:color-mix(in srgb,var(--uf-c,#ffa552) 14%,transparent)}
.uf-sight-ic svg{width:18px;height:18px}
.uf-sight-when{font:400 20px/1 var(--serif,"Instrument Serif",Georgia,serif);color:var(--ink,#f3eee7)}
.uf-sight-name{display:grid;gap:3px;min-width:0}
.uf-sight-name b{font:500 13.5px/1.2 var(--sans,"Geist",Arial,sans-serif);color:var(--ink,#f3eee7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uf-sight-name small{font:400 10.5px/1.2 var(--mono,"Geist Mono",monospace);letter-spacing:.04em;color:rgba(243,238,231,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uf-sight-ev{display:flex;gap:3px;color:rgba(243,238,231,.55)}
.uf-sight-ev i{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(243,238,231,.06)}
.uf-sight-ev svg{width:13px;height:13px}
.uf-sight-text{margin:6px 4px 4px 44px;font:300 13.5px/1.5 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.86)}
.uf-sight-text .uf-when{display:block;margin-bottom:2px;font:400 10.5px/1.3 var(--mono,"Geist Mono",monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--uf-c,#ffa552)}

/* Who they saw, journey, verdict */
.uf-seen-big{margin:0;font:400 19px/1.4 var(--serif,"Instrument Serif",Georgia,serif);color:rgba(243,238,231,.92)}
.uf-route{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 0 4px}
.uf-route-end{display:grid;gap:4px;text-align:left}
.uf-route-earth{text-align:right}
.uf-route-end b{font:400 26px/1 var(--serif,"Instrument Serif",Georgia,serif);color:var(--ink,#f3eee7)}
.uf-route-end small,.uf-route-line small{font:400 10.5px/1.3 var(--mono,"Geist Mono",monospace);letter-spacing:.08em;color:rgba(243,238,231,.55)}
.uf-route-line{position:relative;display:grid;justify-items:center;gap:20px;padding-top:4px}
.uf-route-line::before{content:"";position:absolute;left:0;right:0;top:14px;height:1px;background:linear-gradient(90deg,var(--uf-c,#ffa552),rgba(156,198,255,.9));opacity:.7}
.uf-route-ship{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0b0c10;color:var(--uf-c,#ffa552);
  border:1px solid var(--uf-c,#ffa552);transform:rotate(90deg);animation:ufShip 4s ease-in-out infinite}
.uf-route-ship svg{width:15px;height:15px}
@keyframes ufShip{0%,100%{translate:-40% 0}50%{translate:40% 0}}
.uf-route-note{margin:12px 0 0;font:300 13px/1.5 var(--sans,"Geist",Arial,sans-serif);color:rgba(243,238,231,.7)}
.uf-ev li{display:inline-flex;align-items:center;gap:6px}
.uf-ev svg{width:13px;height:13px;color:var(--uf-c,#ffa552)}
@media (max-width:760px){ .uf-tab span{font-size:9px;letter-spacing:.06em} .uf-sight-head{grid-template-columns:30px 40px minmax(0,1fr)} .uf-sight-ev{display:none} }
@media (prefers-reduced-motion:reduce){ .uf-route-ship,.uf-panel{animation:none} }