/* The motion kit, on every page but /atlas: smooth scrolling for wheel and
   trackpad, text that rises behind a mask, photographs that open and drift,
   bands with a slow light behind them, type that inks in as you read, and
   the bar turning dark over dark bands. Everything that hides or moves is
   under html.fl, which floe.js adds last; without it, or with reduced
   motion, every page is static and fully visible. home.css holds the
   homepage's own sections. */
:root{--fl-ease:cubic-bezier(.19,1,.22,1);--fl-rise:cubic-bezier(0,.55,.45,1);--fl-gut:max(18px,calc((100% - 1200px)/2))}
.fl .reveal{opacity:1!important;transform:none!important;transition:none!important}

/* text rises and fades in. Transform and opacity only: the phone's
   compositor moves them without repainting, which is what keeps a scroll
   smooth while things arrive. A clip-path here repainted every frame. */
.fl [data-rv]{opacity:0;transform:translate3d(0,40px,0);transition:opacity 1.1s var(--fl-rise) var(--d,0ms),transform 1.3s var(--fl-rise) var(--d,0ms)}
.fl [data-rv].is-in{opacity:1;transform:none}
.fl [data-rv=img]{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.6s var(--fl-ease) var(--d,0ms)}
.fl [data-rv=img] img{transform:scale(1.14);transition:transform 2.2s var(--fl-ease) var(--d,0ms)}
.fl [data-rv=img].is-in{clip-path:inset(0)}
.fl [data-rv=img].is-in img{transform:scale(1)}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}

/* the bar goes clear while it sits over the photograph */
.nav-shell{transition:background-color .5s var(--fl-ease),border-color .5s var(--fl-ease),backdrop-filter .5s}
.fl-over .nav-shell:not(:has(.nav-links.open)):not(:has(.nav-trigger[aria-expanded=true])){background:rgba(17,23,31,.62);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.fl-over.fl-clear .nav-shell:not(:has(.nav-links.open)):not(:has(.nav-trigger[aria-expanded=true])){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.fl-over .nav-shell:not(:has(.nav-links.open)):not(:has(.nav-trigger[aria-expanded=true])) .identity{filter:brightness(0) invert(1)}
.fl-over .nav-shell:not(:has(.nav-links.open)):not(:has(.nav-trigger[aria-expanded=true])) .menu-button{color:#fff}
.fl-over .nav-shell:not(:has(.nav-links.open)):not(:has(.nav-trigger[aria-expanded=true])) .btn.primary{background:#fff;border-color:#fff;color:var(--ink)}
@media(min-width:961px){.fl-over .nav-shell:not(:has(.nav-trigger[aria-expanded=true])) .nav-links>a,.fl-over .nav-shell:not(:has(.nav-trigger[aria-expanded=true])) .nav-trigger{color:#fff}}
/* ===== the lower half: every band has a tone, nothing is a pale gap ===== */
:root{--fl-sand:#ece5da;--fl-sand-ink:#2a241d;--fl-dark:#11171f}
.fl-tone{position:relative;overflow:clip;isolation:isolate}
.fl-sand{background:var(--fl-sand)}
.fl-dark{background:var(--fl-dark);color:#fff}
.fl-dark h2,.fl-dark h3,.fl-dark b{color:#fff}
.fl-dark p,.fl-dark .eyebrow{color:#aeb8c5}

/* a band of large type that travels with the scroll */
.fl-marquee{overflow:clip;padding:clamp(40px,7vh,80px) 0 clamp(20px,4vh,40px);background:var(--paper)}
.fl-mq-track{display:flex;align-items:center;gap:clamp(24px,3vw,48px);width:max-content;white-space:nowrap;will-change:transform}
.fl-mq-track span{font-size:clamp(56px,10vw,160px);line-height:1;font-weight:600;letter-spacing:-.045em;color:var(--ink)}
.fl-mq-track span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.fl-mq-track i{font-style:normal;font-size:clamp(20px,2.4vw,36px);color:var(--accent)}
.ticker{border-top:0}

/* three more disciplines: an index */
.fl-index{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(42,36,29,.22)}
.fl-row{position:relative;display:grid;grid-template-columns:70px minmax(0,1.2fr) minmax(0,1fr) 48px;gap:24px;align-items:center;padding:clamp(28px,4vh,40px) 0;border-top:1px solid rgba(42,36,29,.22);color:var(--fl-sand-ink)}
.fl-row-n{font:500 12px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--accent)}
.fl-row-t{font-size:clamp(26px,3.2vw,46px);line-height:1.05;font-weight:600;letter-spacing:-.035em;transition:transform .6s var(--fl-ease)}
.fl-row-d{font-size:15px;line-height:1.6;color:#5d554b}
.fl-row-a{width:48px;height:48px;border-radius:50%;border:1px solid rgba(42,36,29,.3);display:grid;place-items:center;transition:background .4s,color .4s,transform .6s var(--fl-ease)}
@media(hover:hover){.fl-row:hover .fl-row-t{transform:translateX(12px)}.fl-row:hover .fl-row-a{background:var(--ink);color:#fff;transform:rotate(45deg)}}
@media(max-width:720px){.fl-row{grid-template-columns:40px 1fr 40px;gap:12px}.fl-row-d{grid-column:2/3}.fl-row-a{grid-column:3;grid-row:1;width:40px;height:40px}}
.fl-disc .section-top{margin-bottom:clamp(32px,5vh,52px)}
[data-ink] .w{transition:color .6s var(--fl-ease)}

/* ===== every other page ===== */
/* the opening of a page: its words rise on load (floe.js) */
/* the closing call to action on every page: a flat dark band */
.cta.fl-glow{background:var(--fl-dark);border-color:transparent;color:#fff}
.cta.fl-glow h2{color:#fff}
.cta.fl-glow h2 em{color:#aeb8c5}
.cta.fl-glow p,.cta.fl-glow .eyebrow{color:#aeb8c5}
.cta.fl-glow .btn{color:#fff;border-color:rgba(255,255,255,.45)}
.cta.fl-glow .btn.primary{background:#fff;border-color:#fff;color:var(--ink)}
.fl .cta.fl-glow h2 .w{color:rgba(255,255,255,.22)}
.fl .cta.fl-glow h2 .w.on{color:#fff}
.fl .cta.fl-glow h2 em .w.on{color:#aeb8c5}