/* Homepage only. Keep THE WAY's typography, paper, charcoal and blue seal. */
:root{--muted:#656B6F}
h1,h2{text-wrap:balance}
#hero h1{text-wrap:wrap}
#hero h1 .red,.shead .red{white-space:nowrap}
#hero .hero-formula{white-space:nowrap}
p{text-wrap:pretty}
.pull.big{text-wrap:balance}
.pull.big cite{text-wrap:pretty}
.hero-id,.hero-en,.hero-meta i,.clist .cd,.clist .ca,.fcopy,.fseal,.belief em{color:var(--muted)}
.hero-meta{row-gap:22px}
.row p{max-width:36em;line-height:1.78}
.row .n{font-variant-numeric:tabular-nums;padding-top:.06em}
.rowfig .bignum{flex:0 0 auto;white-space:nowrap;line-height:1.1}
.rowfig .u{min-width:0}
.clist .cl{min-width:0}
.clist .cd{overflow-wrap:anywhere}

/* Opaque while reading: the dark consulting section must not tint the navigation. */
#nav.scrolled,#nav.menu-open{background:var(--paper);backdrop-filter:none;border-bottom-color:var(--line)}
#nav .navlinks a{position:relative;padding-block:6px}
#nav .navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--seal);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
#nav .navlinks a[aria-current="location"]{color:var(--seal)}
#nav .navlinks a[aria-current="location"]::after{transform:scaleX(1)}
#nav .tws{transition:transform .35s var(--ease)}

/* Keyboard focus has the same care as pointer feedback. */
a:focus-visible,button:focus-visible{outline:2px solid var(--seal);outline-offset:5px}
.reverse a:focus-visible{outline-color:var(--ice)}
.skip-link{position:fixed;left:20px;top:12px;z-index:100;padding:10px 16px;
  background:var(--paper);color:var(--ink);border:1px solid var(--seal);
  transform:translateY(-180%);font-size:16px}
.skip-link:focus{transform:none}
#main:focus{outline:none}
#main:focus-visible #about .shead h2{outline:2px solid var(--seal);outline-offset:6px}
.btn,.btn-ghost{transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),transform .16s var(--ease)}
.btn::after,.btn-ghost::after{content:"→";display:inline-block;font-family:var(--latin);font-weight:400;
  letter-spacing:0;transition:transform .24s var(--ease)}
.btn[target="_blank"]::after{content:"↗"}
.btn-ghost{gap:.7em}
.btn:active,.btn-ghost:active{transform:translateY(1px)}
.vcell{transition:background .24s var(--ease),border-color .24s var(--ease)}
.vcell:focus-visible{outline-offset:-5px;background:var(--paper2)}
.clist a{transition:color .24s var(--ease),padding-left .24s var(--ease)}
.clist a:focus-visible .ca{color:var(--seal)}

@media (hover:hover) and (pointer:fine){
  #nav .navlinks a:hover::after{transform:scaleX(1)}
  #nav>a:hover .tws{transform:rotate(12deg)}
  .btn:hover::after,.btn-ghost:hover::after{transform:translateX(3px)}
}
#nav>a:focus-visible .tws{transform:rotate(12deg)}
.btn:focus-visible::after,.btn-ghost:focus-visible::after{transform:translateX(3px)}

/* Progressive enhancement: visible content is the default, animation is optional. */
.reveal{opacity:1;transform:none;transition:opacity .62s var(--ease),transform .62s var(--ease)}
html.motion-ready .reveal:not(.in){opacity:0;transform:translateY(12px)}
.reveal-1{transition-delay:.06s}
.reveal-2{transition-delay:.12s}
.reveal-3{transition-delay:.18s}

@media (max-width:860px){
  #nav .navlinks{display:flex;visibility:hidden;max-height:calc(100dvh - var(--navh,58px));
    overflow-y:auto;overscroll-behavior:contain;padding-bottom:20px}
  #nav .navlinks.open{visibility:visible}
  #nav .navlinks a{flex:0 0 auto;padding-block:12px;min-height:48px}
  #nav .navlinks a::after{right:auto;width:20px;bottom:9px}
  #nav .navlinks a[aria-current="location"]{font-weight:600}
}
@media (max-width:540px){
  .hero-cta,.btnrow{width:100%;gap:10px}
  .hero-cta>a,.btnrow>a{width:100%;justify-content:space-between}
  .hero-meta span{max-width:100%}
  .clist a{gap:14px}
  .clist .ca{letter-spacing:.08em}
}

/* If JavaScript is disabled, expose the existing navigation in normal flow. */
html:not(.has-js) #nav{position:relative;background:var(--paper)}
html:not(.has-js) .navtoggle{display:none}
@media (max-width:860px){
  html:not(.has-js) #nav{flex-wrap:wrap;gap:16px}
  html:not(.has-js) #nav .navlinks{position:static;visibility:visible;opacity:1;transform:none;
    pointer-events:auto;max-height:none;overflow:visible;flex:0 0 100%;padding:0;border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.motion-ready .reveal:not(.in),.reveal{opacity:1;transform:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}