/* Every visual enhancement is scoped to a successfully mounted direction 17. */
.oci-direction.o-m-ready { --o-stair-row: clamp(48px, 7vw, 112px); }
.oci-direction .o-m-line { display: block; overflow: hidden; padding-bottom: .13em; margin-bottom: -.13em; color: inherit !important; }
.oci-direction .o-m-line-text { display: block; color: inherit !important; transform-origin: 0 100%; }
.oci-direction .o-m-heading { text-wrap: initial; }
.oci-direction .o-m-reveal { transform-origin: 0 50%; }
/* Word-by-word scroll reveal, with readable grey before the black ink arrives. */
.oci-direction .o-m-quote { position: relative; }
.oci-direction .o-m-quote-word { display: inline-block; opacity: calc(.65 + .35 * var(--o-quote-progress, 1)); transform: translateY(calc(4px * (1 - var(--o-quote-progress, 1)))); }
.oci-direction .o-m-rule { position: relative; border-top-color: transparent !important; }
.oci-direction .o-m-rule-line { position: absolute; inset: -1px 0 auto; height: 1px; background: currentColor; opacity: .4; transform-origin: 0 50%; pointer-events: none; }

/* Preserve the original layout height while the visible header compacts. */
.oci-direction.o-m-ready .o-nav { position: sticky; top: var(--review-height, 60px); height: var(--o-nav-expanded-height, auto); background: transparent; pointer-events: none; transition: padding .5s cubic-bezier(.22,1,.36,1); z-index: 40; }
.oci-direction.o-m-ready .o-nav::before { content: ''; position: absolute; inset: 0 0 auto; height: 100%; background: var(--o-paper); box-shadow: 0 1px 0 var(--o-line); transition: height .5s cubic-bezier(.22,1,.36,1); z-index: -1; }
.oci-direction.o-m-ready .o-nav > * { pointer-events: auto; }
.oci-direction.o-m-ready .o-logo { transition: width .5s cubic-bezier(.22,1,.36,1), padding .5s cubic-bezier(.22,1,.36,1); }
.oci-direction.o-m-ready .o-nav > nav { visibility: visible; transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1), visibility 0s; }
.oci-direction.o-m-ready .o-nav > nav > div { transition: border-color .5s; }
.oci-direction.o-m-ready .o-menu-toggle { position: relative; z-index: 2; transition: background .3s, color .3s, padding .5s; }
.oci-direction.o-m-ready .o-menu-toggle > span[aria-hidden] { display: inline-block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.oci-direction.o-m-ready .o-m-nav-compact { padding: 10px 24px; }
.oci-direction.o-m-ready .o-m-nav-compact::before { height: 80px; }
.oci-direction.o-m-ready .o-m-nav-compact .o-logo { width: 220px; padding: 18px 20px; }
.oci-direction.o-m-ready .o-m-nav-compact > nav { opacity: 0; transform: translateY(-22px); pointer-events: none; visibility: hidden; transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1), visibility 0s .5s; }
.oci-direction.o-m-ready .o-m-nav-compact > nav > div { border-color: transparent; }
.oci-direction.o-m-ready .o-m-measuring, .oci-direction.o-m-ready .o-m-measuring * { transition: none !important; }

/* A right-hand sheet, with a quiet secondary index beneath the main routes. */
.oci-direction.o-m-ready .o-menu { position: fixed; left: auto; right: 0; top: calc(var(--review-height, 60px) + var(--o-nav-expanded-height, 140px)); bottom: 0; width: 54vw; min-width: 600px; max-width: 1040px; max-height: none; padding: 26px 3.5vw 45px; background: var(--o-paper); color: var(--o-blue); box-shadow: -1px 0 0 var(--o-line), -20px 0 45px #15144612; overflow: auto; overscroll-behavior: contain; transform: translate3d(101%,0,0); z-index: 1; transition: top .5s cubic-bezier(.22,1,.36,1); }
.oci-direction.o-m-ready .o-m-nav-compact .o-menu { top: calc(var(--review-height, 60px) + 80px); }
.oci-direction.o-m-ready .o-menu .o-menu-primary { display: grid; grid-template-columns: 1fr; gap: 0; }
.oci-direction.o-m-ready .o-menu .o-menu-primary a { font-size: clamp(2.25rem,3.45vw,4rem); line-height: 1.03; letter-spacing: -.05em; padding: 12px 0 16px; align-items: baseline; gap: 18px; border-color: var(--o-line); }
.oci-direction.o-m-ready .o-menu .o-menu-primary a span { flex: 0 0 22px; font: 12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: 0; }
.oci-direction.o-m-ready .o-menu .o-menu-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; margin-top: 28px; }
.oci-direction.o-m-ready .o-menu .o-menu-secondary a { font: 14px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; text-transform: uppercase; padding: 14px 0; border-color: var(--o-line); gap: 14px; }
.oci-direction.o-m-ready .o-menu a[aria-current] { color: inherit; text-decoration: underline; text-underline-offset: .12em; }
.oci-direction.o-m-ready .o-menu a:hover { text-decoration: none; }
.oci-direction.o-m-ready .o-menu a:focus-visible { outline-offset: -2px; }
.oci-direction.o-m-menu-open .o-menu-toggle { background: var(--o-blue); color: var(--o-paper); }
.oci-direction.o-m-menu-open .o-menu-toggle > span[aria-hidden] { transform: rotate(45deg); }

/* Cream bands draw across the edge as the blue statement leaves the viewport. */
.oci-direction.o-m-ready .o-statement { position: relative; clip-path: none; padding-bottom: calc(65px + var(--o-stair-row) * 3); }
.oci-direction .o-m-stairs { position: absolute; inset: auto 0 0; display: grid; grid-template-rows: repeat(3,var(--o-stair-row)); pointer-events: none; }
.oci-direction .o-statement > .o-m-stairs { margin: 0; gap: 0; grid-template-columns: 1fr; }
.oci-direction .o-m-stairs > span { display: block; height: 100%; background: var(--o-paper); transform-origin: 0 50%; }

/* The introduction holds while the original paper cards settle beside it. */
@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
  .oci-direction.o-m-ready .o-m-method { align-items: start; }
  .oci-direction.o-m-ready .o-m-method-intro { position: sticky; top: calc(var(--review-height, 60px) + 115px); align-self: start; }
  .oci-direction.o-m-ready .o-m-method-card { backface-visibility: hidden; }
}
.oci-direction.o-m-ready .o-action { position: relative; gap: 22px; transition: gap .45s cubic-bezier(.22,1,.36,1); }
.oci-direction.o-m-ready .o-action > span:first-child,
.oci-direction.o-m-ready .o-action > span:last-child { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.oci-direction.o-m-ready .o-action:hover > span:first-child,
.oci-direction.o-m-ready .o-action:focus-visible > span:first-child { transform: translateX(-9px); }
.oci-direction.o-m-ready .o-action:hover > span:last-child,
.oci-direction.o-m-ready .o-action:focus-visible > span:last-child { transform: translateX(9px); }
.oci-direction.o-m-ready .o-link { width: fit-content; background-image: linear-gradient(currentColor,currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; transition: background-size .4s cubic-bezier(.22,1,.36,1); }
.oci-direction.o-m-ready .o-link:hover,
.oci-direction.o-m-ready .o-link:focus-visible { background-size: 100% 1px; text-decoration: none; }
.oci-direction.o-m-ready details > summary { transition: color .3s; }
.oci-direction.o-m-ready details > summary > span[aria-hidden] { display: inline-block; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.oci-direction.o-m-ready details[open] > summary > span[aria-hidden] { transform: rotate(45deg); }

@media (max-width: 1050px) {
  .oci-direction.o-m-ready .o-m-nav-compact { padding: 10px 16px; }
  .oci-direction.o-m-ready .o-menu { min-width: 0; width: 64vw; padding: 25px 4vw 40px; }
  .oci-direction.o-m-ready .o-menu .o-menu-primary a { font-size: clamp(2rem,4.4vw,3rem); }
}
@media (max-width: 700px) {
  .oci-direction.o-m-ready { --o-stair-row: clamp(32px, 8vw, 56px); }
  .oci-direction.o-m-ready .o-nav { padding: 14px 16px; }
  .oci-direction.o-m-ready .o-m-nav-compact { padding: 10px 16px; }
  .oci-direction.o-m-ready .o-m-nav-compact::before { height: 76px; }
  .oci-direction.o-m-ready .o-m-nav-compact .o-logo { width: 180px; padding: 17px 15px; }
  .oci-direction.o-m-ready .o-menu { top: calc(var(--review-height, 60px) + var(--o-nav-expanded-height, 84px)); width: 100%; max-width: none; padding: 22px 6vw 35px; }
  .oci-direction.o-m-ready .o-m-nav-compact .o-menu { top: calc(var(--review-height, 60px) + 76px); }
  .oci-direction.o-m-ready .o-menu .o-menu-primary a { font-size: clamp(1.85rem,7.3vw,2.6rem); padding: 11px 0 14px; }
  .oci-direction.o-m-ready .o-menu .o-menu-secondary { gap: 0 20px; margin-top: 22px; }
  .oci-direction.o-m-ready .o-menu .o-menu-secondary a { font-size: 12px; gap: 9px; padding: 13px 0; }
  .oci-direction.o-m-ready .o-m-method-intro { position: static; }
  .oci-direction .o-m-line { padding-bottom: .15em; margin-bottom: -.15em; }
}
@media (prefers-reduced-motion: reduce) {
  .oci-direction .o-m-quote-word { opacity: 1 !important; transform: none !important; }
  .oci-direction .o-m-line-text,
  .oci-direction .o-m-reveal { opacity: 1 !important; transform: none !important; }
  .oci-direction .o-m-rule-line,
  .oci-direction .o-m-stairs > span { transform: scaleX(1) !important; }
  .oci-direction.o-m-ready .o-nav,
  .oci-direction.o-m-ready .o-nav::before,
  .oci-direction.o-m-ready .o-menu,
  .oci-direction.o-m-ready .o-action,
  .oci-direction.o-m-ready .o-link { transition: none !important; }
}
@media print {
  .oci-direction .o-m-quote-word { opacity: 1 !important; transform: none !important; }
  .oci-direction.o-m-ready .o-nav { position: static; height: auto; }
  .oci-direction.o-m-ready .o-nav::before { height: 100%; }
  .oci-direction .o-m-line-text,
  .oci-direction .o-m-reveal { opacity: 1 !important; transform: none !important; }
  .oci-direction .o-m-method-intro { position: static !important; }
  .oci-direction .o-m-method-card { transform: none !important; }
  .oci-direction .o-m-stairs > span { transform: scaleX(1) !important; }
  .oci-direction .o-menu { display: none !important; }
}