/* ==========================================================================
   Layout — page shell, container, colour themes, background grid
   ========================================================================== */

.page{position:relative;background:var(--bg);color:var(--fg);font-family:var(--font-sans);overflow-x:clip}

/* Sections are positioning contexts for their .grid6 background */
main>section{position:relative}

.container{position:relative;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

/* Section colour themes (default is the light page) */
.theme-blue{background:var(--blue);color:var(--white)}
.theme-alt{background:var(--bg-alt)}
.theme-inverse{background:var(--inv-bg);color:var(--inv-fg)}

/* Section heading row: big title left, intro right */
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:clamp(48px,6vw,80px)}
.lead{font-size:17px;line-height:1.55;color:var(--text-2)}
.eyebrow{font-size:13px;font-weight:500}

/* ---------- Six-column background grid ---------- */
.grid6{position:absolute;inset:0;display:flex;pointer-events:none}
.grid6>i{flex:1 1 0;border-left:1px solid rgba(242,240,235,.07)}
.grid6>i:last-child{border-right:1px solid rgba(242,240,235,.07)}
.grid-page>i,.grid-page>i:last-child{border-color:var(--grid-line)}
.grid-inverse>i,.grid-inverse>i:last-child{border-color:var(--grid-line-inv)}

@media (max-width:720px){
  .grid6>i:nth-child(n+4){display:none}
  .grid-page,.grid-inverse{display:none}
}

/* ---------- Reading trace: thin blue progress line at the top ---------- */
.read-trace{position:fixed;top:0;left:0;right:0;z-index:85;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@supports (animation-timeline: scroll()){
  .read-trace{animation:read linear both;animation-timeline:scroll(root)}
}
@supports not (animation-timeline: scroll()){
  .read-trace{display:none}
}
@keyframes read{to{transform:scaleX(1)}}

/* ---------- Section index (assets/js/section-nav.js) ---------- */
/* Floating pill at the top on desktop, at the bottom (thumb reach) on phones */
.sx{position:fixed;top:14px;left:50%;z-index:80;display:flex;gap:2px;max-width:calc(100% - 24px);padding:4px;border:1px solid var(--hair);border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);opacity:0;visibility:hidden;transform:translate(-50%,-10px);transition:opacity .35s,transform .35s var(--ease-out),visibility 0s .35s}
.sx.is-shown{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .35s,transform .35s var(--ease-out)}
.sx a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border-radius:999px;color:var(--muted);font-size:11px;white-space:nowrap;transition:color .2s,background-color .2s}
.sx a:hover{color:var(--fg)}
.sx a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .25s var(--ease-out)}
.sx a[aria-current]{color:var(--fg);background:var(--wash)}
.sx a[aria-current]::before{transform:scale(1)}
@media (max-width:600px){
  .sx{top:auto;bottom:12px;overflow-x:auto;scrollbar-width:none;transform:translate(-50%,10px)}
  .sx::-webkit-scrollbar{display:none}
  .sx a{min-height:40px;padding:0 10px;font-size:10px}
}
@media (prefers-reduced-motion: reduce){.sx,.sx.is-shown{transition:none}}