/* Homepage: the night sky and the twilight photograph as two full-width sections, a stacked card deck in
   the hero, and the AASCOPE cards in the same column as the deck. site.js drives the deck and scroll motion. */
.page-home{--frame-m:0px;--frame-p:24px;--col:820px;--spring:cubic-bezier(.22,1,.36,1);background:#0a0f1b}
.page-home .aa-site-header{position:absolute;inset:0 0 auto;z-index:20}

/* One geometry for every section: frames (edge to edge since 2026-09-30) and bands (plain sections) share
   the inner padding, and all content sits in one column, so every card has the same width. The night sky
   is the hero's own photograph and ends with a straight edge; everything below the hero sits on the
   twilight photograph (.lower-sky), which reaches the bottom of the page. */
.frame{position:relative;isolation:isolate;overflow:hidden;margin:0 var(--frame-m);padding-inline:var(--frame-p)}
.band{margin:0 var(--frame-m);padding-inline:var(--frame-p)}
.col{width:min(var(--col),100%);margin-inline:auto}
.frame + .frame{margin-top:var(--frame-m)}

/* ---------- hero ---------- */
.hero{margin-top:var(--frame-m);padding-top:clamp(96px,12vh,140px);padding-bottom:56px;background:#162036}
.hero-sky{position:absolute;inset:0;z-index:-2}
.hero-sky img{width:100%;height:100%;object-fit:cover;object-position:center 42%;animation:sky-drift 40s ease-in-out infinite alternate}
@keyframes sky-drift{from{transform:scale(1.02)}to{transform:scale(1.1) translateY(-1.5%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 70% at 50% 0%,rgba(10,15,27,.35),transparent 60%);pointer-events:none}.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-title{margin:0 0 40px;padding-left:.05em;font-size:var(--type-hero);font-weight:600;line-height:1.3;letter-spacing:.05em;color:#f7f8fa;text-shadow:0 2px 28px rgba(5,10,20,.35)}
@media (min-width:761px){.br-narrow{display:none}}
/* entrance: fill-mode "backwards" only, so the scroll effect on the deck is never overridden afterwards */
.hero-title{animation:hero-rise 1s var(--spring) backwards}
.deck-wrap{animation:hero-rise 1.1s var(--spring) .12s backwards}
.hero-actions{animation:hero-rise 1s var(--spring) .3s backwards}
@keyframes hero-rise{from{opacity:0;transform:translateY(16px)}}

/* ---------- card deck ---------- */
.deck-wrap{width:100%}
/* the whole deck, its peeking cards and the controls fit the first screen of 768-1080px tall displays */
.deck{position:relative;height:480px;height:clamp(400px,calc(100svh - 440px),520px)}
.deck-card{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border-radius:30px;
  border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,#22304d 0%,#172238 100%);color:#f5f6f8;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);transform-origin:50% 100%;
  transition:transform .9s var(--spring),opacity .7s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.deck-card[data-pos="0"]{z-index:4;transform:none}
.deck-card[data-pos="1"]{z-index:3;transform:translateY(22px) scale(.94);cursor:pointer}
.deck-card[data-pos="2"]{z-index:2;transform:translateY(42px) scale(.88);cursor:pointer}
.deck-card[data-pos="3"]{z-index:1;transform:translateY(58px) scale(.82);opacity:0;pointer-events:none}
.deck-card[data-pos="out"]{z-index:5;transform:translate3d(var(--out-x,120%),-60px,0) rotate(var(--out-r,9deg));opacity:0;pointer-events:none;
  transition:transform .75s cubic-bezier(.5,0,.75,0),opacity .3s ease .45s}
.deck-card.no-anim,.deck-card.dragging{transition:none}
/* cards behind the front one sit under one dark veil, so the stack reads as one material */
.deck-card::before{content:"";position:absolute;inset:0;z-index:6;background:#121a2b;opacity:0;transition:opacity .7s ease;pointer-events:none}
.deck-card[data-pos="1"]::before{opacity:.62}
.deck-card[data-pos="2"]::before,.deck-card[data-pos="3"]::before{opacity:.8}
.deck-card.is-light[data-pos="1"]::before{opacity:.86}
.deck-card.is-light[data-pos="2"]::before,.deck-card.is-light[data-pos="3"]::before{opacity:.93}
.deck-media{position:relative;min-height:0}
.deck-media picture{position:absolute;inset:34px 40px 0}
.deck-media img{width:100%;height:100%;object-fit:contain;transition:transform .9s var(--spring)}
.deck-card-shadow .deck-media img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.deck-copy{padding:20px 40px 34px;text-align:center}
.deck-card .c-text{margin:8px auto 14px;max-width:30em}
/* only the front card is a link; the cards peeking behind come forward when clicked */
.deck-card[data-pos="0"] .deck-link::after{content:"";position:absolute;inset:0;z-index:7}
.deck-card[data-pos="0"]:hover .deck-media img{transform:scale(1.04)}
.deck-card[data-pos="0"]:hover .c-link svg{transform:translateX(3px)}
.deck-card[data-pos="0"]:hover .c-link[target="_blank"] svg{transform:translate(2px,-2px)}
.deck-link:focus-visible{outline:none}
.deck-card:has(.deck-link:focus-visible){outline:2px solid #9fd0ff;outline-offset:-4px}
/* AAHUB studio photograph: a light card in the grey of the photo's own background */
.deck-card.is-light{background:#dcdcdc;color:#1d1d1f;border-color:rgba(255,255,255,.6)}
.deck-card.is-light .c-kicker,.deck-card.is-light .c-text{color:#424245}
.deck-card.is-light .c-link{color:#0066cc}
/* custom engraving: full-bleed photograph, copy over a scrim eased at both ends */
.deck-card.is-photo .deck-media{position:absolute;inset:0}
.deck-card.is-photo .deck-media picture{inset:0}
.deck-card.is-photo .deck-media img{object-fit:cover}
.deck-card.is-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,30,0) 30%,rgba(12,18,30,.041) 35.3%,rgba(12,18,30,.143) 40.7%,rgba(12,18,30,.275) 46%,rgba(12,18,30,.407) 51.3%,rgba(12,18,30,.509) 56.7%,rgba(12,18,30,.55) 62%,rgba(12,18,30,.582) 69.6%,rgba(12,18,30,.659) 77.2%,rgba(12,18,30,.751) 84.8%,rgba(12,18,30,.828) 92.4%,rgba(12,18,30,.86) 100%);pointer-events:none}
/* z-index works on grid items without positioning, so the copy never becomes the link's containing block */
.deck-card.is-photo .deck-copy{z-index:1;grid-row:2}

/* card type, shared by the deck and the AASCOPE cards */
.c-kicker{font-size:13px;letter-spacing:.06em;color:#b9c4d4}
.c-title{margin-top:4px;font-size:clamp(24px,2.6vw,30px);line-height:1.35;font-weight:600}
.c-text{font-size:15px;line-height:1.8;color:#c9d1dc}
.c-link{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:500;line-height:1.5;color:#bcdcff}
.c-link svg{width:15px;height:15px;transition:transform .35s var(--spring)}

/* controls: previous / progress bars / next / pause; hidden until the script runs them */
.deck-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:60px;visibility:hidden}
.deck-wrap.is-ready .deck-controls{visibility:visible}
.deck-dots{display:flex}
.deck-dots button{position:relative;width:36px;height:28px;padding:0;border:0;background:none}
.deck-dots button::before,.deck-dots i{content:"";position:absolute;left:4px;right:4px;top:12px;height:4px;border-radius:4px}
.deck-dots button::before{background:rgba(255,255,255,.22)}
.deck-dots i{background:#f2f5f9;transform-origin:left;transform:scaleX(0)}
/* the active bar is the autoplay timer: the deck advances when it has filled */
.deck-dots .is-active i{animation:deck-fill var(--dwell,5s) linear forwards}
.deck-wrap.is-paused .deck-dots .is-active i{animation-play-state:paused}
.deck-wrap.no-autoplay .deck-dots .is-active i{animation:none;transform:none}
@keyframes deck-fill{to{transform:scaleX(1)}}
.ctl{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(255,255,255,.06);color:#eef2f7;transition:background .2s,border-color .2s}
.ctl:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.ctl svg{width:15px;height:15px}
.ctl-pause{margin-left:8px}
.ctl-pause .i-play,.ctl-pause.is-on .i-pause{display:none}
.ctl-pause.is-on .i-play{display:block}

/* Leaving the screen: the deck recedes (fades, softens, shrinks a little and lags behind the scroll).
   It starts only when the deck's top edge nears the top of the screen, so a deck that is fully in view is
   never blurred, and it has faded exactly when its last part leaves. --p is written by site.js. */
.deck-wrap.is-exiting{opacity:calc(1 - var(--p));filter:blur(calc(var(--p) * 6px));transform:translateY(calc(var(--p) * 32px)) scale(calc(1 - var(--p) * .05));transform-origin:50% 0;will-change:opacity,filter,transform}
.deck-wrap.is-gone{pointer-events:none}

.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin-top:22px}
.pill-sky{display:inline-flex;align-items:center;min-height:52px;padding:0 32px;border-radius:999px;background:#bfe3f7;color:#0e2236;font-size:17px;font-weight:600;letter-spacing:.04em;box-shadow:0 10px 30px rgba(10,20,40,.25);transition:background .2s,transform .2s var(--ease)}
.pill-sky:hover{background:#d3ecfa;transform:translateY(-1px)}

/* ---------- AASCOPE ---------- */
.aascope{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(24px,3vw,40px)}
/* The twilight photograph with the moon: one layer fixed to the screen behind everything below the hero
   (AASCOPE, "more", the rights notice and the footer), so it reaches the bottom of the page. The hero is
   opaque and covers it at the top. 100lvh keeps its size steady while mobile toolbars slide; the 20%
   position keeps the moon in view on narrow screens. */
.lower-sky{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;background:#7f93ad}
.lower-sky picture,.lower-sky img{display:block;width:100%;height:100%}
.lower-sky img{object-fit:cover;object-position:20% 50%}
.aascope-title{text-align:center;font-size:var(--type-h2);line-height:1.4;color:#f7f8fa;text-shadow:0 2px 24px rgba(5,10,20,.3)}
.aascope-title .latin{display:block;margin-bottom:6px;font-size:clamp(40px,5vw,64px);line-height:1.1}
/* the twilight photograph is lighter than the night sky: muted text needs more luminance here */
.aascope .tone-muted{color:#e2e8f0}
.aascope-list{display:grid;gap:16px;margin-top:clamp(96px,12vw,160px)}
/* same width, radius, border and type as the deck cards; laid out sideways because they form a list */
.glass{position:relative;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);min-height:300px;overflow:hidden;border-radius:30px;
  border:1px solid rgba(255,255,255,.16);background:rgba(22,31,51,.6);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.45);color:#f5f6f8;transition:border-color .3s}
.glass-media{position:relative;min-height:0}
.glass-media picture{position:absolute;inset:0}
.glass-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--spring)}
.glass-media.is-object picture{inset:28px}
.glass-media.is-object img{object-fit:contain}
.glass-body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:36px 40px}
.glass-body .c-title{font-size:clamp(22px,2.2vw,26px)}
.glass-body .c-text{margin:2px 0 8px}
.glass.has-card-link:hover{border-color:rgba(255,255,255,.34)}
.glass.has-card-link:hover .glass-media img{transform:scale(1.04)}
.glass.has-card-link:hover .c-link svg{transform:translate(2px,-2px)}
.soon{display:inline-block;margin-left:8px;padding:1px 10px;border-radius:999px;background:rgba(247,248,250,.9);color:#12203a;font-size:12px;letter-spacing:0;vertical-align:1px}
/* Scroll-linked reveal of everything below the hero, background included: hidden and blurred while the
   AASCOPE section is below the fold, clear once its top edge has risen to 35% of the screen height, and
   the reverse on the way back up. site.js writes --reveal (0-1) and the reveal-* classes on <html>; only
   with .js-motion, so without the script (or with reduced motion) everything simply shows. The filter is
   dropped once fully clear, so the glass cards' backdrop blur is unaffected. */
.js-motion .lower-sky,.js-motion .aascope,.js-motion .page-home .more,.js-motion .page-home .site-rights,.js-motion .page-home .site-footer{
  opacity:var(--reveal,0);filter:blur(calc((1 - var(--reveal,0)) * 14px))}
.js-motion.reveal-moving .lower-sky,.js-motion.reveal-moving .aascope,.js-motion.reveal-moving .page-home .more{will-change:opacity,filter}
.js-motion.reveal-clear .lower-sky,.js-motion.reveal-clear .aascope,.js-motion.reveal-clear .page-home .more,
.js-motion.reveal-clear .page-home .site-rights,.js-motion.reveal-clear .page-home .site-footer{filter:none}

/* ---------- more ---------- */
.more{padding-top:clamp(72px,9vw,112px)}
.more-title{margin-bottom:18px;font-size:15px;font-weight:500;letter-spacing:.06em;color:var(--night-muted)}
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bento a{position:relative;display:flex;flex-direction:column;gap:4px;height:100%;padding:24px 52px 26px 24px;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:#141d30;transition:border-color .3s}
/* a soft light that follows the pointer (position written by site.js) */
.bento a::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(140,190,255,.14),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.bento a:hover{border-color:rgba(255,255,255,.24)}
.bento a:hover::before{opacity:1}
.bento strong{font-size:18px;font-weight:600;line-height:1.5}
.bento span{font-size:14px;line-height:1.7;color:#aeb9c9}
.bento svg{position:absolute;top:28px;right:22px;width:16px;height:16px;color:var(--night-muted);transition:transform .3s var(--spring),color .3s}
.bento a:hover svg{transform:translateX(3px);color:#fff}
.page-home .site-rights{margin-top:72px}
/* text that sits directly on the light twilight sky: dark ink (about 5:1 against the sky; the night theme's
   light greys drop to about 3:1 there). The "more" tiles keep their own dark surface and light text. */
.page-home .more-title{color:#1c2940}
.page-home .site-rights,.page-home .site-rights h2{color:#15203a;border-color:rgba(16,26,46,.22)}
.page-home .site-rights a:hover{color:#05080f}
.page-home .site-footer{color:#1c2940;border-color:rgba(16,26,46,.22)}
.page-home .site-footer .brand,.page-home .site-footer .footer-domain,.page-home .site-footer .footer-legal a,.page-home .site-footer .back-top{color:#101a2e}
.page-home .site-footer a:hover{color:#05080f}
/* the rights notice and footer line up with the card column too */
.page-home .site-rights,.page-home .site-footer{width:min(var(--col),calc(100% - 2 * (var(--frame-m) + var(--frame-p))))}

@media (max-width:760px){
  .page-home{--frame-p:16px}
  .hero{padding-top:112px;padding-bottom:48px}
  .hero-title{font-size:clamp(32px,9vw,40px)}
  .deck{height:480px}
  .deck-media picture{inset:24px 20px 0}
  .deck-copy{padding:16px 22px 26px}
  .pill-sky{min-height:48px;padding:0 28px}
  .glass{grid-template-columns:1fr;min-height:0}
  .glass-media{aspect-ratio:16/10}
  .glass-body{padding:20px 22px 24px}
  .aascope-list{margin-top:88px}
  .bento{grid-template-columns:1fr}
  .page-home .site-rights{margin-top:56px}
}
@media print{.js-motion .lower-sky,.js-motion .aascope,.js-motion .page-home .more,.js-motion .page-home .site-rights,.js-motion .page-home .site-footer{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){
  /* cards change by fading in place; site.css already stops the keyframe animations */
  .deck-card,.deck-card[data-pos="out"]{transition:opacity .3s ease}
  .deck-card[data-pos="out"]{transform:none}
}