/* THE PRESENTATION LAYER · master/css/master-present.css · 14 Oct 2026
   Rania, 14 Oct 2026: "KEEP UPLEVELING THE WEBSITE. THE SECTIONS ARE NOT HIGH SPEC, AI POWERFUL PRESENTATION … RESEARCHING. COLLECTING FROM THE
   BEST WEBSITES IN THE WORLD" · "A NEW VISUALLY AESTHETIC POWERFUL WEBSITE FLOW WITH A USER EXPERIENCE THAT HAS PEOPLE NOT WANTING TO LEAVE."
   Patterns read (never copied) from linear.app, stripe.com, vercel.com and ourworldindata.org, built here in the house's own palette (black, white,
   silver; no new colour): the statement that lights word by word as it scrolls past; heads and cards that rise into place in turn; a light that
   follows the pointer across a card; a hairline of reading progress; a chapter rail that keeps the reader placed and shows what is next.
   Driven by master/js/master-present.js. Everything stands still for a reader who asked for less motion. */
body.airy, body.snt {
  /* the statement, lit as it is read */
  .pr-lit .pr-w { color: inherit; opacity: .22; transition: opacity .35s ease; }
  .pr-lit .pr-w.on { opacity: 1; }
  /* heads and cards rise into place */
  .pr-rise { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--pr-d, 0ms); }
  .pr-rise.pr-in { opacity: 1; transform: none; }
  /* the light that follows the pointer */
  .pr-spot { position: relative; isolation: isolate; }
  .pr-spot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(11, 11, 14, .06), transparent 60%); }
  .ay-dark .pr-spot::before, .sh-dark .pr-spot::before, .sc-on-dark .pr-spot::before, .ay-card-ink.pr-spot::before, .pr-spot.ay-float-ink::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 60%); }
  .pr-spot:hover::before { opacity: 1; }

  /* depth on the dark bands: a faint hairline grid that fades out from the middle (read from linear.app and vercel.com; white lines, no colour) */
  :is(.ay-dark, .sh-dark, .sc-sec-navy, .sc-sec-night).pr-grid { position: relative; isolation: isolate; }
  :is(.ay-dark, .sh-dark, .sc-sec-navy, .sc-sec-night).pr-grid::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 64px 64px; background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%); }

  /* a page's own numbered rail (snt-hb) takes the same manners: no box over the cards, the name only under the pointer */
  .snt-hb-rail ol { background: transparent; }
  .snt-hb-dot.is-here span { max-width: 0; }
  .snt-hb-rail:hover .snt-hb-dot span, .snt-hb-dot:focus-visible span { max-width: 220px; padding: 3px 8px; border-radius: 6px; background: rgba(11, 11, 14, .92); color: #fff; }
  .snt-hb-dot:not(.is-here) b { background: rgba(11, 11, 14, .55); }
  /* the hairline of reading progress */
  .pr-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 80; transform-origin: 0 50%; transform: scaleX(var(--pr-p, 0)); background: linear-gradient(90deg, #8E9099, #F2F2F4); pointer-events: none; }
  /* the chapter rail */
  .pr-rail { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 10px 6px; list-style: none;
    border-radius: 999px; background: transparent; opacity: 0; transition: opacity .4s, background .3s, box-shadow .3s; }
  .pr-rail.pr-show { opacity: .7; }
  .pr-rail.pr-show:hover, .pr-rail.pr-show:focus-within { opacity: 1; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 16px rgba(11, 11, 14, .12); }
  .pr-rail a { position: relative; display: block; width: 7px; height: 7px; border-radius: 999px; background: #B4B6BF; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); transition: background .25s, transform .25s; }
  .pr-rail a:hover, .pr-rail a:focus-visible { background: #0B0B0E; transform: scale(1.25); outline: 0; }
  .pr-rail.pr-on-dark:not(:hover) a { background: rgba(255, 255, 255, .38); box-shadow: none; }
  .pr-rail.pr-on-dark:not(:hover) a.on { background: #fff; }
  .pr-rail a.on { background: #0B0B0E; transform: scale(1.35); }
  .pr-rail a span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; padding: 6px 10px; border-radius: 8px;
    background: #0B0B0E; color: #fff; font: 500 12.5px/1 var(--font); letter-spacing: 0; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
  .pr-rail a:hover span, .pr-rail a:focus-visible span { opacity: 1; transform: translateY(-50%); }
  /* the next chapter, named at the foot of each section */
  .pr-next-wrap { position: relative; z-index: 1; }
  .pr-next { display: flex; align-items: center; gap: 12px; margin: clamp(36px, 4vw, 56px) 0 0; padding-top: 18px; border-top: 1px solid rgba(11, 11, 14, .1); font: 500 14px/1.3 var(--font); color: #6B6D76; text-decoration: none; }
  .ay-dark .pr-next, .sh-dark .pr-next, .pr-next.pr-on-dark { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); }
  .pr-next b { color: #0B0B0E; font-weight: 600; }
  .ay-dark .pr-next b, .sh-dark .pr-next b, .pr-next.pr-on-dark b { color: #fff; }
  .pr-next i { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
  .pr-next svg { width: 18px; height: 18px; transition: transform .25s; }
  .pr-next:hover svg { transform: translateY(3px); }
  @media (max-width: 1100px) { .pr-rail { display: none; } }
  @media (prefers-reduced-motion: reduce) {
    .pr-lit .pr-w { opacity: 1; transition: none; }
    .pr-rise { opacity: 1; transform: none; transition: none; }
  }
}

/* between pages: a short cross-fade where the browser can (same-site navigation; Chrome and Safari 18+), nothing where it cannot */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pr-vt-out .22s ease both; }
::view-transition-new(root) { animation: pr-vt-in .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pr-vt-out { to { opacity: 0; } }
@keyframes pr-vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@media print { .pr-rise { opacity: 1 !important; transform: none !important; } .pr-rail, .pr-progress { display: none !important; } }

/* words over a sketched hero: a soft dark halo behind the letters so a line of the drawing never cuts a word */
.ay-hero.ay-sketched :is(h1, .ay-sub, .ay-lede, p) { text-shadow: 0 1px 2px rgba(18, 18, 22, .55), 0 0 28px rgba(18, 18, 22, .85); }

/* the live ask on a phone (master/try.html): the box wraps and the stage breathes less, so nothing pushes the page sideways */
@media (max-width: 600px) {
  body.airy .lf-stage { padding: 22px 16px 26px; }
  body.airy .lf-askbox { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  body.airy .lf-askbox #lfq { flex: 1 1 100%; min-width: 0; width: 100%; }
  body.airy .lf-cites, body.airy .lf-pane { min-width: 0; overflow-wrap: anywhere; }
}

/* the live features' tabs sit on black: the one that is open reads white (it had inherited the ink and vanished) */
body.airy .lf .lf-tab.on { color: #fff; border-bottom-color: #fff; }
body.airy .lf .lf-pane .pk { color: rgba(255, 255, 255, .72); }

/* who it is for: every tile says its one line, not only the one that is lit (six of seven tiles read empty) */
body.airy .ay-tiles .ay-tile span { opacity: 1; transform: none; color: var(--mute, #5B5E68); }
body.airy .ay-tiles .ay-tile.on span { color: rgba(255, 255, 255, .78); }