/* Step 3b: full-screen index menu (ink-spread), from the approved mockup. Scoped to our templates. */
@keyframes inkdrift { to { transform: translate(45vmax, -25vh) scale(1.15); } }
/* While the menu is open the page behind it does not scroll. */
html:has(body.ai-site.locked), body.ai-site.locked { overflow: hidden !important; }
.ai-site .index { position: fixed; inset: 0; z-index: 60; color: #ffffff;
  background:
    radial-gradient(55% 45% at 88% 8%, rgba(77, 178, 236, .55), rgba(77, 178, 236, 0) 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(77, 178, 236, .22), rgba(77, 178, 236, 0) 70%),
    linear-gradient(155deg, #1d43a8 0%, #103080 42%, #0a1d55 78%, #071540 100%); overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0px at var(--ox, 40px) var(--oy, 40px)); transition: clip-path .6s cubic-bezier(.65,0,.25,1); }
.ai-site .index::before { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.ai-site .index::after { content: ""; position: fixed; width: 70vmax; height: 70vmax; left: -20vmax; top: 20vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 178, 236, .28), rgba(77, 178, 236, 0) 65%); filter: blur(10px); pointer-events: none;
  animation: inkdrift 18s ease-in-out infinite alternate; }
.ai-site .index-inner { position: relative; z-index: 1; }
.ai-site .index.is-open { clip-path: circle(150vmax at var(--ox, 40px) var(--oy, 40px)); }
.ai-site .index-inner { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
.ai-site .index-top { display: flex; align-items: center; gap: 20px; padding-block: 18px; width: 100%; }
.ai-site .index-mark { width: 240px; height: auto; }
.ai-site .index-search { flex: 1; max-width: 420px; margin-left: auto; display: flex; align-items: center; gap: 10px; color: #a9badf; border-bottom: 2px solid rgba(255,255,255,.25); transition: border-color .2s; }
.ai-site .index-search:focus-within { border-color: var(--sky); }
.ai-site .index-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 10px 0; font: 16px var(--body); color: #ffffff; outline: none; }
.ai-site .index-search input::placeholder { color: #a9badf; }
.ai-site .index-close { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #ffffff; display: grid; place-items: center; cursor: pointer; }
.ai-site .index-close:hover { background: rgba(255,255,255,.2); }
.ai-site .index-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; width: 100%; }
.ai-site .index-list { list-style: none; margin: 0; padding: 0; }
.ai-site .index-list a { display: inline-block; position: relative; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.3; letter-spacing: -0.015em; padding: 2px 0; color: #ffffff; transition: color .25s; }
.ai-site .index-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.3,.8,.2,1); }
.ai-site .index-list a:hover::after, .ai-site .index-list a:focus-visible::after, .ai-site .index-list a.on::after { transform: scaleX(1); }
.ai-site .index-list:hover a:not(:hover) { color: #8ea1cf; }
.ai-site .index-minor { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: #a9badf; font-size: 15px; line-height: 1.6; }
.ai-site .index-minor a { color: #dfe7f7; font-weight: 600; }
.ai-site .index-minor a:hover { color: var(--sky); }
.ai-site .index-preview { margin: 8px 0 0; position: sticky; top: 24px; }
.ai-site .index-preview img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 60px rgba(4, 12, 40, .45), 0 0 0 1px rgba(255,255,255,.08); transition: opacity .25s; }
.ai-site .index-preview figcaption { display: grid; gap: 6px; margin-top: 14px; }
.ai-site .index-preview #pv-sec { display: block; color: var(--sky); font-weight: 700; font-size: 13px; }
.ai-site .index-preview strong { display: block; font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.25; text-wrap: balance; transition: opacity .25s; }
.ai-site .index-preview.swap img, .ai-site .index-preview.swap strong { opacity: 0; }
.ai-site .index-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); width: 100%; }
.ai-site .index-paper { display: flex; align-items: center; gap: 14px; }
.ai-site .index-paper img { width: 92px; height: 64px; object-fit: cover; object-position: top; border-radius: 3px; }
.ai-site .index-paper span { display: grid; font-size: 13px; color: #a9badf; }
.ai-site .index-paper strong { font-family: var(--display); font-size: 18px; color: #ffffff; }
.ai-site .index-paper:hover strong { color: var(--sky); }
.ai-site .index-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; font-size: 14px; color: #dfe7f7; }
.ai-site .index-links a:hover { color: var(--sky); }
.ai-site .index-account { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ai-site .index-sub { background: var(--sky); color: #0b2260; padding: 11px 20px; font-size: 14px; }
.ai-site .index-list li, .ai-site .index-minor, .ai-site .index-foot, .ai-site .index-preview { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .55s cubic-bezier(.3,.8,.2,1); }
.ai-site .index.is-open .index-list li, .ai-site .index.is-open .index-minor, .ai-site .index.is-open .index-foot { opacity: 1; transform: none; transition-delay: calc(.28s + var(--i, 0) * 55ms); }
.ai-site .index.is-open .index-preview { opacity: 1; transform: none; transition-delay: .5s; }
@media (max-width: 960px) {
.ai-site .index-body { grid-template-columns: minmax(0, 1fr); }
.ai-site .index-minor { display: flex; flex-wrap: wrap; gap: 4px 16px; line-height: 1.6; }
.ai-site .index-minor a { margin-right: 0; white-space: normal; }
.ai-site .index-preview { display: none; }
.ai-site .index-account { margin-left: 0; }
}
@media (max-width: 640px) {
.ai-site .index-top { flex-wrap: wrap; gap: 14px; }
.ai-site .index-mark { width: 170px; }
.ai-site .index-search { order: 3; flex-basis: 100%; max-width: none; }
.ai-site .index-close { margin-left: auto; }
.ai-site .index-list a { font-size: 25px; }
.ai-site .index-foot { gap: 16px; }
.ai-site .index-account { width: 100%; }
.ai-site .index-sub { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.ai-site .index, .ai-site .index-list li, .ai-site .index-minor, .ai-site .index-foot, .ai-site .index-preview, .ai-site .glide, .ai-site .burger i { transition: none !important; }
.ai-site .index::after { animation: none; }
}

/* Logged-in staff: start below the WordPress admin bar, so the close button stays reachable. */
body.admin-bar.ai-site .index { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar.ai-site .index { top: 0; } }

/* The preview takes exactly the height of the section list beside it (titles + smaller sections),
   so both columns start and end on the same lines. "contain: size" stops the photo from setting the height;
   the grid row then stretches the preview to the list's height, and the photo fills what the caption leaves. */
@media (min-width: 961px) {
  .ai-site .index-body { align-items: stretch; align-content: start; } /* the row hugs the list, not the screen height */
  .ai-site .index-preview { contain: size; align-self: stretch; min-height: 240px; margin-top: 10px; display: flex; flex-direction: column; }
  .ai-site .index-preview img { flex: 1 1 0; min-height: 0; height: auto; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; }
  .ai-site .index-preview figcaption { flex: none; }
}