/* OneJasper's four-part mark becomes the geometry of a chapter change. */
.oj-transition{position:fixed;inset:0;z-index:1000;pointer-events:none;visibility:hidden;isolation:isolate;color:#f3f0e7;overflow:hidden}
.oj-transition[hidden]{display:none}
html.oj-arrival .oj-transition[hidden]{display:block}
html.oj-arrival .oj-transition,.oj-transition.is-covering,.oj-transition.is-opening{visibility:visible;pointer-events:auto}
.oj-transition-pane{position:absolute;width:calc(50% + 1px);height:calc(50% + 1px);background:#202a24;will-change:transform;transition:transform 280ms cubic-bezier(.76,0,.24,1)}
.oj-transition-pane:nth-child(1){left:0;top:0;transform:translateY(-101%)}
.oj-transition-pane:nth-child(2){right:0;top:0;background:#222c26;transform:translateY(-101%);transition-delay:25ms}
.oj-transition-pane:nth-child(3){left:0;bottom:0;background:#222c26;transform:translateY(101%);transition-delay:25ms}
.oj-transition-pane:nth-child(4){right:0;bottom:0;transform:translateY(101%)}
html.oj-arrival .oj-transition-pane,.oj-transition.is-covering .oj-transition-pane{transform:translateY(0)}
.oj-transition-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;opacity:0;transform:translateY(9px);transition:opacity 120ms ease-out,transform 180ms cubic-bezier(.22,1,.36,1)}
html.oj-arrival .oj-transition-copy,.oj-transition.is-covering .oj-transition-copy{opacity:1;transform:none;transition-delay:305ms}
.oj-transition-mark{display:grid;grid-template-columns:repeat(2,32px);grid-template-rows:repeat(2,32px);margin-bottom:33px}
.oj-transition-mark i{display:block;width:32px;height:32px;background-image:url('/assets/onejasper-mark.png');background-size:64px 64px;opacity:.48;transform:translate(var(--petal-x),var(--petal-y));transition:transform 320ms cubic-bezier(.22,1,.36,1),opacity 320ms ease-out}
.oj-transition-mark i:nth-child(1){background-position:0 0;--petal-x:-5px;--petal-y:-5px}.oj-transition-mark i:nth-child(2){background-position:100% 0;--petal-x:5px;--petal-y:-5px}.oj-transition-mark i:nth-child(3){background-position:0 100%;--petal-x:-5px;--petal-y:5px}.oj-transition-mark i:nth-child(4){background-position:100% 100%;--petal-x:5px;--petal-y:5px}
html.oj-arrival .oj-transition-mark i,.is-covering .oj-transition-mark i{transform:none}
.oj-transition[data-chapter="01"] .oj-transition-mark i:nth-child(1),.oj-transition[data-chapter="02"] .oj-transition-mark i:nth-child(2),.oj-transition[data-chapter="03"] .oj-transition-mark i:nth-child(3),.oj-transition[data-chapter="04"] .oj-transition-mark i:nth-child(4){opacity:1}
.oj-transition-kicker{font-family:var(--serif);font-size:12px;letter-spacing:.22em;color:#c2a778;margin:0 0 17px}
.oj-transition-title{font-family:var(--sans);font-size:clamp(32px,4vw,54px);font-weight:400;letter-spacing:.16em;margin:0 0 0 .16em;line-height:1.4}
.oj-transition-rule{width:34px;height:1px;background:#ae915c;margin-top:28px;opacity:.75}
.oj-transition-folio{position:absolute;left:var(--gutter);right:var(--gutter);bottom:32px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.16em;color:#aeb6ac}
.oj-transition-folio span:last-child{font-family:var(--serif);font-size:15px;letter-spacing:.08em}
.oj-transition.is-opening .oj-transition-pane{transition-duration:540ms;transition-timing-function:cubic-bezier(.65,0,.15,1)}
.oj-transition.is-opening .oj-transition-copy{opacity:0;transform:translateY(-9px);transition-duration:160ms;transition-delay:0ms}
html.oj-arrival .page-heading>.eyebrow,html.oj-arrival .page-heading>h1,html.oj-arrival .page-heading>.page-lead{opacity:0;transform:translateY(18px)}
.oj-content-enter .page-heading>.eyebrow{animation:oj-chapter-line 570ms 90ms cubic-bezier(.22,1,.36,1) both}
.oj-content-enter .page-heading>h1{animation:oj-chapter-line 650ms 150ms cubic-bezier(.22,1,.36,1) both}
.oj-content-enter .page-heading>.page-lead{animation:oj-chapter-line 650ms 225ms cubic-bezier(.22,1,.36,1) both}
.oj-content-enter .hero-copy>.eyebrow{animation:oj-chapter-line 600ms 100ms cubic-bezier(.22,1,.36,1) both}
.oj-content-enter .hero-copy>h1{animation:oj-chapter-line 650ms 160ms cubic-bezier(.22,1,.36,1) both}
.oj-content-enter .hero-copy>.hero-sub{animation:oj-chapter-line 650ms 240ms cubic-bezier(.22,1,.36,1) both}
@keyframes oj-chapter-line{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.site-header #main-nav a{min-height:44px;display:flex;align-items:center}
.site-header #main-nav a:after{height:1px;background:var(--gold);transition:right 300ms cubic-bezier(.22,1,.36,1)}
.nav-label{transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.nav-index{position:absolute;top:-4px;left:0;font-family:var(--serif);font-size:9px;letter-spacing:.08em;color:var(--gold);opacity:0;transform:translateY(4px);transition:opacity 220ms ease-out,transform 260ms cubic-bezier(.22,1,.36,1)}
#main-nav a:hover .nav-index,#main-nav a:focus-visible .nav-index{opacity:1;transform:none}
#main-nav a:hover .nav-label{transform:translateY(-1px)}
#main-nav a:focus-visible{outline:1px solid var(--gold);outline-offset:7px}
@media(max-width:900px){.site-header.menu-open #main-nav{gap:0;padding-top:10px;padding-bottom:28px}.site-header.menu-open #main-nav a{max-width:none;justify-content:space-between;min-height:65px;border-bottom:1px solid #ffffff18;font-size:23px}.site-header.menu-open #main-nav a:after{display:none}.site-header.menu-open .nav-index{position:static;font-size:12px;opacity:.65;transform:none}.site-header.menu-open #main-nav a[aria-current] .nav-index{opacity:1}.site-header.menu-open #main-nav a[aria-current] .nav-label{color:#c8ad7d}.site-header.menu-open #main-nav a .nav-label{animation:oj-chapter-line 350ms cubic-bezier(.22,1,.36,1) both}.site-header.menu-open #main-nav a:nth-child(2) .nav-label{animation-delay:35ms}.site-header.menu-open #main-nav a:nth-child(3) .nav-label{animation-delay:70ms}.site-header.menu-open #main-nav a:nth-child(4) .nav-label{animation-delay:105ms}}
@media(max-width:600px){.oj-transition-mark{margin-bottom:27px}.oj-transition-title{font-size:34px}.oj-transition-kicker{font-size:10px}.oj-transition-folio{bottom:26px;font-size:8px}.oj-transition-folio span:last-child{font-size:12px}}
@media(prefers-reduced-motion:reduce){.oj-transition{display:none!important}html.oj-arrival .page-heading>*{opacity:1;transform:none}.nav-label,.nav-index{transform:none!important}}

main h1[tabindex="-1"]:focus{outline:none}

/* Two clean strokes resolve into a proper close icon, without rotating the button. */
.site-header .menu-button i{position:relative;width:22px;height:14px;border:0;transform:none}
.site-header .menu-button i:before,.site-header .menu-button i:after{content:'';position:absolute;left:0;width:22px;height:1px;background:currentColor;transform-origin:center;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.site-header .menu-button i:before{top:4px}.site-header .menu-button i:after{top:10px}
.site-header.menu-open .menu-button i:before{transform:translateY(3px) rotate(45deg)}
.site-header.menu-open .menu-button i:after{transform:translateY(-3px) rotate(-45deg)}