/* THE SECOND CHAMBERS HOME, LIGHT AND AIRY · master/css/master-airy.css · 3 Oct 2026
   Rania, 3 Oct 2026: "SECOND CHAMBERS IS THIS HOME PAGE DESIGN." The look read from opensecrets.org, in the house's own colours: white and
   a warm paper, Inter at 300 to 500 in sentence case, big quiet headings, cards with a 12px corner and a soft shadow, the aurora kept
   for the one button that matters (Request a demo) and ink for the rest. Loaded after master.css and scoped to body.airy, so only the
   page that wears the class (the home) changes. The shell (the bar, the header, the menus, the drawer, the foot) is js/master.js's and
   master.css's; this sheet only makes the header stand over the photograph until the page scrolls. */

body.airy {
  --ay-paper: #EDEEF3;   /* 5 Oct 2026, Rania: "i don't like the creamy background sections": the house's cool pale (sections-alternate-grounds), never cream */ --ay-tint: #EEF0F4; --ay-tint-2: #DCDFE6; --ay-grey: #6B6B74; --ay-line: #E3E3E6;
  --ay-r: 12px; --ay-r-s: 10px;
  --ay-shadow: 0 1px 2px rgba(11, 11, 14, .04), 0 10px 30px rgba(11, 11, 14, .06);
  --ay-shadow-2: 0 2px 6px rgba(11, 11, 14, .06), 0 24px 60px rgba(11, 11, 14, .11);
  --ay-head: var(--font);
  font-size: 16px;

  /* ── the words of the page: Inter, sentence case, light; the header's nav keeps the shell's own face ── */
  main h1, main h2, main h3, main h4 { font-family: var(--ay-head); text-transform: none; letter-spacing: -.02em; font-weight: 500; line-height: 1.1; }
  .ay-h2 { margin: 0; font-size: clamp(32px, 3.7vw, 54px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; max-width: 22ch; }
  .ay-h2-big { font-size: clamp(40px, 5vw, 72px); }
  .ay-centre { text-align: center; margin-inline: auto; }
  main .eyebrow { display: inline-flex; margin: 0 0 14px; font-family: var(--font); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ay-grey); }
  main .eyebrow::before { display: none; }
  main .eyebrow.ay-centre { display: flex; justify-content: center; width: 100%; }
  .ay-sub { margin: 18px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
  .ay-note { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--ay-grey); }
  .ay-fine { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: var(--ay-grey); }
  .ay-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ay-sechead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
  .ay-sechead > div:first-child { max-width: 820px; }
  .ay-arrow { width: 16px; height: 16px; flex: none; transition: transform .2s; }
  .ay-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 500; font-size: 15px; color: var(--ink); text-decoration: none; }
  .ay-more:hover .ay-arrow, main .btn:hover .ay-arrow { transform: translateX(4px); }
  .ay-doors { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; }

  /* ── the buttons on the page: 10px corner, 48 tall; the aurora stays for Request a demo, ink and the line for the rest ── */
  main .btn { height: 48px; padding: 0 20px; border-radius: var(--ay-r-s); font-family: var(--font); font-weight: 500; font-size: 15px; gap: 8px; }
  main .btn-line { border-color: var(--ink); background: transparent; }
  main .btn-line:hover { background: var(--ink); color: #fff; }
  .ay-on-ink.btn-line { border-color: #fff; color: #fff; }
  .ay-on-ink.btn-line:hover { background: #fff; color: var(--ink); }

  /* ── the skeleton's big grey section numbers (.secno, drawn by js/master.js) stay: Rania, 3 Oct 2026, "I LIKE THE GREY NUMBERING OF THE SECTIONS" ── */

  /* ── the sections: white and paper, in turn ── */
  .ay-sec { position: relative; padding: clamp(60px, 7.2vw, 108px) 0; background: #fff; border: 0; }
  .ay-paper { background: var(--ay-paper); }

  /* ── THE HERO: the photograph full-bleed, blurred and greyed behind, sharp inside a lens; a dark veil for the words; the h1 on two
        lines, light then medium; one search; the records row at the foot. The header stands over it, transparent, until the page scrolls. ── */
  .ay-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: min(92vh, 860px); padding: calc(var(--head-h, 68px) + clamp(24px, 4vw, 56px)) 0 0; background: #2A2A2E; color: #fff; }
  .ay-hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .ay-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%; }
  .ay-hero-back { filter: blur(14px) saturate(.35) brightness(.72); transform: scale(1.06); }
  .ay-hero-lens { clip-path: ellipse(46% 92% at 74% 48%); filter: saturate(.92) contrast(1.02); }
  .ay-hero-photo::after { content: ""; position: absolute; inset: 0; background:
      linear-gradient(90deg, rgba(20, 20, 24, .72) 0%, rgba(20, 20, 24, .58) 34%, rgba(20, 20, 24, .18) 58%, rgba(20, 20, 24, 0) 76%),
      linear-gradient(180deg, rgba(20, 20, 24, .35) 0%, rgba(20, 20, 24, 0) 28%, rgba(20, 20, 24, 0) 62%, rgba(20, 20, 24, .66) 100%); }
  .ay-hero-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(48px, 7vw, 110px); }
  .ay-h1 { margin: 0; max-width: 16ch; font-family: var(--display); font-size: clamp(38px, 5vw, 72px); font-weight: 700; line-height: .96; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }   /* 7 Oct 2026, B (Rania: "Let's go with it"): the display face in capitals, the first line silver, the second white; A (the second line red) is a page's own choice: .ay-hero.ay-red */
  .ay-h1 span { display: block; }
  .ay-h1 .ay-h1-a { color: rgba(244, 244, 246, .72); font-weight: 700; }
  .ay-h1 .ay-h1-b { font-weight: 700; color: #fff; }
  .ay-hero.ay-red .ay-h1 .ay-h1-b { color: var(--news); }
  .ay-find { position: relative; margin: clamp(28px, 3.4vw, 44px) 0 0; max-width: 640px; }
  .ay-find-box { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 6px 6px 22px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); }
  .ay-find-box:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 10px 40px rgba(0, 0, 0, .18); }
  .ay-find-box svg { flex: none; width: 20px; height: 20px; color: var(--ay-grey); }
  .ay-find-box input { flex: 1; min-width: 0; min-height: 48px; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 400 18px/1.3 var(--font); letter-spacing: -.01em; }
  .ay-find-box input::placeholder { color: var(--ay-grey); }
  .ay-find-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .ay-find-go { height: 50px; border-radius: 10px; white-space: nowrap; }
  .ay-find-say { margin: 10px 0 0 22px; font-size: 13px; color: rgba(255, 255, 255, .72); }
  .ay-hero-foot { position: relative; z-index: 2; padding: 10px 0 18px; }
  .ay-hero-trust { margin: 0 auto 6px; font-family: var(--font); font-size: 14px; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .8); }
  .ay-hero-foot .mq { color: #fff; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .ay-hero-foot .mq * { color: #fff; }
  .ay-hero-foot .mq small, .ay-hero-foot .mq .mute, .ay-hero-foot .mq span:not(:first-child) { color: rgba(255, 255, 255, .7); }

  /* ── the header over the hero (html.ay-at-top, set by js/master-airy.js): transparent, white type; the bar keeps its black.
     7 Oct 2026: the header is sticky at every scroll (it was absolute at the top and sticky after, and the page jumped by its height at the
     switch); the hero is pulled up under it by its height (.ay-hero margin-top) and only the ground fades. ── */
  .head { position: fixed; top: var(--ay-head-y, var(--ay-bar-h, 40px)); left: 0; right: 0; z-index: 60; transition: background .25s, border-color .25s, box-shadow .25s, color .25s; }   /* 7 Oct 2026: no header in the flow; it rides under the bar, then at the top edge */
  html.ay-at-top & .head { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
  html.ay-at-top & .head .brand, html.ay-at-top & .head .nav-btn, html.ay-at-top & .head .nav-link, html.ay-at-top & .head .login { color: #fff; }
  html.ay-at-top & .head .nav-btn:hover, html.ay-at-top & .head .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .12); }
  html.ay-at-top & .head .btn-ink { background: #fff; color: var(--ink); }
  html.ay-at-top & .head .burger { color: #fff; }
  html.ay-at-top & .head .brand .lk { display: none; }
  html.ay-at-top & .head .brand .lk.light { display: block; }
  /* 12 Oct 2026: a card's own head (.card .head, the replay cards on Cause, not reaction and their kin) is not the site header: the two
     rules above caught it, fixed it to the top of the window and printed four of them over the wordmark. Inside a card it stays in its card. */
  & .card .head, html.ay-at-top & .card .head { position: static; top: auto; left: auto; right: auto; z-index: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom-color: #2A2A2A; }

  /* ── the cards ── */
  .ay-card { position: relative; margin: 0; list-style: none; background: #fff; border: 1px solid var(--ay-line); border-radius: var(--ay-r); box-shadow: var(--ay-shadow); transition: transform .25s, box-shadow .25s; }
  .ay-card:hover { transform: translateY(-3px); box-shadow: var(--ay-shadow-2); }
  .ay-card-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
  .ay-card-ink h3, .ay-card-ink .ay-more, .ay-card-ink .ay-go { color: #fff; }
  .ay-card-ink p { color: rgba(255, 255, 255, .8); }
  .ay-card-tint { background: var(--ay-tint); border-color: transparent; }
  .ay-paper .ay-card-tint { background: #fff; border-color: var(--ay-line); }                 /* on the pale, a tint card would vanish */
  .ay-card .ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ay-tint); color: var(--ink); }
  .ay-card .ic i, .ay-card .ic svg { width: 22px; height: 22px; display: block; }
  .ay-card-ink .ic { background: rgba(255, 255, 255, .12); color: #fff; }

  /* ── a row of cards you slide ── */
  .ay-rail { position: relative; margin-top: clamp(28px, 3.6vw, 52px); }
  .ay-rail-row { display: flex; gap: 22px; margin: 0; padding: 10px max(var(--gutter), calc((100% - var(--max)) / 2)) 30px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); scrollbar-width: none; }
  .ay-rail-row::-webkit-scrollbar { display: none; }
  .ay-rail-row > li { flex: 0 0 min(400px, 84vw); scroll-snap-align: start; }
  .ay-rail-nav { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
  .ay-rail-go { width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ay-r-s); background: var(--ink); color: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
  .ay-rail-go:hover { background: #333338; }
  .ay-rail-go[disabled] { opacity: .3; cursor: default; }
  .ay-rail-go svg { width: 20px; height: 20px; }
  .ay-rail-dots { margin-inline-start: auto; display: flex; gap: 6px; }
  .ay-rail-dots i { display: block; width: 34px; height: 2px; background: var(--ay-tint-2); transition: background .2s; }
  .ay-rail-dots i.on { background: var(--ink); }

  /* ── ONE PLATFORM: five doors, a narrow silver column at the left of each, the number set tall in it ── */
  .ay-follow .ay-sub { margin-top: 20px; }
  .ay-card-lead { display: flex; min-height: 340px; }
  .ay-lead-bar { flex: 0 0 36px; display: grid; justify-items: center; align-items: start; padding-top: 20px; border-radius: var(--ay-r) 0 0 var(--ay-r); background: linear-gradient(180deg, #D3D4DC, #A6A6B4); color: var(--ink); font-style: normal; }
  .ay-card-ink .ay-lead-bar { background: linear-gradient(180deg, #0B0B0E, #E60000); color: #fff; }
  .ay-lead-bar b { writing-mode: vertical-rl; font: 500 12px/1 var(--font); letter-spacing: .14em; }
  .ay-card-in { display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 24px; min-width: 0; }
  .ay-card-in h3 { margin: 6px 0 0; font-size: 21px; line-height: 1.25; letter-spacing: -.012em; color: var(--ink); }
  .ay-card-in p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
  .ay-card-in .ay-more { margin-top: auto; padding-top: 18px; }
  .ay-card-ink .ay-card-in h3 { color: #fff; }                                   /* stated after the card's own, so the ink door's title stands */
  .ay-card-ink .ay-card-in p { color: rgba(255, 255, 255, .82); }

  /* ── CHAMBER ONE, MEASURED: the drawn figures on the hairline grid, the number light and large ── */
  .ay-nums { margin-top: 0; }
  .ay-nums .num b, .ay-nums .num .n, .ay-nums .num strong { font-family: var(--font); font-weight: 300; letter-spacing: -.035em; }
  .ay-numbers .num-grid { background: transparent; }
  .ay-numbers .num { background: var(--ay-paper); }
  .ay-numbers .num:hover { background: #fff; }

  /* ── YOUR MORNING: the three steps as a list at the left, the Morning Desk itself as the floating card at the right ── */
  .ay-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
  .ay-steplist { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ay-line); }
  .ay-steplist li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--ay-line); }
  .ay-steplist li i, .ay-steplist li i svg { width: 28px; height: 28px; display: block; color: var(--ink); }
  .ay-steplist b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
  .ay-steplist p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
  .ay-float { position: sticky; top: 110px; margin: 0; padding: 0; background: #fff; border: 1px solid var(--ay-line); border-radius: 16px; box-shadow: var(--ay-shadow-2); overflow: hidden; }
  .ay-float-desk { padding: 14px; }
  .ay-float-desk .hero-mk { margin: 0; max-width: none; }
  .ay-float-desk figcaption { margin: 12px 6px 2px; font-size: 13px; line-height: 1.5; color: var(--ay-grey); }
  .ay-float-top { padding: 30px 30px 26px; background: linear-gradient(135deg, var(--ay-tint) 0%, var(--ay-tint-2) 100%); }
  .ay-float-top .eyebrow { margin-bottom: 10px; }
  .ay-float-top h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.025em; color: var(--ink); }
  .ay-float-door { padding: 26px 30px 28px; border-top: 1px solid var(--ay-line); }
  .ay-float-door h4 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.012em; color: var(--ink); }
  .ay-float-door p:not(.eyebrow) { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
  .ay-float-door .btn { margin-top: 18px; }
  .ay-float-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
  .ay-float-ink .ay-float-top { background: linear-gradient(135deg, #2A2A2E, #0B0B0E); }
  .ay-float-ink .ay-float-top h3, .ay-float-ink h4 { color: #fff; }
  .ay-float-ink .eyebrow { color: rgba(255, 255, 255, .62); }
  .ay-float-ink .ay-float-door { border-top-color: rgba(255, 255, 255, .14); }
  .ay-float-ink .ay-float-door p:not(.eyebrow) { color: rgba(255, 255, 255, .8); }
  .ay-ways { margin: 0; padding: 8px 10px; list-style: none; }
  .ay-ways li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .ay-ways a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 10px; text-decoration: none; color: #fff; font-size: 17px; font-weight: 500; transition: background .2s; }
  .ay-ways a:hover { background: rgba(255, 255, 255, .08); }
  .ay-ways .ay-arrow { width: 18px; height: 18px; }

  /* ── EVERY PIECE: sixteen features, four a row, on white, ink and tint in turn ── */
  .ay-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
  .ay-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
  .ay-piece a { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 220px; padding: 24px 24px 22px; text-decoration: none; color: inherit; }
  .ay-piece h3 { margin: 4px 0 0; padding-right: 36px; font-size: 20px; line-height: 1.22; letter-spacing: -.015em; color: var(--ink); }
  .ay-piece p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
  .ay-piece .ay-go { position: absolute; right: 20px; top: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--ay-line); color: var(--ink); background: #fff; }
  .ay-card-ink.ay-piece .ay-go { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; }
  .ay-card-ink.ay-piece h3 { color: #fff; }
  .ay-card-ink.ay-piece p { color: rgba(255, 255, 255, .8); }
  .ay-piece:hover .ay-go .ay-arrow { transform: translateX(3px); }
  .ay-tcard { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 12px; }
  .ay-tcard h3 { margin: 4px 0 0; font-size: 20px; line-height: 1.25; letter-spacing: -.012em; color: var(--ink); }
  .ay-tcard p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

  /* ── THE ONE LAW: the words at the left, the four rules as a list that opens ── */
  .ay-two-acc { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ay-sticky { position: sticky; top: 120px; }
  .ay-accs { display: flex; flex-direction: column; border-top: 1px solid var(--ay-line); }
  .ay-acc { border-bottom: 1px solid var(--ay-line); }
  .ay-acc summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 14px; padding: 22px 4px; list-style: none; cursor: pointer; color: var(--ink); }
  .ay-acc summary::-webkit-details-marker { display: none; }
  .ay-acc summary i { font: 500 13px/1 var(--font); font-style: normal; letter-spacing: .06em; color: var(--ay-grey); }
  .ay-acc summary span { font: 500 20px/1.3 var(--font); letter-spacing: -.012em; }
  .ay-acc-mark { position: relative; width: 28px; height: 28px; border: 1px solid var(--ay-line); border-radius: 999px; }
  .ay-acc-mark::before, .ay-acc-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s; }
  .ay-acc-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
  .ay-acc[open] .ay-acc-mark::after { transform: translate(-50%, -50%) rotate(0); }
  .ay-acc-body { padding: 0 32px 26px 62px; }
  .ay-acc-body p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

  /* ── WATCH IT WORK, THE PROOF, THE GRADE, THE CHAMBERS: the pieces js/master.js draws, with the airy heads ── */
  .ay-watch .watch-stage { margin-top: 0; }
  .ay-proofrow { margin-top: 0; }
  .ay-grades { margin-top: 0; }
  .ay-chambergrid { margin-top: 0; }

  /* ── NEXT: the heading large at the left with the three marks, the doors on the ink card at the right ── */
  .ay-marks { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ay-line); list-style: none; }
  .ay-marks li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
  .ay-marks .mi, .ay-marks .mi svg { width: 26px; height: 26px; display: block; }

  /* ── the close: two lines, large and light, centred ── */
  .ay-close { padding-bottom: clamp(80px, 9vw, 140px); }
  .ay-close-h { margin: 0 auto; max-width: 24ch; text-align: center; font: 300 clamp(32px, 4.4vw, 64px)/1.08 var(--font); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
  .ay-close-h span { display: block; }
  .ay-close-h span + span { font-weight: 500; }
  .ay-close .ay-sub { margin-top: 26px; text-align: center; }

  /* ── the foot, light: paper, ink type (the shell draws it; the dress is this page's) ── */
  .foot { background: #fff; color: var(--ink-2); border-top: 1px solid var(--ay-line); }          /* white under the pale close (5 Oct 2026: no two grounds alike) */
  .foot .wm, .foot h4, .foot a { color: var(--ink); }
  .foot .tag, .foot .foot-bottom { color: var(--ay-grey); }
  .foot a:hover { color: var(--pink-ink); }

  /* ══ 3 Oct 2026, evening: the six sections owed in the sections list (05-CREATIVE/THE SECOND CHAMBERS HOME - the sections to lock in …) ══ */

  /* ── THE CASE FILE, PINNED: the words stay at the left; the whole file, drawn from js/casefile-data.js, scrolls at the right until it is complete ── */
  .ay-two-cf { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ay-cf-count { margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ay-line); font-size: 15px; line-height: 1.5; color: var(--ay-grey); }
  .ay-cf-count b { display: block; font: 300 clamp(44px, 4.6vw, 64px)/1 var(--font); letter-spacing: -.035em; color: var(--ink); margin-bottom: 8px; }
  .ay-cf-count span { display: block; margin-top: 6px; font-size: 14px; color: var(--ay-grey); }
  .ay-casefile { --ay-cf-sheet: min(78vh, 760px); }
  .ay-two-cf { align-items: start; }
  .ay-doc-col { position: sticky; top: calc(var(--head-h, 68px) + 24px); min-width: 0; height: var(--ay-cf-sheet); }
  .ay-doc { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--ay-line); border-radius: 16px; box-shadow: var(--ay-shadow-2); overflow: hidden; }
  .ay-doc .ui-top { flex: none; }
  .ay-doc-scroll { flex: 1; min-height: 0; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 48px), transparent); mask: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 48px), transparent); }
  .ay-doc-body { padding: 22px 26px 26px; will-change: transform; }
  .ay-doc-head { margin: 0 0 22px; }
  .ay-doc-head .ay-doc-sub { margin: 0; font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
  .ay-doc-head h3 { margin: 6px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); }
  .ay-doc-head p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
  .ay-cf-entry { padding: 16px 0; border-top: 1px solid var(--line-2); opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .ay-cf-entry.in { opacity: 1; transform: none; }
  .ay-cf-entry.is-here { background: linear-gradient(90deg, var(--ay-paper), transparent); margin-inline: -26px; padding-inline: 26px; }
  .ay-cf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--nav); font-size: 11.5px; color: var(--mute); }
  .ay-cf-meta b { color: var(--ink); font-weight: 600; }
  .ay-cf-meta .grade { margin-left: auto; }
  .ay-cf-kicker { margin: 6px 0 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); }
  .ay-cf-q { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
  .ay-cf-q mark { background: #FBF1A9; color: inherit; padding: 1px 2px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .ay-cf-ours { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
  .ay-cf-ours i { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-right: 8px; }
  .ay-cf-src { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
  .ay-cf-app { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
  .ay-cf-app .mk-k { display: block; margin-bottom: 10px; }
  .ay-cf-app .ui-chips .ui-chip .n { margin-left: 2px; }
  .ay-cf-end { margin: 18px 0 0; font-size: 12.5px; color: var(--mute); display: flex; gap: 10px; align-items: center; }
  .ay-cf-end .live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(230,0,0,.22); }

  /* ── WHO IT IS FOR: four doors, the people first, the organisations that pay last ── */
  .ay-whogrid { align-items: stretch; }
  .ay-who { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; }
  .ay-who-n { position: absolute; right: 20px; top: 18px; font: 300 44px/1 var(--font); letter-spacing: -.04em; color: var(--ay-tint-2); }
  .ay-card-ink .ay-who-n { color: rgba(255, 255, 255, .18); }
  .ay-who .eyebrow { margin-bottom: 0; }
  .ay-card-ink .eyebrow { color: rgba(255, 255, 255, .62); }
  .ay-who h3 { margin: 6px 0 0; font-size: 24px; line-height: 1.15; letter-spacing: -.018em; color: var(--ink); }
  .ay-who p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
  .ay-card-ink.ay-who h3 { color: #fff; }
  .ay-card-ink.ay-who p { color: rgba(255, 255, 255, .82); }
  .ay-plans { margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ay-line); }
  .ay-plans li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--ay-line); font-size: 14px; color: var(--ink-2); }
  .ay-plans .ay-plan-k { font-family: var(--nav); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ay-grey); padding-top: 2px; }
  .ay-plans b { font-weight: 500; color: var(--ink); }
  .ay-plans .ay-plan-price { grid-column: 2; font-size: 13px; color: var(--ay-grey); }
  .ay-who-go { margin-top: auto; padding-top: 16px; }
  .ay-card-ink .btn-ink { background: #fff; color: var(--ink); }

  /* ── WATCH IT WORK: the captions are the column that stays; the one playing is lit ── */
  .ay-two-watch { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .ay-caps { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ay-line); }
  .ay-caps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ay-line); font-size: 15px; line-height: 1.55; color: var(--ay-grey); cursor: pointer; transition: color .25s; }
  .ay-caps li i { font: 500 12px/1.6 var(--font); font-style: normal; letter-spacing: .08em; color: var(--ay-grey); }
  .ay-caps li.on { color: var(--ink); }
  .ay-caps li.on i { color: var(--ink); }
  .ay-caps li.on span { position: relative; }
  .ay-caps li.on span::before { content: ""; position: absolute; left: -50px; top: .55em; width: 36px; height: 2px; background: var(--ink); }
  .ay-caps li:hover { color: var(--ink); }
  .ay-watch .watch-stage { margin-top: 0; }
  .ay-watch .watch-bar { grid-template-columns: 44px auto; justify-content: space-between; }
  .ay-watch .watch-caps { display: none; }
  .ay-watch-right { min-width: 0; }

  /* ── THE FOUNDING CHAMBER'S LATEST: a dark row, the newest films then the Readings' opening act; the words below the picture ── */
  .ay-dark { background: var(--ink); color: #fff; }
  .ay-dark .ay-h2, .ay-dark .ay-latest-h a { color: #fff; }
  .ay-dark .ay-sub { color: rgba(255, 255, 255, .78); }
  .ay-dark .ay-note { color: rgba(255, 255, 255, .6); }
  .ay-dark .eyebrow { color: rgba(255, 255, 255, .62); }
  .ay-dark .secno { color: rgba(255, 255, 255, .10); }
  .ay-dark .ay-rail-go { background: #fff; color: var(--ink); }
  .ay-dark .ay-rail-go:hover { background: #E3E3E6; }
  .ay-dark .ay-rail-dots i { background: rgba(255, 255, 255, .22); }
  .ay-dark .ay-rail-dots i.on { background: #fff; }
  .ay-latest .ay-sechead { margin-bottom: 8px; }
  .ay-latest-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 26px; }
  .ay-latest-h { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
  .ay-latest-h a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
  .ay-latest-h .ay-arrow { width: 18px; height: 18px; }
  .ay-latest .ay-rail { margin-top: 10px; }
  .ay-latest .ay-rail + .wrap { margin-top: 10px; }
  .ay-latest .ay-rail-row > li { flex-basis: min(340px, 78vw); }
  .ay-latest-card { background: #141418; border-color: rgba(255, 255, 255, .1); box-shadow: none; }
  .ay-latest-card:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .ay-latest-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
  .ay-pic { display: block; aspect-ratio: 16 / 9; background: #0B0B0E; overflow: hidden; }
  .ay-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ay-plate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; padding: 22px; background: linear-gradient(135deg, #1E1E24, #0B0B0E); }
  .ay-plate b { display: inline-grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
  .ay-plate i { font: 400 12px/1 var(--nav); font-style: normal; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }
  .ay-latest .ay-h2 { max-width: 30ch; }
  .ay-latest-words { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
  .ay-latest-meta { font-family: var(--nav); font-size: 12px; letter-spacing: .02em; color: rgba(255, 255, 255, .58); }
  .ay-latest-words h3 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.012em; color: #fff; }
  .ay-latest-words p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* ── EVERY PIECE AS NUMBERED ROWS (the twin index-pieces-rows.html, for her eye): 01. to 16. at the left, the title at the right ── */
  .ay-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ay-line); }
  .ay-row { border-bottom: 1px solid var(--ay-line); }
  .ay-row a { position: relative; display: grid; grid-template-columns: 120px 44px minmax(0, 1fr) 48px; align-items: center; gap: 24px; padding: 26px 0; text-decoration: none; color: inherit; transition: padding .25s; }
  .ay-row a:hover { padding-left: 10px; }
  .ay-row-n { font: 300 clamp(40px, 4.4vw, 64px)/1 var(--font); letter-spacing: -.04em; color: var(--ay-tint-2); transition: color .25s; }
  .ay-row a:hover .ay-row-n { color: var(--ink); }
  .ay-row-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ay-tint); color: var(--ink); }
  .ay-row-ic i, .ay-row-ic svg { width: 22px; height: 22px; display: block; }
  .ay-row-words h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
  .ay-row-words p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
  .ay-row .ay-go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--ink); color: var(--ink); background: #fff; transition: background .2s, color .2s; }
  .ay-row a:hover .ay-go { background: var(--ink); color: #fff; }

  @media (max-width: 1024px), (prefers-reduced-motion: reduce) {
    .ay-two-cf, .ay-two-watch { grid-template-columns: minmax(0, 1fr); }
    .ay-doc-col { position: static; height: auto; }
    .ay-doc { height: auto; }
    .ay-doc-scroll { overflow: auto; max-height: 72vh; -webkit-mask: none; mask: none; overscroll-behavior: contain; }
    .ay-doc-body { will-change: auto; }
    .ay-cf-entry.is-here { margin-inline: 0; padding-inline: 0; background: none; }
  }
  @media (max-width: 640px) {
    .ay-doc-body { padding: 16px 16px 20px; }
    .ay-cf-entry.is-here { margin-inline: 0; padding-inline: 0; }
    .ay-row a { grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 14px; padding: 20px 0; }
    .ay-row-ic { display: none; }
    .ay-row .ay-go { width: 40px; height: 40px; }
    .ay-who-n { font-size: 34px; }
    .ay-caps li.on span::before { display: none; }
  }

  /* ── the measure ── */
  @media (max-width: 1240px) {
    .ay-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 1024px) {
    .ay-hero { min-height: min(84vh, 720px); }
    .ay-hero-lens { clip-path: ellipse(70% 80% at 70% 40%); }
    .ay-hero-photo::after { background: linear-gradient(180deg, rgba(20, 20, 24, .55) 0%, rgba(20, 20, 24, .5) 45%, rgba(20, 20, 24, .75) 100%); }
    .ay-two, .ay-two-acc { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ay-float, .ay-sticky { position: static; }
    .ay-grid4, .ay-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .ay-sec { padding: 52px 0; }
    .ay-h1 { font-size: 9.6vw; }   /* capitals run wider: 11vw → 9.6vw (7 Oct 2026) */
    .ay-grid4, .ay-grid3 { grid-template-columns: minmax(0, 1fr); }
    .ay-piece a { min-height: 0; }
    .ay-find-box { padding: 6px 6px 6px 16px; }
    .ay-find-go { padding: 0 14px; }
    .ay-find-go .ay-arrow { display: none; }
    .ay-card-lead { min-height: 0; }
    .ay-acc summary { grid-template-columns: 36px minmax(0, 1fr) 28px; }
    .ay-acc-body { padding-left: 50px; padding-right: 8px; }
    .ay-float-top, .ay-float-door { padding-inline: 22px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ay-card, .ay-arrow, .ay-rail-row { transition: none; scroll-behavior: auto; }
  }
}

/* the foot on a phone: master.css's 1180 rule (three columns) follows its 640 rule (two), so at 375 the three ran 10px past the screen
   (found by the phone audit, 5 Oct 2026, night; the inner pages take the same fix in css/master-align.css). Two columns from 640 down. */
@media (max-width: 640px) { body.airy .foot-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }

/* ══ THE JOURNEY (7 Oct 2026, on her creative licence; the plan in 05-CREATIVE/THE HOME PAGE JOURNEY …). Under body.airy, as the sheet above nests.
   The accent is the one red (her word, 7 Oct: "I do not like the violet colour. Let's just used the red."): a line or a fill, never small type. ══ */
body.airy { --ay-red: #E60000; }
body.airy .ay-hero .ay-h1-wide { max-width: none; }
/* the live window */
body.airy .ay-win-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
body.airy .ay-flow-svg { width: 100%; height: auto; display: block; overflow: visible; }
body.airy .ay-flow-svg .src { font: 500 18px/1 var(--font); fill: var(--ink); letter-spacing: -.015em; }
body.airy .ay-flow-lines path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 5 9; opacity: .32; animation: ay-dash 7s linear infinite; }
body.airy .ay-flow-lines path:nth-child(2n) { animation-duration: 9s; } body.airy .ay-flow-lines path:nth-child(3n) { animation-duration: 11s; }
@keyframes ay-dash { to { stroke-dashoffset: -168; } }
body.airy .ay-flow-node { fill: var(--ink); }
body.airy .ay-flow-k { font: 500 13px/1 var(--font); fill: rgba(255, 255, 255, .72); letter-spacing: .04em; text-transform: uppercase; }
body.airy .ay-flow-n { font: 500 24px/1 var(--font); fill: #fff; letter-spacing: -.02em; }
body.airy .ay-flow-out { fill: none; stroke: var(--ay-red); stroke-width: 2; }
body.airy .ay-flow-head { fill: none; stroke: var(--ay-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.airy .ay-flow-l { font: 400 14px/1 var(--font); fill: var(--mute); }
body.airy .ay-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body.airy .ay-tab { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ay-line); background: #fff; color: var(--ink); font: 500 14px/1 var(--font); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
body.airy .ay-tab:hover { border-color: var(--ink); }
body.airy .ay-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
body.airy .ay-panel { display: none; } body.airy .ay-panel.on { display: block; animation: ay-fade .35s var(--ease); }
@keyframes ay-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.airy .ay-win { background: #fff; border: 1px solid var(--ay-line); border-radius: var(--ay-r); box-shadow: var(--ay-shadow); overflow: hidden; }
body.airy .ay-paper .ay-win { border-color: transparent; }
body.airy .ay-win-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ay-line); font-size: 13px; color: var(--mute); }
body.airy .ay-win-top b { color: var(--ink); font-weight: 500; }
body.airy .ay-win-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ay-red); box-shadow: 0 0 0 4px rgba(230, 0, 0, .14); }
body.airy .ay-win-live { margin-left: auto; }
body.airy .ay-sheet { width: 100%; border-collapse: collapse; font-size: 13.5px; }
body.airy .ay-sheet th { text-align: left; padding: 10px 14px; font: 500 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--ay-line); background: #FAFAFC; white-space: nowrap; }
body.airy .ay-sheet td { padding: 11px 14px; border-bottom: 1px solid var(--ay-line); vertical-align: top; color: var(--ink); line-height: 1.4; }
body.airy .ay-sheet tr:last-child td { border-bottom: 0; }
body.airy .ay-sheet td:first-child { max-width: 34ch; }
body.airy .ay-g { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 6px; font: 600 11px/1 var(--font); font-style: normal; letter-spacing: .04em; }
body.airy .ay-g-v { background: var(--ink); color: #fff; } body.airy .ay-g-v2 { background: #EEEEF2; color: var(--ink); } body.airy .ay-g-s { background: var(--ay-paper); color: var(--ink); } body.airy .ay-g-owed { background: #fff; color: var(--mute); border: 1px dashed var(--ay-line); }
body.airy .ay-st { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--ay-paper); color: var(--ink); white-space: nowrap; }
body.airy .ay-st-answered { background: #E6F6EF; color: #15803D; } body.airy .ay-st-waiting, body.airy .ay-st-still { background: #FFF1E6; color: #B4540A; }
body.airy .ay-qcard-in { padding: 22px 24px 24px; }
body.airy .ay-qcard-q { margin: 0 0 16px; font-size: clamp(19px, 1.5vw, 23px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
body.airy .ay-qcard-said { margin: 0 0 18px; padding: 14px 18px; border-left: 2px solid var(--ay-red); background: var(--ay-paper); border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
body.airy .ay-qcard-said footer { margin-top: 8px; font-size: 13px; color: var(--mute); }
body.airy .ay-qcard-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 16px; }
body.airy .ay-qcard-meta dt { font: 500 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
body.airy .ay-qcard-meta dd { margin: 0; font-size: 14px; color: var(--ink); }
body.airy .ay-qcard-a { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2, #3A3A44); }
body.airy .ay-cf-list { list-style: none; margin: 0; padding: 8px 0 0; }
body.airy .ay-cf-list li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--ay-line); }
body.airy .ay-cf-y { font: 500 15px/1.2 var(--font); color: var(--ink); }
body.airy .ay-cf-list b { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
body.airy .ay-cf-list p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2, #3A3A44); }
body.airy .ay-cf-more { margin: 0; padding: 14px 20px 18px; }
/* by the numbers */
body.airy .ay-numbers-big .ay-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 96px; }
body.airy .ay-numbers-big .num { position: relative; padding: 0 0 26px 26px; border: 0; border-left: 1px solid var(--ay-line); background: none; }
body.airy .ay-numbers-big .num::after { content: ""; position: absolute; left: 26px; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--ay-line) 0 1px, transparent 1px 7px); mask: linear-gradient(90deg, #000 70%, transparent); -webkit-mask: linear-gradient(90deg, #000 70%, transparent); }
body.airy .ay-numbers-big .num .n { font-size: clamp(60px, 7.4vw, 118px); font-weight: 300; line-height: 1; letter-spacing: -.045em; color: var(--ink); margin: 0 0 14px; font-variant-numeric: tabular-nums; }
body.airy .ay-numbers-big .num .t { font-size: 15px; line-height: 1.4; color: var(--ink); }
body.airy .ay-numbers-big .num .s { margin-top: 8px; font-size: 12.5px; color: var(--mute); display: flex; gap: 8px; align-items: center; }
/* the two names, the one dark band */
body.airy .ay-dark.ay-names { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(84px, 10vw, 150px) 0; }
body.airy .ay-ghost { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); font: 500 clamp(72px, 13.5vw, 230px)/1 var(--font); letter-spacing: -.045em; color: rgba(255, 255, 255, .055); white-space: nowrap; pointer-events: none; user-select: none; }
body.airy .ay-names-in { position: relative; z-index: 1; }
body.airy .ay-names .eyebrow { color: rgba(255, 255, 255, .6); }
body.airy .ay-names .ay-h2 { color: #fff; max-width: 26ch; }
body.airy .ay-names .ay-sub { color: rgba(255, 255, 255, .78); max-width: 60ch; }
body.airy .ay-two-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
body.airy .ay-name { margin: 0; padding: clamp(22px, 2.4vw, 32px); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--ay-r); background: rgba(255, 255, 255, .04); }
body.airy .ay-name h3 { margin: 10px 0 10px; font-size: clamp(24px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; color: #fff; }
body.airy .ay-name p { margin: 0 0 20px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
body.airy .ay-name .btn-line { border-color: rgba(255, 255, 255, .7); color: #fff; }
body.airy .ay-name .btn-line:hover { background: #fff; color: var(--ink); }
/* how it works: the steps as rows, one open */
body.airy .ay-steps-acc { margin-top: 24px; }
/* the mark over the foot */
body.airy .ay-mark { position: relative; overflow: hidden; background: var(--ay-paper); padding: clamp(36px, 5vw, 72px) 0 0; }
body.airy .ay-mark-in { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 1.2vw; box-sizing: border-box; }
body.airy .ay-mark svg { display: block; width: 100%; height: auto; color: var(--ink); transform: translateY(30%); }
@media (max-width: 960px) {
  body.airy .ay-win-grid { grid-template-columns: minmax(0, 1fr); }
  body.airy .ay-win-grid > * { min-width: 0; }   /* the window never widens the page: at 375 the sheet made the column 386 and the page scrolled sideways (7 Oct) */
  body.airy .ay-two-names { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.airy .ay-numbers-big .ay-nums { grid-template-columns: 1fr; }
  body.airy .ay-sheet th:nth-child(2), body.airy .ay-sheet td:nth-child(2) { display: none; }
  body.airy .ay-sheet { table-layout: fixed; }
  body.airy .ay-sheet th, body.airy .ay-sheet td { padding-left: 10px; padding-right: 10px; overflow-wrap: anywhere; }
  body.airy .ay-sheet td:first-child { max-width: none; }
  body.airy .ay-ghost { font-size: 22vw; }
  body.airy .ay-mark-in { width: 190vw; margin-left: -45vw; padding: 0; }
}

/* the pinned sections: the stage holds while the section scrolls through its stops (master-home.js); from 961 up */
@media (min-width: 961px) {
  body.airy .ay-pin { padding: 0; min-height: calc(var(--stops, 4) * 100vh); }
  body.airy .ay-pin > .wrap { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--ay-head-top, 108px) + 16px); padding-bottom: 40px; box-sizing: border-box; }
  body.airy .ay-pin > .wrap.ay-two { display: grid; align-content: center; }
  body.airy .ay-pin .ay-sechead { margin-bottom: clamp(20px, 2.4vw, 32px); }
  body.airy .ay-pin .ay-two { align-items: center; }
}
/* the dark band, the names' style, worn again by the one law */
body.airy .ay-dark.ay-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(84px, 10vw, 150px) 0; }
body.airy .ay-dark.ay-band > .wrap { position: relative; z-index: 1; }
body.airy .ay-dark.ay-band .eyebrow { color: rgba(255, 255, 255, .6); }
body.airy .ay-dark.ay-band .ay-h2 { color: #fff; }
body.airy .ay-dark.ay-band .ay-sub { color: rgba(255, 255, 255, .78); }
body.airy .ay-dark.ay-band .ay-accs { border-top-color: rgba(255, 255, 255, .18); }
body.airy .ay-dark.ay-band .ay-acc { border-bottom-color: rgba(255, 255, 255, .14); }
body.airy .ay-dark.ay-band .ay-acc summary { color: #fff; }
body.airy .ay-dark.ay-band .ay-acc summary i { color: rgba(255, 255, 255, .5); }
body.airy .ay-dark.ay-band .ay-acc-mark { border-color: rgba(255, 255, 255, .3); }
body.airy .ay-dark.ay-band .ay-acc-mark::before, body.airy .ay-dark.ay-band .ay-acc-mark::after { background: #fff; }
body.airy .ay-dark.ay-band .ay-acc-body p { color: rgba(255, 255, 255, .78); }
/* the section numerals sit above the head, in the section's own top air, never under a window (her word, 7 Oct) */
body.airy .secno.side { top: -.92em; font-size: clamp(84px, 8.4vw, 118px); line-height: .8; }

/* who it is for: the personas from the Solutions menu as tiles, one lit at a time (7 Oct 2026; the plan's 08) */
body.airy .ay-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(28px, 3.4vw, 44px); padding: 0; list-style: none; }
body.airy .ay-tile { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; min-height: 150px; padding: 18px 18px 16px; border: 1px solid var(--ay-line); border-radius: var(--ay-r); background: #fff; color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s; }
body.airy .ay-paper .ay-tile { border-color: transparent; }
body.airy .ay-tile .mi, body.airy .ay-tile .mi svg { width: 26px; height: 26px; display: block; }
body.airy .ay-tile b { font: 500 16px/1.25 var(--font); letter-spacing: -.01em; }
body.airy .ay-tile span { font-size: 13.5px; line-height: 1.45; color: var(--mute); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
body.airy .ay-tile-go { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ay-red); color: #fff; opacity: 0; transition: opacity .3s; }
body.airy .ay-tile-go .ay-arrow { width: 16px; height: 16px; }
body.airy .ay-tile.on { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-3px); }
body.airy .ay-tile.on span { color: rgba(255, 255, 255, .78); opacity: 1; transform: none; }
body.airy .ay-tile.on .ay-tile-go { opacity: 1; }
body.airy .ay-tile:hover { border-color: var(--ink); }
@media (max-width: 960px) { body.airy .ay-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.airy .ay-tile { min-height: 0; } body.airy .ay-tile span { opacity: 1; transform: none; } }

/* THE SIGNALS SITE'S ORB HERO under the sticky shell (7 Oct 2026): pulled up under the header like .ay-hero, its words kept clear of it */
body.airy .orb-hero { padding-top: calc(var(--head-h, 68px) + 24px); }

/* ══ THE HEADLINE, C · A TRIAL (8 Oct 2026) ═══════════════════════════════════════════════════════════════════════════════════════
   Rania, with the UN warnings hero ("WARNED." in red, the paragraph's first sentence in bold): "CAN WE TRY THIS HEADING FONT PLEASE
   where we then also bolden certain words, in the paragraph, etc." That heading is Inter at its heaviest weight, set tight. This block
   puts it on every H1 of both sites (the shell is shared): the capitals and the two tones of B stand, the face changes. The first
   sentence of every hero paragraph is set bold by master-airy.js (THE LEAD). To go back to B: delete this block and the LEAD function;
   the sheets before it are in master-airy.css.bak-before-headline-c-8oct. */
html body.airy .ay-h1,
html body .orb-hero h1.orb-h1,
html body.snt.snt.snt:not(.sh-page) #sc-main :is(h1, .sc-h1),
html body.snt.snt.snt.sh-page .sh-main .sh-h1,
html body.snt.snt.snt.sh-page .sh-main .orb-hero h1.orb-h1 {
  font-family: "Inter", system-ui, sans-serif !important;   /* 8 Oct 2026, from the headline trial page: "GO WITH 08" (Inter 800, capitals, -.02em) */   /* 8 Oct 2026, her word on seeing Inter: "CHANGE TO THIS FONT", with The Map of the Land and the Mana Mokopuna heading: the house display face, bold, the capitals set close */
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.08 !important;   /* 8 Oct 2026, Rania: "THE HERO FONT NEEDS MORE SPACING BETWEEN ROWS" (.96 → 1.08) */
  font-size: clamp(42px, 5.4vw, 80px) !important;
}
html body.airy .ay-h1 :is(.ay-h1-a, .ay-h1-b),
html body .orb-hero h1.orb-h1 :is(.orb-a, .orb-b),
html body.snt.snt.snt:not(.sh-page) #sc-main :is(h1, .sc-h1) :is(.orb-a, .orb-b, .snt-mh-a, .sc-h1-a, .snt-hl, b, strong),
html body.snt.snt.snt.sh-page .sh-main .sh-h1 :is(.sh-h1-a, .sh-h1-b),
html body.snt.snt.snt.sh-page .sh-main .orb-hero h1.orb-h1 :is(.orb-a, .orb-b) { font-weight: 800 !important; }
/* 8 Oct 2026, night: an orb hero on a page in the home's dress (body.sh-page: the wheel's eight pages) takes the same headline; the home sheet's
   sentence case for its own sections had won over it there. Capitals, as the headline is ruled ("Inter 800, capitals"). */
html body.snt.snt.snt.sh-page .sh-main .orb-hero h1.orb-h1, html body.snt.snt.snt.sh-page .sh-main .orb-hero h1.orb-h1 :is(.orb-a, .orb-b) { text-transform: uppercase !important; }
@media (max-width: 640px) {
  html body.airy .ay-h1, html body .orb-hero h1.orb-h1, html body.snt.snt.snt:not(.sh-page) #sc-main :is(h1, .sc-h1), html body.snt.snt.snt.sh-page .sh-main .sh-h1, html body.snt.snt.snt.sh-page .sh-main .orb-hero h1.orb-h1 { font-size: 10.4vw !important; }
}
/* THE LEAD: the first sentence of a hero's paragraph, bold, in the paragraph's own white or ink */
.ay-lead { font-weight: 700; color: #fff; }
html body.airy:not(.snt) .ay-sec .ay-lead, html body.airy:not(.snt) .lede .ay-lead { color: #0B0B0E; }
/* ONE WHITE (8 Oct 2026). Rania: "THE HERO HEADING FONT needs to only be WHITE. NOT grey also." The first line is no longer silver: every line of
   every H1 on both sites is white; a page that sets its last line red (.ay-red, .orb-red) keeps that. */
html body.airy .ay-h1, html body.airy .ay-h1 .ay-h1-a, html body.airy .ay-h1 .ay-h1-b,
html body .orb-hero h1.orb-h1, html body .orb-hero h1.orb-h1 .orb-a, html body .orb-hero h1.orb-h1 .orb-b,
html body.snt.snt.snt:not(.sh-page) #sc-main :is(h1, .sc-h1), html body.snt.snt.snt:not(.sh-page) #sc-main :is(h1, .sc-h1) :is(.orb-a, .orb-b, .snt-mh-a, .sc-h1-a, .snt-hl, b, strong),
html body.snt.snt.snt.sh-page .sh-main .sh-h1, html body.snt.snt.snt.sh-page .sh-main .sh-h1 :is(.sh-h1-a, .sh-h1-b), html body.snt.snt.snt.sh-page .sh-main .orb-hero h1.orb-h1, html body.snt.snt.snt.sh-page .sh-main .orb-hero h1.orb-h1 :is(.orb-a, .orb-b) { color: #fff !important; }
/* ONE WHITE, the split word (11 Oct 2026). Where the motion module splits a headline into words (data-hm="words"), the word inside .snt-hl
   kept sns-trial.css's silver gradient as clipped text, so its line printed grey (the Crown on Race, In their words). The same white. */
html body.snt.snt.snt:not(.sh-page) #sc-main :is(h1, .sc-h1) .snt-hl .hm-w { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
html body.airy .ay-hero.ay-red .ay-h1 .ay-h1-b, html body .orb-hero.orb-red h1.orb-h1 .orb-b, html body.snt.snt.snt:not(.sh-page) #sc-main .orb-hero.orb-red h1 .orb-b { color: var(--news, #E60000) !important; }

/* ══ THE HEADLINE, D · GIVONIC, EVERY HEADING, BOTH SITES (13 Oct 2026) ══════════════════════════════════════════════════════════
   Rania, 13 Oct 2026, night, with a picture of the home's headline set in Givonic: "THE HEADING FONT ON THE SITE NEEDS TO BE THIS FONT. IT IS SO
   MUCH EASIER TO READ> UPDATE THE ENTIRE HEADING FONT ON ALL SITES. SECOND CHAMBERS & SIGNALS NOT SILENCE. NOT THE PINK THOUGH."
   The face in her picture is Givonic, the house's display face (assets/fonts/GivonicVariable.ttf, declared in master/css/master.css and on the
   Signals site's sheets). This block, last in the shell both sites share, sets EVERY heading in it: the H1 as her picture sets it (Givonic 700,
   capitals, tracked open), every H2 to H6 in the same face at its own size and case, never lighter than 500. The colours are untouched: one
   white on a hero, ink on paper, a page's own red last line where it has one; the pink of her picture is not taken.
   Left as they are: the header and its menus (1e), the strip's names set as logos (1i), a recreated evidence sheet in its print's own face.
   Every selector carries two :not(#…) so it outranks the Signals site's own sheets (snt-align.css sets Inter through #sc-main).
   THE HEADLINE, C (Inter 800) stood from 8 Oct to 13 Oct 2026 and is kept above as the record; to go back, delete this block. */
html:root:root body:not(#hd-a):not(#hd-b) :is(h1, h2, h3, h4, h5, h6, .ay-h1, .sh-h1, .sc-h1, .ay-h2, .sh-h2):not(header *):not(nav *):not(.snt-strip *):not(.pmq *):not(.snt-sheet *):not(.sk *) {
  font-family: "Givonic", "Inter", system-ui, sans-serif !important;
  font-synthesis: none;
}
html:root:root body:not(#hd-a):not(#hd-b) :is(h2, h3, h4, h5, h6, .ay-h2, .sh-h2):not(header *):not(nav *):not(.snt-strip *):not(.pmq *):not(.snt-sheet *),
html:root:root body:not(#hd-a):not(#hd-b) :is(h2, h3, h4, h5, h6, .ay-h2, .sh-h2):not(header *):not(nav *):not(.snt-strip *):not(.pmq *):not(.snt-sheet *) :is(span, b, strong, em) {
  font-weight: var(--hd-w, 600) !important;
}
html:root:root body:not(#hd-a):not(#hd-b) :is(h2, h3, h4, h5, h6, .ay-h2, .sh-h2):not(header *):not(nav *) :is(span:first-child) { --hd-w: 500; }
html:root:root body:not(#hd-a):not(#hd-b) :is(h2, .ay-h2, .sh-h2):not(header *):not(nav *):not(.snt-strip *) { letter-spacing: .005em !important; }
/* the H1: her picture */
html:root:root body:not(#hd-a):not(#hd-b) :is(.ay-h1, h1.orb-h1, .sh-h1, .sc-h1, #sc-main h1, main h1):not(header *):not(nav *),
html:root:root body:not(#hd-a):not(#hd-b) :is(.ay-h1, h1.orb-h1, .sh-h1, .sc-h1, #sc-main h1, main h1):not(header *):not(nav *) :is(span, b, strong, em, .ay-h1-a, .ay-h1-b, .orb-a, .orb-b, .sh-h1-a, .sh-h1-b, .snt-mh-a, .sc-h1-a, .snt-hl, .hm-w) {
  font-family: "Givonic", "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}
html:root:root body:not(#hd-a):not(#hd-b) :is(.ay-h1, h1.orb-h1, .sh-h1, .sc-h1, #sc-main h1, main h1):not(header *):not(nav *) { line-height: 1.04 !important; }

/* THE HERO, SKETCHED (13 Oct 2026, night; Rania: "CREATE OUR OWN HERO IMAGES WITH SKETCHES. FIRST START OF A SKETCH OF THE BEEHIVE"):
   the house's own drawing, white pencil on black (assets/sketches/<slug>-night-drawn.svg, tools/sketch-*.py), drawing itself in. On the home since
   13 Oct 2026 and on the inner pages through tools/build-master-sketch-heroes.py; here in the shared sheet so every page reads it from one place.
   The words keep their place at the left; the ground darkens behind them so the lines never fight the type. */
body.airy .ay-hero.ay-sketched { background: #121216; }
body.airy .ay-hero-sketch .ay-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 64%; filter: none; clip-path: none; transform: none; }
body.airy .ay-hero-sketch::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 18, 22, .9) 0%, rgba(18, 18, 22, .62) 34%, rgba(18, 18, 22, .1) 58%, rgba(18, 18, 22, 0) 70%),
              linear-gradient(180deg, rgba(18, 18, 22, .35) 0%, rgba(18, 18, 22, 0) 22%, rgba(18, 18, 22, 0) 78%, rgba(18, 18, 22, .7) 100%); }
@media (max-width: 760px) {
  body.airy .ay-hero-sketch .ay-hero-art { object-position: 70% 70%; opacity: .7; }
  body.airy .ay-hero-sketch::after { background: linear-gradient(180deg, rgba(18, 18, 22, .55) 0%, rgba(18, 18, 22, .78) 45%, rgba(18, 18, 22, .86) 100%); }
}

/* ══ THE SECTION HEADINGS, AS THE HERO (14 Oct 2026) ══════════════════════════════════════════════════════════════════════════════
   Rania, 14 Oct 2026, with a picture of "THEIR WORDS. NOT OURS. WE'VE JUST PUT THEM IN ORDER." set in Givonic bold capitals: "ALL HEADINGS ON
   SECTIONS NEEDS TO BE THIS FONT THROUGHOUT THE ENTIRE SITE." Every section heading on both sites (the H2s and the classes that stand for them)
   now takes the hero headline's setting: Givonic 700, capitals, set close, every span in it the same weight (the light first line of the
   two-tone heads is gone). Size, colour and place are each page's own, untouched; the pink of her picture is not taken (her word of 13 Oct).
   Card titles (H3 and below) keep THE HEADLINE, D. The header, the menus, the strip's logo names and a recreated sheet keep their own faces. */
html:root:root body:not(#hd-a):not(#hd-b):not(#hd-c) :is(h2, .ay-h2, .sh-h2, .sc-h2):not(header *):not(nav *):not(.snt-strip *):not(.pmq *):not(.snt-sheet *):not(.sk *),
html:root:root body:not(#hd-a):not(#hd-b):not(#hd-c) :is(h2, .ay-h2, .sh-h2, .sc-h2):not(header *):not(nav *):not(.snt-strip *):not(.pmq *):not(.snt-sheet *):not(.sk *) :is(span, b, strong, em, i) {
  font-family: "Givonic", "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
/* capitals run wider than sentence case: the head widens to keep its rows (her rule: one size, never three rows, never shrunk), so a section
   heading takes the full width its column gives and its spans run on one line where they fit */
html:root:root body:not(#hd-a):not(#hd-b):not(#hd-c) :is(h2, .ay-h2, .sh-h2, .sc-h2):not(header *):not(nav *):not(.snt-strip *):not(.pmq *):not(.snt-sheet *):not(.sk *) { line-height: 1.04 !important; max-width: none !important; text-wrap: balance; }
html:root:root body:not(#hd-a):not(#hd-b):not(#hd-c) :is(.ay-sechead, .sh-head, .snt-mn-words, .fd-sticky, .sh-sticky, .scx-head) { max-width: none !important; }
html:root:root body:not(#hd-a):not(#hd-b):not(#hd-c) .ay-sechead > div:first-child { flex: 1 1 auto; max-width: none !important; }

/* THE LEAD, ON LIGHT GROUNDS (14 Oct 2026): THE LEAD sets a paragraph's first sentence bold in white, for a hero on black; on a white or pale section
   it printed white on white ("Every country has one house." on the Signals home vanished). On light grounds it takes the ink. */
html body .sh-sec:not(.sh-dark) .ay-lead, html body .ay-sec:not(.ay-dark) .ay-lead, html body .sc-sec:not(.sc-sec-night):not(.sc-on-dark) .ay-lead { color: #0B0B0E !important; }